/* --- /base.css --- */
/* ─── Info Center — Base Styles (Figma-exact) ──────────────── */

:root {
    interpolate-size: allow-keywords;
    --info-orange: #fa700d;
    --info-orange-hover: #e56000;
    --info-blue: #3c8dc7;
    --info-blue-icon: #6892fe;
    --info-blue-light: rgba(60, 141, 199, 0.1);
    --info-heading: #365072;
    --info-text: #161e23;
    --info-text-secondary: rgba(22, 30, 35, 0.75);
    --info-surface: #FFFFFF;
    --info-bg: #f0f4f7;
    --info-border: rgba(22, 30, 35, 0.15);
    --info-radius-outer: 32px;
    --info-radius-card: 24px;
    --info-radius-inner: 16px;
    --info-radius-pill: 99px;
    --info-radius-faq: 20px;
    --info-radius-input: 8px;
    /* Figma design system: headings Urbanist, running text Montserrat
       (body/md-regular etc.) — see the typography variables in Figma. */
    --info-font-heading: 'Urbanist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --info-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --info-max-width: 100%; /* full-screen layout; the rail keeps an 80px gutter */
    --info-content-width: 1419px;
    --info-section-padding: 64px;
    --info-btn-shadow: 2px 4px 9px 0px rgba(250, 112, 13, 0.1), 7px 15px 16px 0px rgba(250, 112, 13, 0.09), 16px 33px 22px 0px rgba(250, 112, 13, 0.05);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }

/* Suppress the shared header's white scroll-glow gradient — not wanted on the info site */
body.info-portal .header-component::after { content: none; }

/* Mobile: give the header a bit of breathing room from the viewport top */
@media (max-width: 1100px) {
    body.info-portal .header-component { padding-top: 12px; }
}

/* ─── Page-level overflow guard ──────────────────────────────
   Section-bg-wrapper::before uses negative margins + 100vw to
   bleed to viewport edges; without this, the trick produces a
   horizontal scrollbar. Matches the consumer-site rule. */
body.info-portal { overflow-x: clip; }

/* ─── Sticky footer ──────────────────────────────────────────
   Pages with little content: the footer's bottom edge still
   touches the bottom of the viewport. The footer wrapper gets
   margin-top:auto (see .story-site-footer rule). */
