/* ==========================================================================
   HttpWatch site chrome: refreshed design (stage 1).
   Loaded by _Layout.cshtml on every page, after the inline legacy CSS. Covers the site header and dropdown menus,
   the "Ready to get started?" card and the footer (all pages), and the page header (breadcrumb strip + title
   band) and sidebar (detail pages).
   Page content (.post) keeps the legacy styles until it is restyled page by page. So every rule here is
   scoped to the chrome's own classes, and resets the legacy element rules (h1-h6, p, a) where they apply.
   Design reference: servers/HttpWatch.Website/docs/site-refresh-prototype (approved 2026-10-04).

   Sections
     1. Tokens            5. Page header           9. CTA card
     2. Base helpers      6. Section tabs         10. Footer
     3. Icons, buttons    7. Detail layout        11. Motion
     4. Site header       8. Sidebar              12. Restyled page content
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --hw-ink: #1d2330;
  --hw-body: #4a5263;
  --hw-muted: #6e7686;
  --hw-line: #e3e6ec;
  --hw-line-strong: #cfd6df;
  --hw-soft: #f5f7fa;
  --hw-soft-2: #eef2f7;
  --hw-chrome: #282729;
  --hw-footer: #1f2024;
  --hw-hero: linear-gradient(160deg, #1f2a3a 0%, #17365a 55%, #175889 100%);
  --hw-blue: #175889;
  --hw-blue-2: #4b9de7;
  --hw-link: #1c5fae;
  --hw-orange: #ff5f1f;
  --hw-orange-hover: #ffac08;

  --hw-radius-sm: 6px;
  --hw-radius: 10px;
  --hw-radius-lg: 14px;
  --hw-shadow-menu: 0 14px 44px rgba(16, 22, 34, .22), 0 0 0 1px rgba(16, 22, 34, .06);
  --hw-focus: 0 0 0 3px rgba(75, 157, 231, .6);

  --acc: #2f7fd8; --acc-text: #1c5fae; --acc-bg1: #e8f1fc; --acc-bg2: #cfe3fa;
}

/* Accent palette shared with the home page feature cards. --acc is decorative; --acc-text has at least
   4.5:1 contrast on white and on --acc-bg1. */
