/* Alerts Fusion for SharePoint - design system
   Tokens follow apps365.pro; signal colours come from the Alerts Fusion bell icon. */
@font-face{font-family:"Plus Jakarta Sans";src:url(../fonts/PlusJakartaSans-latin-var.woff2) format("woff2");font-weight:600 800;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/Inter-latin-var.woff2) format("woff2");font-weight:400 600;font-display:swap}

:root{
  --ink:#0f1222;--ink-2:#2a2e45;--muted:#5b6076;--faint:#8a90a6;
  --line:#e7e8f0;--line-2:#eef0f6;--bg:#fff;--surface:#f7f7fb;--surface-2:#f1f2f8;--card:#fff;
  --brand:#5b4be1;--brand-2:#7c6bf0;--brand-ink:#3a2fb0;--brand-soft:#efeafe;
  --accent:#ff6a3d;--accent-2:#ff8a5b;
  --night:#14151f;--night-2:#1c1e2b;--night-line:#2b2e40;
  --signal:#2fd3c6;--flare:#ee4523;
  --ok:#107c10;--warn:#c19c00;--err:#a4262c;
  --grad:linear-gradient(120deg,#5b4be1 0%,#7c6bf0 55%,#9f7cf5 100%);
  --radius:18px;--radius-sm:12px;--radius-lg:26px;
  --shadow-sm:0 1px 2px rgba(16,18,34,.06),0 2px 8px rgba(16,18,34,.05);
  --shadow:0 10px 30px -12px rgba(23,20,60,.22);
  --shadow-lg:0 30px 70px -28px rgba(23,20,60,.35);
  --ring:0 0 0 4px rgba(91,75,225,.22);
  --container:1200px;--gutter:clamp(16px,4vw,40px);
  --display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#f3f4fb;--ink-2:#d6d8e6;--muted:#a2a7bd;--faint:#7b8098;
    --line:#262a40;--line-2:#202336;--bg:#0d0f1a;--surface:#131626;--surface-2:#191c2f;--card:#161a2b;
    --brand:#8d80f5;--brand-2:#a397f8;--brand-ink:#c9c2ff;--brand-soft:#221f45;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow:0 12px 30px -12px rgba(0,0,0,.6);--shadow-lg:0 30px 70px -28px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-underline-offset:3px}
a:hover{color:var(--brand-ink)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.15;letter-spacing:-.02em;margin:0 0 .6em;color:var(--ink)}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em}
ul,ol{padding-left:1.25em}
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 .78rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin:0 0 14px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(255,106,61,.18)}
.eyebrow-light{color:#cfd2ff}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--muted);max-width:62ch}
.muted{color:var(--muted)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid transparent;font:700 .95rem/1.1 var(--display);text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,color .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 20px -10px rgba(91,75,225,.8)}
.btn-primary:hover{background:var(--brand-ink);color:#fff}
.btn-accent{background:var(--accent);color:#1a0d07;box-shadow:0 10px 24px -10px rgba(255,106,61,.9)}
.btn-accent:hover{background:var(--accent-2);color:#1a0d07}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28)}
.btn-light:hover{background:rgba(255,255,255,.16);color:#fff}
.btn-lg{min-height:52px;padding:14px 26px;font-size:1.02rem}
.arrow::after{content:"\2192";transition:transform .15s}
a:hover .arrow::after,.arrow:hover::after{transform:translateX(3px)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-icon{width:36px;height:36px;border-radius:9px}
.brand-name{font:800 1.08rem/1 var(--display);letter-spacing:-.01em;display:flex;flex-direction:column;gap:3px}
.brand-name small{font:600 .7rem/1 var(--body);color:var(--muted);letter-spacing:.02em}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav>a,.nav-drop>summary{padding:8px 12px;border-radius:999px;color:var(--ink-2);text-decoration:none;font:600 .93rem/1 var(--body);cursor:pointer}
.nav>a:hover,.nav-drop>summary:hover{background:var(--surface-2);color:var(--ink)}
.nav a[aria-current],.nav-drop[data-current]>summary{color:var(--brand);background:var(--brand-soft)}
.nav-drop,.menu-drop{position:relative}
.nav-drop>summary,.menu-drop>summary{list-style:none;display:flex;align-items:center;gap:6px}
.nav-drop>summary::-webkit-details-marker,.menu-drop>summary::-webkit-details-marker,.menu>summary::-webkit-details-marker,.faq>summary::-webkit-details-marker{display:none}
.nav-drop>summary::after,.menu-drop>summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.nav-drop .drop{position:absolute;top:calc(100% + 8px);left:-8px;min-width:250px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:8px;display:grid}
.nav-drop .drop a{padding:10px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:500}
.nav-drop .drop a:hover,.nav-drop .drop a[aria-current]{background:var(--brand-soft);color:var(--brand)}
.header-cta{display:flex;gap:8px}
.header-cta .btn{min-height:40px;padding:8px 16px;font-size:.9rem}
.menu{display:none;margin-left:auto}
.menu>summary{list-style:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);display:grid;place-content:center;gap:4px;cursor:pointer}
.menu>summary span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.menu[open]>summary span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu[open]>summary span:nth-child(2){opacity:0}
.menu[open]>summary span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);padding:12px var(--gutter) 20px;display:grid;gap:4px;max-height:calc(100vh - 68px);overflow:auto}
.menu-panel>a:not(.btn),.menu-drop>summary{padding:12px 4px;border-bottom:1px solid var(--line-2);color:var(--ink);text-decoration:none;font:600 1rem/1.2 var(--body)}
.menu-drop .drop{display:grid;padding:4px 0 8px 12px}
.menu-drop .drop a{padding:10px 4px;color:var(--ink-2);text-decoration:none}
.menu-panel a[aria-current]{color:var(--brand)}
.menu-panel .btn{margin-top:10px}
@media (max-width:1060px){.header-cta .btn-ghost{display:none}}
@media (max-width:920px){.nav,.header-cta{display:none}.menu{display:block}}

/* Breadcrumbs */
.crumbs{padding-top:18px}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;font-size:.86rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--faint)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--brand)}