body.info-portal {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ─── Universal info-block rail ──────────────────────────────
   Every block on the info site (categories, quick-access, tools,
   hero, faq, breadcrumb, manual-list) is centred on this rail.
   Same pattern as the consumer site's `[class^="wp-block-headless-"]`
   rule. The rail leaves gutter space on both sides so a
   section-bg-wrapper::before backdrop shows through naturally —
   no per-block constraint needed. */

body.info-portal {
    /* The consumer site narrows its layout via --container-width (1440px);
       the info site opts into full-screen instead. This feeds both the rail
       below and the shared header/footer/text-page components, which all read
       var(--container-width, 1920px). The 80px gutter is kept for breathing room. */
    --container-width: 100%;
    --info-aligned-width: min(var(--container-width, 1920px), calc(100% - 80px));
}

@media (max-width: 1100px) {
    body.info-portal { --info-aligned-width: calc(100% - 64px); }
}

@media (max-width: 768px) {
    body.info-portal { --info-aligned-width: calc(100% - 48px); }
}

body.info-portal [class^="wp-block-headless-info-"],
body.info-portal .wp-block-headless-product-cards,
body.info-portal .header-component .header-inner,
body.info-portal .footer-component {
    width: var(--info-aligned-width);
    max-width: var(--info-aligned-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* The footer CARD sits on the rail (same width as every white content
   card); its content gets the same 64px section padding as the cards,
   so all white surfaces and all content share the same two edges. */
body.info-portal .footer-component .footer-inner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 64px var(--info-section-padding) 44px;
    box-sizing: border-box;
}
@media (max-width: 1100px) {
    body.info-portal .footer-component .footer-inner { padding: 52px 32px 36px; }
}
@media (max-width: 768px) {
    body.info-portal .footer-component .footer-inner { padding: 40px 24px 28px; }
}

/* Vertical breathing room between consecutive info-blocks so they don't
 * touch when stacked on a page. Skips the first block to avoid an extra
 * gap under the header. */
body.info-portal [class^="wp-block-headless-info-"] + [class^="wp-block-headless-info-"] {
    margin-top: 60px;
}

/* ─── Standalone card-style blocks ────────────────────────────
   Categories, Quick Access and Tools were previously rendered
   inside a single shared `.info-content-panel`. Now that each
   renders as its own self-contained block, give each one the
   same rounded-white-surface look so they read as standalone
   cards on the page-bg. Section-bg behind them still bleeds
   through the gutter left/right. */
body.info-portal .wp-block-headless-info-categories,
body.info-portal .wp-block-headless-info-quick-access,
body.info-portal .wp-block-headless-info-tools {
    background: var(--info-surface);
    border-radius: var(--info-radius-outer);
    padding: var(--info-section-padding);
    overflow: hidden;
}

/* ─── Merged card-block stack ─────────────────────────────────
   Per Figma these card-blocks form one continuous shared surface
   when stacked directly after each other (e.g. the homepage):
   flatten the touching corners and close the gap between them.
   A `.section-bg-wrapper` in between (the blue glow behind Tools)
   is transparent, so the merge looks through it — its full-width
   ::before keeps bleeding in the page gutters left/right. */
body.info-portal :is(.wp-block-headless-info-categories, .wp-block-headless-info-quick-access, .wp-block-headless-info-tools):has(+ :is(.wp-block-headless-info-categories, .wp-block-headless-info-quick-access, .wp-block-headless-info-tools)),
body.info-portal :is(.wp-block-headless-info-categories, .wp-block-headless-info-quick-access, .wp-block-headless-info-tools):has(+ .section-bg-wrapper > :is(.wp-block-headless-info-categories, .wp-block-headless-info-quick-access, .wp-block-headless-info-tools)),
body.info-portal .section-bg-wrapper:has(+ :is(.wp-block-headless-info-categories, .wp-block-headless-info-quick-access, .wp-block-headless-info-tools)) > :is(.wp-block-headless-info-categories, .wp-block-headless-info-quick-access, .wp-block-headless-info-tools),
body.info-portal .section-bg-wrapper:has(+ .section-bg-wrapper > :is(.wp-block-headless-info-categories, .wp-block-headless-info-quick-access, .wp-block-headless-info-tools)) > :is(.wp-block-headless-info-categories, .wp-block-headless-info-quick-access, .wp-block-headless-info-tools) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

body.info-portal :is(.wp-block-headless-info-categories, .wp-block-headless-info-quick-access, .wp-block-headless-info-tools) + :is(.wp-block-headless-info-categories, .wp-block-headless-info-quick-access, .wp-block-headless-info-tools),
body.info-portal :is(.wp-block-headless-info-categories, .wp-block-headless-info-quick-access, .wp-block-headless-info-tools) + .section-bg-wrapper > :is(.wp-block-headless-info-categories, .wp-block-headless-info-quick-access, .wp-block-headless-info-tools),
body.info-portal .section-bg-wrapper:has(> :is(.wp-block-headless-info-categories, .wp-block-headless-info-quick-access, .wp-block-headless-info-tools)) + :is(.wp-block-headless-info-categories, .wp-block-headless-info-quick-access, .wp-block-headless-info-tools),
body.info-portal .section-bg-wrapper:has(> :is(.wp-block-headless-info-categories, .wp-block-headless-info-quick-access, .wp-block-headless-info-tools)) + .section-bg-wrapper > :is(.wp-block-headless-info-categories, .wp-block-headless-info-quick-access, .wp-block-headless-info-tools) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
}

/* ─── Category-overview auto-template ─────────────────────────
   Renders for any `manual_category` term flagged with
   `_show_as_overview=1` — e.g. /service/. Cards link to child
   overview-pages or to filtered manual lists. */
body.info-portal .category-overview {
    width: var(--info-aligned-width);
    max-width: var(--info-aligned-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
body.info-portal .category-overview + .category-overview {
    margin-top: 60px;
}
body.info-portal .category-overview-hero {
    background: var(--info-surface);
    border-radius: var(--info-radius-outer);
    padding: var(--info-section-padding);
    overflow: hidden;
}
body.info-portal .category-overview-title {
    font-size: 56px;
    line-height: 1.1;
    margin-bottom: 12px;
}
body.info-portal .category-overview-subtitle {
    font-size: 18px;
    color: var(--info-text-secondary);
    max-width: 720px;
}
body.info-portal .category-overview-section-title {
    font-size: 24px;
    margin-bottom: 24px;
}
body.info-portal .category-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
}
@media (max-width: 1024px) {
    body.info-portal .category-overview-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    body.info-portal .category-overview-grid { grid-template-columns: 1fr; }
}
body.info-portal .category-overview-children,
body.info-portal .category-overview-manuals {
    background: var(--info-surface);
    border-radius: var(--info-radius-outer);
    padding: var(--info-section-padding);
    overflow: hidden;
}
body.info-portal .category-overview-card {
    display: block;
    background: #F0F4F7;
    border: 1px solid transparent;
    border-radius: var(--info-radius-card);
    padding: 24px;
    color: inherit;
    transition: border-color .18s ease, transform .18s ease;
}
body.info-portal .category-overview-card:hover {
    border-color: #6892FE;
    transform: translateY(-2px);
}
body.info-portal .category-overview-card-title {
    font-size: 20px;
    margin-bottom: 6px;
    color: var(--info-heading);
}
body.info-portal .category-overview-card-desc {
    font-size: 14px;
    color: var(--info-text-secondary);
    margin-bottom: 12px;
}
body.info-portal .category-overview-card-meta {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--info-blue);
    font-weight: 600;
}
body.info-portal .category-overview-empty {
    text-align: center;
    color: var(--info-text-secondary);
    padding: 60px;
}

/* ─── Footer: light surface on info site, orange accents from shared base ── */

/* The footer card width comes from the rail (see the universal rule at
   the top) so it matches every other white surface; the wrapper adds
   breathing room above (same 60px rhythm as between info blocks) and
   below, like the consumer site's .main-container. */
body.info-portal .main-container.story-site-footer {
    padding: 60px 0 20px;
    /* Sticky footer: pushed to the viewport bottom on short pages
       (body.info-portal is a min-height:100vh flex column). */
    margin-top: auto;
}

body.info-portal .footer-component {
    background: #ffffff;
}

/* ─── Cards: silver/dark navy by default on info site ───────────
   Backgrounds match the dark-theme surface so the components feel
   consistent across themes. Card body text is recoloured to keep
   contrast against the dark surface. */

/* Category, Quick Access + Tool cards: light surface with bright blue hover border */
body.info-portal .info-category-card,
body.info-portal .info-quick-item,
body.info-portal .info-tool-card {
    background: #F0F4F7;
    border-color: transparent;
}

body.info-portal .info-category-card:hover,
body.info-portal .info-quick-item:hover,
body.info-portal .info-tool-card:hover {
    border-color: #6892FE;
}

body.info-portal .info-category-card h3,
body.info-portal .info-tool-card h3,
body.info-portal .info-quick-item strong {
    color: var(--info-heading);
}

body.info-portal .info-category-card p,
body.info-portal .info-tool-card p,
body.info-portal .info-quick-item p {
    color: var(--info-text-secondary);
}

body.info-portal .info-quick-arrow {
    color: var(--info-blue-icon);
}

body.info-portal .info-quick-arrow {
    color: #9ebcca;
}

/* Icons inside info blocks on the homepage — bright blue accent */
body.info-portal .info-quick-icon i,
body.info-portal .info-quick-icon .headless-icon-svg,
body.info-portal .info-tool-card-icon,
body.info-portal .info-tool-card-icon i,
body.info-portal .info-tool-card-icon .headless-icon-svg {
    color: #6892fe;
}

/* Solid navy primary buttons (card CTAs + help CTA) */
body.info-portal .info-btn-view,
body.info-portal .info-btn-start,
body.info-portal .info-btn-primary {
    background: #365072;
    border-color: #365072;
    color: #ffffff;
    box-shadow: none;
}
body.info-portal .info-btn-view:hover,
body.info-portal .info-btn-start:hover,
body.info-portal .info-btn-primary:hover {
    background: var(--info-blue);
    border-color: var(--info-blue);
    color: #ffffff;
}

body {
    font-family: var(--info-font-body);
    color: var(--info-text);
    background: var(--info-bg);
    line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 {
    font-family: var(--info-font-heading);
    font-weight: 600;
    color: var(--info-heading);
    line-height: 1.4;
}

.info-portal main {
    max-width: var(--info-max-width);
    margin: 0 auto;
}


/* ─── Section background fade system (shared with consumer site) ──
   Opt-in wrapper around any block. Uses mask-image to fade a full-bleed
   background colour in at the top and out at the bottom — drives a soft
   colour wash per block instead of hard gradient transitions. */

.section-bg-wrapper {
    position: relative;
}

.section-bg-wrapper::before {
    content: '';
    position: absolute;
    top: calc(var(--section-bg-offset-top, 0px) * -1);
    bottom: calc(var(--section-bg-offset-bottom, 0px) * -1);
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    background: var(--section-bg-color, transparent);
    mask-image: linear-gradient(to bottom, transparent 0%, black var(--section-bg-fade-top, 12%), black calc(100% - var(--section-bg-fade-bottom, 12%)), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black var(--section-bg-fade-top, 12%), black calc(100% - var(--section-bg-fade-bottom, 12%)), transparent 100%);
    pointer-events: none;
    z-index: -1;
}


/* ─── Breadcrumb ──────────────────────────────────────────── */

.info-breadcrumb {
    margin: 16px 0 24px;
}

.info-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(22, 30, 35, 0.65);
}

.info-breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.info-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.info-breadcrumb a:hover {
    color: var(--info-orange, #fa700d);
}

.info-breadcrumb-separator {
    color: rgba(22, 30, 35, 0.35);
}

.info-breadcrumb [aria-current="page"] {
    color: #161e23;
    font-weight: 500;
}

.post-term-dark .info-breadcrumb ol {
    color: rgba(255, 255, 255, 0.65);
}

.post-term-dark .info-breadcrumb [aria-current="page"] {
    color: #ffffff;
}

.post-term-dark .info-breadcrumb-separator {
    color: rgba(255, 255, 255, 0.35);
}


/* ─── Hero ─────────────────────────────────────────────────── */

.info-hero {
    padding: var(--info-section-padding);
    text-align: center;
}

.info-hero-decoration {
    width: 141px;
    height: 10px;
    background: var(--info-orange);
    border-radius: 5px;
    margin: 0 auto 24px;
}

.info-hero h1 {
    font-size: 88px;
    line-height: 1.1;
    color: var(--info-heading);
    margin-bottom: 10px;
    max-width: 913px;
    margin-left: auto;
    margin-right: auto;
}

/* Search-less hero (showSearch toggle off): let the whole text block —
   heading AND subtitle — run wider. Higher specificity than the base
   .info-hero-subtitle { max-width: 468px } so it wins regardless of order. */
.info-hero--no-search h1,
.info-hero--no-search .info-hero-subtitle { max-width: 1200px; }

/* Explicit text-block width presets (headingWidth setting). Apply to both the
   heading and the subtitle so the whole text block shares one width. Placed
   after the auto/no-search rules so an explicit choice always wins regardless
   of the search toggle. */
.info-hero--w-normal h1,
.info-hero--w-normal .info-hero-subtitle { max-width: 913px; }
.info-hero--w-wide h1,
.info-hero--w-wide .info-hero-subtitle { max-width: 1200px; }
.info-hero--w-full h1,
.info-hero--w-full .info-hero-subtitle { max-width: 100%; }

.info-hero-subtitle {
    font-size: 16px;
    font-family: var(--info-font-body), sans-serif;
    color: var(--info-text);
    line-height: 24px;
    margin-bottom: 10px;
    max-width: 468px;
    margin-left: auto;
    margin-right: auto;
}

.info-search {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 10px;
}

.info-search-field {
    display: flex;
    align-items: center;
    background: var(--info-surface);
    border: 1px solid var(--info-border);
    border-radius: var(--info-radius-input);
    padding: 12px;
    gap: 8px;
    height: 64px;
    /* Larger screens: keep the field at a fixed ~512px instead of sizing to
       the input's content width; the ≤480px query resets it to full width. */
    width: 512px;
    max-width: 100%;
}

.info-search-field:focus-within {
    border-color: var(--info-blue);
    box-shadow: 0 0 0 3px rgba(60, 141, 199, 0.12);
}

.info-search-field i {
    color: var(--info-text);
    font-size: 24px;
    flex-shrink: 0;
}

.info-search-field input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    padding: 0 8px;
    font-family: var(--info-font-body);
    font-size: 16px;
    color: var(--info-text);
    outline: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.info-search-field input::placeholder {
    color: var(--info-text);
    opacity: 0.5;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.info-search-btn {
    padding: 12px 24px;
    background: var(--info-orange);
    color: #fff;
    border: none;
    border-radius: var(--info-radius-pill);
    font-family: var(--info-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
    box-shadow: var(--info-btn-shadow);
    align-self: stretch;
}

.info-search-btn:hover { background: var(--info-orange-hover); }

.info-popular {
    font-size: 12px;
    color: var(--info-text);
    text-align: center;
    line-height: 1.6;
}

.info-popular a {
    color: var(--info-blue);
    font-weight: 600;
}

.info-popular a:hover { text-decoration: underline; }

/* Left-aligned hero variant — toggled per block in the editor (alignLeft).
   Overrides the centered defaults above for the decoration, heading, subtitle,
   search row and popular links. Compound selectors keep it winning regardless
   of source order. */
.info-hero.info-hero--left { text-align: left; }
.info-hero.info-hero--left .info-hero-decoration { margin-left: 0; margin-right: auto; }
.info-hero.info-hero--left h1 { margin-left: 0; margin-right: 0; }
.info-hero.info-hero--left .info-hero-subtitle { margin-left: 0; margin-right: 0; }
.info-hero.info-hero--left .info-search { justify-content: flex-start; }
.info-hero.info-hero--left .info-popular,
.info-hero.info-hero--left .hl-popular { text-align: left; }


/* Legacy `.info-content-wrapper`, `.info-content-panel`, and the shared
 * container-block were all removed — info-blocks now render as single
 * `<section class="wp-block-headless-info-*">` roots and are centred on
 * the universal info-portal rail (see top of file), matching the
 * consumer-site `[class^="wp-block-headless-"]` pattern. */


/* ─── Section Headers (shared pattern) ─────────────────────── */

.info-section-header {
    max-width: 650px;
}

.info-section-header h2 {
    font-size: 24px;
    line-height: 1.4;
    margin-bottom: 4px;
}

.info-section-header p {
    font-size: 16px;
    color: var(--info-text-secondary);
    line-height: 1.6;
}


/* ─── Category Cards (3-col with images) ───────────────────── */

.info-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
    margin-top: 24px;
}

.info-category-card {
    background: var(--info-bg);
    border: 1px solid transparent;
    border-radius: var(--info-radius-card);
    padding: 16px 16px 20px;
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.info-category-card:hover {
    border-color: var(--info-blue-icon);
}

.info-category-card img,
.info-category-card .info-card-placeholder {
    width: 100%;
    height: 249px;
    object-fit: cover;
    border-radius: var(--info-radius-inner);
}

.info-category-card .info-card-placeholder {
    background: #d9d9d9;
}

.info-category-card h3 {
    font-size: 20px;
    line-height: 1.4;
}

.info-category-card p {
    font-size: 14px;
    color: var(--info-text-secondary);
    line-height: 1.6;
}

.info-btn-view {
    display: block;
    text-align: center;
    padding: 12px 32px;
    background: var(--info-surface);
    border: 1px solid var(--info-orange);
    border-radius: var(--info-radius-pill);
    color: var(--info-orange);
    font-family: var(--info-font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    transition: background 0.15s, color 0.15s;
    box-shadow: var(--info-btn-shadow);
}

.info-btn-view:hover {
    background: var(--info-orange);
    color: #fff;
}


/* ─── Quick Access (3x2 grid) ──────────────────────────────── */

.info-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 24px;
}

.info-quick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: var(--info-bg);
    border: 1px solid transparent;
    border-radius: var(--info-radius-card);
    backdrop-filter: blur(20px);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.info-quick-item:hover {
    border-color: var(--info-blue);
    box-shadow: 0 2px 8px rgba(60, 141, 199, 0.1);
}

.info-quick-icon {
    width: 72px;
    height: 72px;
    border-radius: var(--info-radius-inner);
    background: var(--info-blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 14px;
}

.info-quick-icon i {
    font-size: 28px;
    color: var(--info-blue);
}

.info-quick-text {
    flex: 1;
    min-width: 0;
}

.info-quick-text strong {
    display: block;
    font-family: var(--info-font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--info-heading);
    line-height: 1.4;
    margin-bottom: 4px;
}

.info-quick-text p {
    font-size: 14px;
    color: var(--info-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.info-quick-arrow {
    color: var(--info-text-secondary);
    font-size: 16px;
    flex-shrink: 0;
}


/* ─── Interactive Tools (4-col) ────────────────────────────── */

.info-tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
    margin-top: 24px;
}

.info-tool-card {
    background: var(--info-bg);
    border: 1px solid transparent;
    border-radius: var(--info-radius-card);
    padding: 16px 16px 20px;
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.info-tool-card:hover {
    border-color: var(--info-blue-icon);
}

.info-tool-card-icon {
    font-size: 24px;
    color: var(--info-heading);
}

.info-tool-card h3 {
    font-size: 20px;
    line-height: 1.4;
}

.info-tool-card p {
    font-size: 14px;
    color: var(--info-text-secondary);
    line-height: 1.6;
    flex: 1;
}

.info-btn-start {
    display: block;
    text-align: center;
    padding: 12px 32px;
    background: var(--info-surface);
    border: 1px solid var(--info-orange);
    border-radius: var(--info-radius-pill);
    color: var(--info-orange);
    font-family: var(--info-font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    transition: background 0.15s, color 0.15s;
    box-shadow: var(--info-btn-shadow);
}

.info-btn-start:hover {
    background: var(--info-orange);
    color: #fff;
}


/* ─── FAQ + Still Need Help ────────────────────────────────── */

.info-faq-section {
    padding: var(--info-section-padding);
}

.info-faq-layout {
    max-width: var(--info-content-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 348px;
    gap: 96px;
    align-items: stretch;
}

.info-faq-layout > .info-faq-column { align-self: start; }
.info-faq-layout > .info-help-card  { align-self: end; }

.info-faq-column h2 {
    font-size: 52px;
    line-height: 1.1;
    color: var(--info-heading);
    margin-bottom: 32px;
}

.info-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-accordion-item {
    background: var(--info-surface);
    border-radius: var(--info-radius-faq);
    overflow: hidden;
}

.info-accordion-item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        block-size 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.22s ease,
        content-visibility 0.32s allow-discrete;
}

.info-accordion-item[open]::details-content {
    block-size: auto;
    opacity: 1;
}

.info-accordion-item summary {
    padding: 16px 20px;
    font-family: var(--info-font-heading);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.4;
    color: var(--info-heading);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    user-select: none;
}

.info-accordion-item summary::-webkit-details-marker,
.info-accordion-item summary::marker { display: none; content: ''; }

.info-accordion-item summary::after {
    content: '↓';
    font-family: var(--info-font-body);
    font-size: 16px;
    color: var(--info-text-secondary);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
    display: inline-block;
}

.info-accordion-item[open] summary::after { transform: rotate(180deg); }

.info-accordion-body {
    padding: 0 20px 16px;
    font-size: 16px;
    color: var(--info-text-secondary);
    line-height: 1.6;
}

.info-help-card {
    padding: 0;
    margin-bottom: 8px;
}

.info-help-card h3 {
    font-size: 40px;
    line-height: 1.1;
    color: var(--info-text);
    margin-bottom: 16px;
}

.info-help-card > p {
    font-size: 16px;
    color: var(--info-text-secondary);
    margin-bottom: 20px;
    line-height: 1.6;
}

.info-help-contact-line {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: var(--info-text-secondary);
    margin-bottom: 8px;
    line-height: 1.6;
}

.info-help-contact-line a { color: var(--info-text); font-weight: 500; }

.info-help-contact-line i {
    color: var(--info-text-secondary);
    margin-right: 10px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* Primary navy button (Contact support / Help CTA) */
.info-btn-primary {
    display: inline-block;
    padding: 12px 32px;
    background: var(--info-surface);
    border: 1px solid var(--info-orange);
    border-radius: var(--info-radius-pill);
    color: var(--info-orange);
    font-family: var(--info-font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    box-shadow: var(--info-btn-shadow);
    margin-top: 24px;
}

.info-btn-orange {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 24px;
    background: var(--info-orange);
    color: #fff;
    border: none;
    border-radius: var(--info-radius-pill);
    font-family: var(--info-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 24px;
    box-shadow: var(--info-btn-shadow);
}

.info-btn-orange:hover { background: var(--info-orange-hover); }


/* ─── Footer ───────────────────────────────────────────────── */

.info-footer {
    background: var(--info-surface);
    border-radius: var(--info-radius-outer);
    padding: var(--info-section-padding);
    margin-top: 16px;
}

.info-footer-inner {
    max-width: var(--info-content-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 64px;
}

.info-footer-brand { max-width: 855px; }

.info-footer-logo {
    height: 80px;
    width: auto;
    display: block;
    margin-bottom: 16px;
}

.info-footer-tagline {
    font-size: 16px;
    color: var(--info-text-secondary);
    margin-bottom: 24px;
    line-height: 1.6;
}

.info-footer-copy {
    font-size: 14px;
    color: var(--info-text-secondary);
}

.info-footer-right { text-align: right; }

.info-footer-social {
    display: flex;
    gap: 32px;
    justify-content: flex-end;
    margin-bottom: 24px;
}

.info-footer-social a {
    color: var(--info-text);
    font-size: 24px;
    transition: color 0.15s;
}

.info-footer-social a:hover { color: var(--info-orange); }

.info-footer-legal {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.info-footer-legal a {
    font-size: 14px;
    font-weight: 600;
    color: var(--info-text);
    transition: color 0.15s;
}

.info-footer-legal a:hover { color: var(--info-orange); }

/* Footer accent bar — info-site overrides the shared 80×5 to match Figma 141×10 */
.info-portal .footer-accent-bar {
    width: 141px;
    height: 10px;
    border-radius: 5px;
}


/* ─── Manual List Block ────────────────────────────────────────
   Smart block that renders a filtered grid of `manual` CPT posts.
   See: shared/wp-plugins/.../includes/info-blocks/manual-list.php */

.info-manual-list {
    max-width: var(--info-content-width);
    margin: 0 auto;
    padding: var(--info-section-padding) 0;
}

.info-manual-list-header { margin-bottom: 32px; }

.info-manual-list-heading {
    font-family: var(--info-font-heading);
    font-size: 32px;
    line-height: 1.2;
    color: var(--info-heading);
    margin-bottom: 8px;
}

.info-manual-list-subtitle {
    font-size: 16px;
    color: var(--info-text-secondary);
    line-height: 1.5;
    max-width: 720px;
}

.info-manual-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.info-manual-list-rows .info-manual-grid { grid-template-columns: 1fr; }

.info-manual-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background: var(--info-surface);
    border: 1px solid var(--info-border);
    border-radius: var(--info-radius-card);
    color: inherit;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.info-manual-card:hover {
    border-color: var(--info-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(60, 141, 199, 0.1);
}

.info-manual-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 20px;
}

.info-manual-badge {
    display: inline-block;
    padding: 3px 10px;
    background: var(--info-blue-light);
    color: var(--info-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--info-radius-pill);
}

.info-manual-featured {
    color: #f0b21a;
    font-size: 16px;
    line-height: 1;
}

.info-manual-card-title {
    font-family: var(--info-font-heading);
    font-size: 18px;
    line-height: 1.3;
    color: var(--info-heading);
    margin: 4px 0 0;
}

.info-manual-card-excerpt {
    font-size: 14px;
    line-height: 1.5;
    color: var(--info-text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.info-manual-card-meta {
    font-size: 12px;
    color: var(--info-text-secondary);
    opacity: 0.75;
    margin: auto 0 0;
}

.info-manual-list-empty {
    padding: 40px;
    text-align: center;
    color: var(--info-text-secondary);
    background: var(--info-surface);
    border-radius: var(--info-radius-card);
}

@media (max-width: 1024px) {
    .info-manual-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .info-manual-grid { grid-template-columns: 1fr; }
}


/* ─── Reveal / loading animations ──────────────────────────────
   Each block fades + lifts in as it scrolls into view; cards inside
   grids stagger. JS adds `.is-visible` via IntersectionObserver. */

@media (prefers-reduced-motion: no-preference) {
    .info-hero,
    .info-container > div,
    .info-faq-column,
    .info-help-card,
    .info-footer {
        opacity: 0;
        transform: translateY(28px);
        transition:
            opacity 0.7s ease,
            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform;
    }

    .info-hero.is-visible,
    .info-container > div.is-visible,
    .info-faq-column.is-visible,
    .info-help-card.is-visible,
    .info-footer.is-visible {
        opacity: 1;
        transform: none;
    }

    .info-categories-grid > *,
    .info-quick-grid > *,
    .info-tools-grid > *,
    .info-accordion > * {
        opacity: 0;
        transform: translateY(14px);
        transition:
            opacity 0.55s ease,
            transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .is-visible > .info-categories-grid > *,
    .is-visible > .info-quick-grid > *,
    .is-visible > .info-tools-grid > *,
    .info-faq-column.is-visible .info-accordion > * {
        opacity: 1;
        transform: none;
    }

    .is-visible > .info-categories-grid > :nth-child(2),
    .is-visible > .info-quick-grid > :nth-child(2),
    .is-visible > .info-tools-grid > :nth-child(2),
    .info-faq-column.is-visible .info-accordion > :nth-child(2) { transition-delay: 0.07s; }
    .is-visible > .info-categories-grid > :nth-child(3),
    .is-visible > .info-quick-grid > :nth-child(3),
    .is-visible > .info-tools-grid > :nth-child(3),
    .info-faq-column.is-visible .info-accordion > :nth-child(3) { transition-delay: 0.14s; }
    .is-visible > .info-categories-grid > :nth-child(4),
    .is-visible > .info-quick-grid > :nth-child(4),
    .is-visible > .info-tools-grid > :nth-child(4),
    .info-faq-column.is-visible .info-accordion > :nth-child(4) { transition-delay: 0.21s; }
    .is-visible > .info-quick-grid > :nth-child(5),
    .info-faq-column.is-visible .info-accordion > :nth-child(5) { transition-delay: 0.28s; }
    .is-visible > .info-quick-grid > :nth-child(6),
    .info-faq-column.is-visible .info-accordion > :nth-child(6) { transition-delay: 0.35s; }

    .info-hero-decoration {
        animation: info-bar-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
    }

    @keyframes info-bar-grow {
        from { transform: scaleX(0); opacity: 0; }
        to   { transform: scaleX(1); opacity: 1; }
    }
}


/* ─── Responsive ───────────────────────────────────────────── */

@media (max-width: 1200px) {
    .info-hero h1 { font-size: 64px; }
    .info-tools-grid { grid-template-columns: repeat(2, 1fr); }
    .info-categories-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    :root { --info-section-padding: 40px; }
    .info-hero h1 { font-size: 48px; }
    .info-faq-column h2 { font-size: 36px; }
    .info-categories-grid { grid-template-columns: repeat(2, 1fr); }
    .info-quick-grid { grid-template-columns: repeat(2, 1fr); }
    .info-faq-layout { grid-template-columns: 1fr; }
    .info-footer-inner { flex-direction: column; align-items: flex-start; }
    .info-footer-right { text-align: left; }
    .info-footer-social { justify-content: flex-start; }
}

@media (max-width: 768px) {
    .info-hero h1 { font-size: 36px; }
    .info-help-card h3 { font-size: 28px; }
    .info-categories-grid,
    .info-quick-grid,
    .info-tools-grid { grid-template-columns: 1fr; }
    .info-category-card img,
    .info-category-card .info-card-placeholder { height: 180px; }
    .info-search-field input { min-width: 200px; }
}

@media (max-width: 480px) {
    :root { --info-section-padding: 24px; }
    .info-hero h1 { font-size: 28px; }
    .info-search { flex-direction: column; }
    .info-search-field { width: 100%; }
    .info-search-field input { min-width: unset; }
    .info-search-btn { width: 100%; }
}

/* ─── Product page ──────────────────────────────────────────────────
   URL: /products/{slug}/  →  rendered server-side by ContentResolver
   from a manual_category term with _category_type=product.
   The body carries `.template-product` so this entire block is scoped. */

body.template-product .product-page {
    width: var(--info-aligned-width, 100%);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 80px;
    font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif);
}

.product-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    margin: 40px 0 56px;
    padding: 48px;
    background: linear-gradient(135deg, #ffffff 0%, #f0f6fc 60%, #e1ecf6 100%);
    border: 1px solid #d6e4f0;
    border-radius: 24px;
    box-shadow: 0 6px 24px rgba(15, 79, 122, 0.06);
}
.product-hero-media img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
    display: block;
}
.product-hero-body { min-width: 0; }
.product-hero-title {
    font-size: 48px;
    line-height: 1.1;
    margin: 0 0 12px;
    font-weight: 700;
    color: #0f1419;
    letter-spacing: -0.02em;
}
.product-hero-subtitle {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    color: #5d6b7c;
}

.product-intro {
    margin: 0 0 56px;
    padding: 0 8px;
    font-size: 16px;
    line-height: 1.65;
    color: #2d3742;
}
.product-intro h2 { font-size: 24px; margin: 32px 0 12px; color: #0f1419; }
.product-intro h3 { font-size: 18px; margin: 24px 0 8px; color: #0f1419; }
.product-intro p  { margin: 0 0 16px; }
.product-intro a  { color: #1d6db3; text-decoration: underline; }

.product-phase {
    margin: 0 0 56px;
    padding: 0 8px;
}
.product-phase-head {
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e9f0;
}
.product-phase-title {
    font-size: 28px;
    margin: 0;
    color: #1d4f7a;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.product-phase-desc {
    margin: 6px 0 0;
    font-size: 14px;
    color: #5d6b7c;
}
.product-phase-empty {
    margin: 0;
    padding: 32px;
    background: #f8fbff;
    border: 1px dashed #c8d6e3;
    border-radius: 12px;
    color: #8b97a4;
    text-align: center;
    font-size: 14px;
}

.manual-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.manual-card {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.manual-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 79, 122, 0.1);
    border-color: #3c8dc7;
}
.manual-card--featured { border-color: #f0b21a; box-shadow: 0 2px 8px rgba(240, 178, 26, 0.15); }
.manual-card--featured:hover { border-color: #f0b21a; box-shadow: 0 8px 24px rgba(240, 178, 26, 0.25); }

.manual-card-link {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-areas:
        "icon body"
        "icon cta";
    gap: 0 14px;
    padding: 18px 20px;
    text-decoration: none !important;
    color: inherit;
}
.manual-card-icon {
    grid-area: icon;
    width: 56px;
    height: 72px;
    background: linear-gradient(135deg, #3c8dc7 0%, #2c7ab0 100%);
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
}
.manual-card--featured .manual-card-icon {
    background: linear-gradient(135deg, #f0b21a 0%, #d99800 100%);
}
.manual-card-body { grid-area: body; min-width: 0; }
.manual-card-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: #0f1419;
    line-height: 1.3;
}
.manual-card-excerpt {
    margin: 0 0 8px;
    font-size: 13px;
    color: #5d6b7c;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.manual-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #8b97a4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.manual-card-meta span:not(:last-child)::after {
    content: '·';
    margin-left: 8px;
    color: #d6dde4;
}
/* Support card body copy is a normal sentence (Figma Service 128) —
   undo the uppercase meta-line treatment it inherits. */
.manual-card--support .manual-card-meta {
    text-transform: none;
    letter-spacing: normal;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: var(--manual-text-body);
}
.manual-card-cta {
    grid-area: cta;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #1d6db3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .product-hero { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
    .product-hero-title { font-size: 36px; }
}
@media (max-width: 600px) {
    body.template-product .product-page { padding: 0 16px 60px; }
    .product-hero { margin: 24px 0 32px; padding: 24px; border-radius: 18px; }
    .product-hero-title { font-size: 28px; }
    .product-hero-subtitle { font-size: 16px; }
    .product-phase-title { font-size: 22px; }
    .manual-cards { grid-template-columns: 1fr; }
}

/* ─── Download manual page template ─────────────────────────────────
   URL: /manuals/{slug}/  →  ContentResolver renders this from a manual
   CPT post. Design tokens lifted from Figma "service 128" frame.
   Settings flow through CSS vars set inline on .manual-page. */

body.template-download-manual-page,
body.template-manual-page,
body.template-category {
    --manual-text-headings: #365072;
    --manual-text-body: rgba(22, 30, 35, 0.75);
    --manual-text-body-strong: #161e23;
    --manual-surface-light: #ffffff;
    --manual-surface-semiwhite: #f0f4f7;
    --manual-brand-secondary: #3c8dc7;
    --manual-brand-primary: #fa700d;
    --manual-radius-outer: 20px;
    --manual-radius-inner: 16px;
    --manual-radius-pill: 99px;
    --manual-cta-color: #365072;
    background: var(--manual-surface-semiwhite);
}

body.template-manual-page .manual-page {
    width: 100%;
    max-width: 1510px;
    margin: 0 auto;
    padding: 24px 64px 80px;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    color: var(--manual-text-body);
    box-sizing: border-box;
}

.manual-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 370px;
    gap: 36px;
    align-items: start;
}
.manual-page--sidebar-left .manual-page-grid {
    grid-template-columns: 370px minmax(0, 1fr);
}
.manual-page--sidebar-left .manual-sidebar { order: -1; }

/* Breadcrumb */
.manual-breadcrumb {
    margin: 0 0 24px;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 600;
    color: var(--manual-text-body);
}
.manual-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.manual-breadcrumb li::after { content: '›'; margin-left: 6px; color: rgba(22, 30, 35, 0.4); }
.manual-breadcrumb li:last-child::after { content: none; }
.manual-breadcrumb li.is-current { color: var(--manual-text-body-strong); }
.manual-breadcrumb a { color: inherit; text-decoration: none; }
.manual-breadcrumb a:hover { text-decoration: underline; }

/* Hero */
.manual-hero { margin: 0 0 36px; }
.manual-hero-title {
    font-family: 'Urbanist', 'Montserrat', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 8px;
    color: var(--manual-text-headings);
    letter-spacing: -0.01em;
}
.manual-hero-meta {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--manual-text-body);
}

/* Featured image */
.manual-hero-image {
    margin: 0 0 36px;
    border-radius: var(--manual-radius-outer);
    overflow: hidden;
    background: #d9d9d9;
}
.manual-hero-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1070 / 602;
    object-fit: cover;
}

/* Body content — Figma rhythm: headings hug their own paragraphs
   (12px below), sections breathe via space ABOVE each heading (36px).
   No flex gap: that inflated every heading→paragraph gap to 52px. */
.manual-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Figma body/md-regular: running text is Montserrat (headings below
       stay Urbanist) — without this it inherits the Urbanist body font. */
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
}
.manual-body h2,
.manual-body h3 {
    font-family: 'Urbanist', 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--manual-text-headings);
    margin: 36px 0 12px;
    line-height: 1.4;
}
.manual-body > :first-child { margin-top: 0; }
.manual-body h2 { font-size: 24px; }
.manual-body h3 { font-size: 20px; }
.manual-body p,
.manual-body ul,
.manual-body ol {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--manual-text-body);
}
.manual-body ul,
.manual-body ol { padding-left: 22px; }
.manual-body a {
    color: var(--manual-brand-secondary);
    text-decoration: underline;
}
.manual-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--manual-radius-inner);
    margin: 8px 0;
}

/* ─── Full-article manual body ──────────────────────────────────────
   A "manual" without a PDF is a full Gutenberg article: its post_content
   flows straight into .manual-body. The rules above only cover
   h2/h3/p/ul/ol/a/img — everything else (h1/h4-h6, blockquotes, tables,
   figures, code, alignfull/wide) rendered unstyled and broke the layout.
   These additive rules give that content the same Service 128 design
   language. PDF manuals have little/no body, so they're unaffected. */
.manual-body h1,
.manual-body h4,
.manual-body h5,
.manual-body h6 {
    font-family: 'Urbanist', 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--manual-text-headings);
    margin: 36px 0 12px;
    line-height: 1.4;
}
.manual-body h1 { font-size: 32px; }
.manual-body h4 { font-size: 18px; }
.manual-body h5 { font-size: 16px; }
.manual-body h6 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
.manual-body strong, .manual-body b { color: var(--manual-text-body-strong); font-weight: 600; }
.manual-body em, .manual-body i { font-style: italic; }
.manual-body li { margin: 0 0 6px; font-size: 16px; line-height: 1.6; color: var(--manual-text-body); }
.manual-body li > ul, .manual-body li > ol { margin: 6px 0 0; }

/* Blockquotes */
.manual-body blockquote {
    margin: 24px 0;
    padding: 4px 0 4px 20px;
    border-left: 4px solid var(--manual-brand-secondary);
    color: var(--manual-text-body-strong);
    font-style: italic;
}
.manual-body blockquote p { margin-bottom: 8px; }
.manual-body blockquote cite { display: block; font-style: normal; font-size: 14px; color: var(--manual-text-body); }

/* Figures + captions (images, embeds, tables all ship as <figure>) */
.manual-body figure { margin: 24px 0; max-width: 100%; }
.manual-body figure img { margin: 0; }
.manual-body figcaption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--manual-text-body);
    text-align: center;
}

/* Tables — figure wrapper keeps wide tables scrollable inside the column */
.manual-body figure:has(> table) { overflow-x: auto; }
.manual-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5;
    margin: 24px 0;
    background: var(--manual-surface-light);
    border-radius: var(--manual-radius-inner);
    overflow: hidden;
}
.manual-body figure > table { margin: 0; }
.manual-body th, .manual-body td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(22, 30, 35, 0.1);
}
.manual-body th {
    font-family: 'Urbanist', 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--manual-text-headings);
    background: var(--manual-surface-semiwhite);
}
.manual-body tr:last-child td { border-bottom: none; }

/* Inline code + code blocks */
.manual-body code {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 0.9em;
    background: var(--manual-surface-semiwhite);
    padding: 2px 6px;
    border-radius: 6px;
}
.manual-body pre {
    background: var(--manual-surface-semiwhite);
    padding: 16px 20px;
    border-radius: var(--manual-radius-inner);
    overflow-x: auto;
    margin: 24px 0;
    font-size: 14px;
    line-height: 1.6;
}
.manual-body pre code { background: none; padding: 0; }

/* Horizontal rule */
.manual-body hr {
    border: none;
    border-top: 1px solid rgba(22, 30, 35, 0.12);
    margin: 36px 0;
}

/* Alignwide / alignfull would break out of the content column and cause
   horizontal overflow — keep them within the column bounds. */
.manual-body .alignwide,
.manual-body .alignfull {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Buttons (used in sidebar + inline "Configure your setup" style CTAs) */
.manual-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: var(--manual-radius-pill);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.6;
    text-decoration: none !important;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
    white-space: nowrap;
}
.manual-button--primary {
    background: var(--manual-cta-color);
    color: #fff;
    width: 100%;
}
.manual-button--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(54, 80, 114, 0.25);
}
.manual-button--accent {
    background: var(--manual-brand-primary);
    color: #fff;
    width: 100%;
    box-shadow: 0 4px 12px rgba(250, 112, 13, 0.18);
}
.manual-button--accent:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(250, 112, 13, 0.32);
}

/* Sidebar cards */
.manual-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 24px;
}
.manual-card {
    background: var(--manual-surface-light);
    border-radius: var(--manual-radius-outer);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.manual-card-title {
    font-family: 'Urbanist', 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--manual-text-headings);
    margin: 0;
}
.manual-card-meta {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--manual-text-body);
}
.manual-card-body {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--manual-text-body);
}

