/* THE PUBLIC SITE THEME (2026-10-29 redesign): the home page (index.php) and every page on
   the shared shell (includes/public_page.php). The dashboard, login and signup keep their own
   styles. Light and dark from one set of tokens: html[data-theme] is set before the first
   paint by the boot script in the head (same dpzTheme key as the dashboard), and with no
   script the visitor's system setting decides. The token NAMES are the ones the public pages
   already used in their own inline styles (--bg, --surface, --border, --muted, --primary,
   --cyan...), so those pages follow the theme without edits.
   Contrast (WCAG AA): --text and --muted pass 4.5:1 on --bg and --surface in both themes;
   --dim passes 4.5:1 for small print; white on --primary passes 4.5:1 in both; --cyan is an
   ink colour that passes 4.5:1 on its background (light #0e7490, dark #22d3ee). */

/* optional, not swap: both fonts are preloaded, so they are almost always there for the first
   paint; when they are not, the page keeps the system font for that visit instead of
   re-wrapping the headline under the reader (Lighthouse CLS 0.106 with swap). */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:optional;src:url("fonts/inter-var.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:optional;src:url("fonts/jakarta-var.woff2") format("woff2")}

:root{
  --bg:#ffffff;--bg-2:#f5f7fb;--surface:#ffffff;--surface-2:#f1f4f9;
  --border:#e2e8f0;--border-2:#cbd5e1;
  --text:#0b1220;--text-2:#1e293b;--muted:#475569;--dim:#5b6b80;
  --primary:#0057e0;--primary-600:#0047b8;--link:#0057e0;--cyan:#0e7490;--accent:#00b8d9;
  --good:#15803d;--good-bg:#dcfce7;--warn:#b45309;--warn-bg:#fef3c7;--bad:#b91c1c;
  --ring:#0057e0;
  --nav-bg:rgba(255,255,255,.78);--nav-bg-solid:rgba(255,255,255,.96);
  --glow-1:rgba(0,87,224,.16);--glow-2:rgba(0,184,217,.14);
  --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08);
  --shadow:0 10px 30px -12px rgba(15,23,42,.18);
  --shadow-lg:0 40px 80px -30px rgba(15,23,42,.28);
  --grad:linear-gradient(90deg,#0057e0,#0891b2);
  --chip:#ffffff;--chip-line:#e2e8f0;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Roboto Mono",monospace;
  --maxw:1200px;--radius:16px;
  color-scheme:light;
}
/* Dark, twice: once for the stored choice, once for the system setting when nothing is stored
   (or script is off). Keep the two blocks the same. */
:root[data-theme=dark]{
  --bg:#0b0f17;--bg-2:#0e1420;--surface:#121826;--surface-2:#182033;
  --border:#1f2a3c;--border-2:#2c3a52;
  --text:#f2f5fa;--text-2:#d6dce7;--muted:#a3adbf;--dim:#8a97ad;
  --primary:#1f6fe5;--primary-600:#3b82f6;--link:#7cb4ff;--cyan:#22d3ee;--accent:#00e5ff;
  --good:#34d399;--good-bg:rgba(52,211,153,.12);--warn:#fbbf24;--warn-bg:rgba(251,191,36,.12);--bad:#f87171;
  --ring:#7cb4ff;
  --nav-bg:rgba(11,15,23,.72);--nav-bg-solid:rgba(11,15,23,.96);
  --glow-1:rgba(31,111,229,.30);--glow-2:rgba(0,229,255,.14);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-lg:0 40px 90px -30px rgba(0,0,0,.85);
  --grad:linear-gradient(90deg,#3b82f6,#22d3ee);
  --chip:#ffffff;--chip-line:rgba(255,255,255,.12);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#0b0f17;--bg-2:#0e1420;--surface:#121826;--surface-2:#182033;
    --border:#1f2a3c;--border-2:#2c3a52;
    --text:#f2f5fa;--text-2:#d6dce7;--muted:#a3adbf;--dim:#8a97ad;
    --primary:#1f6fe5;--primary-600:#3b82f6;--link:#7cb4ff;--cyan:#22d3ee;--accent:#00e5ff;
    --good:#34d399;--good-bg:rgba(52,211,153,.12);--warn:#fbbf24;--warn-bg:rgba(251,191,36,.12);--bad:#f87171;
    --ring:#7cb4ff;
    --nav-bg:rgba(11,15,23,.72);--nav-bg-solid:rgba(11,15,23,.96);
    --glow-1:rgba(31,111,229,.30);--glow-2:rgba(0,229,255,.14);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 10px 30px -12px rgba(0,0,0,.6);
    --shadow-lg:0 40px 90px -30px rgba(0,0,0,.85);
    --grad:linear-gradient(90deg,#3b82f6,#22d3ee);
    --chip:#ffffff;--chip-line:rgba(255,255,255,.12);
    color-scheme:dark;
  }
}

/* ── base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .25s ease,color .25s ease}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
img{height:auto;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.12;text-wrap:balance;color:var(--text)}
p{margin:0}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media(max-width:600px){.wrap{padding:0 max(16px,env(safe-area-inset-left)) 0 max(16px,env(safe-area-inset-right))}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--primary);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;transition:top .15s}
.skip-link:focus{top:12px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1.2 var(--sans);
  padding:12px 20px;border-radius:12px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 20px -10px var(--primary)}
.btn-primary:hover{background:var(--primary-600);transform:translateY(-1px);box-shadow:0 12px 26px -10px var(--primary)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border-2)}
.btn-ghost:hover{border-color:var(--primary);color:var(--link)}
.btn-lg{padding:15px 24px;font-size:16px;border-radius:14px}
.btn-sm{padding:9px 14px;font-size:14px;border-radius:10px}
.btn svg{width:18px;height:18px;flex:none}

/* ── navbar ──────────────────────────────────────────────────────────── */
header.nav{position:sticky;top:0;z-index:60;background:var(--nav-bg);backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,background-color .2s}
header.nav.scrolled{border-bottom-color:var(--border);background:var(--nav-bg-solid)}
.nav-in{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--text);flex:none}
.logo{width:32px;height:32px;display:block;flex:none}
.nav-links{display:flex;gap:4px;margin-left:12px;font-size:15px;font-weight:500;color:var(--muted)}
.nav-links a{white-space:nowrap;padding:8px 11px;border-radius:9px;transition:color .15s,background-color .15s}
.nav-links a:hover{color:var(--text);background:var(--surface-2)}
.nav-cta{display:flex;gap:10px;align-items:center;margin-left:auto}
.theme-toggle{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);cursor:pointer;padding:0;flex:none;transition:border-color .15s,background-color .15s}
.theme-toggle:hover{border-color:var(--border-2);background:var(--surface-2)}
.theme-toggle svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .sun{display:none}
:root[data-theme=dark] .theme-toggle .sun{display:block}
:root[data-theme=dark] .theme-toggle .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .theme-toggle .sun{display:block}:root:not([data-theme]) .theme-toggle .moon{display:none}}
.nav-burger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);cursor:pointer;place-items:center;padding:0;flex:none}
.nav-burger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.nav-burger .x{display:none}
.nav-menu{display:none}
@media(max-width:1320px){.nav-links .nav-x{display:none}}
@media(max-width:960px){
  .nav-in{height:62px;gap:10px}
  .nav-links{display:none}
  .nav-cta .btn-ghost{display:none}
  .nav-burger{display:grid}
  .nav-menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--nav-bg-solid);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);
    padding:8px 16px 18px;max-height:calc(100vh - 62px);overflow-y:auto;box-shadow:var(--shadow)}
  .nav-menu a{display:block;padding:13px 8px;font-size:17px;font-weight:600;border-bottom:1px solid var(--border);color:var(--text)}
  .nav-menu a:last-child{border-bottom:0}
  .nav-menu a.login{color:var(--link)}
  header.nav.open{background:var(--nav-bg-solid);border-bottom-color:var(--border)}
  header.nav.open .nav-menu{display:block}
  header.nav.open .nav-burger .bars{display:none}
  header.nav.open .nav-burger .x{display:block}
}
@media(max-width:420px){.nav-cta .btn-primary{padding:9px 12px;font-size:14px}.brand{font-size:18px}.logo{width:28px;height:28px}}
@media(max-width:350px){.nav-cta .btn-primary .long{display:none}}

