/* =====================================================================
   Telegram Ban Service — bespoke "Telegram night theme" design.
   The page is styled like the Telegram desktop/app NIGHT mode: slate-blue
   canvas, a broadcast CHANNEL widget (subscribers + view counts + SCAM
   label + verified tick), folder tabs, a chat-list of report types and a
   composer CTA. Inter-only, Telegram blue (#2AABEE) + the signature muted
   outgoing-bubble blue (#2b5278). Deliberately unlike the WhatsApp site
   (green 1:1 chat) and the navy Facebook site.
   ===================================================================== */
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400 800; font-display:swap; src:url("/assets/fonts/inter-latin.woff2") format("woff2"); }

:root{
  --bg:#0e1621; --bg2:#17212b; --panel:#17212b; --panel2:#1d2a35; --bar:#17212b;
  --in:#182533; --out:#2b5278; --out2:#356094;
  --ink:#ffffff; --text:#c8d6e1; --muted:#8198ac; --faint:#5f7488;
  --tg:#2aabee; --tg2:#229ed9; --link:#6cc0f5; --verify:#3fa3ee;
  --scam:#ff5c6c; --ok:#5ec26a;
  --line:rgba(255,255,255,.075); --line2:rgba(255,255,255,.045);
  --tg-soft:rgba(42,171,238,.14); --tg-soft2:rgba(42,171,238,.08);
  --r:14px; --r-sm:10px; --r-lg:18px; --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1); --vh:1vh;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} }