/* Sections */
.section{padding:clamp(56px,8vw,104px) 0}
.section-tight{padding:clamp(40px,6vw,72px) 0}
.section-alt{background:var(--surface)}
.section-head{max-width:720px;margin-bottom:clamp(28px,4vw,48px)}
.section-head.center{margin-left:auto;margin-right:auto}

/* Hero: the "signal room" */
.hero{position:relative;background:var(--night);color:#e8e9f4;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(600px 380px at 85% 10%,rgba(47,211,198,.18),transparent 60%),
  radial-gradient(520px 360px at 8% 100%,rgba(238,69,35,.16),transparent 60%),
  radial-gradient(700px 500px at 60% 120%,rgba(91,75,225,.35),transparent 65%),
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/40px 40px,
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/40px 40px}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,5vw,64px);align-items:center;padding:clamp(48px,7vw,96px) var(--gutter) clamp(56px,8vw,110px)}
.hero h1{color:#fff;margin-bottom:.45em}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--signal),#9cf3ea);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{color:#b9bcd4}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 22px}
.hero-proof{display:flex;flex-wrap:wrap;gap:10px 22px;padding:0;margin:0;list-style:none;font-size:.9rem;color:#a7abc6}
.hero-proof li{display:flex;align-items:center;gap:8px}
.hero-proof li::before{content:"";width:16px;height:16px;border-radius:50%;background:rgba(47,211,198,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%232fd3c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.stars{color:#ffc04d;letter-spacing:1px}
.hero-chip{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:.85rem;color:#d5d7ea;margin-bottom:22px;text-decoration:none}
.hero-chip img{width:24px;height:24px;border-radius:6px}

/* SharePoint page mock (pure CSS) */
.sp-mock{position:relative;border-radius:16px;background:#fff;color:#323130;box-shadow:0 40px 90px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08);overflow:hidden;font:400 13px/1.45 "Segoe UI",var(--body);transform:perspective(1600px) rotateY(-6deg) rotateX(2deg);transform-origin:left center}
.sp-chrome{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#f3f2f1;border-bottom:1px solid #e1dfdd}
.sp-dots{display:flex;gap:6px}
.sp-dots i{width:10px;height:10px;border-radius:50%;background:#d0cecc}
.sp-dots i:first-child{background:#ff5f57}.sp-dots i:nth-child(2){background:#febc2e}.sp-dots i:nth-child(3){background:#28c840}
.sp-url{flex:1;background:#fff;border:1px solid #e1dfdd;border-radius:999px;padding:3px 12px;font-size:11.5px;color:#605e5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-suite{position:relative;z-index:2;display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;background:#0f6cbd;color:#fff;font-weight:600}
.sp-waffle{width:14px;height:14px;background:radial-gradient(circle,#fff 1.4px,transparent 1.6px) 0 0/4.67px 4.67px}
.sp-search{margin-left:auto;width:34%;height:24px;border-radius:4px;background:rgba(255,255,255,.22)}
.sp-msg{position:relative;z-index:1;display:flex;align-items:flex-start;gap:10px;padding:9px 14px;font-size:12.5px;animation:sp-drop .6s cubic-bezier(.2,.8,.2,1) .5s both}
.sp-msg-warn{background:#fff4ce;color:#323130}
.sp-msg-warn i{flex:none;width:16px;height:16px;margin-top:1px;border-radius:50%;background:#c19c00;color:#fff;font:700 11px/16px var(--body);text-align:center;font-style:normal}
.sp-msg b{margin-left:auto;font-weight:400;color:#605e5c}
.sp-site{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #edebe9}
.sp-logo{width:30px;height:30px;border-radius:6px;background:linear-gradient(135deg,#0f6cbd,#5b4be1)}
.sp-title{font-size:16px;font-weight:600;color:#201f1e}
.sp-links{margin-left:auto;display:flex;gap:14px;color:#605e5c;font-size:12px}
.sp-body{position:relative;padding:16px 18px 22px;min-height:236px}
.sp-banner{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:8px;background:linear-gradient(110deg,#5b4be1,#8d6ff2);color:#fff;box-shadow:0 10px 24px -14px rgba(91,75,225,.9);animation:sp-rise .6s cubic-bezier(.2,.8,.2,1) 1.1s both}
.sp-banner strong{display:block;font-size:14px}
.sp-banner span{font-size:12px;opacity:.9}
.sp-banner em{margin-left:auto;font-style:normal;font-weight:600;font-size:12px;background:rgba(255,255,255,.18);padding:6px 10px;border-radius:999px;white-space:nowrap}
.sp-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;margin-top:14px}
.sp-card{border:1px solid #edebe9;border-radius:8px;padding:12px}
.sp-card .ph{height:64px;border-radius:6px;background:linear-gradient(135deg,#e8f1fb,#efeafe);margin-bottom:10px}
.sp-line{height:8px;border-radius:4px;background:#edebe9;margin:7px 0}
.sp-line.s{width:60%}.sp-line.m{width:80%}
.sp-popup{position:absolute;right:18px;bottom:18px;width:min(250px,64%);background:#fff;border-radius:10px;box-shadow:0 24px 50px -16px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06);overflow:hidden;animation:sp-pop .55s cubic-bezier(.2,1.3,.4,1) 1.8s both}
.sp-popup-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--night);color:#fff;font-weight:600;font-size:12.5px}
.sp-popup-head b{font-weight:400;opacity:.7}
.sp-popup p{margin:0;padding:10px 12px 4px;font-size:12px;color:#484644}
.sp-popup .sp-btn{display:inline-block;margin:6px 12px 12px;padding:6px 12px;border-radius:6px;background:var(--brand);color:#fff;font-size:12px;font-weight:600}
.sp-tag{position:absolute;z-index:2;font:700 10.5px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:var(--signal);color:#062b28;box-shadow:0 6px 16px -6px rgba(47,211,198,.8);animation:sp-fade .4s ease both}
.sp-tag.t1{top:88px;right:-12px;animation-delay:.9s}
.sp-tag.t2{top:200px;right:-10px;background:#fff;color:var(--brand-ink);animation-delay:1.5s}
.sp-tag.t3{bottom:150px;right:-10px;background:var(--flare);color:#fff;animation-delay:2.2s}
.mock-wrap{position:relative}
@keyframes sp-drop{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes sp-rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sp-pop{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}
@keyframes sp-fade{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}

/* Six formats */
.formats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.format{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 14px 16px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s}
.format:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
.format h3{font-size:1rem;margin:12px 0 4px}
.format p{font-size:.86rem;color:var(--muted);margin:0}
.mini{position:relative;height:84px;border-radius:10px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line-2)}
.mini::before{content:"";position:absolute;left:10px;right:10px;top:36px;height:6px;border-radius:3px;background:var(--line);box-shadow:0 14px 0 var(--line),0 28px 0 var(--line)}
.mini i{position:absolute;display:block}
.mini-banner i{left:8px;right:8px;top:8px;height:22px;border-radius:6px;background:var(--grad)}
.mini-bar i{left:0;right:0;top:0;height:16px;background:#fff4ce;border-bottom:2px solid #c19c00}
.mini-popup i{left:22%;right:22%;top:18px;bottom:14px;border-radius:7px;background:var(--card);box-shadow:0 8px 18px -6px rgba(0,0,0,.35),0 0 0 999px rgba(15,18,34,.28)}
.mini-panel i{top:0;bottom:0;right:0;width:42%;background:var(--card);box-shadow:-8px 0 18px -8px rgba(0,0,0,.35);border-left:3px solid var(--brand)}
.mini-alert i{left:16px;right:16px;top:20px;height:40px;border-radius:7px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--flare);box-shadow:var(--shadow-sm)}
.mini-carousel i{left:0;right:0;bottom:0;height:20px;background:var(--night);overflow:hidden}
.mini-carousel i::after{content:"Office closed Friday \2022 New HR portal live \2022 Town hall Thursday";position:absolute;white-space:nowrap;top:4px;left:100%;font:600 9px/1 var(--body);color:var(--signal);animation:ticker 9s linear infinite}
@keyframes ticker{to{transform:translateX(-260%)}}

/* Feature grid */
.features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.feature{padding:22px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line)}
.feature h3{font-size:1.04rem;margin:14px 0 6px}
.feature p{font-size:.93rem;color:var(--muted);margin:0}
.ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico-signal{background:rgba(47,211,198,.14);color:#0f9d92}
.ico-flare{background:rgba(238,69,35,.12);color:var(--flare)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:step;list-style:none;padding:0;margin:0}
.step{position:relative;padding:26px 24px 24px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);display:block;font:800 2.4rem/1 var(--display);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:12px}
.step h3{margin-bottom:6px}
.step p{color:var(--muted);margin:0;font-size:.95rem}

/* Use cases */
.cases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.case{padding:22px;border-radius:var(--radius);background:var(--night);color:#d7d9ea;position:relative;overflow:hidden}
.case::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(47,211,198,.25),transparent 70%)}
.case h3{color:#fff;font-size:1.04rem}
.case p{font-size:.92rem;margin:0;color:#aeb2cb}
.case .fmt{display:inline-block;margin-top:14px;font:700 .72rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--signal)}

/* Pricing */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:28px 26px;border-radius:var(--radius-lg);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.plan-popular{border:2px solid var(--brand);box-shadow:var(--shadow-lg)}
.plan-badge{position:absolute;top:-13px;left:26px;padding:5px 12px;border-radius:999px;background:var(--grad);color:#fff;font:700 .74rem/1 var(--display);letter-spacing:.04em}
.plan-name{font:800 1.15rem/1.2 var(--display);margin:0 0 10px}
.plan-price{font:800 2.6rem/1 var(--display);letter-spacing:-.03em;margin:0}
.plan-price span{font:500 .95rem/1 var(--body);color:var(--muted);letter-spacing:0}
.plan-users{color:var(--muted);margin:8px 0 18px}
.plan ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px;font-size:.95rem}
.plan li{display:flex;gap:10px}
.plan li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%235b4be1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.plan .btn{margin-top:auto}
.price-note{margin-top:22px;font-size:.9rem;color:var(--muted)}

/* FAQ */
.faq-list{display:grid;gap:12px;max-width:860px}
.faq{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);padding:0 20px}
.faq>summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;font:700 1.02rem/1.4 var(--display)}
.faq>summary::after{content:"+";position:absolute;right:0;top:14px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font:600 1.1rem/1 var(--body);transition:transform .2s}
.faq[open]>summary::after{transform:rotate(45deg)}
.faq p{color:var(--muted);margin:0 0 18px}
.faq-group{margin:40px 0 14px;font-size:1.25rem}

/* Suite */
.suite{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.app{display:flex;gap:14px;align-items:center;padding:16px;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}
.app:hover{border-color:var(--brand);transform:translateY(-2px);color:var(--ink)}
.app img{width:48px;height:48px;border-radius:12px;flex:none}
.app strong{display:block;font-family:var(--display)}
.app span{font-size:.88rem;color:var(--muted)}

/* CTA band */
.cta-band{background:var(--night);color:#cfd2e6;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 300px at 90% 0,rgba(91,75,225,.45),transparent 70%),radial-gradient(400px 260px at 0 100%,rgba(47,211,198,.18),transparent 70%)}
.cta-inner{position:relative;display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px)}
.cta-band h2{color:#fff}
.cta-band p{color:#b4b8d0;max-width:58ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}

/* Inner page hero */
.page-hero{padding:clamp(28px,4vw,48px) 0 clamp(32px,5vw,56px);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--bg))}
.page-hero .lead{margin-bottom:0}
.page-hero .hero-actions{margin-bottom:0}

/* Split rows (features page) */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(36px,5vw,64px) 0;border-bottom:1px solid var(--line-2)}
.split:last-child{border-bottom:0}
.split.flip>:first-child{order:2}
.split ul{color:var(--muted);padding-left:1.1em}
.split li{margin:6px 0}
.shot{margin:0;border-radius:var(--radius);border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);overflow:hidden}
.shot img{width:100%}
.shot figcaption{padding:10px 14px;font-size:.84rem;color:var(--muted);border-top:1px solid var(--line-2);background:var(--card)}
.tags{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:16px 0 0;list-style:none}
.tags li{padding:6px 12px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font:600 .82rem/1 var(--body)}

/* Article / guide layout */
.article-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(28px,5vw,56px);padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(48px,6vw,80px)}
.side-nav{position:sticky;top:88px;align-self:start;font-size:.92rem}
.side-nav h2{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.side-nav ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:2px}
.side-nav a{display:block;padding:7px 10px;border-radius:8px;color:var(--ink-2);text-decoration:none}
.side-nav a:hover{background:var(--surface-2)}
.side-nav a[aria-current]{background:var(--brand-soft);color:var(--brand);font-weight:600}
.prose{max-width:760px}
.prose>h1{font-size:clamp(1.9rem,4vw,2.8rem)}
.prose h2{font-size:clamp(1.35rem,2.4vw,1.7rem);margin-top:1.8em}
.prose h3{margin-top:1.5em}
.prose p,.prose li{color:var(--ink-2)}
.prose li{margin:6px 0}
.prose figure{margin:22px 0}
.prose figure img{border-radius:10px;border:1px solid var(--line);background:#fff}
.prose figcaption{font-size:.85rem;color:var(--muted);margin-top:8px}
.prose dl{margin:0 0 1.2em}
.prose dt{font:700 1rem/1.4 var(--display);margin-top:16px;color:var(--ink)}
.prose dd{margin:4px 0 0;color:var(--ink-2)}
.prose code,.kbd{font:600 .88em/1 ui-monospace,SFMono-Regular,Consolas,monospace;background:var(--surface-2);border:1px solid var(--line);padding:2px 6px;border-radius:6px}
.prose .lead{color:var(--muted)}
.callout{margin:22px 0;padding:16px 18px;border-radius:var(--radius-sm);background:var(--brand-soft);border-left:4px solid var(--brand);color:var(--ink-2)}
.callout-warn{background:color-mix(in srgb,#fff4ce 70%,var(--bg));border-left-color:var(--warn)}
.callout p:last-child{margin:0}
.steps-list{counter-reset:li;list-style:none;padding:0}
.steps-list>li{position:relative;padding-left:46px;margin:18px 0}
.steps-list>li::before{counter-increment:li;content:counter(li);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font:800 .95rem/1 var(--display)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:48px}
.pager a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-sm);text-decoration:none;color:var(--ink)}
.pager a:hover{border-color:var(--brand)}
.pager small{display:block;color:var(--muted);font-size:.8rem;margin-bottom:4px}
.pager .next{text-align:right;grid-column:2}
.meta{font-size:.86rem;color:var(--muted);margin:-6px 0 22px}
.toc{padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);margin:0 0 28px}
.toc strong{font-family:var(--display)}
.toc ol{margin:8px 0 0;padding-left:1.2em}

/* Help index */
.help-groups{display:grid;gap:40px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{display:block;padding:20px 20px 18px;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s,box-shadow .2s}
.card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow);color:var(--ink)}
.card h3,.card .h3{font:700 1.02rem/1.3 var(--display);margin:0 0 6px}
.card p{font-size:.9rem;color:var(--muted);margin:0}

/* Contact */
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.contact-card{padding:24px;border-radius:var(--radius);border:1px solid var(--line);background:var(--card)}
.contact-card h2{font-size:1.15rem;margin:14px 0 6px}
.contact-card p{color:var(--muted);font-size:.95rem}

/* Footer */
.site-footer{background:#0b0c14;color:#a3a7c0;font-size:.92rem}
.site-footer a{color:#d4d6e6;text-decoration:none}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px;padding-top:56px;padding-bottom:40px}
.footer-brand .brand,.footer-brand .brand-name{color:#fff}
.footer-brand .brand-name small{color:#8f93ad}
.footer-brand p{margin:16px 0 18px;max-width:36ch}
.footer-maker img{width:116px;opacity:.9}
.footer-h{font:700 .78rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.site-footer ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:9px}
.footer-apps a{display:flex;align-items:center;gap:10px}
.footer-apps img{width:22px;height:22px;border-radius:6px}
.footer-base{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;padding-top:22px;padding-bottom:30px;border-top:1px solid #1d2032;font-size:.84rem}
.footer-base p{margin:0;flex:1 1 420px}
.footer-social,.footer-legal{display:flex !important;flex-wrap:wrap;gap:8px 16px !important;margin:0 !important}

/* Error pages */
.oops{padding:clamp(56px,10vw,120px) 0;text-align:center}
.oops .cards{text-align:left;margin-top:32px}

/* Responsive */
@media (max-width:1100px){
  .formats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .features,.cases{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:920px){
  .hero-inner,.cta-inner,.split{grid-template-columns:1fr}
  .split.flip>:first-child{order:0}
  .sp-mock{transform:none}
  .cta-actions{justify-content:flex-start}
  .plans,.steps,.suite,.cards,.contact-grid{grid-template-columns:1fr}
  .plan-popular{order:-1}
  .article-layout{grid-template-columns:1fr}
  .side-nav{position:static;order:2;border-top:1px solid var(--line);padding-top:24px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .formats,.features,.cases{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .sp-links,.sp-tag{display:none}
  .sp-grid{grid-template-columns:1fr}
  .sp-banner em{display:none}
  .pager{grid-template-columns:1fr}
  .pager .next{grid-column:1}
  .hero-actions .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* Tables (facts, comparisons) */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.facts,.compare{width:100%;border-collapse:collapse;font-size:.95rem}
.facts th,.facts td,.compare th,.compare td{padding:13px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-2)}
.facts tr:last-child>*,.compare tbody tr:last-child>*{border-bottom:0}
.facts th{width:30%;font:700 .92rem/1.4 var(--display);color:var(--ink);background:var(--surface)}
.facts td,.compare td{color:var(--ink-2)}
.compare thead th{font:700 .82rem/1.2 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--surface)}
.compare tbody th{font:700 .92rem/1.4 var(--display);color:var(--ink)}
.prose .table-wrap{margin:20px 0}
.pill{display:inline-block;padding:4px 10px;border-radius:6px;font:600 .82rem/1.2 var(--body);white-space:nowrap;border-left:3px solid}
.pill-info{background:#f3f2f1;color:#323130;border-color:#605e5c}
.pill-ok{background:#dff6dd;color:#0b5a08;border-color:#107c10}
.pill-blocked{background:#fde7e9;color:#8a1c22;border-color:#a4262c}
.pill-warn{background:#fff4ce;color:#5c4a00;border-color:#c19c00}
.pill-severe{background:#fed9cc;color:#8a2e0b;border-color:#d83b01}
.pill-err{background:#fde7e9;color:#8a1c22;border-color:#a80000}
.contact-card h3{font-size:1.1rem;margin:14px 0 6px}
.help-groups h2{font-size:1.4rem}
.split figure{margin:0;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
.split figure img{margin:0 auto}
.split figcaption{font-size:.85rem;color:#5b6076;margin-top:10px}