/* ============================================================
Palette derived from the VT logo.
The mark is effectively pure greyscale (mean channel spread 2.5/255,
luminance 0-249), so the ground is graphite and silver and the metallic
gradients below echo the gloss in the mark itself. The mark dictates no
hue, so the accent is a free choice: blue, used for the jobs a neutral
cannot do — telling the reader where to act.
============================================================ */
:root{
/* surfaces */
--bg:#f6f7f8;
--bg-2:#eceef1; /* alternating section ground */
--line:#e0e3e7;
--line-2:#cdd2d8;
/* text */
--ink:#14171a;
--ink-2:#5f676e;
--ink-3:#8b939b; /* was used in four places but never defined */
/* brand accent — fintech blue.
#2f6bff reaches only 4.2:1 on the light ground, so small text steps down
to --accent-ink (5.5:1). White on the fill sits at 4.5:1 at the top stop,
which is why the gradient runs downward. Dark sections step up to
--accent-2. */
--accent:#2f6bff;
--accent-ink:#2359e0;
--accent-hover:#2359e0;
--accent-2:#8fb0ff;
--accent-soft:rgba(47,107,255,.10);
--accent-line:rgba(47,107,255,.32);
--accent-fill:linear-gradient(180deg,#3d76ff 0%,#2f6bff 55%,#2359e0 100%);
--accent-fill-hover:linear-gradient(180deg,#5286ff 0%,#3d76ff 55%,#2f6bff 100%);
--silver:#8b939b; /* neutral counterpart, still used for quiet text */
/* dark sections */
--dark:#0e1113;
--dark-2:#181c1f;
--dark-line:rgba(255,255,255,.10);
--dark-ink-2:#9ba3ab;
/* brushed-metal fills, straight off the logo's gloss */
/* Narrow bands: a wide swing between the stops reads as a dirty smudge at
headline size rather than as gloss. */
--metal-dark:linear-gradient(118deg,#0f1214 0%,#3c444b 36%,#171c20 56%,#4a535b 80%,#1f252a 100%);
/* The light variant sits on near-black, where the eye reads any dip as dirt
rather than as sheen, so its band is narrower still than the dark one. */
--metal-light:linear-gradient(118deg,#ffffff 0%,#e3e9ee 38%,#ffffff 58%,#dce3e9 82%,#f7f9fb 100%);
--r:14px;
--maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--bg);color:var(--ink);
font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;line-height:1.55;
}
/* The closed cart drawer is position:fixed and parked off-screen with
translateX(102%), which still grows the scrollable area — on a 390px phone
the page became 498px wide and everything looked cropped. Clip rather than
hide: overflow-x:clip does not turn the root into a scroll container, so the
sticky header and smooth anchor scrolling keep working. */
html{overflow-x:hidden}
@supports (overflow-x:clip){ html{overflow-x:clip} }
img{max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.eyebrow{
font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.18em;
text-transform:uppercase;color:var(--accent-ink);margin:0 0 18px;font-weight:500;
}
.eyebrow.grey{color:var(--ink-2)}
/* Copper at full strength sits too close to the near-black ground, so every
accent-coloured mark on a dark section steps up to the lighter tone. */
.dark .eyebrow,.on-dark .eyebrow{color:var(--accent-2)}
.dark .check,.on-dark .check,.dark .numitem .no,.on-dark .numitem .no{color:var(--accent-2)}
h1,h2,h3{letter-spacing:-.025em;line-height:1.06;margin:0}
h1{font-size:clamp(34px,5.6vw,68px);font-weight:800}
h2{font-size:clamp(28px,4vw,46px);font-weight:800;line-height:1.08}
h3{font-size:20px;font-weight:700;letter-spacing:-.015em}
/* Headline emphasis. Brushed metal rather than a second hue — the same
move the logo makes. The plain colour is the fallback: without it, a
browser lacking background-clip:text would render the words invisible. */
.green{color:var(--silver)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.green{
background:var(--metal-dark);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
/* On a dark ground the gradient kept eating the last letter of a highlighted
word, so highlights there are simply white. The sheen stays on light
sections, where it has enough contrast to survive. */
.dark .green,.on-dark .green{
background:none;-webkit-text-fill-color:#ffffff;color:#ffffff}
}
p{margin:0}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--ink-2);max-width:62ch}
section{padding:clamp(64px,8vw,116px) 0}
.divider{height:1px;background:var(--line);border:0;margin:0}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;
padding:13px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;
transition:transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s;
white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
/* Copper reads on both grounds, so the button needs no light/dark variant —
which also removes the exception the application form used to need. */
.btn-primary{background:var(--accent-fill);color:#fff;border-color:rgba(0,0,0,.22)}
.btn-primary:hover{background:var(--accent-fill-hover)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--line-2)}
.on-dark .btn-ghost{border-color:rgba(255,255,255,.22);color:#fff}
.on-dark .btn-ghost:hover{border-color:rgba(255,255,255,.5)}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(3px)}
/* ---------- header ---------- */
header{
position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);
backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.03em;font-size:17px}
/* The VT mark ships as a tightly cropped image (~1.84:1), so height drives the
size and width follows. width/height attributes on the ![]()
reserve the box
and keep the header from shifting while the logo loads. */
.logo{height:26px;width:auto;display:block;object-fit:contain}
.navlinks{display:flex;gap:28px;margin:0 auto;font-size:14px;color:#4b5158;font-weight:500}
.navlinks a:hover{color:var(--ink)}
.navcta{display:flex;gap:10px;align-items:center}
.burger{display:none;background:none;border:0;font-size:20px;padding:6px}
/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(46px,6vw,78px) 0 clamp(50px,6vw,80px);overflow:hidden}
.hero-grid{position:absolute;inset:0;z-index:0;
background-image:radial-gradient(circle,rgba(10,10,10,.14) 1px,transparent 1.4px);
background-size:26px 26px;
-webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 22%,#000 0%,transparent 78%);
mask-image:radial-gradient(ellipse 78% 62% at 50% 22%,#000 0%,transparent 78%);
animation:drift 26s linear infinite;opacity:.8}
@keyframes drift{to{background-position:26px 52px}}
.hero .wrap{position:relative;z-index:1}
.badge{
display:inline-flex;align-items:center;gap:8px;border:1px solid var(--accent-line);
background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;padding:6px 13px;
font-size:12.5px;font-weight:600;margin-bottom:22px
}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(47,107,255,.55);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(47,107,255,0)}100%{box-shadow:0 0 0 0 rgba(47,107,255,0)}}
.hero-head{max-width:900px}
.hero-sub{margin-top:22px;font-size:clamp(16px,1.6vw,19px);color:var(--ink-2);max-width:60ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.trustbar{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;font-size:13.5px;color:var(--ink-2)}
.trustbar b{color:var(--ink);font-weight:700}
.trustbar span{display:flex;align-items:center;gap:8px}
/* ---------- dashboard ---------- */
.dash{
margin-top:44px;border:1px solid var(--line);border-radius:20px;background:#fff;
box-shadow:0 30px 70px -40px rgba(15,20,25,.42);overflow:hidden;
}
.dash-top{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:#fafbfc}
.dots{display:flex;gap:6px}
.dots i{width:9px;height:9px;border-radius:50%;background:#e2e4e6;display:block}
.dash-title{font-size:13px;font-weight:600;color:#4b5158}
.live{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--accent-ink);font-weight:600;
font-family:"JetBrains Mono",monospace;letter-spacing:.06em}
.live i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
.dash-body{display:grid;grid-template-columns:1.35fr 1fr;gap:0}
.dash-main{padding:26px 26px 8px;border-right:1px solid var(--line)}
.kpi-label{font-size:12.5px;color:var(--ink-2);font-weight:500}
.kpi{display:flex;align-items:flex-end;gap:14px;margin-top:6px;flex-wrap:wrap}
.kpi-value{font-size:clamp(38px,5.4vw,60px);font-weight:800;letter-spacing:-.035em;line-height:1;
font-variant-numeric:tabular-nums}
.kpi-delta{display:inline-flex;align-items:center;gap:5px;background:var(--accent-soft);color:var(--accent-ink);
border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:700;margin-bottom:6px}
.chart{margin-top:18px;position:relative}
.chart svg{display:block;width:100%;height:170px}
.chart-x{display:flex;justify-content:space-between;font-size:11px;color:#8b939b;margin-top:8px;
font-family:"JetBrains Mono",monospace}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0 24px}
.tile{border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.tile .t-l{font-size:11px;color:var(--ink-2);letter-spacing:.02em}
.tile .t-v{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
.dash-side{padding:22px 24px}
.side-h{font-size:12.5px;font-weight:700;color:#4b5158;margin-bottom:16px;display:flex;justify-content:space-between}
.side-h span{color:var(--ink-2);font-weight:500}
.src{margin-bottom:15px}
.src-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:7px}
.src-row .n{display:flex;align-items:center;gap:8px;font-weight:600}
.src-row .n i{width:9px;height:9px;border-radius:3px;display:block}
/* Brand marks replace the colour chips. A fixed box rather than intrinsic
width, so the five logos — which run from square to 2:1 — all indent their
label by the same amount instead of leaving a ragged left edge. */
.src-row .n img.brand{width:28px;height:18px;object-fit:contain;display:block;flex:0 0 auto}
.src-row .v{font-variant-numeric:tabular-nums;color:var(--ink-2);font-family:"JetBrains Mono",monospace;font-size:12px}
.bar{height:7px;border-radius:99px;background:#e9ecef;overflow:hidden}
.bar span{display:block;height:100%;border-radius:99px;width:0;transition:width 1.6s cubic-bezier(.22,1,.36,1)}
.feed{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.feed-item{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:7px 0;color:#4b5158;
opacity:0;transform:translateY(6px);animation:feedin .5s forwards}
@keyframes feedin{to{opacity:1;transform:none}}
.feed-item .amt{margin-left:auto;font-weight:700;color:var(--ink);font-family:"JetBrains Mono",monospace;font-size:12px}
.feed-item .tag{font-family:"JetBrains Mono",monospace;font-size:10.5px;background:#f4f5f6;border-radius:5px;padding:2px 6px;color:#616870}
/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(16px);filter:blur(4px);transition:opacity .7s ease,transform .7s ease,filter .7s ease}
.rv.in{opacity:1;transform:none;filter:none}
/* ---------- journey ---------- */
.journey{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:44px}
.step{border:1px solid var(--dark-line);border-radius:var(--r);padding:18px;background:rgba(255,255,255,.03)}
.step .no{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--accent-2);letter-spacing:.14em}
.step h4{margin:12px 0 6px;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.step p{font-size:13px;color:var(--dark-ink-2);line-height:1.5}
/* ---------- dark sections ---------- */
.dark{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.dark .lead,.dark p.lead{color:var(--dark-ink-2)}
.dark .eyebrow.grey{color:#7d868e}
.glow{position:absolute;width:760px;height:760px;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(174,182,191,.16),transparent 62%);filter:blur(20px)}
.glow.a{top:-320px;left:-160px}
.glow.b{bottom:-420px;right:-220px;background:radial-gradient(circle,rgba(174,182,191,.10),transparent 62%)}
.dark .wrap{position:relative;z-index:1}
/* ---------- numbered list ---------- */
.numlist{margin-top:38px;border-top:1px solid var(--line)}
.numitem{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--line);
align-items:start;opacity:.42;transition:opacity .5s ease}
.numitem.in{opacity:1}
.numitem .no{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--accent-ink);padding-top:4px}
.numitem h3{margin-bottom:8px}
.numitem p{color:var(--ink-2);font-size:15px;max-width:66ch}
/* ---------- cards / grids ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:#fff}
.dark .card{border-color:var(--dark-line);background:rgba(255,255,255,.03)}
.card .ico{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent-ink);
display:grid;place-items:center;margin-bottom:14px;font-size:16px}
.dark .card .ico{background:rgba(143,176,255,.12);color:var(--accent-2)}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-2);font-size:14.5px}
.dark .card p{color:var(--dark-ink-2)}
/* ---------- pricing cards ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.plan{border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column;background:#fff;
transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease}
.plan:hover{border-color:rgba(47,107,255,.45);transform:translateY(-3px);box-shadow:0 24px 50px -34px rgba(15,20,25,.4)}
.plan.featured{border-color:rgba(47,107,255,.5);box-shadow:0 24px 60px -40px rgba(15,20,25,.5)}
.plan .tagline{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.plan h3{margin:12px 0 8px;font-size:22px}
.plan .desc{color:var(--ink-2);font-size:14.5px;min-height:52px}
.price{display:flex;align-items:baseline;gap:8px;margin:20px 0 4px}
.price .amount{font-size:38px;font-weight:800;letter-spacing:-.03em}
.price .per{font-size:13px;color:var(--ink-2)}
.fee{font-size:13px;color:var(--ink-2);border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);
padding:12px 0;margin:16px 0}
.fee b{color:var(--ink)}
.plan ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.plan li{display:flex;gap:10px;font-size:14px;color:#3d4348;align-items:flex-start}
.check{color:var(--accent-ink);flex:0 0 auto;margin-top:1px}
.plan .btn{margin-top:auto;justify-content:center}
.methods{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pill{font-size:11.5px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:#5a6067;
font-family:"JetBrains Mono",monospace}
#setups .card{display:flex;flex-direction:column}
#setups .card .setup-price{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);width:100%}
#setups .card .setup-price + div{margin-top:2px}
#setups .card p{margin-bottom:0}
#setups .card .setup-price{margin-top:auto}
/* ---------- flow diagram ---------- */
.flow{border:1px solid var(--dark-line);border-radius:var(--r);padding:26px;background:rgba(255,255,255,.03)}
.flow svg{width:100%;height:auto;display:block}
/* ---------- code ---------- */
.codecard{background:#0b0d0e;border:1px solid var(--dark-line);border-radius:var(--r);overflow:hidden}
.codecard .bar-top{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--dark-line);align-items:center}
.codecard .bar-top i{width:9px;height:9px;border-radius:50%;background:#2a2f33;display:block}
.codecard .fname{margin-left:8px;font-family:"JetBrains Mono",monospace;font-size:11.5px;color:#7d868e}
.codecard pre{margin:0;padding:20px;overflow-x:auto;font-family:"JetBrains Mono",monospace;font-size:12.5px;
line-height:1.75;color:#d7dce0}
/* Syntax highlighting carries hierarchy through lightness rather than hue,
so the code block stays inside the monochrome system. */
.k{color:#ffffff;font-weight:600}.s{color:#aeb6bf}.c{color:#69727a}.f{color:#dce2e8}
/* ---------- testimonials ---------- */
.quote{border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:16px}
.quote p{font-size:14.5px;color:#33383d;line-height:1.6}
.who{display:flex;align-items:center;gap:11px;margin-top:auto}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;
background:var(--accent-soft);color:var(--accent-ink)}
.who .nm{font-size:13.5px;font-weight:700}
.who .rl{font-size:12px;color:var(--ink-2)}
/* ---------- big price ---------- */
.bigprice{display:flex;align-items:baseline;gap:12px;justify-content:center;flex-wrap:wrap;margin:26px 0 8px}
.bigprice .n{font-size:clamp(52px,9vw,104px);font-weight:800;letter-spacing:-.045em;line-height:1}
.bigprice .u{font-size:clamp(20px,3vw,30px);font-weight:700;color:var(--ink-2)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.checkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 24px;max-width:860px;margin:34px auto 30px;text-align:left}
.checkgrid div{display:flex;gap:10px;font-size:14.5px;color:#3d4348}
/* ---------- faq ---------- */
.faq{max-width:820px;margin:38px auto 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:16.5px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-ink);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--ink-2);font-size:14.5px;margin-top:10px;max-width:70ch}
/* ---------- footer ---------- */
footer{background:var(--dark);color:#fff;padding:64px 0 30px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.fgrid h5{margin:0 0 14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7d868e;
font-family:"JetBrains Mono",monospace;font-weight:500}
.fgrid a{display:block;font-size:14px;color:#c3c9cf;padding:5px 0}
.fgrid a:hover{color:var(--accent-2)}
.fbottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:46px;padding-top:22px;
border-top:1px solid var(--dark-line);font-size:12.5px;color:#7d868e}
.fbottom a{color:#7d868e}
.disclaimer{font-size:12px;color:#6b737a;max-width:70ch;margin-top:16px;line-height:1.6}
/* ---------- responsive ---------- */
@media(max-width:1020px){
.dash-body{grid-template-columns:1fr}
.dash-main{border-right:0;border-bottom:1px solid var(--line)}
.journey{grid-template-columns:repeat(2,1fr)}
.plans{grid-template-columns:1fr}
.grid4{grid-template-columns:repeat(2,1fr)}
.grid3{grid-template-columns:1fr 1fr}
.checkgrid{grid-template-columns:1fr 1fr}
.fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
.navlinks{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 24px;margin:0}
.navlinks a{padding:10px 0;border-bottom:1px solid var(--line)}
.burger{display:block}
.grid2,.grid3,.checkgrid,.journey{grid-template-columns:1fr}
.tiles{grid-template-columns:1fr 1fr}
.numitem{grid-template-columns:44px 1fr;gap:12px}
.fgrid{grid-template-columns:1fr}
.nav{gap:8px}
.navcta .btn-ghost{display:none}
.navcta .btn-primary{padding:10px 15px;font-size:13px}
.brand{font-size:15px}
.burger{margin-left:auto}
.tiles{gap:10px}
.dash-main,.dash-side{padding:20px 16px}
}
/* --- hero: dashboard first --- */
/* The header is transparent and floats over the page, so the hero has to begin
underneath it. Otherwise .hero-grid starts at the header's lower edge and
everything above stays flat body colour — a hard horizontal seam across the
top of the page. Pull the hero up by the header height and pay the same
amount back as padding, so the content itself does not move. */
:root{ --header-h:74px } /* 14px top padding + 60px nav */
.hero{
margin-top:calc(var(--header-h) * -1);
padding-top:calc(var(--header-h) + clamp(26px,3.4vw,40px));
}
.dash{margin-top:0}
.hero-head{max-width:900px;margin-top:clamp(44px,6vw,72px)}
.hero-flag{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-family:"JetBrains Mono",monospace;
font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.hero-flag b{color:var(--accent-ink);font-weight:500}
/* --- logo marquee --- */
.marquee-wrap{position:relative;overflow:hidden;padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.marquee-wrap.dark-strip{background:var(--dark);border-color:rgba(255,255,255,.08)}
.marquee-label{text-align:center;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.2em;
text-transform:uppercase;color:var(--ink-3);margin-bottom:24px}
.marquee{display:flex;width:max-content;animation:slide 42s linear infinite}
/* No hover pause: the row is meant to run continuously. */
.marquee-row{display:flex;align-items:center;gap:56px;padding-right:56px}
.mk{display:flex;align-items:center;gap:9px;white-space:nowrap;font-weight:700;font-size:19px;letter-spacing:-.02em;
color:#9aa3ab;opacity:.85;transition:color .25s,opacity .25s}
.marquee-wrap:hover .mk{opacity:.55}
.mk:hover{opacity:1}
.mk .glyph{font-size:17px;line-height:1}
.mk.c-stripe:hover{color:#635bff}.mk.c-pp:hover{color:#0070ba}.mk.c-ap:hover{color:#111}
.mk.c-gp:hover{color:#4285f4}.mk.c-kl:hover{color:#ffb3c7}.mk.c-visa:hover{color:#1a1f71}
.mk.c-mc:hover{color:#eb001b}.mk.c-btc:hover{color:#f7931a}.mk.c-eth:hover{color:#627eea}
.mk.c-usdt:hover{color:#26a17b}.mk.c-shop:hover{color:#96bf48}.mk.c-woo:hover{color:#7f54b3}
.mk.c-amex:hover{color:#006fcf}.mk.c-sepa:hover{color:#004494}
.fade-l,.fade-r{position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.fade-l{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.fade-r{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee{animation:none}}
/* --- application form --- */
.form-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start;text-align:left}
@media(max-width:980px){.form-grid{grid-template-columns:1fr;gap:34px}}
.form-card{background:#fff;border-radius:20px;padding:30px;border:1px solid rgba(255,255,255,.1);
box-shadow:0 30px 70px rgba(0,0,0,.35)}
.dark .form-card{color:var(--ink)}
.dark .form-card .sent p{color:var(--ink-2)}
.form-card .fh{font-size:12px;font-family:"JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:20px;display:flex;align-items:center;justify-content:space-between}
.form-card .fh b{color:var(--accent-ink);font-weight:500}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.frow.one{grid-template-columns:1fr}
@media(max-width:560px){.frow{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.01em}
.field label .req{color:var(--accent-ink)}
.field input,.field select,.field textarea{
font:inherit;font-size:14px;color:var(--ink);background:#fbfcfb;border:1px solid var(--line);
border-radius:10px;padding:11px 12px;outline:none;transition:border-color .18s,box-shadow .18s,background .18s;width:100%}
.field textarea{resize:vertical;min-height:86px}
.field select{appearance:none;background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.field input:focus,.field select:focus,.field textarea:focus{
border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(47,107,255,.14)}
.field input::placeholder,.field textarea::placeholder{color:#b3bac0}
.field.err input,.field.err select{border-color:#e4483d;box-shadow:0 0 0 3px rgba(228,72,61,.12)}
.hint{font-size:11.5px;color:var(--ink-3)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:block;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2);
border:1px solid var(--line);background:#fbfcfb;border-radius:999px;padding:8px 14px;transition:.18s}
.opt input:checked+span{color:var(--accent-ink);background:rgba(47,107,255,.12);border-color:rgba(47,107,255,.5)}
.opt span:hover{border-color:var(--line-2)}
.consent{display:flex;gap:10px;align-items:flex-start;margin:6px 0 16px;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.consent input{margin-top:2px;accent-color:var(--accent);width:15px;height:15px;flex:0 0 auto}
.form-card .btn{width:100%;justify-content:center}
.formnote{font-size:11.5px;color:var(--ink-3);text-align:center;margin-top:12px}
.sent{display:none;text-align:center;padding:36px 10px}
.sent .tick{width:56px;height:56px;border-radius:50%;background:rgba(47,107,255,.12);color:var(--accent-ink);
display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 16px}
.sent h3{font-size:21px;margin-bottom:8px}
.sent p{font-size:14px;color:var(--ink-2);max-width:38ch;margin:0 auto}
.form-side ul{list-style:none;margin-top:26px;display:grid;gap:14px}
.form-side li{display:flex;gap:12px;font-size:14.5px;color:#c8cdd2;line-height:1.5}
.form-side li .n{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--accent-2);
border:1px solid rgba(143,176,255,.34);border-radius:6px;padding:2px 7px;height:fit-content;flex:0 0 auto}
/* =========================================================
DESIGN REFRESH — own visual language
========================================================= */
:root{ --r:18px; --shadow:0 1px 2px rgba(15,20,25,.04), 0 12px 28px -18px rgba(15,20,25,.28); }
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
h1,h2,h3,h4,.brand,.kpi-value,.bigprice .n,.price .amount{
font-family:Archivo,Inter,-apple-system,sans-serif;letter-spacing:-.028em}
h1{font-weight:700}h2{font-weight:700}
/* floating pill header */
header{position:sticky;top:0;z-index:60;background:transparent;border:0;backdrop-filter:none;padding:14px 0 0}
header .wrap{max-width:calc(var(--maxw) + 40px)}
.nav{height:60px;padding:0 10px 0 18px;border-radius:16px;background:rgba(255,255,255,.86);
backdrop-filter:saturate(180%) blur(16px);border:1px solid var(--line);box-shadow:var(--shadow)}
.navlinks{font-size:13.5px;color:#5f676e;font-weight:500;gap:24px}
.brand{font-weight:700}
/* squarer buttons, not pills */
.btn{border-radius:12px;font-weight:600;padding:12px 20px}
.btn-primary{box-shadow:0 8px 20px -10px rgba(15,20,25,.75)}
.on-dark .btn-primary{box-shadow:0 8px 22px -12px rgba(0,0,0,.85)}
.btn-ghost{background:#fff}
/* eyebrow with rule */
.eyebrow{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.22em}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px;flex:0 0 auto}
.eyebrow.grey::before{background:var(--ink-2);opacity:.4}
.center .eyebrow{justify-content:center}
/* softer surfaces */
.card{border-radius:var(--r);box-shadow:var(--shadow);background:#fff;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(15,20,25,.05),0 22px 44px -26px rgba(15,20,25,.4)}
.dark .card{box-shadow:none;background:rgba(255,255,255,.04)}
.dash{border-radius:22px;box-shadow:0 2px 4px rgba(15,20,25,.05),0 40px 90px -50px rgba(15,20,25,.55)}
.plan{border-radius:22px;box-shadow:var(--shadow)}
.quote{border-radius:var(--r);box-shadow:var(--shadow);background:#fff}
/* hero: soft mesh instead of dot grid */
.hero-grid{
background-image:
radial-gradient(42% 46% at 10% 4%, rgba(47,107,255,.10), transparent 72%),
radial-gradient(38% 42% at 90% 2%, rgba(120,133,146,.13), transparent 72%),
radial-gradient(34% 38% at 58% 44%, rgba(174,182,191,.14), transparent 72%);
background-size:100% 100%;background-repeat:no-repeat;
-webkit-mask-image:none;mask-image:none;animation:none;opacity:1}
/* numbered list: accent block instead of hairlines */
.numitem{border:0 !important;padding:18px 22px;border-radius:14px;background:transparent;
border-left:3px solid var(--line) !important;margin-bottom:8px;transition:.3s}
.numitem.in{background:#fff;border-left-color:var(--accent) !important;box-shadow:var(--shadow)}
.numitem .no{color:var(--accent-ink)}
/* figures */
.trustbar b,.kpi-delta{color:var(--accent-ink)}
.bigprice .n{color:var(--ink)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.bigprice .n{background:var(--metal-dark);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent}
}
.step .no,.form-side li .n{color:var(--accent-2);border-color:rgba(143,176,255,.34)}
/* Glows sit on near-black, so they stay light. One carries the accent, the
other stays neutral — two copper glows would tint the whole section. */
.dark .glow.a{background:radial-gradient(circle,rgba(90,140,255,.22),transparent 64%)}
.dark .glow.b{background:radial-gradient(circle,rgba(160,172,185,.12),transparent 64%)}
/* section rhythm */
section[style*="#fbfcfb"]{background:var(--bg-2) !important}
.marquee-wrap{background:transparent;border-color:var(--line)}
.fade-l{background:linear-gradient(90deg,var(--bg),rgba(246,247,248,0))}
.fade-r{background:linear-gradient(270deg,var(--bg),rgba(246,247,248,0))}
.form-card{border-radius:22px}
footer{background:var(--dark)}
/* ---------- cart ---------- */
.cart-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:16px;transition:.18s}
.cart-btn:hover{border-color:#cdd2d8;transform:translateY(-1px)}
.cart-count{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:none;align-items:center;justify-content:center;
font-family:Inter,sans-serif}
.cart-count.on{display:flex}
.scrim{position:fixed;inset:0;background:rgba(10,13,15,.5);backdrop-filter:blur(3px);opacity:0;pointer-events:none;
transition:opacity .25s;z-index:90}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:#fff;z-index:100;
transform:translateX(102%);transition:transform .32s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;
box-shadow:-30px 0 80px -30px rgba(10,13,15,.5)}
.drawer.on{transform:none}
.drawer-h{display:flex;align-items:center;justify-content:between;gap:12px;padding:20px 22px;border-bottom:1px solid var(--line)}
.drawer-h h3{font-size:17px;margin-right:auto}
.drawer-x{background:none;border:0;font-size:22px;cursor:pointer;color:var(--ink-2);line-height:1}
.drawer-body{flex:1;overflow:auto;padding:18px 22px}
.drawer-f{border-top:1px solid var(--line);padding:20px 22px;background:var(--bg)}
.ci{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.ci:last-child{border-bottom:0}
.ci-ic{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);
display:grid;place-items:center;font-size:18px;flex:0 0 auto}
.ci-n{font-weight:600;font-size:14.5px}
.ci-d{font-size:12px;color:var(--ink-2);margin-top:2px}
.ci-p{margin-left:auto;text-align:right;font-weight:700;font-size:14.5px;white-space:nowrap}
.ci-rm{display:block;margin-top:4px;background:none;border:0;color:var(--ink-2);font-size:11.5px;cursor:pointer;
text-decoration:underline;padding:0}
.ci-rm:hover{color:#c9483c}
.cart-empty{text-align:center;color:var(--ink-2);font-size:14px;padding:48px 10px}
.sumrow{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink-2);margin-bottom:8px}
.sumrow.total{font-size:18px;color:var(--ink);font-weight:700;margin:12px 0 16px;
font-family:Archivo,Inter,sans-serif}
.drawer-f .btn{width:100%;justify-content:center}
.cart-note{font-size:11.5px;color:var(--ink-2);text-align:center;margin-top:10px}
.added{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--ink);color:#fff;
padding:12px 18px;border-radius:12px;font-size:13.5px;font-weight:600;opacity:0;transition:.28s;z-index:120;
pointer-events:none;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.added.on{opacity:1;transform:translate(-50%,0)}
.plan .btn-row,.card .btn-row{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.plan .btn-row .btn,.card .btn-row .btn{flex:1;justify-content:center;min-width:130px}
.btn-sm{padding:10px 14px;font-size:13.5px}
/* ---------- checkout & contact pages ---------- */
.page-head{padding:clamp(48px,6vw,84px) 0 0}
#product .page-head,#industries .page-head{padding-top:clamp(30px,3.4vw,48px)}
.page-head h1{font-size:clamp(30px,4.4vw,52px)}
.co-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;margin-top:36px}
@media(max-width:900px){.co-grid{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow)}
.panel h3{margin-bottom:18px;font-size:18px}
.sticky-sum{position:sticky;top:96px}
.pay-opts{display:grid;gap:10px;margin:6px 0 4px}
.pay-opt{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:14px;
cursor:pointer;transition:.18s;background:#fafbfc}
.pay-opt:hover{border-color:#cdd2d8}
.pay-opt input{accent-color:var(--accent);width:16px;height:16px}
.pay-opt .pt{display:block}
.pay-opt .pm{display:block;font-weight:600;font-size:14px}
.pay-opt .pd{display:block;font-size:12px;color:var(--ink-2)}
.pay-opt input:checked ~ .pt .pm{color:var(--accent-ink)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.cbox{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.cbox .ico{width:38px;height:38px;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink);
display:grid;place-items:center;font-size:17px;margin-bottom:14px}
.cbox h3{font-size:16px;margin-bottom:6px}
.cbox p{font-size:14px;color:var(--ink-2)}
/* Buttons carry their own colours; without :not(.btn) this rule outranks
.btn-primary and paints the label dark blue on a blue fill. */
.cbox a:not(.btn){color:var(--accent-ink);font-weight:600}
/* =========================================================
SOLUTION CARDS — popular / premium, and the swapped buttons
========================================================= */
/* Add-to-cart is the quiet action now; Buy now carries the fill. */
.btn-ghost.in-cart{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.plan .btn-row .buy-now,.card .btn-row .buy-now{flex:1;justify-content:center}
.plan,#setups .card{position:relative}
.ribbon{
position:absolute;top:0;right:22px;transform:translateY(-50%);
font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
font-weight:600;padding:5px 11px;border-radius:999px;white-space:nowrap;
background:var(--accent);color:#fff;box-shadow:0 6px 16px -8px rgba(15,20,25,.7)
}
.plan.popular{border-color:var(--accent);box-shadow:0 2px 4px rgba(15,20,25,.05),0 26px 54px -30px rgba(47,107,255,.5)}
/* Premium: the one dark card in a light row. Reads as a tier apart without
shouting, and reuses the metallic language from the logo. */
.plan.featured{
background:linear-gradient(168deg,#171b1f 0%,var(--dark) 58%,#0a0d0f 100%);
border-color:rgba(255,255,255,.14);color:#fff;
box-shadow:0 2px 4px rgba(15,20,25,.06),0 34px 70px -34px rgba(10,13,15,.85)
}
.plan.featured::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(120% 60% at 50% 0%,rgba(143,176,255,.16),transparent 62%)
}
/* Lift the card content above the ::before glow — but not the ribbon, which
must stay absolutely positioned or it stretches the full card width. */
.plan.featured > *:not(.ribbon){position:relative}
.plan.featured .ribbon-premium{
background:var(--metal-light);color:#14171a;
box-shadow:0 6px 18px -8px rgba(0,0,0,.9)
}
.plan.featured h3{color:#fff}
.plan.featured .tagline{color:var(--accent-2)}
.plan.featured .desc,.plan.featured .price .per,.plan.featured .fee{color:var(--dark-ink-2)}
.plan.featured .fee{border-color:rgba(255,255,255,.16)}
.plan.featured .fee b{color:#fff}
.plan.featured li{color:#d3dae0}
.plan.featured .check{color:var(--accent-2)}
.plan.featured .pill{border-color:rgba(255,255,255,.2);color:#c3cbd2}
.plan.featured .btn-ghost{border-color:rgba(255,255,255,.28);color:#fff;background:transparent}
.plan.featured .btn-ghost:hover{border-color:rgba(255,255,255,.55)}
.plan.featured .btn-ghost.in-cart{border-color:var(--accent-2);color:var(--accent-2);background:rgba(143,176,255,.12)}
.plan.featured .price .amount{
background:var(--metal-light);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent
}
/* Country flags replace the lettered tiles on the structure cards. */
#setups .card .ico.flag{
width:34px;height:24px;padding:0;background:none;border-radius:5px;overflow:hidden;
border:1px solid var(--line);box-shadow:0 1px 2px rgba(15,20,25,.12);display:block
}
#setups .card .ico.flag img{width:100%;height:100%;object-fit:cover;display:block}
/* =========================================================
MARQUEE + LIVE FEED — brand marks, and the running total
========================================================= */
/* The row was light grey on a light ground and barely readable. */
.mk{color:var(--ink);opacity:1;font-weight:700}
.marquee-wrap:hover .mk{opacity:.45}
.mk:hover{opacity:1}
.mk-logo{width:34px;height:24px;object-fit:contain;display:block;flex:0 0 auto;border-radius:4px}
.mk-tile{
width:34px;height:24px;border-radius:4px;display:grid;place-items:center;flex:0 0 auto;
color:#fff;font-size:11px;font-weight:700;line-height:1;font-family:Inter,sans-serif;
letter-spacing:0
}
.feed-logo{width:22px;height:15px;object-fit:contain;display:block;flex:0 0 auto}
/* Every payment in the feed is added to the headline figure. The bump is what
makes the increment readable — without it the digits just change silently. */
.kpi-value{transition:none}
.kpi-value.bumped{animation:kpiBump .62s cubic-bezier(.22,1,.36,1)}
@keyframes kpiBump{
0% { transform:none; color:var(--ink) }
22% { transform:translateY(-3px) scale(1.025); color:var(--accent) }
100% { transform:none; color:var(--ink) }
}
.feed-item{animation:feedin .5s forwards, feedFlash 1.1s ease-out}
@keyframes feedFlash{
0% { background:var(--accent-soft) }
100%{ background:transparent }
}
@media (prefers-reduced-motion:reduce){
.kpi-value.bumped{animation:none}
.feed-item{animation:none;opacity:1;transform:none}
}
/* =========================================================
LEGAL PAGES
========================================================= */
.legal{max-width:74ch;margin:34px 0 clamp(64px,8vw,110px)}
.legal h2{font-size:19px;margin:34px 0 10px}
.legal p{color:var(--ink-2);font-size:15px;line-height:1.7;margin-bottom:12px}
.legal ul{margin:0 0 14px;padding-left:20px;display:grid;gap:8px}
.legal li{color:var(--ink-2);font-size:15px;line-height:1.7}
.legal b{color:var(--ink)}
.legal a:not(.btn){color:var(--accent-ink);font-weight:600}
.legal code{font-family:"JetBrains Mono",monospace;font-size:13px;background:var(--bg-2);
border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.legal-updated{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink-3);margin-top:18px}
.legal-note{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:12px;
padding:14px 16px;font-size:14px;color:var(--ink-2)}
.legal-dl{display:grid;grid-template-columns:210px 1fr;gap:14px 24px;margin:0 0 26px;
padding-bottom:26px;border-bottom:1px solid var(--line)}
.legal-dl dt{font-size:13px;font-weight:700;color:var(--ink)}
.legal-dl dd{margin:0;font-size:15px;color:var(--ink-2);line-height:1.6}
@media(max-width:620px){ .legal-dl{grid-template-columns:1fr;gap:4px 0}
.legal-dl dd{margin-bottom:12px} }
/* =========================================================
Claims strip, plan flow diagrams, comparison table
========================================================= */
/* the "SEPA" stand-in in the revenue split, where there is no brand mark */
.src-row .n .brand-fallback{width:28px;height:18px;display:grid;place-items:center;flex:0 0 auto;
font-family:"JetBrains Mono",monospace;font-size:8.5px;font-weight:700;letter-spacing:.02em;
color:var(--ink-3);border:1px solid var(--line);border-radius:3px;background:#fff}
/* ---------- claims next to the live checkout ---------- */
.claims{padding:clamp(44px,5vw,72px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
background:linear-gradient(180deg,#fff,var(--bg-2))}
.claims-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);align-items:center}
@media(max-width:900px){.claims-grid{grid-template-columns:1fr;gap:30px}}
.claim-row{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.claim-row:last-child{border-bottom:0}
.claim-row .cn{font-family:Archivo,Inter,sans-serif;font-size:34px;font-weight:700;line-height:1;
letter-spacing:-.04em;color:var(--accent-ink);min-width:56px}
.claim-row h3{font-size:17px;margin-bottom:6px}
.claim-row p{font-size:14.5px;color:var(--ink-2);line-height:1.6}
.claim-row p b{color:var(--ink)}
/* the checkout that pays itself, on a loop */
.checkout-demo{border:1px solid var(--line);border-radius:20px;background:#fff;overflow:hidden;
box-shadow:0 2px 4px rgba(20,23,26,.04),0 40px 80px -50px rgba(20,30,60,.55);max-width:430px;
margin-inline:auto;width:100%}
.cd-bar{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);
background:var(--bg-2)}
.cd-url{font-size:12px;color:var(--ink-2);font-family:"JetBrains Mono",monospace}
.cd-lock{font-size:10px}
.cd-body{padding:20px}
.cd-line{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;color:var(--ink-2);
padding-bottom:14px;border-bottom:1px solid var(--line)}
.cd-line b{font-size:20px;color:var(--ink);font-family:Archivo,Inter,sans-serif;letter-spacing:-.02em}
.cd-marks{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 16px}
.cd-marks img{height:24px;width:auto;border-radius:4px;display:block}
.cd-marks img.glyph{border-radius:0}
.cd-label{display:block;font-size:11.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.cd-field{position:relative;display:flex;align-items:center;min-height:42px;padding:0 12px;border-radius:10px;
border:1px solid var(--line);background:#fbfcfd;font-family:"JetBrains Mono",monospace;font-size:14px;
letter-spacing:.04em;color:var(--ink);margin-bottom:12px}
.cd-field.focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:#fff}
.cd-field.small{margin-bottom:0}
.cd-caret{width:1.5px;height:17px;background:var(--accent);margin-left:2px;opacity:0}
.cd-field.focus .cd-caret{opacity:1;animation:caret 1s steps(1,end) infinite}
@keyframes caret{0%,50%{opacity:1}51%,100%{opacity:0}}
.cd-scheme{position:absolute;right:10px;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .25s}
.cd-scheme.on{opacity:1}
.cd-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.cd-pay{width:100%;border:0;border-radius:10px;padding:13px;font:inherit;font-size:14.5px;font-weight:600;
color:#fff;background:var(--accent-fill);cursor:default;transition:transform .15s,opacity .2s}
.cd-pay.busy{opacity:.75}
.cd-pay.done{background:#12a45a}
.cd-status{display:grid;gap:8px;margin-top:14px;min-height:44px}
.cd-step{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-3);opacity:0;
transform:translateY(4px);transition:opacity .3s,transform .3s}
.cd-step.on{opacity:1;transform:none;color:var(--ink-2)}
.cd-step i{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line);flex:0 0 auto;
display:grid;place-items:center}
.cd-step.on i{border-color:#12a45a;background:#12a45a;box-shadow:inset 0 0 0 2px #fff}
.cd-foot{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.cd-foot span{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:4px 9px}
@media(max-width:720px){
.checkout-demo{max-width:none}
.claim-row{padding:14px 0;gap:14px}
.claim-row .cn{font-size:28px;min-width:44px}
}
/* ---------- how-it-works flow inside the plan cards ---------- */
.flowmini{position:relative;margin:22px 0 6px;padding-left:34px;display:grid;gap:14px}
.fx-track{position:absolute;left:14px;top:10px;bottom:10px;width:2px;background:var(--line);border-radius:2px;overflow:hidden}
.fx-pulse{position:absolute;left:0;width:2px;height:34%;border-radius:2px;
background:linear-gradient(180deg,transparent,var(--accent),transparent);
animation:fxrun 3.4s cubic-bezier(.5,0,.5,1) infinite}
.fx-paypal .fx-pulse{background:linear-gradient(180deg,transparent,#0a7ea4,transparent);animation-delay:.5s}
.fx-crypto .fx-pulse{background:linear-gradient(180deg,transparent,#f7931a,transparent);animation-delay:1s}
@keyframes fxrun{0%{top:-34%}100%{top:100%}}
.fx-node{display:flex;gap:12px;align-items:flex-start;position:relative}
.fx-i{position:absolute;left:-34px;top:0;width:26px;height:26px;border-radius:50%;background:#fff;
border:2px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:700;
font-family:"JetBrains Mono",monospace;color:var(--ink-2);z-index:1;transition:.3s}
.fx-node.lit .fx-i{border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 5px var(--accent-soft)}
.fx-paypal .fx-node.lit .fx-i{border-color:#0a7ea4;color:#0a7ea4;box-shadow:0 0 0 5px rgba(10,126,164,.10)}
.fx-crypto .fx-node.lit .fx-i{border-color:#f7931a;color:#c8720f;box-shadow:0 0 0 5px rgba(247,147,26,.14)}
.fx-t b{display:block;font-size:13.5px;font-weight:600;line-height:1.35}
.fx-t em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.45}
@media (prefers-reduced-motion:reduce){.fx-pulse{animation:none;top:0;height:100%}}
/* ---------- comparison table ----------
Three columns of prose in a bordered grid read as a spreadsheet. This keeps
one card per row, our answer raised on its own panel, and the two others
quiet next to it. */
.cmp-scroll{overflow:visible;margin-top:32px;border:0;background:transparent}
table.cmp{width:100%;border-collapse:separate;border-spacing:0 8px;min-width:0;font-size:14.5px}
table.cmp thead th{font-family:Archivo,Inter,sans-serif;font-size:12.5px;font-weight:600;
letter-spacing:.02em;color:var(--ink-3);padding:0 18px 6px;text-align:left;background:transparent}
table.cmp thead th.us{color:var(--accent-ink)}
table.cmp tbody tr{background:#fff;box-shadow:var(--shadow)}
table.cmp tbody td{padding:16px 18px;vertical-align:top;border:0;border-top:1px solid var(--line);
border-bottom:1px solid var(--line);color:var(--ink-2);line-height:1.5}
table.cmp tbody td:first-child{border-left:1px solid var(--line);border-radius:14px 0 0 14px;
font-weight:600;color:var(--ink);width:24%}
table.cmp tbody td:last-child{border-right:1px solid var(--line);border-radius:0 14px 14px 0}
table.cmp td.us{background:linear-gradient(180deg,rgba(47,107,255,.09),rgba(47,107,255,.05));
color:var(--ink);font-weight:600;border-top:1px solid var(--accent-line);
border-bottom:1px solid var(--accent-line);position:relative}
table.cmp thead th:first-child{width:24%}
.cmp-yes{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;
background:var(--accent);color:#fff;font-size:10px;font-weight:700;margin-right:8px;
vertical-align:-3px}
.cmp-no{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;
background:#f0d9d6;color:#c9483c;font-size:10px;font-weight:700;margin-right:8px;vertical-align:-3px}
.cmp-note{font-size:12.5px;color:var(--ink-2);margin-top:14px}
/* the crypto plan sits on the dark card — the flow has to follow it there */
.plan.featured .fx-track{background:rgba(255,255,255,.14)}
.plan.featured .fx-i{background:var(--dark-2);border-color:rgba(255,255,255,.22);color:var(--dark-ink-2)}
.plan.featured .fx-node.lit .fx-i{border-color:var(--accent-2);color:var(--accent-2);
box-shadow:0 0 0 5px rgba(143,176,255,.14)}
.plan.featured .fx-t b{color:#fff}
.plan.featured .fx-t em{color:var(--dark-ink-2)}
/* licensed card marks in the plan cards and the revenue split */
.methods.marks{align-items:center;gap:10px;row-gap:8px;margin-top:auto;padding-top:16px}
/* one tile size for every mark, whatever artwork sits inside it: the Apple Pay
glyph and the Klarna png used to render noticeably smaller than the card
schemes next to them */
/* every mark renders at the same height with the same gap, and nothing sits in
a box: the Klarna and Apple Pay artwork used to look boxed next to Visa */
.mmark{width:auto;height:24px;display:block;object-fit:contain;border-radius:3px}
.src-row .n .brandpair{display:flex;gap:3px;flex:0 0 auto}
.src-row .n .brandpair img{width:28px;height:18px;object-fit:contain;display:block}
.pay-opt .pmarks{display:flex;gap:5px;margin-top:6px}
.pay-opt .pmarks img{height:22px;width:auto;border-radius:3px;display:block}
/* ---------- book a call ---------- */
.callbox{margin-top:26px;border:1px solid var(--dark-line);border-radius:var(--r);padding:22px;
background:rgba(255,255,255,.03)}
.callbox h3{font-size:17px;color:#fff}
.callbox > p{font-size:14px;color:var(--dark-ink-2);margin-top:8px;max-width:42ch}
.callopts{display:grid;gap:8px;margin-top:16px}
.callopts.tight{margin-top:14px}
.callopt{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;
padding:11px 13px;background:#fff;transition:border-color .18s,transform .18s}
.callopt:hover{border-color:var(--accent-line);transform:translateY(-1px)}
.callopt .ci-ic{width:34px;height:34px;border-radius:10px;font-size:15px}
.callopt b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.callopt em{display:block;font-style:normal;font-size:12px;color:var(--ink-2);margin-top:1px}
.callnote{font-size:12.5px;color:var(--dark-ink-2);margin-top:14px}
.callnote a:not(.btn){color:var(--accent-2);font-weight:600}
.cbox .callopt{background:var(--bg-2)}
/* the two loose photos: one among the merchant quotes, one beside the form */
.photo-cell{margin:0;border-radius:var(--r);overflow:hidden;background:#fff;
box-shadow:0 20px 50px -38px rgba(15,20,25,.5)}
.photo-cell img{display:block;width:100%;height:100%;object-fit:cover;min-height:100%}
.photo-side{margin:22px 0 0;border-radius:var(--r);overflow:hidden;
box-shadow:0 24px 60px -42px rgba(0,0,0,.8)}
.photo-side img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;object-position:50% 32%}
/* payment marks: the monochrome glyphs and the coin marks need their own sizing */
.mmark.glyph{height:24px}
.mmark.coin{width:26px;height:26px;border-radius:50%;padding:2px;border:0;background:transparent}
.mark-arrow{color:var(--ink-3);font-size:15px;line-height:1;padding:0 2px}
.plan.featured .mark-arrow{color:var(--dark-ink-2)}
.src-row .n img.brand.glyph{width:22px}
.callbtn{margin-top:16px}
.cbox-note{font-size:12.5px;color:var(--ink-2);margin-top:10px}
/* Ethereum's own grey disappears on the dark plan, so the coins sit on a chip there */
.plan.featured .mmark.coin{background:#fff;border-radius:50%;padding:4px;width:28px;height:28px;
box-sizing:border-box}
/* =========================================================
Phone layout pass
The header, the dashboard chrome and the new photo band were all built for
the desktop grid first; below 720px they crowded each other.
========================================================= */
@media(max-width:720px){
/* the brand kept its full width and slid under the burger */
.nav{padding-left:14px;padding-right:10px;gap:6px}
.brand{flex:0 1 auto;min-width:0;gap:7px}
.brand .logo{flex:0 0 auto}
.brand-word-2{display:none} /* "Payments" drops, the mark carries it */
.burger{margin-left:auto;order:3;font-size:22px;padding:6px 4px}
.navcta{order:4;gap:6px}
.cart-btn{width:36px;height:36px;font-size:15px}
.navcta .btn-primary{padding:9px 12px;font-size:12.5px}
.navlinks{top:74px}
/* dashboard chrome: the account line took three lines of its own */
.hero-flag{gap:7px;font-size:10px;letter-spacing:.12em;flex-wrap:wrap}
.dash-top{padding:11px 14px;gap:8px}
.dash-title{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dots{display:none}
.live{font-size:10px;flex:0 0 auto}
.chart svg{height:130px}
.kpi-value{font-size:clamp(30px,10vw,44px)}
/* solution cards */
.methods.marks{gap:6px}
.mmark{height:21px}
.mmark.coin,.plan.featured .mmark.coin{width:24px;height:24px}
.flowmini{padding-left:30px}
.fx-i{left:-30px;width:23px;height:23px;font-size:10px}
/* tables and quotes */
table.cmp{font-size:13.5px}
.cmp-scroll{border-radius:12px}
.quote{padding:20px}
/* the call box and the forms */
.callbtn{width:100%;justify-content:center}
.form-card{padding:20px 16px;border-radius:18px}
.opts{gap:6px}
.opt span{font-size:12.5px;padding:7px 11px}
}
@media(max-width:420px){
.claim .cn{font-size:32px}
.trustbar{gap:8px 16px;font-size:12.5px}
.navcta .btn-primary .arw{display:none}
}
}
@media(max-width:720px){
/* stacked, the portrait would run half a screen tall before the first quote */
.photo-cell img{max-height:300px}
.photo-side img{aspect-ratio:4/3}
}
/* ---------- bundles ---------- */
.bundle-head{margin-top:44px;text-align:center}
.bundle-head h3{font-size:clamp(20px,2.4vw,28px)}
.bundle-head p{font-size:15px;color:var(--ink-2);margin:10px auto 0;max-width:60ch}
.bundles{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
@media(max-width:860px){.bundles{grid-template-columns:1fr}}
.bundle{position:relative;border:1px solid var(--line);border-radius:22px;padding:26px;background:#fff;
box-shadow:var(--shadow)}
.bundle.featured{background:var(--dark);border-color:rgba(47,107,255,.5);color:#fff}
.bundle.featured h3,.bundle.featured .price .amount{color:#fff}
.bundle.featured .desc,.bundle.featured .per,.bundle.featured .fee{color:var(--dark-ink-2)}
.bundle.featured li{color:#e6e9ec;border-color:var(--dark-line)}
.bundle .tagline{display:block;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.18em;
text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px}
.bundle.featured .tagline{color:var(--accent-2)}
.bundle .desc{font-size:14.5px;color:var(--ink-2);margin-top:6px;line-height:1.55}
.bundle ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.bundle li{display:flex;gap:9px;font-size:14px;line-height:1.5}
.terms{display:inline-block;margin-top:4px;font-size:12px;color:var(--ink-3)}
.bundle.featured .terms,.plan.featured .terms{color:var(--dark-ink-2)}
/* ---------- dashboard chrome: window controls and a blinking live dot ---------- */
.dots i{width:12px;height:12px;border-radius:50%;display:grid;place-items:center;font-size:9px;
line-height:1;font-weight:700;color:transparent;transition:color .15s}
.dots:hover i{color:rgba(0,0,0,.55)}
.dots .d-close{background:#ff5f57}
.dots .d-min{background:#febc2e}
.dots .d-max{background:#28c840}
.live i{animation:blink 1.4s steps(1,end) infinite}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.15}}
.src-amt{font-variant-numeric:tabular-nums}
.src-amt.bumped{animation:srcbump .5s ease}
@keyframes srcbump{0%{color:var(--accent-ink)}100%{color:inherit}}
/* the dark bundle inherited the light card's bold colour, which vanished on it */
.bundle.featured .fee b{color:#fff}
.bundle.featured .check{color:var(--accent-2)}
.bundle .ribbon-premium{position:absolute;top:14px;right:16px;font-family:"JetBrains Mono",monospace;
font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#0e1113;background:#fff;
border-radius:999px;padding:4px 10px}
.bundle.featured .desc{color:var(--dark-ink-2)}
/* ---------- how it works, as a pipeline that fills itself ---------- */
.pipeline{position:relative;margin-top:38px}
.pl-rail{position:absolute;left:0;right:0;top:11px;height:2px;background:rgba(255,255,255,.12);border-radius:2px;
overflow:hidden}
.pl-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));
transition:width .6s cubic-bezier(.4,0,.2,1)}
.pl-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.pl-step{position:relative;padding-top:34px;opacity:.45;transition:opacity .45s}
.pl-step.on{opacity:1}
.pl-dot{position:absolute;top:4px;left:0;width:16px;height:16px;border-radius:50%;background:var(--dark);
border:2px solid rgba(255,255,255,.2);transition:.45s}
.pl-step.on .pl-dot{border-color:var(--accent-2);box-shadow:0 0 0 5px rgba(47,107,255,.18)}
.pl-step.done .pl-dot{background:var(--accent);border-color:var(--accent)}
.pl-card{border:1px solid var(--dark-line);border-radius:14px;padding:16px;background:rgba(255,255,255,.03);
height:100%;transition:border-color .45s,background .45s}
.pl-step.on .pl-card{border-color:rgba(47,107,255,.45);background:rgba(47,107,255,.08)}
.pl-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.pl-no{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--accent-2);letter-spacing:.1em}
.pl-head h4{font-size:15px;margin:0}
.pl-when{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--dark-ink-2)}
.pl-card p{font-size:13px;color:var(--dark-ink-2);line-height:1.55}
@media(max-width:900px){
.pl-steps{grid-template-columns:1fr;gap:0}
.pl-rail{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}
.pl-fill{width:2px !important;left:0;top:0;height:0;transition:height .6s cubic-bezier(.4,0,.2,1)}
.pl-step{padding:0 0 16px 34px}
.pl-dot{top:2px}
}
/* ---------- what happens everywhere else ---------- */
.problist{display:grid;gap:14px;margin-top:34px}
.prob{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:center;
border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:22px 24px;
box-shadow:var(--shadow);transition:border-color .3s,transform .3s}
.prob.in{transform:none}
.prob:hover{border-color:var(--line-2)}
@media(max-width:820px){.prob{grid-template-columns:1fr;gap:16px}}
.prob-no{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--ink-3)}
.prob h3{font-size:18px;margin:6px 0 8px}
.prob p{font-size:14.5px;color:var(--ink-2);line-height:1.6;max-width:62ch}
.prob-vis{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--bg-2);display:grid;gap:7px}
.pv-label{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.16em;color:var(--ink-3)}
.pv-value{font-size:15px;font-weight:700;color:#c9483c;font-family:Archivo,Inter,sans-serif;letter-spacing:-.01em}
.prob-hold .pv-value,.prob-wait .pv-value{color:#c07a12}
.prob-ticket .pv-value{color:var(--ink-2)}
.pv-bar{height:6px;border-radius:3px;background:rgba(20,23,26,.08);overflow:hidden}
.pv-bar i{display:block;height:100%;width:0;border-radius:3px;background:#c9483c;transition:width 1.1s ease .2s}
.prob.in .pv-bar i{width:100%}
.prob-hold .pv-bar i{background:#e0a33a}
.prob.in.prob-hold .pv-bar i,.prob-hold.in .pv-bar i{width:38%}
.prob-wait .pv-bar i{background:#e0a33a}
.prob.in .prob-wait .pv-bar i{width:22%}
.prob-ticket .pv-bar i{background:#9aa3ab}
.prob.in .prob-ticket .pv-bar i{width:12%}
.prob-vis.prob-hold i{width:38%}
.prob-vis.prob-wait i{width:22%}
.prob-vis.prob-ticket i{width:12%}
/* header call button, cart lines and the wide photo in the high-risk block */
.btn-call{padding:9px 14px;font-size:13.5px;background:#2f353a;border-color:#2f353a;color:#fff}
.btn-call:hover{background:#1e2429;border-color:#1e2429;color:#fff}
/* Desktop shows the wording, the phone icon is only for narrow screens. */
.call-ico{display:none}
/* On a phone the header already carries the brand, the burger, the cart and
Get set up. "Book a call" as text pushes that past 390px, so below 900px it
collapses to an icon button matching the cart, sitting to its left, which is
where it already is in the markup. */
@media(max-width:900px){
.navcta .btn-call{display:inline-flex;padding:0;width:40px;height:40px;
justify-content:center;border-radius:12px;flex:0 0 auto}
.btn-call .call-txt{display:none}
.btn-call .call-ico{display:block}
}
@media(max-width:720px){
.navcta .btn-call{width:36px;height:36px}
}
.cart-btn svg{display:block}
.ci-view{display:inline-block;margin-top:4px;font-size:11.5px;color:var(--accent-ink);font-weight:600}
.ci-view:hover{text-decoration:underline}
.cart-call{width:100%;justify-content:center;margin-top:8px}
/* ---------- the comparison table becomes cards on a phone ----------
Everything stays visible in the flow of the page, nothing scrolls sideways. */
@media(max-width:820px){
table.cmp{display:block;border-spacing:0}
table.cmp thead{display:none}
table.cmp tbody,table.cmp tr,table.cmp td{display:block;width:auto !important}
table.cmp tbody tr{border:1px solid var(--line);border-radius:16px;background:#fff;padding:16px;
margin-bottom:12px;box-shadow:var(--shadow)}
table.cmp tbody td{border:0 !important;padding:0;border-radius:0 !important}
table.cmp tbody td:first-child{font-size:16px;margin-bottom:12px}
table.cmp td[data-col]{display:block;padding:10px 12px;border-radius:10px;background:var(--bg-2);
margin-bottom:8px;font-size:13.5px}
table.cmp td[data-col]::before{content:attr(data-col);display:block;margin-bottom:3px;font-size:11px;
letter-spacing:.04em;color:var(--ink-3);font-weight:600}
table.cmp td.us{background:linear-gradient(180deg,rgba(47,107,255,.12),rgba(47,107,255,.06)) !important;
color:var(--ink)}
table.cmp td.us::before{color:var(--accent-ink)}
table.cmp tbody tr:last-child td:last-child{margin-bottom:0}
}
}
/* ---------- the tax note in the structures section ---------- */
.taxnote{margin:26px 0 0;max-width:82ch;background:#fff;border:1px solid var(--line);
border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow)}
.taxnote h3{font-size:16px;margin:0 0 12px}
.taxnote p{color:var(--ink-2);font-size:14.5px;line-height:1.65;margin:0 0 10px}
.taxnote p:last-child{margin-bottom:0}
.taxnote b{color:var(--ink)}
@media(max-width:620px){.taxnote{padding:18px}}
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hp input{width:1px}
/* ---------- structures: nominee toggle ---------- */
.setup-card{display:flex;flex-direction:column}
.setup-card p{flex:0 0 auto}
.nom-toggle{display:flex;align-items:flex-start;gap:10px;margin:16px 0 4px;cursor:pointer;
border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:var(--bg-2);transition:.18s}
.nom-toggle:hover{border-color:var(--line-2)}
.nom-check{position:absolute;opacity:0;pointer-events:none}
.nom-box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-2);background:#fff;
flex:0 0 auto;margin-top:1px;position:relative;transition:.18s}
.nom-box::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;
border-width:0 2px 2px 0;transform:rotate(45deg) scale(.6);opacity:0;transition:.18s}
.nom-check:checked + .nom-box{background:var(--accent);border-color:var(--accent)}
.nom-check:checked + .nom-box::after{opacity:1;transform:rotate(45deg) scale(1)}
.nom-check:focus-visible + .nom-box{box-shadow:0 0 0 3px var(--accent-soft)}
.nom-text{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}
.nom-text em{display:block;font-style:normal;font-size:12px;font-weight:400;color:var(--ink-2);margin-top:2px}
.setup-price{margin-top:14px}
.setup-price .amount{font-size:30px}
.setup-note{font-size:12.5px;color:var(--ink-2)}
.setup-card .btn-row{margin-top:auto;padding-top:20px}
/* ---------- all five offers in one comparable row ---------- */
.plans-all,.plans-four,.plans-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
@media(max-width:1040px){.plans-all,.plans-four,.plans-three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.plans-all,.plans-four,.plans-three{grid-template-columns:1fr}}
.plans-all .plan,.plans-four .plan,.plans-three .plan{display:flex;flex-direction:column;padding:22px 20px}
.plans-all .plan h3,.plans-four .plan h3,.plans-three .plan h3{font-size:18px}
.plans-all .plan .desc,.plans-four .plan .desc,.plans-three .plan .desc{font-size:13.5px;line-height:1.5}
.plans-all .plan .price .amount,.plans-four .plan .price .amount,.plans-three .plan .price .amount{font-size:clamp(24px,2.2vw,30px)}
.plans-all .plan .per,.plans-four .plan .per,.plans-three .plan .per{font-size:12px}
.plans-all .plan .fee,.plans-four .plan .fee,.plans-three .plan .fee{font-size:12px}
.plans-all .plan ul,.plans-four .plan ul,.plans-three .plan ul{gap:8px}
.plans-all .plan li,.plans-four .plan li,.plans-three .plan li{font-size:13px;line-height:1.45}
.plans-all .flowmini,.plans-four .flowmini,.plans-three .flowmini{margin:16px 0 4px;gap:11px}
.plans-all .fx-t b,.plans-four .fx-t b,.plans-three .fx-t b{font-size:12.5px}
.plans-all .fx-t em,.plans-four .fx-t em,.plans-three .fx-t em{font-size:11.5px}
.plans-all .btn-row,.plans-four .btn-row,.plans-three .btn-row{margin-top:16px;flex-direction:column;gap:8px}
.plans-all .btn-row .btn,.plans-four .btn-row .btn,.plans-three .btn-row .btn{width:100%;justify-content:center}
.plan.bundle-plan{border-color:var(--accent-line)}
.plan.featured.bundle-plan{border-color:rgba(47,107,255,.55)}
.plans-three .plan{position:relative;padding-top:36px}
/* the Google Pay wordmark is far wider than the card marks, so it gets its own cap */
.mmark[src*="googlepay"]{height:20px}
/* ---------- express buttons in the demo checkout ----------
The badges are the buttons: no frame, no fill of ours behind them. */
.cd-express{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 4px}
.cd-badge{border:0;background:none;padding:0;cursor:default;line-height:0;display:block}
.cd-badge img{display:block;width:100%;height:auto;border-radius:8px}
.cd-or{display:flex;align-items:center;gap:12px;margin:14px 0}
.cd-or::before,.cd-or::after{content:"";flex:1;height:1px;background:var(--line)}
.cd-or span{font-size:11.5px;color:var(--ink-3)}
.cd-marks img{height:26px}
/* Apple Pay and PayPal read smaller than the card schemes at the same height */
.mmark[src*="applepay"]{height:30px}
.mmark[src*="paypal"]{height:28px}
@media(max-width:720px){
.mmark[src*="applepay"]{height:26px}
.mmark[src*="paypal"]{height:24px}
}
/* the bundle shows the price the three would cost apart */
.price .was{font-size:16px;color:var(--ink-3);text-decoration:line-through;margin-right:8px;
font-family:Archivo,Inter,sans-serif}
.plan.featured .price .was{color:var(--dark-ink-2)}
/* the long first account needs the width of two tiles to stay readable */
.quote-wide{grid-column:span 2}
@media(max-width:900px){.quote-wide{grid-column:span 1}}
/* ---------- price block: figure, label, terms, in that order ----------
"one-off setup fee" used to sit beside the amount and broke into four lines
in a narrow card. It now sits under it, on one line. */
.price.stacked{display:block;margin-top:16px}
.price.stacked .was{display:block;font-size:15px;line-height:1.2;margin:0 0 2px;
color:var(--ink-3);text-decoration:line-through}
.price.stacked .amount{display:block;line-height:1.05}
.price.stacked .per{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.plan.featured .price.stacked .per{color:var(--dark-ink-2)}
.payterms{margin-top:12px;padding:11px 12px;border-radius:10px;background:var(--bg-2);
border:1px solid var(--line);font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.payterms b{color:var(--ink);font-weight:700}
.plan.featured .payterms{background:rgba(255,255,255,.05);border-color:var(--dark-line);color:var(--dark-ink-2)}
.plan.featured .payterms b{color:#fff}
/* ---------- ribbons sit in the same spot on every card ---------- */
.plans-four .plan,.plans-three .plan{position:relative;padding-top:34px}
/* one badge, one position: centred on the top edge of whichever card it sits on */
.plans-three .ribbon,.plans-three .ribbon-premium,.bundle-wide .ribbon{
position:absolute;top:-15px;left:50%;right:auto;transform:translateX(-50%);
font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
font-weight:700;padding:8px 18px;border-radius:999px;white-space:nowrap;z-index:2}
.plans-three .ribbon,.bundle-wide .ribbon{background:var(--accent);color:#fff;
box-shadow:0 10px 24px -12px rgba(47,107,255,.9)}
.plans-three .plan.featured .ribbon-premium{position:absolute;top:-15px;left:50%;right:auto;width:auto;
transform:translateX(-50%);background:#fff;color:#14171a;font-size:11.5px;letter-spacing:.16em;
font-weight:700;padding:8px 18px;border-radius:999px;box-shadow:0 10px 24px -12px rgba(0,0,0,.9)}
.plans-three .tagline{display:block;text-align:left}
/* Apple Pay carries less ink than a card scheme, so it needs more height to
read as the same size */
.mmark[src*="applepay"]{height:34px;margin-top:-4px;margin-bottom:-4px}
@media(max-width:720px){.mmark[src*="applepay"]{height:30px}}
/* ---------- comparison: the tick belongs on the first line of the text ---------- */
table.cmp td.us{display:table-cell}
.cmp-yes,.cmp-no{display:inline;margin-right:5px;vertical-align:baseline}
@media(max-width:720px){
table.cmp td[data-col]{align-items:baseline}
table.cmp td.us{display:flex}
}
/* ---------- the bundle sits under the three, across the full width ---------- */
.bundle-wide{position:relative;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,3vw,48px);
margin-top:38px;padding:34px clamp(24px,3vw,36px) 30px;border:1px solid var(--accent-line);
border-radius:22px;background:#fff;box-shadow:var(--shadow)}
@media(max-width:860px){.bundle-wide{grid-template-columns:1fr;gap:22px;padding-top:38px}}
.bundle-wide .tagline{display:block;font-family:"JetBrains Mono",monospace;font-size:10.5px;
letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px}
.bundle-wide h3{font-size:clamp(21px,2.4vw,28px)}
.bundle-wide .desc{font-size:14.5px;color:var(--ink-2);margin-top:8px;line-height:1.55;max-width:46ch}
.bundle-wide .price.stacked{margin-top:18px}
.bundle-wide .price.stacked .amount{font-size:clamp(30px,3.4vw,40px)}
.bw-right{display:flex;flex-direction:column}
.bundle-wide ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bundle-wide li{display:flex;gap:9px;font-size:14px;line-height:1.5}
.bundle-wide .methods.marks{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.bundle-wide .btn-row{margin-top:18px}
.bundle-wide .btn-row .btn{width:100%;justify-content:center}
@media(min-width:861px){.bundle-wide .btn-row .btn{width:auto}}
/* the error the forms show when the endpoint cannot take the message */
.formerror{display:none;margin:0 0 14px;padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.5;
background:rgba(201,72,60,.08);border:1px solid rgba(201,72,60,.35);color:#a5372d}
.formerror a{color:#a5372d;font-weight:700;text-decoration:underline}
.dark .formerror{background:rgba(201,72,60,.16);color:#ffb4ab;border-color:rgba(255,143,130,.4)}
.dark .formerror a{color:#ffb4ab}
/* =========================================================
PLATFORM PAGE — the hero tiles carry a title over a
description here, not the KPI label/value pair the
dashboard used them for.
========================================================= */
.tiles.trio{grid-template-columns:repeat(3,1fr)}
.tile b{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em;margin-bottom:5px;color:var(--ink)}
.tile span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.55}
@media(max-width:880px){.tiles.trio{grid-template-columns:1fr}}