body{
  margin:0; color:var(--text); font-family:var(--sans); font-size:1.02rem; line-height:1.65;
  overflow-x:clip; -webkit-font-smoothing:antialiased; overflow-wrap:break-word;
  background:
    radial-gradient(1100px 620px at 86% -8%, rgba(42,171,238,.16), transparent 60%),
    radial-gradient(900px 560px at -6% 108%, rgba(53,96,148,.20), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration:none; }
::selection{ background:var(--tg); color:#06151f; }
strong{ color:var(--ink); font-weight:650; }
h1,h2,h3,h4{ color:var(--ink); margin:0; line-height:1.12; letter-spacing:-.022em; font-weight:750; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.2rem); }
.lead{ font-size:clamp(1.08rem,2vw,1.28rem); color:var(--muted); max-width:56ch; }
.seclabel{ display:inline-flex; align-items:center; gap:.5rem; font-weight:650; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tg); }
.seclabel svg{ width:15px; height:15px; fill:var(--tg); }
:focus-visible{ outline:2px solid var(--tg); outline-offset:3px; border-radius:6px; }
.skip-link{ position:absolute; left:10px; top:-60px; z-index:1000; background:var(--tg); color:#06151f; padding:.7rem 1rem; border-radius:10px; font-weight:650; transition:top .15s; }
.skip-link:focus{ top:10px; }
.accent{ color:var(--tg); }

/* ===== header — Telegram top bar ===== */
.header{ position:sticky; top:0; z-index:100; background:rgba(23,33,43,.86); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; gap:.85rem; min-height:62px; }
.brand{ display:inline-flex; align-items:center; gap:.7rem; color:var(--ink); }
.brand__mark{ width:38px; height:38px; flex:0 0 auto; filter:drop-shadow(0 6px 14px rgba(42,171,238,.4)); }
.brand__txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand__name{ font-weight:750; font-size:1.02rem; } .brand__name b{ color:var(--tg); font-weight:750; }
.brand__status{ font-size:.72rem; color:var(--muted); display:flex; align-items:center; gap:.35rem; }
.brand__status::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--tg); box-shadow:0 0 8px 1px var(--tg); }
.nav>nav{ margin-left:auto; }
.nav__toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-left:auto; background:transparent; border:0; color:var(--muted); cursor:pointer; }
.nav__toggle svg{ width:24px; height:24px; } .nav__toggle .x{ display:none; }
body.nav-open .nav__toggle .m{ display:none; } body.nav-open .nav__toggle .x{ display:block; }
.nav__menu{ list-style:none; margin:0; padding:0; }
.nav__link{ display:flex; align-items:center; min-height:42px; padding:.5rem 1.05rem; font-weight:600; color:var(--muted); border-radius:999px; }
.nav__link:hover,.nav__link[aria-current="page"]{ color:var(--ink); background:var(--tg-soft); }
.nav__link--cta{ color:#06151f; background:var(--tg); }
.nav__link--cta:hover{ color:#06151f; filter:brightness(1.07); }
.nav__menu{ position:fixed; inset:62px 0 auto 0; display:grid; gap:.25rem; padding:1rem clamp(1.1rem,4vw,2.2rem) 1.4rem; background:var(--bar); border-bottom:1px solid var(--line); transform:translateY(-130%); opacity:0; visibility:hidden; transition:transform .28s var(--ease),opacity .28s,visibility .28s; }
body.nav-open .nav__menu{ transform:none; opacity:1; visibility:visible; }
@media (min-width:860px){ .nav__toggle{display:none} .nav__menu{position:static;inset:auto;display:flex;align-items:center;gap:.3rem;padding:0;background:none;border:0;transform:none;opacity:1;visibility:visible;margin-left:auto} }

/* ===== buttons ===== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:52px; padding:.85rem 1.55rem; border-radius:12px; border:1px solid transparent; font-family:var(--sans); font-weight:650; font-size:1rem; cursor:pointer; transition:transform .14s var(--ease),filter .2s,box-shadow .25s,background .2s; }
.btn:hover{ transform:translateY(-2px); }
.btn svg{ width:18px; height:18px; }
.btn--lg{ min-height:58px; padding:1rem 1.8rem; font-size:1.05rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.8rem; }
.btn--tg{ background:linear-gradient(180deg,var(--tg),var(--tg2)); color:#fff; box-shadow:0 14px 30px -16px rgba(42,171,238,.85); }
.btn--wa{ background:#21c063; color:#06170d; box-shadow:0 14px 30px -16px rgba(33,192,99,.7); }
.btn--tg:hover,.btn--wa:hover,.btn--primary:hover{ filter:brightness(1.07); }
.btn--primary{ background:linear-gradient(180deg,var(--tg),var(--tg2)); color:#fff; box-shadow:0 14px 30px -16px rgba(42,171,238,.85); }
.btn--line{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn--line:hover{ border-color:var(--tg); color:var(--tg); }

/* ===== hero ===== */
.hero{ padding-block:clamp(2.2rem,5.5vw,4rem) clamp(2rem,5vw,3.2rem); }
.hero__grid{ display:grid; gap:clamp(2rem,5vw,3.4rem); align-items:center; }
@media (min-width:980px){ .hero__grid{ grid-template-columns:1.05fr .95fr; } }
.hero h1{ font-size:clamp(2.2rem,5.4vw,4rem); margin:1rem 0 0; font-weight:800; }
.hero .lead{ margin-top:1rem; }
.hero .btn-row{ margin-top:1.4rem; }
/* AEO answer — styled as an incoming Telegram bubble */
.answer{ margin:1.4rem 0 0; max-width:60ch; padding:.85rem 1.15rem; background:var(--in); color:var(--text); border-radius:14px; border-top-left-radius:4px; box-shadow:0 8px 24px -16px rgba(0,0,0,.7); position:relative; }
.answer strong{ color:#dbe7f1; }
.hero__tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.4rem 0 0; list-style:none; padding:0; }
.hero__tags li{ font-size:.84rem; color:var(--tg); background:var(--tg-soft); border:1px solid var(--tg-soft); border-radius:999px; padding:.38rem .82rem; }

/* ===== Telegram CHANNEL widget (hero right) ===== */
.tg-channel{ background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 34px 80px -36px rgba(0,0,0,.9); overflow:hidden; }
.tg-channel__bar{ display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem; background:linear-gradient(180deg,#1f2c39,#1a2733); border-bottom:1px solid var(--line); }
.tg-channel__ava{ width:42px; height:42px; flex:0 0 auto; border-radius:50%; background:linear-gradient(180deg,var(--tg),var(--tg2)); display:grid; place-items:center; }
.tg-channel__ava svg{ width:22px; height:22px; fill:#fff; }
.tg-channel__id{ min-width:0; flex:1; }
.tg-channel__name{ display:flex; align-items:center; gap:.34rem; font-weight:650; color:var(--ink); font-size:.96rem; }
.tg-channel__name .verify{ width:15px; height:15px; flex:0 0 auto; fill:var(--verify); }
.tg-channel__name .scam{ font-size:.6rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--scam); border-radius:5px; padding:.1rem .32rem; }
.tg-channel__sub{ font-size:.74rem; color:var(--muted); margin-top:.1rem; }
.tg-channel__menu{ flex:0 0 auto; color:var(--faint); display:flex; flex-direction:column; gap:3px; padding:.4rem; }
.tg-channel__menu i{ width:4px; height:4px; border-radius:50%; background:currentColor; display:block; }
/* folder tabs */
.tabs{ display:flex; gap:.2rem; padding:.4rem .55rem 0; background:#16212c; border-bottom:1px solid var(--line); overflow-x:auto; }
.tabs span{ font-size:.78rem; font-weight:600; color:var(--muted); padding:.5rem .65rem; border-bottom:2px solid transparent; white-space:nowrap; }
.tabs span.on{ color:var(--tg); border-bottom-color:var(--tg); }
/* broadcast posts */
.tg-channel__body{ padding:1rem .9rem 1.1rem; display:grid; gap:.6rem; background:linear-gradient(180deg,#0f1923,#101b26); }
.post{ max-width:90%; justify-self:start; background:var(--in); border-radius:12px; border-top-left-radius:4px; padding:.6rem .8rem .5rem; font-size:.9rem; line-height:1.5; box-shadow:0 1px 1px rgba(0,0,0,.3); }
.post b{ color:#e3edf5; }
.post__foot{ display:flex; align-items:center; gap:.4rem; margin-top:.35rem; font-size:.66rem; color:var(--faint); }
.post__foot .views{ display:inline-flex; align-items:center; gap:.22rem; }
.post__foot .views svg{ width:12px; height:12px; stroke:var(--faint); fill:none; }
.post--pin{ border-left:3px solid var(--tg); }
.post__status{ justify-self:center; max-width:94%; text-align:center; background:rgba(94,194,106,.14); color:var(--ok); font-size:.76rem; font-weight:600; border-radius:999px; padding:.4rem .9rem; box-shadow:none; }

/* ===== trust stats ===== */
.stat-band .wrap{ padding-block:clamp(1.4rem,3vw,2rem); }
.stats{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:760px){ .stats{ grid-template-columns:repeat(3,1fr); } }
.stat{ display:flex; align-items:center; gap:.85rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:1.05rem 1.15rem; }
.stat__ic{ width:44px; height:44px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; background:var(--tg-soft); }
.stat__ic svg{ width:21px; height:21px; stroke:var(--tg); fill:none; }
.stat b{ display:block; color:var(--ink); font-size:1rem; line-height:1.25; }
.stat span{ font-size:.86rem; color:var(--muted); }

/* ===== sections ===== */
.section{ padding-block:clamp(2.6rem,6vw,5rem); }
.section--line{ border-top:1px solid var(--line2); }
.sechead{ max-width:62ch; margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.sechead h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-top:.6rem; }
.sechead p{ color:var(--muted); margin-top:.7rem; }
.prose{ color:var(--text); max-width:68ch; } .prose a{ color:var(--link); text-decoration:underline; text-underline-offset:3px; } .prose a:hover{ color:var(--ink); }
.prose strong{ color:var(--ink); }

/* ===== what we report — Telegram chat list ===== */
.chanlist{ display:grid; gap:.5rem; border:1px solid var(--line); border-radius:var(--r-lg); padding:.5rem; background:var(--bg2); }
.chanrow{ display:flex; align-items:flex-start; gap:.85rem; padding:.85rem .8rem; border-radius:12px; transition:background .16s var(--ease); }
.chanrow:hover{ background:var(--tg-soft2); }
.chanrow+.chanrow{ border-top:1px solid var(--line2); }
.chanrow__ava{ width:48px; height:48px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; background:linear-gradient(180deg,#243446,#1c2935); }
.chanrow__ava svg{ width:23px; height:23px; stroke:var(--tg); fill:none; }
.chanrow__main{ min-width:0; flex:1; }
.chanrow__top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.chanrow__name{ font-weight:650; color:var(--ink); font-size:1.02rem; }
.chanrow__time{ font-size:.7rem; color:var(--faint); flex:0 0 auto; }
.chanrow__msg{ color:var(--muted); font-size:.93rem; margin:.15rem 0 0; }
.chanrow__badge{ display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 .4rem; margin-top:.3rem; border-radius:999px; background:var(--tg); color:#06151f; font-size:.68rem; font-weight:800; }

/* ===== process — broadcast steps ===== */
.flow{ display:grid; gap:.7rem; max-width:780px; padding:0; margin:0; }
.flow li{ display:flex; gap:.9rem; align-items:flex-start; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:1rem 1.1rem; list-style:none; }
.flow__n{ width:30px; height:30px; flex:0 0 auto; border-radius:50%; background:linear-gradient(180deg,var(--tg),var(--tg2)); color:#fff; font-weight:800; font-size:.9rem; display:grid; place-items:center; }
.flow h3{ font-size:1.05rem; margin:0 0 .2rem; } .flow p{ margin:0; color:var(--muted); font-size:.93rem; }

/* ===== long-tail channel block ===== */
.callout{ display:grid; gap:1.2rem; align-items:center; background:linear-gradient(180deg,var(--panel),#141f29); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.5rem,4vw,2.4rem); }
@media (min-width:880px){ .callout{ grid-template-columns:1.3fr .7fr; } }
.callout h2{ font-size:clamp(1.5rem,3.2vw,2.1rem); }
.callout p{ color:var(--text); margin:.8rem 0 0; } .callout p a{ color:var(--link); text-decoration:underline; text-underline-offset:3px; }
.callout__card{ background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.2rem; }
.callout__card h3{ font-size:1rem; color:var(--tg); margin:0 0 .7rem; }
.callout__card ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.callout__card li{ display:flex; gap:.55rem; align-items:flex-start; color:var(--muted); font-size:.92rem; }
.callout__card li svg{ width:17px; height:17px; flex:0 0 auto; margin-top:.18rem; stroke:var(--tg); fill:none; }

/* ===== comparison ===== */
.compare{ width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.compare th,.compare td{ text-align:left; padding:.95rem 1rem; border-bottom:1px solid var(--line2); font-size:.95rem; vertical-align:top; }
.compare thead th{ color:var(--ink); background:var(--panel2); font-size:.84rem; font-weight:700; }
.compare td:first-child{ color:var(--muted); }
.compare tbody tr:last-child td{ border-bottom:0; }
.compare .yes{ color:var(--tg); font-weight:650; } .compare .no{ color:var(--faint); }
@media (max-width:600px){ .compare{ display:block; overflow-x:auto; white-space:nowrap; } }

/* ===== principles ===== */
.principles{ display:grid; gap:1.1rem; }
@media (min-width:760px){ .principles{ grid-template-columns:repeat(3,1fr); } }
.principle{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem; border-top:3px solid var(--tg); }
.principle h3{ font-size:1.1rem; margin:0 0 .4rem; } .principle p{ margin:0; color:var(--muted); }

/* ===== FAQ — Telegram bubbles ===== */
.faq{ display:grid; gap:.7rem; max-width:780px; }
.faq details{ background:var(--in); border-radius:14px; border-top-left-radius:4px; padding:0 1.2rem; }
.faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1.05rem 0; font-weight:650; color:var(--ink); min-height:46px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--tg); font-size:1.4rem; line-height:1; }
.faq details[open] summary::after{ content:"\2013"; }
.faq details>p{ margin:0; padding:0 0 1.1rem; color:var(--muted); }
.faq-grid{ display:grid; gap:clamp(1.4rem,3vw,2.4rem); } @media (min-width:900px){ .faq-grid{ grid-template-columns:.8fr 1.2fr; } }

/* ===== CTA — composer ===== */
.cta{ background:linear-gradient(180deg,var(--panel),#141f29); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.8rem,5vw,3rem); text-align:center; }
.cta h2{ font-size:clamp(1.8rem,4vw,2.6rem); } .cta p{ color:var(--muted); max-width:56ch; margin:.8rem auto 1.5rem; }
.composer{ display:flex; align-items:center; gap:.6rem; max-width:540px; margin:0 auto 1.4rem; background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:.45rem .45rem .45rem 1rem; }
.composer__clip{ flex:0 0 auto; color:var(--faint); } .composer__clip svg{ width:20px; height:20px; stroke:currentColor; fill:none; }
.composer__field{ flex:1; text-align:left; color:var(--faint); font-size:.95rem; }
.composer__send{ width:48px; height:48px; flex:0 0 auto; border-radius:50%; background:linear-gradient(180deg,var(--tg),var(--tg2)); display:grid; place-items:center; } .composer__send svg{ width:19px; height:19px; fill:#fff; }
.cta .btn-row{ justify-content:center; }

/* ===== footer ===== */
.footer{ border-top:1px solid var(--line); padding-block:clamp(2.4rem,6vw,3.6rem) 2rem; margin-top:clamp(2rem,5vw,3rem); background:var(--bg2); }
.footer__grid{ display:grid; gap:2rem; } @media (min-width:760px){ .footer__grid{ grid-template-columns:2fr 1fr 1.4fr; } }
.footer h4{ font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); margin:0 0 1rem; }
.footer__links{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; } .footer__links a{ color:var(--muted); } .footer__links a:hover{ color:var(--ink); }
.footer .brand{ margin-bottom:.4rem; } .footer__note{ color:var(--muted); font-size:.9rem; max-width:46ch; margin:1rem 0 0; }
.footer__bottom{ border-top:1px solid var(--line2); margin-top:2.4rem; padding-top:1.4rem; display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; color:var(--faint); font-size:.85rem; }

/* ===== contact page ===== */
.contact-hero{ text-align:center; padding-block:clamp(2.2rem,6vw,3.6rem) clamp(1.2rem,3vw,2rem); }
.contact-hero h1{ font-size:clamp(2.2rem,6vw,3.6rem); margin:.7rem 0 0; } .contact-hero .lead{ margin:1rem auto 0; }
.channels{ display:grid; gap:1.1rem; max-width:860px; margin:clamp(1.6rem,4vw,2.4rem) auto 0; } @media (min-width:680px){ .channels{ grid-template-columns:1fr 1fr; } }
.chan{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.6rem,4vw,2.2rem); text-align:center; }
.chan__glyph{ width:62px; height:62px; margin:0 auto 1rem; border-radius:50%; display:grid; place-items:center; background:var(--tg-soft); } .chan__glyph svg{ width:29px; height:29px; stroke:var(--tg); fill:none; }
.chan__label{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.chan__id{ font-weight:750; font-size:clamp(1.05rem,2.4vw,1.3rem); color:var(--ink); margin:.3rem 0 1.1rem; word-break:break-word; }
.chan__actions{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.copy{ display:inline-flex; align-items:center; gap:.4rem; min-height:50px; padding:.6rem 1.1rem; background:var(--bg2); border:1px solid var(--line); color:var(--muted); border-radius:999px; font-weight:600; font-size:.9rem; cursor:pointer; }
.copy:hover,.copy.copied{ color:var(--tg); border-color:var(--tg); } .copy svg{ width:15px; height:15px; }
.panels{ display:grid; gap:1.1rem; max-width:860px; margin:1.1rem auto 0; } @media (min-width:680px){ .panels{ grid-template-columns:1fr 1fr; } }
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.5rem,4vw,2rem); }
.panel h2{ font-size:1.1rem; margin:0 0 1rem; }
.checklist,.steps-list{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem; }
.checklist li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--muted); } .checklist .tick{ width:22px;height:22px;flex:0 0 auto;margin-top:.15rem;border-radius:50%;background:var(--tg);display:grid;place-items:center } .checklist .tick svg{ width:12px;height:12px;stroke:#06151f;fill:none }
.steps-list{ counter-reset:s; } .steps-list li{ display:flex; gap:.8rem; align-items:flex-start; color:var(--muted); } .steps-list li::before{ counter-increment:s; content:counter(s); flex:0 0 auto; width:26px;height:26px;border-radius:50%;background:var(--tg);color:#06151f;font-weight:800;font-size:.82rem;display:grid;place-items:center }
.reassure{ margin-top:1.2rem; color:var(--faint); font-size:.88rem; }

/* ===== solutions hub ===== */
.crumbs{ font-size:.85rem; color:var(--faint); } .crumbs a{ color:var(--muted); }
.svc{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.5rem,3vw,2.2rem); } .svc+.svc{ margin-top:1.1rem; }
.svc h2{ font-size:clamp(1.35rem,3vw,1.9rem); margin-bottom:.5rem; }
.svc__ans{ color:var(--text); margin:0 0 1rem; padding-left:1rem; border-left:3px solid var(--tg); }
.svc ul{ margin:0; padding-left:1.1rem; color:var(--muted); } .svc li{ margin-bottom:.4rem; } .svc li::marker{ color:var(--tg); }
.note{ background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--tg); border-radius:var(--r); padding:1.2rem 1.4rem; color:var(--text); } .note strong{ color:var(--ink); }
.post-grid{ display:grid; gap:1.1rem; } @media (min-width:680px){ .post-grid{ grid-template-columns:repeat(2,1fr); } }
.post-card{ display:flex; flex-direction:column; gap:.55rem; padding:1.6rem; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); transition:border-color .18s var(--ease), transform .18s var(--ease), box-shadow .25s; }
.post-card:hover{ border-color:var(--tg); transform:translateY(-4px); box-shadow:0 24px 50px -30px rgba(0,0,0,.8); }
.post-card__meta{ font-size:.82rem; color:var(--faint); letter-spacing:.03em; }
.post-card h3{ margin:0; } .post-card h3 a{ color:var(--ink); } .post-card h3 a:hover{ color:var(--tg); }
.post-card p{ margin:0; color:var(--muted); font-size:.96rem; }
.post-card__more{ margin-top:auto; color:var(--tg); font-weight:600; font-size:.92rem; }

/* ===== article / solution sub-page (blog-post + solution-page templates) ===== */
.article{ max-width:74ch; margin-inline:auto; }
.article h1{ font-size:clamp(1.9rem,4.4vw,2.9rem); margin:.6rem 0 0; }
.article h2{ margin-top:2.3rem; font-size:clamp(1.35rem,3vw,1.95rem); }
.article h3{ margin-top:1.6rem; font-size:clamp(1.12rem,2.4vw,1.4rem); }
.article p{ margin:1rem 0; }
.article ul,.article ol{ padding-left:1.2rem; color:var(--text); }
.article li{ margin-bottom:.5rem; } .article li::marker{ color:var(--tg); }
.article a:not(.btn){ color:var(--link); text-decoration:underline; text-underline-offset:3px; }
.article a:not(.btn):hover{ color:var(--ink); }
.article img{ border-radius:var(--r); border:1px solid var(--line); margin:1.5rem 0; }
.article .sources{ font-size:.9rem; color:var(--muted); } .article .sources li{ margin-bottom:.55rem; }
.meta{ color:var(--faint); font-size:.85rem; letter-spacing:.03em; margin:.5rem 0 .4rem; }

/* comparison tables (article) */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.3rem 0; border:1px solid var(--line); border-radius:var(--r); }
.table-wrap table{ width:100%; border-collapse:collapse; min-width:460px; }
.table-wrap th,.table-wrap td{ text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; color:var(--text); }
.table-wrap thead th{ color:var(--ink); background:var(--panel2); }
.table-wrap tbody tr:last-child td{ border-bottom:0; }
.table-wrap td:first-child{ color:var(--ink); font-weight:600; }

/* inline CTA — composer-style blue panel */
.inline-cta{ margin:1.9rem 0 2.3rem; padding:clamp(1.4rem,4vw,1.9rem) 1.5rem; border:1px solid var(--line); border-radius:var(--r); background:radial-gradient(130% 175% at 50% 0%, rgba(42,171,238,.16), transparent 60%), var(--panel2); }
.inline-cta h3{ margin:0 0 .5rem; font-size:clamp(1.2rem,3vw,1.5rem); color:var(--ink); }
.inline-cta p{ margin:0 0 1.2rem; color:var(--text); max-width:54ch; }
.inline-cta__btns{ display:flex; flex-wrap:wrap; gap:.75rem; }
@media (max-width:560px){ .inline-cta__btns .btn{ flex:1 1 140px; } }

/* ===== reveal ===== */
@keyframes rise{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:no-preference){ .reveal{ animation:rise .6s var(--ease) both; } .reveal--d1{animation-delay:.08s} .reveal--d2{animation-delay:.16s} }

/* ===== mobile hardening ===== */
.prose a,.footer__links a,.chan__id,.crumbs{ overflow-wrap:anywhere; } .btn{ overflow-wrap:normal; word-break:keep-all; }
@supports (padding:max(0px)){ .wrap{ padding-left:max(clamp(1.1rem,4vw,2.2rem),env(safe-area-inset-left)); padding-right:max(clamp(1.1rem,4vw,2.2rem),env(safe-area-inset-right)); } }
@media (max-width:560px){ .btn-row .btn{ flex:1 1 100%; } .post{ max-width:96%; } }

/* ===== compact hero — keep contact buttons above the fold (desktop + mobile) ===== */
.hero{ padding-top:clamp(1.2rem,2.6vw,1.9rem)!important; }
.hero h1{ font-size:clamp(1.95rem,4.4vw,3.2rem)!important; }