/* Shared stylesheet for the static content pages on wesell.world
   (integrations, guides, tools, 404). Tokens mirror landing/index.html,
   which keeps its own inline copy. Served with a 1-year immutable cache,
   so pages reference it with a ?v= that build.mjs derives from its hash. */
/* Cairo, self-hosted (variable font: one file per subset covers every weight).
   Preloaded in <head> so it lands before first paint: the Google Fonts copy
   arrived ~1.6s late on mobile and re-flowed the text (CLS up to 0.10). */
@font-face{font-family:"Cairo";font-style:normal;font-weight:200 1000;font-display:swap;src:url(/assets/fonts/cairo-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Cairo";font-style:normal;font-weight:200 1000;font-display:swap;src:url(/assets/fonts/cairo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cairo";font-style:normal;font-weight:200 1000;font-display:swap;src:url(/assets/fonts/cairo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --bg:#f8faf9;--surface:#fff;--ink:#0b1712;--body:#53625c;--muted:#8b9992;
  --line:#e7edea;--line-2:#d5ded9;--brand:#00b45a;--brand-dk:#00803f;--brand-tint:#e7f8ef;
  --teal:#00c9a7;--amber:#f5a623;--rose:#e2574c;
  --r-lg:22px;--r-md:16px;--r-sm:11px;
  --sh-1:0 1px 2px rgba(11,23,18,.04),0 6px 18px rgba(11,23,18,.05);
  --sh-2:0 2px 6px rgba(11,23,18,.05),0 18px 44px rgba(11,23,18,.09);
  --sh-3:0 4px 10px rgba(11,23,18,.06),0 30px 70px rgba(11,23,18,.13);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--body);font-family:"Cairo","Segoe UI",system-ui,sans-serif;
  font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:900;text-wrap:balance;letter-spacing:-.02em}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
.narrow{max-width:780px;margin:0 auto;padding-inline:20px}
.glow{position:fixed;inset:0;z-index:-3;pointer-events:none;background:
  radial-gradient(760px 520px at 78% -6%,rgba(0,180,90,.12),transparent 62%),
  radial-gradient(640px 460px at 10% 12%,rgba(0,201,167,.08),transparent 64%)}

/* nav */
.navwrap{position:sticky;top:14px;z-index:80;padding-inline:20px;margin-top:14px}
.nav{position:relative;max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:26px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--sh-2);border-radius:14px;padding:10px 12px 10px 22px}
.brand img{height:30px;width:auto}
.nav-links{display:flex;gap:22px;font-size:14.5px;font-weight:600}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--brand-dk)}
.nav-act{margin-inline-start:auto;display:flex;gap:10px}
@media (max-width:980px){.nav-links{display:none}.nav{padding-inline:14px 12px}}
@media (max-width:560px){.nav-act .btn-g{display:none}.brand img{height:26px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;font-weight:700;
  font-size:15.5px;padding:13px 26px;border-radius:8px;border:1.5px solid transparent;cursor:pointer;font-family:inherit;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s}
.btn-p{color:#fff;background:linear-gradient(135deg,var(--teal),var(--brand) 55%,var(--brand-dk));box-shadow:0 6px 20px rgba(0,180,90,.28)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,180,90,.36)}
.btn-g{border-color:var(--line-2);color:var(--ink);background:rgba(255,255,255,.7)}
.btn-g:hover{border-color:var(--brand);color:var(--brand-dk)}
.btn-w{background:#fff;color:var(--brand-dk);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.btn-wo{border-color:rgba(255,255,255,.55);color:#fff}
.btn-sm{padding:9px 20px;font-size:14px;border-radius:7px}

/* page head */
.crumbs{font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;margin:34px 0 0}
.crumbs a:hover{color:var(--brand-dk)}
.crumbs span[aria-hidden]{opacity:.6}
.phead{padding-block:22px 34px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--brand-tint);color:var(--brand-dk);
  font-size:13px;font-weight:700;border-radius:999px;padding:5px 15px;margin-bottom:14px}
.phead h1{font-size:clamp(29px,4.6vw,48px);line-height:1.25}
.phead p{margin-bottom:0}
.phead .lede{margin-top:14px;font-size:clamp(16.5px,2vw,18.5px);max-width:62ch}
.phead .lede b{color:var(--ink);font-weight:600}
.meta{margin-top:14px;font-size:13.5px;color:var(--muted)}
.phead .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
@media (max-width:560px){.phead .acts{flex-direction:column}.phead .acts .btn,.cbox .acts .btn{width:100%;white-space:normal}}

/* prose — element styles are scoped to the article's own flow (direct
   children, unclassed lists, plain links) so they never leak into the
   components placed inside it (cards, steps, caps, toc, FAQ, CTA box).
   The vertical rhythm itself lives in "prose flow" at the end of the file. */
.prose{font-size:16.5px}
.prose>h2{font-size:clamp(22px,3vw,29px);line-height:1.35;scroll-margin-top:104px}
.prose>h3{font-size:19px;line-height:1.5;scroll-margin-top:104px}
.prose p b,.prose li b{color:var(--ink);font-weight:700}
.prose a:where(:not(.btn,.card)){color:var(--brand-dk);font-weight:600;text-decoration:underline;text-decoration-color:#b6e6cc;text-underline-offset:4px}
.prose a:where(:not(.btn,.card)):hover{text-decoration-color:var(--brand)}
.prose>:where(ul,ol):where(:not([class])){padding-inline-start:22px}
.prose>:where(ul,ol):where(:not([class]))>li+li{margin-top:7px}
.prose table{width:100%;border-collapse:collapse;font-size:15px;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.prose th,.prose td{padding:11px 14px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{background:#f3f7f5;color:var(--ink);font-weight:700}
.prose tr:last-child td{border-bottom:0}
@media (max-width:560px){.prose table{font-size:14px}.prose th,.prose td{padding:9px 10px}}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.note{background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--brand);
  border-radius:12px;padding:16px 18px;box-shadow:var(--sh-1)}
.note.warn{border-inline-start-color:var(--amber)}
.note b:first-child{display:block;color:var(--ink);margin-bottom:4px}
.formula{direction:ltr;unicode-bidi:isolate;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14.5px;
  background:#0b1712;color:#d8f5e6;border-radius:12px;padding:14px 18px;overflow-x:auto;text-align:left;white-space:pre;line-height:1.8}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 22px;box-shadow:var(--sh-1);font-size:15px}
.toc b{color:var(--ink)}
.toc ol{margin:8px 0 0;padding-inline-start:20px}
.toc li+li{margin-top:2px}
.toc a{text-decoration:none;font-weight:600;color:var(--body)}
.toc a:hover{color:var(--brand-dk)}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.card{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:20px;box-shadow:var(--sh-1);transition:transform .22s,box-shadow .22s,border-color .22s}
a.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.card h3{font-size:17.5px;line-height:1.5;font-weight:800}
.card p{margin:0;font-size:14.5px;line-height:1.75}
.card .logo{height:38px;display:flex;align-items:center}
.card .logo img{max-height:34px;max-width:120px;width:auto;object-fit:contain}
.card .go{margin-top:auto;font-size:14px;font-weight:700;color:var(--brand-dk)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;background:var(--brand-tint);color:var(--brand-dk)}
.tag.n{background:#f0f3f2;color:var(--muted)}
.sec{padding-block:30px}
.sec>h2{font-size:clamp(22px,3vw,28px);margin-bottom:18px}
.sec+.cbox{margin-top:16px}
@media (max-width:560px){.sec{padding-block:22px}}

/* capability list */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.caps li{display:grid;grid-template-columns:22px 1fr;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;font-size:15px;line-height:1.75;margin:0}
.caps li::before{content:"";width:20px;height:20px;margin-top:4px;border-radius:50%;
  background:var(--brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='%2300803f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.caps li b{color:var(--ink)}

/* steps */
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.steps li{counter-increment:s;position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:14px 18px 14px 18px;padding-inline-start:62px;margin:0}
.steps li::before{content:counter(s);position:absolute;inset-inline-start:16px;top:14px;width:32px;height:32px;
  border-radius:50%;border:2px solid var(--brand);color:var(--brand-dk);font-weight:900;display:grid;place-items:center;font-size:14px}
@media (max-width:560px){.steps li{padding-inline:54px 14px}.steps li::before{inset-inline-start:12px}}

/* faq */
details{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;box-shadow:var(--sh-1)}
summary{list-style:none;cursor:pointer;padding:16px 20px;font-size:16px;font-weight:700;color:var(--ink);display:flex;gap:14px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-inline-start:auto;width:26px;height:26px;flex:none;border-radius:50%;
  background:var(--brand-tint);color:var(--brand-dk);display:grid;place-items:center;font-weight:900}
details[open] summary::after{content:"−"}
details>div{padding:0 20px 18px;font-size:15px;line-height:1.85}

/* cta box */
.cbox{background:linear-gradient(135deg,#00a855,#00b45a 42%,#00c9a7);border-radius:clamp(18px,3vw,28px);
  padding:clamp(32px,4.6vw,58px) clamp(22px,4vw,48px);text-align:center;color:#fff;margin-block:46px 10px;
  box-shadow:0 30px 70px rgba(0,180,90,.22)}
.cbox h2{color:#fff;font-size:clamp(23px,3.4vw,34px);max-width:22ch;margin-inline:auto}
.cbox p{color:rgba(255,255,255,.92);margin:12px auto 0;max-width:52ch;font-size:16.5px}
.cbox .acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}

/* calculator */
.calc{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.calc{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-1)}
.panel h2{font-size:18px;margin-bottom:14px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
@media (max-width:480px){.fields{grid-template-columns:1fr}}
.field label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:5px}
.field small{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}
.field input{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:9px;
  background:#fcfdfd;color:var(--ink);font-variant-numeric:tabular-nums;direction:ltr;text-align:right}
.field input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,180,90,.15)}
.result{position:sticky;top:100px}
.big{border-radius:16px;padding:18px 20px;background:var(--brand-tint);border:1px solid #cdeedc}
.big.neg{background:#fdeceb;border-color:#f6cfcb}
.big span{display:block;font-size:13.5px;font-weight:700;color:var(--brand-dk)}
.big.neg span{color:#9d3a31}
.big b{display:block;font-size:clamp(30px,4vw,40px);font-weight:900;color:var(--ink);line-height:1.2;font-variant-numeric:tabular-nums}
.big small{display:block;font-size:13px;color:var(--body);margin-top:2px}
.rows{margin:14px 0 0;padding:0;list-style:none}
.rows li{display:flex;justify-content:space-between;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:14.5px}
.rows li:last-child{border-bottom:0}
.rows li b{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rows li.neg b{color:#b4372d}

/* footer */
footer{margin-top:70px;border-top:1px solid var(--line);padding-block:40px 30px;font-size:14px;color:var(--muted);background:rgba(255,255,255,.5)}
.fcols{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:26px}
@media (max-width:820px){.fcols{grid-template-columns:1fr 1fr}}
.fcols h4{font-size:14px;font-weight:800;margin-bottom:10px}
.fcols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fcols a:hover{color:var(--brand-dk)}
.fbot{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}

/* prose flow — one vertical rhythm for everything stacked in an article.
   Kept last on purpose: components above reset their own margins to 0
   (.steps, .caps, details, .cbox ...), and at equal specificity a later
   reset used to cancel the gap, gluing a list straight under its heading. */
.prose>*{margin-block:0}
.prose>*+*{margin-top:16px}
.prose>h2{margin-top:clamp(34px,4.6vw,44px)}
.prose>h3{margin-top:28px}
.prose>:is(h2,h3)+*{margin-top:14px}
.prose>details+details{margin-top:10px}
.prose>.cbox{margin-top:clamp(34px,4.6vw,44px)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* phone menu: shown where .nav-links is hidden (<=980px). Same markup on the
   homepage and the generated pages, so the header behaves the same everywhere. */
.nav-menu{display:none}
.nav-menu>summary{list-style:none;cursor:pointer;width:42px;height:42px;border-radius:9px;border:1.5px solid var(--line-2);
  display:grid;place-items:center;color:var(--ink);background:#fff}
.nav-menu>summary::-webkit-details-marker{display:none}
/* the FAQ styles summary/summary::after too; keep them off the menu button */
.nav-menu>summary{padding:0;margin:0;gap:0;font-size:0;box-shadow:none}
.nav-menu>summary::after,.nav-menu>summary::before{content:none;display:none}
.nav-menu>summary svg{width:20px;height:20px}
.nav-menu[open]>summary{border-color:var(--brand);color:var(--brand-dk)}
.nav-panel{position:absolute;top:calc(100% + 8px);inset-inline:0;z-index:90;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--sh-3);padding:8px;display:flex;flex-direction:column}
.nav-panel a{padding:12px 14px;border-radius:10px;font-weight:700;font-size:15.5px;color:var(--ink)}
.nav-panel a:hover,.nav-panel a[aria-current]{background:var(--brand-tint);color:var(--brand-dk)}
.nav-panel hr{border:0;height:1px;background:var(--line);margin:6px 8px}
@media (max-width:980px){.nav-menu{display:block}}