/* Public site (landing, docs, legal) on top of app.css.
   Look: "payment rails in a drafting studio" — a bright white working canvas, cool zinc neutrals, dense bold
   headings, 16px cards and 12px controls, layered technical sheets with faint construction lines, and graphite
   panels for code and the "after" story. One switched-on colour does the talking: saffron, the dot from the
   logo, fills the main action and marks the moments where money lands. Indigo (the logo's flow) stays on links,
   highlights and the brand tile. Tokens are scoped to .site-body so the merchant panel keeps its own look. */
.site-body{
  --ink:#18181B;--muted:#3F3F46;--steel:#71717A;--bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#F4F4F5;
  --line:#E4E4E7;--line-strong:#D4D4D8;
  --cloud:#F4F4F5;--graphite:#27272A;--band:#18181B;--label:#71717A;--signal:var(--saffron);
  --brand-soft:#EEF0FB;--grad:var(--brand);
  --radius:16px;--radius-sm:12px;
  --shadow-lift:0 0 0 1px rgb(0 0 0/.06),0 2px 8px -2px rgb(0 0 0/.12),0 10px 38px -4px rgb(0 0 0/.06);
  --mono:LedgerMono,Estedad,Tahoma,sans-serif;
  background:var(--bg);font-size:16px;line-height:1.9
}
/* Monospace only for Latin letters, digits and punctuation: Persian runs stay whole in Estedad (mixing a
   monospace face into Persian text breaks the letter joins). */
@font-face{font-family:LedgerMono;src:local("Cascadia Mono"),local("Consolas"),local("SF Mono"),local("Menlo"),local("DejaVu Sans Mono");unicode-range:U+0021-007E}
.site-body h1,.site-body h2,.site-body h3{font-weight:700;color:var(--ink)}
.site-body b,.site-body strong{font-weight:700}

/* controls: graphite by default, saffron for the one action that matters */
.site-body .btn{min-height:44px;padding:0 18px;border-radius:12px;border:0;background:var(--graphite);color:#fff;font-size:15px;font-weight:500;box-shadow:inset 0 0 0 2px rgb(255 255 255/.13)}
.site-body .btn::after{display:none}
.site-body .btn:hover{background:#000;box-shadow:inset 0 0 0 2px rgb(255 255 255/.13)}
.site-body .btn.secondary{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.site-body .btn.secondary:hover{background:var(--cloud)}
.site-body .btn.small{min-height:36px;padding:0 14px;font-size:14px;border-radius:12px}
.site-body .btn.go,.site-body .btn.saffron{background:var(--signal);color:#2B1D00;border-radius:16px;padding-inline:22px 18px;box-shadow:none}
.site-body .btn.go:hover,.site-body .btn.saffron:hover{background:#FFB938}
.site-body .btn.go svg{width:18px;height:18px}
.site-body .card{border-radius:var(--radius);box-shadow:none}


/* navigation */
.site-nav{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line-strong);transition:box-shadow var(--t2) var(--ease)}
.site-nav .inner{display:flex;align-items:center;gap:24px;max-width:1200px;margin:0 auto;padding:12px 16px}
.site-nav.scrolled{box-shadow:0 8px 24px -16px rgb(0 0 0/.25)}
.site-nav .brand{padding:0;margin-inline-end:auto}
.site-nav .brand img{width:auto;height:42px}
.site-nav a.link{color:var(--steel);font-size:15px;font-weight:500}
.site-nav a.link:hover{color:var(--ink);text-decoration:none}
.site-nav a.link.on{color:var(--ink)}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}

/* hero: dense heading on one side, layered technical sheets on the other */
.hero{padding:72px 0 64px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start}
.hero-copy h1{margin-top:0;font-size:58px;line-height:1.22;font-weight:700;text-wrap:balance}
.hero-copy .hl{position:relative;display:inline-block;color:var(--brand)}
.swoosh{position:absolute;inset-inline:0;bottom:-10px;width:100%;height:16px;overflow:visible;transform-origin:right center;animation:sweep 700ms var(--ease) .9s both}
.swoosh path{fill:none;stroke:color-mix(in srgb,var(--brand) 40%,transparent);stroke-width:3.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.swoosh-dot{position:absolute;inset-inline-end:3px;bottom:-9px;width:12px;height:12px;border-radius:50%;background:var(--signal);animation:land 600ms cubic-bezier(.3,1.6,.5,1) 1.5s both}
@keyframes sweep{from{transform:scaleX(0)}}
@keyframes land{from{opacity:0;transform:translateY(-34px) scale(.6)}}
.hero-copy .lead{max-width:34em;margin:22px 0 0;color:var(--steel);font-size:18px;line-height:2}
.caps{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:22px 0 0;padding:0;color:var(--ink);font-size:14.5px;font-weight:500}
.caps li{display:inline-flex;align-items:center;gap:8px}
.caps i{width:12px;height:12px;border-radius:3px;background:var(--graphite);box-shadow:inset 0 0 0 3px var(--graphite),inset 0 0 0 6px var(--signal)}
.hero-copy .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.hero-copy .btn{min-height:50px;font-size:16px}
.get-app{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);color:var(--steel);font-size:14px;align-self:stretch}
.app-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:12px;background:var(--cloud);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink);font-weight:500}
.app-btn:hover{background:var(--surface);text-decoration:none;box-shadow:inset 0 0 0 1px var(--ink)}
.app-btn svg{width:17px;height:17px}
.app-link{color:var(--steel);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line-strong)}
.hero-copy>*{animation:rise var(--t3) var(--ease) both}
.hero-copy>:nth-child(2){animation-delay:70ms}.hero-copy>:nth-child(3){animation-delay:140ms}.hero-copy>:nth-child(4){animation-delay:210ms}.hero-copy>:nth-child(5){animation-delay:280ms}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* layered sheets (templates/site/home.php): positioned on the SVG's 520×470 frame, so physical left/top
   are intentional here — the drawing is an illustration, not a reading-order layout */