/* Download card — adjusts spacing of title block + button */
.manual-card--download {
    gap: 12px;
}
.manual-card--download .manual-card-title { margin-bottom: 4px; }
.manual-card--download .manual-card-meta { font-size: 16px; }

/* Related resources list */
.manual-related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.manual-related-item { margin: 0; }
.manual-related-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: var(--manual-surface-semiwhite);
    border-radius: 24px;
    text-decoration: none !important;
    transition: background 0.15s, transform 0.15s;
}
.manual-related-link:hover {
    background: rgba(60, 141, 199, 0.1);
    transform: translateX(2px);
}
.manual-related-icon {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    background: rgba(60, 141, 199, 0.1);
    border-radius: var(--manual-radius-inner);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--manual-brand-secondary);
    font-size: 28px;
}
.manual-related-title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Urbanist', 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--manual-text-headings);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.manual-related-cta {
    flex: 0 0 auto;
    color: var(--manual-brand-secondary);
    font-weight: 700;
    font-size: 18px;
}

/* Support card — primary CTA + secondary CTA stack */
.manual-card--support { gap: 16px; }
.manual-card--support .manual-button { height: 46px; padding: 12px 24px; }

/* Responsive */
@media (max-width: 1100px) {
    body.template-manual-page .manual-page { padding: 20px 32px 60px; }
    .manual-page-grid,
    .manual-page--sidebar-left .manual-page-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .manual-sidebar { position: static; }
    .manual-page--sidebar-left .manual-sidebar { order: 0; }
}
@media (max-width: 600px) {
    body.template-manual-page .manual-page { padding: 16px 20px 60px; }
    .manual-hero-title { font-size: 28px; }
    .manual-card-title { font-size: 20px; }
    .manual-body h2 { font-size: 20px; }
    .manual-body h3 { font-size: 18px; }
}