/* ── sections ────────────────────────────────────────────────────────── */
section.sec{padding:96px 0;position:relative}
section.sec.alt{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sec-head{max-width:720px;margin-bottom:48px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin-top:12px}
.sec-head p{color:var(--muted);margin-top:16px;font-size:1.1rem}
.sec-head p a,.text-link{color:var(--link);font-weight:600}
.sec-head p a:hover,.text-link:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){section.sec{padding:64px 0}.sec-head{margin-bottom:32px}.sec-head p{font-size:1rem}}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:72px 0 56px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(50% 60% at 15% 0%,var(--glow-1),transparent 70%),radial-gradient(40% 50% at 95% 10%,var(--glow-2),transparent 70%)}
.hero-grid-lines{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 75%)}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center}
.hero .pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);font-size:13.5px;font-weight:600;color:var(--text-2);box-shadow:var(--shadow-sm)}
.hero .pill b{background:var(--primary);color:#fff;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700}
.hero h1{font-size:clamp(2.4rem,5.2vw,4rem);line-height:1.05;margin:20px 0 0;letter-spacing:-.035em}
.hero .lede{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--muted);margin-top:22px;max-width:40ch}
.hero .cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero .note{margin-top:20px;font-size:14px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap}
.hero .note span{display:inline-flex;align-items:center;gap:7px}
.hero .note svg{width:17px;height:17px;stroke:var(--good);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:980px){.hero-in{grid-template-columns:1fr;gap:48px}.hero .lede{max-width:56ch}}
@media(max-width:600px){
  .hero{padding:40px 0 36px}
  .hero h1{font-size:clamp(2.1rem,9.5vw,2.7rem);margin-top:16px}
  .hero .lede{margin-top:16px}
  .hero .cta{margin-top:24px}
  .hero .cta .btn{flex:1 1 100%}
  .hero .note{gap:8px 14px;font-size:13.5px}
}

