@font-face{font-family:"Vazirmatn";src:url("../fonts/vazirmatn-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:#fff; --bg-soft:#f7f8f7; --ink:#14201b; --ink-2:#4b5651; --ink-3:#7d8782;
  --line:#e6e9e7; --line-2:#d5dad7;
  --accent:#0f6e56; --accent-d:#0b5643; --accent-soft:#e8f5f0;
  --warn-soft:#f1f3f2;
  --r:12px; --r-lg:18px; --w:1400px;
  --shadow:0 1px 2px rgba(20,32,27,.04),0 8px 24px -12px rgba(20,32,27,.12);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:"Vazirmatn",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.8;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--w);margin-inline:auto;padding-inline:24px}
.sec{padding-block:88px}
.sec.soft{background:var(--bg-soft)}
.sec-head{max-width:620px;margin-bottom:40px}
.sec-head h2{font-size:30px;line-height:1.5;font-weight:700;letter-spacing:-.01em}
.sec-head p{color:var(--ink-2);margin-top:8px}
.eyebrow{font-size:13px;color:var(--accent);font-weight:600;margin-bottom:10px;display:block}

/* header */
.hdr{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--accent)}
.logo img{width:26px;height:26px}
.nav{display:flex;gap:4px;justify-content:center;overflow-x:auto}
.nav a{padding:6px 12px;border-radius:8px;font-size:14.5px;color:var(--ink-2);white-space:nowrap}
.nav a:hover,.nav a[aria-current]{color:var(--ink);background:var(--bg-soft)}
.hdr .end{justify-self:end;display:flex;gap:8px;align-items:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding-inline:20px;border-radius:10px;font-size:15px;font-weight:600;border:1px solid transparent;transition:.15s;cursor:pointer;font-family:inherit}
.btn.sm{height:38px;padding-inline:16px;font-size:14px}
.btn.lg{height:52px;padding-inline:28px;font-size:16px}
.btn-pri{background:var(--accent);color:#fff}
.btn-pri:hover{background:var(--accent-d)}
.btn-sec{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn-sec:hover{border-color:var(--ink-3)}
.btn-ghost{color:var(--ink-2)}
.btn-ghost:hover{color:var(--ink)}
.link{color:var(--accent);font-weight:600;font-size:14.5px}
.link:hover{text-decoration:underline;text-underline-offset:4px}

/* hero */
.hero{padding-block:80px 72px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;justify-items:center;text-align:center}
.hero .wrap>div:first-child{width:100%;max-width:680px;margin-inline:auto;display:flex;flex-direction:column;align-items:center}
.hero h1{font-size:clamp(30px,4.6vw,46px);line-height:1.4;font-weight:800;letter-spacing:-.02em;max-width:640px;margin-inline:auto;text-wrap:balance}
.hero p.lead{font-size:18px;color:var(--ink-2);margin:20px auto 0;max-width:540px;text-wrap:balance}
.plat{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:32px auto 0;max-width:440px;text-align:center}
.plat a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 18px;border:1px solid var(--line-2);border-radius:var(--r);transition:.15s;background:#fff}
.plat a:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.plat b{font-size:16px}
.plat span{font-size:13px;color:var(--ink-3)}
.plat a.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.plat a.pri span{color:rgba(255,255,255,.8)}
.hero .sub{margin-top:20px;font-size:14px;color:var(--ink-3);display:flex;gap:20px;justify-content:center}
.hero .sub a:hover{color:var(--ink)}

/* browser frame (placeholder for screenshots) */
.frame{border:1px solid var(--line-2);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow);overflow:hidden}
.frame .bar{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--bg-soft)}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.frame .bar u{flex:1;height:20px;border-radius:6px;background:#fff;border:1px solid var(--line);margin-inline-start:10px}
.shot{aspect-ratio:16/10;background:repeating-linear-gradient(135deg,#f5f7f6 0 14px,#eef1ef 14px 28px);display:grid;place-items:center;color:var(--ink-3);font-size:13px}
.shot.sm{aspect-ratio:16/9}
.hero .frame{width:100%;max-width:980px}

/* social proof pill */
.proof{display:inline-flex;align-items:center;gap:10px;padding:4px 16px 4px 5px;border:1px solid var(--line-2);border-radius:99px;background:#fff;margin-bottom:22px;font-size:13px;color:var(--ink-2);line-height:1}
.proof b{font-size:17px;color:var(--ink);font-weight:800;direction:ltr;unicode-bidi:isolate}
.proof .av{display:flex}
.proof .av i{width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:var(--accent-soft);margin-inline-start:-9px;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:700;color:var(--accent);box-shadow:0 0 0 1px var(--line)}
.proof .av i:first-child{margin-inline-start:0}
.proof .av i:nth-child(2){background:#eaf1fb;color:#2563eb}
.proof .av i:nth-child(3){background:#fbf3e4;color:#b7791f}

/* proof strip */
.strip{border-block:1px solid var(--line)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:28px}
.strip div{display:flex;flex-direction:column}
.strip b{font-size:15px}
.strip span{font-size:13.5px;color:var(--ink-3)}

/* product cards */
.group+.group{margin-top:64px}
.group-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.group-h h3{font-size:22px;font-weight:700}
.group-h span{font-size:14px;color:var(--ink-3);margin-inline-start:12px;font-weight:400}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;transition:.18s;overflow:hidden}
.card:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.card .shot{aspect-ratio:16/9;border-bottom:1px solid var(--line)}
.card .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h4{font-size:18px;font-weight:700;line-height:1.6}
.card p{font-size:14.5px;color:var(--ink-2)}
.card .foot{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between}
.price{font-size:15px;font-weight:700}
.price small{font-weight:400;color:var(--ink-3);font-size:12.5px;margin-inline-start:4px}
.badge{align-self:flex-start;font-size:12px;font-weight:600;padding:2px 10px;border-radius:99px}
.badge.free{background:var(--accent-soft);color:var(--accent)}
.badge.paid{background:var(--warn-soft);color:var(--ink-2)}
.badge.soon{border:1px dashed var(--line-2);color:var(--ink-3)}

/* compare */
.cmp{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.cmp th,.cmp td{padding:14px 20px;text-align:start;font-size:14.5px;border-bottom:1px solid var(--line)}
.cmp tr:last-child td{border-bottom:0}
.cmp thead th{background:var(--bg-soft);font-weight:700}
.cmp td:not(:first-child),.cmp th:not(:first-child){text-align:center;width:22%}
.yes{color:var(--accent);font-weight:700}
.no{color:var(--line-2)}

/* two-col feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split h2{font-size:30px;line-height:1.5;font-weight:700}
.split p{color:var(--ink-2);margin-top:12px}
.ticks{list-style:none;padding:0;margin-top:20px;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;font-size:15px}
.ticks li::before{content:"";flex:none;width:18px;height:18px;margin-top:5px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%230f6e56' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.docs-list{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.docs-list a{display:flex;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);font-size:15px}
.docs-list a:last-child{border:0}
.docs-list a:hover{background:var(--bg-soft)}
.docs-list span{color:var(--ink-3);font-size:13px;white-space:nowrap}

/* services strip + cta */
.band{border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 36px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fff}
.band h3{font-size:20px}
.band p{color:var(--ink-2);font-size:15px}

/* blog */
.post .shot{aspect-ratio:16/9}

/* footer */
.ftr{border-top:1px solid var(--line);padding-block:56px 32px;font-size:14.5px;color:var(--ink-2)}
.ftr .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:32px}
.ftr h5{font-size:14px;color:var(--ink);margin-bottom:12px}
.ftr ul{list-style:none;padding:0;display:grid;gap:8px}
.ftr a:hover{color:var(--ink)}
.ftr .copy{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3);display:flex;justify-content:space-between}

/* product page */
.crumb{font-size:13.5px;color:var(--ink-3);padding-block:24px 0}
.crumb a:hover{color:var(--ink)}
.p-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start}
.p-main{min-width:0}
.p-hero{padding-block:24px 48px}
.p-hero h1{font-size:38px;line-height:1.4;font-weight:800;letter-spacing:-.02em;margin-top:12px}
.p-hero .lead{font-size:17.5px;color:var(--ink-2);margin-top:14px}
.p-hero .frame{margin-top:32px}
.buy{position:sticky;top:92px;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px;background:#fff;box-shadow:var(--shadow);display:grid;gap:16px}
.buy .pr{font-size:30px;font-weight:800}
.buy .pr small{font-size:14px;font-weight:400;color:var(--ink-3)}
.buy .btn{width:100%}
.meta{display:grid;gap:0;font-size:14px;border-top:1px solid var(--line);padding-top:6px}
.meta div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--line)}
.meta div:last-child{border:0}
.meta span{color:var(--ink-3)}
.note{font-size:13px;color:var(--ink-3);background:var(--bg-soft);border-radius:10px;padding:10px 14px}
.tabs{position:sticky;top:68px;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-block:1px solid var(--line)}
.tabs{display:flex;gap:4px;overflow-x:auto}
.tabs a{padding:14px 16px;font-size:14.5px;color:var(--ink-2);white-space:nowrap;border-bottom:2px solid transparent}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--accent);border-color:var(--accent);font-weight:600}