/* ─── Generic category page template ────────────────────────────────
   URL: /{slug}/  →  ContentResolver renders this for any manual_category
   term whose template is `category` (the default). Layout is intentionally
   simple — hero + intro + child grid + manual cards. */

body.template-category {
    --category-accent: #3c8dc7;
}
body.template-category .category-page {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px 80px;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    box-sizing: border-box;
}

.category-breadcrumb { margin: 24px 0 16px; font-size: 12px; line-height: 1.6; color: rgba(22,30,35,0.75); }
.category-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.category-breadcrumb li::after { content: '›'; margin-left: 6px; color: rgba(22,30,35,0.35); }
.category-breadcrumb li:last-child::after { content: none; }
.category-breadcrumb li.is-current { color: #161e23; font-weight: 600; }
.category-breadcrumb a { color: inherit; text-decoration: none; }
.category-breadcrumb a:hover { text-decoration: underline; }

.category-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 8px 0 40px;
    padding: 32px;
    background: linear-gradient(135deg, #ffffff 0%, #f0f6fc 60%, #e1ecf6 100%);
    border-radius: 20px;
    border: 1px solid #d6e4f0;
}
.category-hero:has(.category-hero-media) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.category-hero-media img { width: 100%; height: auto; border-radius: 14px; display: block; }
.category-hero-title { font-family: 'Urbanist', 'Montserrat', sans-serif; font-size: 40px; line-height: 1.1; font-weight: 600; margin: 0 0 8px; color: #365072; letter-spacing: -0.01em; }
.category-hero-subtitle { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(22,30,35,0.75); }

.category-intro {
    margin: 0 0 40px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(22,30,35,0.75);
}
.category-intro h2 { font-family: 'Urbanist', sans-serif; font-size: 24px; margin: 24px 0 12px; color: #365072; }
.category-intro p { margin: 0 0 16px; }
.category-intro a { color: var(--category-accent); text-decoration: underline; }

.category-section-title { font-family: 'Urbanist', 'Montserrat', sans-serif; font-size: 24px; font-weight: 600; color: #365072; margin: 0 0 20px; }

/* Children grid */
.category-children { margin: 0 0 48px; }
.category-children-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.category-children--list .category-children-grid { grid-template-columns: 1fr; gap: 8px; }
.category-child-card {
    display: block;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 14px;
    text-decoration: none !important;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.category-child-card:hover {
    transform: translateY(-2px);
    border-color: var(--category-accent);
    box-shadow: 0 6px 18px rgba(15,79,122,0.08);
}
.category-child-title { font-family: 'Urbanist', sans-serif; font-size: 18px; font-weight: 600; margin: 0 0 6px; color: #365072; }
.category-child-desc { font-size: 13px; line-height: 1.5; margin: 0 0 10px; color: rgba(22,30,35,0.75); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.category-child-meta { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--category-accent); font-weight: 700; margin: 0; }

.category-manuals { margin: 0 0 40px; }
.category-empty {
    padding: 32px;
    background: #f8fbff;
    border: 1px dashed #c8d6e3;
    border-radius: 12px;
    color: #8b97a4;
    text-align: center;
    font-size: 14px;
    margin: 0;
}

@media (max-width: 700px) {
    body.template-category .category-page { padding: 0 20px 60px; }
    .category-hero { grid-template-columns: 1fr; padding: 24px; }
    .category-hero:has(.category-hero-media) { grid-template-columns: 1fr; }
    .category-hero-title { font-size: 28px; }
    .category-section-title { font-size: 20px; }
}

/* ─── Category page (Service 154 design) ─────────────────────────────
   Used by /{slug}/ pages including /products/ and /service/.
   Body class .template-category triggers these styles when the
   manual_category template renders. */

body.template-category {
    --kb-text-headings: #365072;
    --kb-text-body: rgba(22, 30, 35, 0.75);
    --kb-text-strong: #161e23;
    --kb-surface-light: #ffffff;
    --kb-surface-semiwhite: #f0f4f7;
    --kb-brand-primary: #fa700d;
    --kb-brand-secondary: #3c8dc7;
    --kb-radius-outer: 20px;
    --kb-radius-component: 8px;
    background: var(--kb-surface-semiwhite);
}

/* Hero (above the white card) */
body.template-category .category-page,
body.template-category > main,
body.template-category .info-content-wrapper {
    /* Same rail as the header/footer (.header-inner/.footer-inner) so
       the white cards line up with the site chrome. */
    width: var(--info-aligned-width);
    max-width: var(--info-aligned-width);
    margin: 0 auto;
    padding: 0;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    color: var(--kb-text-body);
}

body.template-category .category-breadcrumb {
    margin: 24px 0 0;
    padding: 0 64px;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 600;
    color: var(--kb-text-body);
}
body.template-category .category-breadcrumb ol {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 6px;
}
body.template-category .category-breadcrumb li::after { content: ' > '; margin-left: 6px; color: rgba(22, 30, 35, 0.4); }
body.template-category .category-breadcrumb li:last-child::after { content: none; }
body.template-category .category-breadcrumb li.is-current { color: var(--kb-text-strong); }
body.template-category .category-breadcrumb a { color: inherit; text-decoration: none; }
body.template-category .category-breadcrumb a:hover { text-decoration: underline; }

body.template-category .category-hero-title {
    font-family: 'Urbanist', 'Montserrat', sans-serif;
    font-size: 52px;
    font-weight: 600;
    line-height: 1.1;
    margin: 24px 0 8px;
    padding: 0 64px;
    color: var(--kb-text-headings);
    letter-spacing: -0.01em;
}
body.template-category .category-hero-subtitle {
    margin: 0 0 64px;
    padding: 0 64px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--kb-text-body);
    max-width: 720px;
}

/* The big white card that holds all content sections */
body.template-category .category-grid-section {
    margin: 0 0 4px;
    padding: 64px;
    background: var(--kb-surface-light);
    border-radius: 32px;
    box-shadow: 0 4px 24px rgba(15, 79, 122, 0.04);
}
body.template-category .category-grid-section + .category-grid-section {
    margin-top: 0;
}

body.template-category .category-grid-head {
    margin: 0 0 24px;
}
body.template-category .category-grid-heading {
    font-family: 'Urbanist', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 4px;
    color: var(--kb-text-headings);
}
body.template-category .category-grid-sub {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--kb-text-body);
}

body.template-category .category-grid {
    display: grid;
    gap: 8px;
    width: 100%;
}
body.template-category .category-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.template-category .category-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.template-category .category-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

body.template-category .category-grid-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: var(--kb-surface-semiwhite);
    border: 1px solid transparent;
    border-radius: 24px;
    text-decoration: none !important;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s, background 0.15s;
}
body.template-category .category-grid-card:hover {
    border-color: var(--kb-brand-secondary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(60, 141, 199, 0.12);
    background: #ffffff;
}
body.template-category .category-grid-card:first-child {
    border-color: var(--kb-brand-secondary);
}

body.template-category .category-grid-icon {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    background: rgba(60, 141, 199, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--kb-brand-secondary);
}

body.template-category .category-grid-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body.template-category .category-grid-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--kb-text-headings);
    word-break: break-word;
}
body.template-category .category-grid-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--kb-text-body);
    word-break: break-word;
}