/* the product preview (pure HTML/CSS, animated by site.js) */
.mock{position:relative;contain:layout paint;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;font-size:13px}
.mock-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--border);background:var(--bg-2)}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:var(--border-2)}
.mock-bar .url{margin-left:10px;flex:1;max-width:280px;font-family:var(--mono);font-size:11.5px;color:var(--dim);background:var(--surface);
  border:1px solid var(--border);border-radius:7px;padding:4px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-body{display:grid;grid-template-columns:132px 1fr;min-height:360px}
.mock-side{border-right:1px solid var(--border);padding:14px 10px;display:flex;flex-direction:column;gap:3px;background:var(--bg-2)}
.mock-side span{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;color:var(--muted);font-weight:500;font-size:12.5px}
.mock-side span::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--border-2)}
.mock-side span.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.mock-side span.on::before{background:var(--primary)}
.mock-main{padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.mock-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{border:1px solid var(--border);border-radius:11px;padding:10px 12px;background:var(--surface)}
.kpi .k{font-size:11px;color:var(--dim);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.kpi .v{font-family:var(--display);font-size:20px;font-weight:800;margin-top:2px;color:var(--text)}
.kpi .d{font-size:11px;font-weight:600;color:var(--good)}
.mock-chart{border:1px solid var(--border);border-radius:11px;padding:10px 12px 6px;background:var(--surface)}
.mock-chart .k{font-size:11px;color:var(--dim);font-weight:600;text-transform:uppercase;letter-spacing:.06em;display:flex;justify-content:space-between}
.mock-chart svg{display:block;width:100%;height:70px;margin-top:4px}
.mock-chart .line{fill:none;stroke:var(--primary);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mock-chart .area{fill:var(--glow-1);stroke:none}
.mock-rows{border:1px solid var(--border);border-radius:11px;overflow:hidden;background:var(--surface)}
.mrow{display:grid;grid-template-columns:28px 1fr auto auto;gap:10px;align-items:center;padding:8px 12px;border-top:1px solid var(--border)}
.mrow:first-child{border-top:0}
.mrow .th{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,var(--surface-2),var(--border))}
.mrow .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--text-2);font-size:12.5px}
.mrow .p{font-family:var(--mono);font-weight:700;color:var(--text);font-size:12.5px;transition:color .3s}
.mrow .p.flash{color:var(--good)}
.mrow .s{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--good-bg);color:var(--good)}
.mrow .s.wait{background:var(--warn-bg);color:var(--warn)}
.mock-toast{position:absolute;right:16px;bottom:16px;display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:10px 14px;box-shadow:var(--shadow);font-size:12.5px;max-width:250px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.mock-toast.show{opacity:1;transform:none}
.mock-toast .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--good-bg);flex:none}
.mock-toast .ic svg{width:16px;height:16px;stroke:var(--good);fill:none;stroke-width:2.4}
.mock-toast b{display:block;color:var(--text)}
.mock-toast span{color:var(--muted)}
.mock-float{position:absolute;left:-28px;bottom:-18px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;
  box-shadow:var(--shadow);font-size:12px;display:flex;gap:9px;align-items:center}