.acc-blue   { --acc: #2f7fd8; --acc-text: #1c5fae; --acc-bg1: #e8f1fc; --acc-bg2: #cfe3fa; }
.acc-green  { --acc: #3f9b1e; --acc-text: #2e7d14; --acc-bg1: #edf8e7; --acc-bg2: #d3eec5; }
.acc-purple { --acc: #6c4fd0; --acc-text: #5536b0; --acc-bg1: #f1edfd; --acc-bg2: #ddd3f8; }
.acc-orange { --acc: #ff5f1f; --acc-text: #c2410c; --acc-bg1: #fff3ec; --acc-bg2: #ffdccb; }
.acc-teal   { --acc: #0e9aa7; --acc-text: #0b6f78; --acc-bg1: #e7f7f8; --acc-bg2: #c6ecef; }
.acc-amber  { --acc: #c98a00; --acc-text: #8a5a00; --acc-bg1: #fff8e3; --acc-bg2: #fbe7a8; }
.acc-slate  { --acc: #5b6576; --acc-text: #475162; --acc-bg1: #eef1f5; --acc-bg2: #dde3ea; }

/* ---------- 2. Base helpers ---------- */
.site-header, .ph-strip, .ph, .side-nav, .cta-band, .site-footer {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.site-header a, .ph-strip a, .side-nav a, .cta-band a, .site-footer a { text-decoration: none; }
.site-header :focus-visible, .ph-strip :focus-visible, .side-nav :focus-visible, .cta-band :focus-visible,
.site-footer :focus-visible, .skip-link:focus-visible { outline: none; box-shadow: var(--hw-focus); border-radius: 4px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; left: 12px; top: 12px; z-index: 300; padding: 10px 14px; border-radius: var(--hw-radius-sm);
  background: #fff; color: var(--hw-ink); font: 700 15px/1.2 'Open Sans', Arial, sans-serif; }

/* ---------- 3. Icons, buttons ---------- */
svg.i { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-tile {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--acc-bg1) 0%, var(--acc-bg2) 100%); color: var(--acc-text);
}
.icon-tile svg { width: 22px; height: 22px; }

/* .btn-primary is the home hero "Download free" button: orange, 46px, 6px radius, 17px/700, sentence case. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 32px; border: 0; border-radius: var(--hw-radius-sm);
  font: 700 17px/1 'Open Sans', Arial, Helvetica, sans-serif; text-transform: none; letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.btn:hover { text-decoration: none; }
.btn-primary, .btn-primary:visited { background: var(--hw-orange); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--hw-orange-hover); color: #fff; }
/* .btn-buy: the licence-card "Buy now" buttons on Pricing and Upgrades, in the home hero's navy. Orange stays for
   download actions, so pages with many purchase buttons aren't a wall of orange. White on #175889 is 7.5:1. */
.btn-buy, .btn-buy:visited { background: var(--hw-blue); color: #fff; }
.btn-buy:hover, .btn-buy:focus-visible { background: #124a73; color: #fff; }
.btn-secondary, .btn-secondary:visited { background: #fff; color: var(--hw-blue); box-shadow: inset 0 0 0 1.5px #b9cde3; }
.btn-secondary:hover { background: #f2f7fc; color: var(--hw-blue); box-shadow: inset 0 0 0 1.5px var(--hw-blue); }
.btn-secondary:focus-visible { box-shadow: inset 0 0 0 1.5px var(--hw-blue), var(--hw-focus); }
.btn-quiet, .btn-quiet:visited { background: var(--hw-soft-2); color: var(--hw-ink); }
.btn-quiet:hover { background: #e3e9f1; color: var(--hw-ink); }
.btn-sm { height: 36px; padding: 0 18px; font-size: 14.5px; }
.btn-block { display: flex; width: 100%; }
.btn-ghost { display: inline-flex; align-items: center; gap: 4px; color: var(--hw-link); font-size: 16px; font-weight: 700; }
.btn-ghost:after { content: "\203A"; font-size: 1.15em; line-height: 1; transform: translateY(-1px); }
.btn-ghost:hover { color: var(--hw-link); text-decoration: underline; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; margin: 0; padding: 0 11px;
  border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap; vertical-align: middle;
}
.chip svg { width: 14px; height: 14px; }
.chip-free    { background: #fff0e8; color: #b93d0a; }
.chip-pro     { background: #e3f4da; color: #2e7d14; }
.chip-limited { background: #fff4d6; color: #7d5100; }
.chip-outline { background: #fff; color: var(--hw-body); box-shadow: inset 0 0 0 1px var(--hw-line-strong); }

/* Status marks in comparison tables. */
.mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; }
.mark svg { width: 13px; height: 13px; stroke-width: 2.6; }
.mark-yes { background: #3f9b1e; color: #fff; }
.mark-no, .mark-info { background: #e9edf2; color: #6e7686; }

.check-list { margin: 0; padding: 0; list-style: none; }
.check-list li { position: relative; margin: 0 0 8px; padding-left: 26px; font-size: 15px; line-height: 1.5; }
.check-list li:before {
  content: ""; position: absolute; left: 3px; top: 6px; width: 11px; height: 6px;
  border-left: 2px solid #3f9b1e; border-bottom: 2px solid #3f9b1e; transform: rotate(-45deg);
}
.check-list--inline { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.check-list--inline li { margin: 0; font-size: 14.5px; }

/* ---------- 4. Site header and navigation ---------- */
.site-header { position: relative; z-index: 100; background: var(--hw-chrome); }
.site-header__bar { display: flex; align-items: center; gap: 24px; height: 72px; }
.site-logo { display: block; flex: none; margin-right: auto; line-height: 0; }
.site-logo img { width: 164px; height: auto; vertical-align: top; }
.site-nav { position: relative; display: flex; align-items: center; gap: 18px; }
.site-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-nav__item { position: relative; display: flex; align-items: center; margin: 0; }
.site-nav__link, .site-nav__link:visited {
  display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 8px;
  color: #e9ecf1; font-size: 15px; font-weight: 600; white-space: nowrap;
}
.site-nav__link:hover, .site-nav__item.is-open > .site-nav__link { color: #fff; background: rgba(255, 255, 255, .08); text-decoration: none; }
.site-nav__link[aria-current] { color: #fff; box-shadow: inset 0 -2px 0 var(--hw-orange); border-radius: 8px 8px 0 0; }
.has-menu > .site-nav__link { padding-right: 4px; border-radius: 8px 0 0 8px; }
.site-nav__toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 40px; margin: 0; padding: 0 6px 0 0;
  border: 0; border-radius: 0 8px 8px 0; background: transparent; color: #aeb6c2; cursor: pointer;
}
.site-nav__toggle svg { width: 16px; height: 16px; transition: transform .15s; }
.has-menu:hover > .site-nav__toggle, .has-menu.is-open > .site-nav__toggle { color: #fff; background: rgba(255, 255, 255, .08); }
.has-menu.is-open > .site-nav__toggle svg { transform: rotate(180deg); }
.site-nav__cta, .site-nav__cta:visited {
  display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: var(--hw-radius-sm);
  color: #fff; font-size: 15px; font-weight: 700; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
}
.site-nav__cta:hover { background: #fff; color: var(--hw-ink); text-decoration: none; }
.site-burger { display: none; }

/* Dropdown panels: open on hover on desktop, and on .is-open (set by site.js when the chevron button is pressed,
   which is also how keyboard users open them; focus leaving the menu closes it). */
.site-menu {
  position: absolute; top: calc(100% + 12px); left: -8px; z-index: 200; display: none;
  width: 340px; padding: 10px; background: #fff; border-radius: var(--hw-radius-lg); box-shadow: var(--hw-shadow-menu);
}
.site-menu:before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */
/* The wide Features panel is anchored to the right edge of the nav so it never overflows the container. */
.site-nav__item.has-menu--wide { position: static; }
.site-menu--wide { left: auto; right: 0; width: 620px; }
.site-menu--wide .site-menu__items { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
.has-menu:hover > .site-menu, .has-menu.is-open > .site-menu { display: block; }
.site-menu__items { margin: 0; padding: 0; list-style: none; }
.site-menu__items li { margin: 0; }
.menu-item, .menu-item:visited {
  display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start;
  padding: 10px 12px; border-radius: var(--hw-radius); color: inherit;
}
.menu-item:hover { background: var(--hw-soft); text-decoration: none; }
.menu-item .icon-tile { width: 38px; height: 38px; border-radius: 10px; }
.menu-item .icon-tile svg { width: 20px; height: 20px; }
.menu-item__title { display: block; color: var(--hw-ink); font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.menu-item__desc { display: block; margin-top: 2px; color: var(--hw-muted); font-size: 13px; line-height: 1.45; }
.menu-item__ext { width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; color: var(--hw-muted); }
.site-menu__foot {
  display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 8px -10px -10px; padding: 13px 22px;
  background: var(--hw-soft); border-top: 1px solid var(--hw-line); border-radius: 0 0 var(--hw-radius-lg) var(--hw-radius-lg);
}
.site-menu__foot a, .site-menu__foot a:visited { color: var(--hw-link); font-size: 13.5px; font-weight: 700; }
.site-menu__foot a:hover { text-decoration: underline; }

@media (max-width: 991px) {
  .site-header__bar { height: 64px; }
  .site-logo img { width: 148px; }
  .site-burger {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px;
    border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer;
  }
  .site-burger svg { width: 24px; height: 24px; }
  .site-burger .i-close { display: none; }
  .site-header.is-menu-open .site-burger { background: rgba(255, 255, 255, .1); }
  .site-header.is-menu-open .site-burger .i-menu { display: none; }
  .site-header.is-menu-open .site-burger .i-close { display: block; }

  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 15px 18px;
    background: #fff; box-shadow: 0 18px 40px rgba(16, 22, 34, .25);
  }
  .site-header.is-menu-open .site-nav { display: flex; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--hw-line); }
  .site-nav__link, .site-nav__link:visited { flex: 1; height: 52px; padding: 0 4px; color: var(--hw-ink); font-size: 16px; border-radius: 0; }
  .site-nav__link:hover, .site-nav__item.is-open > .site-nav__link { background: transparent; color: var(--hw-ink); }
  .site-nav__link[aria-current] { box-shadow: none; color: var(--hw-orange); }
  .has-menu > .site-nav__link { border-radius: 0; }
  .site-nav__toggle { width: 44px; height: 52px; padding: 0; color: var(--hw-muted); border-radius: 8px; }
  .has-menu:hover > .site-nav__toggle, .has-menu.is-open > .site-nav__toggle { background: transparent; color: var(--hw-ink); }
  .has-menu:hover > .site-menu { display: none; }
  .has-menu.is-open > .site-menu { display: block; }
  .site-menu, .site-menu--wide { position: static; width: 100%; padding: 0 0 10px; box-shadow: none; border-radius: 0; flex-basis: 100%; }
  .site-menu:before { display: none; }
  .site-menu--wide .site-menu__items { grid-template-columns: 1fr; }
  .menu-item { grid-template-columns: 32px 1fr; align-items: center; padding: 7px 4px; }
  .menu-item .icon-tile { width: 32px; height: 32px; border-radius: 8px; }
  .menu-item .icon-tile svg { width: 17px; height: 17px; }
  .menu-item__desc { display: none; }
  .site-menu__foot { margin: 4px 0 0; padding: 10px 4px 0; background: transparent; border-top: 0; }
  .site-nav__cta, .site-nav__cta:visited { justify-content: center; height: 46px; margin-top: 16px; background: var(--hw-orange); box-shadow: none; font-size: 17px; }
  .site-nav__cta:hover { background: var(--hw-orange-hover); color: #fff; }
}

/* ---------- 5. Page header ----------
   Option R3: the home page goes dark header -> navy hero -> light sections; inner pages make the same step in
   miniature. A slim strip in the home hero's navy gradient carries the breadcrumb, then the title (and an optional
   lead) sits on a pale blue-grey wash that fades to white. */
.ph-strip { background: var(--hw-hero); }
.ph__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ph-strip .ph__crumbs { min-height: 42px; padding: 9px 0; color: #b9cbe0; font-size: 13.5px; line-height: 1.4; }
.ph-strip .ph__crumbs li { margin: 0; }
.ph-strip .ph__crumbs li + li:before { content: "\203A"; margin-right: 6px; color: #7f9bbb; }
.ph-strip .ph__crumbs a, .ph-strip .ph__crumbs a:visited { color: #d5e2f0; font-weight: 600; }
.ph-strip .ph__crumbs a:hover { color: #fff; }
.ph-strip .ph__crumbs [aria-current] { color: #fff; font-weight: 600; }

.ph { position: relative; background: linear-gradient(180deg, #eef4fb 0%, #f6f9fd 55%, #fff 100%); }
.ph__inner { display: flex; align-items: center; gap: 40px; padding: 36px 0 30px; }
.ph__text { flex: 1; min-width: 0; }
.ph .ph__title { margin: 0; color: var(--hw-ink); font-size: 36px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
.ph .ph__lead { max-width: 660px; margin: 14px 0 0; color: var(--hw-body); font-size: 17px; line-height: 1.6; }
.ph__art { flex: none; }
.ph .ph__tagline { margin: 10px 0 0; color: var(--acc-text); font-size: 20px; line-height: 1.35; font-weight: 700; }
/* "HttpWatch vs ..." matchup above the title on comparison pages (as on the home page comparison cards). */
.ph .vs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.vs-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1; }
.vs-chip img { width: 18px; height: 18px; }
.vs-chip--hw { background: #e3f4da; color: #2e7d14; }
.vs-chip--other { background: #fff; color: var(--hw-ink); box-shadow: inset 0 0 0 1px var(--hw-line-strong); }
.vs-word { color: var(--hw-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ph__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.ph--has-tabs .ph__inner { padding-bottom: 16px; }

@media (max-width: 767px) {
  .ph-strip .ph__crumbs { min-height: 38px; font-size: 13px; }
  .ph__inner { gap: 18px; padding: 24px 0 20px; }
  .ph .ph__title { font-size: 28px; }
  .ph .ph__lead { margin-top: 10px; font-size: 16px; }
  .ph .ph__tagline { font-size: 17px; }
}

/* ---------- 6. Section tabs (inside the page header; used by later stages) ---------- */
.section-tabs { border-bottom: 1px solid var(--hw-line); }
.section-tabs ul { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.section-tabs ul::-webkit-scrollbar { display: none; }
.section-tabs li { margin: 0; }
.section-tabs a, .section-tabs a:visited {
  display: block; padding: 12px 12px 11px; border-bottom: 3px solid transparent; white-space: nowrap;
  color: var(--hw-muted); font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.section-tabs a:hover { color: var(--hw-ink); }
.section-tabs a[aria-current] { color: var(--hw-ink); border-bottom-color: var(--acc); }
.section-tabs li:first-child a { padding-left: 0; }

/* ---------- 7. Detail layout: sidebar + content ---------- */
.layout-sidebar { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; padding-top: 16px; padding-bottom: 64px; }
.ph--has-tabs + .layout-sidebar { padding-top: 32px; }
.layout-sidebar > .post { min-width: 0; }
/* Long unbroken lines (HTTP Gallery request/response listings) scroll inside their block instead of widening the page. */
.layout-sidebar > .post pre { max-width: 100%; overflow-x: auto; }
@media (max-width: 991px) {
  .layout-sidebar { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 767px) {
  .layout-sidebar { padding-bottom: 48px; }
}

/* ---------- 8. Sidebar ---------- */
.side-nav { position: sticky; top: 24px; align-self: start; }
.side-nav__panel { padding: 8px; background: #fff; border: 1px solid var(--hw-line); border-radius: var(--hw-radius-lg); }
.side-nav .side-nav__title {
  margin: 0; padding: 10px 12px 6px; color: var(--hw-muted);
  font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.side-nav ul { margin: 0; padding: 0; list-style: none; }
.side-nav li { margin: 0; }
.side-nav li a, .side-nav li a:visited {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px;
  color: var(--hw-body); font-size: 14px; font-weight: 600; line-height: 1.35;
}
.side-nav li a:hover { background: var(--hw-soft); color: var(--hw-ink); }
.side-nav li a[aria-current="page"] { background: var(--acc-bg1); color: var(--acc-text); box-shadow: inset 3px 0 0 var(--acc); }
.side-nav li a svg { flex: none; width: 18px; height: 18px; opacity: .85; }
.side-nav__num { flex: none; width: 22px; color: var(--hw-muted); font-variant-numeric: tabular-nums; }
.side-nav li a[aria-current="page"] .side-nav__num { color: inherit; }
.side-nav__sep { height: 1px; margin: 8px 12px; background: var(--hw-line); }
.side-nav__toggle { display: none; }
@media (max-width: 991px) {
  .side-nav { position: static; }
  .side-nav__toggle {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 14px;
    border: 1px solid var(--hw-line-strong); border-radius: var(--hw-radius); background: #fff; color: var(--hw-ink);
    font: 600 15px/1.25 'Open Sans', Arial, sans-serif; text-align: left; cursor: pointer;
  }
  .side-nav__toggle small { color: var(--hw-muted); font-size: 13px; font-weight: 600; }
  .side-nav__toggle svg { width: 18px; height: 18px; margin-left: auto; color: var(--hw-muted); transition: transform .15s; }
  .side-nav.is-open .side-nav__toggle svg { transform: rotate(180deg); }
  .side-nav__panel { display: none; margin-top: 8px; }
  .side-nav.is-open .side-nav__panel { display: block; }
}

/* ---------- 12. Restyled page content ----------
   Full-width pages (ViewData["WideLayout"]) render in .layout-wide.page-wide instead of the sidebar layout, and
   restyled sidebar pages (ViewData["RestyledContent"]) render their content in .page-content instead of the legacy
   .post. Their markup uses the classes below. The legacy inline CSS still sets element defaults (h1-h6 margins and
   colours, p margins, link colours). The :where() resets here have the same specificity as those element rules
   and load later, so they win, while any class rule below still wins over the resets. */
.layout-wide { padding-top: 16px; padding-bottom: 72px; font-family: 'Open Sans', Arial, Helvetica, sans-serif; color: var(--hw-body); }
.ph--has-tabs + .layout-wide { padding-top: 32px; }
:where(.page-wide, .page-content) :is(h1, h2, h3, h4, h5, h6) { margin: 0; color: var(--hw-ink); font-weight: 700; line-height: 1.3; }
:where(.page-wide, .page-content) p { margin: 0; color: var(--hw-body); font-size: 15.5px; line-height: 1.6; }
:where(.page-wide, .page-content) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.page-wide, .page-content) li { margin: 0; }
:where(.page-wide, .page-content) a { color: var(--hw-link); }
:where(.page-wide, .page-content) code { font: 13.5px/1.4 Consolas, Menlo, monospace; }
.page-wide img, .page-content img { vertical-align: top; }
.layout-sidebar > .page-content { min-width: 0; color: var(--hw-body); font-family: 'Open Sans', Arial, Helvetica, sans-serif; }
.section { margin-top: 56px; }
.section:first-child { margin-top: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.section-head h2 { font-size: 24px; }
.section-head p { margin-top: 4px; color: var(--hw-muted); font-size: 15px; }
.muted { color: var(--hw-muted); }
.small { font-size: 14px; }

.card { background: #fff; border-radius: var(--hw-radius-lg); box-shadow: 0 1px 2px rgba(29, 35, 48, .06), 0 8px 24px rgba(29, 35, 48, .07); }
.card--accent { border-top: 4px solid var(--acc); }

.link-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.link-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.link-card, .link-card:visited {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; height: 100%;
  padding: 18px 20px; background: #fff; border: 1px solid var(--hw-line); border-radius: 12px; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.link-card:hover { border-color: #c9d3e0; box-shadow: 0 1px 2px rgba(29, 35, 48, .06), 0 8px 24px rgba(29, 35, 48, .07); transform: translateY(-1px); text-decoration: none; }
.link-card .icon-tile { width: 40px; height: 40px; border-radius: 11px; }
.link-card .icon-tile svg { width: 20px; height: 20px; }
.link-card__title { display: block; color: var(--hw-ink); font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.link-card__title:after { content: " \203A"; color: var(--acc-text); }
.link-card__desc { display: block; margin-top: 3px; color: var(--hw-muted); font-size: 14px; line-height: 1.5; }

.notice { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-radius: 12px; background: var(--acc-bg1); }
.notice > .icon-tile { width: 40px; height: 40px; background: #fff; }
:where(.page-wide, .page-content) .notice p { font-size: 15px; line-height: 1.55; }
.notice strong { color: var(--hw-ink); }

/* Prose: text pages in the full-width layout (e.g. the Pricing sub-pages). Reading width is capped. */
.prose { max-width: 780px; font-size: 16px; line-height: 1.65; }
.prose--wide { max-width: none; }
.prose > :first-child { margin-top: 0; }
.prose h1 { margin: 0 0 16px; font-size: 30px; line-height: 1.25; letter-spacing: -.01em; }
.prose h2 { margin: 40px 0 12px; font-size: 22px; line-height: 1.35; }
.prose h3 { margin: 28px 0 8px; font-size: 18px; line-height: 1.4; }
.prose p { margin: 0 0 16px; font-size: 16px; line-height: 1.65; }
.prose :is(ul, ol):not([class]) { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.prose ol:not([class]) { list-style: decimal; }
.prose :is(ul, ol):not([class]) li { margin: 0 0 6px; }
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: rgba(28, 95, 174, .35); }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong, .prose b { color: var(--hw-ink); }
.prose hr { height: 0; margin: 32px 0; border: 0; border-top: 1px solid var(--hw-line); }
.prose address { margin: 0; font-style: normal; line-height: 1.6; }
.prose code { padding: 2px 5px; border-radius: 4px; background: #f1f4f8; color: var(--hw-ink); }
.prose table.data { width: 100%; margin: 0 0 20px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--hw-line);
  border-radius: var(--hw-radius); overflow: hidden; font-size: 15px; }
.prose table.data th, .prose table.data td { padding: 11px 14px; border-bottom: 1px solid var(--hw-line); color: var(--hw-body); font-size: 15px; line-height: 1.55; text-align: left; vertical-align: top; }
.prose table.data tr:last-child > * { border-bottom: 0; }
.prose table.data th { background: var(--hw-soft); color: var(--hw-ink); font-size: 13px; font-weight: 700; letter-spacing: .03em; }
.prose table.data td p { margin: 0; font-size: 15px; }
.prose table.data td:first-child { color: var(--hw-ink); font-weight: 600; }
/* Question index at the top of FAQ pages. */
.prose .faq-index { margin: 0 0 8px; border: 1px solid var(--hw-line); border-radius: var(--hw-radius-lg); background: #fff; }
.prose .faq-index li + li { border-top: 1px solid var(--hw-line); }
.prose .faq-index a { display: block; padding: 10px 16px; color: var(--hw-ink); font-size: 15px; font-weight: 600; line-height: 1.45; text-decoration: none; }
.prose .faq-index a:hover { background: var(--hw-soft); color: var(--hw-link); }

/* Feature pages: one block per topic, with the screenshot in a tinted frame (as on the home page cards). */
.prose .feature-block + .feature-block { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--hw-line); }
.prose .feature-block h2 { margin-top: 0; }
.prose .shot { margin: 22px 0 0; padding: 22px; border-radius: var(--hw-radius-lg); background: linear-gradient(135deg, var(--acc-bg1) 0%, var(--acc-bg2) 100%); text-align: center; }
.prose .shot a { display: inline-block; max-width: 100%; text-decoration: none; }
.prose .shot img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 6px; background: #fff;
  box-shadow: 0 1px 2px rgba(29, 35, 48, .10), 0 12px 30px rgba(29, 35, 48, .16); }

/* Features hub: the home page feature cards (.home2 .h2-card from home.css) in the full-width layout. */
.features-hub .hub-title { max-width: 760px; margin: 0 auto 30px; font-size: 26px; line-height: 1.3; text-align: center; }
.features-hub .h2-card h3 a, .features-hub .h2-card h3 a:visited { color: inherit; }
.features-hub .h2-card h3 a:hover { color: var(--c-text); text-decoration: none; }
.features-hub .h2-card .h2-card-body > a { text-decoration: none; }
.features-hub .h2-card .h2-card-body > a:hover { text-decoration: underline; }
.features-hub__compare { margin-top: 16px !important; color: var(--hw-muted); font-size: 14.5px !important; }

/* Contact cards (Purchase Orders, About Us). */
.contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0 8px; }
.contact-card { padding: 20px 22px; border: 1px solid var(--hw-line); border-radius: var(--hw-radius-lg); background: #fff; }
.prose .contact-card :is(h2, h3) { margin: 0 0 8px; color: var(--hw-muted); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.prose .contact-card :is(p, address) { margin: 0; }
.prose .contact-cards + h2 { margin-top: 32px; }

/* About Us */
.prose .company-logo img { max-width: 220px; height: auto; }

/* New Features: one section per release, then a heading per feature. */
.prose .release-head { margin: 52px 0 4px; padding-top: 28px; border-top: 1px solid var(--hw-line); color: var(--acc-text); font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; }
.prose .release-head:first-of-type { margin-top: 8px; padding-top: 0; border-top: 0; }
.prose .release-head + h3 { margin-top: 10px; }
.prose.new-features h3 { font-size: 21px; }
.prose.new-features .shot { margin: 18px 0 22px; }

/* Version History: each release (p.history from the XSLT) is a heading, followed by its list of changes. */
.prose .version-history__feed { float: right; margin: 0 0 12px 16px; }
.prose.version-history p.history { margin: 30px 0 8px; padding-top: 22px; border-top: 1px solid var(--hw-line); color: var(--hw-muted); font-size: 14.5px; }
.prose.version-history p.history:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.prose.version-history p.history strong { color: var(--hw-ink); font-size: 18px; }
.prose.version-history ul { margin: 0 0 8px; padding-left: 22px; list-style: disc; }
.prose.version-history li { margin: 0 0 6px; font-size: 15.5px; line-height: 1.6; }

/* Previous / next links at the end of the feature pages and HTTP Gallery chapters (rendered by _DetailPageLayout). */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 44px 0 0; }
.pager a, .pager a:visited { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border: 1px solid var(--hw-line); border-radius: 12px;
  color: var(--hw-ink); font-size: 15.5px; font-weight: 700; line-height: 1.4; text-decoration: none; }
.pager a:hover { border-color: #c9d3e0; box-shadow: 0 1px 2px rgba(29, 35, 48, .06), 0 8px 24px rgba(29, 35, 48, .07); text-decoration: none; }
.pager small { color: var(--hw-muted); font-size: 12.5px; font-weight: 600; }
.pager .pager__next { grid-column: 2; text-align: right; }

/* FAQ question index: one card per topic. */
.faq-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 32px; }
.faq-group { padding: 18px 20px 12px; border: 1px solid var(--hw-line); border-radius: 12px; background: #fff; }
.prose .faq-group h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 16px; }
.faq-group h2 .icon-tile { width: 30px; height: 30px; border-radius: 8px; }
.faq-group h2 .icon-tile svg { width: 16px; height: 16px; }
.prose .faq-group ul { margin: 0; padding: 0; list-style: none; }
.prose .faq-group li { margin: 0; border-top: 1px solid var(--hw-line); }
.prose .faq-group li a { display: block; padding: 8px 0; color: var(--hw-ink); font-size: 14.5px; font-weight: 600; line-height: 1.45; text-decoration: none; }
.prose .faq-group li a:hover { color: var(--hw-link); }
.prose .faq-group p { margin: 0 0 8px; font-size: 14.5px; }
/* FAQ answers keep their markup (h3 question, answer paragraphs, hr between). */
.faq-page h3 { scroll-margin-top: 16px; }

/* Support page: help tiles and two information cards. */
.help-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0 0 24px; }
.help-tile, .help-tile:visited { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 22px 22px 20px; border: 1px solid var(--hw-line); border-top: 4px solid var(--acc);
  border-radius: 14px; background: #fff; color: inherit; box-shadow: 0 1px 2px rgba(29, 35, 48, .06), 0 8px 24px rgba(29, 35, 48, .07); transition: transform .15s, box-shadow .15s; }
.help-tile:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(29, 35, 48, .06), 0 16px 36px rgba(29, 35, 48, .12); text-decoration: none; }
.help-tile .icon-tile { margin-bottom: 8px; }
.help-tile__title { color: var(--hw-ink); font-size: 17px; font-weight: 700; }
.help-tile__title:after { content: " \203A"; color: var(--acc-text); }
.help-tile__desc { color: var(--hw-muted); font-size: 14px; line-height: 1.5; }
.help-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.help-card { padding: 24px 26px; border: 1px solid var(--hw-line); border-radius: var(--hw-radius-lg); background: #fff; }
.help-card h2 { margin-bottom: 8px; font-size: 19px; }
:where(.page-wide) .help-card p { margin: 0 0 12px; font-size: 15px; }
.help-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
@media (max-width: 991px) {
  .help-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .help-tiles { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .layout-wide { padding-bottom: 56px; }
  .section { margin-top: 44px; }
  .section-head h2 { font-size: 21px; }
  .link-cards--2 { grid-template-columns: 1fr; }
  .prose .shot { padding: 12px; border-radius: 12px; }
  .faq-groups, .help-pair, .contact-cards { grid-template-columns: 1fr; }
  .prose .version-history__feed { float: none; margin: 0 0 16px; }
  .pager { grid-template-columns: 1fr; }
  .pager .pager__next { grid-column: 1; }
  .prose h2 { margin-top: 32px; font-size: 20px; }
}

/* ---------- 9. CTA card ---------- */
.cta-band { padding: 0 0 72px; background: #fff; }
.cta-band--soft { background: var(--hw-soft); } /* home page: continues its last (grey) section */
.cta-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px;
  padding: 34px 40px; border: 1px solid #d6e4f3; border-radius: 18px;
  background: radial-gradient(120% 140% at 100% 0%, #dcebfb 0%, rgba(220, 235, 251, 0) 55%), linear-gradient(180deg, #f3f8fd 0%, #eef5fc 100%);
}
@media (min-width: 992px) {
  .cta-card { flex-wrap: nowrap; }
  .cta-card > :first-child { flex: 1; min-width: 0; }
  .cta-card__actions { flex: none; }
}
.cta-card h2 { margin: 0 0 10px; color: var(--hw-ink); font-size: 26px; line-height: 1.25; font-weight: 700; }
.cta-card .check-list li { color: var(--hw-body); }
.cta-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
@media (max-width: 767px) {
  .cta-band { padding-bottom: 48px; }
  .cta-card { padding: 26px 22px; }
  .cta-card h2 { font-size: 22px; }
  .cta-card__actions { width: 100%; }
  .cta-card__actions .btn { width: 100%; }
}

/* ---------- 10. Footer ---------- */
.site-footer { padding: 56px 0 28px; background: var(--hw-footer); color: #aab1bd; font-size: 14px; }
.site-footer a, .site-footer a:visited { color: #d4d9e1; }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; grid-template-columns: 176px .85fr .95fr 1.5fr .85fr; gap: 24px; }
.site-footer__brand img { width: 150px; height: auto; }
.site-footer .site-footer__brand p { max-width: 190px; margin: 12px 0 0; color: #9aa2ae; font-size: 13.5px; line-height: 1.55; }
.site-footer h3 { margin: 4px 0 12px; color: #fff; font-size: 14px; line-height: 1.4; font-weight: 700; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin: 0 0 8px; font-size: 13.5px; line-height: 1.4; font-weight: 600; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1);
}
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-footer__bottom li { margin: 0; }
.site-footer .site-footer__bottom p { margin: 0; color: #8d95a2; font-size: 13px; line-height: 1.4; }
@media (max-width: 991px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer .site-footer__brand p { max-width: none; }
}

/* ---------- 11. Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .site-header *, .side-nav *, .cta-band *, .page-wide * { transition: none !important; }
}