body.template-category .category-grid-arrow {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--kb-text-body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    transition: transform 0.15s;
}
body.template-category .category-grid-card:hover .category-grid-arrow {
    transform: translateX(4px);
    color: var(--kb-brand-secondary);
}

body.template-category .category-grid-empty {
    padding: 32px;
    background: var(--kb-surface-semiwhite);
    border: 1px dashed #c8d6e3;
    border-radius: 16px;
    color: var(--kb-text-body);
    text-align: center;
    font-size: 14px;
}

@media (max-width: 1100px) {
    body.template-category .category-breadcrumb,
    body.template-category .category-hero-title,
    body.template-category .category-hero-subtitle { padding: 0 32px; }
    body.template-category .category-grid-section { margin: 0 0 4px; padding: 32px; }
    body.template-category .category-grid--cols-3,
    body.template-category .category-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    body.template-category .category-hero-title { font-size: 36px; padding: 0 24px; }
    body.template-category .category-hero-subtitle { padding: 0 24px; margin-bottom: 32px; }
    body.template-category .category-breadcrumb { padding: 0 24px; }
    body.template-category .category-grid-section { margin: 0 0 4px; padding: 24px; border-radius: 24px; }
    body.template-category .category-grid--cols-2,
    body.template-category .category-grid--cols-3,
    body.template-category .category-grid--cols-4 { grid-template-columns: 1fr; }
}