.mock-float .dot{width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px var(--good-bg)}
.mock-wrap{position:relative}
@media(max-width:1100px){.mock-float{display:none}}
@media(max-width:560px){.mock-body{grid-template-columns:1fr}.mock-side{display:none}.mock-kpis .kpi:nth-child(3){display:none}.mock-kpis{grid-template-columns:repeat(2,1fr)}.mock{font-size:12px}.mock-toast{left:12px;right:12px;max-width:none}}

/* ── works with ──────────────────────────────────────────────────────── */
.works{padding:28px 0 8px}
.works-in{display:flex;align-items:center;justify-content:center;gap:18px 28px;flex-wrap:wrap}
.works .k{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.works ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.works li a,.works li>span{display:flex;align-items:center;justify-content:center;height:58px;padding:0 22px;border-radius:14px;
  background:var(--chip);border:1px solid var(--chip-line);box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s}
.works li a:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.works img{height:26px;width:auto}
.works img.ali{height:22px}
@media(max-width:600px){.works ul{gap:8px}.works li a,.works li>span{height:48px;padding:0 13px;border-radius:12px}.works img{height:20px}.works img.ali{height:17px}}
.works .fine{width:100%;text-align:center;font-size:12.5px;color:var(--dim);margin-top:4px}

/* ── features ────────────────────────────────────────────────────────── */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:980px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.feat-grid{grid-template-columns:1fr}}
.card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;
  transition:border-color .2s,transform .2s,box-shadow .2s}