.sheets{--bank:#d71e28;position:relative;width:100%;max-width:520px;aspect-ratio:520/470;justify-self:center;font-size:13px;line-height:1.7;animation:rise var(--t3) var(--ease) 200ms both}
.sheets::before{content:"";position:absolute;inset:-28px;border-radius:24px;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent)}
.routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:4 5}
.money{fill:var(--signal);opacity:0;filter:drop-shadow(0 0 5px rgb(245 165 36/.7))}
.sheet{position:absolute;border-radius:16px;padding:14px 16px;background:var(--surface);box-shadow:var(--shadow-lift)}
.sh-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.sh-top b{font-size:14px}
.sh-top time,.sh-tag{margin-inline-start:auto;color:var(--steel);font-size:12px}
.sh-tag{padding:1px 8px;border-radius:999px;background:var(--cloud)}
.sheet p{margin:0;color:var(--muted)}
.bank-dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--bank);transition:background var(--t2)}
.s-sms{left:36.5%;top:3.4%;width:59.6%;background:var(--cloud);transform:rotate(-2deg)}
.s-order{left:3.8%;top:31.9%;width:59.6%;transform:rotate(1.5deg)}
.sh-line{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px dashed var(--line-strong)}
.sh-line span:first-child{color:var(--steel)}
.sh-line b{font-size:16px}
.sh-match{display:flex;align-items:center;gap:8px;margin-top:6px;color:var(--steel);font-size:12px}
.sh-match i{width:12px;height:12px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--brand)}
.s-tile{left:38.5%;top:76.6%;width:55.8%;display:flex;align-items:center;gap:14px;background:var(--graphite);color:#fff;box-shadow:inset 0 0 0 2px rgb(255 255 255/.08),0 18px 40px -16px rgb(0 0 0/.5)}
.s-tile b{display:block;font-size:17px}
.s-tile small{color:rgb(255 255 255/.6);font-size:12px}
.tile-mark{flex:none;width:52px;height:52px;padding:6px;border-radius:12px;background:linear-gradient(135deg,var(--brand-2),var(--brand-deep));overflow:visible}
.tm-curve{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.tm-dot{fill:var(--signal);transform-box:fill-box;transform-origin:center}
.s-tile::after{content:"";position:absolute;inset:-5px;border-radius:20px;border:2px solid var(--signal);opacity:0;pointer-events:none}
/* the sequence, restarted by app.js every few seconds: SMS arrives -> order matched -> mark drawn, dot lands */
.sheets.play .s-sms{animation:drop 500ms var(--ease) both}
.sheets.play .sh-match i{animation:spin 700ms linear .6s 2}
.sheets.play .tm-curve{animation:draw 700ms var(--ease) 1.7s forwards}
.sheets.play .tm-dot{animation:land 600ms cubic-bezier(.3,1.6,.5,1) 2.3s both}
.sheets.play .s-tile::after{animation:ring 1s var(--ease) 2.5s both}
@keyframes drop{from{opacity:0;transform:translateY(-14px) rotate(-2deg)}to{transform:rotate(-2deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ring{0%{opacity:1;transform:scale(.96)}100%{opacity:0;transform:scale(1.12)}}

/* sections */
.section{padding:88px 0}
.alt{background:var(--surface-2);border-block:1px solid var(--line)}
.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:760px;margin-bottom:44px}
.section h2.title{font-size:46px;line-height:1.22;font-weight:700;text-wrap:balance}
.section p.sub{margin:0;color:var(--muted);font-size:17px;line-height:2;max-width:40em}
.more-link{margin-top:32px;font-weight:500}
.more-link a{color:var(--ink);text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--line-strong)}
.more-link a:hover{text-decoration-color:var(--ink)}

/* bank strip under the hero: monochrome names, like a customer-logo row */
.banks-strip{padding:8px 0 40px;text-align:center;overflow:hidden}
.banks-strip p{margin:0 0 16px;color:var(--steel);font-size:14px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee .track{display:flex;width:max-content;animation:marquee 80s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee ul{display:flex;gap:40px;margin:0;padding:4px 20px;list-style:none}
.marquee li{display:inline-flex;align-items:center;gap:8px;color:#5c5c5c;font-size:17px;font-weight:500;white-space:nowrap}
.marquee li i{width:7px;height:7px;border-radius:50%;background:var(--c,var(--line-strong))}
@keyframes marquee{to{transform:translateX(50%)}}

/* before / after: an ice panel and a plum panel, no shadows */
.vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:stretch}
.vs-card{display:flex;flex-direction:column;gap:22px;padding:28px;border-radius:var(--radius)}
.vs-card.before{background:var(--cloud)}
.vs-card.after{background:var(--graphite);color:#fff}
.vs-head{display:flex;align-items:center;gap:12px}
.vs-head h3{margin:0;font-size:24px;font-weight:700}
.after .vs-head h3{color:#fff}
.vs-ic{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center}
.vs-ic svg{width:21px;height:21px}
.before .vs-ic{background:var(--surface);color:var(--label);box-shadow:inset 0 0 0 1px var(--line-strong)}
.after .vs-ic{background:rgb(255 255 255/.1);color:#fff;box-shadow:inset 0 0 0 1px rgb(255 255 255/.25)}
.vs-mid{align-self:center;display:grid;place-items:center}
.vs-mid span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;border:1px solid rgb(21 21 21/.2)}
.vs-mid svg{width:20px;height:20px}

.scene{display:flex;flex-direction:column;gap:8px;min-height:184px;padding:14px;border-radius:12px;font-size:13.5px;line-height:1.9}
.scene time{margin-inline-start:10px;font-size:11px;color:var(--steel);white-space:nowrap}
.scene.chat{background:var(--surface);border:1px solid var(--line)}
.bub{align-self:flex-start;max-width:88%;padding:7px 12px;border-radius:12px;border-end-start-radius:2px;background:var(--surface-2);border:1px solid var(--line)}
.bub.photo{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 12px}
.bub .ph{width:62px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--cloud);color:var(--steel)}
.waiting{align-self:center;margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding:3px 12px;border-radius:10px;border:1px solid currentColor;color:var(--label);font-family:var(--mono);font-size:12.5px;font-weight:500}
.waiting i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:ping 1.6s ease-in-out infinite}
@keyframes ping{50%{box-shadow:0 0 0 6px color-mix(in srgb,currentColor 18%,transparent)}}
.scene.flow{justify-content:center;gap:0;background:rgb(255 255 255/.06);border:1px solid rgb(255 255 255/.16)}
.after .scene time{color:rgb(255 255 255/.55)}
.ev{position:relative;display:flex;align-items:center;gap:10px;padding:9px 0}
.ev>span:nth-child(2){flex:1;min-width:0;font-weight:500}
.ev .dot{position:relative;z-index:1;flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgb(255 255 255/.12);color:#fff}
.ev .dot svg{width:16px;height:16px}
.ev+.ev::before{content:"";position:absolute;inset-inline-start:14px;top:-9px;width:1px;height:18px;background:rgb(255 255 255/.3)}
.ev.ok .dot{background:var(--signal);color:var(--ink)}

.vs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.vs-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.9}
.vs-list .mk{flex:none;width:22px;height:22px;margin-top:4px;border-radius:10px;display:grid;place-items:center}
.vs-list .mk svg{width:14px;height:14px}
.before .mk{background:var(--surface);color:var(--label);box-shadow:inset 0 0 0 1px var(--line-strong)}
.after .mk{background:var(--signal);color:var(--ink)}
.after .vs-list li{color:rgb(255 255 255/.86)}

/* scenes play once when the card scrolls in */
.reveal-ready .vs-card .scene>*{opacity:0}
.reveal-ready .vs-card.in .scene>*{animation:pop-in 420ms var(--ease) both}
.reveal-ready .before.in .scene>:nth-child(2){animation-delay:.5s}
.reveal-ready .before.in .scene>:nth-child(3){animation-delay:1.2s}
.reveal-ready .before.in .scene>:nth-child(4){animation-delay:1.9s}
.reveal-ready .after.in .scene>:nth-child(1){animation-delay:.4s}
.reveal-ready .after.in .scene>:nth-child(2){animation-delay:.75s}
.reveal-ready .after.in .scene>:nth-child(3){animation-delay:1.1s}
@keyframes pop-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* features page cards */
.feature{display:flex;flex-direction:column;gap:10px}
.feature .ic{width:40px;height:40px;border-radius:10px;background:var(--cloud);color:var(--brand);display:grid;place-items:center}
.feature .ic svg{width:21px;height:21px}
.feature p{color:var(--muted);font-size:15px;line-height:1.9}
.feature h3{font-size:19px;font-weight:500}

/* privacy: one muted plum block */
.privacy{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center;background:var(--graphite);color:#fff;border-radius:var(--radius);padding:56px 48px}
.privacy h2.title{margin-top:0;color:#fff;font-size:40px}
.privacy .muted{color:rgb(255 255 255/.75);font-size:17px;margin-top:10px}
.privacy ul{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.privacy li{display:flex;gap:10px;font-size:16px;color:rgb(255 255 255/.9)}
.privacy li svg{flex:none;color:var(--signal);margin-top:6px}

/* pricing cards (templates/site/_plans.php) */
.price{display:flex;flex-direction:column;gap:12px;position:relative}
.price .amount{font-size:32px;font-weight:700}
.price.featured{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.price .tag{position:absolute;top:-12px;inset-inline-start:18px;background:var(--ink);color:#fff;font-size:12px;font-weight:500;padding:2px 10px;border-radius:10px}
.price ul{margin:0;padding:0;list-style:none;color:var(--muted);font-size:14.5px;display:flex;flex-direction:column;gap:6px}
.price li::before{content:"— ";color:var(--brand)}

/* faq: ruled rows, not boxes */
.faq details{border-bottom:1px solid var(--line);padding:18px 2px}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;font-size:17px;font-weight:500;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink);font-size:22px;line-height:1;transition:transform var(--t2) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:10px;color:var(--muted);animation:rise var(--t2) var(--ease) both}

/* footer: a deep night band — invitation row, a thin rule, then the sitemap */
footer.site{position:relative;overflow:hidden;background:var(--band);color:rgb(255 255 255/.62);font-size:14px;padding-top:8px}
footer.site>.wrap{position:relative;z-index:1}
.foot-mark{position:absolute;inset-inline-start:-90px;bottom:-150px;width:560px;height:560px;pointer-events:none}
.foot-mark path{fill:none;stroke:rgb(255 255 255/.035);stroke-width:8;stroke-linecap:round}
.foot-mark circle{fill:var(--signal);opacity:.1}
.foot-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:40px;border-bottom:1px solid rgb(255 255 255/.16)}
.foot-cta b{display:block;color:#fff;font-size:24px;font-weight:700}
.foot-cta span{color:rgb(255 255 255/.62);font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:28px;padding-top:44px}
.foot-grid h3{margin-bottom:12px;color:#fff;font-size:14px;font-weight:700}
.foot-grid>div{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.foot-grid a,.foot-grid span{color:rgb(255 255 255/.62)}
.foot-grid a:hover{color:#fff;text-decoration:none}
.foot-brand img{height:48px;width:auto}
.foot-brand p{max-width:30em;line-height:2}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:44px;padding-block:18px 24px;border-top:1px solid rgb(255 255 255/.16);font-size:13px}
.foot-bottom span{display:flex;gap:16px}
.foot-bottom a{color:rgb(255 255 255/.62)}
.foot-bottom a:hover{color:#fff}

/* docs & legal */
.doc{max-width:860px;margin:0 auto;padding:24px 16px 80px}
.doc h1{font-size:34px;margin-bottom:8px}
.doc h2{margin:40px 0 10px;font-size:24px}
.doc h3{margin:22px 0 8px;font-size:18px}
.doc p,.doc li{line-height:2}
.doc pre{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;overflow:auto;direction:ltr;text-align:left;font-size:13px;line-height:1.7}
.doc code{direction:ltr;unicode-bidi:isolate;background:var(--cloud);color:var(--ink);padding:1px 6px;border-radius:10px;font-size:13px}
.doc pre code{background:none;color:inherit;padding:0}
.doc table{margin:10px 0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}

@media (max-width:900px){
  .hero{padding:40px 0 48px}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-copy h1{font-size:38px}
  .hero-copy .lead{font-size:16.5px}
  .sheets{font-size:12px}
  .sheet{padding:11px 12px}
  .section{padding:60px 0}
  .section h2.title{font-size:31px}
  .sec-head{margin-bottom:30px}
  .privacy{grid-template-columns:1fr;padding:36px 22px;gap:28px}
  .privacy h2.title{font-size:28px}
  .vs{grid-template-columns:1fr}
  .vs-card{padding:22px}
  .vs-mid{margin:-4px 0}
  .vs-mid span{transform:rotate(-90deg)}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee .track{animation:none;width:auto;justify-content:center}
  .marquee ul{flex-wrap:wrap;justify-content:center}
  .marquee ul[aria-hidden]{display:none}
  .waiting i{animation:none}
  .money{display:none}
  .sheets.play .tm-curve,.tm-curve{animation:none;stroke-dashoffset:0}
  .swoosh,.swoosh-dot,.sheets.play .s-sms,.sheets.play .tm-dot,.sheets.play .s-tile::after,.sheets.play .sh-match i{animation:none}
}
@media (max-width:1232px){.wrap.privacy{margin-inline:16px}}

/* integration guide */
.paths{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:24px 0 8px}
.path{display:flex;flex-direction:column;gap:6px;color:var(--ink);font:inherit;text-align:start;cursor:pointer;background:var(--surface);transition:border-color var(--t1),background var(--t1)}
.path[aria-selected=true]{border-color:var(--ink);background:var(--cloud);box-shadow:inset 0 0 0 1px var(--ink)}
.path b{font-size:17px;font-weight:500;color:var(--ink)}
.path span{color:var(--muted);font-size:14px;line-height:1.9}
.path:hover{text-decoration:none;border-color:var(--ink)}
.checklist{counter-reset:c;list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:12px}
.checklist li{counter-increment:c;position:relative;padding-inline-start:44px;line-height:2}
.checklist li::before{content:counter(c,persian);position:absolute;inset-inline-start:0;top:3px;width:28px;height:28px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--label);display:grid;place-items:center;font-family:var(--mono);font-weight:500;font-size:14px}
.callout{background:var(--cloud);color:var(--ink);border-radius:12px;border-inline-start:2px solid var(--brand);padding:14px 18px;margin:18px 0;line-height:2}
.guide h2{scroll-margin-top:90px;padding-top:20px;border-top:1px solid var(--line);margin-top:48px}
.guide h3{margin-top:28px;font-size:17px}
.guide ul{line-height:2.1}
.doc table td,.doc table th{padding:10px 12px;text-align:start;vertical-align:top}
@media (max-width:900px){.paths{grid-template-columns:1fr}}
.doc pre,.doc code{font-family:Consolas,Estedad,sans-serif}
.tg-msg{max-width:420px;background:#EEF2FF;border-radius:18px 18px 18px 4px;padding:12px 16px;margin:12px 0;box-shadow:0 1px 0 var(--line)}
.tg-msg p{margin:4px 0;line-height:1.9}

/* status page */
.status-hero{display:flex;align-items:center;gap:16px;border-radius:var(--radius);padding:22px 24px;margin-bottom:22px;background:var(--ok-bg);color:var(--ok)}
.status-hero.degraded{background:var(--warn-bg);color:var(--warn)}
.status-hero.down{background:var(--bad-bg);color:var(--bad)}
.status-hero h1{color:inherit;font-size:26px;font-weight:500;margin:0}
.status-hero .dot{width:18px;height:18px;border-radius:50%;background:currentColor;flex:none;box-shadow:0 0 0 6px color-mix(in srgb,currentColor 18%,transparent)}
.status-hero .dot.ok{animation:beat 2s ease-in-out infinite}
@keyframes beat{50%{box-shadow:0 0 0 12px color-mix(in srgb,currentColor 6%,transparent)}}
.components{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.components li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.components li:last-child{border-bottom:0}
.components li div{display:flex;flex-direction:column}
@media (prefers-reduced-motion:reduce){.status-hero .dot{animation:none}}

/* code blocks dressed as a little window: a title bar with three dots + a copy button */
.code-win{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);margin:16px 0}
.code-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.code-win pre{border:0!important;border-radius:0;margin:0}
.win-dots{display:inline-flex;gap:7px;flex:none}
.win-dots i{width:11px;height:11px;border-radius:50%;background:var(--line)}
.win-dots i:nth-child(1){background:#F87171}
.win-dots i:nth-child(2){background:#F5A524}
.win-dots i:nth-child(3){background:#34D399}
.win-copy{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--muted);font:inherit;font-size:12px;font-weight:700;padding:5px 11px;cursor:pointer;transition:color var(--t2) var(--ease),border-color var(--t2) var(--ease)}
.win-copy svg{opacity:.75}
.win-copy:hover{color:var(--ink);border-color:var(--ink)}
.win-copy:hover svg{opacity:1}
.win-copy.done{color:var(--ok);border-color:var(--ok)}

/* code tabs */
.tabs{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);margin:16px 0}
.tab-list{display:flex;align-items:center;gap:4px;padding:7px 12px;background:var(--surface-2);border-bottom:1px solid var(--line);direction:ltr}
.tab-list button:not(.win-copy){border:0;background:transparent;border-radius:10px;padding:6px 14px;font:inherit;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer}
.tab-list button:not(.win-copy)[aria-selected=true]{background:var(--ink);color:#fff}
.tab-list .win-copy{margin-inline-start:auto}
.tabs .tab-panel pre{border:0;border-radius:0;margin:0}

/* admin-written site notice + legal pages */
.site-notice{background:var(--ink);color:#fff;text-align:center;padding:8px 16px;font-size:14px}
.legal ol,.legal ul{line-height:2.1}

/* contact page + public ticket thread */
.contact-wrap{padding:8px 16px 80px;display:flex;flex-direction:column;gap:18px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-form,.sup-card,.track-card{padding:24px}
.contact-form h2,.sup-card h2,.track-card h2{font-size:21px;font-weight:500;margin-bottom:14px}
.contact-aside{gap:18px}
.sup-list{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:14px}
.sup-list li{display:flex;align-items:center;gap:12px}
.sup-list li div{display:flex;flex-direction:column;min-width:0}
.sup-list b{font-size:14px}
.sup-list a{font-size:14px;overflow-wrap:anywhere}
.sup-ic{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--cloud);color:var(--brand)}
.sup-ic svg{width:20px;height:20px}
.sup-hours{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;margin-top:6px}
.sup-hours svg{width:16px;height:16px;flex:none}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.ticket-wrap{max-width:780px;margin:0 auto;padding:8px 16px 80px;display:flex;flex-direction:column;gap:16px}
.tkt-code{background:var(--cloud);color:var(--ink);padding:2px 10px;border-radius:10px;font-family:var(--mono);font-weight:500}
.reply-box{border-top:1px solid var(--line);padding-top:18px}
.ticket-closed{text-align:center;padding:16px}


/* ---------------------------------------------------------------- illustrated landing (templates/site/_mocks.php)
   Mock-ups of the real product beside each explanation. HTML/CSS only, decorative (aria-hidden). */

/* how it works: each step shows what you actually do */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.steps.steps-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.steps.steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.step-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.step-visual{position:relative;height:196px;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line);
  background-color:var(--cloud);background-image:linear-gradient(rgb(21 21 21/.05) 1px,transparent 1px),linear-gradient(90deg,rgb(21 21 21/.05) 1px,transparent 1px);background-size:24px 24px}
.step-body{padding:20px 22px 24px}
.step-num{display:inline-block;margin-bottom:10px;color:var(--label);font-family:var(--mono);font-size:13px;font-weight:500}
.step-body h3{font-size:20px;font-weight:500}
.step-body p{margin-top:6px;color:var(--muted);font-size:15px;line-height:1.9}
.step-app{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:14px;font-weight:500;color:var(--brand)}
.step-app svg{width:16px;height:16px}

.mini-card{width:224px;aspect-ratio:1.586;padding:14px 16px;border-radius:16px;color:#fff;font-size:12px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(135deg,#E5484D,#A3161D 75%);box-shadow:0 18px 30px -14px rgb(163 22 29/.6);transform:rotate(-4deg)}
.mini-card .mc-row{display:flex;justify-content:space-between;align-items:center;font-weight:700}
.mc-chip{width:30px;height:21px;border-radius:5px;background:linear-gradient(135deg,#F7D774,#C9A227)}
.mc-pan{font-family:Consolas,Estedad,monospace;font-size:15px;letter-spacing:1px;text-align:left}
.mc-ok{display:inline-flex;align-items:center;gap:3px;padding:1px 9px;border-radius:999px;background:rgb(255 255 255/.22);font-size:11px}
.mc-ok svg{width:12px;height:12px}
.mini-phone{width:124px;height:176px;align-self:end;transform:translateY(26px);padding:12px 12px 0;border-radius:24px;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 18px 30px -12px rgb(30 27 75/.55)}
.mp-notch{width:38px;height:5px;border-radius:5px;background:rgb(255 255 255/.25)}
.mini-phone .qr{width:88px;height:88px;padding:6px;border-radius:10px;background:#fff;color:var(--ink)}
.mp-cap{display:inline-flex;align-items:center;gap:4px;color:#86EFAC;font-size:11px;font-weight:800}
.mp-cap svg{width:13px;height:13px}
.mini-chat{width:236px;display:flex;flex-direction:column;gap:6px}
.mch-msg{padding:10px 12px;border-radius:14px;border-end-start-radius:4px;background:var(--surface);font-size:12.5px;line-height:1.8;box-shadow:0 1px 0 rgb(30 27 75/.08)}
.mch-link{display:block;color:var(--brand);font-family:Consolas,Estedad,monospace;font-size:11.5px;text-align:left}
.mch-btn{padding:6px;border-radius:10px;border:1px solid color-mix(in srgb,var(--brand) 25%,var(--line));background:var(--surface);color:var(--brand);text-align:center;font-size:12.5px;font-weight:800}
.mini-stamp{width:112px;height:112px;border-radius:50%;border:4px solid var(--saffron);background:var(--surface);color:#B7791F;display:grid;place-items:center;text-align:center;font-weight:900;transform:rotate(-12deg)}
.mini-stamp small{display:block;font-size:11px}

/* showcase: text on one side, the real screen on the other, alternating */
.showcase{display:flex;flex-direction:column;gap:80px}
.sc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.sc-row:nth-child(even) .sc-text{order:2}
.sc-tag{display:inline-block;color:var(--label);font-family:var(--mono);font-size:13px;font-weight:500}
.sc-text h3{margin:12px 0 10px;font-size:32px;font-weight:500;line-height:1.4}
.sc-text p{color:var(--muted);font-size:16.5px;line-height:2}
.sc-visual{position:relative;min-height:350px;padding:40px 28px;border-radius:var(--radius);display:grid;place-items:center;overflow:hidden;
  background-color:var(--cloud);background-image:linear-gradient(rgb(21 21 21/.05) 1px,transparent 1px),linear-gradient(90deg,rgb(21 21 21/.05) 1px,transparent 1px);background-size:28px 28px}
.mock{position:relative;width:min(100%,380px);font-size:13px;line-height:1.8}

.ml-paper{width:min(100%,280px);margin-inline:auto;padding:20px;border-radius:20px;background:var(--surface);display:flex;flex-direction:column;gap:11px;box-shadow:0 24px 50px -24px rgb(0 0 0/.16)}
.ml-shop{display:flex;align-items:center;gap:10px}
.ml-logo{width:36px;height:36px;border-radius:12px;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:900}
.ml-shop b{display:block;font-size:14px}
.ml-shop small{color:var(--muted);font-size:12px}
.ml-title{padding-top:10px;border-top:1px dashed var(--line-strong);font-size:15px;font-weight:800}
.ml-amount{font-size:26px;font-weight:900;line-height:1.3}
.ml-amount small{color:var(--muted);font-size:13px;font-weight:500}
.ml-input{padding:9px 12px;border:1px solid var(--line-strong);border-radius:12px;color:#8A89AE}
.ml-btn{padding:10px;border-radius:12px;background:var(--brand);color:#fff;text-align:center;font-weight:800}
.ml-qr,.ml-stat{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow-lift);font-size:11.5px;font-weight:700;line-height:1.6}
.mock-link{padding:44px 0 62px}
.ml-qr{inset-inline-start:-6px;bottom:0}
.ml-qr .qr{width:54px;height:54px;color:var(--ink)}
.ml-stat{inset-inline-end:-6px;top:0}
.ml-stat b{color:var(--ok);font-size:26px;font-weight:900}

.mock-tg{border-radius:22px;overflow:hidden;background:var(--surface);box-shadow:0 24px 50px -24px rgb(0 0 0/.16)}
.tg-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.tg-ava{width:38px;height:38px;border-radius:50%;background:var(--grad);display:grid;place-items:center}
.tg-ava img{width:22px;height:22px}
.tg-head b{display:block;font-size:14px}
.tg-head small{color:var(--muted);font-size:12px}
.tg-body{padding:14px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(160deg,#DFE8F6,#ECE7F8)}
.tg-msg{align-self:flex-start;max-width:90%;padding:9px 12px 5px;border-radius:16px;border-end-start-radius:4px;background:var(--surface);display:flex;flex-direction:column;box-shadow:0 1px 0 rgb(30 27 75/.08)}
.tg-msg b{display:inline-flex;align-items:center;gap:5px;font-size:13.5px}
.tg-msg b svg{width:16px;height:16px}
.tg-msg b.ok{color:var(--ok)}
.tg-msg b.warn{color:var(--warn)}
.tg-msg .muted{color:var(--muted);font-size:12px}
.tg-msg time{align-self:flex-end;color:#8A90B8;font-size:10.5px}
.tg-keys{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:90%}
.tg-keys span{display:flex;align-items:center;justify-content:center;gap:4px;padding:7px;border-radius:10px;background:rgb(255 255 255/.8);color:var(--brand-deep);font-size:12.5px;font-weight:800}
.tg-keys svg{width:14px;height:14px}

.mock-dash{width:min(100%,410px);border-radius:18px;overflow:hidden;background:var(--surface);box-shadow:0 24px 50px -24px rgb(0 0 0/.16)}
.md-top{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.md-dots{display:flex;gap:5px}
.md-dots i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.md-url{flex:1;padding:2px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);font-size:11px;text-align:center}
.md-body{padding:14px;display:flex;flex-direction:column;gap:12px}
.md-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.md-stats div{padding:8px 10px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column}
.md-stats small{color:var(--muted);font-size:11px}
.md-stats b{font-size:17px;font-weight:900;line-height:1.5}
.md-stats em{color:var(--muted);font-size:10.5px;font-style:normal}
.md-chart{padding:10px 10px 6px;border:1px solid var(--line);border-radius:12px}
.md-chart svg{display:block;width:100%;height:84px}
.md-chart rect{fill:color-mix(in srgb,var(--brand) 22%,#fff)}
.md-chart rect.today{fill:var(--brand)}
.md-days{display:grid;grid-template-columns:repeat(7,1fr);margin-top:4px;color:var(--muted);font-size:10.5px;text-align:center}
.md-days .today{color:var(--brand);font-weight:800}
.md-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:6px 2px;border-top:1px solid var(--line);font-size:12px}
.md-row .pill{font-size:10.5px}

.mock-code{width:min(100%,410px);border-radius:18px;overflow:hidden;background:var(--ink);color:#E0E7FF;box-shadow:0 24px 50px -24px rgb(30 27 75/.6)}
.mcd-top{display:flex;gap:4px;padding:8px;background:rgb(255 255 255/.06)}
.mcd-top span{padding:4px 12px;border-radius:8px;color:#A5B4FC;font-size:12px;font-weight:700}
.mcd-top .on{background:rgb(255 255 255/.12);color:#fff}
.mock-code pre{display:block;direction:ltr;margin:0;padding:16px 18px;overflow:hidden;font-family:Consolas,Estedad,monospace;font-size:12.5px;line-height:1.75;text-align:left;white-space:pre}
.mock-code .k{color:#FBBF24;font-weight:700}
.mock-code .s{color:#86EFAC}
.mock-code .c{color:#A5B4FC}
.mcd-event{display:flex;align-items:center;gap:8px;margin:0 12px 12px;padding:9px 12px;border-radius:12px;background:rgb(134 239 172/.12);color:#BBF7D0;font-size:12px}
.mcd-event code{color:#fff;font-family:Consolas,monospace}
.mcd-event .dot{width:8px;height:8px;flex:none;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 4px rgb(74 222 128/.2)}

/* who it's for: cards instead of pills */
.who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.who.who-2,.who.who-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.who.who-3,.who.who-5,.who.who-6{grid-template-columns:repeat(3,minmax(0,1fr))}
.who-card{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.who-card .wi{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--ink);color:#fff}
.who-card .wi svg{width:21px;height:21px}
.who-card b{font-size:17px;font-weight:500;line-height:1.7}

/* privacy band: the phone shows exactly what leaves it */
.privacy-visual{justify-self:center}
.phone{width:252px;padding:10px;border-radius:40px;background:#0F0D2E;box-shadow:0 40px 70px -30px rgb(0 0 0/.65),inset 0 0 0 2px rgb(255 255 255/.08)}
.ph-screen{padding:10px 12px 14px;border-radius:31px;overflow:hidden;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;gap:9px;font-size:12px;line-height:1.7}
.ph-status{display:flex;justify-content:space-between;align-items:center;padding:0 8px;font-size:11px;font-weight:800}
.ph-sig{display:flex;align-items:flex-end;gap:2px}
.ph-sig i{width:3px;border-radius:1px;background:var(--ink)}
.ph-sig i:nth-child(1){height:11px}
.ph-sig i:nth-child(2){height:8px}
.ph-sig i:nth-child(3){height:5px}
.ph-head{display:flex;align-items:center;gap:8px}
.ph-head img{width:24px;height:24px}
.ph-head b{font-size:14px;font-weight:900}
.ph-live{margin-inline-start:auto;display:inline-flex;align-items:center;gap:5px;padding:1px 9px;border-radius:999px;background:var(--ok-bg);color:var(--ok);font-size:11px;font-weight:800}
.ph-live i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:ping 1.8s ease-in-out infinite}
.ph-card{padding:12px 14px;border-radius:16px;background:var(--grad);color:#fff;display:flex;flex-direction:column}
.ph-card small,.ph-card span{opacity:.85;font-size:11px}
.ph-card b{font-size:16px;font-weight:900}
.ph-sec{margin-top:2px;color:var(--muted);font-size:11.5px;font-weight:800}
.ph-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:12px;background:var(--surface)}
.ph-item>i{width:6px;height:28px;flex:none;border-radius:12px}
.ph-item>div{flex:1;display:flex;flex-direction:column}
.ph-item b{font-size:12.5px}
.ph-item small{color:var(--muted);font-size:10.5px}
.b-mellat{background:#D71E28}
.b-melli{background:#0B4EA2}
.b-saman{background:#0091D5}
.ph-tick{color:var(--ok)}
.ph-tick svg{width:16px;height:16px}
.ph-lock{display:flex;align-items:center;justify-content:center;gap:6px;padding:7px;border-radius:12px;background:var(--brand-soft);color:var(--brand-deep);font-size:11px;font-weight:800}
.ph-lock svg{width:15px;height:15px}

@media (max-width:1100px){
  .steps.steps-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sc-row{gap:36px}
}
@media (max-width:900px){
  .steps,.steps.steps-2,.steps.steps-4{grid-template-columns:1fr}
  .showcase{gap:56px}
  .sc-row{grid-template-columns:1fr;gap:22px}
  .sc-row:nth-child(even) .sc-text{order:0}
  .sc-text h3{font-size:23px}
  .sc-visual{min-height:0;padding:30px 18px;border-radius:26px}
  .ml-qr{inset-inline-start:0}
  .ml-stat{inset-inline-end:0}
  .who,.who.who-2,.who.who-3,.who.who-4,.who.who-5,.who.who-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .who-card{padding:20px 12px}
}
@media (max-width:420px){
  .ml-qr,.ml-stat{padding:8px 10px;gap:8px;font-size:10px}
  .ml-qr .qr{width:44px;height:44px}
  .ml-stat b{font-size:22px}
  .md-stats div{padding:7px 8px}
  .md-stats b{font-size:14px}
  .mock-code pre{font-size:11px;padding:14px}
}
@media (prefers-reduced-motion:reduce){.ph-live i{animation:none}}

/* ---------------------------------------------------------------- inner pages: one calm header, then one job per page */
.page-head{position:relative;padding:72px 0 52px;text-align:center;border-bottom:1px solid var(--line);background:var(--surface);overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;background-position:center top;opacity:.55;-webkit-mask-image:radial-gradient(70% 90% at 50% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(70% 90% at 50% 30%,#000 20%,transparent 75%)}
.page-head .wrap{position:relative}
.page-head .eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;font-family:var(--mono);font-size:13.5px;font-weight:500;color:var(--label)}
.page-head .eyebrow::before{content:"";width:6px;height:6px;background:currentColor}
.page-head h1{font-size:50px;font-weight:500;line-height:1.3;text-wrap:balance}
.page-head p{max-width:40em;margin:14px auto 0;color:var(--muted);font-size:17px;line-height:2}
.page-head .cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.page-head.small{padding:40px 0 30px}
.page-head.small h1{font-size:38px}
.section.tight{padding-top:44px}

/* landing: features as one tabbed block instead of four long rows */
.sc-tabs{display:flex;flex-direction:column;gap:32px}
.sc-tablist{display:flex;gap:0;width:fit-content;max-width:100%;padding:0;overflow-x:auto;border:1px solid var(--ink);border-radius:10px;background:var(--surface)}
.sc-tablist button{flex:none;padding:8px 18px;border:0;border-inline-start:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background var(--t1),color var(--t1)}
.sc-tablist button:first-child{border-inline-start:0}
.sc-tablist button[aria-selected=true]{background:var(--ink);color:#fff}
.sc-tabs .sc-row .sc-text{order:0}
.sc-tabs [data-panel]:not([hidden]){animation:rise var(--t2) var(--ease) both}
.sc-text h2{margin:12px 0 10px;font-size:32px;font-weight:500;line-height:1.4}

/* pricing */
.assure{list-style:none;margin:28px 0 0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:12px 28px;color:var(--muted);font-size:14px;font-weight:700}
.assure li{display:inline-flex;align-items:center;gap:6px}
.assure svg{width:18px;height:18px;color:var(--brand)}
.compare-table{max-width:900px;margin:0 auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.compare-table table{width:100%;border-collapse:collapse}
.compare-table th,.compare-table td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:center;font-size:14.5px}
.compare-table thead th{font-size:16px;font-weight:500}
.compare-table tbody th{text-align:start;color:var(--muted);font-weight:400}
.compare-table tr:last-child>*{border-bottom:0}
.compare-table .hot{background:var(--cloud)}
.compare-table thead .hot{color:var(--ink);box-shadow:inset 0 2px 0 var(--ink)}
.compare-table .yes svg{width:18px;height:18px;color:var(--ok);vertical-align:middle}

/* docs: sticky table of contents beside the article */
.doc-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:start}
.doc-layout .doc{max-width:none;margin:0;padding:28px 0 80px}
.toc{position:sticky;top:84px;margin-top:28px;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);display:flex;flex-direction:column;gap:2px}
.toc b{margin-bottom:6px;padding:0 10px;color:var(--muted);font-size:13px}
.toc a{padding:6px 10px;border-radius:10px;color:var(--ink);font-size:14px}
.toc a:hover{background:var(--cloud);text-decoration:none}
.doc h2[id],.doc h3[id],.doc p[id]{scroll-margin-top:90px}

/* connect: pick your path, read only that */
.guide-wrap .doc{padding-top:28px}
.path-tabs .paths{margin-top:12px}
.path-panel>h2:first-child{margin-top:28px}
.guide>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.faq .wrap{max-width:860px}
.faq summary{align-items:center}
@media (max-width:900px){
  .page-head{padding:48px 0 36px}
  .page-head h1{font-size:34px}
  .page-head.small h1{font-size:26px}
  .sc-tablist{justify-content:flex-start}
  .sc-text h2{font-size:25px}
  .doc-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .toc{position:static;flex-direction:row;flex-wrap:wrap;gap:6px;margin-top:20px;padding:10px}
  .toc b{width:100%;padding:0 4px}
  .toc a{padding:4px 10px;border:1px solid var(--line);border-radius:10px;font-size:13px}
  .compare-table th,.compare-table td{padding:10px;font-size:13px;white-space:nowrap}
}

/* navigation: inline links on wide screens, a sheet on phones (a <details>, so it works without JS) */
.nav-links{display:flex;align-items:center;gap:18px}
.nav-menu{display:none;position:relative}
.nav-menu summary{list-style:none;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--ink);border-radius:10px;background:var(--surface);cursor:pointer}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu .burger{display:flex;flex-direction:column;gap:4px}
.nav-menu .burger i{display:block;width:18px;height:2px;border-radius:10px;background:var(--ink);transition:transform var(--t1) var(--ease),opacity var(--t1)}
.nav-menu[open] .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-menu[open] .burger i:nth-child(2){opacity:0}
.nav-menu[open] .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-sheet{position:fixed;inset-inline:12px;top:68px;z-index:30;display:flex;flex-direction:column;gap:0;padding:8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-lift);animation:rise var(--t2) var(--ease) both}
.nav-sheet a:not(.btn){display:flex;justify-content:space-between;align-items:center;padding:14px 12px;border-bottom:1px solid var(--line);color:var(--ink);font-size:16px;font-weight:500}
.nav-sheet a:not(.btn):hover,.nav-sheet a.on{background:var(--cloud);text-decoration:none}
.nav-sheet a span{color:var(--muted)}
.nav-sheet .btn{margin-top:10px}
@media (max-width:420px){.site-nav .inner{gap:10px}.site-nav .btn.small{padding-inline:12px}}
@media (max-width:900px){
  .nav-links,.site-nav .nav-login{display:none}
  .nav-menu{display:block}
}