/* ============================================================================
   Siteward design system
   Ported from the Claude Design project "Omnis WordPress Fleet Monitoring"
   (Siteward Site.dc.html). Tokens are lifted from that file rather than
   eyeballed, so colours, radii and type sizes match the design exactly.

   Loaded AFTER style.css, so it overrides the previous theme progressively.
   ========================================================================= */

/* ---------- Self-hosted fonts (no third-party requests) ---------- */
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 700;              /* variable: one file covers the range */
  font-display:swap;
  src:url('../fonts/instrument-sans-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/instrument-sans-italic-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/jetbrains-mono-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Tokens ---------- */
:root{
  --sw-blue:#2563EB;
  --sw-blue-dark:#1E3A8A;
  --sw-blue-mid:#3B7BFF;
  --sw-blue-pale:#7FA8FF;
  --sw-ink:#0b1220;
  --sw-ink-deep:#080f1f;
  --sw-navy:#0A1633;

  --sw-body:#475569;
  --sw-muted:#57627a;
  --sw-soft:#64748b;
  --sw-faint:#94a3b8;
  --sw-onnavy:#8FA4CD;

  --sw-line:#e6ebf4;
  --sw-line-soft:#eef2f8;
  --sw-bg:#fff;
  --sw-bg-tint:#FBFCFE;
  --sw-bg-cool:#F7F9FD;
  --sw-bg-blue:#EFF5FF;
  --sw-bg-blue-soft:#F5F9FF;

  --sw-ok:#067647;      --sw-ok-bg:#ECFDF3;  --sw-ok-bd:#ABEFC6;
  --sw-warn:#B54708;    --sw-warn-bg:#FFFAEB; --sw-warn-bd:#FCDF8A;
  --sw-amber:#F59E0B;
  --sw-bad:#B42318;     --sw-bad-bg:#FEF2F2;  --sw-bad-bd:#FBCFCB;

  --sw-r-sm:9px; --sw-r:11px; --sw-r-md:14px; --sw-r-lg:16px; --sw-r-pill:999px;
  --sw-shadow:0 18px 40px -22px rgba(15,35,80,.32);
  --sw-shadow-lg:0 40px 80px -32px rgba(15,35,80,.40);
  --sw-wrap:1200px;
}

/* ---------- Base ---------- */
body.siteward{
  font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--sw-bg);
  color:var(--sw-ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
}
/* Heading defaults, deliberately at ZERO specificity via :where().
   Written as `body.siteward h1,...` this was (0,2,1) and silently outranked
   30 heading rules in style.css, stripping their margins, weights and colours
   (the homepage h1 lost `margin:24px auto 0` and stopped centring). As a
   :where() pair it still supplies a default for headings nothing else styles,
   but any real rule now wins. Do not raise this back to a class selector. */
:where(body.siteward) :where(h1,h2,h3,h4){
  margin:0;letter-spacing:-.03em;line-height:1.06;font-weight:600;color:var(--sw-ink);
}
/* Chrome links (nav, footer, cards, buttons) take their colour from context.
   This reset is (0,2,1), so anything that needs a real link colour must beat
   it: see `body.siteward .docs a` below, which restores prose links. A bare
   `.docs a` loses here and leaves every in-content link looking like body
   text with no underline. */
body.siteward a{color:inherit;text-decoration:none}
body.siteward a:hover{color:var(--sw-blue)}
.sw-mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

.sw-wrap{max-width:var(--sw-wrap);margin:0 auto;padding:0 24px}
.sw-section{padding:76px 0}
.sw-section.tint{background:var(--sw-bg-tint)}
.sw-section.cool{background:var(--sw-bg-cool)}
.sw-section.blue{background:var(--sw-bg-blue)}
.sw-center{text-align:center}
.sw-eyebrow{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sw-blue);margin-bottom:14px}
.sw-h2{font-size:clamp(30px,4vw,44px)}
.sw-lede{margin-top:14px;font-size:17.5px;line-height:1.55;color:var(--sw-muted);max-width:620px}
.sw-center .sw-lede{margin-left:auto;margin-right:auto}

/* ---------- Buttons ---------- */
.sw-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--sw-r);padding:12px 20px;font-size:15px;font-weight:600;
  border:1px solid transparent;cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.sw-btn-primary{background:var(--sw-blue);border-color:var(--sw-blue);color:#fff;
  box-shadow:0 8px 20px -8px rgba(37,99,235,.65)}