.p-body section{padding-block:56px;border-bottom:1px solid var(--line);scroll-margin-top:130px}
.p-body section:last-child{border:0}
.p-body h2{font-size:26px;font-weight:700;margin-bottom:20px}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feat div{border:1px solid var(--line);border-radius:var(--r);padding:20px}
.feat b{display:block;margin-bottom:4px}
.feat p{font-size:14.5px;color:var(--ink-2)}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between}
.faq summary::after{content:"+";color:var(--ink-3);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{margin-top:10px;color:var(--ink-2);font-size:15px}
.log{display:grid;gap:20px}
.log h4{font-size:15px;display:flex;gap:10px;align-items:center}
.log h4 span{font-size:13px;color:var(--ink-3);font-weight:400}
.log ul{margin:8px 0 0;padding-inline-start:20px;color:var(--ink-2);font-size:14.5px}
.mobile-buy{display:none}

@media (max-width:960px){
  .sec{padding-block:60px}
  .hero{padding-block:48px}
  .hero .wrap,.split{grid-template-columns:1fr;gap:36px}
  .p-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .hero h1{font-size:34px}
  .hero .wrap{gap:40px}
  .grid,.grid.two,.gal,.feat{grid-template-columns:1fr}
  .strip .wrap{grid-template-columns:1fr 1fr}
  .ftr .cols{grid-template-columns:1fr 1fr}
  .band{flex-direction:column;align-items:flex-start}
  .hdr .wrap{gap:12px;grid-template-columns:auto minmax(0,1fr) auto}
  .hdr .end .btn-ghost{display:none}
  .buy{position:static}
  .mobile-buy{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line-2);padding:12px 16px;gap:12px;align-items:center;justify-content:space-between}
  body.has-mbuy{padding-bottom:76px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===== richer visuals ===== */
:root{--wp:#2563eb;--wp-soft:#e8f0fe;--ps:#e0527a;--ps-soft:#fde8ee}

/* hero background */
.hero{position:relative;overflow:hidden;isolation:isolate;background:
  radial-gradient(900px 420px at 50% -80px,rgba(15,110,86,.13),transparent 70%),
  radial-gradient(520px 320px at 8% 55%,rgba(37,99,235,.07),transparent 70%),
  radial-gradient(520px 320px at 92% 45%,rgba(224,82,122,.07),transparent 70%),#fff}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle,rgba(20,32,27,.13) 1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 75%)}
.deco{position:absolute;z-index:-1;border-radius:22px}
.deco.d1{width:64px;height:150px;background:linear-gradient(180deg,#4db892,#1a5c47);inset-inline-start:8%;top:130px;transform:rotate(14deg);opacity:.16}
.deco.d2{width:64px;height:150px;background:linear-gradient(180deg,#2d9e7a,#155e48);inset-inline-end:8%;top:190px;transform:rotate(-12deg);opacity:.16}
.deco.d3{width:26px;height:26px;border-radius:8px;background:var(--wp);inset-inline-start:17%;top:360px;opacity:.28;transform:rotate(18deg)}
.deco.d4{width:22px;height:22px;border-radius:50%;background:var(--ps);inset-inline-end:16%;top:330px;opacity:.3}
.hero h1 em{font-style:normal;color:var(--accent)}

/* hero stage */
.stage{position:relative;width:100%;max-width:980px;margin-top:8px}
.stage .frame{box-shadow:0 30px 60px -30px rgba(20,32,27,.35),0 2px 6px rgba(20,32,27,.05)}
.stage .shot{aspect-ratio:16/8.4;padding:0;display:block;background:#f6f8f7}
.chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 14px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 30px -12px rgba(20,32,27,.28);font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;text-align:start}
.chip i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-size:13px;background:var(--accent-soft);color:var(--accent)}
.chip small{display:block;font-weight:400;color:var(--ink-3);font-size:12px;line-height:1.3}
.chip.c1{inset-inline-start:-28px;top:18%}
.chip.c1 i{background:var(--wp-soft);color:var(--wp)}
.chip.c2{inset-inline-end:-24px;top:34%}
.chip.c2 i{background:var(--ps-soft);color:var(--ps)}
.chip.c3{inset-inline-start:7%;bottom:-18px}
@media (prefers-reduced-motion:no-preference){
  .chip{animation:fl 6s ease-in-out infinite}
  .chip.c2{animation-delay:-2s}.chip.c3{animation-delay:-4s}
  @keyframes fl{50%{transform:translateY(-8px)}}
}

/* mini UI used in hero + cards */
.ui{display:grid;grid-template-columns:17% 1fr;height:100%;width:100%;text-align:start;--t:var(--accent);--ts:var(--accent-soft);transition:transform .35s}
.ui s{display:block;background:#e3e8e5;border-radius:6px;height:8px;text-decoration:none}
.ui-side{background:#fff;border-inline-end:1px solid var(--line);padding:12% 12%;display:grid;align-content:start;gap:10px}
.ui-side s:first-child{background:var(--t);height:12px;width:70%;opacity:.85}
.ui-main{padding:5% 5%;display:grid;gap:10px;align-content:start}
.ui-top{display:flex;justify-content:space-between;align-items:center}
.ui-top s:first-child{width:34%}
.ui-top s.btn{width:15%;height:14px;background:var(--t);border-radius:5px}
.ui-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ui-cards div{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px;display:grid;gap:6px}
.ui-cards div::before{content:"";height:14px;width:45%;background:var(--ts);border-radius:5px}
.ui-cards div::after{content:"";height:6px;width:70%;background:#e9edeb;border-radius:4px}
.ui-chart{background:#fff;border:1px solid var(--line);border-radius:8px;display:flex;align-items:flex-end;gap:6px;padding:10px;height:60px}
.ui-chart s{flex:1;background:var(--ts);border-radius:4px 4px 0 0}
.ui-chart s:nth-child(3n){background:var(--t);opacity:.8}
.stage .ui-chart{height:110px}
.stage .ui-cards div{padding:14px}
.ui.v2{grid-template-columns:1fr;place-items:center;background:linear-gradient(180deg,var(--ts),#fff)}
.ui.v2 .box{width:46%;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;display:grid;gap:7px;box-shadow:0 8px 20px -10px rgba(20,32,27,.25)}
.ui.v2 .box s{height:11px;border-radius:5px;background:#eef1ef;border:1px solid var(--line)}
.ui.v2 .box s.go{background:var(--t);border:0;height:12px}
.ui.v2 .box s.h{width:55%;height:7px;border:0;background:#dfe5e2}
.ui.v3{grid-template-columns:1fr;grid-template-rows:auto 1fr;background:#fff}
.ui.v3 .nv{display:flex;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);align-items:center}
.ui.v3 .nv s{width:14%}.ui.v3 .nv s:first-child{background:var(--t);width:10%}
.ui.v3 .bd{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:8px 10px;align-content:start}
.ui.v3 .hr{grid-column:1/-1;height:34px;border-radius:8px;background:linear-gradient(90deg,var(--ts),#fff)}
.ui.v3 .pd{height:34px;border-radius:7px;background:var(--ts);opacity:.75}
.ui.v3 .pd:nth-child(odd){opacity:1;background:#eef1ef}
.t-wp{--t:var(--wp);--ts:var(--wp-soft)}
.t-ps{--t:var(--ps);--ts:var(--ps-soft)}
.t-in{--t:var(--accent);--ts:var(--accent-soft)}
.card .shot{background:#f6f8f7;padding:0;display:block;aspect-ratio:16/9;overflow:hidden}
.card:hover .shot .ui{transform:scale(1.03)}

/* trust tiles */
.strip{border:0;background:#fff;margin-top:-8px}
.strip .wrap{gap:16px;padding-block:8px}
.strip .tile{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;background:#fff;gap:2px}
.strip .tile svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px;background:var(--accent-soft);padding:6px;box-sizing:content-box;border-radius:10px}
.strip .tile b{font-size:15px}
.strip .tile span{font-size:13.5px;color:var(--ink-3)}

/* section tints */
.sec.soft{background:linear-gradient(180deg,#f7f9f8,#fff)}
.group-h h3{display:flex;align-items:center;gap:10px}
.group-h h3::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--accent)}
#wordpress .group-h h3::before{background:var(--wp)}
#prestashop .group-h h3::before{background:var(--ps)}

/* final CTA */
.cta{background:linear-gradient(135deg,#0f6e56,#0a4d3c);color:#fff;border-radius:24px;padding:56px 40px;text-align:center;position:relative;overflow:hidden;isolation:isolate}
.cta::before,.cta::after{content:"";position:absolute;z-index:-1;border-radius:22px;background:rgba(255,255,255,.07);width:90px;height:220px}
.cta::before{inset-inline-start:6%;top:-40px;transform:rotate(14deg)}
.cta::after{inset-inline-end:6%;bottom:-60px;transform:rotate(-12deg)}
.cta h2{font-size:32px;line-height:1.5;font-weight:800}
.cta p{color:rgba(255,255,255,.82);margin:10px auto 26px;max-width:480px}
.cta .btn-pri{background:#fff;color:var(--accent-d)}
.cta .btn-pri:hover{background:#eef6f3}
.cta .btn-sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.cta .btn-sec:hover{border-color:#fff}
.cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media (max-width:960px){
  .chip.c1{inset-inline-start:-6px}.chip.c2{inset-inline-end:-6px}
  .chip{font-size:12px;padding:8px 12px}.deco{display:none}
  .cta{padding:40px 22px}.cta h2{font-size:24px}
}

.grid.two .card .shot{aspect-ratio:21/8}

/* hero backdrop: original dots restored, loose shapes replaced by product icon tiles */
.deco{display:none}
.fi{position:absolute;z-index:-1;width:60px;height:60px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 16px 32px -14px rgba(20,32,27,.25);display:grid;place-items:center;color:var(--c,var(--accent))}
.fi::before{content:"";position:absolute;inset:7px;border-radius:12px;background:var(--cs,var(--accent-soft))}
.fi svg{position:relative;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fi.f1{left:9%;top:150px;--c:var(--wp);--cs:var(--wp-soft);transform:rotate(-8deg)}
.fi.f2{left:16%;top:330px;--c:var(--accent);--cs:var(--accent-soft);transform:rotate(7deg);width:52px;height:52px}
.fi.f3{right:10%;top:170px;--c:var(--ps);--cs:var(--ps-soft);transform:rotate(8deg)}
.fi.f4{right:17%;top:345px;--c:var(--accent);--cs:var(--accent-soft);transform:rotate(-6deg);width:52px;height:52px}
@media (prefers-reduced-motion:no-preference){
  .fi{animation:fi 7s ease-in-out infinite}
  .fi.f2{animation-delay:-2s}.fi.f3{animation-delay:-4s}.fi.f4{animation-delay:-6s}
  @keyframes fi{50%{translate:0 -10px}}
}
@media (max-width:1100px){.fi{display:none}}

/* hero copy v2 */
.hero h1{max-width:720px}
.hero h1 em{display:block}
.hero .sub{flex-wrap:wrap;gap:6px 22px;font-size:13.5px}
.hero .sub span{display:inline-flex;align-items:center;gap:22px}
.hero .sub span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line-2);margin-inline-end:0}
.hero .sub span{gap:22px}

.hero h1{font-size:clamp(28px,3.7vw,42px);max-width:860px}
.hero .wrap>div:first-child{max-width:860px}

.hero p.lead{max-width:600px}

.hero h1{font-size:clamp(32px,4.4vw,52px);line-height:1.35}

.hero h1 em{display:inline}
.hero h1{font-size:clamp(26px,4vw,48px);max-width:none}
@media (min-width:700px){.hero h1{white-space:nowrap}}

.hero-cta{margin-top:32px}
.hero-cta .btn{height:54px;padding-inline:34px;font-size:16.5px;box-shadow:0 12px 24px -10px rgba(15,110,86,.5)}

/* scroll-driven 3D product stage */
.stage3d{--p:0;position:relative;width:100%;max-width:1040px;margin-top:12px;perspective:1700px}
.tilt{position:relative;transform-style:preserve-3d;transform-origin:50% 100%;
  transform:rotateX(calc((1 - var(--p)) * 38deg)) scale(calc(.88 + .12 * var(--p)));
  will-change:transform}
.panel{position:relative;height:560px;border-radius:28px 28px 0 0;overflow:hidden;padding:56px 7% 0;
  background:
    radial-gradient(60% 70% at 12% 18%,#f1ead9 0,transparent 62%),
    radial-gradient(70% 90% at 92% 28%,#8fb0d6 0,transparent 66%),
    radial-gradient(50% 60% at 55% 100%,#a9d6c4 0,transparent 70%),
    linear-gradient(135deg,#dcefe7,#b5cde6);
  box-shadow:0 40px 80px -40px rgba(20,32,27,.45),inset 0 0 0 1px rgba(255,255,255,.55)}
.panel .frame{border-radius:16px 16px 0 0;border-bottom:0;height:100%;box-shadow:0 0 0 6px rgba(255,255,255,.45),0 30px 50px -20px rgba(20,32,27,.35)}
.panel .shot{aspect-ratio:auto;height:calc(100% - 40px)}
.panel .ui-chart{height:150px}
.panel .ui-cards div{padding:16px}
.tilt .chip{transform:translateZ(60px);z-index:3}
.tilt .chip.c1{inset-inline-start:2%;top:30%}
.tilt .chip.c2{inset-inline-end:2%;top:48%}
.tilt .chip.c3{inset-inline-start:12%;bottom:12%}
@media (prefers-reduced-motion:no-preference){
  .tilt .chip{animation:fl3 6s ease-in-out infinite}
  .tilt .chip.c2{animation-delay:-2s}.tilt .chip.c3{animation-delay:-4s}
  @keyframes fl3{50%{translate:0 -8px}}
}
@media (prefers-reduced-motion:reduce){.tilt{transform:none}}
@media (max-width:960px){
  .tilt{transform:rotateX(calc((1 - var(--p)) * 22deg)) scale(calc(.94 + .06 * var(--p)))}
  .panel{height:380px;padding:28px 5% 0;border-radius:20px 20px 0 0}
  .tilt .chip{transform:none}
  .tilt .chip.c1{top:14%}.tilt .chip.c2{top:44%}.tilt .chip.c3{bottom:8%}
}

/* tilt applies to the plain browser frame (no colored panel) */
.panel{height:auto;padding:0;background:none;border-radius:0;overflow:visible;box-shadow:none}
.panel .frame{height:auto;border-radius:var(--r-lg);border:1px solid var(--line-2);box-shadow:0 30px 60px -30px rgba(20,32,27,.35),0 2px 6px rgba(20,32,27,.05)}
.panel .shot{height:auto;aspect-ratio:16/8.4}
.panel .ui-chart{height:110px}
.panel .ui-cards div{padding:14px}
.tilt .chip.c1{top:22%}.tilt .chip.c2{top:40%}.tilt .chip.c3{bottom:-18px}
@media (max-width:960px){.panel{height:auto;padding:0;border-radius:0}.tilt .chip.c1{top:14%}.tilt .chip.c2{top:44%}.tilt .chip.c3{bottom:-14px}}

/* hero breathing room: text block centered in the first screen, stage peeks below */
.hero{padding-block:0 72px}
.hero .wrap>div:first-child{min-height:max(560px,calc(100svh - 68px - 110px));justify-content:center;padding-block:56px 40px}
.proof{margin-bottom:32px}
.hero p.lead{margin-top:26px}
.hero-cta{margin-top:44px}
.hero .sub{margin-top:30px}
.hero .wrap{gap:24px}
@media (max-width:960px){
  .hero .wrap>div:first-child{min-height:0;padding-block:48px 24px}
  .hero-cta{margin-top:32px}
}

.hero .wrap>div:first-child{min-height:max(540px,calc(100svh - 68px - 190px))}
.fi.f1{top:190px}.fi.f3{top:205px}.fi.f2{top:370px}.fi.f4{top:385px}

.hero .wrap>div:first-child{min-height:max(520px,calc(100svh - 68px - 300px));padding-block:48px 24px}
.fi.f1{top:170px}.fi.f3{top:185px}.fi.f2{top:340px}.fi.f4{top:355px}

/* customer logo marquee: two rows, opposite directions */
.hero .wrap>div:first-child{min-height:0;padding-block:104px 28px}
.marquee{width:100vw;margin-inline:calc(50% - 50vw);overflow:hidden;display:grid;gap:26px;padding-block:6px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.mq-row{display:flex;align-items:center;gap:72px;width:max-content;direction:ltr;animation:mq 46s linear infinite}
.mq-row.rev{animation-direction:reverse;animation-duration:52s}
.mq-row img{height:42px;width:auto;max-width:140px;object-fit:contain;filter:grayscale(1);opacity:.55;transition:filter .25s,opacity .25s}
.mq-row img:hover{filter:none;opacity:1}
.marquee:hover .mq-row{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-row{animation:none}}
.stage3d{margin-top:36px}
@media (max-width:960px){.hero .wrap>div:first-child{padding-block:56px 24px}.mq-row img{height:34px}.mq-row{gap:48px}}

.marquee{direction:ltr}
.hero .wrap{gap:8px}
.stage3d{margin-top:-10px}

/* marquee: exact seamless loop (margins instead of gap), longer than any viewport, GPU-promoted */
.mq-row{gap:0;animation:mq2 70s linear infinite;will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0)}
.mq-row.rev{animation-name:mq2r;animation-duration:78s;animation-direction:normal}
.mq-row img{margin-inline:38px;flex:none}
@keyframes mq2{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes mq2r{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
@media (prefers-reduced-motion:reduce){.mq-row{animation:none}}

/* hero lifted so the product stage shows under the logos on a normal monitor */
.hero .wrap>div:first-child{padding-block:56px 10px}
.proof{margin-bottom:24px}
.hero p.lead{margin-top:20px}
.hero-cta{margin-top:34px}
.hero .sub{margin-top:22px}
.marquee{gap:20px;padding-block:2px}
.stage3d{margin-top:-64px}
.fi.f1{top:130px}.fi.f3{top:145px}.fi.f2{top:290px}.fi.f4{top:305px}
@media (max-width:960px){.hero .wrap>div:first-child{padding-block:44px 16px}.stage3d{margin-top:-20px}}

.stage3d{margin-top:-24px}
@media (max-width:960px){.stage3d{margin-top:8px}}

/* hero-top fills the first screen so only ~20% of the stage peeks, on any monitor height */
.hero-top{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  min-height:max(600px,calc(100svh - 217px))}
.hero-top .marquee{margin-inline:0}
.hero .wrap>div.hero-top{max-width:none}
.hero-top>div:first-child{min-height:0;padding-block:0;max-width:860px;width:100%;display:flex;flex-direction:column;align-items:center}
.stage3d{margin-top:-24px}
@media (max-width:960px){.hero-top{min-height:0;gap:24px;padding-block:44px 0}.hero-top>div:first-child{padding-block:0}}

.hero .wrap>.hero-top{min-height:max(600px,calc(100svh - 217px));padding-block:0;max-width:none;width:100%;justify-content:center}
@media (max-width:960px){.hero .wrap>.hero-top{min-height:0;padding-block:44px 0}}

/* lies further back at rest, rises to flat while scrolling */
.stage3d{perspective:1500px}
.tilt{transform:rotateX(calc((1 - var(--p)) * 62deg)) scale(calc(.86 + .14 * var(--p)))}
@media (max-width:960px){.tilt{transform:rotateX(calc((1 - var(--p)) * 34deg)) scale(calc(.92 + .08 * var(--p)))}}
@media (prefers-reduced-motion:reduce){.tilt{transform:none}}

.hero .wrap>.hero-top{min-height:max(600px,calc(100vh - 157px))}
@media (max-width:960px){.hero .wrap>.hero-top{min-height:0}}

.hero .wrap>.hero-top{min-height:max(600px,calc(100vh - 191px))}
@media (max-width:960px){.hero .wrap>.hero-top{min-height:0}}

.hero .wrap>.hero-top{min-height:max(600px,calc(100vh - 98px))}
@media (max-width:960px){.hero .wrap>.hero-top{min-height:0}}

.hero .wrap>div.hero-top:first-child{min-height:max(600px,calc(100vh - 98px));padding-block:0;justify-content:center}
@media (max-width:960px){.hero .wrap>div.hero-top:first-child{min-height:0;padding-block:44px 0}}

.hero .wrap>div.hero-top:first-child{min-height:max(600px,calc(100vh - 270px))}
@media (max-width:960px){.hero .wrap>div.hero-top:first-child{min-height:0}}

/* tilt pivots on its top edge so the stage starts right under the logos */
.tilt{transform-origin:50% 0}
.hero .wrap>div.hero-top:first-child{min-height:max(600px,calc(100vh - 175px))}
.stage3d{margin-top:-8px}
@media (max-width:960px){.hero .wrap>div.hero-top:first-child{min-height:0}.stage3d{margin-top:8px}}

/* initial tilt softened: readable at rest, still rises flat on scroll */
.tilt{transform:rotateX(calc((1 - var(--p)) * 40deg)) scale(calc(.9 + .1 * var(--p)))}
@media (max-width:960px){.tilt{transform:rotateX(calc((1 - var(--p)) * 26deg)) scale(calc(.94 + .06 * var(--p)))}}
@media (prefers-reduced-motion:reduce){.tilt{transform:none}}

/* more air above the logos, stage tucked closer underneath */
.hero-top .marquee{margin-top:40px}
.hero .wrap>div.hero-top:first-child{min-height:max(600px,calc(100vh - 119px))}
.stage3d{margin-top:-64px}
@media (max-width:960px){.hero-top .marquee{margin-top:20px}.stage3d{margin-top:8px}.hero .wrap>div.hero-top:first-child{min-height:0}}

/* tighter gap: logos -> stage */
.hero .wrap>div.hero-top:first-child{min-height:max(600px,calc(100vh - 39px))}
.stage3d{margin-top:-144px}
@media (max-width:960px){.stage3d{margin-top:8px}.hero .wrap>div.hero-top:first-child{min-height:0}}

/* product tabs */
.ptabs{display:inline-flex;gap:4px;padding:5px;border:1px solid var(--line);border-radius:14px;background:var(--bg-soft);margin-bottom:32px}
.ptab{display:inline-flex;align-items:center;gap:9px;height:44px;padding-inline:22px;border:0;border-radius:10px;background:transparent;font:inherit;font-size:15px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.ptab:hover{color:var(--ink)}
.ptab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ptab.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(20,32,27,.08),0 0 0 1px var(--line)}
.ptab small{font-size:12px;font-weight:600;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:99px;min-width:22px;height:22px;display:inline-grid;place-items:center;padding-inline:6px}
.ptab.on small{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.ptab .dot{width:9px;height:9px;border-radius:3px;background:var(--accent)}
.ptab .dot.wp{background:var(--wp)}.ptab .dot.ps{background:var(--ps)}
.group[hidden]{display:none}
.group-h{display:none}
.group+.group{margin-top:0}
.group:not([hidden]){animation:tabin .25s ease}
@keyframes tabin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.group:not([hidden]){animation:none}}
@media (max-width:960px){.ptabs{display:flex;width:100%}.ptab{flex:1;justify-content:center;padding-inline:8px;gap:6px;font-size:14px}.ptab small{display:none}}

.hero .wrap>div.hero-top{min-width:0}
.hero-top .marquee{flex:none}

/* tabs v2: plain, centered, underline style */
#products .sec-head{margin-inline:auto;text-align:center}
.ptabs{display:flex;justify-content:center;gap:40px;padding:0;border:0;border-radius:0;background:none;margin:0 auto 44px;border-bottom:1px solid var(--line);width:100%}
.ptab{position:relative;height:auto;padding:0 2px 16px;border-radius:0;background:none;font-size:17px;font-weight:500;color:var(--ink-3);gap:0}
.ptab:hover{color:var(--ink)}
.ptab.on{background:none;box-shadow:none;color:var(--ink);font-weight:700}
.ptab::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .22s ease}
.ptab.on::after{transform:scaleX(1)}
.ptab:focus-visible{outline-offset:6px;border-radius:4px}
@media (max-width:960px){.ptabs{gap:26px}.ptab{flex:none;font-size:15.5px}}

/* tabs v3: back to the pill look, centered, no counts */
#products .sec-head{margin-inline:auto;text-align:center}
.ptabs{display:flex;width:fit-content;max-width:100%;margin:0 auto 40px;justify-content:center;gap:4px;padding:5px;border:1px solid var(--line);border-radius:14px;background:var(--bg-soft)}
.ptab{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 24px;border-radius:10px;background:transparent;font-size:15px;font-weight:600;color:var(--ink-2)}
.ptab:hover{color:var(--ink)}
.ptab.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(20,32,27,.08),0 0 0 1px var(--line)}
.ptab::after{display:none}
.ptab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
@media (max-width:960px){.ptabs{display:flex;width:100%}.ptab{flex:1;justify-content:center;padding:0 8px;gap:6px;font-size:14px}}

/* why section: bordered grid */
.why{padding-block:40px 24px}
.why-box{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.why-head{text-align:center;padding:56px 24px 48px}
.why-pill{display:inline-flex;align-items:center;gap:7px;height:30px;padding-inline:14px;border:1px solid var(--line-2);border-radius:8px;font-size:13px;color:var(--accent);font-weight:600;margin-bottom:22px;background:#fff}
.why-pill svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.why-head h2{font-size:clamp(24px,3vw,34px);line-height:1.6;font-weight:800;letter-spacing:-.01em;max-width:760px;margin-inline:auto;text-wrap:balance}
.why-head h2 em{font-style:normal;color:var(--accent)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.why-cell{padding:34px 36px 38px;border-inline-start:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.why-cell:nth-child(3n+1){border-inline-start:0}
.why-cell:nth-last-child(-n+3){border-bottom:0}
.why-cell svg{width:44px;height:44px;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.why-cell h3{font-size:17px;font-weight:700}
.why-cell p{font-size:14.5px;line-height:1.95;color:var(--ink-3)}
@media (max-width:960px){
  .why-grid{grid-template-columns:1fr 1fr}
  .why-cell,.why-cell:nth-child(3n+1){border-inline-start:1px solid var(--line);border-bottom:1px solid var(--line)}
  .why-cell:nth-child(2n+1){border-inline-start:0}
  .why-cell:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
  .why-cell:nth-last-child(-n+2){border-bottom:0}
  .why-cell{padding:26px 22px 28px}
}
@media (max-width:600px){
  .why-grid{grid-template-columns:1fr}
  .why-cell,.why-cell:nth-child(n){border-inline-start:0;border-bottom:1px solid var(--line)}
  .why-cell:last-child{border-bottom:0}
}

/* why v2: full-bleed horizontal rules, contained vertical rules */
.why{padding-block:0;overflow-x:clip}
.why-box{position:relative;border:0;border-inline:1px solid var(--line);border-radius:0;background:none;overflow:visible}
.why-box::before,.why-box::after,.why-grid::before,.why-grid::after{content:"";position:absolute;left:50%;width:100vw;height:1px;background:var(--line);transform:translateX(-50%);pointer-events:none}
.why-box::before{top:0}
.why-box::after{bottom:0}
.why-head{padding:72px 24px 60px}
.why-grid{position:relative;border-top:0;grid-auto-rows:1fr}
.why-grid::before{top:0}
.why-grid::after{top:50%}
.why-cell,.why-cell:nth-child(3n+1){border-bottom:0;padding:40px 40px 46px}
.why-cell{border-inline-start:1px solid var(--line)}
.why-cell:nth-child(3n+1){border-inline-start:0}
@media (max-width:960px){
  .why-grid{grid-auto-rows:auto}
  .why-grid::after{display:none}
  .why-cell,.why-cell:nth-child(n){border-bottom:1px solid var(--line);padding:28px 22px 30px}
  .why-cell:nth-child(2n+1){border-inline-start:0}
  .why-cell:nth-last-child(-n+2){border-bottom:0}
  .why-head{padding:48px 20px 40px}
}
@media (max-width:600px){
  .why-cell,.why-cell:nth-child(n){border-inline-start:0;border-bottom:1px solid var(--line)}
  .why-cell:last-child{border-bottom:0}
}

/* why cells: hover */
.why-cell{position:relative;transition:background .25s}
.why-cell::before{content:"";position:absolute;inset-inline:0;top:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:100% 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.why-cell svg{transition:transform .3s cubic-bezier(.2,.7,.2,1),background-color .25s,stroke .25s;padding:0;border-radius:12px;box-sizing:content-box}
.why-cell h3{transition:color .2s}
.why-cell p{transition:color .2s}
@media (hover:hover){
  .why-cell:hover{background:linear-gradient(180deg,rgba(232,245,240,.55),rgba(232,245,240,0) 70%)}
  .why-cell:hover::before{transform:scaleX(1)}
  .why-cell:hover svg{transform:translateY(-4px);background:var(--accent-soft);padding:8px;margin:-8px -8px 4px -8px}
  .why-cell:hover h3{color:var(--accent)}
  .why-cell:hover p{color:var(--ink-2)}
}
.why-cell:focus-within::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.why-cell,.why-cell::before,.why-cell svg{transition:none}}

/* products v2: same bordered-grid language as the why section, tinted instead of white */
#products{padding-block:0;overflow-x:clip;background:
  linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 64px,
  linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/64px 100%,
  #f4f6f5;background-blend-mode:normal}
#products{background:
  linear-gradient(rgba(20,32,27,.045) 1px,transparent 1px) 0 0/100% 64px,
  linear-gradient(90deg,rgba(20,32,27,.045) 1px,transparent 1px) 0 0/64px 100%,
  #f5f7f6}
#products>.wrap{position:relative;padding-inline:0;border-inline:1px solid var(--line);background:rgba(245,247,246,.0)}
#products>.wrap::before,#products>.wrap::after,#products .group::before{content:"";position:absolute;left:50%;width:100vw;height:1px;background:var(--line-2);transform:translateX(-50%);pointer-events:none}
#products>.wrap::before{top:0}
#products>.wrap::after{bottom:0}
#products .sec-head{max-width:none;margin:0;padding:72px 24px 12px;background:none}
#products .ptabs{background:#fff;margin:0 auto 0;position:relative;top:34px;z-index:2}
#products .group{position:relative;margin-top:0;padding-top:34px}
#products .group::before{top:34px}
#products .grid{gap:0;background:#fff}
#products .card{border:0;border-radius:0;background:#fff;border-inline-start:1px solid var(--line);position:relative;transition:background .25s}
#products .card:first-child{border-inline-start:0}
#products .card:hover{box-shadow:none;transform:none;background:#fff}
#products .card::before{content:"";position:absolute;inset-inline:0;top:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:100% 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1);z-index:2}
#products .card:hover::before{transform:scaleX(1)}
#products .card .shot{border-bottom:1px solid var(--line);background:
  linear-gradient(rgba(20,32,27,.04) 1px,transparent 1px) 0 0/100% 22px,
  linear-gradient(90deg,rgba(20,32,27,.04) 1px,transparent 1px) 0 0/22px 100%,#f8faf9}
#products .card .body{padding:24px 28px 28px}
#products .card h4{transition:color .2s}
#products .card:hover h4{color:var(--accent)}
#products .grid.two .card .shot{aspect-ratio:21/8}
#products .group:not([hidden]){padding-bottom:0}
@media (max-width:960px){
  #products .sec-head{padding:52px 20px 12px}
  #products .card,#products .card:first-child{border-inline-start:0;border-bottom:1px solid var(--line)}
  #products .card:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){#products .card::before{transition:none}}

#products .ptabs{top:0;margin:0 auto 40px}
#products .group{padding-top:0}
#products .group::before{top:0}
#products .sec-head{padding-bottom:36px}

/* products: white background, lines kept */
#products{background:
  linear-gradient(rgba(20,32,27,.05) 1px,transparent 1px) 0 0/100% 64px,
  linear-gradient(90deg,rgba(20,32,27,.05) 1px,transparent 1px) 0 0/64px 100%,#fff}
#products>.wrap{background:#fff}
#products .sec-head{background:#fff}
#products .ptabs{background:var(--bg-soft)}
#products .card .shot{background:
  linear-gradient(rgba(20,32,27,.04) 1px,transparent 1px) 0 0/100% 22px,
  linear-gradient(90deg,rgba(20,32,27,.04) 1px,transparent 1px) 0 0/22px 100%,#fbfcfb}

/* products v3: background grid with perspective, shared by the header area; no white box behind the title */
#products{position:relative;overflow:clip;isolation:isolate;background:#fff}
#products::before{content:"";position:absolute;z-index:-1;left:-25%;right:-25%;top:0;height:560px;
  background:
    linear-gradient(rgba(20,32,27,.035) 1px,transparent 1px) 0 0/100% 56px,
    linear-gradient(90deg,rgba(20,32,27,.035) 1px,transparent 1px) 0 0/56px 100%;
  transform:perspective(620px) rotateX(38deg);transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.55) 55%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.55) 55%,transparent 100%)}
#products>.wrap{background:none}
#products .sec-head{background:none}
@media (max-width:960px){#products::before{height:420px;transform:perspective(520px) rotateX(34deg)}}

/* products v3b: gentler, fainter perspective grid; grid reaches the cards */
#products::before{height:720px;
  background:
    linear-gradient(rgba(20,32,27,.026) 1px,transparent 1px) 0 0/100% 60px,
    linear-gradient(90deg,rgba(20,32,27,.026) 1px,transparent 1px) 0 0/60px 100%;
  transform:perspective(1100px) rotateX(24deg);
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.6) 45%,transparent 90%);
  mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.6) 45%,transparent 90%)}
@media (max-width:960px){#products::before{height:520px;transform:perspective(800px) rotateX(22deg)}}

/* products: no accent bar on cards, softer rules */
#products .card::before{display:none}
#products>.wrap::before,#products>.wrap::after,#products .group::before{background:var(--line)}
#products .card:hover{background:#fcfdfc}

/* products: same container width as the why grid, so every vertical rule lines up */
#products>.wrap{max-width:calc(var(--w) - 48px);width:100%}
#products .grid.two{grid-template-columns:repeat(3,1fr)}
#products .grid.two .card .shot{aspect-ratio:16/9}
#products .card.soon .shot{display:grid;place-items:center}
#products .card.soon .plus{width:54px;height:54px;border-radius:50%;border:1px dashed var(--line-2);display:grid;place-items:center;background:#fff}
#products .card.soon .plus svg{width:22px;height:22px;fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-linecap:round}
#products .card.soon:hover .plus{border-color:var(--accent)}
#products .card.soon:hover .plus svg{stroke:var(--accent)}

#products .sec-head p{max-width:560px;margin-inline:auto;text-wrap:balance}

#products .sec-head p{max-width:none}
@media (min-width:700px){#products .sec-head p{white-space:nowrap}}

/* stats section: same bordered-grid language as the why section */
.stats{padding-block:0;overflow-x:clip}
.stat-box{position:relative;border-inline:1px solid var(--line);background:#fff}
.stat-box::before,.stat-box::after,.stat-grid::before{content:"";position:absolute;left:50%;width:100vw;height:1px;background:var(--line);transform:translateX(-50%);pointer-events:none}
.stat-box::before{top:0}.stat-box::after{bottom:0}
.stat-head{text-align:center;padding:72px 24px 56px}
.stat-head h2{font-size:clamp(24px,3vw,34px);line-height:1.6;font-weight:800;letter-spacing:-.01em;max-width:760px;margin-inline:auto;text-wrap:balance}
.stat-head h2 em{font-style:normal;color:var(--accent);display:block}
.stat-head p{max-width:620px;margin:16px auto 0;color:var(--ink-2);font-size:15.5px;text-wrap:balance}
.stat-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr)}
.stat-grid::before{top:0}
.stat-cell{position:relative;padding:36px 36px 34px;display:flex;flex-direction:column;gap:14px;border-inline-start:1px solid var(--line);transition:background .25s}
.stat-cell:first-child{border-inline-start:0}
.ptag{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:26px;padding-inline:12px;border:1px solid var(--line-2);border-radius:99px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.ptag i{width:8px;height:8px;border-radius:2px;background:var(--wp)}
.ptag.ps i{background:var(--ps)}
.stat-cell h3{font-size:19px;font-weight:700;line-height:1.6}
.chart{min-height:206px;display:flex;flex-direction:column;justify-content:center}
.cap{font-size:14px;line-height:1.95;color:var(--ink-2)}
.src{margin-top:auto;font-size:12.5px;color:var(--ink-3);text-decoration:none}
a.src:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ring */
.ring-wrap{align-items:center;gap:20px}
.ring{--v:45;position:relative;width:150px;height:150px;border-radius:50%;flex:none;
  background:conic-gradient(var(--accent) 0 calc(var(--v) * 1%),#f1d6c9 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 17px),#000 calc(100% - 16px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 17px),#000 calc(100% - 16px))}
.ring-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  -webkit-mask:none;mask:none}
.ring-wrap{position:relative}
.ring-wrap .ring{margin-inline:auto}
.ring-c{display:none}
.ring-wrap::before{content:"";position:absolute;top:calc(50% - 98px);inset-inline:0;height:0}
.legend{list-style:none;padding:0;display:grid;gap:8px;width:100%;font-size:13.5px;color:var(--ink-2)}
.legend li{display:flex;align-items:center;gap:9px}
.legend b{margin-inline-start:auto;color:var(--ink);font-weight:700}
.legend i{width:10px;height:10px;border-radius:3px;flex:none}
.k1{background:var(--accent)}.k2{background:#f1d6c9}

/* bars */
.bars{gap:15px}
.bar-l{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink-2);margin-bottom:6px}
.bar-l b{color:var(--ink);font-weight:700}
.track{height:10px;border-radius:99px;background:#eef1ef;overflow:hidden}
.fill{height:100%;width:var(--w);border-radius:99px;background:var(--accent);transform-origin:100% 50%}
.fill.soft{background:#9fb9af}
.fill.hot{background:#d9622b}
.bar-row.warn{margin-top:6px;padding-top:16px;border-top:1px dashed var(--line-2)}

/* gaps list */
.gaps ul{list-style:none;padding:0;display:grid;gap:12px}
.gaps li{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:14.5px;font-weight:600;background:#fff}
.gaps li svg{width:20px;height:20px;flex:none;padding:3px;border-radius:50%;background:var(--ps-soft);fill:none;stroke:var(--ps);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;box-sizing:content-box}

/* entrance */
@media (prefers-reduced-motion:no-preference){
  .stat-cell .fill{transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .stat-cell.in .fill{transform:none}
  .stat-cell .ring{transform:rotate(-40deg) scale(.9);opacity:0;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .6s}
  .stat-cell.in .ring{transform:none;opacity:1}
  .stat-cell .gaps li{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
  .stat-cell.in .gaps li{opacity:1;transform:none}
  .stat-cell.in .gaps li:nth-child(2){transition-delay:.1s}.stat-cell.in .gaps li:nth-child(3){transition-delay:.2s}.stat-cell.in .gaps li:nth-child(4){transition-delay:.3s}
}
@media (hover:hover){.stat-cell:hover{background:linear-gradient(180deg,rgba(232,245,240,.4),rgba(232,245,240,0) 60%)}}
@media (max-width:960px){
  .stat-grid{grid-template-columns:1fr}
  .stat-cell,.stat-cell:first-child{border-inline-start:0;border-bottom:1px solid var(--line);padding:28px 22px}
  .stat-cell:last-child{border-bottom:0}
  .stat-head{padding:48px 20px 36px}
  .chart{min-height:0}
}

.ring-box{position:relative;width:150px;height:150px;margin-inline:auto;flex:none}
.ring-box .ring{position:absolute;inset:0;margin:0}
.stat-cell .ring-c{display:grid;position:absolute;inset:0;place-content:center;text-align:center;line-height:1.3}
.ring-c b{font-size:30px;font-weight:800;letter-spacing:-.02em}
.ring-c span{font-size:12.5px;color:var(--ink-3)}
.ring-wrap::before{display:none}

/* stats v2: dotted / outlined chart style, matching the rest of the line-and-grid theme */
.stat-grid{background:
  radial-gradient(circle,rgba(20,32,27,.09) 1px,transparent 1.4px) 0 0/18px 18px}
.stat-cell{background:rgba(255,255,255,.86)}
.stat-grid .stat-cell{backdrop-filter:blur(0)}
.vchart{position:relative;display:grid;grid-template-columns:34px 1fr;gap:6px;height:236px;min-height:236px;padding-bottom:26px;justify-content:stretch}
.vaxis{position:relative}
.vaxis span{position:absolute;inset-inline-start:0;bottom:calc(var(--t) * 1%);transform:translateY(50%);font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.vplot{position:relative;display:flex;align-items:flex-end;gap:14px;padding-inline:10px;border-bottom:1px solid var(--line-2)}
.vplot::before{content:"";position:absolute;inset:0 0 0 0;pointer-events:none;
  background:repeating-linear-gradient(to top,transparent 0 calc(25% - 1px),rgba(20,32,27,.13) calc(25% - 1px) 25%);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 10px);mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 10px)}
.vcol{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;min-width:0}
.vbar{--c:#7d8782;--bg:#f4f5f4;position:relative;width:100%;height:var(--h);min-height:3px;border:1px solid var(--c);border-bottom:0;
  background:radial-gradient(circle,var(--c) 1px,transparent 1.5px) 0 0/6px 6px,var(--bg);transform-origin:50% 100%}
.vbar.good{--c:#0f6e56;--bg:#e8f5f0}
.vbar.hot{--c:#d9622b;--bg:#fcefe8}
.vbar.mute{--c:#8e9892;--bg:#f4f5f4}
.vbar b{position:absolute;top:8px;inset-inline-start:8px;padding:3px 9px;background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.4;white-space:nowrap}
.vbar.out b{top:auto;bottom:calc(100% + 6px);inset-inline-start:50%;transform:translateX(50%);padding:2px 7px;font-size:12.5px}
html[dir=rtl] .vbar.out b{inset-inline-start:auto;inset-inline-end:50%;transform:translateX(-50%)}
.vlab{position:absolute;top:calc(100% + 7px);inset-inline:-6px;text-align:center;font-size:12px;color:var(--ink-2);white-space:nowrap}
.vplot .vcol{height:100%}
/* the 3rd cell: same dotted / outlined language */
.gaps li{border:1px solid var(--line-2);border-radius:0;gap:0;padding:0;background:#fff}
.gaps li svg{width:38px;height:38px;padding:0;margin:0;border-radius:0;box-sizing:border-box;padding:9px;stroke:var(--ps);background:radial-gradient(circle,rgba(224,82,122,.5) 1px,transparent 1.5px) 0 0/6px 6px,var(--ps-soft);border-inline-end:1px solid var(--line-2)}
.gaps li{align-items:stretch}
.gaps li span{padding:10px 14px;display:flex;align-items:center}
.gaps ul{gap:10px}
.gaps li{position:relative}
.gaps li::after{content:"";position:absolute;inset-inline:0;bottom:-6px;border-bottom:1px dashed rgba(20,32,27,.13)}
@media (prefers-reduced-motion:no-preference){
  .stat-cell .vbar{transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .stat-cell.in .vbar{transform:none}
  .stat-cell.in .vcol:nth-child(2) .vbar{transition-delay:.12s}
  .stat-cell.in .vcol:nth-child(3) .vbar{transition-delay:.24s}
  .stat-cell.in .vcol:nth-child(4) .vbar{transition-delay:.36s}
}
@media (max-width:960px){.vchart{height:220px}}

/* stats v3: calmer. big number first, light dotted bars, no axis clutter */
.stat-grid{background:none}
.stat-cell{background:#fff}
.bigstat{display:flex;flex-direction:column;gap:2px}
.bigstat b{font-size:48px;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.bigstat span{font-size:14px;color:var(--ink-2)}
.chart{min-height:0}
.vchart{display:block;height:176px;min-height:176px;padding-bottom:28px;margin-top:6px}
.vplot{height:100%;padding-inline:0;gap:12px;border-bottom:1px solid var(--line-2)}
.vplot::before{background:repeating-linear-gradient(to top,transparent 0 calc(50% - 1px),rgba(20,32,27,.12) calc(50% - 1px) 50%);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 9px);mask:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 9px)}
.vbar{border:0;background:radial-gradient(circle,var(--c) 1px,transparent 1.5px) 0 0/8px 8px,var(--bg);border-top:2px solid var(--c)}
.vbar.mute{--c:#b4bcb7;--bg:#f6f7f6}
.vbar.good{--c:#0f6e56;--bg:#eaf6f1}
.vbar.hot{--c:#d9622b;--bg:#fdf1ea}
.vbar b,.vbar.out b{top:auto;bottom:calc(100% + 8px);inset-inline-start:auto;inset-inline-end:50%;transform:translateX(-50%);padding:0;border:0;background:none;font-size:13.5px;font-weight:700;color:var(--ink)}
html[dir=rtl] .vbar b{inset-inline-end:auto;inset-inline-start:auto;left:50%;right:auto;transform:translateX(-50%)}
.vlab{inset-inline:-4px;font-size:12px}
/* third cell: plain lines, no pink boxes */
.gaps ul{gap:0;border-top:1px dashed var(--line-2)}
.gaps li{border:0;border-bottom:1px dashed var(--line-2);background:none;padding:15px 0;gap:12px;align-items:center}
.gaps li::after{display:none}
.gaps li svg{width:22px;height:22px;padding:4px;border-radius:50%;border:0;background:var(--ps-soft);stroke:var(--ps);box-sizing:border-box}
.gaps li span{padding:0;font-size:15px;font-weight:600}
.chart.gaps{min-height:0;margin-top:6px;justify-content:flex-start}
@media (max-width:960px){.bigstat b{font-size:40px}}

.bigstat span{min-height:1.7em}

/* not-alone v4: persuasion first, one small proof line per problem */
.stat-cell.prob{padding:36px 36px 30px;gap:14px}
.stat-cell.prob>svg{width:44px;height:44px;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:6px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.stat-cell.prob h3{font-size:21px;font-weight:800;line-height:1.7}
.stat-cell.prob .cap{font-size:15px;line-height:2;color:var(--ink-2)}
.more{align-self:flex-start;font-size:14.5px;font-weight:700;color:var(--accent);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color .2s}
.more:hover{border-color:var(--accent)}
.proof-row{margin-top:auto;padding-top:20px;border-top:1px dashed var(--line-2);display:grid;gap:10px}
.proof-l{display:flex;align-items:baseline;gap:10px}
.proof-l b{font-size:20px;font-weight:800;color:var(--ink);white-space:nowrap}
.proof-l span{font-size:12.5px;line-height:1.8;color:var(--ink-3)}
.dtrack{height:8px;background:#f0f2f1;overflow:hidden}
.dtrack i{display:block;height:100%;width:var(--w);background:radial-gradient(circle,#0f6e56 1px,transparent 1.5px) 0 0/6px 6px,#e3f2ec;border-inline-end:2px solid #0f6e56;transform-origin:100% 50%}
.dtrack i.ps{background:radial-gradient(circle,#e0527a 1px,transparent 1.5px) 0 0/6px 6px,#fde8ee;border-inline-end-color:#e0527a}
@media (prefers-reduced-motion:no-preference){
  .stat-cell .dtrack i{transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.2,1) .15s}
  .stat-cell.in .dtrack i{transform:none}
}
@media (hover:hover){.stat-cell.prob:hover>svg{transform:translateY(-4px)}}
@media (max-width:960px){.stat-cell.prob{padding:28px 22px}}

.dsegs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;height:8px}
.dsegs i{background:radial-gradient(circle,#e0527a 1px,transparent 1.5px) 0 0/6px 6px,#fde8ee;border-inline-end:2px solid #e0527a}
@media (prefers-reduced-motion:no-preference){
  .stat-cell .dsegs i{opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s}
  .stat-cell.in .dsegs i{opacity:1;transform:none}
  .stat-cell.in .dsegs i:nth-child(2){transition-delay:.1s}.stat-cell.in .dsegs i:nth-child(3){transition-delay:.2s}.stat-cell.in .dsegs i:nth-child(4){transition-delay:.3s}
}

/* proof v2: pictograms people can read at a glance */
.ia-wrap{margin-bottom:2px}
.ia{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.ia i{aspect-ratio:1;border:1px solid var(--c);background:radial-gradient(circle,var(--c) 1px,transparent 1.5px) 0 0/5px 5px,var(--bg)}
.ia i.bad{--c:#d9622b;--bg:#fdf1ea}
.ia i.ok{--c:#a9b3ae;--bg:#f6f7f6}
.proof-row{gap:12px}
.proof-l{flex-direction:column;align-items:flex-start;gap:2px}
.proof-l b{font-size:22px}
.proof-l span{font-size:13px;color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){
  .stat-cell .ia i{opacity:0;transform:scale(.6);transition:opacity .35s,transform .35s}
  .stat-cell.in .ia i{opacity:1;transform:none}
  .stat-cell.in .ia i:nth-child(2){transition-delay:.06s}.stat-cell.in .ia i:nth-child(3){transition-delay:.12s}.stat-cell.in .ia i:nth-child(4){transition-delay:.18s}.stat-cell.in .ia i:nth-child(5){transition-delay:.24s}
  .stat-cell.in .ia i:nth-child(6){transition-delay:.3s}.stat-cell.in .ia i:nth-child(7){transition-delay:.36s}.stat-cell.in .ia i:nth-child(8){transition-delay:.42s}.stat-cell.in .ia i:nth-child(9){transition-delay:.48s}.stat-cell.in .ia i:nth-child(10){transition-delay:.54s}
}
/* services chips (prestashop cell) */
.svc{display:flex;flex-wrap:wrap;gap:8px}
.svc span{font-size:13.5px;font-weight:600;padding:6px 14px;border:1px dashed var(--line-2);color:var(--ink-3);background:#fff}
.svc span.main{border-style:solid;border-color:var(--ps);color:var(--ink);background:radial-gradient(circle,rgba(224,82,122,.45) 1px,transparent 1.5px) 0 0/6px 6px,var(--ps-soft)}

/* not-alone v5: rows aligned across columns (subgrid), light line-based gauge, plain service chips */
@media (min-width:961px){
  .stat-grid{grid-template-rows:repeat(6,auto)}
  .stat-cell.prob{grid-row:span 6;display:grid;grid-template-rows:subgrid;gap:0;align-items:start}
  .stat-cell.prob>.ptag{margin-bottom:14px}
  .stat-cell.prob>svg{margin:0 0 14px}
  .stat-cell.prob>h3{margin-bottom:12px}
  .stat-cell.prob>.cap{margin-bottom:14px}
  .stat-cell.prob>.more{margin-bottom:26px}
  .stat-cell.prob>.proof-row{margin-top:0;align-self:stretch}
}
.ia{gap:0;border:1px solid var(--line-2);height:24px;background:#fff}
.ia i{aspect-ratio:auto;border:0;border-inline-start:1px solid var(--line-2);background:transparent}
.ia i:first-child{border-inline-start:0}
.ia i.bad{background:rgba(217,98,43,.12)}
.ia i.ok{background:transparent}
.svc{gap:8px}
.svc span,.svc span.main{font-size:13.5px;font-weight:600;padding:6px 14px 6px 12px;border:1px solid var(--line-2);border-style:solid;color:var(--ink-2);background:#fff;display:inline-flex;align-items:center;gap:8px}
.svc span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ps);opacity:.7}

.stat-cell.prob>.ptag,.stat-cell.prob>.more,.stat-cell.prob>svg{justify-self:start}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.svc span,.svc span.main{justify-content:flex-start}
@media (max-width:960px){.svc{grid-template-columns:repeat(4,auto);justify-content:start}}
@media (max-width:520px){.svc{grid-template-columns:1fr 1fr}}

/* not-alone: two columns now */
@media (min-width:961px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat-cell .src,.stat-cell .proof-row .src{display:none}

/* prestashop services section: reuses the why grid, four columns */
.ps-svc{padding-block:0}
.why-pill .pdot{width:8px;height:8px;border-radius:2px;background:var(--ps);display:inline-block}
.why-sub{max-width:560px;margin:14px auto 0;color:var(--ink-2);font-size:15.5px;text-wrap:balance}
.why-grid.four{grid-template-columns:repeat(4,1fr);grid-auto-rows:auto}
.why-grid.four::after{display:none}
.why-grid.four .why-cell{border-inline-start:1px solid var(--line);border-bottom:0}
.why-grid.four .why-cell:first-child{border-inline-start:0}
.ps-svc .why-cell svg{stroke:var(--ps)}
@media (hover:hover){
  .ps-svc .why-cell:hover{background:linear-gradient(180deg,rgba(253,232,238,.55),rgba(253,232,238,0) 70%)}
  .ps-svc .why-cell::before{background:var(--ps)}
  .ps-svc .why-cell:hover svg{background:var(--ps-soft)}
  .ps-svc .why-cell:hover h3{color:var(--ps)}
}
@media (max-width:960px){
  .why-grid.four{grid-template-columns:1fr 1fr}
  .why-grid.four .why-cell,.why-grid.four .why-cell:first-child{border-inline-start:1px solid var(--line);border-bottom:1px solid var(--line)}
  .why-grid.four .why-cell:nth-child(2n+1){border-inline-start:0}
  .why-grid.four .why-cell:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:600px){
  .why-grid.four{grid-template-columns:1fr}
  .why-grid.four .why-cell,.why-grid.four .why-cell:nth-child(n){border-inline-start:0;border-bottom:1px solid var(--line)}
  .why-grid.four .why-cell:last-child{border-bottom:0}
}

/* not-alone cells: five rows now (no platform badge) */
@media (min-width:961px){
  .stat-grid{grid-template-rows:repeat(5,auto)}
  .stat-cell.prob{grid-row:span 5}
  .stat-cell.prob>svg{margin-top:6px}
}

/* comparison table */
.cmp2{padding:0;overflow-x:clip}
.cmp2-box{position:relative;border-inline:1px solid var(--line);background:#fff}
.cmp2-box::before,.cmp2-box::after,.cmp2-table thead::after{content:"";position:absolute;left:50%;width:100vw;height:1px;background:var(--line);transform:translateX(-50%);pointer-events:none}
.cmp2-box::before{top:0}.cmp2-box::after{bottom:0}
.cmp2-head{text-align:center;padding:72px 24px 52px}
.cmp2-head h2{font-size:clamp(24px,3vw,34px);line-height:1.6;font-weight:800;letter-spacing:-.01em}
.cmp2-head h2 em{font-style:normal;color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cmp2-table{width:100%;border-collapse:collapse;table-layout:fixed}
.cmp2-table thead{position:relative}
.cmp2-table thead::after{top:0}
.cmp2-table th,.cmp2-table td{padding:22px 32px;text-align:start;vertical-align:middle;border-bottom:1px solid var(--line)}
.cmp2-table col:first-child{width:22%}
.cmp2-table thead th{font-size:15px;font-weight:700;padding-block:24px;color:var(--ink-3)}
.cmp2-table thead th.us{color:var(--ink)}
.cmp2-table thead .brand{display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:800;color:var(--accent)}
.cmp2-table thead .brand img{width:22px;height:22px}
.cmp2-table tbody th{font-size:15px;font-weight:700;color:var(--ink)}
.cmp2-table th:not(:first-child),.cmp2-table td{border-inline-start:1px solid var(--line)}
.cmp2-table td{font-size:15px;line-height:1.9}
.cmp2-table td span{display:block}
.cmp2-table td{position:relative;padding-inline-start:68px}
.cmp2-table td .ico{position:absolute;inset-inline-start:30px;top:24px;width:24px;height:24px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;padding:3px;border-radius:50%;box-sizing:border-box}
.cmp2-table td .ico.ok{stroke:var(--accent);background:var(--accent-soft)}
.cmp2-table td .ico.no{stroke:#9aa39e;background:#f1f3f2}
.cmp2-table td.us,.cmp2-table thead th.us{background:linear-gradient(180deg,rgba(232,245,240,.55),rgba(232,245,240,.18))}
.cmp2-table td.us{color:var(--ink);font-weight:600}
.cmp2-table td.them{color:var(--ink-3)}
.cmp2-table thead th.us{padding-inline-start:32px}
.cmp2-table tbody tr{transition:background .2s}
@media (hover:hover){.cmp2-table tbody tr:hover th{color:var(--accent)}}
.cmp2-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 32px;font-size:13px;color:var(--ink-3);flex-wrap:wrap}
@media (max-width:960px){
  .cmp2-head{padding:48px 20px 36px}
  .cmp2-table,.cmp2-table tbody,.cmp2-table tr{display:block}
  .cmp2-table thead{display:none}
  .cmp2-table tbody tr{border-bottom:1px solid var(--line);padding:18px 20px 20px}
  .cmp2-table tbody tr:last-child{border-bottom:0}
  .cmp2-table tbody th{display:block;border:0;padding:0 0 10px;font-size:16px}
  .cmp2-table td,.cmp2-table td.us,.cmp2-table td.them{display:block;border:0;padding:12px 14px 12px 14px;padding-inline-start:52px;margin-top:8px;border-radius:10px}
  .cmp2-table td .ico{inset-inline-start:14px;top:14px}
  .cmp2-table td.them{background:#f8f9f8}
  .cmp2-table td.us::before,.cmp2-table td.them::before{display:block;font-size:11.5px;font-weight:700;margin-bottom:2px;letter-spacing:0}
  .cmp2-table td.us::before{content:"راهکارنت";color:var(--accent)}
  .cmp2-table td.them::before{content:"روش معمول بازار";color:var(--ink-3)}
  .cmp2-foot{padding:18px 20px}
}

/* comparison: icon and text share a flex row so they always align; red crosses for the market column */
.cmp2-table td,.cmp2-table td.us,.cmp2-table td.them{padding:22px 32px}
.cmp2-table td .cell{display:flex;align-items:flex-start;gap:14px}
.cmp2-table td .cell .ico{position:static;flex:none;margin-top:2px;width:24px;height:24px}
.cmp2-table td .cell span{display:block;flex:1}
.cmp2-table td .ico.no{stroke:#d64545;background:#fdeceb}
.cmp2-table td.them{color:var(--ink-2)}
@media (max-width:960px){
  .cmp2-table td,.cmp2-table td.us,.cmp2-table td.them{padding:12px 14px}
  .cmp2-table td .cell .ico{margin-top:1px}
  .cmp2-table td.us::before,.cmp2-table td.them::before{margin-bottom:6px}
}

/* visual priority: our ticks are solid and bold, the market's crosses are quiet */
.cmp2-table td .ico.ok{stroke:#fff;background:var(--accent);stroke-width:2.6;box-shadow:0 0 0 4px rgba(15,110,86,.12)}
.cmp2-table td .ico.no{stroke:#e0908c;background:transparent;stroke-width:1.8;box-shadow:none;border:1px solid #f1d3d1}
.cmp2-table td.them{color:var(--ink-3)}
.cmp2-table td.us .cell span{color:var(--ink)}

/* ticks: back to a soft style, only slightly stronger than the quiet crosses */
.cmp2-table td .ico.ok{stroke:var(--accent);background:var(--accent-soft);stroke-width:2.4;box-shadow:none;width:22px;height:22px;padding:3px;margin-top:3px}
.cmp2-table td .ico.no{width:22px;height:22px;margin-top:3px}

/* blog: same line-and-grid language */
.blog2{padding:0;overflow-x:clip}
.blog2-box{position:relative;border-inline:1px solid var(--line);background:#fff}
.blog2-box::before,.blog2-box::after,.blog2-grid::before{content:"";position:absolute;left:50%;width:100vw;height:1px;background:var(--line);transform:translateX(-50%);pointer-events:none}
.blog2-box::before{top:0}.blog2-box::after{bottom:0}
.blog2-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:56px 36px 36px}
.blog2-head h2{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.01em}
.blog2-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr)}
.blog2-grid::before{top:0}
.post{display:flex;flex-direction:column;border-inline-start:1px solid var(--line);transition:background .25s}
.post:first-child{border-inline-start:0}
.post-img{margin:24px 24px 0;aspect-ratio:16/10;display:grid;place-items:center;color:var(--ink-3);font-size:13px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(rgba(20,32,27,.04) 1px,transparent 1px) 0 0/100% 22px,linear-gradient(90deg,rgba(20,32,27,.04) 1px,transparent 1px) 0 0/22px 100%,#fbfcfb}
.post-img span{background:#fff;padding:2px 10px;border:1px solid var(--line)}
.post-body{display:flex;flex-direction:column;gap:10px;padding:22px 28px 30px;flex:1}
.post-cat{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-2)}
.post-cat i{width:7px;height:7px;border-radius:2px;background:var(--accent)}
.post-cat.ps i{background:var(--ps)}.post-cat.wp i{background:var(--wp)}
.post h3{font-size:18px;font-weight:700;line-height:1.75;transition:color .2s}
.post p{font-size:14.5px;line-height:2;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-more{margin-top:auto;padding-top:8px;font-size:14px;font-weight:700;color:var(--accent)}
@media (hover:hover){.post:hover{background:#fcfdfc}.post:hover h3{color:var(--accent)}}
@media (max-width:960px){
  .blog2-head{padding:40px 20px 28px}
  .blog2-grid{grid-template-columns:1fr}
  .post,.post:first-child{border-inline-start:0;border-bottom:1px solid var(--line)}
  .post:last-child{border-bottom:0}
  .post-img{margin:20px 20px 0}.post-body{padding:20px 20px 26px}
}

.post h3{min-height:3.5em;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:960px){.post h3{min-height:0}}

/* blog v2: separate cards again, same hairline border as the rest, sharp corners */
.blog2-head{padding:56px 36px 32px}
.blog2-grid{gap:20px;padding:0 36px 48px;grid-template-columns:repeat(3,1fr)}
.blog2-grid::before{display:none}
.post,.post:first-child{border:1px solid var(--line);border-radius:0;background:#fff;border-inline-start:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.post-img{margin:0;border:0;border-bottom:1px solid var(--line);aspect-ratio:16/9}
.post-body{padding:22px 24px 26px}
@media (hover:hover){.post:hover{background:#fff;border-color:var(--line-2);box-shadow:0 10px 24px -16px rgba(20,32,27,.25)}}
@media (max-width:960px){
  .blog2-grid{grid-template-columns:1fr;padding:0 20px 36px;gap:16px}
  .post,.post:first-child{border:1px solid var(--line)}
  .post:last-child{border:1px solid var(--line)}
  .post-img{margin:0}.post-body{padding:18px 18px 22px}
}

/* closing sections: same hairline / full-bleed language, no rounded green block */
.svc2,.cta2{padding:0;overflow-x:clip}
.svc2-box,.cta2-box{position:relative;border-inline:1px solid var(--line);background:#fff}
.svc2-box::before,.svc2-box::after,.cta2-box::after{content:"";position:absolute;left:50%;width:100vw;height:1px;background:var(--line);transform:translateX(-50%);pointer-events:none}
.svc2-box::before{top:0}.svc2-box::after{bottom:0}
.cta2-box::after{bottom:0}
.svc2-box{display:grid;grid-template-columns:1fr auto;align-items:center}
.svc2-text{padding:36px 36px}
.svc2-text h3{font-size:20px;font-weight:800;margin-bottom:4px}
.svc2-text p{font-size:14.5px;color:var(--ink-2)}
.svc2-act{align-self:stretch;display:flex;align-items:center;padding:0 36px;border-inline-start:1px solid var(--line)}
.cta2-box{text-align:center;padding:84px 24px 88px;isolation:isolate;overflow:visible}
.cta2-box::before{content:"";position:absolute;z-index:-1;inset:0 -9999px;margin-inline:auto;
  background:
    linear-gradient(rgba(20,32,27,.045) 1px,transparent 1px) 0 0/100% 56px,
    linear-gradient(90deg,rgba(20,32,27,.045) 1px,transparent 1px) 0 0/56px 100%;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000,transparent 80%);
  mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000,transparent 80%)}
.cta2-box h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;line-height:1.5;letter-spacing:-.01em}
.cta2-box h2 em{font-style:normal;color:var(--accent)}
.cta2-box p{max-width:480px;margin:12px auto 30px;color:var(--ink-2)}
.cta2-box .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media (max-width:960px){
  .svc2-box{grid-template-columns:1fr}
  .svc2-text{padding:26px 20px 16px}
  .svc2-act{border-inline-start:0;padding:0 20px 26px}
  .cta2-box{padding:56px 20px 60px}
}

/* footer v2: hairline columns + dotted copyright band */
.ftr2{overflow-x:clip;background:#fff}
.ftr2-box{position:relative;display:grid;grid-template-columns:1.5fr repeat(4,1fr);border-inline:1px solid var(--line)}
.ftr2-box::before{content:"";position:absolute;left:50%;top:0;width:100vw;height:1px;background:var(--line);transform:translateX(-50%)}
.ftr2-brand,.ftr2-col{padding:44px 32px 48px}
.ftr2-col{border-inline-start:1px solid var(--line)}
.ftr2-brand p{margin-top:14px;max-width:290px;font-size:14.5px;line-height:2;color:var(--ink-2)}
.ftr2 .logo{font-size:20px}
.ftr2-col h5{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:16px}
.ftr2-col ul{list-style:none;padding:0;display:grid;gap:11px}
.ftr2-col a{font-size:14.5px;color:var(--ink-2);transition:color .2s}
.ftr2-col a:hover{color:var(--accent)}
.ftr2-copy{border-top:1px solid var(--line);background:
  radial-gradient(circle,rgba(20,32,27,.2) 1px,transparent 1.4px) 0 0/8px 8px,#fff}
.ftr2-copy-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 32px;margin-inline:0;position:relative}
.ftr2-copy-in::before{content:"";position:absolute;inset:8px 0;background:#fff;z-index:0;border-inline:1px solid var(--line);}
.ftr2-copy-in>*{position:relative;z-index:1}
.copy-t{font-size:14px;color:var(--ink)}
.copy-t b{color:var(--accent);font-weight:700;margin-inline:4px}
.social{display:flex;gap:6px}
.social a{width:38px;height:38px;display:grid;place-items:center;color:var(--ink);transition:color .2s,background .2s}
.social a:hover{color:var(--accent);background:var(--accent-soft)}
.social svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:960px){
  .ftr2-box{grid-template-columns:1fr 1fr}
  .ftr2-brand{grid-column:1/-1;padding:32px 20px}
  .ftr2-col{padding:26px 20px 30px;border-top:1px solid var(--line)}
  .ftr2-col:nth-of-type(odd){border-inline-start:0}
  .ftr2-copy-in{flex-direction:column;gap:6px;padding:16px 20px}
}

/* copyright bar: dots run behind the text across the whole band, like the reference */
.ftr2-copy{background:radial-gradient(circle,rgba(20,32,27,.2) 1px,transparent 1.4px) 0 0/8px 8px,#fff;border-bottom:1px solid var(--line)}
.ftr2-copy-in::before{display:none}
.ftr2-copy-in{padding:26px 8px}
.copy-t{background:#fff;padding:4px 12px}
.social{background:#fff;padding:4px 8px}

/* ===== product page, same hairline language as the home page ===== */
.pp{overflow-x:clip}
.pp-box{position:relative;border-inline:1px solid var(--line);background:#fff}
.pp-box::before,.pp-box::after{content:"";position:absolute;left:50%;width:100vw;height:1px;background:var(--line);transform:translateX(-50%);pointer-events:none}
.pp-box::before{top:0}.pp-box::after{bottom:0}
.pp-crumb{display:flex;align-items:center;gap:10px;padding:16px 32px;font-size:13.5px;color:var(--ink-3);border-bottom:1px solid var(--line);position:relative}
.pp-crumb::after{content:"";position:absolute;left:50%;bottom:-1px;width:100vw;height:1px;background:var(--line);transform:translateX(-50%)}
.pp-crumb a:hover{color:var(--ink)}
.pp-crumb i{font-style:normal;color:var(--line-2)}
.pp-crumb span{color:var(--ink-2)}
.pp-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;align-items:start}
.pp-main{min-width:0}
.pp-buy{border-inline-start:1px solid var(--line);align-self:stretch}
.pp-buy-in{position:sticky;top:92px;padding:36px 32px 40px;display:grid;gap:16px}

.pp-hero{padding:44px 36px 40px}
.pp-hero h1{font-size:clamp(28px,3.4vw,40px);line-height:1.45;font-weight:800;letter-spacing:-.01em;margin-top:14px}
.pp-hero .lead{font-size:17px;color:var(--ink-2);margin-top:14px;max-width:620px;line-height:2}
.pp-shot{margin-top:30px;aspect-ratio:16/8.5;display:grid;place-items:center;color:var(--ink-3);font-size:13px;border:1px solid var(--line);
  background:linear-gradient(rgba(20,32,27,.04) 1px,transparent 1px) 0 0/100% 22px,linear-gradient(90deg,rgba(20,32,27,.04) 1px,transparent 1px) 0 0/22px 100%,#fbfcfb}
.pp-shot span{background:#fff;padding:2px 12px;border:1px solid var(--line)}
.pp-shot.sm{margin-top:0;aspect-ratio:16/10}

.pp-tabs{position:sticky;top:68px;z-index:10;display:flex;gap:2px;padding-inline:24px;overflow-x:auto;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-block:1px solid var(--line)}
.pp-tabs a{padding:15px 14px;font-size:14.5px;color:var(--ink-2);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s}
.pp-tabs a:hover{color:var(--ink)}
.pp-tabs a.on{color:var(--accent);border-color:var(--accent);font-weight:700}

.pp-sec{padding:44px 36px 48px;border-bottom:1px solid var(--line);scroll-margin-top:130px}
.pp-sec:last-child{border-bottom:0}
.pp-sec h2{font-size:24px;font-weight:800;margin-bottom:24px}
.pp-feats{padding-inline:0}
.pp-feats h2{padding-inline:36px}
.pp-feat-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.pp-feat{padding:30px 36px 34px;border-inline-start:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .25s}
.pp-feat:nth-child(2n+1){border-inline-start:0}
.pp-feat:nth-last-child(-n+2){border-bottom:0}
.pp-feat svg{width:36px;height:36px;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.pp-feat h3{font-size:17px;font-weight:700;margin-bottom:6px;transition:color .2s}
.pp-feat p{font-size:14.5px;line-height:2;color:var(--ink-2)}
@media (hover:hover){.pp-feat:hover{background:linear-gradient(180deg,rgba(232,245,240,.5),rgba(232,245,240,0) 70%)}.pp-feat:hover h3{color:var(--accent)}}

.pp-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pp-rows{border:1px solid var(--line)}
.pp-rows a,.pp-rows div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);font-size:15px;transition:background .2s}
.pp-rows>:last-child{border-bottom:0}
.pp-rows a:hover{background:#fcfdfc}
.pp-rows a:hover span{color:var(--accent)}
.pp-rows em{font-style:normal;color:var(--ink-3);font-size:13px;white-space:nowrap}
.pp-rows.plain div span{color:var(--ink-2)}
.pp-rows.plain div em{color:var(--ink);font-size:14.5px;font-weight:600}

.pp-log{display:grid;gap:0;border:1px solid var(--line)}
.pp-log-item{padding:20px 24px;border-bottom:1px solid var(--line)}
.pp-log-item:last-child{border-bottom:0}
.pp-log-h{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.pp-log-h b{font-size:16px}
.pp-log-h span{font-size:13px;color:var(--ink-3)}
.pp-log ul{margin:0;padding-inline-start:20px;color:var(--ink-2);font-size:14.5px;line-height:2}

.pp-faq details{border:1px solid var(--line);margin-top:-1px;padding:0 22px}
.pp-faq details:first-of-type{margin-top:0}
.pp-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0;font-weight:600;font-size:15.5px}
.pp-faq summary::after{content:"+";font-size:20px;color:var(--ink-3);line-height:1}
.pp-faq details[open] summary::after{content:"−";color:var(--accent)}
.pp-faq details p{padding-bottom:18px;color:var(--ink-2);font-size:15px;line-height:2}

.pp-price{display:flex;align-items:baseline;gap:8px}
.pp-price b{font-size:34px;font-weight:800;letter-spacing:-.02em}
.pp-price span{font-size:14px;color:var(--ink-3)}
.pp-buy .btn{width:100%}
.pp-meta{margin:6px 0 0;border-top:1px solid var(--line)}
.pp-meta div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px dashed var(--line-2);font-size:14px}
.pp-meta div:last-child{border-bottom:0}
.pp-meta dt{color:var(--ink-3)}
.pp-meta dd{margin:0;font-weight:700}
.pp-note{font-size:13px;line-height:1.9;color:var(--ink-3);padding-top:4px}

@media (max-width:960px){
  .pp-crumb{padding:14px 20px}
  .pp-grid{grid-template-columns:minmax(0,1fr)}
  .pp-buy{border-inline-start:0;border-bottom:1px solid var(--line);order:-1}
  .pp-buy-in{position:static;padding:24px 20px 28px}
  .pp-hero{padding:30px 20px}
  .pp-sec{padding:32px 20px 36px}
  .pp-feats h2{padding-inline:20px}
  .pp-feat-grid{grid-template-columns:1fr}
  .pp-feat,.pp-feat:nth-child(n){padding:24px 20px;border-inline-start:0;border-bottom:1px solid var(--line)}
  .pp-feat:last-child{border-bottom:0}
  .pp-gal{grid-template-columns:1fr}
  .pp-tabs{padding-inline:12px}
}

@media (max-width:960px){.pp-buy{order:0;border-bottom:0;border-top:1px solid var(--line)}}

/* ===== docs pages: same hairline language ===== */
.dc{overflow-x:clip}
.dc-box{position:relative;border-inline:1px solid var(--line);background:#fff}
.dc-box::before,.dc-box::after{content:"";position:absolute;left:50%;width:100vw;height:1px;background:var(--line);transform:translateX(-50%);pointer-events:none}
.dc-box::before{top:0}.dc-box::after{bottom:0}

/* search */
.dc-search{display:flex;align-items:center;gap:10px;height:54px;padding-inline:18px;border:1px solid var(--line-2);background:#fff;max-width:560px;margin:30px auto 0;transition:border-color .2s,box-shadow .2s}
.dc-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,110,86,.12)}
.dc-search svg{width:20px;height:20px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;flex:none}
.dc-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:15.5px;color:var(--ink)}
.dc-search input::placeholder{color:var(--ink-3)}
.dc-search kbd{font:inherit;font-size:12px;color:var(--ink-3);border:1px solid var(--line-2);padding:0 8px;line-height:22px}
.dc-search.sm{height:42px;margin:0 0 18px;max-width:none;padding-inline:12px}
.dc-search.sm input{font-size:14px}

/* hub */
.dc-hero{text-align:center;padding:72px 24px 56px}
.dc-hero h1{font-size:clamp(30px,4vw,46px);line-height:1.5;font-weight:800;letter-spacing:-.01em;margin-top:6px}
.dc-hero h1 em{font-style:normal;color:var(--accent)}
.dc-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr)}
.dc-grid::before{content:"";position:absolute;left:50%;top:0;width:100vw;height:1px;background:var(--line);transform:translateX(-50%)}
.dc-cell{position:relative;padding:36px 36px 34px;border-inline-start:1px solid var(--line);display:flex;flex-direction:column;gap:12px;transition:background .25s}
.dc-cell:first-child{border-inline-start:0}
.dc-cell>svg{width:40px;height:40px;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:6px}
.dc-cell h2{font-size:21px;font-weight:800}
.dc-cell p{font-size:14.5px;line-height:2;color:var(--ink-2)}
.dc-cell ul{list-style:none;padding:0;margin:6px 0 4px;border-top:1px dashed var(--line-2)}
.dc-cell li{border-bottom:1px dashed var(--line-2)}
.dc-cell li a{display:flex;justify-content:space-between;gap:10px;padding:11px 0;font-size:14.5px;color:var(--ink);transition:color .2s}
.dc-cell li a::after{content:"←";color:var(--ink-3);transition:transform .2s,color .2s}
.dc-cell li a:hover{color:var(--accent)}
.dc-cell li a:hover::after{color:var(--accent);transform:translateX(-4px)}
.dc-cell .more{margin-top:auto;padding-top:6px}
@media (hover:hover){.dc-cell:hover{background:linear-gradient(180deg,rgba(232,245,240,.4),rgba(232,245,240,0) 55%)}}
.dc-help{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:28px 36px;border-top:1px solid var(--line)}
.dc-help b{display:block;font-size:17px}
.dc-help span{font-size:14px;color:var(--ink-2)}

/* single doc */
.dc-layout{display:grid;grid-template-columns:270px minmax(0,1fr) 230px;align-items:start}
.dc-side{border-inline-end:1px solid var(--line);align-self:stretch}
.dc-side-in{position:sticky;top:84px;padding:26px 24px 36px;max-height:calc(100vh - 84px);overflow:auto}
.dc-prod{display:flex;flex-direction:column;gap:4px;padding:14px 0 16px;border-bottom:1px solid var(--line);margin-bottom:6px}
.dc-prod b{font-size:16px}
.dc-grp{padding-top:18px}
.dc-grp h4{font-size:12.5px;font-weight:700;color:var(--ink-3);margin-bottom:8px;letter-spacing:0}
.dc-grp ul{list-style:none;padding:0;display:grid;gap:1px}
.dc-grp a{display:block;padding:7px 12px;margin-inline:-12px;font-size:14px;line-height:1.7;color:var(--ink-2);border-inline-start:2px solid transparent;transition:color .15s,background .15s}
.dc-grp a:hover{color:var(--ink);background:var(--bg-soft)}
.dc-grp a.cur{color:var(--accent);font-weight:700;border-inline-start-color:var(--accent);background:linear-gradient(270deg,rgba(232,245,240,.7),rgba(232,245,240,0))}
.dc-art{min-width:0;padding:44px 48px 56px}
.dc-art-h h1{font-size:clamp(28px,3.4vw,38px);line-height:1.5;font-weight:800;margin-top:12px}
.dc-art-h .lead{margin-top:12px;font-size:16.5px;line-height:2;color:var(--ink-2);padding-bottom:28px;border-bottom:1px solid var(--line)}
.dc-body{padding-top:28px;font-size:16px;line-height:2.1;color:var(--ink)}
.dc-body p{margin-bottom:16px}
.dc-body h2{font-size:23px;font-weight:800;margin:40px 0 14px;scroll-margin-top:96px}
.dc-body ul{padding-inline-start:22px;margin-bottom:16px;display:grid;gap:10px}
.dc-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(15,110,86,.35)}
.dc-body a:hover{text-decoration-color:var(--accent)}
.dc-body strong{font-weight:700}
.dc-fig{margin:26px 0}
.dc-fig .pp-shot{margin-top:0}
.dc-fig figcaption{margin-top:10px;font-size:13px;color:var(--ink-3);text-align:center}
.dc-callout{border:1px solid var(--line);border-inline-start:3px solid var(--accent);background:linear-gradient(90deg,rgba(232,245,240,.5),rgba(232,245,240,.15));padding:16px 20px;margin:22px 0}
.dc-callout b{display:block;font-size:14px;color:var(--accent);margin-bottom:2px}
.dc-callout p{margin:0;font-size:15px;line-height:2}
.dc-feedback{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:36px;padding:16px 20px;border:1px solid var(--line);font-size:14.5px;color:var(--ink-2)}
.dc-feedback div{display:flex;gap:8px}
.dc-pn{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:20px;border:1px solid var(--line)}
.dc-pn a{display:flex;flex-direction:column;gap:2px;padding:16px 22px;transition:background .2s}
.dc-pn a+a{border-inline-start:1px solid var(--line)}
.dc-pn a:hover{background:#fcfdfc}
.dc-pn a:hover b{color:var(--accent)}
.dc-pn small{font-size:12px;color:var(--ink-3)}
.dc-pn b{font-size:15px;transition:color .2s}
.dc-pn .prev{text-align:end}
.dc-toc{border-inline-start:1px solid var(--line);align-self:stretch}
.dc-toc-in{position:sticky;top:84px;padding:34px 24px}
.dc-toc h4{font-size:13px;font-weight:700;color:var(--ink-3);margin-bottom:12px}
.dc-toc ul{list-style:none;padding:0;display:grid;gap:2px;border-inline-start:1px solid var(--line)}
.dc-toc a{display:block;padding:6px 14px;margin-inline-start:-1px;font-size:13.5px;line-height:1.8;color:var(--ink-2);border-inline-start:2px solid transparent;transition:color .15s}
.dc-toc a:hover{color:var(--ink)}
.dc-toc a.on{color:var(--accent);font-weight:700;border-inline-start-color:var(--accent)}
.dc-toc-help{margin-top:30px;padding-top:18px;border-top:1px dashed var(--line-2);display:grid;gap:6px;font-size:13.5px}
.dc-toc-help b{font-size:14px}
.dc-toc-help a{color:var(--accent);font-weight:600}

@media (max-width:1100px){
  .dc-layout{grid-template-columns:250px minmax(0,1fr)}
  .dc-toc{display:none}
}
@media (max-width:960px){
  .dc-hero{padding:48px 20px 40px}
  .dc-grid{grid-template-columns:1fr}
  .dc-cell,.dc-cell:first-child{border-inline-start:0;border-bottom:1px solid var(--line);padding:28px 20px}
  .dc-cell:last-child{border-bottom:0}
  .dc-help{padding:22px 20px}
  .dc-layout{grid-template-columns:minmax(0,1fr)}
  .dc-side{border-inline-end:0;border-bottom:1px solid var(--line)}
  .dc-side-in{position:static;max-height:none;padding:18px 20px}
  .dc-art{padding:30px 20px 40px}
  .dc-pn{grid-template-columns:1fr}
  .dc-pn a+a{border-inline-start:0;border-top:1px solid var(--line)}
  .dc-pn .prev{text-align:start}
}

/* wider layout for the product and docs pages (header and footer follow so every vertical line stays aligned) */
.pp .wrap,.dc .wrap{max-width:1400px}
body:has(.pp) .hdr .wrap,body:has(.dc) .hdr .wrap,
body:has(.pp) .ftr2 .wrap,body:has(.dc) .ftr2 .wrap{max-width:1400px}
.pp-grid{grid-template-columns:minmax(0,1fr) 400px}
.dc-layout{grid-template-columns:290px minmax(0,1fr) 250px}
.dc-art{padding:48px 56px 64px}
.dc-body,.dc-art-h .lead{max-width:760px}
@media (max-width:1100px){.dc-layout{grid-template-columns:260px minmax(0,1fr)}.dc-art{padding:40px 36px 52px}}
@media (max-width:960px){.dc-art{padding:30px 20px 40px}.pp-grid{grid-template-columns:minmax(0,1fr)}}

.dc-side-in{padding-top:12px}
.dc-prod{padding-top:18px}

/* features: 3 columns on large screens, any number of cards keeps clean lines */
.pp-feats{overflow:hidden}
.pp-feat-grid{margin-inline-start:-1px;margin-bottom:-1px}
.pp-feat,.pp-feat:nth-child(n),.pp-feat:nth-last-child(-n+2){border-inline-start:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (min-width:1300px){
  .pp-feat-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  .pp-feat-grid{margin-inline-start:0;margin-bottom:0}
  .pp-feat,.pp-feat:nth-child(n),.pp-feat:nth-last-child(-n+2){border-inline-start:0;border-bottom:1px solid var(--line)}
  .pp-feat:last-child{border-bottom:0}
}

/* services side panel: categories column + a second column that opens beside it */
.nav a[data-drawer]{display:inline-flex;align-items:center;gap:2px}
.nav a .chev{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(180deg);transition:transform .2s}
.nav a[aria-expanded=true] .chev{transform:rotate(90deg)}
.sd-lock{overflow:hidden}
.sd{position:fixed;inset:0;z-index:100}
.sd[hidden]{display:none}
.sd-overlay{position:absolute;inset:0;background:rgba(20,32,27,.22);backdrop-filter:blur(1.5px);opacity:0;transition:opacity .3s}
.sd.on .sd-overlay{opacity:1}
.sd-panel{position:absolute;top:0;bottom:0;right:0;display:flex;width:430px;max-width:100%;background:#fff;outline:0;
  border-inline-start:1px solid var(--line-2);transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.7,.2,1),width .32s cubic-bezier(.2,.7,.2,1);
  box-shadow:-30px 0 60px -30px rgba(20,32,27,.35)}
.sd-panel.has-sub{width:790px}
.sd.on .sd-panel{transform:none}

.sd-main{flex:0 0 430px;width:430px;display:flex;flex-direction:column;min-width:0;background:#fff}
.sd-head{display:flex;align-items:center;justify-content:space-between;padding:22px 28px;border-bottom:1px solid var(--line)}
.sd-head h2{font-size:20px;font-weight:800}
.sd-x{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-2);background:#fff;cursor:pointer;color:var(--ink);transition:border-color .2s}
.sd-x:hover{border-color:var(--ink)}
.sd-x svg,.sd-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sd-cats{list-style:none;padding:0;margin:0;flex:1;overflow:auto;background:radial-gradient(circle,rgba(20,32,27,.07) 1px,transparent 1.4px) 0 0/22px 22px,#fff}
.sd-cats li{border-bottom:1px solid var(--line);background:#fff}
.sd-cat{position:relative;width:100%;display:flex;align-items:center;gap:14px;padding:24px 28px;border:0;background:none;font:inherit;text-align:start;cursor:pointer;color:var(--ink);transition:background .2s}
.sd-cat span{flex:1;display:flex;flex-direction:column;gap:2px}
.sd-cat b{font-size:17px;font-weight:700;transition:color .2s}
.sd-cat small{font-size:13px;color:var(--ink-3)}
.sd-cat>svg{width:20px;height:20px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s,stroke .2s}
.sd-cat::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;background:var(--accent);transform:scaleY(0);transition:transform .25s}
.sd-cat.wp::before{background:var(--wp)}.sd-cat.ps::before{background:var(--ps)}
.sd-dot{width:10px;height:10px;border-radius:2px;background:var(--accent);flex:none}
.sd-cat.wp .sd-dot{background:var(--wp)}.sd-cat.ps .sd-dot{background:var(--ps)}
.sd-cat:hover{background:#fcfdfc}
.sd-cat.active{background:linear-gradient(270deg,rgba(232,245,240,.65),rgba(232,245,240,0))}
.sd-cat.active.wp{background:linear-gradient(270deg,rgba(232,240,254,.7),rgba(232,240,254,0))}
.sd-cat.active.ps{background:linear-gradient(270deg,rgba(253,232,238,.7),rgba(253,232,238,0))}
.sd-cat.active::before{transform:none}
.sd-cat.active b{color:var(--accent)}.sd-cat.active.wp b{color:var(--wp)}.sd-cat.active.ps b{color:var(--ps)}
.sd-cat.active>svg{transform:translateX(-4px);stroke:currentColor}
.sd-foot{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;padding:18px 28px;border-top:1px solid var(--line);background:#fff}
.sd-foot .btn{width:100%}

.sd-sub{flex:1;min-width:0;display:none;flex-direction:column;border-inline-start:1px solid var(--line);background:#fff;overflow:hidden}
.sd-panel.has-sub .sd-sub{display:flex}
.sd-sub-head{display:flex;align-items:center;gap:12px;padding:22px 32px;border-bottom:1px solid var(--line);min-height:85px}
.sd-sub-head h3{font-size:18px;font-weight:800}
.sd-back{display:none;width:40px;height:40px;place-items:center;border:1px solid var(--line-2);background:#fff;cursor:pointer;color:var(--ink)}
.sd-sub-body{flex:1;overflow:auto;background:radial-gradient(circle,rgba(20,32,27,.07) 1px,transparent 1.4px) 0 0/22px 22px,#fff}
.sd-subc{background:#fff;min-height:100%;animation:sdin .3s ease}
@keyframes sdin{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.sd-lead{padding:22px 32px 18px;font-size:14px;line-height:2;color:var(--ink-2);border-bottom:1px solid var(--line)}
.sd-subc ul{list-style:none;padding:0;margin:0}
.sd-subc li{border-bottom:1px solid var(--line)}
.sd-subc a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:19px 32px;font-size:16px;font-weight:600;color:var(--ink);transition:color .2s,background .2s}
.sd-subc a svg{width:18px;height:18px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s,stroke .2s}
.sd-subc a:hover{background:#fcfdfc;color:var(--accent)}
.sd-subc.wp a:hover{color:var(--wp)}.sd-subc.ps a:hover{color:var(--ps)}
.sd-subc a:hover svg{stroke:currentColor;transform:translateX(-4px)}

@media (prefers-reduced-motion:reduce){.sd-panel,.sd-overlay,.sd-subc{transition:none;animation:none}}
@media (max-width:860px){.sd-panel.has-sub{width:430px}.sd-panel{width:430px}}
@media (max-width:760px){
  .sd-panel,.sd-panel.has-sub{width:100%}
  .sd-main{flex:1 1 100%;width:100%}
  .sd-sub{position:absolute;inset:0;display:flex;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);border-inline-start:0;z-index:2}
  .sd-panel.sub-open .sd-sub{transform:none}
  .sd-back{display:grid}
  .sd-head,.sd-cat,.sd-foot{padding-inline:20px}
  .sd-sub-head,.sd-lead,.sd-subc a{padding-inline:20px}
}

.sd-sub{display:none}

/* useful links under the categories */
.sd-scroll{flex:1;overflow:auto;display:flex;flex-direction:column;background:radial-gradient(circle,rgba(20,32,27,.07) 1px,transparent 1.4px) 0 0/22px 22px,#fff}
.sd-cats{flex:none;overflow:visible;background:none}
.sd-links{list-style:none;padding:0;margin:auto 0 0;border-top:1px solid var(--line)}
.sd-links li{border-bottom:1px solid var(--line);background:#fff}
.sd-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 28px;font-size:15px;font-weight:600;color:var(--ink-2);transition:color .2s,background .2s}
.sd-links a svg{width:16px;height:16px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s,stroke .2s}
.sd-links a:hover{color:var(--accent);background:#fcfdfc}
.sd-links a:hover svg{stroke:var(--accent);transform:translate(-3px,-3px)}
.sd-foot{grid-template-columns:1fr}
@media (max-width:760px){.sd-links a{padding-inline:20px}}

.sd-links{margin:0;border-top:0}
.sd-scroll{justify-content:flex-start}
.sd-cats{margin-bottom:0}

/* extra links: quiet text links, no borders, clearly secondary to the service categories */
.sd-links{margin:26px 0 0;padding:0 28px 8px;border:0;display:grid;gap:2px}
.sd-links li{border:0;background:none}
.sd-links a{display:inline-flex;align-items:center;gap:8px;padding:8px 0;font-size:14.5px;font-weight:500;color:var(--ink-2);background:none}
.sd-links a svg{order:-1;width:15px;height:15px}
.sd-links a:hover{background:none;color:var(--accent)}
@media (max-width:760px){.sd-links{padding-inline:20px}}

.sd-links a svg{order:0}

/* ===== service pages (web design): same hairline language ===== */
.sv{overflow-x:clip}
.sv-sec{padding:0;overflow-x:clip}
.sv-box{position:relative;border-inline:1px solid var(--line);background:#fff}
.sv-box::before,.sv-box::after{content:"";position:absolute;left:50%;width:100vw;height:1px;background:var(--line);transform:translateX(-50%);pointer-events:none}
.sv-box::before{top:0}.sv-box::after{bottom:0}

/* hero */
.sv-hero{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line);background:
  radial-gradient(900px 380px at 50% -60px,rgba(15,110,86,.12),transparent 70%),#fff}
.sv-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle,rgba(20,32,27,.10) 1px,transparent 1.4px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 50% 30%,#000,transparent 75%)}
.sv-hero .wrap{padding-inline:0}
.sv-hero-in{max-width:860px;margin-inline:auto;text-align:center;padding:104px 24px 96px}
.sv-hero .why-pill{margin-bottom:24px}
.sv-hero h1{font-size:clamp(28px,3.8vw,46px);line-height:1.55;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
.sv-hero .lead{max-width:680px;margin:22px auto 0;font-size:17.5px;line-height:2.05;color:var(--ink-2);text-wrap:balance}
.sv-hero .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.sv-sublink{display:inline-block;margin-top:24px;font-size:14px;color:var(--ink-3);border-bottom:1px dashed var(--line-2);padding-bottom:2px;transition:color .2s}
.sv-sublink:hover{color:var(--accent);border-color:var(--accent)}

/* cells (reuses the why grid) */
.sv .why{padding:0}
.why-grid.two{grid-template-columns:repeat(2,1fr)}
.why-grid.two .why-cell:nth-child(odd){border-inline-start:0}
.why-grid.two .why-cell:nth-child(even){border-inline-start:1px solid var(--line)}
.why-grid.two .why-cell{border-bottom:0}
.sv-for{display:block;margin-top:-4px;font-size:13px;color:var(--ink-3);line-height:1.8}
.sv-note{padding:20px 36px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-3);background:#fcfdfc}
.sv .why-cell h3{font-size:18px}

/* split: heading on one side, checklist on the other */
.sv-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.sv-split-h{border-inline-end:1px solid var(--line);position:relative}
.sv-split-hin{position:sticky;top:96px;padding:64px 40px 56px}
.sv-split-hin h2{font-size:clamp(24px,2.8vw,32px);line-height:1.65;font-weight:800;margin-top:6px}
.sv-split-hin h2 em{font-style:normal;color:var(--accent)}
.sv-split-hin p{margin-top:14px;font-size:15.5px;line-height:2;color:var(--ink-2)}
.sv-list{list-style:none;margin:0;padding:0}
.sv-list li{display:flex;align-items:flex-start;gap:16px;padding:21px 36px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.9;transition:background .2s}
.sv-list li:last-child{border-bottom:0}
.sv-list li svg{flex:none;width:24px;height:24px;margin-top:3px;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;padding:3px;border-radius:50%;background:var(--accent-soft);box-sizing:border-box}
@media (hover:hover){.sv-list li:hover{background:linear-gradient(270deg,rgba(232,245,240,.5),rgba(232,245,240,0))}}

/* stats */
.sv-stats{display:grid;grid-template-columns:repeat(3,1fr)}
.sv-stat{padding:48px 36px;border-inline-start:1px solid var(--line);text-align:center;display:flex;flex-direction:column;gap:6px}
.sv-stat:first-child{border-inline-start:0}
.sv-stat b{font-size:clamp(28px,3.2vw,40px);font-weight:800;letter-spacing:-.02em;color:var(--accent);line-height:1.3}
.sv-stat span{font-size:14.5px;color:var(--ink-2)}

/* work (reuses blog cards) */
.sv-work .post-img{aspect-ratio:4/3;padding:0}
.sv-work .post-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .5s}
@media (hover:hover){.sv-work .post:hover .post-img img{transform:scale(1.03)}}
.sv-work .post-body{padding:18px 22px 22px}
.sv-work .post h3{min-height:0;-webkit-line-clamp:2;font-size:16.5px}
.blog2-grid.n4{grid-template-columns:repeat(4,1fr)}

/* faq */
.sv-faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.sv-faq-h{border-inline-end:1px solid var(--line);padding:64px 40px}
.sv-faq-h h2{font-size:clamp(24px,2.8vw,32px);font-weight:800;line-height:1.6}
.sv-faq-b{padding:44px 36px 48px}
.sv-faq-b details:first-of-type{margin-top:0}

@media (max-width:960px){
  .sv-hero-in{padding:64px 20px 56px}
  .sv-split,.sv-faq{grid-template-columns:1fr}
  .sv-split-h,.sv-faq-h{border-inline-end:0;border-bottom:1px solid var(--line)}
  .sv-split-hin{position:static;padding:40px 20px 36px}
  .sv-faq-h{padding:40px 20px 8px;border-bottom:0}
  .sv-faq-b{padding:20px 20px 36px}
  .sv-list li{padding:17px 20px}
  .sv-stats{grid-template-columns:1fr}
  .sv-stat,.sv-stat:first-child{border-inline-start:0;border-bottom:1px solid var(--line);padding:30px 20px}
  .sv-stat:last-child{border-bottom:0}
  .why-grid.two{grid-template-columns:1fr}
  .why-grid.two .why-cell,.why-grid.two .why-cell:nth-child(n){border-inline-start:0;border-bottom:1px solid var(--line)}
  .why-grid.two .why-cell:last-child{border-bottom:0}
  .sv-note{padding:16px 20px}
  .blog2-grid.n4{grid-template-columns:1fr}
}
@media (min-width:961px) and (max-width:1200px){.blog2-grid.n4{grid-template-columns:repeat(2,1fr)}}

.blog2-head h2 em,.sv-faq-h h2 em,.cta2-box h2 em,.sv-split-hin h2 em{font-style:normal;color:var(--accent)}

/* service pages: same wide container as the product and docs pages (header and footer follow) */
.sv .wrap{max-width:1400px}
body:has(.sv) .hdr .wrap,body:has(.sv) .ftr2 .wrap{max-width:1400px}
.sv-hero-in{max-width:940px}
.sv-split-hin{padding-inline:48px}
.sv-list li{padding-inline:44px}
.sv-faq-h{padding-inline:48px}
.sv-faq-b{padding-inline:44px}
.blog2-grid{padding-inline:44px}
.blog2-head{padding-inline:44px}
@media (max-width:960px){.sv-split-hin,.sv-list li,.sv-faq-h,.sv-faq-b,.blog2-grid,.blog2-head{padding-inline:20px}}

/* ===== service pages 2: price table and numbered steps ===== */
.sv-table{border-top:1px solid var(--line)}
.sv-th,.sv-tr{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,2.4fr) minmax(0,1.8fr);align-items:center}
.sv-th{padding:14px 36px;font-size:13px;font-weight:700;color:var(--ink-3);background:#fcfdfc;border-bottom:1px solid var(--line)}
.sv-th>div+div,.sv-tr>div+div{padding-inline-start:20px}
.sv-tr{padding:0 36px;border-bottom:1px solid var(--line);transition:background .2s}
.sv-tr:last-child{border-bottom:0}
.sv-tr>div{padding-block:20px;font-size:15.5px;line-height:1.9}
.sv-tr .d{font-weight:600;color:var(--ink);padding-inline-end:20px}
.sv-tr .w{color:var(--ink-3);font-size:14px}
.sv-tr .p{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.sv-tr .p.free{color:var(--accent)}
@media (hover:hover){.sv-tr:hover{background:linear-gradient(270deg,rgba(232,245,240,.45),rgba(232,245,240,0))}}
.sv-n{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--line-2);font-size:16px;font-weight:800;color:var(--accent);margin-bottom:14px;background:var(--accent-soft)}
.why-cell .sv-n+h3{margin-top:0}
.sv-box>.sv-note{border-top:1px solid var(--line);position:relative}
@media (max-width:960px){
  .sv-th{display:none}
  .sv-tr{grid-template-columns:1fr auto;padding:0 20px;row-gap:0}
  .sv-tr .d{grid-column:1/-1;padding:16px 0 0}
  .sv-tr>div+div{padding-inline-start:0}
  .sv-tr .w{padding-block:6px 16px;font-size:13px}
  .sv-tr .p{padding-block:6px 16px}
}

/* ===== portfolio: cards with numbers, a mid-list strip, and the single project page ===== */
.pf-hero .sv-hero-in{padding-bottom:64px}
.pf-hero h1 em{font-style:normal;color:var(--accent)}
.pf-demo{display:inline-block;margin-top:22px;font-size:13px;color:var(--ink-3);border:1px dashed var(--line-2);padding:6px 14px;background:#fff}
.pf-demo-in{display:block;margin:0;border:0;border-top:1px dashed var(--line-2);padding:12px 36px;text-align:center}

/* list */
.pf-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 44px;flex-wrap:wrap}
.pf-bar .ptabs{margin:0}
.pf-count{font-size:14px;color:var(--ink-3)}
.pf-count b{color:var(--ink);font-weight:800;font-size:16px}
.pf-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0 44px 48px}
.pf-grid::before{content:"";position:absolute;left:50%;top:-1px;width:100vw;height:1px;background:var(--line);transform:translateX(-50%)}
.pf-card[hidden],.pf-strip[hidden]{display:none}
.pf-card{display:flex;flex-direction:column;border:1px solid var(--line);background:#fff;transition:border-color .2s,box-shadow .2s}
@media (hover:hover){.pf-card:hover{border-color:var(--line-2);box-shadow:0 14px 28px -18px rgba(20,32,27,.3)}.pf-card:hover h3{color:var(--accent)}.pf-card:hover .pf-img img{transform:scale(1.03)}}
.pf-img{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--line);background:#fbfcfb}
.pf-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .5s}
.pf-tag{position:absolute;top:12px;inset-inline-start:12px;font-size:12px;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--line);padding:2px 10px}
.pf-body{padding:18px 22px 6px}
.pf-body h3{font-size:19px;font-weight:800;line-height:1.6;transition:color .2s}
.pf-body p{font-size:14px;color:var(--ink-3);line-height:1.8;margin-top:2px}
.pf-ms{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.pf-m{display:flex;flex-direction:column;gap:2px;padding:14px 12px 15px;text-align:center;border-inline-start:1px solid var(--line)}
.pf-m:first-child{border-inline-start:0}
.pf-m b{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--ink);line-height:1.4}
.pf-m span{font-size:11.5px;color:var(--ink-3);line-height:1.5}

/* strip between the cards */
.pf-strip{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border:1px solid var(--line);background:
  radial-gradient(500px 220px at 90% 0,rgba(15,110,86,.1),transparent 70%),linear-gradient(135deg,#f4faf7,#fff)}
.pf-strip-t{padding:34px 36px;display:flex;flex-direction:column;justify-content:center;gap:18px;border-inline-end:1px solid var(--line)}
.pf-strip-t h3{font-size:clamp(20px,2vw,26px);font-weight:800;line-height:1.7}
.pf-strip-t .btn{align-self:flex-start}
.pf-strip-n{display:grid;grid-template-columns:repeat(4,1fr)}
.pf-sn{display:flex;flex-direction:column;justify-content:center;gap:4px;text-align:center;padding:24px 10px;border-inline-start:1px solid var(--line)}
.pf-sn:first-child{border-inline-start:0}
.pf-sn b{font-size:clamp(24px,2.6vw,36px);font-weight:800;letter-spacing:-.02em;color:var(--accent);line-height:1.3}
.pf-sn span{font-size:13px;color:var(--ink-2)}

/* single project */
.pf-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch}
.pf-top-t{padding:48px 44px 40px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;border-inline-end:1px solid var(--line)}
.pf-logo{height:44px;width:auto;max-width:200px;object-fit:contain;margin-bottom:10px}
.pf-top-t h1{font-size:clamp(28px,3.4vw,42px);font-weight:800;line-height:1.4}
.pf-top-t .lead{font-size:16.5px;line-height:2.05;color:var(--ink-2);max-width:480px}
.pf-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pf-top-i{padding:40px 44px;display:flex;align-items:center;background:radial-gradient(circle,rgba(20,32,27,.07) 1px,transparent 1.4px) 0 0/22px 22px,#fbfcfb}
.pf-frame{width:100%;border:1px solid var(--line-2);background:#fff;box-shadow:0 30px 50px -30px rgba(20,32,27,.35);aspect-ratio:4/3;overflow:hidden}
.pf-frame img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.pf-bigs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.pf-bs{display:flex;flex-direction:column;gap:4px;padding:34px 24px;text-align:center;border-inline-start:1px solid var(--line)}
.pf-bs:first-child{border-inline-start:0}
.pf-bs b{font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.02em;line-height:1.3}
.pf-bs span{font-size:14px;color:var(--ink-3)}
.pf-res b{display:block;font-size:34px;font-weight:800;color:var(--accent);letter-spacing:-.02em;margin-bottom:6px}
.pf-one .why-grid{grid-template-columns:repeat(3,1fr)}
.pf-one .why-grid .why-cell{border-inline-start:1px solid var(--line);border-bottom:0}
.pf-one .why-grid .why-cell:first-child{border-inline-start:0}
.pf-quote{padding:56px 44px;text-align:center}
.pf-quote blockquote{margin:0 auto;max-width:760px}
.pf-quote p{font-size:clamp(19px,2vw,24px);line-height:2.1;font-weight:600;color:var(--ink)}
.pf-quote p::before{content:"«";color:var(--accent);margin-inline-end:6px}
.pf-quote p::after{content:"»";color:var(--accent);margin-inline-start:6px}
.pf-quote footer{margin-top:18px;display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--ink-3)}
.pf-quote footer b{color:var(--ink);font-size:15px}
.pf-next{display:grid;grid-template-columns:1fr auto 1fr}
.pf-next a{display:flex;flex-direction:column;gap:2px;padding:22px 36px;transition:background .2s}
.pf-next a:hover{background:#fcfdfc}
.pf-next a:hover b{color:var(--accent)}
.pf-next a.mid{align-items:center;justify-content:center;border-inline:1px solid var(--line);padding-inline:40px}
.pf-next a.nx{text-align:end}
.pf-next small{font-size:12px;color:var(--ink-3)}
.pf-next b{font-size:15px;transition:color .2s}

@media (max-width:1100px){.pf-grid{grid-template-columns:repeat(2,1fr)}.pf-strip{grid-template-columns:1fr}.pf-strip-t{border-inline-end:0;border-bottom:1px solid var(--line)}}
@media (max-width:960px){
  .pf-bar{padding:20px}
  .pf-grid{grid-template-columns:1fr;padding:0 20px 36px}
  .pf-top{grid-template-columns:1fr}
  .pf-top-t{border-inline-end:0;border-bottom:1px solid var(--line);padding:30px 20px}
  .pf-top-i{padding:24px 20px}
  .pf-bigs{grid-template-columns:1fr 1fr}
  .pf-bs{padding:24px 12px;border-bottom:1px solid var(--line)}
  .pf-bs:nth-child(2n+1){border-inline-start:0}.pf-bs:nth-child(2n){border-inline-start:1px solid var(--line)}
  .pf-bs:nth-last-child(-n+2){border-bottom:0}
  .pf-one .why-grid{grid-template-columns:1fr}
  .pf-one .why-grid .why-cell,.pf-one .why-grid .why-cell:first-child{border-inline-start:0;border-bottom:1px solid var(--line)}
  .pf-one .why-grid .why-cell:last-child{border-bottom:0}
  .pf-quote{padding:40px 20px}
  .pf-next{grid-template-columns:1fr}
  .pf-next a,.pf-next a.mid,.pf-next a.nx{padding:16px 20px;border-inline:0;border-bottom:1px solid var(--line);text-align:start}
  .pf-strip-n{grid-template-columns:1fr 1fr}
  .pf-sn{border-bottom:1px solid var(--line)}.pf-sn:nth-child(2n+1){border-inline-start:0}.pf-sn:nth-last-child(-n+2){border-bottom:0}
  .pf-strip-t{padding:26px 20px}
  .pf-demo-in{padding-inline:20px}
}

/* portfolio fixes: result cells keep numbers/labels aligned; page order of columns */
.pf-one .why-grid .why-cell{display:flex;flex-direction:column;gap:6px;padding:40px 36px}
.pf-one .why-cell.pf-res h3{font-size:17px;margin:0}
.pf-one .why-cell.pf-res p{margin:0}
.pf-res b{margin-bottom:0}
.pf-one .why-grid{border-top:1px solid var(--line)}

.pf-one .why-grid .why-cell.pf-res{display:block}
.pf-one .why-grid .why-cell.pf-res b{display:block;margin-bottom:8px}
.pf-one .why-grid .why-cell.pf-res h3{margin-bottom:4px}

/* featured project block */
.ft-box{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:#fff}
.ft-t{padding:48px 44px 40px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;border-inline-end:1px solid var(--line)}
.ft-flag{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--accent);margin-bottom:6px;border:1px solid var(--line-2);padding:3px 12px;background:#fff}
.ft-flag i{width:7px;height:7px;border-radius:2px;background:var(--accent)}
.ft-t .pf-logo{height:40px;margin:2px 0 0}
.ft-t h2{font-size:clamp(28px,3.2vw,40px);font-weight:800;line-height:1.45}
.ft-tag{font-size:13.5px;color:var(--ink-3);margin-top:-6px}
.ft-one{font-size:16.5px;line-height:2.05;color:var(--ink-2);max-width:470px}
.ft-q{margin:10px 0 0;padding:14px 18px;border-inline-start:3px solid var(--accent);background:linear-gradient(90deg,rgba(232,245,240,.55),rgba(232,245,240,.1))}
.ft-q p{font-size:15px;line-height:2;font-weight:600;color:var(--ink)}
.ft-q footer{font-size:13px;color:var(--ink-3);margin-top:4px}
.ft-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.ft-i{padding:40px 44px;display:flex;align-items:center;background:radial-gradient(circle,rgba(20,32,27,.07) 1px,transparent 1.4px) 0 0/22px 22px,#fbfcfb}
.ft-i .pf-frame{transform:rotate(0);transition:transform .5s}
@media (hover:hover){.ft-box:hover .pf-frame{transform:translateY(-4px)}}
.ft-nums{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.ft-n{display:flex;flex-direction:column;gap:2px;padding:28px 16px;text-align:center;border-inline-start:1px solid var(--line)}
.ft-n:first-child{border-inline-start:0}
.ft-n b{font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--accent)}
.ft-n span{font-size:13.5px;color:var(--ink-2)}
.ft-demo{grid-column:1/-1}
@media (max-width:960px){
  .ft-box{grid-template-columns:1fr}
  .ft-t{border-inline-end:0;border-bottom:1px solid var(--line);padding:30px 20px}
  .ft-i{padding:24px 20px;order:2}
  .ft-nums{grid-template-columns:1fr 1fr;order:3}
  .ft-n{padding:20px 10px;border-bottom:1px solid var(--line)}
  .ft-n:nth-child(2n+1){border-inline-start:0}.ft-n:nth-last-child(-n+2){border-bottom:0}
  .ft-demo{order:4}
}

/* metric cells with icons (Instagram for followers, others for the rest) */
.pf-m .mi{width:20px;height:20px;fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 4px;transition:stroke .2s}
.pf-m .mi.ig{stroke:#d6336c}
.pf-card:hover .pf-m .mi:not(.ig),.post:hover .pf-m .mi:not(.ig){stroke:var(--accent)}
.sv-work .post{display:flex;flex-direction:column}
.sv-work .post .pf-ms{margin-top:auto}
.sv-work .post-body{flex:0 0 auto;padding-bottom:18px}
.sv-work .post-body h3{min-height:3.5em}
.sv-work .post-more{display:none}
.sv-work .pf-m b{font-size:15.5px}
.sv-work .pf-m span{font-size:11px}
.sv-work .pf-m{padding:12px 6px 13px}

.sv-work .post-body h3{min-height:0}
.sv-work .post-body{padding-bottom:16px}
.sv-work .post-body h3{-webkit-line-clamp:2}

/* portfolio cards, minimal: hairline card, small image, one quiet line of metrics */
.pf-grid{gap:20px}
.pf-card,.sv-work .post{border:1px solid var(--line);box-shadow:none}
@media (hover:hover){.pf-card:hover,.sv-work .post:hover{box-shadow:none;border-color:var(--line-2)}.pf-card:hover .pf-img img{transform:none}}
.pf-img{aspect-ratio:16/10}
.pf-tag{display:none}
.pf-body{padding:16px 20px 4px}
.pf-body h3{font-size:17px;font-weight:700}
.pf-body p{font-size:13.5px}
.pf-ms{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:12px 20px 16px;border-top:0;margin-top:auto}
.pf-m{display:inline-flex;flex-direction:row;align-items:center;gap:6px;padding:0;border:0;text-align:start}
.pf-m .mi{width:15px;height:15px;margin:0;stroke-width:1.7}
.pf-m b{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:0}
.pf-m span{font-size:12px;color:var(--ink-3)}
.pf-card:hover .pf-m .mi:not(.ig),.post:hover .pf-m .mi:not(.ig){stroke:var(--ink-3)}
.sv-work .post-img{aspect-ratio:16/10}
.sv-work .post-body{padding:16px 20px 2px}
.sv-work .post-body h3{font-size:16px;font-weight:700}
.sv-work .pf-m{padding:0}
.sv-work .pf-m b{font-size:13px}
.sv-work .pf-m span{font-size:11.5px}
.sv-work .pf-ms{padding:10px 20px 16px}

/* one tidy line: icon + number only; the label stays as a tooltip-sized second line off */
.pf-ms{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0 18px;padding:10px 20px 16px}
.pf-m{white-space:nowrap}
.pf-m span{display:none}
.pf-m b::after{content:"";}
.pf-m[title]{cursor:default}

/* readable metrics: number + short label, one clean row */
.pf-ms{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 20px 16px}
.pf-m span{display:inline;font-size:12px;color:var(--ink-3)}
.pf-m{gap:5px}
.pf-m .mi{margin-inline-end:1px}

/* icons above the big numbers of featured projects */
.ft-n .mi,.pf-bs .mi{width:26px;height:26px;fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 10px}
.ft-n .mi.ig,.pf-bs .mi.ig{stroke:#d6336c}
.ft-n .mi:not(.ig),.pf-bs .mi:not(.ig){stroke:var(--accent)}
.ft-n{padding-top:30px}

/* strip: one-line heading, icons over the numbers */
.pf-strip{grid-template-columns:auto minmax(0,1fr)}
.pf-strip-t{padding:28px 40px;gap:16px}
.pf-strip-t h3{font-size:clamp(19px,1.7vw,23px);white-space:nowrap}
.pf-sn{padding:26px 10px}
.pf-sn .mi{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 8px}
.pf-sn b{font-size:clamp(22px,2.3vw,32px)}
@media (max-width:1100px){.pf-strip{grid-template-columns:1fr}.pf-strip-t h3{white-space:normal}}

/* ===== about page ===== */
.ab-hero h1 em{font-style:normal;color:var(--accent)}
.ab-story{padding:56px 48px;display:grid;gap:18px;align-content:center}
.ab-story p{font-size:16.5px;line-height:2.15;color:var(--ink-2)}
.ab-y{display:inline-block;font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-.02em;color:var(--accent);line-height:1.3;margin-bottom:10px}
.ab-tl .why-cell{border-inline-start:1px solid var(--line);border-bottom:0}
.ab-tl .why-cell:first-child{border-inline-start:0}
.ab-stats{grid-template-columns:repeat(4,1fr)}
.ab-av{width:76px;height:76px;margin-top:26px;display:grid;place-items:center;font-size:34px;font-weight:800;color:var(--accent);border:1px solid var(--line-2);background:radial-gradient(circle,rgba(15,110,86,.22) 1px,transparent 1.5px) 0 0/7px 7px,var(--accent-soft)}
.ab .why-cell .more{margin-top:auto;font-size:14.5px;font-weight:700;color:var(--accent)}
.ab .why-cell{display:flex;flex-direction:column;gap:10px}
.ab .why-cell p{flex:0 0 auto}
@media (max-width:960px){
  .ab-story{padding:28px 20px 36px}
  .ab-stats{grid-template-columns:1fr 1fr}
  .ab-stats .sv-stat:nth-child(2n+1){border-inline-start:0}
  .ab-stats .sv-stat{border-bottom:1px solid var(--line)}
  .ab-stats .sv-stat:nth-last-child(-n+2){border-bottom:0}
  .ab-tl{grid-template-columns:1fr}
  .ab-tl .why-cell,.ab-tl .why-cell:first-child{border-inline-start:0;border-bottom:1px solid var(--line)}
  .ab-tl .why-cell:last-child{border-bottom:0}
}

/* single-row grids must not get the mid-row line meant for the 2-row why grid */
.ab-tl::after,.pf-one .why-grid::after,.why-grid.two::after{display:none}


/* ===== blog: list and single post ===== */
.bl-hero h1 em{font-style:normal;color:var(--accent)}
.bl-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}
.bl-meta time{color:var(--ink-3)}
.bl-demo{border:1px dashed var(--line-2);padding:0 8px;color:var(--ink-3)}
.post-cat.wc i{background:#7f54b3}

/* featured post */
.bl-box{padding:0}
.bl-feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);transition:background .25s}
.bl-feat-t{padding:56px 48px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;border-inline-end:1px solid var(--line)}
.bl-feat-t h2{font-size:clamp(24px,2.6vw,34px);font-weight:800;line-height:1.7;transition:color .2s}
.bl-feat-t p{font-size:16px;line-height:2.05;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.bl-feat-i{padding:36px 44px;display:flex;align-items:center;background:radial-gradient(circle,rgba(20,32,27,.07) 1px,transparent 1.4px) 0 0/22px 22px,#fbfcfb}
@media (hover:hover){.bl-feat:hover h2{color:var(--accent)}}

/* image placeholder / real image */
.bl-img{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line);background:#fbfcfb;display:grid;place-items:center;width:100%}
.bl-img.big{aspect-ratio:16/10}
.bl-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.bl-ph{font-size:13px;color:var(--ink-3);background:#fff;padding:2px 12px;border:1px solid var(--line);
  position:relative;z-index:1}
.bl-img:has(.bl-ph){background:linear-gradient(rgba(20,32,27,.04) 1px,transparent 1px) 0 0/100% 22px,linear-gradient(90deg,rgba(20,32,27,.04) 1px,transparent 1px) 0 0/22px 100%,#fbfcfb}

/* grid of posts */
.bl-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0 44px 48px}
.bl-grid::before{content:"";position:absolute;left:50%;top:-1px;width:100vw;height:1px;background:var(--line);transform:translateX(-50%)}
.bl-card[hidden]{display:none}
.bl-card{display:flex;flex-direction:column;border:1px solid var(--line);background:#fff;transition:border-color .2s}
.bl-card .bl-img{border:0;border-bottom:1px solid var(--line)}
.bl-body{padding:18px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.bl-body h3{font-size:18px;font-weight:700;line-height:1.75;transition:color .2s;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-body p{font-size:14.5px;line-height:2;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover){.bl-card:hover{border-color:var(--line-2)}.bl-card:hover h3{color:var(--accent)}.bl-card:hover .bl-img img{transform:scale(1.03)}}
.bl .pf-bar{padding-top:32px}

/* single post */
.bp-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:start}
.bp-art{min-width:0;padding:48px 56px 56px;border-inline-end:1px solid var(--line)}
.bp-h h1{font-size:clamp(28px,3.4vw,42px);font-weight:800;line-height:1.6;margin-top:14px;letter-spacing:-.01em}
.bp-by{display:flex;align-items:center;gap:12px;margin-top:20px}
.bp-av{width:44px;height:44px;display:grid;place-items:center;font-size:19px;font-weight:800;color:var(--accent);border:1px solid var(--line-2);background:radial-gradient(circle,rgba(15,110,86,.22) 1px,transparent 1.5px) 0 0/6px 6px,var(--accent-soft)}
.bp-by span:last-child{display:flex;flex-direction:column;line-height:1.6}
.bp-by b{font-size:15px}.bp-by small{font-size:12.5px;color:var(--ink-3)}
.bp-cover{margin:32px 0 8px;border:1px solid var(--line)}
.bp-cover img{display:block;width:100%;height:auto}
.bp-body{max-width:760px;font-size:16.5px;line-height:2.2}
.bp-body h3{font-size:20px;font-weight:800;margin:32px 0 10px;scroll-margin-top:96px}
.bp-todo{color:var(--ink-3);border:1px dashed var(--line-2);padding:12px 16px;font-size:14px!important}
.bp-share{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding:16px 20px;border:1px solid var(--line);font-size:14.5px;color:var(--ink-2)}
.bp-side{align-self:stretch}
.bp-side-in{position:sticky;top:92px;padding:40px 28px}
.bp-side h4{font-size:13px;font-weight:700;color:var(--ink-3);margin-bottom:12px}
.bp-side ul{list-style:none;padding:0;display:grid;gap:2px;border-inline-start:1px solid var(--line)}
.bp-side li a{display:block;padding:6px 14px;margin-inline-start:-1px;font-size:13.5px;line-height:1.8;color:var(--ink-2);border-inline-start:2px solid transparent;transition:color .15s}
.bp-side li a:hover{color:var(--ink)}
.bp-side li a.on{color:var(--accent);font-weight:700;border-inline-start-color:var(--accent)}
.bp-help{margin-top:30px;padding-top:18px;border-top:1px dashed var(--line-2);display:grid;gap:6px;font-size:13.5px}
.bp-help b{font-size:14px}.bp-help span{color:var(--ink-3)}.bp-help a{color:var(--accent);font-weight:600}
.bl-post .blog2{margin-top:0}

@media (max-width:1100px){.bl-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:960px){
  .bl-feat{grid-template-columns:1fr}
  .bl-feat-t{border-inline-end:0;border-bottom:1px solid var(--line);padding:30px 20px}
  .bl-feat-i{padding:24px 20px;order:-1;border-bottom:1px solid var(--line)}
  .bl-grid{grid-template-columns:1fr;padding:0 20px 36px}
  .bp-layout{grid-template-columns:1fr}
  .bp-art{border-inline-end:0;padding:28px 20px 36px}
  .bp-side{display:none}
}

.bp-body{max-width:none}
.bp-art{padding-inline:48px}

/* ===== blog archive v2: classic list + learning paths ===== */
.ar-hero{border-bottom:1px solid var(--line);background:radial-gradient(900px 300px at 50% -80px,rgba(15,110,86,.1),transparent 70%),#fff}
.ar-hero-in{max-width:760px;margin-inline:auto;text-align:center;padding:72px 24px 60px}
.ar-hero h1{font-size:clamp(30px,4vw,46px);font-weight:800;line-height:1.5}
.ar-hero p{margin-top:12px;font-size:17px;line-height:2;color:var(--ink-2)}

/* learning paths */
.pt-wrap{background:#fff}
.pt-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding:48px 44px 36px;flex-wrap:wrap}
.pt-head h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;line-height:1.7;margin-top:10px}
.pt-head h2 em{font-style:normal;color:var(--accent)}
.pt-head p{max-width:340px;font-size:14.5px;line-height:2;color:var(--ink-2)}
.pt-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.pt-box{display:flex;flex-direction:column;border-inline-start:1px solid var(--line);transition:background .25s}
.pt-box:first-child{border-inline-start:0}
.pt-box header{padding:30px 32px 20px}
.pt-box h3{font-size:19px;font-weight:800;margin-top:10px;line-height:1.7}
.pt-box header p{font-size:13.5px;color:var(--ink-3);margin-top:2px}
.pt-box ol{list-style:none;margin:0;padding:0 32px;position:relative;flex:1}
.pt-box ol::before{content:"";position:absolute;inset-block:14px 14px;inset-inline-end:46px;width:0;border-inline-start:1px dashed var(--line-2)}
.pt-box li a{position:relative;display:flex;align-items:center;gap:14px;padding:11px 0;font-size:14.5px;color:var(--ink);transition:color .2s}
.pt-box li a i{flex:none;width:28px;height:28px;display:grid;place-items:center;font-style:normal;font-size:12.5px;font-weight:700;color:var(--ink-2);background:#fff;border:1px solid var(--line-2);position:relative;z-index:1;transition:border-color .2s,color .2s,background .2s}
.pt-box li a span{flex:1}
.pt-box li a svg{width:16px;height:16px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s,transform .2s}
.pt-box li a:hover{color:var(--accent)}
.pt-box li a:hover i{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.pt-box li a:hover svg{opacity:1;stroke:var(--accent);transform:translateX(-3px)}
.pt-end{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 32px 28px;padding:12px 16px;border:1px solid var(--line-2);font-size:14px;font-weight:700;color:var(--accent);background:linear-gradient(90deg,rgba(232,245,240,.55),rgba(232,245,240,.1));transition:border-color .2s}
.pt-end svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pt-end:hover{border-color:var(--accent)}
.pt-box.wp .pt-end{color:var(--wp);background:linear-gradient(90deg,rgba(232,240,254,.6),rgba(232,240,254,.1))}
.pt-box.ps .pt-end{color:var(--ps);background:linear-gradient(90deg,rgba(253,232,238,.6),rgba(253,232,238,.1))}
.pt-box.wc .pt-end{color:#7f54b3;background:linear-gradient(90deg,rgba(243,236,250,.7),rgba(243,236,250,.1))}

/* archive list */
.ar-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:start}
.ar-main{min-width:0;border-inline-end:1px solid var(--line)}
.ar-top{display:flex;align-items:center;justify-content:space-between;padding:32px 44px 24px;border-bottom:1px solid var(--line)}
.ar-top h2{font-size:22px;font-weight:800}
.ar-row{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;padding:28px 44px;border-bottom:1px solid var(--line)}
.ar-img{display:block}
.ar-img .bl-img{aspect-ratio:3/2}
.ar-t{display:flex;flex-direction:column;gap:8px;justify-content:center}
.ar-t h2{font-size:21px;font-weight:800;line-height:1.7}
.ar-t h2 a{transition:color .2s}
.ar-t h2 a:hover{color:var(--accent)}
.ar-t p{font-size:15px;line-height:2.05;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ar-more{font-size:14px;font-weight:700;color:var(--accent);align-self:flex-start;margin-top:2px}
.bl-meta a.post-cat:hover{color:var(--ink)}
.ar-pg{display:flex;gap:8px;justify-content:center;padding:32px 20px 36px}
.ar-pg a,.ar-pg span{min-width:40px;height:40px;padding-inline:14px;display:grid;place-items:center;border:1px solid var(--line-2);font-size:14.5px;font-weight:600;color:var(--ink-2);transition:border-color .2s,color .2s}
.ar-pg a:hover{border-color:var(--accent);color:var(--accent)}
.ar-pg .cur{background:var(--accent);border-color:var(--accent);color:#fff}
.ar-side-in{position:sticky;top:92px;padding:32px 28px 40px}
.ar-side .dc-search.sm{margin:0 0 28px;max-width:none}
.ar-side h4{font-size:13px;font-weight:700;color:var(--ink-3);margin:0 0 10px}
.ar-cats{list-style:none;padding:0;margin:0 0 28px;border-top:1px solid var(--line)}
.ar-cats li{border-bottom:1px solid var(--line)}
.ar-cats a{display:flex;align-items:center;gap:10px;padding:12px 0;font-size:14.5px;color:var(--ink);transition:color .2s}
.ar-cats a:hover{color:var(--accent)}
.ar-cats .d{width:8px;height:8px;border-radius:2px;background:var(--accent);flex:none}
.ar-cats .d.wp{background:var(--wp)}.ar-cats .d.ps{background:var(--ps)}.ar-cats .d.wc{background:#7f54b3}
.ar-cats span{flex:1}
.ar-cats b{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.ar-help{padding-top:18px;border-top:1px dashed var(--line-2);display:grid;gap:6px;font-size:13.5px}
.ar-help b{font-size:14px}.ar-help span{color:var(--ink-3)}.ar-help a{color:var(--accent);font-weight:600}

@media (max-width:1100px){.pt-grid{grid-template-columns:1fr}.pt-box,.pt-box:first-child{border-inline-start:0;border-bottom:1px solid var(--line)}.pt-box:last-child{border-bottom:0}}
@media (max-width:960px){
  .ar-hero-in{padding:48px 20px 40px}
  .pt-head{padding:32px 20px 24px}
  .pt-box header,.pt-box ol{padding-inline:20px}.pt-end{margin-inline:20px}.pt-box ol::before{inset-inline-end:34px}
  .ar-layout{grid-template-columns:1fr}
  .ar-main{border-inline-end:0}
  .ar-top{padding:24px 20px 18px}
  .ar-row{grid-template-columns:1fr;gap:14px;padding:22px 20px}
  .ar-side{border-top:1px solid var(--line)}
  .ar-side-in{position:static;padding:24px 20px 32px}
}

/* ===== category archive ===== */
.cat-hero .ar-hero-in{padding:48px 24px 52px}
.cat-hero .post-cat{margin-bottom:12px;display:inline-flex}
.cat-crumb{display:flex;align-items:center;justify-content:center;gap:10px;font-size:13.5px;color:var(--ink-3);margin-bottom:22px}
.cat-crumb a:hover{color:var(--ink)}
.cat-crumb i{font-style:normal;color:var(--line-2)}
.cat-crumb span{color:var(--ink-2)}
.pt-grid.one{grid-template-columns:1fr;border-top:0}
.pt-grid.one .pt-box{border-inline-start:0}
.pt-grid.one .pt-box header{padding:32px 44px 14px}
.pt-grid.one .pt-box ol{padding:0 44px;display:grid;grid-template-columns:repeat(2,1fr);column-gap:48px}
.pt-grid.one .pt-box ol::before{display:none}
.pt-grid.one .pt-end{margin:20px 44px 32px}
.ar-cats a.cur{color:var(--accent);font-weight:700}
.ar-cats a.cur b{color:var(--accent)}
.ar-all{display:inline-block;margin:-10px 0 26px;font-size:13.5px;font-weight:700;color:var(--accent)}
@media (max-width:960px){
  .pt-grid.one .pt-box header,.pt-grid.one .pt-box ol{padding-inline:20px}
  .pt-grid.one .pt-box ol{grid-template-columns:1fr}
  .pt-grid.one .pt-end{margin-inline:20px}
}

/* category SEO text */
.cat-prose{padding:48px 48px 56px;display:block;align-content:start}
.cat-prose p{font-size:16px;line-height:2.15;color:var(--ink-2);margin-bottom:14px}
.cat-prose h3{font-size:19px;font-weight:800;margin:28px 0 10px;color:var(--ink)}
.cat-prose ul{padding-inline-start:22px;margin:0 0 14px;display:grid;gap:8px;font-size:15.5px;line-height:2;color:var(--ink-2)}
.cat-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(15,110,86,.35)}
.cat-prose a:hover{text-decoration-color:var(--accent)}
@media (max-width:960px){.cat-prose{padding:28px 20px 36px}}

/* ===== step-by-step path inside an article ===== */
.st-bar{margin:22px 0 4px;border:1px solid var(--line);background:#fff;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 28px;padding:14px 20px}
.st-bar-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.st-lab{font-size:12px;color:var(--ink-3)}
.st-bar-t a{font-size:15px;font-weight:700;color:var(--ink)}
.st-bar-t a:hover{color:var(--accent)}
.st-bar-p{display:flex;align-items:center;gap:14px}
.st-bar-p b{font-size:14px;font-weight:800;color:var(--accent);white-space:nowrap}
.st-seg{display:flex;gap:4px}
.st-seg i{width:26px;height:6px;background:#e6eae8}
.st-seg i.done{background:var(--accent)}
.st-seg i.now{background:repeating-linear-gradient(90deg,var(--accent) 0 3px,#cfe6dc 3px 6px)}
.st-bar.wc .st-bar-p b{color:#7f54b3}.st-bar.wc .st-seg i.done{background:#7f54b3}.st-bar.wc .st-seg i.now{background:repeating-linear-gradient(90deg,#7f54b3 0 3px,#e3d6f0 3px 6px)}
.st-bar.ps .st-bar-p b{color:var(--ps)}.st-bar.ps .st-seg i.done{background:var(--ps)}.st-bar.ps .st-seg i.now{background:repeating-linear-gradient(90deg,var(--ps) 0 3px,#f6cbd8 3px 6px)}

.st-side{margin-bottom:30px;padding-bottom:26px;border-bottom:1px dashed var(--line-2)}
.st-side h4{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:12px;line-height:1.7}
.st-side ol{list-style:none;margin:0;padding:0;position:relative}
.st-side ol::before{content:"";position:absolute;inset-block:14px 14px;inset-inline-end:13px;border-inline-start:1px dashed var(--line-2)}
.st-side li a{position:relative;display:flex;align-items:center;gap:12px;padding:7px 0;font-size:13.5px;line-height:1.7;color:var(--ink-2);transition:color .2s}
.st-side li a i{flex:none;width:26px;height:26px;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;background:#fff;border:1px solid var(--line-2);color:var(--ink-3);position:relative;z-index:1}
.st-side li a i svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.st-side li.done a i{background:var(--accent);border-color:var(--accent)}
.st-side li.now a{color:var(--ink);font-weight:800}
.st-side li.now a i{border-color:var(--accent);color:#fff;background:var(--accent)}
.st-side li a:hover{color:var(--accent)}
.st-side.wc li.done a i,.st-side.wc li.now a i{background:#7f54b3;border-color:#7f54b3}
.st-side.ps li.done a i,.st-side.ps li.now a i{background:var(--ps);border-color:var(--ps)}

.st-nav{margin-top:44px;border:1px solid var(--line);background:#fff}
.st-nav-h{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-3);background:#fcfdfc}
.st-nav-h b{color:var(--ink);font-weight:800}
.st-nav-b{display:grid;grid-template-columns:1fr 1fr}
.st-a{display:flex;flex-direction:column;gap:4px;padding:22px 24px;transition:background .2s}
.st-a+.st-a{border-inline-start:1px solid var(--line)}
.st-a small{font-size:12.5px;color:var(--ink-3)}
.st-a b{display:flex;align-items:center;gap:10px;font-size:16.5px;font-weight:800;line-height:1.7;color:var(--ink);transition:color .2s}
.st-a b svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.st-a.next{background:linear-gradient(90deg,rgba(232,245,240,.55),rgba(232,245,240,.1))}
.st-a.next b{color:var(--accent)}
.st-nav.wc .st-a.next{background:linear-gradient(90deg,rgba(243,236,250,.7),rgba(243,236,250,.1))}.st-nav.wc .st-a.next b{color:#7f54b3}
.st-nav.ps .st-a.next{background:linear-gradient(90deg,rgba(253,232,238,.65),rgba(253,232,238,.1))}.st-nav.ps .st-a.next b{color:var(--ps)}
.st-a.off{opacity:.55}
@media (hover:hover){a.st-a:hover{background:#fcfdfc}a.st-a.next:hover{filter:brightness(.98)}a.st-a.prev:hover b{color:var(--accent)}}
@media (max-width:960px){
  .st-bar{grid-template-columns:1fr}
  .st-nav-b{grid-template-columns:1fr}
  .st-a+.st-a{border-inline-start:0;border-top:1px solid var(--line)}
  .st-side{display:none}
}

/* community strip above the footer */
.cm{overflow-x:clip;background:#fff}
.cm .wrap{padding-inline:0}
.cm-box{position:relative;max-width:var(--w);margin-inline:auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;padding:30px 36px;border-inline:1px solid var(--line);background:#fff}
.cm-box::before,.cm-box::after{content:"";position:absolute;left:50%;width:100vw;height:1px;background:var(--line);transform:translateX(-50%);pointer-events:none}
.cm-box::before{top:0}.cm-box::after{bottom:0}
.cm-ic{width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--line-2);background:radial-gradient(circle,rgba(15,110,86,.22) 1px,transparent 1.5px) 0 0/7px 7px,var(--accent-soft)}
.cm-ic svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cm-t h2{font-size:19px;font-weight:800;line-height:1.7}
.cm-t p{font-size:14.5px;line-height:2;color:var(--ink-2);margin-top:2px}
body:has(.pp) .cm-box,body:has(.dc) .cm-box,body:has(.sv) .cm-box{max-width:1400px}
@media (max-width:960px){
  .cm-box{grid-template-columns:1fr;gap:14px;padding:26px 20px;max-width:none}
  .cm .btn{justify-self:start}
}

/* community strip: same container as the footer, so every vertical line matches */
.cm .wrap{padding-inline:24px}
.cm-box{max-width:none;margin-inline:0}
body:has(.pp) .cm .wrap,body:has(.dc) .cm .wrap,body:has(.sv) .cm .wrap{max-width:1400px}
@media (max-width:960px){.cm .wrap{padding-inline:0}}

/* ===== roadmap ===== */
.rm-box{background:#fff}
.rm-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 36px;border-bottom:1px solid var(--line)}
.rm-filter{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-3)}
.rm-filter select,.rm-f select{height:42px;padding:0 14px;border:1px solid var(--line-2);background:#fff;font:inherit;font-size:14.5px;color:var(--ink);border-radius:0}
.rm-hint{font-size:13px;color:var(--ink-3)}
.rm-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.rm-col{border-inline-start:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.rm-col:first-child{border-inline-start:0}
.rm-col header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px 10px;padding:22px 20px 16px;border-bottom:1px solid var(--line);background:#fcfdfc}
.rm-col header i{width:9px;height:9px;border-radius:2px}
.rm-col header h2{font-size:16px;font-weight:800}
.rm-col header b{font-size:12.5px;font-weight:700;color:var(--ink-3);border:1px solid var(--line-2);min-width:24px;height:22px;display:grid;place-items:center;background:#fff}
.rm-col header p{grid-column:1/-1;font-size:12.5px;color:var(--ink-3);line-height:1.8}
.rm-list{padding:14px;display:grid;gap:12px;align-content:start;flex:1}
.rm-card[hidden],.rm-empty[hidden]{display:none}
.rm-empty{font-size:13px;color:var(--ink-3);text-align:center;padding:20px 0}
.rm-card{border:1px solid var(--line);background:#fff;padding:14px 16px 12px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s}
@media (hover:hover){.rm-card:hover{border-color:var(--line-2)}}
.rm-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.rm-meta .post-cat{font-size:12px}
.rm-type{font-size:11.5px;color:var(--ink-3);border:1px dashed var(--line-2);padding:0 8px;line-height:20px}
.rm-card h3{font-size:15px;font-weight:700;line-height:1.85}
.rm-ver{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--accent);font-weight:600}
.rm-ver svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rm-act{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.rm-vote{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:1px solid var(--line-2);background:#fff;font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.rm-vote svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rm-vote b{font-size:14px;color:var(--ink);font-weight:800}
.rm-vote:hover{border-color:var(--accent);color:var(--accent)}
.rm-vote[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.rm-vote[aria-pressed=true] b{color:var(--accent)}
.rm-bell{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line-2);background:#fff;cursor:pointer;color:var(--ink-3);transition:border-color .2s,color .2s,background .2s}
.rm-bell svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rm-bell:hover,.rm-bell.on{border-color:var(--accent);color:var(--accent)}
.rm-bell.on{background:var(--accent-soft)}
.rm-follow{display:flex;gap:6px}
.rm-follow input{flex:1;min-width:0;height:36px;padding:0 10px;border:1px solid var(--line-2);font:inherit;font-size:13px;direction:ltr;text-align:start}
.rm-follow input:focus{outline:0;border-color:var(--accent)}
.rm-done{font-size:13px;color:var(--accent);font-weight:600}

/* suggestion form */
.rm-sug{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:#fff}
.rm-sug-h{padding:56px 44px;border-inline-end:1px solid var(--line)}
.rm-sug-h h2{font-size:clamp(24px,2.8vw,32px);font-weight:800;line-height:1.65;margin-top:6px}
.rm-sug-h h2 em{font-style:normal;color:var(--accent)}
.rm-sug-h p{margin-top:14px;font-size:15.5px;line-height:2.05;color:var(--ink-2)}
.rm-prom{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px;font-size:14px;color:var(--ink-3)}
.rm-prom li::before{content:"✓";color:var(--accent);margin-inline-end:8px;font-weight:700}
.rm-form{padding:44px;display:grid;gap:18px;align-content:start}
.rm-types{border:0;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap}
.rm-types legend{font-size:14px;color:var(--ink-2);margin-bottom:8px;padding:0}
.rm-types label{cursor:pointer}
.rm-types input{position:absolute;opacity:0;pointer-events:none}
.rm-types span{display:inline-block;padding:9px 16px;border:1px solid var(--line-2);font-size:14px;color:var(--ink-2);transition:border-color .2s,background .2s,color .2s}
.rm-types input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}
.rm-types input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.rm-f{display:grid;gap:7px;font-size:14px;color:var(--ink-2)}
.rm-f input,.rm-f textarea{width:100%;padding:11px 14px;border:1px solid var(--line-2);font:inherit;font-size:15px;color:var(--ink);background:#fff;border-radius:0}
.rm-f input:focus,.rm-f textarea:focus,.rm-f select:focus,.rm-filter select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,110,86,.12)}
.rm-sub{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rm-ok{font-size:14px;color:var(--accent);font-weight:600}

@media (max-width:1100px){.rm-board{grid-template-columns:repeat(2,minmax(0,1fr))}.rm-col:nth-child(3){border-inline-start:0}.rm-col:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:960px){
  .rm-bar{padding:18px 20px}
  .rm-board{grid-template-columns:1fr}
  .rm-col,.rm-col:nth-child(n){border-inline-start:0;border-top:1px solid var(--line)}
  .rm-col:first-child{border-top:0}
  .rm-sug{grid-template-columns:1fr}
  .rm-sug-h{border-inline-end:0;border-bottom:1px solid var(--line);padding:32px 20px}
  .rm-form{padding:28px 20px 34px}
}

.rm-follow[hidden],.rm-ok[hidden]{display:none}

/* roadmap v2: soft column tints, mobile verification, show-more */
.rm-col{--tint:transparent;--bar:var(--line)}
.rm-col[data-col=review]{--tint:rgba(100,116,139,.045);--bar:#94a3b8}
.rm-col[data-col=plan]{--tint:rgba(37,99,235,.045);--bar:#6b95e8}
.rm-col[data-col=build]{--tint:rgba(217,98,43,.05);--bar:#e29468}
.rm-col[data-col=done]{--tint:rgba(15,110,86,.055);--bar:#5fae96}
.rm-col header{background:linear-gradient(180deg,var(--tint),rgba(255,255,255,0) 130%);border-top:2px solid var(--bar);margin-top:-1px}
.rm-col .rm-list{background:linear-gradient(180deg,var(--tint),rgba(255,255,255,0) 360px)}
.rm-col[data-col=review] header h2{color:#475569}.rm-col[data-col=plan] header h2{color:#1d4ed8}
.rm-col[data-col=build] header h2{color:#c2410c}.rm-col[data-col=done] header h2{color:var(--accent)}
.rm-bar{gap:14px 24px}
.rm-who{margin-inline-start:auto;font-size:13px;color:var(--ink-2);display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);padding:5px 12px;background:#fff}
.rm-who b{font-weight:700;color:var(--ink)}
.rm-who button{border:0;background:none;color:var(--accent);font:inherit;font-size:13px;cursor:pointer;font-weight:600}
.rm-hint{font-size:12.5px;color:var(--ink-3);flex-basis:100%}
.rm-bell{width:auto;padding:0 11px;gap:6px;display:inline-flex;align-items:center;font:inherit;font-size:12.5px}
.rm-bell span{font-size:12.5px}
.rm-bell[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.rm-more{margin-top:2px;height:38px;border:1px dashed var(--line-2);background:#fff;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:border-color .2s,color .2s}
.rm-more:hover{border-color:var(--accent);color:var(--accent)}
.rm-more[hidden]{display:none}
.rm-f small{font-size:12.5px;color:var(--ink-3);line-height:1.9}
.rm-sim{border:1px dashed var(--line-2);padding:12px 14px;display:grid;gap:6px;background:#fbfcfb;font-size:13.5px}
.rm-sim[hidden]{display:none}
.rm-sim b{font-weight:600;color:var(--ink-2);font-size:13px}
.rm-sim a{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--line);color:var(--ink)}
.rm-sim a:hover{color:var(--accent)}
.rm-sim small{color:var(--ink-3);white-space:nowrap}

/* modal */
.rm-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px}
.rm-modal[hidden]{display:none}
.rm-modal-bg{position:absolute;inset:0;background:rgba(20,32,27,.35);backdrop-filter:blur(2px)}
.rm-dlg{position:relative;width:min(420px,100%);background:#fff;border:1px solid var(--line-2);padding:36px 32px 30px;box-shadow:0 30px 60px -30px rgba(20,32,27,.5)}
.rm-dlg h2{font-size:21px;font-weight:800;line-height:1.7}
.rm-dsub{font-size:14px;line-height:2;color:var(--ink-2);margin:6px 0 20px}
.rm-x{position:absolute;top:10px;inset-inline-start:10px;width:36px;height:36px;border:0;background:none;font-size:26px;line-height:1;color:var(--ink-3);cursor:pointer}
.rm-x:hover{color:var(--ink)}
.rm-step{display:grid;gap:14px}
.rm-step[hidden]{display:none}
.rm-step label{display:grid;gap:7px;font-size:14px;color:var(--ink-2)}
.rm-step input{height:48px;padding:0 14px;border:1px solid var(--line-2);font:inherit;font-size:18px;letter-spacing:.06em;text-align:start;border-radius:0}
.rm-step input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,110,86,.12)}
.rm-code{letter-spacing:.35em!important;text-align:center!important}
.rm-err{font-size:13px;color:#c0392b}
.rm-err[hidden]{display:none}
.rm-resend,.rm-edit{border:0;background:none;font:inherit;font-size:13.5px;color:var(--accent);font-weight:600;cursor:pointer;padding:4px 0}
.rm-resend:disabled{color:var(--ink-3);cursor:default}
.rm-edit{color:var(--ink-3);font-weight:500}

.rm-who[hidden]{display:none}

.rm .ar-hero h1 em{font-style:normal;color:var(--accent)}

/* products dropdown (desktop) */
.nav-dd{position:relative}
.nav-dd-t{display:inline-flex;align-items:center;gap:2px}
.nav-dd-t .chev{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);transition:transform .2s}
.nav-dd-t[aria-current]{color:var(--ink);background:var(--bg-soft)}
.dd{display:none}
@media (min-width:961px){
  .nav{overflow:visible}
  .dd{display:block;position:absolute;top:calc(100% + 10px);inset-inline-start:-12px;width:640px;background:#fff;border:1px solid var(--line-2);box-shadow:0 24px 48px -24px rgba(20,32,27,.35);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility 0s linear .18s;z-index:60}
  .dd::before{content:"";position:absolute;inset-inline:0;top:-14px;height:14px}
  .nav-dd:hover .dd,.nav-dd:focus-within .dd{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nav-dd:hover .nav-dd-t,.nav-dd:focus-within .nav-dd-t{color:var(--ink);background:var(--bg-soft)}
  .nav-dd:hover .chev,.nav-dd:focus-within .chev{transform:rotate(-90deg)}
}
.dd-cols{display:grid;grid-template-columns:repeat(3,1fr)}
.dd-col{padding:22px 22px 16px;border-inline-start:1px solid var(--line)}
.dd-col:first-child{border-inline-start:0}
.dd-col h4{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--ink);margin-bottom:10px}
.dd-col h4 .d{width:8px;height:8px;border-radius:2px;background:var(--accent)}
.dd-col h4 .d.wp{background:var(--wp)}.dd-col h4 .d.ps{background:var(--ps)}
.dd-col ul{list-style:none;padding:0;margin:0}
.dd-col li a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;font-size:14.5px;color:var(--ink-2);border-top:1px solid var(--line);transition:color .15s}
.dd-col li:first-child a{border-top:0}
.dd-col li a:hover{color:var(--accent)}
.dd-col li em{font-style:normal;font-size:11px;font-weight:700;padding:0 7px;line-height:19px;border:1px solid var(--line-2);color:var(--ink-3)}
.dd-col li em.free{color:var(--accent);border-color:rgba(15,110,86,.3);background:var(--accent-soft)}
.dd-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);background:#fcfdfc}
.dd-part{display:flex;flex-direction:column;gap:1px;padding:14px 22px;transition:background .15s;flex:1}
.dd-part b{font-size:14.5px;font-weight:800;color:var(--ink);transition:color .15s}
.dd-part span{font-size:12.5px;color:var(--ink-3)}
.dd-part:hover b{color:var(--accent)}
.dd-all{padding:14px 22px;font-size:13.5px;font-weight:700;color:var(--accent);border-inline-start:1px solid var(--line);align-self:stretch;display:flex;align-items:center}
.dd-all:hover{background:var(--accent-soft)}

/* products dropdown v2: calm, spacious, no badges */
@media (min-width:961px){
  .dd{width:700px;inset-inline-start:-40px;border-radius:0;box-shadow:0 30px 60px -28px rgba(20,32,27,.38),0 0 0 1px rgba(20,32,27,.03)}
}
.dd-cols{display:grid;grid-template-columns:repeat(3,1fr);padding:10px 8px 6px}
.dd-col{padding:14px 10px 10px;border:0}
.dd-col h4{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--ink-3);margin:0 8px 8px;letter-spacing:0}
.dd-col h4 svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dd-col:nth-child(1) h4 svg{stroke:var(--wp)}.dd-col:nth-child(2) h4 svg{stroke:var(--ps)}
.dd-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.dd-col li a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:0;border-radius:0;transition:background .15s}
.dd-col li:first-child a{border:0}
.dd-col li a b{font-size:14.5px;font-weight:700;color:var(--ink);transition:color .15s}
.dd-col li a span{font-size:12.5px;line-height:1.7;color:var(--ink-3)}
.dd-col li a:hover{background:var(--bg-soft)}
.dd-col li a:hover b{color:var(--accent)}
.dd-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 8px 8px;border-top:1px solid var(--line);background:#fcfdfc}
.dd-part{display:flex;align-items:center;gap:12px;padding:10px 12px;flex:1;transition:background .15s}
.dd-part i{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line-2);background:radial-gradient(circle,rgba(15,110,86,.22) 1px,transparent 1.5px) 0 0/6px 6px,var(--accent-soft);flex:none}
.dd-part i svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dd-part span{display:flex;flex-direction:column;gap:1px}
.dd-part b{font-size:14.5px;font-weight:700;color:var(--ink)}
.dd-part small{font-size:12.5px;color:var(--ink-3)}
.dd-part:hover{background:var(--bg-soft)}
.dd-part:hover b{color:var(--accent)}
.dd-all{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;font-size:13.5px;font-weight:700;color:var(--accent);border:0;align-self:center;white-space:nowrap}
.dd-all .go{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.dd-all:hover{background:var(--accent-soft)}
.dd-all:hover .go{transform:translateX(-3px)}

/* dropdown: undo inherited .nav a styles, align to start */
.nav .dd a{border-radius:0;white-space:normal;text-align:start;color:inherit}
.nav .dd .dd-col li a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px}
.nav .dd .dd-col li a:hover{background:var(--bg-soft)}
.nav .dd .dd-col li a b{color:var(--ink)}
.nav .dd .dd-col li a:hover b{color:var(--accent)}
.nav .dd .dd-col li a span{color:var(--ink-3)}
.nav .dd .dd-part{flex-direction:row;align-items:center;gap:12px;padding:10px 12px;flex:1}
.nav .dd .dd-part:hover{background:var(--bg-soft)}
.nav .dd .dd-all{color:var(--accent);padding:10px 14px}
.nav .dd .dd-all:hover{background:var(--accent-soft)}
.dd{text-align:start}

/* dropdown v3: full-width mega panel, opens flush under the header line, hairline grid like the rest of the theme */
@media (min-width:961px){
  .nav-dd{position:static}
  .dd{position:absolute;top:100%;inset-inline:0;left:0;right:0;width:auto;border:0;border-bottom:1px solid var(--line);box-shadow:0 26px 40px -30px rgba(20,32,27,.22);background:#fff;transform:translateY(-4px);transition:opacity .16s,transform .16s,visibility 0s linear .16s}
  .dd::before{display:none}
  .nav-dd:hover .dd,.nav-dd:focus-within .dd{transform:none}
}
.dd-wrap{max-width:var(--w);margin-inline:auto;padding-inline:24px}
.dd-in{border-inline:1px solid var(--line)}
.dd-cols{display:grid;grid-template-columns:repeat(4,1fr);padding:0}
.dd-col{padding:0;border:0;border-inline-start:1px solid var(--line);min-width:0}
.dd-col:first-child{border-inline-start:0}
.dd-col h4{display:flex;align-items:center;gap:10px;margin:0;padding:18px 24px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:800;color:var(--ink);background:#fcfdfc}
.dd-col h4 svg{width:19px;height:19px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dd-col:nth-child(1) h4 svg{stroke:var(--wp)}.dd-col:nth-child(2) h4 svg{stroke:var(--ps)}
.dd-col ul{list-style:none;margin:0;padding:0;display:block}
.nav .dd .dd-col li a{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:16px 24px;border:0;border-top:1px solid var(--line);border-radius:0;transition:background .2s}
.nav .dd .dd-col li:first-child a{border-top:0}
.nav .dd .dd-col li a b{font-size:15px;font-weight:700;color:var(--ink)}
.nav .dd .dd-col li a span{font-size:13px;line-height:1.8;color:var(--ink-3)}
.nav .dd .dd-col li a:hover{background:linear-gradient(270deg,rgba(232,245,240,.6),rgba(232,245,240,0))}
.nav .dd .dd-col li a:hover b{color:var(--accent)}
/* participation column */
.dd-pc{background:radial-gradient(circle,rgba(20,32,27,.07) 1px,transparent 1.4px) 0 0/18px 18px,#fff}
.dd-pc h4{background:rgba(255,255,255,.85)}
.dd-pc-b{padding:18px 24px 22px;display:grid;gap:14px;align-content:start}
.dd-pc-b p{font-size:13.5px;line-height:2;color:var(--ink-2)}
.nav .dd .dd-cta{display:inline-flex;align-items:center;gap:8px;align-self:start;width:fit-content;padding:9px 16px;border:1px solid var(--line-2);background:#fff;font-size:13.5px;font-weight:700;color:var(--accent);transition:border-color .2s,background .2s}
.nav .dd .dd-cta:hover{border-color:var(--accent);background:var(--accent-soft)}
.dd .go{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.nav .dd a:hover .go{transform:translateX(-3px)}
/* footer line of the panel */
.dd-foot{display:flex;border-top:1px solid var(--line);background:#fcfdfc}
.nav .dd .dd-all{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;font-size:13.5px;font-weight:700;color:var(--accent);background:none;flex:none}
.nav .dd .dd-all:hover{background:var(--accent-soft)}

/* the panel draws its own top line, so the header line stays visible while it is open */
@media (min-width:961px){.dd{border-top:1px solid var(--line)}}

/* ===== SMS product page: plans ===== */
.pl-box{background:#fff}
.pl-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.pl-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:40px 36px 36px;border-inline-start:1px solid var(--line)}
.pl-card:first-child{border-inline-start:0}
.pl-card.hot{background:linear-gradient(180deg,rgba(232,245,240,.55),rgba(232,245,240,.1) 70%)}
.pl-rib{position:absolute;top:0;inset-inline-end:0;font-size:12px;font-weight:700;color:#fff;background:var(--accent);padding:4px 14px}
.pl-card h3{font-size:21px;font-weight:800}
.pl-for{font-size:13.5px;color:var(--ink-3);line-height:1.9;min-height:3.8em}
.pl-price{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.pl-price b{font-size:36px;font-weight:800;letter-spacing:-.02em;line-height:1.3}
.pl-price small{font-size:14px;color:var(--ink-3)}
.pl-cyc{font-size:13px;color:var(--ink-3);padding-bottom:18px;border-bottom:1px dashed var(--line-2)}
.pl-card ul{list-style:none;margin:16px 0 22px;padding:0;display:grid;gap:12px;flex:1}
.pl-card li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.9;color:var(--ink-2)}
.pl-card li svg{flex:none;width:22px;height:22px;margin-top:2px;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;padding:3px;border-radius:50%;background:var(--accent-soft);box-sizing:border-box}
.pl-card .btn{width:100%}
.sms .sv-note{border-top:1px solid var(--line);padding:18px 36px;font-size:14px;line-height:2;color:var(--ink-3);background:#fcfdfc}
.sms .why-sub{max-width:760px}
@media (max-width:960px){
  .pl-grid{grid-template-columns:1fr}
  .pl-card,.pl-card:first-child{border-inline-start:0;border-bottom:1px solid var(--line);padding:28px 20px}
  .pl-card:last-child{border-bottom:0}
  .pl-for{min-height:0}
  .sms .sv-note{padding:16px 20px}
}

/* ===== SMS: eligibility rule ===== */
.sm-rule{display:grid;grid-template-columns:1.2fr 1fr;background:#fff}
.sm-yes{padding:48px 44px;border-inline-end:1px solid var(--line);background:linear-gradient(180deg,rgba(232,245,240,.6),rgba(232,245,240,.12) 80%)}
.sm-no{padding:48px 40px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.sm-ic{width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--line-2);background:radial-gradient(circle,rgba(15,110,86,.22) 1px,transparent 1.5px) 0 0/7px 7px,var(--accent-soft);margin-bottom:14px}
.sm-ic svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sm-ic.mute{background:radial-gradient(circle,rgba(20,32,27,.12) 1px,transparent 1.5px) 0 0/7px 7px,#f6f7f6}
.sm-ic.mute svg{stroke:var(--ink-3)}
.sm-rule h2{font-size:clamp(20px,2vw,26px);font-weight:800;line-height:1.7}
.sm-rule p{font-size:15.5px;line-height:2.05;color:var(--ink-2);max-width:520px}
.sm-yes ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.sm-yes li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--ink)}
.sm-yes li svg.t{flex:none;width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;padding:3px;border-radius:50%;background:#fff;border:1px solid rgba(15,110,86,.3);box-sizing:border-box}
@media (max-width:960px){
  .sm-rule{grid-template-columns:1fr}
  .sm-yes{border-inline-end:0;border-bottom:1px solid var(--line);padding:30px 20px}
  .sm-no{padding:30px 20px}
}

.sv-hero h1 em{font-style:normal;color:var(--accent)}

/* ===== managed server page ===== */
.sv-scope{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);background:#fff}
.sv-scope-h{padding:44px 40px;border-inline-end:1px solid var(--line);background:linear-gradient(180deg,rgba(232,245,240,.5),rgba(232,245,240,.1))}
.sv-scope-h h2{font-size:clamp(20px,2vw,26px);font-weight:800;line-height:1.7}
.sv-scope-b{padding:40px 44px;display:grid;gap:14px;align-content:center}
.sv-scope-b p{font-size:15.5px;line-height:2.1;color:var(--ink-2)}
.sv-scope-b b{font-weight:800;color:var(--ink);letter-spacing:.04em;background:var(--accent-soft);padding:0 8px}
.srv .why-grid.five{grid-template-columns:repeat(5,1fr)}
.srv .why-grid.five .why-cell{border-inline-start:1px solid var(--line);border-bottom:0;padding:34px 24px 38px}
.srv .why-grid.five .why-cell:first-child{border-inline-start:0}
.srv .why-grid.five::after{display:none}
@media (max-width:1100px){.srv .why-grid.five{grid-template-columns:1fr 1fr}.srv .why-grid.five .why-cell{border-bottom:1px solid var(--line)}.srv .why-grid.five .why-cell:nth-child(2n+1){border-inline-start:0}}
@media (max-width:960px){
  .sv-scope{grid-template-columns:1fr}
  .sv-scope-h{border-inline-end:0;border-bottom:1px solid var(--line);padding:28px 20px}
  .sv-scope-b{padding:26px 20px}
}
@media (max-width:600px){.srv .why-grid.five{grid-template-columns:1fr}.srv .why-grid.five .why-cell{border-inline-start:0}}

/* ===== contact page ===== */
.ct .ar-hero h1 em{font-style:normal;color:var(--accent)}
.ct-box{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:#fff}
.ct-side{border-inline-end:1px solid var(--line);display:flex;flex-direction:column}
.ct-lead{padding:36px 36px 26px;font-size:15.5px;line-height:2.1;color:var(--ink-2)}
.ct-ms{border-top:1px solid var(--line)}
.ct-m{display:flex;align-items:center;gap:16px;padding:20px 36px;border-bottom:1px solid var(--line);transition:background .2s}
.ct-ic{flex:none;width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line-2);background:radial-gradient(circle,rgba(15,110,86,.22) 1px,transparent 1.5px) 0 0/7px 7px,var(--accent-soft)}
.ct-ic svg{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ct-t{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.ct-t small{font-size:12.5px;color:var(--ink-3)}
.ct-t b{font-size:19px;font-weight:800;letter-spacing:.02em;color:var(--ink);transition:color .2s}
.ct-t em{font-style:normal;font-size:13px;color:var(--ink-3);line-height:1.8}
.ct-m>svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s,stroke .2s}
.ct-m:hover{background:linear-gradient(270deg,rgba(232,245,240,.6),rgba(232,245,240,0))}
.ct-m:hover .ct-t b{color:var(--accent)}
.ct-m:hover>svg{stroke:var(--accent);transform:translateX(-4px)}
.ct-hours{display:flex;align-items:center;gap:14px;padding:22px 36px;margin-top:auto;font-size:14px;color:var(--ink-2)}
.ct-hours svg{flex:none;width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ct-hours span{display:flex;flex-direction:column;line-height:1.8}
.ct-hours b{font-size:14.5px;color:var(--ink)}
.ct-form{padding:40px 44px 44px;display:grid;gap:18px;align-content:start}
.ct-form h2{font-size:24px;font-weight:800}
.ct-sub{margin-top:-10px;font-size:14.5px;color:var(--ink-3)}
.ct-err{margin:0}
.ct-paths{background:#fff}
.ct-paths-h{padding:44px 36px 30px;text-align:center}
.ct-paths-h h2{font-size:clamp(22px,2.6vw,30px);font-weight:800}
.ct-paths-h p{margin-top:8px;color:var(--ink-2);font-size:15px}
.ct-pl{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.ct-p{display:flex;align-items:center;gap:16px;padding:26px 32px;border-inline-start:1px solid var(--line);transition:background .2s}
.ct-p:first-child{border-inline-start:0}
.ct-p span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:3px}
.ct-p b{font-size:16px;font-weight:800;transition:color .2s}
.ct-p small{font-size:13.5px;line-height:1.9;color:var(--ink-3)}
.ct-p>svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s,stroke .2s}
.ct-p:hover{background:linear-gradient(270deg,rgba(232,245,240,.5),rgba(232,245,240,0))}
.ct-p:hover b{color:var(--accent)}
.ct-p:hover>svg{stroke:var(--accent);transform:translateX(-4px)}
@media (max-width:960px){
  .ct-box{grid-template-columns:1fr}
  .ct-side{border-inline-end:0;border-bottom:1px solid var(--line)}
  .ct-lead,.ct-hours{padding-inline:20px}
  .ct-m{padding:18px 20px}
  .ct-form{padding:28px 20px 34px}
  .ct-pl{grid-template-columns:1fr}
  .ct-p,.ct-p:first-child{border-inline-start:0;border-bottom:1px solid var(--line);padding:20px}
  .ct-p:last-child{border-bottom:0}
  .ct-paths-h{padding:32px 20px 22px}
}

.req{font-style:normal;color:#c0392b;margin-inline-start:2px}
.ct-form .rm-f{gap:8px}

/* ===== floating call button + consultation modal ===== */
.fab{position:fixed;z-index:40;inset-inline-start:20px;bottom:20px;height:56px;min-width:56px;display:inline-flex;align-items:center;justify-content:center;gap:0;padding:0;border:1px solid var(--accent-d);background:var(--accent);color:#fff;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;box-shadow:0 14px 28px -12px rgba(15,110,86,.55);transition:background .2s,padding .25s,gap .25s}
.fab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fab span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .25s}
.fab:hover,.fab:focus-visible{background:var(--accent-d);padding-inline:18px 20px;gap:10px}
.fab:hover span,.fab:focus-visible span{max-width:160px}
.fab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){.fab::after{content:"";position:absolute;inset:-1px;border:1px solid var(--accent);animation:fabp 2.8s ease-out infinite;pointer-events:none}@keyframes fabp{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.35);opacity:0}}}
@media (max-width:960px){.fab{inset-inline-start:14px;bottom:14px;height:52px;min-width:52px}.fab:hover{padding:0;gap:0}.fab:hover span{max-width:0}}
body.has-mbuy .fab{bottom:86px}

.cm-modal{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:16px;opacity:0;transition:opacity .2s}
.cm-modal.on{opacity:1}
.cm-modal[hidden]{display:none}
.cm-bg{position:absolute;inset:0;background:rgba(20,32,27,.35);backdrop-filter:blur(2px)}
.cm-dlg{position:relative;width:min(440px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;border:1px solid var(--line-2);padding:34px 30px 28px;outline:0;box-shadow:0 30px 60px -30px rgba(20,32,27,.5);transform:translateY(8px);transition:transform .25s}
.cm-modal.on .cm-dlg{transform:none}
.cm-x{position:absolute;top:10px;inset-inline-start:10px;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line-2);background:#fff;cursor:pointer;color:var(--ink)}
.cm-x:hover{border-color:var(--ink)}
.cm-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.cm-dlg h2{font-size:22px;font-weight:800;margin-top:6px}
.cm-sub{font-size:14px;color:var(--ink-3);margin:2px 0 16px}
.cm-tels{display:grid;border:1px solid var(--line)}
.cm-tels a{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;font-size:18px;font-weight:800;letter-spacing:.03em;color:var(--ink);transition:background .2s,color .2s}
.cm-tels a+a{border-top:1px solid var(--line)}
.cm-tels a:hover{background:var(--accent-soft);color:var(--accent)}
.cm-tels svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cm-or{display:flex;align-items:center;gap:12px;margin:20px 0 16px;font-size:12.5px;color:var(--ink-3)}
.cm-or::before,.cm-or::after{content:"";flex:1;height:1px;background:var(--line)}
.cm-form{display:grid;gap:16px}
.cm-form[hidden],.cm-ok[hidden],.cm-err[hidden]{display:none}
.cm-form>label{display:grid;gap:7px;font-size:14px;font-weight:600;color:var(--ink)}
.cm-form input[type=text],.cm-form input[type=tel]{height:48px;padding:0 14px;border:1px solid var(--line-2);border-radius:0;font:inherit;font-size:16px;color:var(--ink);background:#fff;-webkit-appearance:none;appearance:none}
.cm-form input[type=text]:focus,.cm-form input[type=tel]:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,110,86,.12)}
.cm-pref{border:0;padding:0;margin:0;display:grid;gap:8px}
.cm-pref legend{font-size:14px;font-weight:600;margin-bottom:8px;padding:0}
.cm-pref label{cursor:pointer}
.cm-pref input{position:absolute;opacity:0;pointer-events:none}
.cm-pref span{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line-2);font-size:14.5px;color:var(--ink-2);transition:border-color .2s,background .2s,color .2s}
.cm-pref span::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-2);background:#fff;transition:border-color .2s,box-shadow .2s}
.cm-pref input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);font-weight:600}
.cm-pref input:checked+span::before{border-color:var(--accent);box-shadow:inset 0 0 0 3.5px #fff;background:var(--accent)}
.cm-pref input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.cm-err{font-size:13px;color:#c0392b;line-height:1.9}
.cm-form .btn{width:100%}
.cm-ok{display:grid;gap:10px;text-align:center;padding:30px 0 6px}
.cm-ok b{font-size:19px;color:var(--accent)}
.cm-ok span{font-size:14.5px;color:var(--ink-2)}
.req{font-style:normal;color:#c0392b}
@media (max-width:520px){.cm-dlg{padding:30px 20px 22px}}
@media (prefers-reduced-motion:reduce){.cm-modal,.cm-dlg,.fab,.fab span{transition:none}}

.fab{inset-inline-start:auto;left:20px}
@media (max-width:960px){.fab{left:14px}}

/* ===== rich content inside a blog post ===== */
.bp-demo{border:1px dashed var(--line-2);padding:12px 16px;font-size:13.5px;line-height:1.9;color:var(--ink-3);margin-bottom:26px;background:#fcfdfc}

/* key points */
.bp-key{border:1px solid var(--line);border-inline-start:3px solid var(--accent);background:linear-gradient(90deg,rgba(232,245,240,.55),rgba(232,245,240,.1));padding:20px 24px;margin:0 0 28px}
.bp-key h3{font-size:16px;font-weight:800;margin:0 0 8px}
.bp-key ul{margin:0;padding-inline-start:20px;display:grid;gap:6px;font-size:15.5px;line-height:2}
.bp-read{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--ink-3)}
.bp-read svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* audio / podcast */
.au{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border:1px solid var(--line);background:#fff;padding:16px 20px;margin:0 0 28px}
.au-play{flex:none;width:52px;height:52px;display:grid;place-items:center;background:var(--accent);border:1px solid var(--accent-d);color:#fff;cursor:pointer;transition:background .2s}
.au-play:hover{background:var(--accent-d)}
.au-play svg{width:22px;height:22px;fill:currentColor}
.au-play .i-pause,.au.on .au-play .i-play{display:none}
.au.on .au-play .i-pause{display:block}
.au-m{flex:1;min-width:220px;display:grid;gap:8px}
.au-t{display:flex;flex-direction:column;gap:1px;line-height:1.7}
.au-t b{font-size:15.5px}.au-t span{font-size:12.5px;color:var(--ink-3)}
.au-bar{display:grid;gap:4px}
.au-rng{--p:0%;width:100%;height:6px;margin:0;-webkit-appearance:none;appearance:none;background:linear-gradient(to left,var(--accent) var(--p),#e6eae8 var(--p));cursor:pointer;border-radius:0}
.au-rng::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:#fff;border:2px solid var(--accent);border-radius:50%}
.au-rng::-moz-range-thumb{width:10px;height:10px;background:#fff;border:2px solid var(--accent);border-radius:50%}
.au-times{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.au-ctl{display:flex;gap:6px}
.au-ctl button{height:36px;min-width:46px;padding:0 10px;border:1px solid var(--line-2);background:#fff;font:inherit;font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer;transition:border-color .2s,color .2s}
.au-ctl button:hover{border-color:var(--accent);color:var(--accent)}

/* video */
.bp-video{position:relative;aspect-ratio:16/9;border:1px solid var(--line);background:#14201b;margin:20px 0 28px;overflow:hidden}
.bp-vposter,.bp-vposter img,.bp-video iframe,.bp-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.bp-vposter img{object-fit:cover;opacity:.78}
.bp-vplay{position:absolute;inset-inline:0;top:50%;margin:-34px auto 0;width:68px;height:68px;display:grid;place-items:center;background:var(--accent);border:1px solid rgba(255,255,255,.4);color:#fff;cursor:pointer;transition:transform .2s,background .2s}
.bp-vplay:hover{transform:scale(1.06);background:var(--accent-d)}
.bp-vplay svg{width:28px;height:28px;fill:currentColor}
.bp-vlab{position:absolute;bottom:12px;inset-inline-start:12px;font-size:12.5px;color:#fff;background:rgba(20,32,27,.7);padding:3px 10px}
.bp-vmsg{position:absolute;inset:auto 0 0;margin:0;padding:12px 16px;background:rgba(255,255,255,.95);font-size:13.5px;color:var(--ink-2);text-align:center}

/* images */
.bp-fig{margin:28px auto;text-align:center;max-width:760px}
.bp-fig img{display:block;margin:0 auto;max-width:100%;height:auto;border:1px solid var(--line);cursor:zoom-in}
.bp-fig figcaption{margin-top:10px;font-size:13.5px;line-height:1.9;color:var(--ink-3)}
.bp-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px auto;max-width:900px}
.bp-pair .bp-fig{margin:0}
.bp-lb{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:24px;background:rgba(20,32,27,.82);cursor:zoom-out}
.bp-lb[hidden]{display:none}
.bp-lb img{max-width:min(1200px,100%);max-height:100%;border:1px solid rgba(255,255,255,.3);background:#fff}

/* quote */
.bp-quote{margin:30px 0;padding:6px 26px;border-inline-start:3px solid var(--accent)}
.bp-quote p{font-size:clamp(19px,2vw,23px);line-height:2.1;font-weight:700;color:var(--ink);margin:0}
.bp-quote cite{display:block;margin-top:6px;font-style:normal;font-size:13.5px;color:var(--ink-3)}

/* steps */
.bp-steps{list-style:none;counter-reset:s;margin:22px 0;padding:0;border:1px solid var(--line)}
.bp-steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;padding:18px 22px;border-bottom:1px solid var(--line)}
.bp-steps li:last-child{border-bottom:0}
.bp-steps li::before{content:counter(s,persian);grid-row:1/3;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--accent-soft);font-size:16px;font-weight:800;color:var(--accent)}
.bp-steps b{font-size:16.5px;line-height:1.8}
.bp-steps span{font-size:14.5px;line-height:2;color:var(--ink-2)}

/* code */
.bp-code{margin:22px 0;border:1px solid var(--line-2);background:#0f1a15;color:#d8e6df}
.bp-code-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.1);background:#14221c;font-size:12.5px;color:#9db4a9}
.bp-copy{height:28px;padding:0 12px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#d8e6df;font:inherit;font-size:12.5px;cursor:pointer;transition:background .2s,border-color .2s}
.bp-copy:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
.bp-copy.done{background:var(--accent);border-color:var(--accent);color:#fff}
.bp-code pre{margin:0;padding:16px 18px;overflow:auto;font:13.5px/1.9 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:left;direction:ltr;tab-size:2}
.bp-code code{font:inherit;display:block;white-space:pre}
.bp-code .c{color:#6d8a7c}.bp-code .k{color:#8ad0b0}.bp-code .s{color:#e8c28a}.bp-code .p{color:#6d8a7c;user-select:none}
.bp-code pre.ln{counter-reset:l}
.bp-code pre.ln code{counter-reset:l}
.bp-ic{font:13.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;direction:ltr;unicode-bidi:isolate;background:var(--bg-soft);border:1px solid var(--line);padding:1px 7px}
kbd{font:12.5px ui-monospace,Menlo,Consolas,monospace;direction:ltr;unicode-bidi:isolate;display:inline-block;padding:1px 8px;border:1px solid var(--line-2);border-bottom-width:2px;background:#fff}

/* callouts */
.bp-co{margin:20px 0;padding:14px 20px;border:1px solid var(--line);border-inline-start:3px solid var(--c,var(--accent));background:linear-gradient(90deg,var(--cs,rgba(232,245,240,.55)),rgba(255,255,255,0))}
.bp-co b{display:block;font-size:14px;color:var(--c,var(--accent));margin-bottom:2px}
.bp-co p{margin:0;font-size:15.5px;line-height:2}
.bp-co.info{--c:#2563eb;--cs:rgba(232,240,254,.7)}
.bp-co.tip{--c:#0f6e56;--cs:rgba(232,245,240,.7)}
.bp-co.warn{--c:#c2410c;--cs:rgba(253,238,229,.8)}
.bp-co.bad{--c:#c0392b;--cs:rgba(253,236,235,.8)}

/* table */
.bp-tbl{margin:22px 0;overflow-x:auto;border:1px solid var(--line)}
.bp-tbl table{width:100%;border-collapse:collapse;font-size:15px}
.bp-tbl th{background:#fcfdfc;text-align:start;font-weight:800;padding:12px 18px;border-bottom:1px solid var(--line)}
.bp-tbl td{padding:12px 18px;border-top:1px solid var(--line);color:var(--ink-2)}
.bp-tbl tbody tr:first-child td{border-top:0}
.bp-tbl td+td,.bp-tbl th+th{border-inline-start:1px solid var(--line)}

/* checklist & download */
.bp-check{list-style:none;padding:0;margin:20px 0;display:grid;gap:10px}
.bp-check li{display:flex;align-items:center;gap:12px;font-size:15.5px}
.bp-check li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.500l2.500 2.500L13 6.500' fill='none' stroke='%230f6e56' stroke-width='1.800' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.bp-dl{display:flex;align-items:center;gap:16px;margin:22px 0;padding:14px 18px;border:1px solid var(--line);transition:border-color .2s,background .2s}
.bp-dl:hover{border-color:var(--accent);background:#fcfdfc}
.bp-dl-i{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-2);background:radial-gradient(circle,rgba(15,110,86,.22) 1px,transparent 1.5px) 0 0/7px 7px,var(--accent-soft)}
.bp-dl-i svg{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bp-dl>span:nth-child(2){flex:1;display:flex;flex-direction:column;line-height:1.7}
.bp-dl b{font-size:15.5px}.bp-dl small{font-size:12.5px;color:var(--ink-3)}
.bp-dl .go{flex:none;width:18px;height:18px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s,stroke .2s}
.bp-dl:hover .go{stroke:var(--accent);transform:translateX(-4px)}

@media (max-width:960px){
  .bp-pair{grid-template-columns:1fr}
  .au{padding:14px}
  .au-ctl{width:100%;justify-content:flex-end}
  .bp-steps li{padding:16px}
}

.bp-vplay{inset-inline:auto;left:50%;top:50%;margin:0;transform:translate(-50%,-50%)}
.bp-vplay:hover{transform:translate(-50%,-50%) scale(1.06)}

.cm-x{inset-inline-start:auto;left:10px;right:auto}
.rm-x{inset-inline-start:auto;left:10px;right:auto}

/* close button sits on the same row as the title, at the physical left */
.cm-head,.rm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.cm-head h2,.rm-head h2{margin:0}
.cm-x,.rm-x{position:static;inset:auto;flex:none;order:2;margin-inline-end:0}
.cm-x{width:36px;height:36px}
.rm-x{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line-2);background:#fff;font-size:22px;line-height:1;color:var(--ink);cursor:pointer}
.rm-x:hover{border-color:var(--ink)}
.cm-head{direction:rtl}
.cm-dlg{padding-top:26px}
.rm-dlg{padding-top:26px}

/* ===== "start here" guide ===== */
.sw .ar-hero h1 em{font-style:normal;color:var(--accent)}
.sw-box{background:#fff}
.sw-steps{display:flex;justify-content:center;gap:0;border-bottom:1px solid var(--line);background:#fcfdfc}
.sw-steps span{display:flex;align-items:center;gap:10px;padding:16px 28px;font-size:14px;color:var(--ink-3);border-inline-start:1px solid var(--line);position:relative}
.sw-steps span:first-child{border-inline-start:0}
.sw-steps i{width:26px;height:26px;display:grid;place-items:center;font-style:normal;font-size:12.5px;font-weight:800;border:1px solid var(--line-2);background:#fff}
.sw-steps span.on{color:var(--ink);font-weight:700}
.sw-steps span.on i{background:var(--accent);border-color:var(--accent);color:#fff}
.sw-steps span.done i{background:var(--accent-soft);border-color:rgba(15,110,86,.35);color:var(--accent)}
.sw-q{font-size:clamp(21px,2.4vw,28px);font-weight:800;text-align:center;padding:44px 24px 30px;outline:0}
.sw-panel[hidden]{display:none}
.sw-choices{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.sw-choice{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:start;padding:34px 32px 38px;border:0;border-inline-start:1px solid var(--line);background:#fff;font:inherit;cursor:pointer;transition:background .25s}
.sw-choice:first-child{border-inline-start:0}
.sw-ic{width:54px;height:54px;display:grid;place-items:center;border:1px solid var(--line-2);margin-bottom:10px;background:radial-gradient(circle,rgba(15,110,86,.22) 1px,transparent 1.5px) 0 0/7px 7px,var(--accent-soft)}
.sw-ic svg{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sw-choice:nth-child(1) .sw-ic svg{stroke:var(--wp)}.sw-choice:nth-child(2) .sw-ic svg{stroke:var(--ps)}
.sw-choice b{font-size:19px;font-weight:800;line-height:1.7;color:var(--ink);transition:color .2s}
.sw-choice small{font-size:14px;line-height:1.9;color:var(--ink-3)}
.sw-choice>svg.go{position:absolute;top:34px;inset-inline-end:28px;width:20px;height:20px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s,stroke .2s}
.sw-choice:hover{background:linear-gradient(180deg,rgba(232,245,240,.55),rgba(232,245,240,0) 80%)}
.sw-choice:hover b,.sw-choice:hover>svg.go{color:var(--accent);stroke:var(--accent)}
.sw-choice:hover>svg.go{transform:translateX(-4px)}
.sw-choice:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.sw-ph{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;border-bottom:1px solid var(--line)}
.sw-back{display:inline-flex;align-items:center;gap:8px;border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--accent);cursor:pointer;padding:6px 0}
.sw-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sw-chosen{font-size:13.5px;color:var(--ink-2);border:1px solid var(--line-2);padding:4px 14px;background:#fff}
.sw-opts{border-top:1px solid var(--line)}
.sw-opt{display:flex;align-items:center;gap:18px;padding:20px 32px;border-bottom:1px solid var(--line);transition:background .2s}
.sw-opt:last-child{border-bottom:0}
.sw-opt>i{flex:none;width:34px;height:34px;display:grid;place-items:center;font-style:normal;font-size:14px;font-weight:800;color:var(--accent);border:1px solid var(--line-2);background:var(--accent-soft)}
.sw-opt>span{flex:1;display:flex;flex-direction:column;gap:2px}
.sw-opt b{font-size:17px;font-weight:700;line-height:1.7;transition:color .2s}
.sw-opt small{font-size:14px;color:var(--ink-3);line-height:1.8}
.sw-opt .go{flex:none;width:20px;height:20px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s,stroke .2s}
.sw-opt:hover{background:linear-gradient(270deg,rgba(232,245,240,.55),rgba(232,245,240,0))}
.sw-opt:hover b{color:var(--accent)}
.sw-opt:hover .go{stroke:var(--accent);transform:translateX(-4px)}
.sw-unsure{background:#fcfdfc}
.sw-unsure>i{background:#fff;color:var(--ink-3)}
.sw-alt{display:block;transition:background .25s}
.sw-alt:hover{background:linear-gradient(180deg,rgba(232,245,240,.5),rgba(232,245,240,0) 70%)}
.sw-alt:hover h3{color:var(--accent)}
@media (max-width:960px){
  .sw-steps span{padding:12px 16px;font-size:13px}
  .sw-q{padding:30px 20px 22px}
  .sw-choices{grid-template-columns:1fr}
  .sw-choice,.sw-choice:first-child{border-inline-start:0;border-bottom:1px solid var(--line);padding:24px 20px}
  .sw-choice:last-child{border-bottom:0}
  .sw-choice>svg.go{top:24px;inset-inline-end:20px}
  .sw-ph{padding:12px 20px}
  .sw-opt{padding:16px 20px;gap:14px}
}



/* ===== all-products page (reuses #products styles) ===== */
.pl .ar-hero h1 em{font-style:normal;color:var(--accent)}
.pl #products{padding-top:48px}
.pl #products .group[hidden]{display:none}
.pl #products .group::before{display:none}
.pl #products .group:not([hidden])+.group:not([hidden]) .group-h{margin-top:64px}
.pl-sub{font-size:14px;color:var(--ink-3)}
.pl #products .group-h{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding:18px 24px;margin:0;border-block:1px solid var(--line);background:#fff;position:relative}
.pl #products .group-h h3::before{display:none}
.pl #products .group-h .link{margin-inline-start:auto}
.pl-help{text-align:center;padding:10px 24px 44px}
.pl-help p{max-width:560px;margin:0 auto 22px;color:var(--ink-2);line-height:2}
.pl-act{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* all-products: tabs as a flat bar attached to the hero */
.pl #products{padding:0}
.pl #products::before{display:none}
.pl #products>.wrap::before{display:none}
.pl #products .ptabs{display:flex;width:100%;max-width:none;margin:0;padding:0;gap:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:#fff}
.pl #products .ptab{flex:1;justify-content:center;height:60px;padding:0 12px;border-radius:0;border-inline-start:1px solid var(--line);background:#fff;font-size:15.5px;font-weight:600;color:var(--ink-3);position:relative;box-shadow:none}
.pl #products .ptab:first-child{border-inline-start:0}
.pl #products .ptab:hover{color:var(--ink);background:#fcfdfc}
.pl #products .ptab.on{color:var(--ink);font-weight:800;background:#fff;box-shadow:none}
.pl #products .ptab::after{display:block;content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .22s}
.pl #products .ptab.on::after{transform:scaleX(1)}
.pl #products .ptab:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:0}

/* hero mock: the Rahkarnet settings screen */
.ui.rk{grid-template-columns:200px 1fr;font-size:13px}
.rk-side{background:#fff;border-inline-end:1px solid var(--line);padding:22px 0;display:flex;flex-direction:column}
.rk-side b{padding:0 22px 16px;font-size:16px;font-weight:800;color:var(--accent)}
.rk-side span{padding:11px 22px;color:var(--ink-3);font-size:13.5px}
.rk-side span.on{color:var(--ink);font-weight:700;background:var(--accent-soft);box-shadow:inset -3px 0 0 var(--accent)}
.rk-main{padding:26px 30px;display:flex;flex-direction:column;gap:14px;min-width:0}
.rk-top{display:flex;align-items:center;justify-content:space-between}
.rk-top h5{margin:0;font-size:18px;font-weight:800}
.rk-top em{font-style:normal;font-size:12px;color:var(--accent);background:var(--accent-soft);border:1px solid rgba(15,110,86,.25);padding:3px 12px}
.rk-rows{background:#fff;border:1px solid var(--line);border-radius:10px}
.rk-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-top:1px solid var(--line)}
.rk-row:first-child{border-top:0}
.rk-row span{display:flex;flex-direction:column;gap:2px}
.rk-row b{font-size:14px;font-weight:700}
.rk-row small{font-size:12px;color:var(--ink-3)}
.rk-sw{flex:none;position:relative;width:38px;height:22px;border-radius:99px;background:#d9dfdc}
.rk-sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.rk-sw.on{background:var(--accent)}.rk-sw.on::after{inset-inline-start:19px}
.rk-foot{display:flex;align-items:center;gap:16px;margin-top:2px}
.rk-save{background:var(--accent);color:#fff;font-weight:700;font-size:13px;padding:9px 20px;border-radius:8px}
.rk-foot small{font-size:12px;color:var(--ink-3)}
@media (max-width:960px){.ui.rk{grid-template-columns:1fr}.rk-side{display:none}.rk-main{padding:16px}.rk-foot small{display:none}}
.panel .shot:has(.rk){background:#f6f8f7}
.ui.rk{background:#f6f8f7}
@media (min-width:961px){
  .tilt .chip.c1{inset-inline-start:1.5%;top:58%}
  .tilt .chip.c2{inset-inline-end:1.5%;top:34%}
  .tilt .chip.c3{inset-inline-start:auto;inset-inline-end:9%;bottom:-18px}
}
.rk-row{padding:11px 18px}
.rk-main{padding:22px 30px;gap:12px}

/* ===== mobile header + slide-in menu ===== */
.mb-btn,.mb-user,.mn{display:none}
@media (max-width:960px){
  .hdr .wrap{grid-template-columns:48px 1fr 48px;gap:0;height:60px;padding-inline:8px}
  .hdr .nav,.hdr .end{display:none}
  .hdr .logo{justify-self:center;font-size:19px}
  .mb-btn,.mb-user{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;cursor:pointer;color:var(--ink)}
  .mb-btn{justify-self:start;align-content:center;gap:5px}
  .mb-btn span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .2s}
  .mb-btn.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mb-btn.on span:nth-child(2){opacity:0}
  .mb-btn.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mb-user{justify-self:end}
  .mb-user svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mb-btn:focus-visible,.mb-user:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

  .mn{position:fixed;inset:0;z-index:125;display:block}
  .mn[hidden]{display:none}
  .mn-bg{position:absolute;inset:0;background:rgba(20,32,27,.4);opacity:0;transition:opacity .3s}
  .mn.on .mn-bg{opacity:1}
  .mn-p{position:absolute;top:0;bottom:0;right:0;width:min(88vw,380px);display:flex;flex-direction:column;background:#fff;border-left:1px solid var(--line-2);box-shadow:-24px 0 48px -28px rgba(20,32,27,.4);transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);outline:0}
  .mn.on .mn-p{transform:none}
  .mn-head{flex:none;display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 16px;border-bottom:1px solid var(--line)}
  .mn-x{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-2);background:#fff;cursor:pointer;color:var(--ink)}
  .mn-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  .mn-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-bottom:12px}
  .mn-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:0 20px;border:0;border-bottom:1px solid var(--line);background:#fff;font:inherit;font-size:16.5px;font-weight:600;color:var(--ink);text-align:start;cursor:pointer}
  .mn-row:active{background:var(--bg-soft)}
  .mn-row[aria-current]{color:var(--accent);box-shadow:inset -3px 0 0 var(--accent);background:var(--accent-soft)}
  .mn-ch{width:18px;height:18px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .mn-pl{width:18px;height:18px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;flex:none;transition:transform .25s}
  .mn-tg[aria-expanded=true] .mn-pl{transform:rotate(45deg)}
  .mn-tg[aria-expanded=true]{color:var(--accent)}
  .mn-sub{background:#fcfdfc;border-bottom:1px solid var(--line)}
  .mn-sub[hidden]{display:none}
  .mn-grp{padding:14px 0 6px;border-bottom:1px solid var(--line)}
  .mn-grp h4{display:flex;align-items:center;gap:8px;padding:0 20px 6px;font-size:13px;font-weight:800;color:var(--ink-3)}
  .mn-grp h4 svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mn-grp a{display:flex;flex-direction:column;gap:1px;padding:10px 20px}
  .mn-grp a b{font-size:15px;font-weight:700}
  .mn-grp a small{font-size:12.5px;color:var(--ink-3)}
  .mn-grp a[aria-current] b{color:var(--accent)}
  .mn-all{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;font-size:14.5px;font-weight:800;color:var(--accent)}
  .mn-all .mn-ch{stroke:var(--accent)}
  .mn-foot{flex:none;display:grid;gap:10px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}
  .mn-foot .btn{width:100%;justify-content:center;height:48px}
}
@media (prefers-reduced-motion:reduce){.mn-bg,.mn-p,.mb-btn span,.mn-pl{transition:none}}

/* success story in the blog sidebar */
.ar-story{display:grid;gap:6px;margin:0 0 10px;padding:10px;border:1px solid var(--line);background:#fff;transition:border-color .2s,background .2s}
.ar-story:hover{border-color:var(--accent);background:#fcfdfc}
.ar-story-img{aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);background:#f6f8f7}
.ar-story-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .4s}
.ar-story:hover .ar-story-img img{transform:scale(1.04)}
.ar-story-tag{font-size:12px;color:var(--ink-3);margin-top:4px}
.ar-story b{font-size:14.5px;font-weight:800;line-height:1.9;color:var(--ink);transition:color .2s}
.ar-story:hover b{color:var(--accent)}
.ar-story-more{font-size:13px;font-weight:700;color:var(--accent)}
.ar-story-all{display:block;margin:0 0 28px;font-size:13.5px;font-weight:700;color:var(--accent)}
.ar-story-all:hover{text-decoration:underline}

/* story section inside a portfolio page */
.pf-story{background:#fff}
.pf-story-in{max-width:760px;margin:0 auto;padding:52px 24px 44px}
.pf-story-in h2{font-size:clamp(24px,3vw,32px);font-weight:800;margin:14px 0 22px}
.pf-story-in h2 em{font-style:normal;color:var(--accent)}
.pf-story-in h3{font-size:18px;font-weight:800;margin:28px 0 6px}
.pf-story-in p{font-size:16.5px;line-height:2.2;color:var(--ink-2);margin:0}
.pf-story-in .pf-demo{margin-top:26px}
.pf-story-in .pf-svc{margin-top:26px}
.pf-svc a{font-weight:700;color:var(--accent)}
.pf-svc a:hover{text-decoration:underline}


/* ===== WordPress port additions ===== */
/* services hub */
.svs-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.svs-col{padding:36px 32px 40px;border-inline-start:1px solid var(--line)}
.svs-col:first-child{border-inline-start:0}
.svs-col h2{font-size:21px;font-weight:800;margin:0 0 6px}
.svs-col>p{font-size:14.5px;color:var(--ink-3);margin:0 0 18px}
.svs-col ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svs-col li{border-bottom:1px solid var(--line)}
.svs-col a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;font-size:15.5px;font-weight:600;transition:color .2s}
.svs-col a svg{width:18px;height:18px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s,stroke .2s}
.svs-col a:hover{color:var(--accent)}
.svs-col a:hover svg{stroke:var(--accent);transform:translateX(-4px)}
@media (max-width:960px){.svs-grid{grid-template-columns:1fr}.svs-col,.svs-col:first-child{border-inline-start:0;border-bottom:1px solid var(--line);padding:26px 20px}.svs-col:last-child{border-bottom:0}}
/* template-part wrappers (block themes wrap parts in header/footer elements) */
header.wp-block-template-part{position:sticky;top:0;z-index:20}
.wp-site-blocks>*{margin-block-start:0!important;margin-block-end:0!important}
.wp-block-post-content{margin:0!important;max-width:none!important}
.wp-block-post-content>*{max-width:none!important;margin-inline:0!important}

/* ===== article body: core blocks look like the prototype components ===== */
:is(.bp-body,.dc-body) figure.wp-block-image,:is(.bp-body,.dc-body) .wp-block-image{margin:28px auto;text-align:center;max-width:760px}
:is(.bp-body,.dc-body) .wp-block-image img{display:block;margin:0 auto;max-width:100%;height:auto;border:1px solid var(--line);cursor:zoom-in}
:is(.bp-body,.dc-body) .wp-block-image figcaption{margin-top:10px;font-size:13.5px;line-height:1.9;color:var(--ink-3)}
:is(.bp-body,.dc-body) blockquote.wp-block-quote{margin:30px 0;padding:6px 26px;border:0;border-inline-start:3px solid var(--accent)}
:is(.bp-body,.dc-body) blockquote.wp-block-quote p{font-size:clamp(19px,2vw,23px);line-height:2.1;font-weight:700;color:var(--ink);margin:0}
:is(.bp-body,.dc-body) blockquote.wp-block-quote cite{display:block;margin-top:6px;font-style:normal;font-size:13.5px;color:var(--ink-3)}
/* جدول محتوا: بلوک «جدول» (figure.wp-block-table) و <table> خام که rahkarnet_wrap_content_tables در .rk-tbl می‌پوشاند */
:is(.bp-body,.dc-body) :is(.wp-block-table,.rk-tbl){margin:22px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line)}
:is(.bp-body,.dc-body) :is(.wp-block-table,.rk-tbl) table{width:100%;margin:0;border:0;border-collapse:collapse;font-size:15px;line-height:1.9}
:is(.bp-body,.dc-body) :is(.wp-block-table,.rk-tbl) :is(thead,tfoot){border:0}
:is(.bp-body,.dc-body) :is(.wp-block-table,.rk-tbl) :is(th,td){min-width:5.5em;padding:12px 18px;border:0;border-top:1px solid var(--line);text-align:start;vertical-align:top;overflow-wrap:break-word}
/* چهار ستون به بالا روی موبایل جا نمی‌شود؛ ستون‌ها پهن‌تر تا متن بلند خوانا بماند و جدول درون خودش اسکرول بخورد */
:is(.bp-body,.dc-body) :is(.wp-block-table,.rk-tbl) table:has(tr>:nth-child(4)) :is(th,td){min-width:10em}
:is(.bp-body,.dc-body) :is(.wp-block-table,.rk-tbl) table>:first-child>tr:first-child>*{border-top:0}
:is(.bp-body,.dc-body) :is(.wp-block-table,.rk-tbl) :is(th,td)+:is(th,td){border-inline-start:1px solid var(--line)}
:is(.bp-body,.dc-body) :is(.wp-block-table,.rk-tbl) thead th{background:var(--bg-soft);font-weight:800;color:var(--ink)}
:is(.bp-body,.dc-body) :is(.wp-block-table,.rk-tbl) tbody th{font-weight:700;color:var(--ink)}
:is(.bp-body,.dc-body) :is(.wp-block-table,.rk-tbl) td{color:var(--ink-2)}
@media (max-width:600px){:is(.bp-body,.dc-body) :is(.wp-block-table,.rk-tbl) :is(th,td){padding:10px 12px}}
:is(.bp-body,.dc-body) .wp-block-table figcaption{margin:0;padding:10px 18px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.9;color:var(--ink-3);text-align:start}
:is(.bp-body,.dc-body) .wp-block-file{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:22px 0;padding:14px 18px;border:1px solid var(--line)}
:is(.bp-body,.dc-body) .wp-block-file a:first-child{font-weight:700}
:is(.bp-body,.dc-body) .wp-block-file .wp-block-file__button{background:var(--accent);color:#fff;padding:8px 16px;font-size:14px;border-radius:0}
:is(.bp-body,.dc-body) pre.wp-block-code{margin:0;padding:16px 18px;overflow:auto;background:#0f1a15;color:#d8e6df;border:0;font:13.5px/1.9 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:left;direction:ltr}
:is(.bp-body,.dc-body) .bp-code pre{border:0}
:is(.bp-body,.dc-body) :not(pre)>code{font:13.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;direction:ltr;unicode-bidi:isolate;background:var(--bg-soft);border:1px solid var(--line);padding:1px 7px}
:is(.bp-body,.dc-body) .wp-block-video,:is(.bp-body,.dc-body) .wp-block-embed{margin:20px 0 28px}
:is(.bp-body,.dc-body) .wp-block-embed iframe,:is(.bp-body,.dc-body) .wp-block-video video{width:100%;max-width:100%;border:1px solid var(--line)}
/* block styles (registered in functions.php) */
:is(.bp-body,.dc-body) ul.is-style-bp-check{list-style:none;padding:0;margin:20px 0;display:grid;gap:10px}
:is(.bp-body,.dc-body) ul.is-style-bp-check li{display:flex;align-items:center;gap:12px;font-size:15.5px}
:is(.bp-body,.dc-body) ul.is-style-bp-check li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%230f6e56' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
:is(.bp-body,.dc-body) ol.is-style-bp-steps{list-style:none;counter-reset:s;margin:22px 0;padding:0;border:1px solid var(--line)}
:is(.bp-body,.dc-body) ol.is-style-bp-steps li{counter-increment:s;display:flex;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid var(--line);font-size:15.5px}
:is(.bp-body,.dc-body) ol.is-style-bp-steps li:last-child{border-bottom:0}
:is(.bp-body,.dc-body) ol.is-style-bp-steps li::before{content:counter(s,persian);flex:none;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--accent-soft);font-size:16px;font-weight:800;color:var(--accent)}
:is(.bp-body,.dc-body) .wp-block-group[class*="is-style-bp-co-"]{margin:20px 0;padding:14px 20px;border:1px solid var(--line);border-inline-start:3px solid var(--c,var(--accent));background:linear-gradient(90deg,var(--cs,rgba(232,245,240,.55)),rgba(255,255,255,0))}
:is(.bp-body,.dc-body) .wp-block-group[class*="is-style-bp-co-"]>p{margin:0;font-size:15.5px;line-height:2}
:is(.bp-body,.dc-body) .is-style-bp-co-info{--c:#2563eb;--cs:rgba(232,240,254,.7)}
:is(.bp-body,.dc-body) .is-style-bp-co-tip{--c:#0f6e56;--cs:rgba(232,245,240,.7)}
:is(.bp-body,.dc-body) .is-style-bp-co-warn{--c:#c2410c;--cs:rgba(253,238,229,.8)}
:is(.bp-body,.dc-body) .is-style-bp-co-bad{--c:#c0392b;--cs:rgba(253,236,235,.8)}
/* the existing HLS video player (Arvan) in the new frame */
.rk-video{position:relative;aspect-ratio:16/9;border:1px solid var(--line);background:#14201b;margin:0 0 28px;overflow:hidden}
.rk-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rk-video-play{position:absolute;inset-inline:0;top:50%;margin:-34px auto 0;width:68px;height:68px;display:grid;place-items:center;background:var(--accent);border:1px solid rgba(255,255,255,.4);color:#fff;cursor:pointer;transition:transform .2s,background .2s}
.rk-video-play:hover{transform:scale(1.06);background:var(--accent-d)}
.rk-video-play svg{width:28px;height:28px}
.rk-video.is-playing .rk-video-play{display:none}
/* nav pagination + misc */
.pf-bigs{grid-template-columns:repeat(var(--n,4),1fr)}
@media (max-width:960px){.pf-bigs{grid-template-columns:1fr 1fr}}

.dc-kids{margin:8px 0 0;padding-inline-start:20px;display:grid;gap:6px}
.dc-kids a{color:var(--accent);font-weight:600}
.dc-grp ul ul{margin:4px 0 4px;padding-inline-start:14px;border-inline-start:1px solid var(--line)}

.pp-shot-img{display:block;aspect-ratio:auto;border:1px solid var(--line);background:#fff}
.pp-shot-img img{display:block;width:100%;height:auto}
.pp-price s{color:var(--ink-3);font-size:14px;font-weight:400;margin-inline-end:6px}

/* ===== legacy text pages inside the new frame ===== */
.lg .lg-box{padding:56px clamp(20px,6vw,72px) 72px}
.lg-title{font-size:clamp(28px,3.4vw,40px);font-weight:800;margin:0 0 24px}
.lg-body{max-width:860px;margin-inline:auto}
.lg-body>*+*{margin-top:18px}
.lg-body h1{font-size:clamp(28px,3.4vw,40px);font-weight:800}
.lg-body h2{font-size:clamp(21px,2.4vw,28px);font-weight:800;margin-top:44px}
.lg-body h3{font-size:19px;font-weight:800;margin-top:28px}
.lg-body p,.lg-body li{font-size:16.5px;line-height:2.2;color:var(--ink-2)}
.lg-body ul,.lg-body ol{padding-inline-start:22px}
.lg-body a:not(.wp-block-button__link){color:var(--accent);font-weight:600}
.lg-body .rk-lead{font-size:18px;color:var(--ink-3)}
.lg-body .rk-badge{display:inline-block;font-size:12.5px;font-weight:700;color:var(--accent);border:1px solid var(--line-2);padding:3px 14px;margin:0}
.lg-body .wp-block-group{margin-inline:0!important;max-width:none!important}
.lg-body .rk-section,.lg-body .rk-band{padding:0}
.lg-body .wp-block-buttons{display:flex;gap:12px;flex-wrap:wrap}
.lg-body .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 24px;border-radius:12px;background:var(--accent);color:#fff;border:1px solid var(--accent-d);font-weight:700;font-size:15px}
.lg-body .is-style-rk-outline .wp-block-button__link{background:#fff;color:var(--ink);border-color:var(--line-2)}
.lg-body .wp-block-table{margin-block:24px;overflow-x:auto;border:1px solid var(--line)}
.lg-body table{width:100%;border-collapse:collapse;font-size:15px}
.lg-body th{background:#fcfdfc;text-align:start;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:800}
.lg-body td{padding:12px 16px;border-top:1px solid var(--line)}
.lg-body details{border:1px solid var(--line);padding:14px 18px}
.lg-body summary{cursor:pointer;font-weight:700}
.lg-body img{max-width:100%;height:auto}

/* ---- legacy block classes (rk-*) mapped to the new look; pages that still use old patterns ---- */
.lg-body svg{max-width:100%;height:auto}
.lg-body svg.icon{width:28px;height:28px;stroke:var(--accent);flex:none}
.lg-body .rk-hero-visual{margin:28px auto;max-width:560px}
.lg-body .rk-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);margin-block:24px}
.lg-body .rk-feature{padding:24px 26px;border-inline-start:1px solid var(--line);border-bottom:1px solid var(--line);margin:0!important}
.lg-body .rk-feature .head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.lg-body .rk-feature .title{font-weight:800;font-size:16.5px;margin:0}
.lg-body .rk-feature p{font-size:15px;line-height:2}
.lg-body .rk-plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.lg-body .rk-plan{border:1px solid var(--line);padding:22px 24px}
.lg-body .rk-faq{display:grid;gap:10px}
.lg-body .rk-faq-item{border:1px solid var(--line);padding:14px 18px}
.lg-body .rk-cta-band,.lg-body .rk-consult,.lg-body .rk-wayfinder{border:1px solid var(--line);background:#fcfdfc;padding:22px 26px;text-align:center}
.lg-body .rk-wayfinder{display:flex;align-items:center;gap:12px;text-align:start}
.lg-body .rk-checklist{list-style:none;padding:0;display:grid;gap:8px}
.lg-body .rk-checklist li{display:flex;gap:10px;align-items:center}
.lg-body .rk-band--accent{background:var(--accent-soft);padding:28px}
@media (max-width:960px){.lg-body .rk-feature-grid{grid-template-columns:1fr}}

.rm-notice{margin:0;padding:12px 24px;border-bottom:1px solid var(--line);background:var(--accent-soft);color:var(--accent);font-size:14.5px;font-weight:600}
.rm-ok:not([hidden]),.rm-err:not([hidden]){display:block;margin:0 0 14px;font-size:14.5px;line-height:1.9}
.rm-ok{color:var(--accent);font-weight:600}.rm-err{color:#c0392b}
.rm-vote.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.rm-vote:disabled{cursor:default}
.rm-act{margin:0}
.rm-card[hidden],.rm-col[hidden]{display:none}

.rm-board{grid-template-columns:repeat(var(--n,4),1fr)}
.rm-why{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.rm-board{grid-template-columns:1fr}.rm-why{grid-template-columns:1fr}}

.pp-body{padding:32px 36px 36px;border-top:1px solid var(--line)}
.pp-body>*:first-child{margin-top:0}
:is(.bp-body,.dc-body) h3{margin:34px 0 8px}
:is(.bp-body,.dc-body) ol,:is(.bp-body,.dc-body) ul{margin-block:12px 18px}

/* notice above the plans */
.pl-notice{margin:0;padding:22px 36px;border-top:1px solid var(--line);border-inline-start:3px solid var(--accent);background:linear-gradient(90deg,rgba(232,245,240,.55),rgba(232,245,240,.1))}
.pl-notice b{display:block;font-size:16px;font-weight:800;margin-bottom:4px}
.pl-notice p{margin:0;font-size:15px;line-height:2;color:var(--ink-2)}
.pl-notice a{color:var(--accent);font-weight:700}
@media (max-width:960px){.pl-notice{padding:18px 20px}}

/* speed page: scenario box + single review plan */
.sp-ex{margin:0;padding:26px 36px;border-top:1px solid var(--line);background:#fcfdfc;display:grid;gap:6px}
.sp-ex b{font-size:13px;font-weight:800;color:var(--accent);letter-spacing:.02em}
.sp-ex p{margin:0;font-size:15.5px;line-height:2.1;color:var(--ink-2);max-width:920px}
.sp-note{margin:0;padding:18px 36px;border-top:1px dashed var(--line-2);font-size:14px;color:var(--ink-3)}
.sp-note a{color:var(--accent);font-weight:700}
.pl-one{display:grid;grid-template-columns:minmax(300px,420px) 1fr;border-top:1px solid var(--line)}
.pl-one .pl-card{border-inline-start:0;border-inline-end:1px solid var(--line)}
.pl-what{padding:40px 40px 34px;display:flex;flex-direction:column;gap:6px}
.pl-what h3{font-size:19px;font-weight:800;margin:0 0 6px}
.pl-list{list-style:none;margin:8px 0 18px;padding:0;display:grid;gap:12px}
.pl-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.9;color:var(--ink-2)}
.pl-list li svg{flex:none;width:22px;height:22px;margin-top:2px;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;padding:3px;border-radius:50%;background:var(--accent-soft)}
.sv-note-in{margin:0;padding-top:16px;border-top:1px dashed var(--line-2);font-size:14px;line-height:2;color:var(--ink-3)}
@media (max-width:960px){.sp-ex,.sp-note{padding:20px}.pl-one{grid-template-columns:1fr}.pl-one .pl-card{border-inline-end:0;border-bottom:1px solid var(--line)}.pl-what{padding:28px 20px}}

/* comments (product + blog) */
.cmt{--cmt-ind:44px}
.cmt-h h2{font-size:24px;font-weight:800;margin-bottom:6px}
.cmt-sub{font-size:13.5px;color:var(--ink-3);margin-bottom:24px}
.cmt-empty{padding:28px;border:1px dashed var(--line-2);color:var(--ink-3);text-align:center;font-size:14.5px}
.cmt-list{border-top:1px solid var(--line)}
.cmt-i{display:grid;grid-template-columns:36px 1fr;gap:6px 14px;padding:20px 0;border-bottom:1px solid var(--line)}
.cmt-i>.children,.cmt-i>#respond{grid-column:1/-1}
.cmt-av{width:36px;height:36px;display:grid;place-items:center;font-weight:800;font-size:15px;color:var(--ink-2);border:1px solid var(--line-2);background:var(--bg-soft)}
.cmt-i.adm>.cmt-av{color:var(--accent);background:radial-gradient(circle,rgba(15,110,86,.22) 1px,transparent 1.5px) 0 0/6px 6px,var(--accent-soft)}
.cmt-b{min-width:0}
.cmt-m{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:14px;line-height:1.7}
.cmt-m b{font-weight:800;font-size:14.5px}
.cmt-m time{font-size:12.5px;color:var(--ink-3)}
.cmt-tag{font-size:11.5px;font-weight:700;color:var(--accent);border:1px solid var(--accent);padding:0 8px;line-height:1.7}
.cmt-t{margin-top:4px;font-size:15px;line-height:2;color:var(--ink-2);overflow-wrap:anywhere}
.cmt-t p{margin:0}.cmt-t p+p{margin-top:8px}
.cmt-to{color:var(--accent);font-weight:700}
.cmt-a{margin-top:6px}
.cmt-a a,.cmt-rb,.cmt-more{font:inherit;font-size:13px;font-weight:700;color:var(--ink-3);background:none;border:0;padding:4px 0;cursor:pointer}
.cmt-a a:hover,.cmt-rb:hover,.cmt-more:hover{color:var(--accent)}
.cmt-rb:focus-visible,.cmt-more:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cmt-pend{display:inline-block;margin-top:6px;font-size:12.5px;color:var(--ink-3);border:1px dashed var(--line-2);padding:0 10px}
.cmt-i.pend{opacity:.85}
.cmt-i.flash{animation:cmtflash 1.6s ease-out}
@keyframes cmtflash{from{background:var(--accent-soft)}to{background:transparent}}

/* replies: one indent for level 2, level 3 gets a rule, deeper stays flat */
.cmt-i .children{margin-top:14px;margin-inline-start:var(--cmt-ind);border-inline-start:1px solid var(--line-2);padding-inline-start:16px}
.cmt-i .children>.cmt-i{padding:14px 0;border-bottom:0}
.cmt-i .children>.cmt-i+.cmt-i{border-top:1px solid var(--line)}
.cmt-i.d1>.children>.cmt-i.d2>.children{margin-inline-start:0}
.cmt-i.d3>.cmt-av{width:30px;height:30px;font-size:13px}
.cmt-i.d3{grid-template-columns:30px 1fr}
.cmt-more{margin-top:6px}

/* forms */
#respond{margin-top:32px;padding:24px;border:1px solid var(--line);background:var(--bg-soft)}
#reply-title{font-size:17px;font-weight:800;margin-bottom:16px}
.cmt-i #respond{margin-top:12px;padding:16px;border:1px solid var(--line);background:var(--bg-soft)}
.cmt-rt{font-size:13px;color:var(--ink-3);margin-bottom:10px}
.cmt-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cmt-fld{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;position:relative}
.cmt-fld label{font-size:13.5px;font-weight:700}
.cmt-fld input,.cmt-fld textarea{font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:0;padding:10px 12px;width:100%;transition:border-color .15s}
.cmt-fld textarea{resize:vertical;min-height:90px;line-height:1.9}
.cmt-fld input:focus,.cmt-fld textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cmt-fld.bad input,.cmt-fld.bad textarea{border-color:#b3261e}
.cmt-er{min-height:0;font-size:12.5px;color:#b3261e}
.cmt-cnt{font-size:12px;color:var(--ink-3);align-self:flex-end}
.cmt-hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}
.cmt-ft{display:flex;align-items:center;gap:14px}
.cmt-ft .btn{border-radius:0}
@media (max-width:960px){
  .cmt{--cmt-ind:0px}
  .cmt-row{grid-template-columns:1fr;gap:0}
  .cmt-i .children{padding-inline-start:12px;margin-inline-start:18px}
  #respond{padding:18px 16px}
}
.bl-post .cmt{margin-top:48px}
.pp-cnt{display:inline-block;min-width:20px;margin-inline-start:6px;padding:0 6px;font-size:12px;font-weight:700;line-height:1.6;text-align:center;color:var(--ink-3);border:1px solid var(--line-2)}
.pp-tabs a.on .pp-cnt{color:var(--accent);border-color:var(--accent)}

.cmt-ol,.cmt-i .children{list-style:none;margin-block:0}
.cmt-ol{padding:0}
.cmt-i .children{margin-top:14px;padding-block:0}
#reply-title small{margin-inline-start:12px;font-size:13px;font-weight:700}
#reply-title small a{color:var(--ink-3)}#reply-title small a:hover{color:var(--accent)}
.cmt-i #respond{margin-top:12px}
.cmt-f .cmt-ft{display:flex;gap:14px}
.cmt-pager{margin-top:20px;display:flex;justify-content:center}
.cmt-pager .nav-links{display:flex;gap:6px;flex-wrap:wrap}
.cmt-pager a,.cmt-pager span{padding:4px 12px;border:1px solid var(--line-2);font-size:14px}
.cmt-pager .current{border-color:var(--accent);color:var(--accent)}
#respond .cmt-f{margin:0}

.cmt-i[hidden]{display:none}

/* تصویر شاخص و قیمت تخفیف‌دار در کارت محصول */
.card .shot > img{display:block;width:100%;height:100%;object-fit:cover}
.card .price s{color:var(--ink-3);font-weight:400;font-size:12px;margin-inline-end:4px}