.card:hover{border-color:var(--border-2);transform:translateY(-3px);box-shadow:var(--shadow)}
.ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(135deg,var(--glow-1),var(--glow-2));border:1px solid var(--border)}
.ic svg{width:22px;height:22px;stroke:var(--link);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.2rem}
.card p{color:var(--muted);margin-top:10px;font-size:.98rem}
.card ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:7px;font-size:.93rem;color:var(--text-2)}
.card li{display:flex;gap:8px}
.card li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--cyan);margin-top:.6em}
.card .more{display:inline-block;margin-top:14px;color:var(--link);font-weight:600;font-size:.94rem}
.card .more:hover{text-decoration:underline;text-underline-offset:3px}
.card.wide{grid-column:span 2}
@media(max-width:620px){.card.wide{grid-column:auto}}
.card.photo{padding:0;overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.card.photo .txt{padding:28px}
.card.photo img{width:100%;height:100%;object-fit:cover;min-height:220px}
@media(max-width:980px){.card.photo{grid-template-columns:1fr}.card.photo img{max-height:240px}}

/* ── how it works ────────────────────────────────────────────────────── */
.how-in{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center}
@media(max-width:980px){.how-in{grid-template-columns:1fr;gap:36px}}
.how-photo{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3.2}
.how-photo img{width:100%;height:100%;object-fit:cover}
.how-photo .badge{position:absolute;left:16px;bottom:16px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:12px;
  padding:10px 14px;font-size:13px;font-weight:600;box-shadow:var(--shadow);display:flex;gap:8px;align-items:center}
.how-photo .badge i{width:9px;height:9px;border-radius:50%;background:var(--good)}
.steps{position:relative}
.steps ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.steps .rail{position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:var(--border);border-radius:2px;overflow:hidden}
.steps .rail i{display:block;width:100%;height:100%;background:var(--grad);transform-origin:top;transform:scaleY(1)}
.step{position:relative;display:grid;grid-template-columns:48px 1fr;gap:18px;padding:18px 20px 18px 0;align-items:start}
.step .num{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:17px;
  background:var(--surface);border:1px solid var(--border-2);color:var(--link);position:relative;z-index:1;transition:background-color .3s,color .3s,border-color .3s}
.step.lit .num{background:var(--primary);color:#fff;border-color:var(--primary)}
.step h3{font-size:1.22rem;margin-top:4px}
.step p{color:var(--muted);margin-top:8px}

/* ── the flow (supplier → Dropizon → eBay → order) ──────────────────── */
.flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.flow-track{position:absolute;left:12.5%;right:12.5%;top:58px;height:3px;border-radius:3px;background:var(--border);z-index:0}
.flow-track i{display:block;height:100%;width:100%;border-radius:3px;background:var(--grad);transform-origin:left;transform:scaleX(1)}
.flow-dot{position:absolute;top:50px;left:12.5%;width:19px;height:19px;border-radius:50%;background:var(--surface);border:4px solid var(--primary);
  z-index:0;box-shadow:0 0 0 6px var(--glow-1);display:none}
.js-anim .flow-dot{display:block}
.fnode{position:relative;z-index:1;text-align:center}
.fnode .disc{width:116px;height:116px;margin:0 auto;border-radius:28px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow);transition:border-color .35s,box-shadow .35s,transform .35s}
.fnode.lit .disc{border-color:var(--primary);box-shadow:0 0 0 5px var(--glow-1),var(--shadow);transform:translateY(-3px)}
.fnode .disc svg{width:44px;height:44px;stroke:var(--link);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fnode h3{font-size:1.1rem;margin-top:18px}
.fnode p{color:var(--muted);font-size:.94rem;margin-top:6px;max-width:26ch;margin-left:auto;margin-right:auto}
.fnode .tagline{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;
  background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
@media(max-width:860px){
  .flow{grid-template-columns:1fr;gap:28px;padding-left:0}
  .flow-track{left:57px;right:auto;top:58px;bottom:58px;width:3px;height:auto}
  .flow-track i{transform-origin:top}
  .flow-dot{left:49px;top:50px}
  .fnode{display:grid;grid-template-columns:116px 1fr;gap:20px;text-align:left;align-items:center}
  .fnode h3{margin-top:0}
  .fnode p{margin-left:0;max-width:none}
}
@media(max-width:480px){
  .fnode{grid-template-columns:84px 1fr;gap:16px}
  .fnode .disc{width:84px;height:84px;border-radius:22px}
  .fnode .disc svg{width:34px;height:34px}
  .flow-track{left:41px;top:42px;bottom:42px}
  .flow-dot{left:33px;top:34px}
}

/* ── stats ───────────────────────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:860px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px}
.stat .n{font-family:var(--display);font-size:clamp(2rem,3.6vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.stat .n .u{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .k{color:var(--muted);margin-top:8px;font-size:.95rem}
@media(max-width:600px){.stat .n{font-size:1.75rem}.stats-grid{gap:12px}}
.stats-note{margin-top:18px;text-align:center;font-size:13px;color:var(--dim)}
@media(max-width:600px){.stat{padding:18px 16px}}

/* ── reviews carousel ────────────────────────────────────────────────── */
.carousel{position:relative}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px)/3);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding:4px 2px 8px;scroll-behavior:smooth}
.car-track::-webkit-scrollbar{display:none}
@media(max-width:980px){.car-track{grid-auto-columns:calc((100% - 20px)/2)}}
@media(max-width:640px){.car-track{grid-auto-columns:88%}}
.review{scroll-snap-align:start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:16px;margin:0}
.review .stars{display:flex;gap:3px;color:#f59e0b}
.review .stars svg{width:17px;height:17px;fill:currentColor}
.review blockquote{margin:0;font-size:1.02rem;color:var(--text-2);flex:1}
.review figcaption{display:flex;align-items:center;gap:12px}
.review .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--surface-2);border:1px dashed var(--border-2);color:var(--dim);flex:none}
.review figcaption b{display:block;color:var(--text);font-size:.96rem}
.review figcaption span{color:var(--muted);font-size:.88rem}
.review .ph{align-self:flex-start;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--warn);background:var(--warn-bg);border-radius:999px;padding:3px 10px}
.car-nav{display:flex;gap:10px;justify-content:center;margin-top:24px}
.car-nav button{width:44px;height:44px;border-radius:12px;border:1px solid var(--border-2);background:var(--surface);color:var(--text);cursor:pointer;display:grid;place-items:center}
.car-nav button:hover{border-color:var(--primary);color:var(--link)}
.car-nav button[disabled]{opacity:.4;cursor:default}
.car-nav svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.reviews-preview-note{margin:0 auto 24px;max-width:720px;text-align:center;font-size:14px;color:var(--warn);background:var(--warn-bg);border-radius:12px;padding:10px 14px}