/* ─── Service 19 / 154 — search hero ─────────────────────────────── */

body.template-category .category-search-hero {
    margin: 0;
    padding: 64px 64px 32px;
    text-align: left;
    background: var(--kb-surface-semiwhite);
}
body.template-category .category-search-hero-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 52px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 24px;
    color: var(--kb-text-headings);
    letter-spacing: -0.01em;
}
body.template-category .category-search-hero-sub {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--kb-text-body);
    max-width: 720px;
}
body.template-category .category-search-hero-form {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    max-width: 720px;
    margin: 0;
}
body.template-category .category-search-hero-input {
    flex: 1 1 480px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #fff;
    border: 1.333px solid #ccc;
    border-radius: 8px;
    height: 64px;
    color: var(--kb-text-body);
    transition: border-color .15s, box-shadow .15s;
}
body.template-category .category-search-hero-input:focus-within {
    border-color: var(--kb-brand-secondary);
    box-shadow: 0 0 0 3px rgba(60,141,199,0.15);
}
body.template-category .category-search-hero-input input {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    color: var(--kb-text-body);
    outline: none;
}
body.template-category .category-search-hero-input input::placeholder { color: rgba(22,30,35,0.4); }
body.template-category .category-search-hero-btn {
    height: 64px;
    padding: 12px 24px;
    background: var(--kb-brand-primary);
    color: #fff;
    border: 0;
    border-radius: 99px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(250,112,13,0.2);
    transition: transform .15s, box-shadow .15s, background .15s;
}
body.template-category .category-search-hero-btn:hover {
    background: #e56000;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(250,112,13,0.28);
}