.sw-btn-primary:hover{background:var(--sw-blue-dark);border-color:var(--sw-blue-dark);color:#fff}
.sw-btn-ghost{background:#fff;border-color:#d8dde6;color:var(--sw-ink)}
.sw-btn-ghost:hover{background:var(--sw-bg-blue-soft);border-color:#c3d8ff;color:var(--sw-blue)}
.sw-btn-sm{padding:9px 15px;font-size:14px}

/* ---------- Badges, pills, verdicts ---------- */
.sw-pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--sw-r-pill);
  padding:5px 11px;font-size:12.5px;font-weight:600;border:1px solid transparent}
.sw-pill.ok{color:var(--sw-ok);background:var(--sw-ok-bg);border-color:var(--sw-ok-bd)}
.sw-pill.warn{color:var(--sw-warn);background:var(--sw-warn-bg);border-color:var(--sw-warn-bd)}
.sw-pill.bad{color:var(--sw-bad);background:var(--sw-bad-bg);border-color:var(--sw-bad-bd)}
.sw-pill.neutral{color:var(--sw-body);background:#f1f5f9;border-color:#dde3ec}
.sw-tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:5px;
  color:var(--sw-ok);background:var(--sw-ok-bg)}
.sw-tag.pro{color:var(--sw-blue);background:var(--sw-bg-blue)}

/* Verdict chip used on comparison pages: honest about who wins each round. */
.sw-verdict{display:inline-flex;align-items:center;gap:7px;border-radius:var(--sw-r-pill);
  padding:6px 13px;font-size:13px;font-weight:600;border:1px solid}
.sw-verdict.win{color:var(--sw-ok);background:var(--sw-ok-bg);border-color:var(--sw-ok-bd)}
.sw-verdict.draw{color:var(--sw-body);background:#f1f5f9;border-color:#dde3ec}
.sw-verdict.lose{color:var(--sw-warn);background:var(--sw-warn-bg);border-color:var(--sw-warn-bd)}

/* ---------- Cards ---------- */
.sw-card{background:#fff;border:1px solid var(--sw-line);border-radius:var(--sw-r-md);
  padding:26px;box-shadow:var(--sw-shadow)}
.sw-card.flat{box-shadow:none}
.sw-card h3{font-size:19px;margin-bottom:9px}
.sw-card p{margin:0;font-size:15px;line-height:1.6;color:var(--sw-body)}
.sw-grid{display:grid;gap:20px}
.sw-grid-2{grid-template-columns:repeat(2,1fr)}
.sw-grid-3{grid-template-columns:repeat(3,1fr)}
.sw-grid-4{grid-template-columns:repeat(4,1fr)}

/* ---------- Stat blocks ---------- */
.sw-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.sw-stat{background:#fff;border:1px solid var(--sw-line);border-radius:var(--sw-r-md);padding:22px}
.sw-stat .k{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sw-faint)}
.sw-stat .v{font-size:40px;font-weight:600;letter-spacing:-.04em;margin-top:8px;color:var(--sw-ink)}
.sw-stat .s{margin-top:6px;font-size:13.5px;color:var(--sw-soft)}

/* ---------- Comparison tables ---------- */
.sw-tablewrap{overflow-x:auto;border:1px solid var(--sw-line);border-radius:var(--sw-r-md);background:#fff}
.sw-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.sw-table th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sw-faint);font-weight:500;padding:14px 18px;
  border-bottom:1px solid var(--sw-line);background:var(--sw-bg-cool)}
.sw-table td{padding:14px 18px;border-bottom:1px solid var(--sw-line-soft);color:var(--sw-body);vertical-align:top}
.sw-table tr:last-child td{border-bottom:0}
.sw-table td:first-child{color:var(--sw-ink);font-weight:600}
.sw-table .own{background:var(--sw-bg-blue-soft)}

/* ---------- Prose (existing page + post content) ---------- */
.docs{max-width:820px;margin:0 auto;padding:8px 24px 20px;font-size:16.5px;line-height:1.72;color:var(--sw-body)}
.docs h2{font-size:clamp(24px,3vw,32px);margin:44px 0 14px;color:var(--sw-ink)}
.docs h3{font-size:20px;margin:30px 0 10px;color:var(--sw-ink)}
.docs p{margin:0 0 16px}
.docs ul,.docs ol{margin:0 0 18px;padding-left:22px}
.docs li{margin:0 0 8px}
/* Specificity (0,3,1): must outrank the `body.siteward a` chrome reset. */
body.siteward .docs a{color:var(--sw-blue);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
body.siteward .docs a:hover{color:var(--sw-blue-mid);text-decoration-thickness:2px}
/* Buttons and the dark end CTA opt back out of prose link styling. */
body.siteward .docs a.lp-btn,body.siteward .docs .sw-endcta a{text-decoration:none}
body.siteward .docs a.lp-btn-primary,body.siteward .docs a.lp-btn-primary:hover{color:#fff}
body.siteward .docs a.lp-btn-ghost{color:var(--sw-ink)}
body.siteward .docs .sw-endcta a.lp-btn-ghost,
body.siteward .docs .sw-endcta a.lp-btn-ghost:hover{color:#fff}
.docs strong{color:var(--sw-ink);font-weight:600}
.docs code{font-family:'JetBrains Mono',monospace;font-size:.88em;background:var(--sw-bg-cool);
  border:1px solid var(--sw-line);border-radius:5px;padding:1px 5px}
.docs table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 20px;display:block;overflow-x:auto}
.docs table th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sw-faint);font-weight:600;padding:12px 14px;border-bottom:1px solid var(--sw-line);
  background:var(--sw-bg-cool);white-space:nowrap}
.docs table td{padding:12px 14px;border-bottom:1px solid var(--sw-line-soft);vertical-align:top}
.docs table td:first-child{color:var(--sw-ink);font-weight:600}
.docs p.sub{font-size:13.5px;color:var(--sw-faint);margin-top:-6px}

/* The interior page hero lives in the cascade-repair block below as
   `body.siteward .page-hero`. A bare `.page-hero` set here would be dead:
   every property was shadowed property-for-property by that rule. */

/* ---------- Screenshots ---------- */
.omx-shot{margin:26px 0;padding:0}
.omx-shot picture{display:block}
.omx-shot img{display:block;width:100%;height:auto;border:1px solid var(--sw-line);
  border-radius:var(--sw-r-md);box-shadow:var(--sw-shadow-lg)}
.omx-shot figcaption{margin-top:10px;font-size:13.5px;color:var(--sw-faint);text-align:center}

@media(max-width:900px){
  .sw-grid-3,.sw-grid-4{grid-template-columns:repeat(2,1fr)}
  .sw-section{padding:56px 0}
}
@media(max-width:640px){
  .sw-grid-2,.sw-grid-3,.sw-grid-4{grid-template-columns:1fr}
  .sw-wrap{padding:0 18px}
  .docs{font-size:16px;padding:8px 18px 18px}
  .omx-shot img{border-radius:10px}
}

/* ============================================================================
   Header / footer.
   The existing markup, IDs and classes are kept deliberately: the Compare
   dropdown JS, the mobile burger and the GA4 click tracking all key off
   .lp-nav / #lp-drop / .lp-getstarted. Restyling rather than rewriting keeps
   every one of those working.
   ========================================================================= */

/* Announcement */
body.siteward .omx-announce{background:var(--sw-navy);color:#c7d4f0;font-size:13.5px}
body.siteward .omx-announce-in{max-width:var(--sw-wrap);padding:9px 24px}
body.siteward .omx-announce-in a.omx-announce-btn{background:var(--sw-blue);border-radius:8px;
  padding:5px 14px;font-weight:600}
body.siteward .omx-announce-in a.omx-announce-btn:hover{background:var(--sw-blue-dark);color:#fff}

/* Masthead: sticky, translucent, blurred */
body.siteward .lp-header{position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid #e9ecf2}
body.siteward .lp-header .bar{max-width:var(--sw-wrap);margin:0 auto;padding:13px 28px;
  display:flex;align-items:center;gap:32px}
body.siteward .lp-brand{display:flex;align-items:center;gap:11px}
body.siteward .lp-brand .mark{width:34px;height:34px;border-radius:var(--sw-r-sm);
  box-shadow:0 5px 14px -5px rgba(37,99,235,.6);display:block}
body.siteward .lp-brand .mark svg{width:34px;height:34px;display:block}
body.siteward .lp-brand .name>span:first-child{font-size:19.5px;font-weight:700;letter-spacing:-.035em}
body.siteward .lp-brand .name>span:last-child{font-family:'JetBrains Mono',monospace;font-size:9.5px;
  font-weight:500;color:var(--sw-faint);letter-spacing:.09em;margin-top:2px;text-transform:uppercase}

/* Nav pills */
body.siteward .lp-nav{display:flex;align-items:center;gap:4px;font-size:14.5px;font-weight:500;color:var(--sw-body)}
body.siteward .lp-nav>a,body.siteward .lp-drop-t{padding:7px 12px;border-radius:8px}
body.siteward .lp-nav>a:hover,body.siteward .lp-drop:hover .lp-drop-t{background:var(--sw-bg-blue);color:var(--sw-blue)}
body.siteward .lp-nav>a[aria-current="page"]{background:var(--sw-bg-blue);color:var(--sw-blue);font-weight:600}

/* Compare dropdown */
body.siteward .lp-drop-m{border-radius:var(--sw-r-md);border-color:var(--sw-line);
  box-shadow:var(--sw-shadow);padding:8px}
body.siteward .lp-drop-m a{border-radius:8px;font-size:14.5px;font-weight:500;color:var(--sw-body)}
body.siteward .lp-drop-m a:hover{background:var(--sw-bg-blue);color:var(--sw-blue)}
body.siteward .lp-drop-m a strong{font-weight:600;color:var(--sw-ink)}

/* CTA */
body.siteward .lp-getstarted{background:var(--sw-blue);border:1px solid var(--sw-blue);border-radius:var(--sw-r-sm);
  padding:9px 17px;font-size:14.5px;font-weight:600;color:#fff;
  box-shadow:0 6px 16px -7px rgba(37,99,235,.8)}
body.siteward .lp-getstarted:hover{background:var(--sw-blue-dark);border-color:var(--sw-blue-dark);color:#fff}
body.siteward .lp-headcta{margin-left:auto;display:flex;align-items:center;gap:10px}

/* Footer */
body.siteward .lp-footer{background:var(--sw-ink-deep);color:var(--sw-onnavy);padding:60px 0 34px}
body.siteward .lp-footer a{color:var(--sw-onnavy)}
body.siteward .lp-footer a:hover{color:#fff}
body.siteward .lp-footer .ct{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:#5f719b;margin-bottom:14px}
body.siteward .lp-footer .lks{display:flex;flex-direction:column;gap:9px;font-size:14.5px}
body.siteward .lp-flegal{border-top:1px solid rgba(255,255,255,.08);margin-top:34px;padding-top:22px;
  font-size:13px;color:#5f719b}

@media(max-width:900px){
  body.siteward .lp-header .bar{padding:11px 18px;gap:14px}
  body.siteward .lp-nav{background:rgba(255,255,255,.98)}
}

/* Hero chips: the left chip sat over the first counter and clipped its value.
   Pull both outside the window edge so they read as annotations rather than
   overlapping the data, and drop them below the cards on narrow screens. */
body.siteward .lp-chip.a{left:-58px;top:26px}
body.siteward .lp-chip.b{right:-46px;top:186px}
@media(max-width:1180px){
  body.siteward .lp-chip.a{left:-14px;top:-18px}
  body.siteward .lp-chip.b{right:-10px;top:auto;bottom:-18px}
}
@media(max-width:760px){
  body.siteward .lp-chip{display:none}   /* no room; the cards speak for themselves */
}

/* ============================================================================
   Cascade repairs.
   The rules above use `body.siteward .x` (0,0,2,1), which outranks the old
   sheet's bare `.x` (0,0,1,0) EVERYWHERE, including inside its media queries.
   Anything the old sheet only changes at a breakpoint has to be restated here
   at the same specificity or the mobile behaviour is silently lost.
   ========================================================================= */

/* CRITICAL: .lp-nav is display:none below 900px in the old sheet, but the new
   masthead rule forced display:flex at every width, leaving the mobile menu
   permanently open over the page. Restate the closed state. */
@media(max-width:900px){
  body.siteward .lp-nav{display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(255,255,255,.98);
    backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--sw-line);box-shadow:var(--sw-shadow);padding:6px 24px 14px}
  body.siteward .lp-nav.open{display:flex}
  body.siteward .lp-nav>a,body.siteward .lp-drop-t{width:100%;padding:13px 2px;font-size:16px;
    border-radius:0;border-bottom:1px solid var(--sw-line-soft)}
  body.siteward .lp-nav>a:hover{background:transparent;color:var(--sw-blue)}
}

/* Container widths: header/footer were on the new 1200px token while page
   content stayed on the old 1120px, so the masthead overhung the body by 40px
   a side on wide screens. Align everything on the token. */
body.siteward .lp-wrap,
body.siteward .omx-wrap,
body.siteward .lp-footer .fwrap{max-width:var(--sw-wrap)}

/* Prose tables: the old sheet sets `border:1px solid` on all four sides and the
   new sheet only replaced border-bottom, so cells rendered a two-tone grid.
   Reset all sides, then restore just the row divider. */
body.siteward .docs table th,
body.siteward .docs table td{border:0;border-bottom:1px solid var(--sw-line-soft)}
body.siteward .docs table th{border-bottom-color:var(--sw-line)}

/* Headings: the global weight/letter-spacing override applied without a size,
   leaving old sizes at the new lighter weight. Give the generic tags a scale. */
body.siteward h1{font-size:clamp(34px,5vw,56px);font-weight:700}
body.siteward h2{font-size:clamp(26px,3.4vw,38px)}
body.siteward h3{font-size:20px}
body.siteward .page-hero h1{font-weight:600}
body.siteward .sw-article h1,body.siteward .wp-block-post-title{font-size:clamp(30px,4vw,42px);font-weight:700}
/* Cards keep their heavier weight so they do not read as flattened. */
body.siteward .lp-feat h3,body.siteward .lp-pain h3,body.siteward .price h3,
body.siteward .feat h3{font-weight:700}

/* Eyebrows: two treatments were showing on one page. Unify on the mono label. */
body.siteward .lp-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sw-blue)}

/* ============================================================================
   Page components, restyled in place.
   These target the classes the existing content already uses, so the markup,
   internal links, [siteward_shot] screenshots and GA4 tracking hooks are all
   untouched. Purely visual.
   ========================================================================= */

/* Buttons: three legacy systems (.btn, .lp-btn, .lp-getstarted) are unified on
   the new design's look here rather than by rewriting markup, because the
   analytics key off .lp-btn-primary and .lp-getstarted. Same pixels, same hooks. */
body.siteward .btn,body.siteward .lp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--sw-r);padding:12px 20px;font-size:15px;font-weight:600;
  border:1px solid transparent;transition:background .16s,border-color .16s,color .16s}
body.siteward .btn-primary,body.siteward .lp-btn-primary{
  background:var(--sw-blue);border-color:var(--sw-blue);color:#fff;
  box-shadow:0 8px 20px -8px rgba(37,99,235,.65)}
body.siteward .btn-primary:hover,body.siteward .lp-btn-primary:hover{
  background:var(--sw-blue-dark);border-color:var(--sw-blue-dark);color:#fff}
body.siteward .btn-ghost,body.siteward .lp-btn-ghost{
  background:#fff;border-color:#d8dde6;color:var(--sw-ink);box-shadow:none}
body.siteward .btn-ghost:hover,body.siteward .lp-btn-ghost:hover{
  background:var(--sw-bg-blue-soft);border-color:#c3d8ff;color:var(--sw-blue)}

/* Feature cards */
body.siteward .feat{background:#fff;border:1px solid var(--sw-line);border-radius:var(--sw-r-md);
  padding:26px;box-shadow:none;transition:border-color .16s,box-shadow .16s}
body.siteward .feat:hover{border-color:#c3d8ff;box-shadow:var(--sw-shadow)}
body.siteward .feat .ico{width:40px;height:40px;border-radius:10px;background:var(--sw-bg-blue);
  color:var(--sw-blue);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
body.siteward .feat .ico svg{width:21px;height:21px}
body.siteward .feat h3{font-size:17.5px;font-weight:700;margin-bottom:8px}
body.siteward .feat p{font-size:14.5px;line-height:1.6;color:var(--sw-body);margin:0}

/* Roadmap cards: dashed, muted, clearly not shipped */
body.siteward .rm{background:#fff;border:1px dashed #cbd5e1;border-radius:var(--sw-r-md);padding:24px}
body.siteward .rm-tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10px;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:5px;
  color:var(--sw-warn);background:var(--sw-warn-bg);margin-bottom:12px}
body.siteward .rm h3{font-size:17px;font-weight:700;margin-bottom:7px}
body.siteward .rm p{font-size:14.5px;line-height:1.6;color:var(--sw-body);margin:0}

/* Pricing cards */
body.siteward .price{background:#fff;border:1px solid var(--sw-line);border-radius:var(--sw-r-lg);
  padding:30px 26px;box-shadow:none}
body.siteward .price.feature{border-color:#c3d8ff;box-shadow:var(--sw-shadow);position:relative}
body.siteward .price h3{font-size:17px;font-weight:700;letter-spacing:0}
body.siteward .price .amt{font-size:46px;font-weight:700;letter-spacing:-.045em;margin:10px 0 4px;
  color:var(--sw-ink)}
body.siteward .price .amt small{font-size:15px;font-weight:500;color:var(--sw-faint);letter-spacing:0}
body.siteward .price .who{font-size:14px;color:var(--sw-soft);min-height:40px}
body.siteward .price ul{margin:18px 0;padding:0;list-style:none;font-size:14.5px;color:var(--sw-body)}
body.siteward .price li{padding:7px 0 7px 24px;position:relative;line-height:1.5}
body.siteward .price li::before{content:"";position:absolute;left:0;top:13px;width:13px;height:8px;
  border-left:2px solid var(--sw-ok);border-bottom:2px solid var(--sw-ok);transform:rotate(-45deg)}
body.siteward .price .ribbon{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--sw-blue);color:#fff;font-size:12px;font-weight:600;padding:5px 13px;
  border-radius:var(--sw-r-pill);white-space:nowrap}
body.siteward .bill-toggle{background:#eef2f7;border-radius:var(--sw-r-pill);padding:4px}
body.siteward .bill-toggle .bt-opt{border-radius:var(--sw-r-pill);font-size:14px;font-weight:600;
  color:var(--sw-soft);padding:8px 22px}
body.siteward .bill-toggle .bt-opt.is-active{background:#fff;color:var(--sw-ink);
  box-shadow:0 1px 3px rgba(0,0,0,.14)}

/* FAQ */
body.siteward .qa{border-bottom:1px solid var(--sw-line-soft);padding:20px 0}
body.siteward .qa h3{font-size:16.5px;font-weight:700;margin-bottom:7px}
body.siteward .qa p{font-size:15px;line-height:1.65;color:var(--sw-body);margin:0}

/* Resources: turn the guide list into a card grid without touching the markup */
body.siteward .docs .res-grid,body.siteward .res-grid{display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
body.siteward .res-card{display:block;background:#fff;border:1px solid var(--sw-line);
  border-radius:var(--sw-r-md);padding:22px;transition:border-color .16s,box-shadow .16s}
body.siteward .res-card:hover{border-color:#c3d8ff;box-shadow:var(--sw-shadow)}
body.siteward .res-card h3{font-size:16.5px;font-weight:700;margin-bottom:7px;line-height:1.3}
body.siteward .res-card p{font-size:14.5px;line-height:1.55;color:var(--sw-body);margin:0}
/* Card components inside the prose column keep card styling, not link styling. */
body.siteward .docs .res-card h3 a,body.siteward .docs .feat a{
  color:var(--sw-ink);text-decoration:none}
body.siteward .docs .res-card:hover h3 a{color:var(--sw-blue)}


/* Section rhythm */
body.siteward section.pad{padding:72px 0}
body.siteward section.pad.how{background:var(--sw-bg-cool)}
@media(max-width:640px){body.siteward section.pad{padding:48px 0}}

/* The resources grid sits inside .docs (820px prose column), which squeezed it
   into two narrow columns with large empty margins. Break it out to the full
   container width while leaving the prose measure alone. */
body.siteward .docs .res-grid{
  width:min(var(--sw-wrap),calc(100vw - 48px));
  position:relative;left:50%;transform:translateX(-50%);
  margin-top:8px;margin-bottom:8px}
@media(max-width:640px){
  body.siteward .docs .res-grid{width:100%;left:auto;transform:none}
}

/* ============================================================================
   Comparison-page template.
   Three components lifted from the design: the ranked tool card, the honest
   "when the competitor wins" callout, and the dark article-end CTA. All three
   are wrappers only, no heading levels, link targets or anchor text change.
   ========================================================================= */

/* Ranked tool card (/best-mainwp-alternatives/) */
.docs .sw-tool{background:#fff;border:1px solid var(--sw-line);border-radius:var(--sw-r-md);
  padding:26px 28px;margin:24px 0;box-shadow:0 2px 4px -2px rgba(15,35,80,.08)}
.docs .sw-tool.is-own{border-color:#c7dbff;background:linear-gradient(180deg,#f7faff,#fff)}
.docs .sw-tool>h2{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:clamp(20px,2.4vw,23px);margin:0 0 12px}
.docs .sw-tool>*:last-child{margin-bottom:0}
.sw-rank{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:9px;background:var(--sw-bg-cool);color:var(--sw-muted);
  font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;letter-spacing:-.04em}
.sw-tool.is-own .sw-rank{background:var(--sw-blue);color:#fff}

/* Honest-comparison callout */
.docs .sw-callout{background:var(--sw-bg-cool);border:1px solid var(--sw-line);
  border-left:3px solid #94a3b8;border-radius:var(--sw-r-md);padding:24px 28px;margin:32px 0}
.docs .sw-callout>h2{font-size:20px;margin:0 0 12px;letter-spacing:-.02em}
.docs .sw-callout>h2::before{content:'HONEST COMPARISON';display:block;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.11em;
  color:var(--sw-faint);margin-bottom:9px}
.docs .sw-callout>*:last-child{margin-bottom:0}

/* Dark article-end CTA */
.docs .sw-endcta{position:relative;overflow:hidden;background:var(--sw-navy);
  border-radius:var(--sw-r-md);padding:30px 32px;margin:44px 0 8px;
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.docs .sw-endcta::after{content:'';position:absolute;top:-90px;right:-60px;width:300px;height:250px;
  background:radial-gradient(ellipse at center,rgba(59,123,255,.34),transparent 70%);pointer-events:none}
.docs .sw-endcta .t{position:relative;font-size:20px;font-weight:600;color:#fff;letter-spacing:-.02em}
.docs .sw-endcta .s{position:relative;margin:6px 0 0;font-size:14.5px;line-height:1.55;
  color:#9aadd2;max-width:400px}
.docs .sw-endcta p{position:relative;margin:0;display:flex;gap:10px;flex-wrap:wrap}
.docs .sw-endcta a{text-decoration:none}
.docs .sw-endcta .lp-btn-ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.docs .sw-endcta .lp-btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff}
@media(max-width:640px){
  .docs .sw-tool,.docs .sw-callout{padding:20px}
  .docs .sw-endcta{padding:24px;flex-direction:column;align-items:flex-start}
}

/* ============================================================================
   Shared page chrome from the design: patterned hero, trust strip, final CTA.
   These sit on every page, so they are the highest-leverage part of the
   redesign. The hero upgrade is pure CSS on the existing .page-hero markup.
   ========================================================================= */

/* ---------- Hero: 64px grid, masked to a dome, plus a blue glow ---------- */
body.siteward .page-hero{position:relative;overflow:hidden;
  background:#fff;border-bottom:1px solid var(--sw-line-soft);padding:74px 0 62px}
body.siteward .page-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(#eef2f9 1px,transparent 1px),
                   linear-gradient(90deg,#eef2f9 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 20%,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 20%,transparent 75%)}
body.siteward .page-hero::after{content:'';position:absolute;top:-220px;left:50%;
  transform:translateX(-50%);width:1000px;height:520px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(37,99,235,.13),transparent 66%)}
body.siteward .page-hero>*{position:relative}

/* The eyebrow becomes the design's status chip: white pill, live green dot. */
body.siteward .page-hero .eyebrow{display:inline-flex;align-items:center;gap:9px;
  background:#fff;border:1px solid #dbe4f5;border-radius:var(--sw-r-pill);
  padding:6px 14px;font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sw-blue-dark);
  box-shadow:0 2px 8px -3px rgba(37,99,235,.3);margin-bottom:0}
body.siteward .page-hero .eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;
  background:#16a34a;flex:none;animation:sw-pulse 2.4s infinite}
@keyframes sw-pulse{
  0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}
  70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}
  100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
@media(prefers-reduced-motion:reduce){
  body.siteward .page-hero .eyebrow::before{animation:none}}

body.siteward .page-hero h1{margin:26px auto 0;max-width:940px;
  font-size:clamp(36px,5.4vw,64px);letter-spacing:-.045em;color:var(--sw-ink-deep)}
body.siteward .page-hero .sub{margin:24px auto 0;max-width:640px;font-size:19px;
  line-height:1.62;color:var(--sw-muted)}
body.siteward .page-hero p:last-child{margin-top:30px}

/* ---------- Trust strip (injected under the hero by the theme) ---------- */
body.siteward .sw-trust{background:#fff;border-bottom:1px solid var(--sw-line-soft);padding:30px 0}
body.siteward .sw-trust .in{max-width:var(--sw-wrap);margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:center;gap:38px;flex-wrap:wrap}
body.siteward .sw-trust .k{font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.13em;color:#a3aec1;text-transform:uppercase}
body.siteward .sw-trust span.b{display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:500;color:var(--sw-body)}
body.siteward .sw-trust svg{width:15px;height:15px;flex:none}
@media(max-width:640px){
  body.siteward .sw-trust{padding:22px 0}
  body.siteward .sw-trust .in{gap:14px 20px}
  body.siteward .sw-trust .k{flex-basis:100%;text-align:center}}

/* ---------- Final CTA band (injected above the footer by the theme) ---- */
body.siteward .sw-final{background:#fff;padding:90px 24px}
body.siteward .sw-final .box{position:relative;overflow:hidden;border-radius:22px;
  background:var(--sw-navy);padding:66px 44px;text-align:center;
  max-width:var(--sw-wrap);margin:0 auto}
body.siteward .sw-final .box::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:52px 52px}
body.siteward .sw-final .box::after{content:'';position:absolute;top:-150px;left:50%;
  transform:translateX(-50%);width:780px;height:400px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(59,123,255,.34),transparent 68%)}
body.siteward .sw-final .in{position:relative}
body.siteward .sw-final .k{font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.13em;color:var(--sw-blue-pale);margin-bottom:18px;text-transform:uppercase}
body.siteward .sw-final h2{font-size:clamp(30px,4.4vw,48px);letter-spacing:-.045em;
  color:#fff;max-width:640px;margin:0 auto}
body.siteward .sw-final p{margin:18px auto 0;max-width:520px;font-size:17.5px;
  line-height:1.62;color:#9aadd2}
body.siteward .sw-final .btns{display:flex;gap:11px;justify-content:center;
  margin-top:30px;flex-wrap:wrap}
body.siteward .sw-final a{display:inline-flex;align-items:center;border-radius:11px;
  padding:14px 26px;font-size:16px;font-weight:600;color:#fff;text-decoration:none}
body.siteward .sw-final a.p{background:var(--sw-blue);box-shadow:0 14px 30px -10px rgba(37,99,235,.9)}
body.siteward .sw-final a.p:hover{background:var(--sw-blue-mid);color:#fff}
body.siteward .sw-final a.g{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)}
body.siteward .sw-final a.g:hover{background:rgba(255,255,255,.16);color:#fff}
@media(max-width:640px){
  body.siteward .sw-final{padding:56px 18px}
  body.siteward .sw-final .box{padding:44px 22px;border-radius:16px}}

/* Hero h1 accent and the monospace microcopy line under the buttons. */
body.siteward .page-hero h1 .hl{color:var(--sw-blue)}
body.siteward .page-hero .sw-micro{margin-top:16px;font-family:'JetBrains Mono',monospace;
  font-size:12px;color:var(--sw-faint);letter-spacing:.02em}
body.siteward .page-hero .lp-btn{font-size:16px;padding:14px 26px;border-radius:11px}
body.siteward .page-hero .lp-btn-primary{box-shadow:0 14px 30px -12px rgba(37,99,235,.85)}

/* ---------- Features grid: numbered section head + tier tags ---------- */
body.siteward .sw-sechead{display:flex;align-items:flex-end;justify-content:space-between;
  gap:40px;margin-bottom:44px;flex-wrap:wrap}
body.siteward .sw-sechead>div{max-width:600px}
body.siteward .sw-sechead .k{font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--sw-blue);margin-bottom:16px}
body.siteward .sw-sechead h2{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.04em;
  color:var(--sw-ink-deep)}
body.siteward .sw-sechead>p{max-width:340px;font-size:15.5px;line-height:1.62;
  color:var(--sw-muted);margin:0}
body.siteward .feat{position:relative}
body.siteward .sw-tier{position:absolute;top:22px;right:22px;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.1em;
  padding:4px 8px;border-radius:5px}
body.siteward .sw-tier.free{color:var(--sw-ok);background:var(--sw-ok-bg)}
body.siteward .sw-tier.pro{color:var(--sw-blue);background:var(--sw-bg-blue)}

/* ---------- Resources: the design's two-column card grid ---------- */
body.siteward .docs .res-grid,body.siteward .res-grid{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){
  body.siteward .docs .res-grid,body.siteward .res-grid{grid-template-columns:1fr}}

/* ---------- Article pages: sticky table of contents ---------- */
body.siteward .sw-article-wrap{max-width:var(--sw-wrap);margin:0 auto;padding:36px 28px 0;
  display:grid;grid-template-columns:238px 1fr;gap:56px;align-items:start}
body.siteward .sw-article-wrap .docs{max-width:820px;margin:0;padding:0}
body.siteward .sw-toc{position:sticky;top:24px;font-size:13.5px}
body.siteward .sw-toc .tt{font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sw-faint);margin-bottom:14px}
body.siteward .sw-toc ol{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:2px}
body.siteward .sw-toc li{margin:0}
body.siteward .sw-toc a{display:block;padding:7px 12px;border-left:2px solid var(--sw-line);
  color:var(--sw-soft);line-height:1.4;text-decoration:none}
body.siteward .sw-toc a:hover{border-left-color:var(--sw-blue);color:var(--sw-blue);
  background:var(--sw-bg-blue-soft)}
@media(max-width:1000px){
  body.siteward .sw-article-wrap{display:block;padding:0}
  body.siteward .sw-article-wrap .docs{max-width:820px;margin:0 auto;padding:8px 24px 20px}
  body.siteward .sw-toc{position:static;margin:0 auto 22px;max-width:820px;padding:0 24px}
  body.siteward .sw-toc ol{flex-direction:row;flex-wrap:wrap;gap:6px}
  body.siteward .sw-toc a{border:1px solid var(--sw-line);border-radius:var(--sw-r-pill);
    padding:6px 13px;font-size:13px}
  body.siteward .sw-toc a:hover{border-color:var(--sw-blue)}}

/* ---------- FAQ section (rendered wherever FAQPage schema is emitted) ---- */
body.siteward .sw-faq .center{text-align:center;margin-bottom:34px}
body.siteward .sw-faq .faq{max-width:820px;margin:0 auto;display:flex;
  flex-direction:column;gap:14px}
body.siteward .sw-faq .qa{background:#fff;border:1px solid var(--sw-line);
  border-radius:var(--sw-r-md);padding:22px 26px}
body.siteward .sw-faq .qa h3{font-size:17px;margin:0 0 8px;color:var(--sw-ink)}
body.siteward .sw-faq .qa p{margin:0;font-size:15.5px;line-height:1.65;color:var(--sw-body)}

/* ============================================================================
   Homepage hero: bring it onto the design's treatment.
   The old hero used a 26px dot field on a blue gradient; the design uses a
   64px line grid on white, masked to a dome, with a single blue glow.
   ========================================================================= */
body.siteward .lp-hero{background:#fff}
body.siteward .lp-hero .grid{
  background-image:linear-gradient(#eef2f9 1px,transparent 1px),
                   linear-gradient(90deg,#eef2f9 1px,transparent 1px);
  background-size:64px 64px;opacity:1;
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 20%,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 20%,transparent 75%)}
body.siteward .lp-hero .glow{top:-220px;left:50%;right:auto;transform:translateX(-50%);
  width:1000px;height:520px;
  background:radial-gradient(ellipse at center,rgba(37,99,235,.13),transparent 66%)}
body.siteward .lp-hero h1{margin:26px auto 0;max-width:940px;
  font-size:clamp(36px,5.4vw,68px);letter-spacing:-.045em;color:var(--sw-ink-deep)}
body.siteward .lp-hero h1 .hl{color:var(--sw-blue)}
body.siteward .lp-hero .lp-sub{margin:24px auto 0;max-width:620px;font-size:19px;
  line-height:1.62;color:var(--sw-muted)}
body.siteward .lp-heronote{margin-top:16px;font-family:'JetBrains Mono',monospace;
  font-size:12px;font-weight:400;color:var(--sw-faint);letter-spacing:.02em}

/* The hero pill matches the design's status chip: live green dot, mono tag. */
body.siteward .lp-pill{display:inline-flex;align-items:center;gap:9px;background:#fff;
  border:1px solid #dbe4f5;border-radius:var(--sw-r-pill);padding:6px 14px;
  font-size:13px;font-weight:600;color:var(--sw-blue-dark);
  box-shadow:0 2px 8px -3px rgba(37,99,235,.3)}
body.siteward .lp-pill svg{width:16px;height:16px}

/* ============================================================================
   Cascade repairs and token alignment, from the visual-consistency audit.
   ========================================================================= */

/* The chrome link reset (body.siteward a, specificity (0,2,1)) silently beat
   `.lp-fbar a` and left every footer legal link with no underline, in nearly
   the colour of the surrounding copyright line. Same class of bug as `.docs a`.
   In-content FAQ links had no rule contesting the reset at all. */
body.siteward .lp-fbar a{text-decoration:underline;text-underline-offset:2px}
body.siteward .lp-fbar a:hover{color:#fff}
body.siteward .qa a,body.siteward .lp-qa a{color:var(--sw-blue);
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
body.siteward .qa a:hover,body.siteward .lp-qa a:hover{text-decoration-thickness:2px}

/* One FAQ card treatment, whichever of the three markup variants is in use. */
body.siteward .lp-qa,body.siteward .sw-faq .qa{background:#fff;
  border:1px solid var(--sw-line);border-radius:var(--sw-r-md);padding:22px 26px}
body.siteward .lp-qa h3,body.siteward .sw-faq .qa h3,body.siteward .sw-faq .qa h4{
  font-size:17px;margin:0 0 8px;color:var(--sw-ink);font-weight:600;letter-spacing:-.02em}
body.siteward .lp-qa p,body.siteward .sw-faq .qa p{margin:0;font-size:15.5px;
  line-height:1.65;color:var(--sw-body)}

/* Roadmap status tags: the design assigns shipped/next/planned distinct
   colours drawn from the ok / blue / warn tokens. The old sheet used three
   unrelated palettes and rendered "planned" as neutral grey, losing the cue.
   /features/ had no differentiation at all: one amber tag on every card. */
body.siteward .lp-rmc .tag.st-shipped,body.siteward .rm-tag.st-shipped{
  color:var(--sw-ok);background:var(--sw-ok-bg);border-color:var(--sw-ok-bd)}
body.siteward .lp-rmc .tag.st-next,body.siteward .rm-tag.st-next{
  color:#175cd3;background:var(--sw-bg-blue);border-color:#c7dbff}
body.siteward .lp-rmc .tag.st-planned,body.siteward .rm-tag.st-planned{
  color:var(--sw-warn);background:var(--sw-warn-bg);border-color:var(--sw-warn-bd)}

/* Off-brand near-duplicates of design tokens: #EFF6FF vs --sw-bg-blue #EFF5FF,
   and a second green pair for the same "success" meaning as --sw-ok. */
body.siteward .doc-callout,body.siteward .changelog .cl-new{background:var(--sw-bg-blue)}
body.siteward .changelog .cl-fix{background:var(--sw-ok-bg);color:var(--sw-ok)}

/* The homepage hero mockup was the one component the rebuild skipped; it used
   three unrelated greens for the same "up" state. */
body.siteward .lp-shot .st.up{color:var(--sw-ok)}
body.siteward .lp-shot .st.up .dot,body.siteward .lp-chip .dot{background:#16a34a}
body.siteward .lp-shot .lrow{border-left-color:var(--sw-ok-bd)}

/* ============================================================================
   Homepage: price band and the three-way comparison, rebuilt to the design.
   ========================================================================= */

/* ---------- "Stop paying by the site." ---------- */
body.siteward .sw-priceband{position:relative;overflow:hidden;border-radius:22px;
  background:var(--sw-navy);padding:62px 44px;text-align:center}
body.siteward .sw-priceband::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:52px 52px}
body.siteward .sw-priceband::after{content:'';position:absolute;top:-160px;left:50%;
  transform:translateX(-50%);width:760px;height:400px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(59,123,255,.32),transparent 68%)}
body.siteward .sw-priceband .in{position:relative}
body.siteward .sw-priceband h2{font-size:clamp(30px,4.4vw,46px);letter-spacing:-.04em;color:#fff}
body.siteward .sw-priceband .lede{margin:16px auto 0;max-width:520px;font-size:17.5px;
  line-height:1.6;color:#9aadd2}

/* 1fr auto 1fr keeps the two figures the same width with VS pinned between. */
body.siteward .sw-priceband .cmp{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;
  align-items:center;margin:40px auto 0;max-width:800px}
body.siteward .sw-priceband .card{border-radius:15px;padding:26px 24px}
body.siteward .sw-priceband .card.them{background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13)}
body.siteward .sw-priceband .card.us{background:#fff;box-shadow:0 26px 50px -22px rgba(0,0,0,.6)}
body.siteward .sw-priceband .v{font-size:clamp(24px,3.2vw,33px);font-weight:600;
  letter-spacing:-.04em;color:#fff;line-height:1.1}
body.siteward .sw-priceband .v span{font-size:16px;color:var(--sw-onnavy);letter-spacing:0}
body.siteward .sw-priceband .card.us .v{color:var(--sw-ink-deep)}
body.siteward .sw-priceband .card.us .v span{color:var(--sw-faint)}
body.siteward .sw-priceband .k{margin-top:8px;font-size:13.5px;color:var(--sw-onnavy)}
body.siteward .sw-priceband .card.us .k{color:var(--sw-soft)}
body.siteward .sw-priceband .vs{font-family:'JetBrains Mono',monospace;font-size:13px;color:#6f85b0}
body.siteward .sw-priceband .act{margin-top:32px}
body.siteward .sw-priceband .act .lp-btn-primary{border-radius:11px;padding:14px 26px;
  font-size:16px;box-shadow:0 14px 30px -10px rgba(37,99,235,.9)}
body.siteward .sw-priceband .foot{margin:26px auto 0;max-width:680px;font-size:12.5px;
  color:#6f85b0;line-height:1.6}
@media(max-width:760px){
  body.siteward .sw-priceband{padding:44px 22px;border-radius:16px}
  body.siteward .sw-priceband .cmp{grid-template-columns:1fr;gap:14px}}

/* ---------- "Leaner than MainWP. Cheaper than ManageWP." ---------- */
body.siteward .sw-cmphead{max-width:640px;margin-bottom:44px}
body.siteward .sw-cmphead .lp-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--sw-blue);margin-bottom:16px}
body.siteward .sw-cmphead h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.04em;
  color:var(--sw-ink-deep)}
body.siteward .sw-cmphead .lp-sub{margin-top:18px;font-size:17.5px;line-height:1.62;
  color:var(--sw-muted)}

body.siteward .sw-cmp3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  align-items:stretch}
body.siteward .sw-cmpc{display:flex;flex-direction:column;gap:16px;border-radius:15px;
  padding:26px;background:#fff;border:1px solid var(--sw-line)}
body.siteward .sw-cmpc.me{background:var(--sw-bg-blue-soft);border-color:#c3d8ff}
body.siteward .sw-cmpc .h{display:flex;align-items:center;justify-content:space-between;gap:10px}
body.siteward .sw-cmpc .n{font-size:18px;font-weight:600;color:#334155}
body.siteward .sw-cmpc.me .n{color:var(--sw-blue-dark)}
body.siteward .sw-cmpc .chip{font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.1em;font-weight:600;color:var(--sw-soft);background:#f1f5f9;
  border-radius:5px;padding:3px 8px}
body.siteward .sw-cmpc.me .chip{color:#fff;background:var(--sw-blue)}
body.siteward .sw-cmpc .rows{display:flex;flex-direction:column;gap:9px}
body.siteward .sw-cmpc .r{display:flex;gap:9px;align-items:flex-start;font-size:14px;
  line-height:1.55;color:var(--sw-soft)}
body.siteward .sw-cmpc.me .r{color:var(--sw-blue-dark)}
body.siteward .sw-cmpc .m{font-family:'JetBrains Mono',monospace;font-size:12px;flex:none;
  margin-top:1px;color:var(--sw-faint)}
body.siteward .sw-cmpc .m.n{color:var(--sw-amber)}
body.siteward .sw-cmpc.me .m{color:var(--sw-blue)}
body.siteward .sw-cmpact{margin-top:32px}
@media(max-width:900px){body.siteward .sw-cmp3{grid-template-columns:1fr}}
/* The legacy .lp-eyebrow draws a short rule either side via pseudo-elements.
   Every section eyebrow in the design is plain uppercase monospace, so the
   rules come off everywhere, not just on the comparison block. */
body.siteward .lp-eyebrow::before,
body.siteward .lp-eyebrow::after{content:none}
body.siteward .lp-eyebrow{letter-spacing:.13em;text-transform:uppercase;
  color:var(--sw-blue);gap:0}

/* ============================================================================
   Homepage: the big-stat moment, and the section rhythm the design uses.
   ========================================================================= */

/* A full-bleed dark band, not a card. The old markup put a bright blue rounded
   card inside a white section with the copy left and two figures right; the
   design runs the band edge to edge, centres the copy, and shows three stats
   each sitting under a hairline rule. */
body.siteward .sw-bigstat{position:relative;overflow:hidden;background:var(--sw-ink-deep);
  padding:96px 0}
body.siteward .sw-bigstat::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px}
body.siteward .sw-bigstat::after{content:'';position:absolute;bottom:-200px;left:50%;
  transform:translateX(-50%);width:900px;height:420px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(59,123,255,.3),transparent 68%)}
body.siteward .sw-bigstat .in{position:relative;max-width:var(--sw-wrap);margin:0 auto;
  padding:0 28px;text-align:center}
body.siteward .sw-bigstat h2{font-size:clamp(32px,5.2vw,56px);letter-spacing:-.045em;
  color:#fff;max-width:820px;margin:0 auto}
body.siteward .sw-bigstat h2 .hl{color:var(--sw-blue-pale)}
body.siteward .sw-bigstat .lede{margin:20px auto 0;max-width:560px;font-size:17.5px;
  line-height:1.62;color:#9aadd2}
body.siteward .sw-bigstat .lede code{font-family:'JetBrains Mono',monospace;font-size:15px;
  color:#c7d9ff;background:none;border:0;padding:0}
body.siteward .sw-bigstat .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  max-width:820px;margin:52px auto 0}
body.siteward .sw-bigstat .s{border-top:1px solid rgba(255,255,255,.16);padding-top:20px;
  text-align:left}
body.siteward .sw-bigstat .n{font-size:clamp(36px,6vw,58px);font-weight:600;color:#fff;
  letter-spacing:-.05em;line-height:1}
body.siteward .sw-bigstat .k{margin-top:8px;font-size:14px;color:var(--sw-onnavy)}
@media(max-width:760px){
  body.siteward .sw-bigstat{padding:64px 0}
  body.siteward .sw-bigstat .stats{grid-template-columns:1fr;gap:0}
  body.siteward .sw-bigstat .s{padding:18px 0}}

/* The design alternates white with one cool grey; the old sheet used a blue
   tint for .lp-grey's counterpart. Pin both to the token. */
body.siteward .lp-grey,body.siteward .lp-blue{background:var(--sw-bg-cool)}

/* Final CTA on the homepage takes the shared dark treatment. */
body.siteward .lp-final{position:relative;overflow:hidden;background:var(--sw-navy);
  border:0;border-radius:22px;padding:66px 44px}
body.siteward .lp-final::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:52px 52px}
body.siteward .lp-final::after{content:'';position:absolute;top:-150px;left:50%;
  transform:translateX(-50%);width:780px;height:400px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(59,123,255,.34),transparent 68%)}
body.siteward .lp-final>*{position:relative}
body.siteward .lp-final .eb{font-family:'JetBrains Mono',monospace;font-size:11px;
  font-weight:500;letter-spacing:.13em;color:var(--sw-blue-pale);text-transform:uppercase}
body.siteward .lp-final h2{margin-top:18px;font-size:clamp(30px,4.4vw,48px);
  letter-spacing:-.045em;color:#fff;max-width:640px;margin-left:auto;margin-right:auto}
body.siteward .lp-final .lp-sub{margin:18px auto 0;max-width:520px;font-size:17.5px;
  line-height:1.62;color:#9aadd2}
body.siteward .lp-final .lp-btn-ghost{background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);color:#fff}
body.siteward .lp-final .lp-btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff}
@media(max-width:640px){body.siteward .lp-final{padding:44px 22px;border-radius:16px}}

/* ============================================================================
   Responsive layer for the design-derived markup.

   The design file was authored at a single desktop width and expresses its
   whole layout in INLINE styles: fixed three-column grids, 68px headings,
   90px section padding. Inline styles outrank every selector, so a normal
   media query cannot touch them and the page kept its desktop grid on a
   phone, overflowing sideways. These rules match on the inline value itself
   and use !important, which is the only thing that beats a style attribute.

   Keep this in step with the design: if a new inline grid shape appears in
   the converted markup, add it here or it will not collapse on mobile.
   ========================================================================= */

/* Nothing in the design body may cause a sideways scroll. */
body.siteward section{max-width:100%}
body.siteward section > div{max-width:100%}

@media(max-width:900px){
  /* Every multi-column inline grid becomes a single column. Matching the
     attribute rather than listing each shape means a new column ratio in the
     design (the deep dives alternate 0.8fr 1.2fr and 1.2fr 0.8fr) cannot slip
     through and stay two-up on a phone. */
  body.siteward [style*="grid-template-columns"]{grid-template-columns:1fr!important}

  /* The deep-dive sections alternate text/screenshot order; once stacked the
     text must always come first or the caption reads before what it labels. */
  body.siteward [style*="grid-template-columns: 0.8fr 1.2fr"] > [style*="order: 2"],
  body.siteward [style*="grid-template-columns: 1.2fr 0.8fr"] > [style*="order: 2"]{
    order:0!important}

  /* Type and rhythm scale down; the inline sizes are desktop-only. */
  body.siteward section h1[style]{font-size:clamp(30px,8.4vw,46px)!important}
  body.siteward section h2[style]{font-size:clamp(26px,6.6vw,38px)!important}
  body.siteward section h3[style]{font-size:18px!important}
  body.siteward section[style*="padding: 96px 0"],
  body.siteward section[style*="padding: 90px 0"],
  body.siteward section[style*="padding: 88px 0"],
  body.siteward section[style*="padding: 84px 0"],
  body.siteward section[style*="padding: 80px 0"]{padding:56px 0!important}

  /* Absolutely-positioned glows are wider than a phone; clip them. */
  body.siteward section{overflow-x:clip}
}

@media(max-width:760px){
  body.siteward [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important}
  /* Inner padding on the design's rounded panels. */
  body.siteward [style*="padding: 66px 44px"],
  body.siteward [style*="padding: 62px 44px"]{padding:40px 22px!important}
  body.siteward [style*="border-radius: 22px"]{border-radius:16px!important}
  body.siteward section h1[style]{letter-spacing:-.03em!important}
}

@media(max-width:520px){
  /* Big display numerals overflow their column at phone widths. */
  body.siteward [style*="font-size: 58px"],
  body.siteward [style*="font-size: 56px"]{font-size:40px!important}
  body.siteward [style*="font-size: 76px"]{font-size:52px!important}
  body.siteward [style*="font-size: 33px"]{font-size:26px!important}
}

/* Tap targets and small labels on touch screens.
   The design's footer and nav links are 21-22px tall, below the 24px WCAG
   2.5.8 target size, and its monospace kickers go down to 9.5px. Both are
   fine on a desktop pointer and not on a phone. */
@media(max-width:900px){
  body.siteward .lp-fcol a,
  body.siteward .lp-flegal a,
  body.siteward .fmeta a,
  body.siteward .lp-nav > a,
  body.siteward .lp-drop-m a{
    display:block;min-height:40px;line-height:1.35;padding-top:9px;padding-bottom:9px}
  body.siteward [style*="font-size: 9.5px"],
  body.siteward [style*="font-size: 10px"],
  body.siteward [style*="font-size: 10.5px"]{font-size:11px!important}
}

/* The two standalone links the design leaves under the 24px target size: the
   announcement-bar button and the testimonial's review link. Inline links
   inside a sentence are exempt from WCAG 2.5.8 and are left alone. */
@media(max-width:900px){
  body.siteward .omx-announce-in a.omx-announce-btn{min-height:40px;padding:9px 16px;
    display:inline-flex;align-items:center}
  body.siteward section a[href*="wordpress.org/support"]{min-height:32px;
    display:inline-flex;align-items:center}
}

/* Stacked CTA pairs read as ragged when each button hugs its own label.
   Match their widths once they wrap onto separate lines. */
@media(max-width:560px){
  body.siteward .sw-final .btns,
  body.siteward .lp-final .lp-herocta,
  body.siteward .page-hero p:last-of-type{
    flex-direction:column;align-items:stretch}
  body.siteward .sw-final .btns a,
  body.siteward .lp-final .lp-herocta a,
  body.siteward .page-hero .lp-btn{
    width:100%;justify-content:center;text-align:center}
  /* Full width alone leaves them edge to edge: the flex containers above carry
     no gap, and in a hero the buttons are plain inline links in a <p>, so a
     stacked pair touches. Space the second one instead of relying on the
     whitespace between them, which collapses once they are block-width. */
  body.siteward .sw-final .btns a + a,
  body.siteward .lp-final .lp-herocta a + a,
  body.siteward .page-hero .lp-btn + .lp-btn{margin-top:10px}
}

/* ============================================================================
   Footer, brought onto the design.
   ========================================================================= */

/* The brand mark is the real asset (a solid white shield on the blue gradient),
   not the stroked outline the inline symbol was drawing. */
body.siteward .lp-brand img.mark{display:block;width:34px;height:34px;border-radius:9px;
  flex:none;box-shadow:0 6px 16px -6px rgba(37,99,235,.7)}

/* Line grid instead of the dot field, and a calmer glow. */
body.siteward .lp-footer{background:var(--sw-ink-deep)}
body.siteward .lp-footer .dots{
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:56px 56px;opacity:1}
body.siteward .lp-footer .fglow{top:-200px;right:-120px;width:560px;height:420px;
  background:radial-gradient(ellipse at center,rgba(47,107,240,.20),transparent 70%)}
body.siteward .lp-footer .fwrap{max-width:var(--sw-wrap)}
body.siteward .lp-fcol .ct{font-family:'JetBrains Mono',monospace;font-size:10.5px;
  font-weight:600;letter-spacing:.12em;color:#6f85b0}
body.siteward .lp-fcol a{color:#a9bbdb;font-weight:400}
body.siteward .lp-footer .fbrand p{color:#7e93bd;max-width:290px}

/* Status pill and review rating under the brand blurb. */
body.siteward .fmeta{display:flex;flex-direction:column;gap:9px;align-items:flex-start;
  margin-top:22px}
body.siteward .fmeta .status{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  color:#7fe3b6;background:rgba(22,163,74,.14);border:1px solid rgba(52,211,153,.26);
  border-radius:var(--sw-r-pill);padding:5px 12px}
body.siteward .fmeta .status .dot{width:7px;height:7px;border-radius:50%;background:#34d399;
  flex:none;animation:sw-pulse 2.4s infinite}
@media(prefers-reduced-motion:reduce){body.siteward .fmeta .status .dot{animation:none}}
body.siteward .fmeta .rating{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  color:#9dc0ff;text-decoration:none}
body.siteward .fmeta .rating .stars{color:var(--sw-amber);letter-spacing:1.5px}
body.siteward .fmeta .rating:hover{color:#fff}

/* Bottom bar: two halves, spaced, no middot separators. */
/* No divider above the bottom bar: the rule sat short of the column edges
   and threw the legal links out of alignment with the columns above. */
body.siteward .lp-fbar{border-top:0;margin-top:34px;padding-top:0;color:#6f85b0}
body.siteward .lp-fbar .lp-fmeta,body.siteward .lp-fbar .lp-flegal{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
body.siteward .lp-fbar a{color:#6f85b0;text-decoration:underline;text-underline-offset:2px}
body.siteward .lp-fbar a:hover{color:#fff}
@media(max-width:640px){
  body.siteward .lp-fbar{flex-direction:column;align-items:flex-start;gap:10px}
  body.siteward .lp-fbar .lp-fmeta,body.siteward .lp-fbar .lp-flegal{gap:8px 16px}}

/* ===================== Category / tag archives =====================
   The query title is the page's H1 and the post titles below it are H2s, so
   the H1 has to read as the larger of the two. These sit here rather than in
   style.css because `body.siteward .wp-block-post-title` above sets the single
   -article title size and would otherwise out-specify an archive rule loaded
   from the earlier stylesheet. */
body.siteward .omx-archive .wp-block-query-title{font-size:clamp(34px,4.4vw,46px);line-height:1.08;font-weight:800;letter-spacing:-1.2px;margin:0 0 12px;color:#0b1220}
body.siteward .omx-archive .omx-archive-intro{font-size:18px;color:#64748b;line-height:1.6;margin:0 0 44px}
body.siteward .omx-archive .omx-archive-intro p{margin:0;font-size:inherit;color:inherit;line-height:inherit}
body.siteward .omx-archive .wp-block-post-title{font-size:24px;line-height:1.32;font-weight:700;letter-spacing:-.3px;margin:34px 0 8px}
body.siteward .omx-archive .wp-block-post-title a{text-decoration:none;color:#0b1220}
body.siteward .omx-archive .wp-block-post-title a:hover{color:#2563EB}
body.siteward .omx-archive .wp-block-post-excerpt__excerpt{font-size:17px;color:#374151;line-height:1.7;margin:0}
body.siteward .omx-archive .wp-block-query-pagination{margin-top:52px;display:flex;gap:14px;flex-wrap:wrap;font-size:16px}
body.siteward .omx-archive .wp-block-query-pagination a{color:#2563EB;text-decoration:none}
body.siteward .omx-archive .wp-block-query-pagination a:hover{text-decoration:underline}
@media(max-width:640px){
  body.siteward .omx-archive .wp-block-post-title{font-size:21px;margin:28px 0 8px}
  body.siteward .omx-archive .omx-archive-intro{margin-bottom:32px}}