/* Zaya Business for merchants: the marketing site (home.html, pricing.html).
   Built on brand/tokens.css (Business light). Dusk and Black come from theme.js adding .dark / .black on <html>. */
:root{
  color-scheme:light;
  --bg:var(--z-paper,#FAF8F5); --card:#FFFFFF; --sand:var(--z-sand,#F3F0EC); --line:var(--z-hair,#ECE8E3);
  --ink:var(--z-ink,#16130F); --muted:#5C5650;
  --accent:#C2410C; --on-accent:#FFFFFF; --accent-text:#C2410C; --brand:#EA580C; --tint:#FFF1E6; --glow:rgba(249,115,22,.16);
  --good:#15803D; --good-tint:rgba(21,128,61,.14);
  --glass:rgba(255,255,255,.78); --glass-line:rgba(255,255,255,.7);
  --sh:0 1px 2px rgba(22,19,15,.05),0 10px 28px -18px rgba(22,19,15,.25);
  --sh-2:0 2px 6px rgba(22,19,15,.06),0 40px 80px -36px rgba(22,19,15,.4);
  --w-display:700; --app-bg:#F4F1ED;
}
:root.dark{
  color-scheme:dark;
  --bg:#110E0B; --card:#1C1814; --sand:#2A241E; --line:#2E2822; --ink:#F4EFEA; --muted:#B5AEA6;
  --accent:#F97316; --on-accent:#000; --accent-text:#FB7A2E; --tint:#2A1405; --glow:rgba(249,115,22,.14);
  --good:#22A05A; --good-tint:rgba(74,222,128,.16);
  --glass:rgba(28,24,20,.78); --glass-line:rgba(255,255,255,.08); --app-bg:#110E0B;
  --sh:0 1px 2px rgba(0,0,0,.4),0 10px 28px -18px rgba(0,0,0,.8); --sh-2:0 2px 6px rgba(0,0,0,.4),0 40px 80px -36px rgba(0,0,0,.9);
}
:root.dark.black{--bg:#000;--card:#0F0F10;--sand:#1C1C1E;--line:#232326;--glass:rgba(18,18,20,.8);--app-bg:#000}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--z-font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}
@media(min-width:720px){.wrap{padding:0 28px}}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:10px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.sc{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:10px;height:64px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:22px;width:auto}
.lt{display:block}.dk{display:none}
:root.dark .lt{display:none}:root.dark .dk{display:block}
.links{display:none;gap:4px;margin-left:18px}
.links a{text-decoration:none;font:500 15px var(--z-font-body);color:var(--muted);padding:8px 12px;border-radius:10px;transition:color .2s,background .2s}
.links a:hover{color:var(--ink);background:var(--sand)}
@media(min-width:960px){.links{display:flex}}
.sp{flex:1}
.iconbtn{width:40px;height:40px;border-radius:12px;border:0;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.iconbtn:hover{background:var(--sand)}
.iconbtn .theme-cycle-label{display:none}
.signin{display:none;text-decoration:none;font:600 15px var(--z-font-body);padding:8px 12px}
@media(min-width:600px){.signin{display:inline-block}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;text-align:center;line-height:1.25;border-radius:999px;font:600 15px var(--z-font-body);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s,background .2s,box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px}
.btn.lg{min-height:54px;padding:12px 24px;font-size:16px}
.btn.pri{background:var(--accent);color:var(--on-accent);box-shadow:0 8px 24px -10px rgba(194,65,12,.7)}
.btn.pri:hover{background:#9A3412}
:root.dark .btn.pri:hover{background:#FB7A2E}
.btn.sec{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.sec:hover{border-color:var(--ink)}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3);backdrop-filter:blur(8px)}
.btn.ghost:hover{background:rgba(255,255,255,.22)}
.btn.paused{opacity:.6;pointer-events:none}
@media(max-width:420px){.nav .btn.pri{min-height:40px;padding:8px 14px;font-size:14px;white-space:nowrap}.ctas .btn.lg{width:100%}}

/* Type */
.eyebrow{display:inline-block;font:500 12px/1.6 var(--z-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.h2{font:var(--w-display) clamp(32px,5.4vw,56px)/1.02 var(--z-font-display);letter-spacing:-.035em;margin:12px 0 0;text-wrap:balance}
.lead{font-size:clamp(17px,2vw,19px);color:var(--muted);margin:18px 0 0;max-width:56ch}
.sub{font-size:17px;color:var(--muted);margin:14px 0 0;max-width:62ch}
.sec{padding:56px 0}
@media(min-width:960px){.sec{padding:96px 0}}
.sec.alt{background:var(--card);border-block:1px solid var(--line)}
.sec.alt .stat,.sec.alt .way,.sec.alt .agt,.sec.alt .plan,.sec.alt .tr,.sec.alt .limit{background:var(--bg)}
.head{margin-bottom:32px}
@media(min-width:960px){.head{margin-bottom:44px}}

/* Reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* Notice bar (Platform admin → Portals → website) */
.notice{background:var(--ink);color:var(--bg);font-size:14px}
.notice .wrap{display:flex;align-items:center;gap:10px;min-height:40px}
.notice .t{flex:1}
.notice .nx{border:0;background:none;color:inherit;font-size:20px;cursor:pointer;width:32px;height:32px}

/* Footer */
.foot{padding:48px 0 120px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.fgrid{display:grid;gap:28px;grid-template-columns:1fr 1fr}
@media(min-width:860px){.fgrid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.fgrid>div:first-child{grid-column:1/-1}
@media(min-width:860px){.fgrid>div:first-child{grid-column:auto}}
.fgrid img{height:22px;width:auto}
.fgrid p{max-width:36ch}
.fgrid b{display:block;color:var(--ink);margin-bottom:10px}
.fgrid a{display:block;text-decoration:none;padding:4px 0}
.fgrid a:hover{color:var(--ink)}
.legal{margin-top:32px;font-size:12.5px;max-width:80ch}