/* ─── Live search: animated field + results dropdown ──────────────────
   Shared by every form[data-live-search] (homepage info-hero + the category
   search hero). Block-scoped (not template-scoped) so it works wherever the
   search box is placed. */
form[data-live-search] {
    position: relative;
}
/* The hero's reveal animation sets will-change:opacity,transform, which makes
   the section a stacking context. Without a positive z-index its absolutely
   positioned dropdown gets trapped behind later sections. Lift the search
   sections above following content (but below the sticky header at z-index
   2000). */
.info-hero,
.category-search-hero {
    position: relative;
    z-index: 100;
}
/* The field "unfolds" on focus: lifts and gains a soft glow. Targets both
   search-field wrappers. */
form[data-live-search] .info-search-field,
form[data-live-search] .category-search-hero-input {
    transition: border-color .18s ease, box-shadow .25s ease, transform .25s ease;
    will-change: transform;
}
form[data-live-search].is-focused .info-search-field,
form[data-live-search].is-focused .category-search-hero-input {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(15,79,122,0.16);
    border-color: var(--kb-brand-secondary, #3c8dc7);
}

/* Busy spinner inside the field */
.hl-search-spinner {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border: 2px solid rgba(60,141,199,0.25);
    border-top-color: var(--kb-brand-secondary, #3c8dc7);
    border-radius: 50%;
    opacity: 0;
    transition: opacity .15s ease;
}
form[data-live-search].is-busy .hl-search-spinner {
    opacity: 1;
    animation: hl-search-spin .6s linear infinite;
}
@keyframes hl-search-spin { to { transform: rotate(360deg); } }

/* Results dropdown */
.hl-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: min(60vh, 460px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e3e9f0;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(15,79,122,0.18);
    padding: 6px;
    text-align: left;
    opacity: 0;
    transform: translateY(-6px) scaleY(.98);
    transform-origin: top center;
    transition: opacity .18s ease, transform .18s ease;
}
form[data-live-search].is-open .hl-search-results {
    opacity: 1;
    transform: translateY(0) scaleY(1);
}
.hl-search-results[hidden] { display: none; }

/* The homepage info-hero search is centered, so center + cap its dropdown
   instead of spanning the full (section-wide) form. Scoped under .info-hero
   so it outranks the generic open-state transform above. */
.info-hero .info-search .hl-search-results {
    left: 50%;
    right: auto;
    width: min(620px, 100%);
    transform: translateX(-50%) translateY(-6px) scaleY(.98);
}
.info-hero .info-search.is-open .hl-search-results {
    transform: translateX(-50%) translateY(0) scaleY(1);
}

/* Left-aligned hero: anchor the dropdown to the field's left edge, not centered. */
.info-hero.info-hero--left .info-search .hl-search-results {
    left: 0;
    transform: translateY(-6px) scaleY(.98);
}
.info-hero.info-hero--left .info-search.is-open .hl-search-results {
    transform: translateY(0) scaleY(1);
}

.hl-search-result {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--kb-text-body, #2b3640);
    transition: background .12s ease;
}
.hl-search-result:hover,
.hl-search-result.is-active,
.hl-search-all.is-active {
    background: var(--kb-surface-semiwhite, #f3f7fb);
}
.hl-search-result .csr-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(60,141,199,0.10);
    color: var(--kb-brand-secondary, #3c8dc7);
    font-size: 15px;
    margin-top: 2px;
}
.hl-search-result .csr-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hl-search-result .csr-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--kb-text-headings, #161e23);
    line-height: 1.3;
}
.hl-search-result .csr-snippet {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(22,30,35,0.66);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hl-search-result .csr-snippet mark {
    background: rgba(250,112,13,0.18);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}
.hl-search-result .csr-meta {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(22,30,35,0.45);
    font-weight: 600;
}
.hl-search-all {
    display: block;
    text-align: center;
    padding: 12px;
    margin-top: 4px;
    border-top: 1px solid #eef2f6;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--kb-brand-secondary, #3c8dc7);
    text-decoration: none;
    border-radius: 0 0 10px 10px;
}
.hl-search-empty {
    padding: 18px 14px;
    text-align: center;
    color: rgba(22,30,35,0.55);
    font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
    form[data-live-search] .info-search-field,
    form[data-live-search] .category-search-hero-input,
    .hl-search-results { transition: none; }
    form[data-live-search].is-focused .info-search-field,
    form[data-live-search].is-focused .category-search-hero-input { transform: none; }
    form[data-live-search].is-busy .hl-search-spinner { animation: none; }
}

/* ─── Populaire categorieën onder de zoekbalk ───────────────────────
   Lager z-index dan .hl-search-results zodat de live-dropdown er altijd
   overheen valt (zie reveal-animatie stacking context op .info-hero). */
.hl-popular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    position: relative;
    z-index: 1;
}
.hl-popular[hidden] { display: none; }
/* In de gecentreerde hero's de chip-rij ook centreren (op de /search-pagina
   blijft 'ie links uitgelijnd). */
.info-hero .hl-popular,
.category-search-hero .hl-popular { justify-content: center; }
.hl-popular-label {
    font-size: 14px;
    color: var(--info-text-secondary, rgba(22, 30, 35, 0.75));
    margin-right: 2px;
}
.hl-popular-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hl-popular-link {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid var(--info-border, rgba(22, 30, 35, 0.15));
    border-radius: var(--info-radius-pill, 99px);
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
    color: var(--info-text, #161e23);
    background: var(--info-surface, #fff);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.hl-popular-link:hover,
.hl-popular-link:focus {
    background: var(--info-orange, #fa700d);
    border-color: var(--info-orange, #fa700d);
    color: #fff;
}

/* ─── Service 126/127 — manuals list cards ───────────────────────── */

body.template-category .category-manuals-section {
    margin: 0 0 4px;
    padding: 64px;
    background: var(--kb-surface-light);
    border-radius: 32px;
    box-shadow: 0 4px 24px rgba(15, 79, 122, 0.04);
}
body.template-category .category-manuals-head {
    margin: 0 0 24px;
}
body.template-category .category-manuals-heading {
    font-family: 'Urbanist', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 4px;
    color: var(--kb-text-headings);
}
body.template-category .category-manuals-sub {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--kb-text-body);
}
body.template-category .category-manuals-grid {
    display: grid;
    gap: 8px;
    width: 100%;
}
body.template-category .category-manuals-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.template-category .category-manuals-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.template-category .category-manuals-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.template-category .category-manual-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 16px;
    background: var(--kb-surface-semiwhite);
    border: 1px solid transparent;
    border-radius: 24px;
    text-decoration: none !important;
    transition: border-color .15s, transform .15s, box-shadow .15s, background .15s;
    color: inherit;
}
body.template-category .category-manual-card.is-featured { border-color: #6892fe; }
body.template-category .category-manual-card:hover {
    border-color: var(--kb-brand-secondary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(60,141,199,0.12);
    background: #fff;
}
body.template-category .category-manual-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    color: #6892fe;
}
body.template-category .category-manual-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--kb-text-headings);
    margin: -8px 0 0;
}
body.template-category .category-manual-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--kb-text-body);
    margin-top: -8px;
}
body.template-category .category-manual-size {
    font-size: 12px;
    color: var(--kb-text-body);
    font-family: 'Montserrat', sans-serif;
}
body.template-category .category-manuals-empty {
    padding: 32px;
    background: var(--kb-surface-semiwhite);
    border: 1px dashed #c8d6e3;
    border-radius: 16px;
    text-align: center;
    color: var(--kb-text-body);
}

/* ─── Service 126 — sidebar filter ───────────────────────────────── */

body.template-category .category-filter {
    background: var(--kb-surface-light);
    border: 1px solid var(--kb-surface-semiwhite);
    border-radius: 20px;
    padding: 24px;
    align-self: start;
    position: sticky;
    top: 24px;
}
body.template-category .category-filter-heading {
    font-family: 'Urbanist', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--kb-text-headings);
}
body.template-category .category-filter-group { margin-bottom: 18px; }
body.template-category .category-filter-group-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kb-text-body);
    margin: 0 0 8px;
}
body.template-category .category-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--kb-text-body);
    cursor: pointer;
    transition: color .12s;
}
body.template-category .category-filter-checkbox:hover { color: var(--kb-brand-secondary); }
body.template-category .category-filter-checkbox input {
    accent-color: var(--kb-brand-secondary);
}
body.template-category .category-filter-empty {
    margin: 0;
    color: var(--kb-text-body);
    font-size: 12px;
    font-style: italic;
}
body.template-category .category-filter-clear {
    margin-top: 16px;
    background: transparent;
    border: 1px solid var(--kb-surface-semiwhite);
    color: var(--kb-text-body);
    padding: 6px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
body.template-category .category-filter-clear:hover {
    background: var(--kb-surface-semiwhite);
    border-color: var(--kb-text-body);
}

/* ─── Service 133 — manual file bundle (sidebar cards) ───────────── */

body.template-manual-page .manual-bundle,
body.template-category .manual-bundle {
    margin: 0;
}
.manual-bundle-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 12px;
}
.manual-bundle-heading {
    font-family: 'Urbanist', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: #365072;
    margin: 0;
}
.manual-bundle-count {
    font-size: 12px;
    color: rgba(22,30,35,0.55);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}