/* ── pricing ─────────────────────────────────────────────────────────── */
.trial-banner{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin:0 auto 32px;max-width:980px;
  padding:20px 24px;border-radius:18px;border:1px solid var(--primary);background:linear-gradient(120deg,var(--glow-1),var(--glow-2));}
.trial-banner .t{display:flex;gap:14px;align-items:center}
.trial-banner .big{font-family:var(--display);font-size:2.2rem;font-weight:800;line-height:1;color:var(--link);letter-spacing:-.03em}
.trial-banner b{display:block;font-size:1.08rem;color:var(--text)}
.trial-banner span{color:var(--muted);font-size:.95rem}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.price-grid.tiers{grid-template-columns:repeat(4,1fr);gap:16px}
.price-grid.special{grid-template-columns:repeat(2,minmax(0,440px));justify-content:center;gap:20px}
@media(max-width:1100px){.price-grid.tiers{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.price-grid.tiers{grid-template-columns:repeat(2,1fr)}.price-grid.special{grid-template-columns:1fr;max-width:480px;margin:0 auto}}
.tiers-note{display:none;text-align:center;color:var(--muted);font-size:.93rem;margin:-14px 0 18px}
.plan{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:24px 22px;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s,transform .2s}
.plan:hover{border-color:var(--border-2);box-shadow:var(--shadow)}
.plan.pop{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),var(--shadow)}
.plan.pop::after{content:"Most popular";position:absolute;top:-12px;left:20px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:var(--primary);color:#fff;padding:4px 11px;border-radius:999px}
.plan .pname{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
.plan .amt{font-family:var(--display);font-size:34px;font-weight:800;letter-spacing:-.03em;margin-top:10px;color:var(--text)}
.plan .amt small{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
.plan .trial{display:inline-flex;align-self:flex-start;margin-top:8px;font-size:12px;font-weight:700;color:var(--good);background:var(--good-bg);border-radius:999px;padding:3px 10px}
.plan .desc{color:var(--muted);font-size:.95rem;margin-top:8px}
.plan ul{list-style:none;padding:0;margin:16px 0 20px;display:flex;flex-direction:column;gap:9px}
.plan li{display:flex;gap:9px;font-size:.94rem;color:var(--text-2)}
.plan li svg{width:18px;height:18px;flex:none;stroke:var(--good);fill:none;stroke-width:2.4;margin-top:2px;stroke-linecap:round;stroke-linejoin:round}
.plan .btn{margin-top:auto}
.plan .buy{margin-top:10px;text-align:center;font-size:13px;color:var(--muted)}
.plan .buy a{color:var(--link);font-weight:600}
.plan .buy a:hover{text-decoration:underline}
.plan.more{border-style:dashed}
@media(max-width:560px){
  .price-grid.tiers{grid-template-columns:1fr;gap:10px}
  .price-grid.tiers .plan{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name btn" "amt btn" "trial buy";align-items:center;column-gap:14px;padding:16px 18px}
  .price-grid.tiers .plan .pname{grid-area:name}
  .price-grid.tiers .plan .amt{grid-area:amt;font-size:26px;margin-top:2px}
  .price-grid.tiers .plan .trial{grid-area:trial;justify-self:start}
  .price-grid.tiers .plan.pop{padding-top:24px;margin-top:8px}
  .price-grid.tiers .plan ul{display:none}
  .price-grid.tiers .plan .btn{grid-area:btn;margin:0;padding:10px 14px;font-size:14px}
  .price-grid.tiers .plan .buy{grid-area:buy;margin:8px 0 0;text-align:right}
  .price-grid.tiers .plan.pop::after{top:-10px;left:16px}
  .tiers-note{display:block}
  .trial-banner{padding:18px}
  .trial-banner .btn{width:100%}
}

/* ── answer-first facts ─────────────────────────────────────────────── */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0}
@media(max-width:1000px){.facts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.facts{grid-template-columns:1fr}}
.facts>div{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px}
.facts dt{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
.facts dd{margin:0;color:var(--muted);font-size:.94rem}
.facts a{color:var(--link);font-weight:600}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:0 22px;transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:var(--border-2);box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;display:flex;justify-content:space-between;gap:16px;align-items:center;border-radius:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .faq-q{font-family:var(--sans);font-size:1.06rem;font-weight:700;letter-spacing:-.01em;margin:0;color:var(--text)}
.faq summary .chev{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);color:var(--link);transition:transform .25s}
.faq summary .chev svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.faq details[open] summary .chev{transform:rotate(45deg)}
.faq .ans{overflow:hidden}
.faq details p{color:var(--muted);padding:0 0 22px;font-size:1rem}
.faq details p a{color:var(--link);font-weight:600}

/* ── closing call to action ──────────────────────────────────────────── */
.cta-band{position:relative;overflow:hidden;border-radius:28px;padding:72px 40px;text-align:center;color:#fff;isolation:isolate;background:#0b1220}
.cta-band picture,.cta-band .bg{position:absolute;inset:0;z-index:-2}
.cta-band .bg img,.cta-band picture img{width:100%;height:100%;object-fit:cover;opacity:.38}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,rgba(0,71,184,.88),rgba(11,18,32,.72) 60%,rgba(8,145,178,.7))}
.cta-band h2{color:#fff;font-size:clamp(1.9rem,4vw,3rem)}
.cta-band p{color:rgba(255,255,255,.88);margin:16px auto 30px;max-width:56ch;font-size:1.1rem}
.cta-band .eyebrow{color:#a5f3fc}
.cta-band .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-band .btn-primary{background:#fff;color:#0047b8;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.cta-band .btn-primary:hover{background:#eef4ff}
.cta-band .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.cta-band .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
.cta-band :focus-visible{outline-color:#fff}
@media(max-width:600px){.cta-band{padding:48px 22px;border-radius:22px}.cta-band .btn{width:100%}}

/* ── footer ──────────────────────────────────────────────────────────── */
footer.site-foot{border-top:1px solid var(--border);background:var(--bg-2);margin-top:40px;padding:64px 0 40px;color:var(--muted);font-size:.93rem}
.foot-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
@media(max-width:980px){.foot-top{grid-template-columns:repeat(3,1fr)}.foot-about{grid-column:1/-1}}
@media(max-width:560px){.foot-top{grid-template-columns:repeat(2,1fr);gap:28px 20px}}
.foot-about p{margin-top:14px;max-width:34ch}
.foot-about .mail{display:inline-flex;margin-top:14px;color:var(--link);font-weight:600}
.foot-col h2{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin:0 0 14px}
.foot-col nav{display:flex;flex-direction:column;gap:4px}
.foot-col nav a{display:block;padding:4px 0}
.foot-legal a,.foot-more a,.foot-contact a{display:inline-block;padding:3px 0}
.foot-col a,.foot-links a{color:var(--muted)}
.foot-col a:hover,.foot-links a:hover,.foot-legal a:hover,.foot-more a:hover,.foot-contact a:hover{color:var(--link)}
.foot-bottom{margin-top:44px;padding-top:24px;border-top:1px solid var(--border)}
.foot-links{display:flex;gap:10px 22px;flex-wrap:wrap}
.foot-legal{display:flex;gap:10px 20px;flex-wrap:wrap;font-size:.88rem;margin-top:14px}
.foot-legal a{color:var(--muted)}
.foot-more{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:baseline;margin-top:18px;font-size:.88rem}
.foot-more .k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.foot-more a{color:var(--muted)}
.foot-contact{margin-top:16px;font-size:.88rem;color:var(--dim);display:flex;gap:10px 18px;flex-wrap:wrap}
.foot-social{display:flex;gap:10px;margin-top:16px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--border);border-radius:10px;color:var(--muted);background:var(--surface)}
.foot-social a:hover{color:var(--link);border-color:var(--link)}
.disclaimer{margin-top:18px;font-size:12.5px;color:var(--dim);max-width:90ch}
.foot-copy{margin-top:16px;font-size:13px;color:var(--dim);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ── motion: hidden only when script runs and motion is allowed ─────── */
@media (prefers-reduced-motion:no-preference){
  .js-anim [data-reveal]{opacity:0;transform:translateY(24px)}
  .js-anim [data-reveal].in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .js-anim .steps .rail i{transform:scaleY(0)}
  .js-anim .flow-track i{transform:scaleX(0)}
  @media(max-width:860px){.js-anim .flow-track i{transform:scaleY(0)}}
  .hero-bg{animation:drift 18s ease-in-out infinite alternate}
}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-14px,0) scale(1.06)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ── the shared shell's reading pages (includes/public_page.php) ───── */
main.legal{max-width:840px;margin:0 auto;padding:56px 24px 80px}
.legal h1{font-size:clamp(2rem,4vw,2.8rem);margin:10px 0 8px}
.legal .updated{color:var(--dim);font-family:var(--mono);font-size:12.5px;margin-bottom:34px}
.legal .lede{color:var(--muted);font-size:1.06rem;margin:0 0 30px;padding:18px 20px;border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:12px;background:var(--surface)}
.legal h2{font-size:1.35rem;margin:40px 0 10px;padding-top:28px;border-top:1px solid var(--border)}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.legal h3{font-size:1.06rem;margin:22px 0 6px;color:var(--text)}
.legal p{margin:0 0 12px;color:var(--text-2)}
.legal ul,.legal ol{margin:0 0 14px;padding-left:22px;color:var(--text-2)}
.legal li{margin:5px 0}
.legal li::marker{color:var(--cyan)}
.legal strong{color:var(--text)}
.legal a{color:var(--link);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--link) 40%,transparent);text-underline-offset:3px}
.legal a.btn{text-decoration:none}.legal a.btn-primary{color:#fff}.legal a.btn-ghost{color:var(--text)}.legal a.btn-ghost:hover{color:var(--link)}
.legal .box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin:14px 0 18px}
.legal .box p{margin:0 0 6px}
.legal .box p:last-child{margin:0}
.legal table{width:100%;border-collapse:collapse;margin:10px 0 18px;font-size:.95rem}
.legal th,.legal td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.legal th{color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:6px 0 24px}
.contact-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px}
.contact-card .k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
.contact-card .v{font-size:1.05rem;font-weight:700;color:var(--text)}
.contact-card .s{color:var(--muted);font-size:.9rem;margin-top:4px}

/* ── rendering cost (Lighthouse, 2026-10-29) ─────────────────────────────
   Sections below the product flow are laid out only when they come near the screen.
   Only those: the scroll-driven parts (steps, flow) are measured by ScrollTrigger and
   sit above them, so a skipped section never shifts their positions. */
#numbers,#reviews,#compare,#pricing,#pricing-more{content-visibility:auto;contain-intrinsic-size:auto 900px}