.manual-bundle-grid {
    display: grid;
    gap: 8px;
}
.manual-bundle-grid--cols-1 { grid-template-columns: 1fr; }
.manual-bundle-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.manual-bundle-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.manual-bundle-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 16px;
    background: #f0f4f7;
    border: 1px solid transparent;
    border-radius: 24px;
    text-decoration: none !important;
    color: inherit;
    transition: border-color .15s, transform .15s, box-shadow .15s, background .15s;
}
.manual-bundle-card:hover {
    border-color: #3c8dc7;
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 8px 20px rgba(60,141,199,0.1);
}
.manual-bundle-card-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    color: #6892fe;
}
.manual-bundle-card-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: #365072;
    margin-top: -8px;
}
.manual-bundle-card-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(22,30,35,0.75);
    margin-top: -8px;
}
.manual-bundle-card-meta {
    font-size: 12px;
    color: rgba(22,30,35,0.55);
    font-family: 'Montserrat', sans-serif;
}
.manual-bundle-card--standalone { display: inline-flex; max-width: 320px; }

@media (max-width: 1100px) {
    body.template-category .category-search-hero { padding: 32px; }
    body.template-category .category-search-hero-title { font-size: 36px; }
    body.template-category .category-manuals-section { padding: 32px; margin: 0 0 4px; }
    body.template-category .category-manuals-grid--cols-3,
    body.template-category .category-manuals-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.template-category .category-filter { position: static; }
}
@media (max-width: 700px) {
    body.template-category .category-search-hero { padding: 24px; }
    body.template-category .category-manuals-section { margin: 0 0 4px; padding: 24px; border-radius: 24px; }
    body.template-category .category-search-hero-form { flex-direction: column; }
    body.template-category .category-search-hero-input,
    body.template-category .category-search-hero-btn { flex: 1; width: 100%; }
    body.template-category .category-manuals-grid--cols-2,
    body.template-category .category-manuals-grid--cols-3,
    body.template-category .category-manuals-grid--cols-4 { grid-template-columns: 1fr; }
    .manual-bundle-grid--cols-2,
    .manual-bundle-grid--cols-3 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   Template-rendered page layout (Service 128)
   ═══════════════════════════════════════════════════════════════════
   Manual/category templates are built with core/columns blocks. The
   Gutenberg classes get stripped by sanitizeContent(), leaving bare
   .is-layout-flex wrappers with inline flex-basis. These rules give
   the top-level columns their actual two-column layout + sticky
   sidebar, matching the Service 128 design. */

body.template-manual-page main > .is-layout-flex,
body.template-category main > .is-layout-flex {
    display: flex;
    gap: 36px;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 24px 64px;
}
/* Second column = the sidebar (download card, related, support) */
body.template-manual-page main > .is-layout-flex > div + div,
body.template-category main > .is-layout-flex > div + div {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 300px;
}

/* Overflow containment — critical for content-heavy ("non-PDF") manuals.
   A flex item defaults to min-width:auto, so it refuses to shrink below its
   content's intrinsic width. A whitepaper body with a long raw URL or a wide
   table then keeps the 66% content column at full content width, which shoves
   the sidebar off the right edge of the page. Two flex levels need the
   escape hatch: the outer columns AND .manual-body's own children (it is
   itself display:flex). Pair it with wrapping for long URLs and a scroll
   container for wide tables so nothing bleeds past the column.
   (The sidebar keeps its 300px via the higher-specificity rule above.) */
body.template-manual-page main > .is-layout-flex > div,
body.template-category main > .is-layout-flex > div,
.manual-body > * {
    min-width: 0;
}
.manual-body { overflow-wrap: break-word; }
.manual-body a { overflow-wrap: break-word; word-break: break-word; }
.manual-body figure { max-width: 100%; overflow-x: auto; }

/* ─── Text-page manuals (long-form, no PDF/video) ───────────────────
   Auto-flagged with body.manual-text-page by ContentResolver::isTextManual()
   when a manual has no downloadable file. These read like articles/white-
   papers, so give the body a comfortable measure and looser leading rather
   than the tighter document-page rhythm. Starter treatment — tune to taste. */
body.manual-text-page .manual-body { max-width: 68ch; }
body.manual-text-page .manual-body p,
body.manual-text-page .manual-body li { line-height: 1.7; }

/* CTA buttons inside AI/marketing copy: the Gutenberg button classes are
   stripped too, leaving <div class="is-layout-flex"><div><a>…</a></div></div>.
   Restyle those links as proper buttons (same look as .manual-button). */
body.template-manual-page .manual-body .is-layout-flex,
body.template-category .manual-body .is-layout-flex {
    display: flex;
    gap: 12px;
    margin: 8px 0 24px;
}
body.template-manual-page .manual-body .is-layout-flex a,
body.template-category .manual-body .is-layout-flex a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: var(--manual-radius-pill);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.6;
    text-decoration: none !important;
    background: var(--manual-cta-color);
    color: #fff;
    transition: transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
body.template-manual-page .manual-body .is-layout-flex a:hover,
body.template-category .manual-body .is-layout-flex a:hover {
    transform: translateY(-1px);
}

@media (max-width: 1024px) {
    body.template-manual-page main > .is-layout-flex,
    body.template-category main > .is-layout-flex {
        flex-direction: column;
    }
    body.template-manual-page main > .is-layout-flex > div,
    body.template-category main > .is-layout-flex > div {
        flex-basis: auto !important; /* override the inline 66%/33% */
        width: 100%;
        position: static;
    }
}

/* Breadcrumb rendered as a top-level template block (outside the columns
   wrapper) needs the same page container as the columns themselves. */
body.template-manual-page main > .manual-breadcrumb,
body.template-manual-page main > .category-breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 24px 0;
}
/* Category pages run the wider 1510px layout; their breadcrumb is
   aligned by the body.template-category rules (72px inset) instead. */

/* ─── Category quickstart (Service 154 "Get Started") ─────────────
   Rendered as a white card, identical container treatment to
   .category-manuals-section so all sections share the same inset. */
.category-quickstart {
    margin: 0 0 4px;
    padding: 64px;
    background: var(--manual-surface-light);
    border-radius: 32px;
    box-shadow: 0 4px 24px rgba(15, 79, 122, 0.04);
}
/* Consecutive white sections (quickstart → documentation, grid → grid)
   merge into one continuous surface: flatten the touching corners and
   close the 4px gap. Same idea as the homepage card-block stack. */
body.template-category :is(.category-quickstart, .category-grid-section, .category-manuals-section):has(+ :is(.category-quickstart, .category-grid-section, .category-manuals-section)) {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
body.template-category :is(.category-quickstart, .category-grid-section, .category-manuals-section) + :is(.category-quickstart, .category-grid-section, .category-manuals-section) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.category-quickstart-heading { font-family: 'Urbanist', 'Montserrat', sans-serif; font-size: 24px; font-weight: 600; line-height: 1.4; color: var(--manual-text-headings); margin: 0 0 4px; }
.category-quickstart-sub { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--manual-text-body); }
.category-quickstart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.category-quickstart-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--manual-surface-semiwhite); border: 1px solid transparent; border-radius: var(--manual-radius-inner); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.category-quickstart-card:hover { border-color: var(--manual-brand-secondary); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(54,80,114,0.10); }
.category-quickstart-icon { flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--manual-surface-light); border-radius: 12px; }
.category-quickstart-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.category-quickstart-title { font-size: 14px; font-weight: 600; color: var(--manual-text-body-strong); }
.category-quickstart-subtitle { font-size: 12px; color: var(--manual-text-body); }
.category-quickstart-arrow { margin-left: auto; color: var(--manual-text-headings); font-weight: 600; }

/* ─── Category FAQ ────────────────────────────────────────────────
   The category-faq block emits the exact homepage FAQ markup
   (.info-faq-section / .info-accordion / .info-help-card), so all
   styling comes from those shared rules. Only the width needs a
   fix: inside the category main the rail var would resolve against
   main itself (100% − 80px) — make it span the full rail instead. */
body.template-category main > .category-faq {
    width: 100%;
    max-width: 100%;
    margin: 0 0 4px;
}

@media (max-width: 1100px) {
    .category-quickstart { margin: 0 0 4px; padding: 32px; }
}
@media (max-width: 1024px) {
    .category-quickstart-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .category-quickstart { margin: 0 0 4px; padding: 24px; border-radius: 24px; }
}