/* FeedbackNexus design system. Surfaces and ink adapt; brand colours stay recognisable. */
:root {
    color-scheme: light;
    --surface: #ffffff;
    --page-bg: #ffffff;
    --ink: #142738;
    --muted: #536578;
    --line: #e2e9ef;
    --tint: #edf8fd;
    --brand-blue: #0ea5e9;
    --primary-color: #0879b5;
    --primary-dark: #0369a1;
    --primary-light: #38bdf8;
    --button-bg: #0879b5;
    --button-hover: #0369a1;
    --soft-shadow: 0 18px 55px -26px rgb(28 63 92 / 23%);
    --header-bg: rgb(255 255 255 / 95%);
    --footer-bg: #0c1f30;
    --surface-raised: #ffffff;
    --surface-inset: #edf8fd;
    --hero-glow: rgb(14 165 233 / 22%);
    --hero-ribbon: rgb(28 170 154 / 10%);
    --hero-grid: rgb(8 121 181 / 22%);
    --showcase-rim: #c2e3f3;
    --surface-highlight: rgb(255 255 255 / 80%);
    --card-shadow: 0 8px 24px -16px rgb(28 63 92 / 24%);
    --showcase-shadow: 0 28px 64px -24px rgb(15 71 106 / 32%);
    --cta-bg: #0d2b42;
    --preview-ocean: #0369a1;
    --preview-forest: #08765d;
    --preview-plum: #8051bc;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --surface: #111e2d;
    --page-bg: #0b1522;
    --ink: #edf4fa;
    --muted: #afbed0;
    --line: #2a3a4c;
    --tint: #132e40;
    --primary-color: #60cafa;
    --primary-light: #38bdf8;
    --button-bg: #0879b5;
    --button-hover: #0369a1;
    --gray-50: #101d2b;
    --gray-100: #172637;
    --gray-200: #2a3a4c;
    --gray-300: #40556a;
    --gray-400: #92a5b9;
    --gray-500: #a0b3c5;
    --gray-600: #afbed0;
    --gray-700: #d1dce7;
    --gray-800: #e2eaf2;
    --gray-900: #edf4fa;
    --header-bg: rgb(11 21 34 / 96%);
    --soft-shadow: 0 18px 55px -26px rgb(0 0 0 / 65%);
    --footer-bg: #08121e;
    --surface-raised: #152538;
    --surface-inset: #112b40;
    --hero-glow: rgb(14 165 233 / 19%);
    --hero-ribbon: rgb(101 221 200 / 8%);
    --hero-grid: rgb(96 202 250 / 24%);
    --showcase-rim: #30556d;
    --surface-highlight: rgb(183 226 250 / 9%);
    --card-shadow: 0 8px 24px -16px rgb(0 0 0 / 60%);
    --showcase-shadow: 0 28px 64px -20px rgb(0 0 0 / 65%);
    --cta-bg: #0a2133;
    --preview-ocean: #60cafa;
    --preview-forest: #6ce0ba;
    --preview-plum: #c7a2fa;
}
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { background: var(--page-bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
.container { max-width: 1248px; padding-inline: 32px; }
h1, h2, h3, h4, h5, h6, .value-prop-section h2 {
    background: none; -webkit-text-fill-color: currentColor; color: var(--ink);
    letter-spacing: -.035em; font-weight: 650; text-wrap: balance;
}
p { color: var(--muted); }
a { color: var(--primary-color); }
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
input, select, textarea { background: var(--surface); color: var(--ink); }
:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 5px; }
main:focus { outline: none; }
svg { flex-shrink: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 20000; padding: 12px 20px; border-radius: 8px; background: var(--surface); color: var(--ink); }
.skip-link:focus { top: 12px; }
.btn { min-height: 44px; gap: 9px; border-radius: 8px; font-size: 14px; font-weight: 600; padding: 11px 18px; transition: background .18s, border-color .18s, box-shadow .18s; }
.btn svg, .btn > [data-lucide] { width: 17px; height: 17px; flex-shrink: 0; }
.button-label { min-width: 0; white-space: normal; }
.btn-primary { background: var(--button-bg); color: #fff; border: 1px solid transparent; box-shadow: 0 2px 3px rgb(7 81 123 / 8%); }
.btn-primary:hover { background: var(--button-hover); transform: none; box-shadow: 0 3px 12px rgb(7 81 123 / 16%); }
.btn-large { min-height: 52px; padding: 14px 22px; font-size: 15px; }
.btn-secondary { color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
.btn-outline { border: 1px solid var(--line); background: var(--surface); color: var(--primary-color); }
.btn-outline:hover { background: var(--tint); color: var(--primary-color); border-color: var(--primary-color); transform: none; box-shadow: none; }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1.6; }
.text-link svg { width: 17px; height: 17px; transition: transform .18s; }
.text-link:hover svg { transform: translateX(3px); }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.eyebrow { color: var(--primary-color); font-size: 11px; text-transform: uppercase; letter-spacing: .13em; font-weight: 650; line-height: 1.5; margin-bottom: 20px; }
.status-dot { display: inline-block; width: 6px; height: 6px; background: var(--brand-blue); border-radius: 50%; box-shadow: 0 0 0 4px rgb(14 165 233 / 9%); flex-shrink: 0; }
/* Header and keyboard-friendly disclosure navigation. */
.navbar { background: var(--header-bg); border-color: var(--line); backdrop-filter: blur(16px); }
.navbar .container { min-height: 82px; padding-block: 12px; gap: 28px; }
.logo { flex-shrink: 0; gap: 9px; text-decoration: none; }
.logo-image { width: 30px; height: 30px; object-fit: contain; }
.logo-text { font-size: 20px; letter-spacing: -.7px; font-weight: 750; color: var(--ink); }
.logo-text > span { color: var(--primary-color); }
.nav-menu { flex: 1; gap: 28px; justify-content: space-between; margin-left: 12px; }
.nav-list { gap: 4px; align-items: center; padding: 0; }
.nav-link, .nav-login { font-size: 16px; line-height: 1.5; color: var(--ink); font-weight: 600; white-space: nowrap; }
.nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 14px; border-radius: 8px; transition: color .18s ease, background-color .18s ease; }
.nav-link:hover, .nav-link.active { color: var(--primary-color); background-color: var(--tint); }
button.nav-link { border: 0; background: none; cursor: pointer; }
.nav-link.active::after { content: none; }
@media (min-width: 1100px) {
    .nav-dropdown.open > .nav-link { background-color: var(--tint); color: var(--primary-color); }
}
.nav-dropdown-icon { width: 16px; height: 16px; margin-left: 8px; }
.nav-dropdown-menu { top: calc(100% + 8px); margin-top: 0; width: 304px; min-width: 0; max-width: none; max-height: calc(100dvh - 112px); overflow-y: auto; overscroll-behavior: contain; border-radius: 16px; padding: 12px; border-color: var(--showcase-rim); background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--soft-shadow), inset 0 1px var(--surface-highlight); white-space: normal; transform-origin: top left; transition: opacity 180ms ease, transform 240ms cubic-bezier(.22,1,.36,1), visibility 180ms; }
.nav-product-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; row-gap: 4px; width: 640px; }
.nav-product-menu :is(.nav-overview, .nav-menu-footer) { grid-column: 1 / -1; }
.nav-compare-menu { width: 248px; }
.nav-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 12px; }
.nav-dropdown:not(.open) .nav-dropdown-menu { opacity: 0; visibility: hidden; transform: translateY(-7px); }
.nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: none; }
.nav-dropdown.open .nav-dropdown-icon { transform: rotate(180deg); }
.nav-dropdown:not(.open) .nav-dropdown-icon { transform: none; }
.nav-dropdown-link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border-radius: 9px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.5; transition: color 160ms ease, background-color 160ms ease; }
.nav-dropdown-link::after { content: ''; flex: 0 0 5px; width: 5px; height: 5px; margin-left: auto; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; opacity: 0; transform: translateX(-3px) rotate(45deg); transition: opacity 160ms ease, transform 160ms ease; }
.nav-dropdown-link:hover, .nav-dropdown-link:focus-visible { background: var(--tint); color: var(--primary-color); }
.nav-dropdown-link:hover { padding-left: 12px; }
.nav-dropdown-link:is(:hover, :focus-visible)::after { opacity: 1; transform: rotate(45deg); }
.nav-dropdown-link:focus-visible { outline-offset: -2px; }
.nav-link-copy { display: block; flex: 1; min-width: 0; }
.nav-link-description { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.6; font-weight: 400; }
.nav-item-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border: 1px solid var(--showcase-rim); border-radius: 9px; background: var(--tint); color: var(--primary-color); }
.nav-item-icon svg { width: 18px; height: 18px; }
.nav-product-menu .nav-dropdown-link { min-height: 60px; }
.nav-overview { margin-bottom: 4px; }
.nav-overview .nav-dropdown-link { padding: 14px 16px; background: var(--surface-inset); box-shadow: inset 0 1px var(--surface-highlight); font-size: 15px; font-weight: 600; }
.nav-overview .nav-item-icon { width: 38px; height: 38px; flex-basis: 38px; background: var(--surface-raised); }
.nav-overview .nav-dropdown-link::after { opacity: .65; }
.nav-overview .nav-dropdown-link:is(:hover, :focus-visible) { background: var(--tint); }
.nav-dropdown-menu :is(.nav-menu-footer, .nav-menu-divider) { padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--line); }
.nav-menu-footer .nav-dropdown-link { min-height: 52px; }
.nav-dropdown-link.active { background: var(--tint); color: var(--primary-color); }
.nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-cta .btn { min-height: 48px; font-size: 14px; padding: 12px 18px; }
.nav-login { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px; border-radius: 8px; text-decoration: none; transition: color .18s ease, background-color .18s ease; }
.nav-login:hover { color: var(--primary-color); background-color: var(--tint); border-color: var(--primary-color); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.theme-toggle { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 8px; background: var(--gray-50); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.theme-toggle:hover { background: var(--tint); color: var(--primary-color); border-color: var(--primary-color); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon { display: none; }
[data-theme-preference="light"] .theme-icon-light,
[data-theme-preference="dark"] .theme-icon-dark,
[data-theme-preference="system"] .theme-icon-system { display: block; }
.nav-toggle { width: 40px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 8px; }
.nav-toggle span { width: 19px; height: 2px; background: var(--ink); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Shared inner-page presentation. */
.section { padding-block: 88px; }
.hero, .blog-hero {
    position: relative; isolation: isolate; overflow: hidden;
    background: radial-gradient(ellipse at 100% 35%, var(--hero-glow), transparent 57%), var(--gray-50);
    border-bottom: 1px solid var(--line); padding-block: 80px;
}
.hero-icons, .blog-hero-icons { display: none; }
/* Static decoration stays below content and never intercepts links or focus. */
.hero::before, .blog-hero::before, .home-hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(circle, var(--hero-grid) .8px, transparent 1px) 0 0 / 22px 22px;
    mask-image: radial-gradient(ellipse at 90% 45%, #000, transparent 65%);
    backdrop-filter: none;
}
.hero::after, .blog-hero::after, .home-hero::after {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    width: clamp(320px, 43vw, 650px); aspect-ratio: 1 / 1.15; top: -32%; right: -13%;
    border: clamp(28px, 4vw, 58px) solid var(--hero-ribbon); border-radius: 46%; transform: rotate(36deg);
}
.section-gray-bg { background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--gray-50); }
.hero h1, .hero-content-wrapper > h1, .blog-title { color: var(--ink); -webkit-text-fill-color: currentColor; font-size: clamp(34px, 4vw, 54px); letter-spacing: -.045em; font-weight: 650; text-shadow: none; line-height: 1.13; }
.hero p, .hero-credibility, .blog-excerpt { color: var(--muted); text-shadow: none; font-size: 18px; line-height: 1.75; }
.hero-content { max-width: 850px; }
.hero-cta { margin-top: 28px; }
.hero + .section { padding-top: 72px; }
.hero-badge .badge { color: var(--primary-color); background: var(--tint); border-color: var(--line); text-shadow: none; }
/* Feature illustrations describe documented workflows, rather than product screenshots. */
.feature-hero { padding-block: 72px; }
.feature-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; }
.feature-hero .hero-content { max-width: none; min-width: 0; margin: 0; text-align: left; }
.feature-hero h1 { font-size: clamp(36px, 4vw, 50px); line-height: 1.12; }
.feature-hero .hero-content > p { font-size: 16px; line-height: 1.85; max-width: 54ch; }
.feature-hero .hero-cta { justify-content: flex-start; flex-wrap: wrap; }
.feature-illustration { position: relative; isolation: isolate; min-width: 0; margin: 0 10px 0 0; text-align: left; }
.feature-illustration::before { content: ''; position: absolute; inset: -10px -10px 28px 12px; z-index: -1; pointer-events: none; border: 1px solid var(--showcase-rim); border-radius: 22px; background: var(--surface-inset); box-shadow: inset 0 1px var(--surface-highlight); transform: rotate(2deg); }
.feature-artwork { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; min-height: 382px; padding: 24px; overflow: hidden; border: 1px solid var(--showcase-rim); border-radius: 20px; background: radial-gradient(ellipse at 100% 0%, var(--hero-glow), transparent 75%), var(--surface-inset); box-shadow: var(--showcase-shadow), inset 0 1px var(--surface-highlight); }
.feature-artwork::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle, var(--hero-grid) .7px, transparent 1px) 0 0 / 20px 20px; mask-image: linear-gradient(135deg, transparent, #000); }
.feature-artwork::after { content: ''; position: absolute; z-index: -1; pointer-events: none; top: -80px; right: -100px; width: 290px; height: 340px; border: 26px solid var(--hero-ribbon); border-radius: 46%; transform: rotate(36deg); }
.feature-illustration > figcaption { padding: 12px 4px 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.feature-art-sheet { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); color: var(--ink); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.feature-art-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--ink); font-size: 13px; line-height: 1.5; }
.feature-art-heading > svg { width: 19px; height: 19px; color: var(--primary-color); }
.feature-art-heading strong { font-weight: 600; }
.feature-art-title { display: block; margin-top: 14px; color: var(--ink); font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.03em; }
.feature-art-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 5px; background: var(--tint); color: var(--preview-ocean); font-size: 10px; line-height: 1.5; }
.feature-art-chip svg { width: 13px; height: 13px; }
.feature-art-lines { display: grid; gap: 7px; margin-block: 16px; }
.feature-art-lines span { height: 5px; width: 94%; border-radius: 3px; background: var(--line); }
.feature-art-lines span:nth-child(2) { width: 76%; }
.feature-art-lines span:nth-child(3) { width: 85%; }
.feature-art-note { display: block; margin-top: 12px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.feature-art-footer { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.feature-art-footer > svg { width: 15px; height: 15px; color: var(--primary-color); }
.collection-entry-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.collection-entry { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 15px; font-size: 12px; line-height: 1.5; }
.collection-entry > svg { width: 23px; height: 23px; color: var(--primary-color); }
.feature-art-input { align-self: stretch; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--gray-50); font-size: 11px; line-height: 1.5; }
.collection-paths { position: relative; display: flex; justify-content: space-around; height: 25px; margin-block: -14px; color: var(--primary-color); }
.collection-paths > span { width: 1px; height: 17px; background: var(--showcase-rim); }
.collection-paths::before { content: ''; position: absolute; top: 16px; left: 25%; right: 25%; border-top: 1px solid var(--showcase-rim); }
.collection-paths > svg { position: absolute; top: 13px; left: calc(50% - 9px); width: 18px; height: 18px; background: var(--surface-inset); }
.collection-inbox { margin-top: 10px; }
.feature-art-request { display: flex; align-items: center; gap: 8px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); color: var(--ink); font-size: 12px; line-height: 1.6; }
.feature-art-request > svg { width: 16px; height: 16px; color: var(--primary-color); }
.feature-illustration-intelligence .feature-artwork { gap: 0; }
.ai-request-stack > .feature-art-sheet { display: flex; align-items: center; gap: 9px; padding: 13px 15px; margin-right: 16px; font-size: 12px; line-height: 1.6; transform: rotate(-2deg); }
.ai-request-stack > .feature-art-sheet:last-child { margin: 12px 0 0 16px; transform: rotate(2deg); }
.ai-request-stack svg { width: 16px; height: 16px; color: var(--primary-color); }
.ai-review-join { display: grid; place-items: center; height: 40px; color: var(--primary-color); }
.ai-review-join svg { width: 21px; height: 21px; }
.ai-review-sheet .feature-art-chip { align-self: flex-start; }
.roadmap-art-heading { margin-bottom: 2px; }
.roadmap-art-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-height: 245px; }
.roadmap-art-column { min-width: 0; padding: 10px 6px; border-radius: 9px; background: var(--gray-50); }
.roadmap-art-status { display: block; margin-bottom: 12px; color: var(--muted); font-size: 10px; font-weight: 550; line-height: 1.5; text-align: center; }
.roadmap-art-item { padding: 12px 10px; }
.roadmap-art-item > svg { display: block; width: 18px; height: 18px; margin-bottom: 10px; color: var(--primary-color); }
.roadmap-art-item > strong { display: block; font-size: 12px; line-height: 1.5; font-weight: 550; overflow-wrap: anywhere; }
.roadmap-art-item .feature-art-chip { font-size: 10px; padding: 3px 5px; overflow-wrap: anywhere; }
.roadmap-art-item .feature-art-lines { margin-block: 12px; }
.feature-illustration-changelog .feature-artwork { gap: 0; }
.changelog-art-source { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-inline: 10px; padding: 12px 15px; font-size: 12px; line-height: 1.5; }
.changelog-art-source > svg { width: 18px; height: 18px; color: var(--primary-color); }
.changelog-art-source .feature-art-chip, .changelog-art-document .feature-art-heading > .feature-art-chip { margin-left: auto; }
.changelog-art-connector { display: grid; place-items: center; height: 30px; color: var(--primary-color); }
.changelog-art-connector svg { width: 18px; height: 18px; }
.changelog-art-summary { display: block; margin-top: 9px; font-size: 12px; line-height: 1.75; color: var(--muted); }
.changelog-art-document .feature-art-footer { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.changelog-art-note { text-align: center; }
.analytics-art-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 18px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.analytics-art-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 20px; margin-top: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.analytics-art-column { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; line-height: 1.5; color: var(--ink); text-align: center; }
.analytics-art-column > span:first-child { font-variant-numeric: tabular-nums; }
.analytics-art-column > span:last-child { min-height: 3em; color: var(--muted); }
.analytics-art-bar { width: 100%; max-width: 58px; height: calc(var(--requests) * 7px); border-radius: 6px 6px 0 0; background: var(--primary-color); }
.analytics-art-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.analytics-art-total strong { font-size: 18px; line-height: 1.5; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.feature-artwork-branding { display: block; padding: 24px 0 0; }
.feature-artwork-branding .portal-customiser { padding: 0 22px 22px; }
.feature-artwork-branding .portal-preview-caption { font-size: 10px; line-height: 1.6; }
@media (max-width: 999px) and (min-width: 900px) {
    .feature-hero-grid { gap: 32px; }
    .feature-artwork { padding: 20px; }
}
@media (max-width: 899px) {
    .feature-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .feature-hero .hero-content { max-width: 680px; }
    .feature-illustration { width: calc(100% - 10px); max-width: 560px; margin: 0 auto; }
}
@media (max-width: 767px) {
    .feature-hero { padding-block: 46px 54px; }
    .feature-hero h1 { font-size: 36px; }
    .feature-artwork { padding: 20px; min-height: 350px; border-radius: 16px; }
    .feature-illustration::before { border-radius: 18px; inset: -7px -7px 24px 9px; }
    .feature-artwork-branding { padding: 20px 0 0; }
    .feature-artwork-branding .portal-customiser { padding: 0 18px 20px; }
}
@media (max-width: 359px) {
    .feature-artwork { padding: 16px; }
    .collection-entry-points { gap: 10px; }
    .collection-entry { padding: 11px; }
    .feature-art-input { padding: 7px; }
    .roadmap-art-column { padding-inline: 4px; }
    .roadmap-art-item { padding-inline: 8px; }
    .analytics-art-bars { gap: 12px; }
    .feature-artwork-branding { padding: 16px 0 0; }
    .feature-artwork-branding .portal-customiser { padding: 0 14px 18px; }
}
@media (max-width: 480px) {
    .roadmap-art-item .feature-art-chip { display: none; }
}
.section-title { font-size: clamp(28px, 3vw, 38px); line-height: 1.2; }
.section-subtitle { font-size: 17px; line-height: 1.7; }
.section-header { max-width: 760px; margin-bottom: 44px; }
.feature-card, .pricing-card, .testimonial-card, .content-card, .blog-card, .featured-post, .value-prop-section, .docs-main, .docs-sidebar, .sidebar-widget, .docs-category-card, .process-step, .benefit-card, .advantage-card, .comparison-card {
    border: 1px solid var(--line); box-shadow: none; border-radius: 14px;
}
.feature-card { padding: 28px; hyphens: none; }
.feature-card h3 { font-size: 21px; line-height: 1.35; }
.feature-card p { font-size: 15px; line-height: 1.75; }
.feature-card:hover, .pricing-card:hover, .testimonial-card:hover, .value-prop-section:hover, .blog-card:hover { transform: none; box-shadow: var(--soft-shadow); }
.feature-icon { background: var(--tint); color: var(--primary-color); border: 1px solid rgb(14 165 233 / 12%); width: 42px; height: 42px; border-radius: 10px; }
.feature-icon svg { width: 21px; height: 21px; }
.pricing-card { padding: 32px 26px; text-align: left; }
.pricing-card.featured { transform: none; border: 2px solid var(--primary-color); }
.pricing-card.featured::before { background: var(--button-bg); font-size: 11px; letter-spacing: .02em; }
.pricing-price { font-size: 46px; color: var(--ink); letter-spacing: -.05em; }
.pricing-features { font-size: 14px; }
.pricing-features li { padding-block: 7px; }
/* Pricing keeps its original plans and comparison content in layered surfaces. */
.pricing-page .pricing-hero {
    padding-bottom: 112px;
    background: radial-gradient(ellipse at 85% 45%, var(--hero-glow), transparent 58%), radial-gradient(ellipse at 10% 100%, var(--hero-ribbon), transparent 50%), var(--page-bg);
}
.pricing-page .pricing-hero::before { mask-image: radial-gradient(ellipse at 80% 95%, #000, transparent 70%); }
.pricing-page .pricing-hero h1 { font-size: clamp(36px, 4.5vw, 58px); }
.pricing-page .pricing-hero .hero-content { max-width: 780px; }
.pricing-page .pricing { position: relative; z-index: 1; margin-top: -32px; padding: 0 32px; background: transparent; }
.pricing-page .pricing > .container {
    padding: 48px; border: 1px solid var(--showcase-rim); border-radius: 28px;
    background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-inset);
    box-shadow: inset 0 1px var(--surface-highlight);
}
.pricing-page .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 46px; align-items: stretch; }
.pricing-page .pricing-card { padding: 32px 26px; border-radius: 18px; background: var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.pricing-page .pricing-card:hover { box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.pricing-page .pricing-card.featured { border-color: var(--primary-color); background: linear-gradient(180deg, var(--tint), var(--surface-raised) 280px); box-shadow: var(--showcase-shadow), inset 0 1px var(--surface-highlight); }
.pricing-page .pricing-card.featured::before { top: -14px; padding: 6px 16px; border-radius: 7px; line-height: 1.5; box-shadow: 0 3px 10px rgb(7 81 123 / 15%); }
.pricing-page .pricing-header { padding-bottom: 24px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.pricing-page .pricing-header h3 { font-size: 21px; }
.pricing-page .pricing-price { font-size: 48px; line-height: 1.25; }
.pricing-page .pricing-period { margin-bottom: 0; color: var(--muted); font-size: 13px; }
.pricing-page .pricing-features { padding-left: 0; margin-bottom: 30px; line-height: 1.7; }
.pricing-page .pricing-features li { padding-block: 6px; overflow-wrap: anywhere; }
.pricing-page .pricing-features li::before { color: var(--preview-ocean); }
.pricing-page .pricing-card-footer { padding-top: 22px; border-top: 1px solid var(--line); gap: 14px; }
.pricing-page .pricing-card-description { color: var(--muted); font-size: 12px; }
.pricing-page .pricing-info { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.pricing-page .pricing-table-wrap { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--card-shadow); }
.pricing-page .comparison-table { min-width: 640px; border-collapse: separate; border-spacing: 0; border-radius: 0; box-shadow: none; font-size: 14px; line-height: 1.65; }
.pricing-page .comparison-table th { padding: 20px; background: var(--surface-raised); color: var(--ink); border-color: var(--line); }
.pricing-page .comparison-table th.pro-header { background: var(--button-bg); color: #fff; }
.pricing-page .comparison-table td { padding: 17px 20px; border-color: var(--line); }
.pricing-page .comparison-table th:first-child { width: 40%; }
.pricing-page .comparison-table tbody td:nth-child(3) { background: var(--tint); }
.pricing-page .comparison-table td svg { width: 18px; height: 18px; vertical-align: middle; }
.pricing-page .comparison-table .color-success { color: var(--preview-forest); }
.pricing-page .pricing-table-hint { display: none; }
.pricing-page .faq-section { padding: 0 32px 88px; background: var(--page-bg); }
.pricing-page .faq-section > .container { padding: 48px; border: 1px solid var(--showcase-rim); border-radius: 28px; background: radial-gradient(ellipse at 0% 100%, var(--hero-ribbon), transparent 65%), var(--surface-inset); box-shadow: inset 0 1px var(--surface-highlight); }
.pricing-page .faq-list { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pricing-page .faq-item { background: var(--surface-raised); box-shadow: var(--card-shadow); }
.pricing-page .faq-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pricing-page .pricing-final-cta .section-header { margin-bottom: 0; }
.pricing-page .pricing-final-cta .cta-buttons { margin-top: 28px; }
.pricing-page .pricing-final-cta .cta-note { margin-top: 22px; font-size: 12px; line-height: 1.7; }
@media (max-width: 999px) {
    .pricing-page .pricing-grid { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; gap: 36px; }
    .pricing-page .faq-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .pricing-page .pricing-hero { padding-bottom: 80px; }
    .pricing-page .pricing { padding-inline: 12px; margin-top: -24px; }
    .pricing-page .pricing > .container { padding: 32px 20px; border-radius: 22px; }
    .pricing-page .pricing-grid { margin-top: 38px; }
    .pricing-page .pricing-card { padding: 30px 22px; border-radius: 16px; }
    .pricing-page .pricing-price { font-size: 46px; }
    .pricing-page .pricing-table-hint { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.6; }
    .pricing-page .pricing-table-hint svg { width: 16px; height: 16px; color: var(--primary-color); }
    .pricing-page .pricing-table-wrap { margin-top: 0; border-radius: 14px; }
    .pricing-page .faq-section { padding: 0 12px 58px; }
    .pricing-page .faq-section > .container { padding: 32px 20px; border-radius: 22px; }
    .pricing-page .faq-item { padding: 24px; }
}
.blog-date, .blog-author, .blog-read-time, .blog-hero .breadcrumb a, .blog-hero .breadcrumb-current, .blog-hero .breadcrumb-separator { color: var(--muted); }
/* Integrations uses the same layered surfaces without changing integration copy. */
.integrations-page .features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.integrations-page .feature-card { min-width: 0; padding: 28px; border-radius: 16px; background: var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.integrations-page .feature-card:hover { box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.integrations-page .feature-list { margin-bottom: 0; padding-left: 0; font-size: 14px; line-height: 1.75; }
.integrations-page .feature-list li { overflow-wrap: anywhere; }
.integrations-page .feature-list li::before { color: var(--preview-ocean); }
.integrations-page .feature-setup { margin-top: 24px; padding: 18px 0 0; border-top: 1px solid var(--line); background: none; color: var(--muted); font-size: 13px; line-height: 1.8; }
.integrations-page .feature-setup strong { color: var(--ink); }
.integrations-page .integrations-flow-section { padding: 0 32px; background: var(--page-bg); }
.integrations-page .integrations-flow-section > .container { padding: 48px; border: 1px solid var(--showcase-rim); border-radius: 28px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-inset); box-shadow: inset 0 1px var(--surface-highlight); }
.integrations-page .integrations-flow-section .features-grid { counter-reset: integration-step; }
.integrations-page .integrations-flow-section .feature-card { position: relative; }
.integrations-page .integrations-flow-section .feature-card::before { counter-increment: integration-step; content: '0' counter(integration-step); position: absolute; top: 30px; right: 28px; color: var(--muted); font-size: 11px; line-height: 1.5; letter-spacing: .08em; }
.integrations-page .integrations-guides { border-block: 1px solid var(--line); }
.integrations-page .integrations-guides .max-width-800 { max-width: none; }
.integrations-page .integrations-guides .grid-gap-2-rem { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.integrations-page .faq-card { min-width: 0; padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.integrations-page .faq-title { margin: 0 0 24px; color: var(--ink); font-size: 20px; line-height: 1.4; font-weight: 600; letter-spacing: -.025em; }
.integrations-page .setup-instructions { padding-left: 22px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }
.integrations-page .setup-instructions li { padding-left: 5px; margin-bottom: 15px; overflow-wrap: anywhere; }
.integrations-page .setup-instructions li:last-child { margin-bottom: 0; }
.integrations-page .setup-instructions li::marker { color: var(--preview-ocean); font-weight: 600; }
.integrations-page .faq-section { background: var(--page-bg); }
.integrations-page .faq-list { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.integrations-page .faq-item { background: var(--surface-raised); box-shadow: var(--card-shadow); }
.integrations-page .faq-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.integrations-page .integrations-final-cta .section-header { margin-bottom: 0; }
.integrations-page .integrations-final-cta .cta-buttons { margin-top: 28px; }
.integrations-page .integrations-final-cta .cta-note { margin-top: 22px; font-size: 12px; line-height: 1.7; }
.integration-artwork { gap: 0; padding: 30px; }
.integration-art-source { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 350px; margin-inline: auto; }
.integration-art-source > svg { width: 23px; height: 23px; color: var(--primary-color); }
.integration-art-source > svg:last-child { margin-left: auto; width: 18px; height: 18px; }
.integration-art-source strong, .integration-art-source span { display: block; font-size: 12px; line-height: 1.6; }
.integration-art-source strong { color: var(--ink); font-weight: 550; }
.integration-art-source span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.integration-art-stem { display: grid; place-items: center; height: 36px; color: var(--primary-color); }
.integration-art-stem svg { width: 18px; height: 18px; }
.integration-art-hub { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 11px; width: 100%; max-width: 280px; margin-inline: auto; border-color: var(--showcase-rim); }
.integration-art-hub img { object-fit: contain; flex-shrink: 0; }
.integration-art-hub strong { font-size: 16px; line-height: 1.4; font-weight: 650; letter-spacing: -.035em; color: var(--ink); }
.integration-art-hub > span { flex-basis: 100%; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: center; }
.integration-art-branches { position: relative; display: flex; justify-content: space-around; height: 38px; color: var(--primary-color); }
.integration-art-branches::before { content: ''; position: absolute; top: 0; left: 50%; height: 14px; width: 1px; background: var(--showcase-rim); }
.integration-art-branches::after { content: ''; position: absolute; top: 14px; left: 25%; right: 25%; height: 1px; background: var(--showcase-rim); }
.integration-art-branches > span { width: 1px; height: 24px; margin-top: 14px; background: var(--showcase-rim); }
.integration-art-branches > svg { position: absolute; bottom: 0; width: 16px; height: 16px; background: var(--surface-inset); }
.integration-art-branches > svg:nth-of-type(1) { left: calc(25% - 8px); }
.integration-art-branches > svg:nth-of-type(2) { left: calc(75% - 8px); }
.integration-art-destinations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.integration-art-destinations > .feature-art-sheet { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; padding: 18px 12px; }
.integration-art-destinations svg { width: 20px; height: 20px; color: var(--primary-color); }
.integration-art-destinations strong { color: var(--ink); font-size: 13px; font-weight: 550; line-height: 1.5; }
@media (max-width: 999px) {
    .integrations-page .features-grid, .integrations-page .integrations-guides .grid-gap-2-rem { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; }
    .integrations-page .faq-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .integrations-page .features-grid { grid-template-columns: minmax(0, 1fr); }
    .integrations-page .integrations-flow-section { padding-inline: 12px; }
    .integrations-page .integrations-flow-section > .container { padding: 32px 20px; border-radius: 22px; }
    .integrations-page .feature-card, .integrations-page .faq-card { padding: 24px; }
    .integrations-page .integrations-flow-section .feature-card::before { top: 26px; right: 24px; }
    .integrations-page .faq-title { font-size: 20px; }
    .integration-artwork { padding: 22px; }
}
@media (max-width: 359px) {
    .integration-artwork { padding: 16px; }
    .integration-art-source { padding: 14px; gap: 10px; }
    .integration-art-hub { padding: 16px 12px; }
    .integration-art-destinations { gap: 12px; }
}
.blog-content { line-height: 1.85; }
/* About keeps its existing story and company facts in the shared glow treatment. */
.about-page .features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.about-page .feature-card { min-width: 0; padding: 30px; border-radius: 16px; background: var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.about-page .feature-card:hover { box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.about-page .feature-card > :last-child { margin-bottom: 0; }
.about-page .about-story .feature-card { background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); }
.about-page .about-portfolio { padding: 0 32px; background: var(--page-bg); }
.about-page .about-portfolio > .container { padding: 48px; border: 1px solid var(--showcase-rim); border-radius: 28px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-inset); box-shadow: inset 0 1px var(--surface-highlight); }
.about-page .about-portfolio .max-width-800 { max-width: none; }
.about-page .about-portfolio .content-card { margin-bottom: 0; padding: 36px; border-radius: 18px; background: var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.about-page .about-portfolio .content-card > h3 { margin: 0 0 14px; color: var(--ink); font-size: 24px; line-height: 1.4; }
.about-page .about-portfolio .content-card > p { font-size: 15px; line-height: 1.85; }
.about-page .about-portfolio .content-card > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; list-style: none; margin: 28px 0; padding: 0; }
.about-page .about-portfolio .content-card > ul > li { position: relative; min-width: 0; padding: 18px 0 18px 23px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.85; overflow-wrap: anywhere; }
.about-page .about-portfolio .content-card > ul > li::before { content: ''; position: absolute; top: 29px; left: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-color); box-shadow: 0 0 0 4px var(--tint); }
.about-page .about-portfolio .content-card > ul > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.about-page .about-portfolio .content-card strong { color: var(--ink); font-weight: 600; }
.about-page .about-portfolio .content-card > p:last-child { margin: 0; padding: 22px 24px; border: 1px solid var(--showcase-rim); border-radius: 12px; background: var(--tint); }
.about-page .about-service { border-block: 1px solid var(--line); }
.about-page .about-company .feature-card:first-child { background: linear-gradient(135deg, var(--tint), var(--surface-raised) 300px); border-color: var(--showcase-rim); }
.about-page .about-company .feature-card p { line-height: 1.85; }
.about-page .about-company .feature-card strong { color: var(--ink); font-weight: 600; }
.about-page .about-final-cta .section-header { margin-bottom: 0; }
.about-page .about-final-cta .cta-buttons { margin-top: 28px; }
.about-page .about-final-cta .cta-note { margin-top: 22px; font-size: 12px; line-height: 1.7; }
.about-brand-art::before { bottom: 10px; }
.about-brand-stage { align-items: center; gap: 0; min-height: 360px; }
.about-brand-sheet { width: min(100%, 280px); padding: 28px; border: 1px solid var(--showcase-rim); border-radius: 16px; background: var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); text-align: center; }
.about-brand-mark { display: block; width: 128px; height: 128px; max-width: 100%; object-fit: contain; margin-inline: auto; }
.about-brand-lines { display: grid; justify-items: center; gap: 7px; margin-top: 20px; }
.about-brand-lines span { width: 70%; height: 5px; border-radius: 3px; background: var(--line); }
.about-brand-lines span:last-child { width: 46%; }
.about-brand-icons { display: flex; justify-content: center; gap: 22px; margin-top: 24px; }
.about-brand-icons > span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-raised); color: var(--primary-color); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.about-brand-icons svg { width: 20px; height: 20px; }
@media (max-width: 999px) {
    .about-page .features-grid { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; }
}
@media (max-width: 767px) {
    .about-page .feature-card { padding: 26px; }
    .about-page .about-portfolio { padding-inline: 12px; }
    .about-page .about-portfolio > .container { padding: 32px 20px; border-radius: 22px; }
    .about-page .about-portfolio .content-card { padding: 24px; border-radius: 14px; }
    .about-page .about-portfolio .content-card > ul { grid-template-columns: minmax(0, 1fr); margin-block: 22px; }
    .about-page .about-portfolio .content-card > p:last-child { padding: 18px; }
    .about-brand-stage { min-height: 320px; }
    .about-brand-sheet { width: min(100%, 240px); padding: 24px; }
    .about-brand-mark { width: 108px; height: 108px; }
    .about-brand-icons { gap: 18px; }
}
.blog-content pre { background: #0c1f30; color: #e5eff8; }
/* Contact keeps its email links and existing behaviour; the envelope is decorative. */
.contact-page .hero-content > p > a { color: var(--preview-ocean); text-underline-offset: 4px; }
.contact-page .features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.contact-page .feature-card { min-width: 0; padding: 30px; border-radius: 16px; background: var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.contact-page .feature-card:hover { box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.contact-page .feature-card > :last-child { margin-bottom: 0; }
.contact-page .contact-options .feature-card { background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); }
.contact-page .contact-options .feature-setup { padding-top: 18px; border-top: 1px solid var(--line); }
.contact-page .feature-setup .text-link { min-height: 44px; }
.contact-page .contact { padding: 0 32px 88px; background: var(--page-bg); }
.contact-page .contact > .container { padding: 48px; border: 1px solid var(--showcase-rim); border-radius: 28px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-inset); box-shadow: inset 0 1px var(--surface-highlight); }
.contact-page .contact-content { max-width: 800px; padding: 36px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.contact-page .contact-content h2 { margin-bottom: 20px; color: var(--ink); font-size: 34px; line-height: 1.25; }
.contact-page .contact-content > p { color: var(--muted); font-size: 15px; line-height: 1.85; }
.contact-page .contact-content .text-link { min-height: 48px; max-width: 100%; color: var(--preview-ocean); font-size: clamp(16px, 2vw, 21px); line-height: 1.7; overflow-wrap: anywhere; }
.contact-page .contact-content .text-link svg { width: 17px; height: 17px; }
.contact-page .contact-content .form-disclaimer { padding-top: 20px; margin: 24px 0 0; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.85; }
.contact-page .form-disclaimer a { color: var(--preview-ocean); text-underline-offset: 3px; }
.contact-page .contact-company { border-block: 1px solid var(--line); }
.contact-page .contact-company .feature-card:first-child { border-color: var(--showcase-rim); background: linear-gradient(135deg, var(--tint), var(--surface-raised) 300px); }
.contact-page .contact-company .feature-card p { line-height: 1.85; }
.contact-page .contact-company .feature-card strong { color: var(--ink); font-weight: 600; }
.contact-page .feature-list { margin-bottom: 0; padding-left: 0; font-size: 14px; line-height: 1.85; }
.contact-page .feature-list li::before { color: var(--preview-ocean); }
.contact-page .faq-section { background: var(--page-bg); }
.contact-page .faq-list { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.contact-page .faq-item { background: var(--surface-raised); box-shadow: var(--card-shadow); }
.contact-page .faq-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.contact-page .contact-final-cta .section-header { margin-bottom: 0; }
.contact-page .contact-final-cta .cta-buttons { margin-top: 28px; }
.contact-page .contact-final-cta .cta-note { margin-top: 22px; font-size: 12px; line-height: 1.7; }
.contact-envelope-art::before { bottom: 10px; }
.contact-envelope-stage { align-items: center; min-height: 350px; }
.contact-envelope { position: relative; isolation: isolate; width: min(100%, 280px); height: 210px; }
.contact-envelope-back { position: absolute; inset: 45px 0 0; border: 1px solid var(--showcase-rim); border-radius: 12px; background: var(--surface-inset); box-shadow: var(--showcase-shadow); }
.contact-letter { position: absolute; inset: 0 18px 38px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); transform: rotate(-3deg); }
.contact-letter > svg { width: 36px; height: 36px; color: var(--primary-color); stroke-width: 1.5; }
.contact-letter > span { width: 75%; height: 5px; margin-top: 18px; border-radius: 3px; background: var(--line); }
.contact-letter > span:last-child { width: 54%; margin-top: 8px; }
.contact-envelope-front { position: absolute; inset: 84px 0 0; border: 1px solid var(--showcase-rim); border-radius: 0 0 12px 12px; background: linear-gradient(145deg, var(--surface-raised), var(--tint)); clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%); }
@media (max-width: 999px) {
    .contact-page .features-grid { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; }
    .contact-page .faq-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .contact-page .feature-card { padding: 26px; }
    .contact-page .contact { padding: 0 12px 58px; }
    .contact-page .contact > .container { padding: 32px 20px; border-radius: 22px; }
    .contact-page .contact-content { padding: 26px; border-radius: 14px; }
    .contact-page .contact-content h2 { font-size: 30px; }
    .contact-envelope-stage { min-height: 300px; }
    .contact-envelope { max-width: 250px; height: 190px; }
    .contact-envelope-front { top: 76px; }
    .contact-letter { padding: 22px; }
}
@media (max-width: 359px) {
    .contact-page .contact-content { padding: 20px; }
    .contact-page .contact-content .text-link { gap: 0; font-size: 15px; white-space: nowrap; }
    .contact-page .contact-content .text-link svg { display: none; }
    .contact-page .hero-content > p > a { overflow-wrap: anywhere; }
    .contact-envelope { max-width: 220px; height: 180px; }
    .contact-letter { inset-inline: 14px; padding: 20px; }
}
.blog-content pre code { background: transparent; color: inherit; }
/* Support keeps its original guidance, destinations and help anchor. */
/* Editorial surfaces share the layered glow without adding article content. */
.blog-page .blog-latest { padding-inline: 32px; }
.blog-page .blog-latest > .container { padding: 44px; border: 1px solid var(--showcase-rim); border-radius: 28px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-inset); box-shadow: inset 0 1px var(--surface-highlight); }
.blog-page .featured-post { position: relative; max-width: none; padding: 40px; border-radius: 18px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 70%), var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.blog-page .featured-post-content { max-width: 850px; }
.blog-page .featured-post-title a { color: var(--ink); font-size: clamp(24px, 3vw, 34px); line-height: 1.25; font-weight: 600; letter-spacing: -.035em; }
.blog-page .featured-post-excerpt { color: var(--muted); font-size: 16px; line-height: 1.85; }
.blog-page .featured-post-date { color: var(--preview-ocean); font-size: 13px; gap: 8px; }
.blog-page .featured-post-date svg { width: 16px; height: 16px; }
.blog-page .blog-archive { border-top: 1px solid var(--line); }
.blog-page .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 0; }
.blog-page .blog-card { min-width: 0; position: relative; border-radius: 16px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.blog-page .blog-card:hover { box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); border-color: var(--showcase-rim); }
.blog-page .blog-card-content { padding: 28px; }
.blog-page .blog-card-meta { padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.blog-page .blog-card-date { color: var(--preview-ocean); font-size: 12px; }
.blog-page .blog-card-title a { color: var(--ink); font-size: 21px; line-height: 1.4; font-weight: 600; letter-spacing: -.025em; }
.blog-page .blog-card-title a:hover, .blog-page .featured-post-title a:hover { color: var(--preview-ocean); }
.blog-page .blog-card-excerpt { color: var(--muted); font-size: 14px; line-height: 1.85; margin-bottom: 24px; }
.blog-page .blog-card-content .btn { align-self: flex-start; }
.blog-editorial-art::before { bottom: 10px; }
.blog-editorial-stage { min-height: 350px; align-items: center; }
.blog-paper { width: min(75%, 290px); height: 240px; border: 1px solid var(--showcase-rim); border-radius: 12px; background: var(--surface-raised); box-shadow: var(--card-shadow); }
.blog-paper-back { position: absolute; transform: translate(13px, 5px) rotate(8deg); background: var(--tint); }
.blog-paper-front { position: relative; padding: 22px; transform: rotate(-5deg); }
.blog-paper-masthead { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--preview-ocean); }
.blog-paper-masthead svg { width: 24px; height: 24px; flex-shrink: 0; }
.blog-paper span { display: block; height: 5px; border-radius: 3px; background: var(--line); }
.blog-paper-masthead span { width: 58%; background: var(--hero-grid); }
.blog-paper-heading { display: grid; gap: 7px; margin-block: 16px; }
.blog-paper-heading span { height: 7px; background: var(--hero-grid); }
.blog-paper-heading span:last-child { width: 70%; }
.blog-paper-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.blog-paper-picture { height: 65px; display: grid; place-items: center; border: 1px solid var(--showcase-rim); border-radius: 8px; color: var(--preview-ocean); background: radial-gradient(ellipse at 100% 0%, var(--hero-glow), transparent), var(--surface-inset); }
.blog-paper-picture svg { width: 28px; height: 28px; }
.blog-paper-lines { display: grid; align-content: center; gap: 7px; }
.blog-paper-lines span:last-child { width: 65%; }
.blog-paper-footer { display: grid; gap: 7px; margin-top: 16px; }
.blog-paper-footer span:last-child { width: 72%; }
.blog-editorial-pen { position: absolute; right: 12%; bottom: 32px; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid var(--showcase-rim); border-radius: 16px; color: var(--preview-ocean); background: var(--surface-raised); box-shadow: var(--card-shadow); transform: rotate(8deg); }
.blog-editorial-pen svg { width: 28px; height: 28px; }
@media (max-width: 1099px) {
    .blog-page .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .blog-page .blog-grid { grid-template-columns: minmax(0, 1fr); }
    .blog-page .blog-latest { padding-inline: 12px; }
    .blog-page .blog-latest > .container { padding: 32px 20px; border-radius: 22px; }
    .blog-page .featured-post { padding: 26px; }
    .blog-page .blog-card-content { padding: 26px; }
    .blog-editorial-stage { min-height: 300px; }
    .blog-paper { width: min(78%, 270px); height: 230px; }
    .blog-paper-front { padding: 18px; }
    .blog-editorial-pen { width: 50px; height: 50px; bottom: 22px; right: 9%; }
}

/* Blog posts retain a quiet reading surface inside the shared glow treatment. */
.blog-post .blog-hero { padding-block: 64px; }
.blog-post .blog-hero-content { max-width: 960px; padding: 40px; border: 1px solid var(--showcase-rim); border-radius: 24px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--showcase-shadow), inset 0 1px var(--surface-highlight); }
.blog-post .breadcrumb { flex-wrap: wrap; gap: 8px; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.blog-post .breadcrumb a { color: var(--preview-ocean); text-underline-offset: 3px; }
.blog-post .breadcrumb a:hover { text-decoration: underline; }
.blog-post .breadcrumb-current { min-width: 0; }
.blog-post .blog-title { font-size: clamp(32px, 4vw, 48px); line-height: 1.18; letter-spacing: -.04em; text-wrap: balance; }
.blog-post .blog-meta { margin-block: 24px; }
.blog-post .blog-date { padding: 8px 12px; border: 1px solid var(--showcase-rim); border-radius: 8px; background: var(--surface-inset); color: var(--preview-ocean); font-size: 12px; gap: 8px; }
.blog-post .blog-date svg { width: 16px; height: 16px; }
.blog-post .blog-excerpt { max-width: 70ch; margin: 0 auto; font-size: 17px; line-height: 1.85; }
.blog-post .blog-content-section { padding-block: 64px; background: radial-gradient(ellipse 65% 500px at 0% 0%, var(--hero-ribbon), transparent 80%), var(--page-bg); }
.blog-post .blog-content-wrapper { align-items: start; gap: 28px; }
.blog-post .blog-content { border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(ellipse 600px 260px at 100% 0%, var(--hero-ribbon), transparent 85%), var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.blog-post .blog-content > :last-child { margin-bottom: 0; }
.blog-post .blog-content p, .blog-post .blog-content li { font-size: 17px; line-height: 1.85; }
.blog-post .blog-content h2 { font-size: clamp(24px, 2.5vw, 30px); line-height: 1.35; letter-spacing: -.025em; }
.blog-post .blog-content h3 { font-size: 22px; line-height: 1.4; }
.blog-post .blog-content a { color: var(--preview-ocean); text-underline-offset: 3px; }
.blog-post .blog-content blockquote { border: 1px solid var(--showcase-rim); border-left: 3px solid var(--preview-ocean); border-radius: 12px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 70%), var(--surface-inset); }
.blog-post .blog-content blockquote > :last-child { margin-bottom: 0; }
.blog-post .blog-content code { color: var(--preview-ocean); }
.blog-post .blog-content pre code { color: inherit; }
.blog-post .blog-sidebar { min-width: 0; gap: 24px; }
.blog-post .sidebar-widget { min-width: 0; padding: 24px; border-radius: 16px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.blog-post .widget-title { border-bottom: 1px solid var(--line); padding-bottom: 16px; font-size: 20px; letter-spacing: -.02em; }
.blog-post .recent-post-title a { font-size: 14px; line-height: 1.65; }
.blog-post .recent-post-date { font-size: 12px; color: var(--muted); }
.blog-post .cta-widget { border-color: var(--showcase-rim); background: radial-gradient(ellipse at 100% 0%, rgb(14 165 233 / 22%), transparent 75%), var(--cta-bg); }
.blog-post .cta-widget .widget-title { border-color: rgb(255 255 255 / 18%); }
.blog-post .cta-widget p { font-size: 14px; line-height: 1.8; }
.blog-post .cta-widget .cta-note { margin-bottom: 0; margin-top: 16px; font-size: 11px; }
.blog-post .related-posts-section { padding-block: 72px; border-top: 1px solid var(--line); background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--gray-50); }
.blog-post .related-posts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.blog-post .blog-card { min-width: 0; border-radius: 16px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.blog-post .blog-card:hover { border-color: var(--showcase-rim); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.blog-post .blog-card-content { padding: 28px; }
.blog-post .blog-card-date { display: block; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 20px; color: var(--preview-ocean); font-size: 12px; }
.blog-post .blog-card-title a { color: var(--ink); font-size: 21px; line-height: 1.4; font-weight: 600; letter-spacing: -.025em; }
.blog-post .blog-card-title a:hover { color: var(--preview-ocean); }
.blog-post .blog-card-excerpt { color: var(--muted); font-size: 14px; line-height: 1.85; margin-bottom: 24px; }
.blog-post .blog-card-link { min-height: 44px; color: var(--preview-ocean); font-size: 14px; }
/* The embedded widget supplies inline colours; these overrides are presentation only. */
#feedbacknexus-newsletter { min-width: 0; }
#feedbacknexus-newsletter #fn-newsletter-widget { width: 100%; max-width: none !important; padding: 24px !important; border: 1px solid var(--showcase-rim) !important; border-radius: 16px !important; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised) !important; color: var(--ink); font-family: inherit !important; box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight) !important; }
#fn-newsletter-widget h3 { color: var(--ink) !important; }
#fn-newsletter-widget p, #fn-newsletter-widget label { color: var(--muted) !important; line-height: 1.7 !important; }
#fn-newsletter-widget > div:first-child > div { border: 1px solid var(--showcase-rim); border-radius: 12px !important; background: var(--surface-inset) !important; }
#fn-newsletter-widget > div:first-child > div > svg { color: var(--preview-ocean) !important; }
#fn-newsletter-widget #fn-newsletter-email { min-width: 0; min-height: 48px; padding: 12px !important; border: 1px solid var(--line) !important; background: var(--page-bg) !important; color: var(--ink) !important; }
#fn-newsletter-widget #fn-newsletter-email::placeholder { color: var(--muted); opacity: 1; }
#fn-newsletter-widget #fn-newsletter-email:focus { border-color: var(--preview-ocean) !important; outline: 2px solid var(--preview-ocean) !important; outline-offset: 2px; box-shadow: none; }
#fn-newsletter-consent { accent-color: var(--button-bg); width: 16px; height: 16px; }
#fn-newsletter-widget #fn-newsletter-submit { min-height: 48px; padding: 12px 16px !important; border: 1px solid var(--button-bg) !important; background: var(--button-bg) !important; color: #fff !important; font-size: 14px !important; line-height: 1.6; }
#fn-newsletter-widget #fn-newsletter-submit:hover { background: var(--button-hover) !important; }
#fn-newsletter-widget #fn-newsletter-submit:focus-visible, #fn-newsletter-consent:focus-visible { outline: 2px solid var(--preview-ocean); outline-offset: 3px; }
:root[data-theme="dark"] #fn-newsletter-message { background: var(--surface-inset) !important; color: var(--ink) !important; }
@media (min-width: 1100px) {
    .blog-post .blog-content-wrapper { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (min-width: 700px) and (max-width: 1099px) {
    .blog-post .blog-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .blog-post .cta-widget { grid-column: 1 / -1; }
}
@media (max-width: 999px) {
    .blog-post .related-posts-grid { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; }
}
@media (max-width: 767px) {
    .blog-post .blog-hero { padding-block: 32px; }
    .blog-post .blog-hero-content { padding: 28px 22px; border-radius: 20px; }
    .blog-post .blog-title { font-size: 32px; }
    .blog-post .blog-excerpt { font-size: 15px; }
    .blog-post .blog-content-section { padding-block: 32px 48px; }
    .blog-post .blog-content { padding: 24px; border-radius: 16px; }
    .blog-post .blog-content p, .blog-post .blog-content li { font-size: 16px; }
    .blog-post .related-posts-section { padding-block: 48px; }
    .blog-post .blog-card-content { padding: 26px; }
}

.support-page .features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.support-page .feature-card { min-width: 0; padding: 30px; border-radius: 16px; background: var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.support-page .feature-card:hover { box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.support-page .feature-card > :last-child { margin-bottom: 0; }
.support-page .support-guides .feature-card { background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); }
.support-page .feature-list { margin-bottom: 24px; padding-left: 0; font-size: 14px; line-height: 1.85; }
.support-page .feature-list li::before { color: var(--preview-ocean); }
.support-page .feature-setup { padding-top: 20px; border-top: 1px solid var(--line); }
.support-page .feature-card p > a { color: var(--preview-ocean); text-underline-offset: 3px; overflow-wrap: anywhere; }
.support-page .faq-section { border-block: 1px solid var(--line); background: radial-gradient(ellipse at 0% 100%, var(--hero-ribbon), transparent 65%), var(--gray-50); }
.support-page .faq-list { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.support-page .faq-item { background: var(--surface-raised); box-shadow: var(--card-shadow); }
.support-page .support-options-section { padding: 88px 32px 0; }
.support-page .support-options-section > .container { padding: 48px; border: 1px solid var(--showcase-rim); border-radius: 28px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-inset); box-shadow: inset 0 1px var(--surface-highlight); }
.support-page .support-account { background: var(--page-bg); }
.support-page .support-account .max-width-800 { max-width: none; }
.support-page .support-account .grid-gap-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.support-page .support-account .content-card { min-width: 0; margin-bottom: 0; padding: 30px; border-radius: 16px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 75%), var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.support-page .support-account .content-card > h3 { margin: 0 0 16px; color: var(--ink); font-size: 21px; line-height: 1.4; }
.support-page .support-account .content-card > p { margin-bottom: 0; color: var(--muted); font-size: 15px; line-height: 1.85; }
.support-page .support-final-cta .section-header { margin-bottom: 0; }
.support-page .support-final-cta .cta-buttons { margin-top: 28px; }
.support-page .support-final-cta .cta-note { margin-top: 22px; font-size: 12px; line-height: 1.7; }
.support-guide-art::before { bottom: 10px; }
.support-guide-stage { align-items: center; min-height: 350px; }
.support-book { position: relative; width: min(100%, 300px); height: 202px; }
.support-book-left, .support-book-right { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 50%; height: 100%; padding: 26px 18px; border: 1px solid var(--showcase-rim); background: var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.support-book-left { left: 0; border-radius: 12px 0 0 12px; transform: skewY(4deg); transform-origin: right center; }
.support-book-right { right: 0; border-radius: 0 12px 12px 0; transform: skewY(-4deg); transform-origin: left center; }
.support-book svg { width: 36px; height: 36px; margin-bottom: 14px; color: var(--primary-color); stroke-width: 1.5; }
.support-book span { width: 90%; height: 5px; border-radius: 3px; background: var(--line); }
.support-book span:last-child { width: 65%; }
.support-book-spine { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--showcase-rim); }
.support-book-mark { position: absolute; top: -3px; right: 28px; width: 17px; height: 54px; background: var(--primary-color); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
@media (max-width: 999px) {
    .support-page .features-grid { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; }
    .support-page .faq-list { grid-template-columns: minmax(0, 1fr); }
    .support-page .support-account .grid-gap-2 { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; }
}
@media (max-width: 767px) {
    .support-page .feature-card, .support-page .support-account .content-card { padding: 26px; }
    .support-page .support-options-section { padding: 58px 12px 0; }
    .support-page .support-options-section > .container { padding: 32px 20px; border-radius: 22px; }
    .support-page .support-options-section .feature-card { padding: 24px; }
    .support-guide-stage { min-height: 300px; }
    .support-book { max-width: 260px; height: 185px; }
}
@media (max-width: 359px) {
    .support-book { max-width: 230px; height: 175px; }
    .support-book-left, .support-book-right { padding-inline: 14px; }
    .support-book-mark { right: 19px; width: 15px; height: 46px; }
}
.docs-sidebar { top: 106px; }
.docs-main { overflow-wrap: anywhere; }
.stats, .credibility-stats, .value-prop-cta, .features-cta-section, .section-primary-bg, .newsletter-signup, .cta-widget, .blog-callout-primary { background: #0c3450; }
.comparison-table th, .blog-content th, .comparison-card.featured .comparison-header, .pricing-card.featured::before, .pro-badge { background: var(--button-bg); color: #fff; }
.comparison-table th.pro-header, .detailed-comparison-table thead tr, .docs-nav-button:hover,
.step-number, .process-step .step-number, .pricing-tier.featured { background: var(--button-bg); color: #fff; }
.detailed-comparison-table th.competitor-header { background: #34475c; color: #fff; }
.detailed-comparison-table th.feedbacknexus-header, .savings-card, .blog-callout-success { background: #047857; color: #fff; }
.advantage-icon, .benefit-icon, .docs-category-icon, .docs-category-icon-large { background: var(--tint); color: var(--primary-color); box-shadow: none; }
/* Shared card footers, reading widths and responsive content layouts. */
.feature-card > .feature-setup { margin-top: auto; padding-top: 24px; }
.feature-card .btn, .docs-category-cta .btn, .docs-article-card .btn { max-width: 100%; white-space: normal; text-align: center; }
.pricing-card, .comparison-card { display: flex; flex-direction: column; min-width: 0; }
.pricing-card-footer { display: grid; grid-template-rows: auto minmax(3em, auto); gap: 12px; margin-top: auto; }
.pricing-card-description { margin: 0; line-height: 1.5; }
.comparison-cta { margin-top: auto; padding-top: 20px; }
.grid-gap-2-rem { display: grid; }
.grid-gap-2 > .content-card { margin-bottom: 0; }
.content-card > :first-child, .content-card > h3:first-child { margin-top: 0; }
.content-card > :last-child { margin-bottom: 0; }
.cta-buttons, .docs-help-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.cta-buttons > .margin-right-1 { margin-right: 0; }
.features-grid-2-col { grid-template-columns: minmax(0, 1fr); }
.content-card .features-grid-2-col { gap: 24px; }
.content-card .features-grid-2-col > .feature-card { padding: 24px; }
.process-steps, .process-steps-4, .benefits-grid, .benefits-grid-4, .benefits-grid:has(.benefit-item:nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 40px; }
.process-step, .benefit-item { min-width: 0; padding: 28px; border: 1px solid var(--line); box-shadow: none; }
.process-step:hover { transform: none; box-shadow: var(--soft-shadow); }
.view-showcase, .use-cases, .changelog-types { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.view-item, .use-case, .changelog-type { min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.view-item h3, .use-case h3, .changelog-type h3 { font-size: 21px; line-height: 1.35; }
.view-item p, .use-case p, .changelog-type p, .changelog-type li { font-size: 15px; line-height: 1.75; }
.view-item > :last-child, .use-case > :last-child, .changelog-type > :last-child { margin-bottom: 0; }
.changelog-type ul { padding-left: 20px; }
.view-icon, .use-case-icon, .type-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; margin-bottom: 20px; background: var(--tint); color: var(--primary-color); }
.view-icon svg, .use-case-icon svg, .type-icon svg { width: 22px; height: 22px; }
.blog-card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; align-self: flex-start; }
.blog-card-link svg, .blog-card-link > [data-lucide] { width: 16px; height: 16px; flex-shrink: 0; }
.blog-content-wrapper { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.blog-content { min-width: 0; width: 100%; max-width: 78ch; margin-inline: auto; padding: clamp(24px, 3vw, 40px); hyphens: none; }
.docs-container { grid-template-columns: minmax(0, 1fr); min-height: 0; max-width: 1248px; gap: 32px; align-items: start; padding: 48px 32px; }
.docs-main { min-width: 0; min-height: 0; padding: clamp(20px, 3vw, 40px); overflow-x: visible; }
.docs-sidebar { display: none; }
.docs-footer { margin-top: 40px; padding-top: 24px; }
.docs-home { padding-block: 64px; }
.docs-categories { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 0; }
.docs-category-card, .docs-article-card { min-width: 0; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); box-shadow: none; }
.docs-category-card { text-decoration: none; color: var(--ink); background: var(--surface); transition: border-color .18s ease, box-shadow .18s ease; }
.docs-category-card:hover { transform: none; border-color: var(--primary-color); box-shadow: var(--soft-shadow); }
.docs-category-card .docs-category-icon { width: 40px; height: 40px; margin: 0 0 22px; border-radius: 9px; }
.docs-category-card .docs-category-icon svg { width: 21px; height: 21px; }
.docs-category-card .docs-category-title { font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -.025em; margin: 0 0 12px; color: var(--ink); }
.docs-category-card .docs-category-description { font-size: 14px; line-height: 1.75; margin: 0 0 24px; max-width: none; }
.docs-category-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); color: var(--primary-color); font-size: 13px; font-weight: 600; }
.docs-category-link svg { width: 17px; height: 17px; }
.docs-category-card:hover .docs-category-link { text-decoration: underline; text-underline-offset: 4px; }
.docs-home-footer { margin-top: 64px; }
@media (min-width: 700px) {
    .docs-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .docs-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.docs-article-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.docs-article-card > .btn, .docs-article-card-link { margin-top: auto; align-self: flex-start; }
.table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; margin-block: 24px; }
.table-scroll > table { margin-block: 0; }
.docs-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.docs-content th, .docs-content td { padding: 12px 16px; text-align: left; vertical-align: top; border: 1px solid var(--line); }
.docs-content th { background: var(--gray-50); color: var(--ink); font-weight: 600; }
.docs-content pre, .blog-content pre { max-width: 100%; overflow-x: auto; }
@media (min-width: 768px) {
    .process-steps, .process-steps-4, .benefits-grid, .benefits-grid-4, .benefits-grid:has(.benefit-item:nth-child(4):last-child), .use-cases, .changelog-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .features-grid-2-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .process-steps, .benefits-grid, .view-showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .process-steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .benefits-grid:has(.benefit-item:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-content-wrapper { grid-template-columns: minmax(0, 1fr) 280px; }
    .docs-container { grid-template-columns: minmax(0, 1fr) 260px; }
    .docs-sidebar { display: block; padding: 24px; order: initial; }
}
@media (max-width: 767px) {
    .docs-container { padding: 32px 20px; }
    .docs-category-card, .docs-article-card { padding: 24px; }
    .process-step, .benefit-item, .view-item, .use-case, .changelog-type { padding: 24px; }
}
/* One FAQ component for glossary, pricing, support, contact and integration pages. */
.faq-section { background: var(--gray-50); }
.faq-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 800px; margin-inline: auto; }
.faq-item { min-width: 0; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.faq-question { margin: 0 0 12px; color: var(--ink); font-size: clamp(18px, 1.8vw, 20px); font-weight: 600; line-height: 1.5; letter-spacing: -.02em; text-wrap: pretty; }
.faq-answer { color: var(--muted); font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
.faq-answer p { margin: 0 0 12px; color: inherit; font: inherit; }
.faq-answer > :first-child { margin-top: 0; }
.faq-answer > :last-child { margin-bottom: 0; }

/* Homepage: blue light and layered product surfaces, with quiet reading areas. */
.home-hero {
    position: relative; isolation: isolate; padding-block: 86px 82px; overflow: hidden;
    background: radial-gradient(ellipse at 88% 40%, var(--hero-glow), transparent 61%), var(--page-bg);
}
.home-hero::after { top: -12%; right: -8%; }
.home-hero-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
.home-hero-copy .eyebrow { display: flex; align-items: center; gap: 10px; }
.home-hero h1 { font-size: clamp(50px, 5.4vw, 70px); line-height: 1.03; letter-spacing: -.06em; margin-bottom: 25px; font-weight: 650; }
.home-hero h1 > span { color: var(--primary-color); }
.hero-description { max-width: 415px; font-size: 16px; line-height: 1.8; margin-bottom: 30px; }
.home-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.tour-link { font-size: 13px; text-decoration: none; color: var(--ink); font-weight: 550; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.tour-link > span { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
.tour-link svg { width: 11px; height: 11px; fill: currentColor; }
.tour-link:hover { color: var(--primary-color); }
.trial-note { display: flex; align-items: center; gap: 7px; font-size: 11px; margin-top: 17px; margin-bottom: 0; color: var(--muted); }
.trial-note svg { color: var(--primary-color); width: 13px; height: 13px; }
.trial-note span { margin-inline: 3px; }
.product-demo-stage { position: relative; isolation: isolate; min-width: 0; margin-right: 12px; }
.product-demo-stage::before {
    content: ''; position: absolute; inset: -14px -12px 12px 14px; z-index: -1; pointer-events: none;
    background: var(--surface-inset); border: 1px solid var(--showcase-rim); border-radius: 20px; transform: rotate(3deg);
    box-shadow: inset 0 1px var(--surface-highlight);
}
.product-demo { min-width: 0; background: var(--surface-raised); border: 1px solid var(--showcase-rim); border-radius: 18px; padding: 10px; box-shadow: var(--showcase-shadow), inset 0 1px var(--surface-highlight); scroll-margin-top: 110px; }
.demo-heading { display: flex; align-items: center; gap: 9px; padding: 12px 11px 20px; font-size: 9px; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.demo-video { aspect-ratio: 16/9; overflow: hidden; border-radius: 8px; background: #0c1f30; }
.demo-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.demo-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 10px 9px; font-size: 10px; color: var(--muted); }
.demo-caption a { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; text-decoration: none; }
.demo-caption svg { width: 12px; height: 12px; }
.product-demo-dialog { width: min(960px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px rgb(0 0 0 / 35%); }
.product-demo-dialog::backdrop { background: rgb(0 10 20 / 80%); }
.demo-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.demo-dialog-header h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.demo-dialog-close { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--gray-50); color: var(--ink); cursor: pointer; }
.demo-dialog-close:hover { background: var(--tint); color: var(--primary-color); }
.demo-dialog-close svg { width: 20px; height: 20px; }
.heritage-strip { border-block: 1px solid var(--line); background: var(--gray-50); }
.heritage-content { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.5fr; gap: 32px; align-items: center; padding-block: 29px; }
.heritage-content > p { font-size: 12px; line-height: 1.8; margin: 0; }
.heritage-content > p strong { color: var(--ink); font-weight: 550; }
.heritage-content > div > strong { display: block; font-size: 23px; letter-spacing: -.05em; font-weight: 600; line-height: 1.3; }
.heritage-content > div > span { font-size: 10px; color: var(--muted); }
.heritage-maker { display: flex; align-items: center; gap: 13px; padding-left: 25px; border-left: 1px solid var(--line); }
.heritage-maker > svg { width: 30px; height: 30px; color: var(--primary-color); stroke-width: 1.4; }
.heritage-maker p { font-size: 10px; margin: 0; line-height: 1.8; }
.heritage-maker strong { color: var(--ink); font-weight: 550; }
.home-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 70px; margin-bottom: 45px; }
.home-section-heading h2, .tour-grid h2 { font-size: clamp(30px, 3.3vw, 42px); line-height: 1.16; font-weight: 600; letter-spacing: -.045em; margin: 0; }
.home-section-heading .eyebrow { margin-bottom: 15px; }
.home-section-heading > p { max-width: 325px; font-size: 14px; line-height: 1.85; margin: 0; }
.home-section-heading > .text-link { margin-bottom: 6px; }
.home-workflow .home-section-heading, .home-people .home-section-heading { display: block; }
.home-workflow .home-section-heading > p, .home-people .home-section-heading > p { max-width: 72ch; margin-top: 20px; }
.workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.workflow-item { position: relative; min-width: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 24px; }
.workflow-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.workflow-top span { font-size: 10px; letter-spacing: .08em; font-weight: 550; color: var(--muted); }
.workflow-top svg { color: var(--primary-color); width: 24px; height: 24px; stroke-width: 1.5; }
.workflow-item h3 { font-size: 26px; font-weight: 550; line-height: 1.2; letter-spacing: -.04em; margin-bottom: 17px; }
.workflow-item p { font-size: 14px; line-height: 1.85; margin-bottom: 20px; }
.workflow-item .text-link { font-size: 12px; margin-top: auto; align-self: flex-start; }
/* Sample feedback illustrations share the hero's light, dots and layered paper. */
.workflow-illustration { position: relative; margin-bottom: 26px; }
.workflow-art {
    position: relative; isolation: isolate; min-height: 232px; overflow: hidden; border: 1px solid var(--showcase-rim); border-radius: 18px;
    background: radial-gradient(ellipse at 100% 0%, var(--hero-glow), transparent 75%), var(--surface-inset);
    box-shadow: inset 0 1px var(--surface-highlight);
}
.workflow-art::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle, var(--hero-grid) .7px, transparent 1px) 0 0 / 18px 18px; mask-image: linear-gradient(135deg, transparent, #000); }
.workflow-art::after { content: ''; position: absolute; width: 180px; height: 210px; right: -85px; top: -80px; border: 18px solid var(--hero-ribbon); border-radius: 46%; transform: rotate(36deg); z-index: -1; pointer-events: none; }
.request-slip, .request-group, .release-slip, .release-update { min-width: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.request-slip { position: absolute; right: 18px; bottom: 26px; display: flex; align-items: flex-start; gap: 10px; width: calc(100% - 44px); padding: 14px; transform: rotate(2deg); }
.request-slip.request-slip-back { top: 26px; bottom: auto; left: 18px; right: auto; transform: rotate(-4deg); }
.request-slip > svg { width: 19px; height: 19px; padding: 3px; box-sizing: content-box; background: var(--tint); border-radius: 6px; color: var(--primary-color); }
.request-slip > div { min-width: 0; }
.request-slip span { display: block; margin-bottom: 5px; font-size: 10px; line-height: 1.5; color: var(--muted); }
.request-slip strong { display: block; font-size: 12px; line-height: 1.5; font-weight: 550; color: var(--ink); }
.workflow-art-understand { display: grid; place-items: center; padding: 22px; }
.request-group { width: 100%; max-width: 280px; padding: 17px; box-shadow: 6px 6px 0 -1px var(--surface-inset), 6px 6px 0 var(--showcase-rim), var(--card-shadow); }
.request-group-heading { display: flex; align-items: center; gap: 7px; font-size: 10px; line-height: 1.5; color: var(--muted); margin-bottom: 10px; }
.request-group-heading svg { width: 16px; height: 16px; color: var(--primary-color); }
.request-group > strong, .release-slip > strong { display: block; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.request-group-lines { display: grid; gap: 6px; margin-block: 11px 14px; }
.request-group-lines span { height: 5px; width: 85%; border-radius: 3px; background: var(--line); }
.request-group-lines span:last-child { width: 62%; }
.sample-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 5px; background: var(--tint); color: var(--preview-ocean); font-size: 10px; line-height: 1.5; }
.sample-status svg { width: 13px; height: 13px; }
.workflow-art-act { padding: 20px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.release-slip { padding: 13px 15px; }
.release-slip > div { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 10px; line-height: 1.5; color: var(--muted); margin-bottom: 8px; }
.release-slip > div > svg { width: 14px; height: 14px; color: var(--primary-color); }
.release-slip .sample-status { margin-left: auto; padding: 2px 6px; }
.release-update { display: flex; align-items: center; gap: 10px; padding: 12px 15px; }
.release-update > svg { width: 20px; height: 20px; color: var(--primary-color); }
.release-update strong, .release-update span { display: block; font-size: 11px; line-height: 1.5; }
.release-update strong { font-weight: 550; color: var(--ink); }
.release-update span { color: var(--muted); margin-top: 3px; }
.workflow-connector { position: absolute; top: 50%; right: -40px; width: 40px; display: grid; place-items: center; color: var(--primary-color); }
.workflow-connector::before { content: ''; position: absolute; inset: 50% 0 auto; height: 1px; background: currentColor; }
.workflow-connector svg { position: relative; width: 18px; height: 18px; background: var(--page-bg); }
.workflow-item:focus-within .workflow-connector { color: var(--primary-color); }
.illustration-note { margin: 24px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
@media (min-width: 768px) and (max-width: 999px) {
    .workflow-art { min-height: 272px; }
}
.home-capabilities { padding: 0 32px; }
.home-capabilities > .container {
    padding: 48px; border: 1px solid var(--showcase-rim); border-radius: 28px;
    background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-inset);
    box-shadow: inset 0 1px var(--surface-highlight);
}
.capabilities-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; }
.brand-feature { min-width: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.brand-feature-copy { padding: 30px 32px; }
.brand-feature-copy .feature-icon { margin-bottom: 23px; }
.brand-feature h3 { font-size: 26px; line-height: 1.2; margin-bottom: 16px; font-weight: 550; }
.brand-feature-copy p { font-size: 14px; line-height: 1.8; max-width: 410px; }
.brand-feature .text-link { font-size: 12px; }
/* The preview is illustrative; only its labelled palette controls are interactive. */
.portal-customiser { padding: 0 32px 28px; }
.portal-preview { --portal-accent: var(--preview-ocean); container: portal / inline-size; position: relative; border: 1px solid var(--showcase-rim); border-radius: 13px; background: var(--surface); box-shadow: var(--card-shadow); }
.portal-preview[data-palette="forest"] { --portal-accent: var(--preview-forest); }
.portal-preview[data-palette="plum"] { --portal-accent: var(--preview-plum); }
.portal-address { display: flex; align-items: center; gap: 7px; padding: 12px 15px; border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; color: var(--muted); background: var(--gray-50); font-size: 11px; line-height: 1.5; }
.portal-address svg { width: 12px; height: 12px; color: var(--portal-accent); }
.portal-address span { min-width: 0; overflow-wrap: anywhere; }
.portal-preview-body { padding: 21px; border-top: 2px solid var(--portal-accent); background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--portal-accent) 9%, transparent), transparent 65%); border-radius: 0 0 12px 12px; }
.portal-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink); }
.portal-monogram { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: color-mix(in srgb, var(--portal-accent) 12%, var(--surface)); color: var(--portal-accent); font-size: 10px; }
.portal-identity .portal-example-label { margin-left: auto; color: var(--muted); font-size: 10px; font-weight: 400; }
.portal-preview .portal-preview-title { margin: 20px 0 7px; color: var(--ink); font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
.portal-preview .portal-preview-description { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.portal-preview-tabs { display: flex; gap: 20px; margin-top: 20px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.5; }
.portal-preview-tabs span { padding-bottom: 9px; }
.portal-preview-tabs span:first-child { border-bottom: 2px solid var(--portal-accent); color: var(--portal-accent); font-weight: 600; }
.portal-request { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding-top: 17px; color: var(--ink); font-size: 12px; line-height: 1.5; }
.portal-request > svg { width: 15px; height: 15px; color: var(--portal-accent); }
.portal-request-status { justify-self: start; padding: 3px 6px; border-radius: 4px; background: color-mix(in srgb, var(--portal-accent) 10%, var(--surface)); color: var(--portal-accent); font-size: 10px; line-height: 1.5; }
.portal-palette { min-width: 0; border: 0; padding: 0; margin: 22px 0 0; }
.portal-palette[hidden] { display: none; }
.portal-palette legend { padding: 0; margin-bottom: 10px; font-size: 12px; line-height: 1.5; color: var(--ink); font-weight: 550; }
.portal-palette-options { display: flex; flex-wrap: wrap; gap: 8px; }
.portal-swatch { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 12px; line-height: 1.5; cursor: pointer; transition: border-color .18s, background .18s, color .18s; }
.portal-swatch:hover { border-color: var(--primary-color); color: var(--ink); }
.portal-swatch[aria-pressed="true"] { border-color: var(--primary-color); background: var(--tint); color: var(--ink); box-shadow: inset 0 0 0 1px var(--primary-color); }
.portal-swatch > span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #0879b5; color: #fff; }
.portal-swatch[data-portal-palette="forest"] > span { background: #08765d; }
.portal-swatch[data-portal-palette="plum"] > span { background: #8051bc; }
.portal-swatch svg { width: 13px; height: 13px; visibility: hidden; }
.portal-swatch[aria-pressed="true"] svg { visibility: visible; }
.portal-preview-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 14px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
@container portal (max-width: 300px) {
    .portal-preview-body { padding: 16px; }
    .portal-identity .portal-example-label { flex-basis: 100%; margin-left: 0; }
    .portal-request { grid-template-columns: 16px minmax(0, 1fr); row-gap: 5px; }
    .portal-request-status { grid-column: 2; }
}
.capability-list { border: 1px solid var(--line); border-radius: 16px; background: var(--surface-raised); padding-inline: 30px; display: flex; flex-direction: column; box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.capability-row { flex: 1; display: grid; grid-template-columns: 42px 1fr 16px; gap: 18px; align-items: flex-start; padding-block: 34px; border-bottom: 1px solid var(--line); text-decoration: none; }
.capability-row:last-child { border-bottom: 0; }
.capability-row .feature-icon { margin: 0; }
.capability-row h3 { font-size: 19px; font-weight: 600; letter-spacing: -.035em; margin: 3px 0 10px; }
.capability-row p { font-size: 13px; line-height: 1.85; margin: 0; }
.capability-row > svg { width: 16px; height: 16px; margin-top: 8px; color: var(--muted); }
.capability-row:hover h3, .capability-row:hover > svg { color: var(--primary-color); }
.tour-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; }
.tour-grid h2 { margin-bottom: 22px; }
.tour-grid p:not(.eyebrow) { font-size: 15px; line-height: 1.85; margin-bottom: 25px; }
.tour-grid .text-link { font-size: 12px; }
.getting-started-steps { list-style: none; padding: 8px 28px; margin: 0; background: linear-gradient(135deg, var(--surface-inset), var(--surface-raised)); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.getting-started-steps li { display: flex; align-items: flex-start; gap: 20px; border-bottom: 1px solid var(--line); padding-block: 23px; }
.getting-started-steps li:last-child { border-bottom: 0; }
.getting-started-steps li > span { display: grid; place-items: center; width: 35px; height: 35px; flex-shrink: 0; background: var(--tint); color: var(--primary-color); border: 1px solid var(--line); border-radius: 50%; font-size: 11px; }
.getting-started-steps h3 { font-size: 19px; font-weight: 550; margin: 0 0 8px; }
.getting-started-steps li p { font-size: 13px; margin: 0; }
.home-people { padding-top: 20px; }
.home-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.home-quotes figure { margin: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 26px; box-shadow: var(--card-shadow); }
.quote-mark { font-family: Georgia, serif; color: var(--primary-color); font-size: 47px; line-height: 1; height: 38px; }
.home-quotes blockquote { font-size: 14px; line-height: 1.85; margin: 0 0 26px; color: var(--ink); }
.home-quotes figcaption { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.quote-avatar { background: var(--tint); color: var(--primary-color); font-size: 10px; font-weight: 600; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.home-quotes figcaption strong { font-size: 11px; display: block; font-weight: 600; }
.home-quotes figcaption small { font-size: 9px; color: var(--muted); display: block; margin-top: 2px; }
.people-link { margin-top: 28px; text-align: center; }
.people-link .text-link { font-size: 12px; }
.home-final-cta {
    position: relative; isolation: isolate; overflow: hidden;
    background: radial-gradient(ellipse at 50% 100%, rgb(14 165 233 / 23%), transparent 65%), var(--cta-bg);
    padding-block: 66px; border-bottom: 1px solid #2e485d;
    box-shadow: inset 0 1px rgb(125 211 252 / 12%);
}
.home-final-cta::before, .home-final-cta::after {
    content: ''; position: absolute; z-index: -1; pointer-events: none; width: 540px; aspect-ratio: 1;
    border: 1px solid rgb(125 211 252 / 10%); border-radius: 45%; transform: rotate(36deg);
}
.home-final-cta::before { top: -70%; left: -230px; box-shadow: 0 0 0 28px rgb(125 211 252 / 3%); }
.home-final-cta::after { bottom: -95%; right: -210px; box-shadow: 0 0 0 28px rgb(125 211 252 / 3%); }
.final-cta-inner { display: flex; flex-direction: column; align-items: center; max-width: 820px; gap: 28px; text-align: center; }
.home-final-cta .eyebrow { color: #7dd3fc; font-size: 10px; }
.home-final-cta h2 { color: #f0f8ff; font-size: clamp(30px, 3.2vw, 40px); line-height: 1.17; font-weight: 550; margin-bottom: 18px; }
.home-final-cta p { color: #b5c9da; font-size: 14px; margin: 0; }
.home-final-cta .eyebrow { margin-inline: auto; margin-bottom: 16px; }
.final-cta-actions { text-align: center; flex-shrink: 0; }
.final-cta-actions p { font-size: 10px; margin-top: 12px; }
.final-cta-actions > a:last-child { color: #c9dfef; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; margin-top: 20px; text-underline-offset: 4px; }
.final-cta-actions > a:last-child svg { width: 13px; height: 13px; }
/* Footer and privacy surfaces use the same system in both themes. */
.footer { background: var(--footer-bg); padding-block: 48px 24px; }
.footer-content { grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; align-items: start; margin-bottom: 32px; }
.footer-section { min-width: 0; }
.footer-logo { gap: 10px; margin-bottom: 14px; }
.footer-logo-image { width: 30px; height: 30px; }
.footer-brand h3 { color: #e6f2fc; font-size: 22px; font-weight: 650; line-height: 1.3; }
.footer-brand p { color: #a0b6c8; font-size: 14px; max-width: 300px; line-height: 1.75; margin: 0 0 18px; }
.footer-section h4 { color: #e6f2fc; font-size: 13px; font-weight: 600; letter-spacing: 0; line-height: 1.5; margin: 5px 0 14px; }
.footer-section ul { margin: 0; }
.footer-section li { margin: 0; }
.footer-section a, .footer-legal a { color: #a0b6c8; text-decoration: none; }
.footer-link-group a { display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; line-height: 1.5; }
.footer a:hover { color: #e6f2fc; }
.footer a:focus-visible { outline-color: #7dd3fc; outline-offset: 4px; }
.footer .social-links { display: flex; flex-wrap: wrap; gap: 8px; }
.footer .social-links a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgb(160 182 200 / 20%); border-radius: 10px; background: rgb(255 255 255 / 3%); }
.footer .social-links a:hover { color: #7dd3fc; border-color: #54758d; background: rgb(125 211 252 / 8%); }
.footer .social-links svg { width: 19px; height: 19px; }
.footer-bottom { border-color: #293c4e; text-align: left; padding-top: 20px; }
.footer-bottom-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }
.footer-bottom-content p { max-width: 58ch; margin: 0; color: #a0b6c8; font-size: 11px; line-height: 1.8; }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: 0 20px; list-style: none; margin: 0; padding: 0; }
.footer-legal li { margin: 0; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 36px; font-size: 12px; line-height: 1.5; }
@media (max-width: 899px) {
    .footer-content { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-brand-section { grid-column: 1 / -1; }
}
@media (min-width: 600px) and (max-width: 899px) {
    .footer-brand { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; }
    .footer-logo, .footer-brand p { grid-column: 1; }
    .footer-brand p { max-width: 360px; margin-bottom: 0; }
    .footer .social-links { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 599px) {
    .footer-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-company-group { grid-column: 1 / -1; }
    .footer-company-group ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .footer-legal ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
}
.cookie-consent { left: 24px; right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); max-width: 1120px; margin-inline: auto; border: 1px solid var(--showcase-rim); border-radius: 20px; background: radial-gradient(ellipse at 0% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); color: var(--ink); padding: 24px; box-shadow: var(--showcase-shadow), inset 0 1px var(--surface-highlight); transform: translateY(calc(100% + 48px + env(safe-area-inset-bottom))); transition: transform 320ms cubic-bezier(.22,1,.36,1); }
.cookie-consent.show { transform: translateY(0); }
.cookie-consent { max-height: calc(100dvh - 48px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.cookie-consent-content { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 20px; text-align: left; }
.cookie-consent-mark { display: grid; place-items: center; align-self: start; width: 44px; height: 44px; border: 1px solid var(--showcase-rim); border-radius: 14px; background: var(--surface-inset); color: var(--primary-color); box-shadow: inset 0 1px var(--surface-highlight); }
.cookie-consent-mark svg { width: 25px; height: 25px; }
.cookie-consent-text { min-width: 0; }
.cookie-consent-text p { margin: 0; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.7; }
.cookie-consent-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cookie-consent-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 46px; border: 1px solid transparent; border-radius: 9px; font-size: 13px; line-height: 1.5; padding: 11px 16px; transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.cookie-consent-btn svg, .cookie-consent-btn > [data-lucide] { width: 16px; height: 16px; flex-shrink: 0; }
.cookie-consent-btn.accept { background: var(--button-bg); color: #fff; box-shadow: 0 2px 3px rgb(7 81 123 / 8%); }
.cookie-consent-btn.accept:hover { background: var(--button-hover); }
.cookie-consent-btn.settings { color: var(--ink); border-color: var(--showcase-rim); background: var(--surface-raised); }
.cookie-consent-btn.settings:hover { background: var(--tint); border-color: var(--primary-color); }
.cookie-learn-more { color: var(--primary-color); text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }
.cookie-settings-modal { padding: 24px; background: rgb(6 18 30 / 56%); backdrop-filter: blur(6px); }
.cookie-settings-content { max-width: 640px; max-height: calc(100dvh - 48px); padding: 32px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-inset); border: 1px solid var(--showcase-rim); border-radius: 24px; box-shadow: var(--showcase-shadow), inset 0 1px var(--surface-highlight); overscroll-behavior: contain; scroll-padding-block: 24px; }
.cookie-settings-modal.show .cookie-settings-content { animation: cookie-settings-enter 240ms cubic-bezier(.22,1,.36,1); }
@keyframes cookie-settings-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cookie-settings-content > h3 { margin: 0 0 12px; font-size: 28px; line-height: 1.2; }
.cookie-settings-content > p { margin: 0 0 24px; font-size: 14px; line-height: 1.75; }
.cookie-category { margin: 0 0 12px; padding: 18px 20px; border-color: var(--line); border-radius: 16px; background: var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.cookie-category h4 { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 0 0 8px; font-size: 16px; line-height: 1.5; font-weight: 600; letter-spacing: -.02em; gap: 20px; }
.cookie-category p { margin: 0; font-size: 14px; line-height: 1.75; }
.cookie-toggle { flex-shrink: 0; width: 50px; height: 44px; }
.cookie-toggle input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cookie-toggle input:disabled { cursor: not-allowed; }
.cookie-toggle input:focus-visible + .cookie-slider { outline: 3px solid var(--primary-color); outline-offset: 4px; }
.cookie-slider { top: 10px; bottom: 10px; background: var(--gray-300); box-shadow: inset 0 1px 2px rgb(0 0 0 / 8%); transition: background-color 180ms ease; }
.cookie-slider::before { transition: transform 180ms ease; }
input:checked + .cookie-slider { background: var(--button-bg); }
.cookie-modal-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--showcase-rim); gap: 10px; }
.cookie-modal-buttons .cookie-consent-btn { width: 100%; margin: 0; }
@media (min-width: 768px) and (max-width: 959px) {
    .cookie-consent-content { grid-template-columns: 44px minmax(0, 1fr); gap: 16px 20px; }
    .cookie-consent-buttons { grid-column: 2; justify-self: start; }
}
@media (max-width: 1199px) {
    .navbar .container { gap: 16px; }
    .nav-menu { gap: 18px; margin-left: 0; }
    .nav-list { gap: 2px; }
    .nav-link { padding-inline: 10px; }
    .nav-cta { gap: 6px; }
    .logo-text { font-size: 18px; }
    .home-hero-grid { gap: 28px; }
    .home-hero h1 { font-size: 60px; }
}
@media (max-width: 1099px) {
    .navbar .container { justify-content: space-between; min-height: 74px; }
    .nav-actions { margin-left: auto; }
    .nav-toggle { display: flex; }
    .nav-menu { display: none; position: fixed; inset: 74px 0 auto; width: 100%; height: calc(100dvh - 74px); padding: 20px 32px 40px; background: var(--surface); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; overflow-y: auto; z-index: 1000; }
    .nav-menu.show { display: flex; }
    .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-item { border-bottom: 1px solid var(--line); }
    .nav-link { display: flex; width: 100%; justify-content: space-between; padding: 16px 0; min-height: 56px; font-size: 16px; }
    .nav-link:hover, .nav-link.active { background: none; padding-left: 0; }
    .nav-link.active::after { display: none; }
    .nav-dropdown-icon { display: block; width: 16px; height: 16px; }
    .nav-dropdown::after { display: none; }
    .nav-dropdown-menu { display: none; position: static; width: 100%; max-height: none; overflow: visible; border: 1px solid var(--showcase-rim); border-radius: 14px; margin: 0 0 16px; padding: 6px; box-shadow: inset 0 1px var(--surface-highlight); background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); white-space: normal; min-width: 0; max-width: none; }
    .nav-dropdown.open .nav-dropdown-menu { display: block; }
    .nav-dropdown-menu li { border: 0; }
    .nav-dropdown-link, .nav-product-menu .nav-dropdown-link { min-height: 52px; padding: 10px 12px; font-size: 14px; }
    .nav-overview .nav-dropdown-link { padding: 14px 12px; }
    .nav-dropdown-link::after { opacity: .45; }
    .nav-cta { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0; margin-top: 24px; padding: 0; border: 0; gap: 12px; align-items: stretch; justify-content: stretch; }
    .nav-cta .nav-login, .nav-cta .btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 52px; padding: 14px 18px; font-size: 16px; line-height: 1.5; white-space: normal; text-align: center; }
    .nav-cta .nav-login { border: 1px solid var(--line); background: var(--page-bg); }
    .nav-cta .nav-login:hover { border-color: var(--primary-color); background: var(--tint); }
    .home-hero { padding-top: 62px; }
    .home-hero-grid { grid-template-columns: .8fr 1.2fr; gap: 28px; }
    .home-hero h1 { font-size: 54px; }
    .hero-description { font-size: 14px; }
    .home-hero-actions { gap: 12px; }
    .heritage-content { gap: 24px; }
    .heritage-maker { padding-left: 18px; }
    .heritage-maker > svg { display: none; }
    .tour-grid { gap: 40px; }
    .footer-content { gap: 30px; }
    .footer-bottom-content { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .footer-bottom-content p { max-width: none; }
    .footer-legal { order: -1; }
}
@media (min-width: 768px) and (max-width: 899px) {
    .home-hero-grid { grid-template-columns: 1fr; gap: 38px; }
    .home-hero h1 { font-size: 64px; }
    .home-hero h1 br { display: none; }
    .home-hero-copy { max-width: 620px; }
    .hero-description { max-width: 500px; font-size: 16px; }
    .product-demo-stage { margin-right: 16px; }
}
@media (max-width: 767px) {
    .container { padding-inline: 22px; }
    .navbar .container { min-height: 70px; gap: 10px; }
    .logo-text { font-size: 18px; letter-spacing: -.65px; }
    .logo-image { width: 27px; height: 27px; }
    .logo { gap: 6px; }
    .nav-actions { gap: 9px; }
    .nav-toggle { width: 35px; height: 40px; }
    .nav-menu { top: 70px; height: calc(100dvh - 70px); padding-inline: 22px; }
    .home-hero { padding-block: 46px 48px; background-position: center; }
    .home-hero::before { mask-image: radial-gradient(ellipse at 80% 90%, #000, transparent 65%); }
    .hero::after, .blog-hero::after { right: -250px; top: -140px; }
    .home-hero::after { width: 330px; top: auto; bottom: -60px; right: -180px; border-width: 26px; }
    .product-demo-stage { margin: 10px 8px 0 0; }
    .product-demo-stage::before { inset: -8px -7px 8px 9px; transform: rotate(2deg); border-radius: 16px; }
    .product-demo { border-radius: 14px; padding: 8px; }
    .home-hero-grid { grid-template-columns: 1fr; gap: 34px; }
    .home-hero h1 { font-size: clamp(48px, 10vw, 68px); margin-bottom: 22px; }
    .home-hero-copy .eyebrow { font-size: 10px; margin-bottom: 22px; }
    .hero-description { max-width: 460px; font-size: 15px; margin-bottom: 25px; }
    .home-hero-actions { gap: 24px; }
    .heritage-content { grid-template-columns: 1fr 1fr; gap: 25px; padding-block: 28px; }
    .heritage-content > p { font-size: 11px; }
    .heritage-content > div > strong { font-size: 24px; }
    .heritage-maker { border: 0; padding: 0; }
    .heritage-maker p { font-size: 10px; }
    .section { padding-block: 58px; }
    .home-section-heading { flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 32px; }
    .home-section-heading h2, .tour-grid h2 { font-size: 33px; }
    .home-section-heading > p { max-width: 460px; font-size: 14px; }
    .workflow-grid { grid-template-columns: 1fr; gap: 32px; }
    .workflow-item { padding-top: 20px; }
    .workflow-illustration { max-width: 460px; width: 100%; margin-bottom: 24px; }
    .workflow-connector { display: none; }
    .workflow-item:not(:last-child)::after { content: ''; position: absolute; bottom: -24px; left: 18px; width: 1px; height: 16px; background: var(--showcase-rim); }
    .workflow-top { margin-bottom: 20px; }
    .workflow-item h3 { font-size: 27px; }
    .workflow-item h3 br { display: none; }
    .workflow-item p { max-width: 500px; margin-bottom: 15px; }
    .capabilities-grid { grid-template-columns: 1fr; gap: 20px; }
    .home-capabilities { padding: 0 12px; }
    .home-capabilities > .container { padding: 32px 20px; border-radius: 22px; }
    .brand-feature-copy { padding: 27px; }
    .portal-customiser { padding-inline: 27px; }
    .capability-list { padding-inline: 24px; }
    .capability-row { padding-block: 26px; gap: 15px; }
    .tour-grid { grid-template-columns: 1fr; gap: 32px; }
    .getting-started-steps { padding: 4px 20px; }
    .home-people { padding-top: 10px; }
    .home-quotes { grid-template-columns: 1fr; gap: 16px; }
    .home-quotes figure { padding: 24px; }
    .home-quotes blockquote { font-size: 15px; margin-bottom: 22px; }
    .home-final-cta { padding-block: 48px; }
    .final-cta-inner { gap: 24px; }
    .home-final-cta h2 { font-size: 32px; }
    .final-cta-actions { text-align: center; }
    .home-final-cta .eyebrow { max-width: 250px; }
    .footer { padding-top: 40px; }
    .footer-content { gap: 28px 20px; text-align: left; margin-bottom: 28px; }
    .footer-link-group a { min-height: 44px; }
    .footer-legal a { min-height: 44px; }
    .hero, .blog-hero { padding-block: 48px; }
    .hero h1, .blog-title { font-size: 36px; }
    .hero p { font-size: 16px; }
    .hero + .section { padding-top: 48px; }
    .hero-cta { flex-direction: row; gap: 12px; }
    .hero-cta .btn-large { font-size: 13px; padding-inline: 18px; }
    .feature-card { padding: 25px; }
    .cookie-consent { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); max-height: calc(100dvh - 24px - env(safe-area-inset-bottom)); padding: 18px; border-radius: 18px; }
    .cookie-consent-content { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .cookie-consent-mark { display: none; }
    .cookie-consent-buttons { width: 100%; gap: 8px; }
    .cookie-consent-btn { padding-inline: 10px; }
    .cookie-settings-modal { padding: 16px; }
    .cookie-settings-content { max-height: calc(100dvh - 32px); padding: 24px 20px; border-radius: 20px; }
    .cookie-settings-content > h3 { font-size: 25px; }
    .cookie-category { padding: 16px; }
    .cookie-modal-buttons { gap: 8px; }
    .cookie-category h4 { font-size: 15px; gap: 14px; }
}
@media (max-width: 599px) {
    .cookie-modal-buttons { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
    .container { padding-inline: 20px; }
    .logo-text { font-size: 16px; }
    .logo-image { width: 24px; height: 24px; }
    .navbar .container { padding-inline: 16px; }
    .nav-actions { gap: 7px; }
    .home-hero-actions { gap: 18px; }
    .demo-caption { font-size: 9px; padding-inline: 5px; }
    .demo-caption a { font-size: 9px; }
    .home-hero-actions .btn-large { padding-inline: 17px; font-size: 13px; }
    .tour-link { font-size: 11px; }
    .trial-note { font-size: 10px; }
    .brand-feature-copy { padding: 24px; }
    .portal-customiser { padding-inline: 20px; }
    .capability-list { padding-inline: 22px; }
    .capability-row { grid-template-columns: 34px 1fr 14px; gap: 12px; }
    .capability-row .feature-icon { width: 34px; height: 34px; }
    .capability-row h3 { font-size: 18px; }
    .home-final-cta h2 { font-size: 29px; }
    .footer-content { gap: 28px 20px; }
}
@media (max-width: 359px) {
    .logo-text { font-size: 14px; }
    .logo-image { width: 20px; height: 20px; }
    .nav-actions { gap: 5px; }
    .nav-toggle { width: 32px; }
    .home-hero h1 { font-size: 45px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Keep the expanded guide list readable alongside longer documentation pages. */
.docs-sidebar { max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); overflow-y: auto; scrollbar-width: thin; }
.docs-nav-categories { padding-left: 0; }
.docs-nav-categories > .docs-nav-item { margin-bottom: .8rem; }
.docs-nav-guides { margin-top: .4rem; padding-left: .5rem; }
.docs-nav-guides li { margin: 0 0 .2rem; }
.docs-nav-guides .docs-nav-link { line-height: 1.5; overflow-wrap: anywhere; }

/* Search reveals across the CTA footprint, keeping the header geometry still. */
.header-search { position: relative; flex: 0 0 auto; }
.header-search .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.header-search-toggle { width: 42px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--gray-50); color: var(--muted); cursor: pointer; }
.header-search-toggle svg, .header-search-submit svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.header-search-toggle svg { grid-area: 1 / 1; transition: opacity 160ms ease, transform 240ms ease; }
.header-search-close-icon { opacity: 0; transform: rotate(-45deg); }
.header-search-toggle[aria-expanded="true"] .header-search-open-icon { opacity: 0; transform: rotate(45deg); }
.header-search-toggle[aria-expanded="true"] .header-search-close-icon { opacity: 1; transform: none; }
.header-search-toggle:hover, .header-search-toggle[aria-expanded="true"] { background: var(--tint); border-color: var(--primary-color); color: var(--primary-color); }
.header-search-panel { position: absolute; top: 50%; right: calc(100% + 12px); width: var(--header-search-width, 280px); padding: 0; border: 1px solid var(--showcase-rim); border-radius: 10px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 75%), var(--surface-raised); box-shadow: inset 0 1px var(--surface-highlight); z-index: 1002; opacity: 0; visibility: hidden; clip-path: inset(-4px -4px -4px 100%); transform: translate(12px, -50%); transition: clip-path 320ms cubic-bezier(.22,1,.36,1), transform 320ms cubic-bezier(.22,1,.36,1), opacity 180ms ease, visibility 0s 320ms; }
.navbar[data-search-open="true"] .header-search-panel { opacity: 1; visibility: visible; clip-path: inset(-4px); transform: translate(0, -50%); transition-delay: 0s; }
.nav-cta { transition: opacity 140ms ease, visibility 0s 140ms; }
.nav-cta > a { transition: transform 240ms ease; }
.navbar[data-search-open="true"] .nav-cta { opacity: 0; visibility: hidden; pointer-events: none; }
.navbar[data-search-open="true"] .nav-cta > a { transform: translateX(-8px); }
.navbar[data-search-open="false"] .nav-cta { transition-delay: 100ms, 0s; }
.header-search-panel[hidden], #siteSearchMore[hidden] { display: none; }
.site-search-form label, .docs-hero-search label { display: block; margin-bottom: 12px; color: var(--ink); font-size: 14px; font-weight: 600; }
.header-search-fields { display: flex; align-items: center; min-width: 0; padding: 1px; }
.header-search-fields input { flex: 1; min-width: 0; width: 100%; height: 44px; padding: 10px 0 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 16px; }
.header-search-fields input::placeholder { color: var(--muted); opacity: 1; }
.header-search-fields input:focus-visible { outline: none; }
.header-search-panel:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--tint), inset 0 1px var(--surface-highlight); }
.header-search-submit { flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--primary-color); cursor: pointer; }
.header-search-submit:hover { background: var(--tint); }
.site-search-fields { display: flex; align-items: stretch; gap: 10px; }
.site-search-fields input { flex: 1; min-width: 0; width: 100%; border: 1px solid var(--gray-300); border-radius: 8px; background: var(--page-bg); color: var(--ink); }
@media (max-width: 1099px) {
    .navbar .logo { transition: opacity 140ms ease, visibility 0s 140ms; }
    .navbar[data-search-open="true"] .logo { opacity: 0; visibility: hidden; pointer-events: none; }
    .navbar[data-search-open="false"] .logo { transition-delay: 100ms, 0s; }
}
.site-search-page { padding-block: 48px 80px; }
.site-search-page > .container { max-width: 960px; }
.search-hero { padding-block: 56px; }
.site-search-form { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.site-search-fields input { min-height: 54px; padding: 12px 16px; font-size: 18px; }
.site-search-fields .btn { min-height: 54px; padding-inline: 24px; font-size: 16px; flex-shrink: 0; }
.site-search-status { margin: 28px 0 20px; font-size: 15px; line-height: 1.7; }
.site-search-results { display: grid; gap: 16px; }
.site-search-result { padding: 26px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow-wrap: anywhere; }
.site-search-result-section { display: block; color: var(--muted); font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.site-search-result h2 { font-size: clamp(20px, 2vw, 24px); line-height: 1.4; margin: 0 0 10px; text-wrap: pretty; }
.site-search-result h2 a { color: var(--ink); text-decoration: none; }
.site-search-result h2 a:hover { color: var(--primary-color); text-decoration: underline; text-underline-offset: 4px; }
.site-search-result p { margin: 0; line-height: 1.8; font-size: 15px; }
.site-search-result mark { color: #142738; background: #d8effc; border: 0; border-radius: 4px; padding: .08em .35em; margin-inline: .04em; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.site-search-more { margin-top: 28px; text-align: center; }
@media (min-width: 1100px) and (max-width: 1199px) {
    .navbar .container { gap: 12px; padding-inline: 24px; }
    .nav-menu { gap: 12px; }
    .nav-actions { gap: 8px; }
    .nav-cta .btn { padding-inline: 14px; }
}
@media (max-width: 767px) {
    .site-search-page { padding-block: 32px 56px; }
    .site-search-form, .site-search-result { padding: 20px; }
}
@media (max-width: 479px) {
    .site-search-fields { flex-direction: column; }
}

/* Shared search field for the documentation home, categories and guide heroes. */
.docs-hero-search { width: 100%; max-width: 640px; margin: 28px auto 0; text-align: left; }

/* Final shared-surface pass: decoration stays behind existing controls and copy. */
.footer { background: radial-gradient(ellipse at 15% 0%, var(--hero-glow), transparent 65%), var(--footer-bg); }
.home-final-cta :is(.btn-outline, .btn-secondary) { border-color: #54758d; color: #fff; background: transparent; }
.home-final-cta :is(.btn-outline, .btn-secondary):hover { border-color: #88c9ef; color: #fff; background: rgb(255 255 255 / 8%); }
/* Feature heroes already have illustrations; finish the sections below them. */
.feature-detail-page :is(.feature-card, .benefit-item, .process-step, .view-item, .use-case, .changelog-type) { border-radius: 16px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.feature-detail-page :is(.feature-card, .benefit-item, .process-step, .view-item, .use-case, .changelog-type):hover { transform: none; box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.feature-detail-page :is(.feature-icon, .benefit-icon, .view-icon, .use-case-icon, .type-icon) { border: 1px solid var(--showcase-rim); background: var(--surface-inset); color: var(--preview-ocean); }
.feature-detail-page .benefit-icon { width: 42px; height: 42px; border-radius: 10px; }
.feature-detail-page .benefit-icon svg { width: 22px; height: 22px; }
.feature-detail-page .process-step .step-number { box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.feature-detail-page :is(.feature-card, .benefit-item, .process-step, .view-item, .use-case, .changelog-type) h3 { font-size: 21px; line-height: 1.4; letter-spacing: -.025em; }
.feature-detail-page :is(.feature-card, .benefit-item, .process-step, .view-item, .use-case, .changelog-type) p { color: var(--muted); font-size: 15px; line-height: 1.85; }
.feature-detail-page .changelog-type li { color: var(--muted); font-size: 14px; line-height: 1.85; }
.feature-detail-page :is(.feature-card, .benefit-item) > :last-child { margin-bottom: 0; }
.feature-detail-page .feature-detail-final .section-header { margin-bottom: 0; }
.feature-detail-page .feature-detail-final .cta-buttons { margin-top: 28px; }
.feature-detail-page .feature-detail-final .cta-note { margin-top: 22px; font-size: 12px; line-height: 1.7; }

/* Feature overview: the existing capabilities remain the focus of each surface. */
.features-overview-page .hero { padding-block: 64px; }
.features-overview-page .hero-content { max-width: 960px; padding: 40px; border: 1px solid var(--showcase-rim); border-radius: 24px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--showcase-shadow), inset 0 1px var(--surface-highlight); }
.features-overview-page .hero h1 { font-size: clamp(34px, 4vw, 48px); line-height: 1.2; text-wrap: balance; }
.features-overview-page .hero p { max-width: 68ch; margin-inline: auto; font-size: 16px; line-height: 1.85; }
.features-overview-page .hero-cta { flex-wrap: wrap; }
.features-overview-page .features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.features-overview-page .feature-card { min-width: 0; padding: 30px; border-radius: 18px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.features-overview-page .feature-card:hover { box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.features-overview-page .feature-icon { border-color: var(--showcase-rim); background: var(--surface-inset); color: var(--preview-ocean); }
.features-overview-page .feature-card h3 { margin-top: 0; font-size: 21px; line-height: 1.4; letter-spacing: -.025em; }
.features-overview-page .feature-card p { color: var(--muted); font-size: 15px; line-height: 1.85; }
.features-overview-page .feature-card > :last-child { margin-bottom: 0; }
.features-overview-page .feature-card-footer { padding-top: 20px; border-top: 1px solid var(--line); }
.features-overview-page .feature-card-footer .btn { width: 100%; }
.features-overview-page .features-overview-technical { padding: 0 32px; background: var(--page-bg); }
.features-overview-page .features-overview-technical > .container { padding: 44px; border: 1px solid var(--showcase-rim); border-radius: 28px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-inset); box-shadow: inset 0 1px var(--surface-highlight); }
.features-overview-page .features-overview-technical .feature-card { background: var(--surface-raised); }
.features-overview-page .feature-list { padding-left: 0; margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }
.features-overview-page .feature-list li { color: var(--muted); }
.features-overview-page .feature-list li::before { color: var(--preview-ocean); }
.features-overview-page .feature-list strong { color: var(--ink); }
.features-overview-page .features-overview-final .section-header { margin-bottom: 0; }
.features-overview-page .features-overview-final .cta-buttons { margin-top: 28px; }
.features-overview-page .features-overview-final .cta-note { margin-top: 22px; font-size: 12px; line-height: 1.7; }
.features-overview-page .features-overview-final .btn-outline { border-color: #54758d; color: #fff; background: transparent; }
.features-overview-page .features-overview-final .btn-outline:hover { border-color: #88c9ef; background: rgb(255 255 255 / 8%); }
@media (max-width: 1099px) {
    .features-overview-page .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .features-overview-page .hero { padding-block: 32px; }
    .features-overview-page .hero-content { padding: 28px 22px; border-radius: 20px; }
    .features-overview-page .hero h1 { font-size: 32px; }
    .features-overview-page .hero p { font-size: 15px; }
    .features-overview-page .feature-card { padding: 26px; }
    .features-overview-page .features-overview-technical { padding-inline: 12px; }
    .features-overview-page .features-overview-technical > .container { padding: 32px 20px; border-radius: 22px; }
    .features-overview-page .features-overview-technical .feature-card { padding: 24px; }
}
@media (max-width: 699px) {
    .features-overview-page .features-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Search retains its existing form, live status and result markup. */
.search-page .search-hero { padding-block: 48px; }
.search-page .hero-content { max-width: 960px; padding: 32px; border: 1px solid var(--showcase-rim); border-radius: 24px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--showcase-shadow), inset 0 1px var(--surface-highlight); }
.search-page .hero h1 { font-size: clamp(34px, 4vw, 44px); line-height: 1.2; text-wrap: balance; }
.search-page .hero p { max-width: 66ch; margin-inline: auto; margin-bottom: 0; font-size: 16px; line-height: 1.85; }
.search-page .site-search-page { padding-block: 48px 72px; background: radial-gradient(ellipse 80% 650px at 0% 0%, var(--hero-ribbon), transparent 80%), var(--gray-50); }
.search-page .site-search-form { padding: 28px; border-color: var(--showcase-rim); border-radius: 20px; background: radial-gradient(ellipse at 100% 0%, var(--hero-glow), transparent 75%), var(--surface-inset); box-shadow: var(--showcase-shadow), inset 0 1px var(--surface-highlight); }
.search-page .site-search-fields input { border-color: var(--showcase-rim); background: var(--surface-raised); font-size: 16px; }
.search-page .site-search-fields input::placeholder { color: var(--muted); opacity: 1; }
.search-page .site-search-fields input:focus-visible { border-color: var(--preview-ocean); outline: 2px solid var(--preview-ocean); outline-offset: 2px; }
.search-page .site-search-status { margin: 24px 0; padding: 16px 20px; border-left: 3px solid var(--showcase-rim); border-radius: 10px; background: var(--surface-inset); color: var(--muted); font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.search-page .site-search-results { gap: 20px; }
.search-page .site-search-result { min-width: 0; padding: 28px; border-radius: 16px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.search-page .site-search-result-section { display: inline-block; max-width: 100%; margin-bottom: 14px; padding: 4px 8px; border: 1px solid var(--showcase-rim); border-radius: 6px; background: var(--surface-inset); color: var(--preview-ocean); font-size: 11px; line-height: 1.6; }
.search-page .site-search-result h2 { font-size: clamp(20px, 2.5vw, 24px); line-height: 1.4; letter-spacing: -.025em; }
.search-page .site-search-result h2 a:hover { color: var(--preview-ocean); }
.search-page .site-search-result p { color: var(--muted); font-size: 14px; line-height: 1.85; }
.search-page .site-search-more .btn { min-height: 48px; border-color: var(--showcase-rim); background: var(--surface-raised); box-shadow: var(--card-shadow); }
.search-page .site-search-more .btn:hover { background: var(--surface-inset); }
@media (max-width: 767px) {
    .search-page .search-hero { padding-block: 32px; }
    .search-page .hero-content { padding: 24px 22px; border-radius: 20px; }
    .search-page .hero h1 { font-size: 32px; }
    .search-page .hero p { font-size: 15px; }
    .search-page .site-search-page { padding-block: 32px 48px; }
    .search-page .site-search-form { padding: 20px; border-radius: 16px; }
    .search-page .site-search-result { padding: 24px; }
    .search-page .site-search-status { padding: 14px 16px; }
}

/* Legal pages share the glow treatment while keeping long text easy to read. */
.legal-page .hero { padding-block: 64px; }
.legal-page .hero-content { max-width: 960px; padding: 40px; border: 1px solid var(--showcase-rim); border-radius: 24px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--showcase-shadow), inset 0 1px var(--surface-highlight); }
.legal-page .hero h1 { font-size: clamp(34px, 4vw, 48px); line-height: 1.2; text-wrap: balance; }
.legal-page .hero p { max-width: 68ch; margin-inline: auto; font-size: 16px; line-height: 1.85; }
.legal-page .hero .legal-updated { display: inline-block; max-width: 100%; margin-top: 24px; margin-bottom: 0; padding: 8px 12px; border: 1px solid var(--showcase-rim); border-radius: 8px; background: var(--surface-inset); color: var(--preview-ocean); font-size: 12px; line-height: 1.7; }
.legal-page .legal-content { padding-block: 64px; background: radial-gradient(ellipse 80% 650px at 0% 0%, var(--hero-ribbon), transparent 80%), var(--gray-50); }
.legal-page .legal-content .max-width-800 { display: grid; gap: 24px; }
.legal-page .content-card { min-width: 0; margin-bottom: 0; padding: 36px; border-radius: 18px; background: radial-gradient(ellipse 500px 180px at 100% 0%, var(--hero-ribbon), transparent 85%), var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); overflow-wrap: anywhere; }
.legal-page .content-card h2 { margin: 0 0 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: clamp(24px, 2.5vw, 28px); line-height: 1.35; letter-spacing: -.025em; }
.legal-page .content-card h3 { margin: 32px 0 16px; color: var(--ink); font-size: 19px; line-height: 1.5; letter-spacing: -.02em; }
.legal-page .content-card p, .legal-page .content-card li { color: var(--muted); font-size: 16px; line-height: 1.85; }
.legal-page .content-card p { margin-bottom: 20px; }
.legal-page .content-card ul, .legal-page .content-card ol { margin: 0 0 20px; padding-left: 22px; }
.legal-page .content-card li + li { margin-top: 8px; }
.legal-page .content-card strong { color: var(--ink); }
.legal-page .content-card a { color: var(--preview-ocean); text-underline-offset: 3px; }
.legal-page .content-card > :last-child { margin-bottom: 0; }
.legal-page .content-card:first-child { border-color: var(--showcase-rim); }
.legal-page .content-card:last-child { border-color: var(--showcase-rim); background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 75%), var(--surface-inset); }
@media (max-width: 767px) {
    .legal-page .hero { padding-block: 32px; }
    .legal-page .hero-content { padding: 28px 22px; border-radius: 20px; }
    .legal-page .hero h1 { font-size: 32px; }
    .legal-page .hero p { font-size: 15px; }
    .legal-page .legal-content { padding-block: 32px 48px; }
    .legal-page .content-card { padding: 24px; border-radius: 16px; }
}

/* The live roadmap keeps its existing data and controls inside a layered frame. */
.roadmap-page .hero { padding-block: 64px; }
.roadmap-page .hero-content { max-width: 960px; padding: 40px; border: 1px solid var(--showcase-rim); border-radius: 24px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--showcase-shadow), inset 0 1px var(--surface-highlight); }
.roadmap-page .hero h1 { font-size: clamp(34px, 4vw, 48px); line-height: 1.2; text-wrap: balance; }
.roadmap-page .hero p { max-width: 68ch; margin-inline: auto; font-size: 16px; line-height: 1.85; }
.roadmap-page .hero-cta { flex-wrap: wrap; }
.roadmap-page .roadmap-widget-section { background: radial-gradient(ellipse 70% 650px at 0% 0%, var(--hero-ribbon), transparent 80%), var(--page-bg); }
.roadmap-page #roadmap-container { position: relative; isolation: isolate; min-width: 0; padding: 24px; border: 1px solid var(--showcase-rim); border-radius: 26px; background: radial-gradient(ellipse at 100% 0%, var(--hero-glow), transparent 75%), var(--surface-inset); box-shadow: var(--showcase-shadow), inset 0 1px var(--surface-highlight); }
.roadmap-page #feedback-widget { min-width: 0; }
/* The embed writes inline theme variables; scoped overrides follow the host theme
   without reinitialising the widget or disturbing its current view and form state. */
body:has(.roadmap-page) :is(.fn-widget, .fn-login-modal, .fn-details-modal) {
    --fn-color-scheme: light !important;
    --fn-primary-color: var(--preview-ocean) !important;
    --fn-primary-soft-color: var(--tint) !important;
    --fn-primary-border-color: var(--showcase-rim) !important;
    --fn-background-color: var(--surface-raised) !important;
    --fn-text-color: var(--ink) !important;
    --fn-surface-color: var(--surface-inset) !important;
    --fn-surface-hover-color: var(--tint) !important;
    --fn-panel-color: var(--surface-raised) !important;
    --fn-border-color: var(--line) !important;
    --fn-input-background-color: var(--page-bg) !important;
    --fn-muted-text-color: var(--muted) !important;
    --fn-subtle-text-color: var(--muted) !important;
    --fn-disabled-surface-color: var(--gray-50) !important;
    --fn-font-family: Inter, sans-serif !important;
}
:root[data-theme="dark"] body:has(.roadmap-page) :is(.fn-widget, .fn-login-modal, .fn-details-modal) { --fn-color-scheme: dark !important; --fn-shadow-color: rgb(0 0 0 / 35%) !important; --fn-overlay-color: rgb(0 0 0 / 68%) !important; }
.roadmap-page #feedback-widget .fn-widget { min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.roadmap-page #feedback-widget .fn-header { padding-bottom: 22px; margin-bottom: 24px; gap: 16px; }
.roadmap-page #feedback-widget .fn-header-right { gap: 10px; }
.roadmap-page #feedback-widget :is(.fn-roadmap-btn, .fn-whats-new-btn, .fn-login-btn, .fn-back-btn) { min-height: 44px; border-color: var(--showcase-rim); border-radius: 8px; background: var(--surface-inset); color: var(--preview-ocean); }
.roadmap-page #feedback-widget :is(.fn-roadmap-btn, .fn-whats-new-btn, .fn-login-btn, .fn-back-btn):hover { background: var(--button-bg); border-color: var(--button-bg); color: #fff; }
body:has(.roadmap-page) :is(.fn-widget, .fn-login-modal, .fn-details-modal) :is(.fn-toggle-form, .fn-btn-primary, .fn-retry-btn) { min-height: 44px; border-radius: 8px; background: var(--button-bg) !important; color: #fff; }
.roadmap-page #feedback-widget :is(.fn-feedback-item, .fn-roadmap-item, .fn-changelog-item) { min-width: 0; padding: 22px; margin-bottom: 16px; border: 1px solid var(--showcase-rim); border-radius: 12px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); overflow-wrap: anywhere; }
.roadmap-page #feedback-widget .fn-feedback-item { border-left: 3px solid var(--preview-ocean); }
.roadmap-page #feedback-widget .fn-clickable-card:hover { transform: none; background: var(--surface-inset); box-shadow: var(--card-shadow); }
.roadmap-page #feedback-widget :is(.fn-feedback-title, .fn-roadmap-item-title) { font-size: 17px; line-height: 1.5; letter-spacing: -.02em; }
.roadmap-page #feedback-widget :is(.fn-feedback-description, .fn-roadmap-item-description) { font-size: 14px; line-height: 1.85; }
.roadmap-page #feedback-widget :is(.fn-feedback-header, .fn-roadmap-item-header) { flex-wrap: wrap; gap: 10px; }
.roadmap-page #feedback-widget :is(.fn-feedback-meta, .fn-roadmap-item-meta) { flex-wrap: wrap; row-gap: 10px; }
.roadmap-page #feedback-widget .fn-feedback-category { margin-left: 0; }
.roadmap-page #feedback-widget :is(input, textarea, select) { max-width: 100%; }
.roadmap-page #feedback-widget .fn-feedback-item:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
    .roadmap-page .hero { padding-block: 32px; }
    .roadmap-page .hero-content { padding: 28px 22px; border-radius: 20px; }
    .roadmap-page .hero h1 { font-size: 32px; }
    .roadmap-page .hero p { font-size: 15px; }
    .roadmap-page .roadmap-widget-section > .container { padding-inline: 12px; }
    .roadmap-page #roadmap-container { padding: 12px; border-radius: 22px; }
    .roadmap-page #feedback-widget .fn-widget { padding: 20px; border-radius: 14px; }
    .roadmap-page #feedback-widget :is(.fn-feedback-item, .fn-roadmap-item, .fn-changelog-item) { padding: 18px; }
}
@media (max-width: 359px) {
    .roadmap-page #feedback-widget .fn-widget { padding: 16px; }
    .roadmap-page #feedback-widget :is(.fn-feedback-item, .fn-roadmap-item, .fn-changelog-item) { padding: 16px; }
}

/* Comparison pages preserve every table value and plan inside layered surfaces. */
.compare-page .hero { padding-block: 64px; }
.compare-page .hero-content { max-width: 960px; padding: 40px; border: 1px solid var(--showcase-rim); border-radius: 24px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--showcase-shadow), inset 0 1px var(--surface-highlight); }
.compare-page .hero h1 { font-size: clamp(34px, 4vw, 48px); line-height: 1.2; text-wrap: balance; }
.compare-page .hero p { max-width: 68ch; margin-inline: auto; font-size: 16px; line-height: 1.85; }
.compare-page .hero-cta { flex-wrap: wrap; }
.compare-page .comparison-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 0; }
.compare-page .comparison-card { padding: 32px; border-radius: 18px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.compare-page .comparison-card:hover { transform: none; box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.compare-page .comparison-logo { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.compare-page .comparison-logo h3 { font-size: 25px; font-weight: 600; line-height: 1.35; letter-spacing: -.03em; }
.compare-page .comparison-highlights { padding-left: 0; font-size: 14px; line-height: 1.85; }
.compare-page .comparison-highlights li { padding-left: 24px; }
.compare-page .comparison-highlights li::before { color: var(--preview-forest); }
.compare-page .comparison-cta { padding-top: 20px; border-top: 1px solid var(--line); text-align: left; }
.compare-page .compare-table-section { border-block: 1px solid var(--line); }
.compare-page .compare-table-section .overflow-x-auto { max-width: 100%; border: 1px solid var(--showcase-rim); border-radius: 18px; background: var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); scrollbar-color: var(--showcase-rim) var(--surface-inset); }
.compare-page .compare-table-section .overflow-x-auto:focus-visible { outline: 2px solid var(--preview-ocean); outline-offset: 4px; }
.compare-page .detailed-comparison-table { min-width: 740px; border-collapse: separate; border-spacing: 0; border-radius: 0; background: var(--surface-raised); box-shadow: none; font-size: 14px; line-height: 1.75; }
.compare-page .detailed-comparison-table thead tr { background: var(--surface-raised); }
.compare-page .detailed-comparison-table th { padding: 20px; background: var(--surface-raised); color: var(--ink); font-size: 15px; line-height: 1.65; }
.compare-page .detailed-comparison-table th:first-child { width: 28%; }
.compare-page .detailed-comparison-table th.feedbacknexus-header { width: 36%; background: var(--surface-inset); color: var(--preview-ocean); }
.compare-page .detailed-comparison-table th.competitor-header { width: 36%; background: var(--gray-50); color: var(--ink); }
.compare-page .detailed-comparison-table td { padding: 16px 20px; border-color: var(--line); color: var(--ink); font-size: 14px; line-height: 1.75; }
.compare-page .detailed-comparison-table :is(th, td) { min-width: 0; max-width: none; hyphens: none; }
.compare-page .detailed-comparison-table tr.category-header td { padding: 16px 20px; background: var(--surface-inset); color: var(--ink); font-size: 14px; }
.compare-page .detailed-comparison-table td.advantage { border-left: 3px solid var(--preview-forest); background: var(--hero-ribbon); }
.compare-page .pricing-comparison { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 0; }
.compare-page .pricing-comparison-card { min-width: 0; padding: 28px; border: 1px solid var(--showcase-rim); border-radius: 20px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-inset); box-shadow: inset 0 1px var(--surface-highlight); }
.compare-page .pricing-comparison-card h3 { margin-bottom: 24px; color: var(--ink); font-size: 25px; font-weight: 600; line-height: 1.35; letter-spacing: -.03em; }
.compare-page .pricing-tiers { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.compare-page .pricing-tier { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); color: var(--ink); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); overflow-wrap: anywhere; }
.compare-page .pricing-tier:hover, .compare-page .pricing-tier.featured { transform: none; }
.compare-page .pricing-tier.featured { border-color: var(--showcase-rim); background: radial-gradient(ellipse at 100% 0%, var(--hero-glow), transparent 75%), var(--surface-raised); }
.compare-page .pricing-tier h4 { margin: 0 0 12px; color: var(--ink); font-size: 16px; line-height: 1.5; }
.compare-page .pricing-tier .price { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 3px; color: var(--preview-ocean); font-size: 26px; font-weight: 650; line-height: 1.35; }
.compare-page .pricing-tier .price span { font-size: 12px; line-height: 1.65; }
.compare-page .pricing-tier ul { margin-bottom: 0; padding-left: 0; }
.compare-page .pricing-tier li { color: var(--muted); font-size: 13px; line-height: 1.85; }
.compare-page .savings-card { padding: 32px; border: 1px solid var(--showcase-rim); border-radius: 20px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-inset); color: var(--ink); box-shadow: inset 0 1px var(--surface-highlight); }
.compare-page .savings-card h3 { color: var(--ink); -webkit-text-fill-color: currentColor; font-size: 25px; line-height: 1.4; letter-spacing: -.025em; }
.compare-page .savings-calculation { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.compare-page .savings-item { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); box-shadow: var(--card-shadow); backdrop-filter: none; overflow-wrap: anywhere; }
.compare-page .savings-label { color: var(--muted); font-size: 12px; line-height: 1.7; opacity: 1; }
.compare-page .savings-amount { color: var(--ink); font-size: 20px; font-weight: 600; line-height: 1.4; }
.compare-page .savings-detail { color: var(--muted); font-size: 13px; line-height: 1.7; opacity: 1; }
.compare-page .advantages-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 0; }
.compare-page .advantage-card { min-width: 0; padding: 28px; border-radius: 16px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); text-align: left; }
.compare-page .advantage-card:hover { transform: none; box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.compare-page .advantage-icon { width: 42px; height: 42px; margin: 0 0 20px; border: 1px solid var(--showcase-rim); border-radius: 10px; background: var(--surface-inset); color: var(--preview-ocean); }
.compare-page .advantage-icon svg { width: 22px; height: 22px; }
.compare-page .advantage-card h3 { font-size: 21px; font-weight: 600; line-height: 1.4; letter-spacing: -.025em; }
.compare-page .advantage-card p { margin-bottom: 0; color: var(--muted); font-size: 15px; line-height: 1.85; }
.compare-page .compare-final-cta .section-header { margin-bottom: 0; }
.compare-page .compare-final-cta .cta-buttons { margin-top: 28px; }
.compare-page .compare-final-cta .cta-note { margin-top: 22px; font-size: 12px; line-height: 1.7; }
.compare-page .compare-final-cta .btn-outline { border-color: #54758d; color: #fff; background: transparent; }
.compare-page .compare-final-cta .btn-outline:hover { border-color: #88c9ef; background: rgb(255 255 255 / 8%); }
@media (min-width: 600px) {
    .compare-page .pricing-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .compare-page .pricing-tiers:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .compare-page .pricing-tiers:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .compare-page .pricing-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
    .compare-page .advantages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 799px) {
    .compare-page .comparison-summary, .compare-page .savings-calculation { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .compare-page .hero { padding-block: 32px; }
    .compare-page .hero-content { padding: 28px 22px; border-radius: 20px; }
    .compare-page .hero h1 { font-size: 32px; }
    .compare-page .hero p { font-size: 15px; }
    .compare-page .comparison-card, .compare-page .pricing-comparison-card, .compare-page .savings-card, .compare-page .advantage-card { padding: 24px; }
}
@media (max-width: 699px) {
    .compare-page .advantages-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Glossary definitions use the same glow, with clear layers for related ideas. */
.glossary-page .hero { padding-block: 64px; }
.glossary-page .hero-content { max-width: 960px; padding: 40px; border: 1px solid var(--showcase-rim); border-radius: 24px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--showcase-shadow), inset 0 1px var(--surface-highlight); }
.glossary-page .hero h1 { font-size: clamp(34px, 4vw, 48px); line-height: 1.2; text-wrap: balance; }
.glossary-page .hero p { max-width: 70ch; margin-inline: auto; font-size: 16px; line-height: 1.85; }
.glossary-page .hero-cta { flex-wrap: wrap; }
.glossary-page .breadcrumb { flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.glossary-page .breadcrumb a { color: var(--preview-ocean); text-underline-offset: 3px; }
.glossary-page .breadcrumb a:hover { text-decoration: underline; }
.glossary-page .features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.glossary-page .feature-card { min-width: 0; padding: 28px; border-radius: 16px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.glossary-page .feature-card:hover { box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.glossary-page .feature-icon { border-color: var(--showcase-rim); background: var(--surface-inset); color: var(--preview-ocean); }
.glossary-page .feature-card h3 { margin-top: 0; line-height: 1.4; letter-spacing: -.025em; }
.glossary-page .feature-card h3 a { color: var(--ink); text-decoration: none; }
.glossary-page .feature-card h3 a:hover { color: var(--preview-ocean); text-decoration: underline; text-underline-offset: 3px; }
.glossary-page .feature-card p { font-size: 15px; line-height: 1.85; }
.glossary-page .feature-card > :last-child { margin-bottom: 0; }
.glossary-page .content-card { padding: 32px; margin-bottom: 0; border-radius: 18px; background: var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.glossary-page .content-card > p { color: var(--muted); font-size: 16px; line-height: 1.85; }
.glossary-page .content-card > p > a { color: var(--preview-ocean); text-underline-offset: 3px; }
.glossary-page .content-card:has(> .features-grid-2-col) { border-color: var(--showcase-rim); background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-inset); box-shadow: inset 0 1px var(--surface-highlight); }
.glossary-page .max-width-800:has(> .content-card > .features-grid-2-col) { max-width: 1000px; }
.glossary-page .content-card .features-grid-2-col { gap: 24px; }
.glossary-page .content-card .feature-card { background: var(--surface-raised); }
.glossary-page .glossary-definition .content-card { border-color: var(--showcase-rim); border-left: 3px solid var(--preview-ocean); background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 75%), var(--surface-raised); }
.glossary-page .glossary-catalog { padding: 0 32px; background: var(--page-bg); }
.glossary-page .glossary-catalog > .container { padding: 44px; border: 1px solid var(--showcase-rim); border-radius: 28px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-inset); box-shadow: inset 0 1px var(--surface-highlight); }
.glossary-page .faq-section { border-block: 1px solid var(--line); background: radial-gradient(ellipse at 0% 100%, var(--hero-ribbon), transparent 65%), var(--gray-50); }
.glossary-page .faq-list { max-width: 1000px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.glossary-page .faq-item { background: var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.glossary-page .glossary-final-cta .section-header { margin-bottom: 0; }
.glossary-page .glossary-final-cta .cta-buttons { margin-top: 28px; }
.glossary-page .glossary-final-cta .cta-note { margin-top: 22px; font-size: 12px; line-height: 1.7; }
.glossary-page .glossary-final-cta .btn-outline { border-color: #54758d; color: #fff; background: transparent; }
.glossary-page .glossary-final-cta .btn-outline:hover { border-color: #88c9ef; background: rgb(255 255 255 / 8%); }
@media (min-width: 800px) {
    .glossary-page .features-grid-2-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 700px) and (max-width: 1099px) {
    .glossary-page .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
    .glossary-page .faq-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .glossary-page .hero { padding-block: 32px; }
    .glossary-page .hero-content { padding: 28px 22px; border-radius: 20px; }
    .glossary-page .hero h1 { font-size: 32px; }
    .glossary-page .hero p { font-size: 15px; }
    .glossary-page .feature-card, .glossary-page .content-card { padding: 24px; }
    .glossary-page .glossary-catalog { padding-inline: 12px; }
    .glossary-page .glossary-catalog > .container { padding: 32px 20px; border-radius: 22px; }
    .glossary-page .faq-list { gap: 20px; }
}
@media (max-width: 699px) {
    .glossary-page .features-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Documentation: layered navigation surfaces around an uncluttered reading area. */
.docs-page { background: radial-gradient(ellipse 70% 650px at 0% 650px, var(--hero-ribbon), transparent 80%), var(--page-bg); }
.docs-page .hero { padding-block: 64px; }
.docs-page .hero-content { max-width: 960px; padding: 40px; border: 1px solid var(--showcase-rim); border-radius: 24px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--showcase-shadow), inset 0 1px var(--surface-highlight); }
.docs-page .hero h1 { font-size: clamp(34px, 4vw, 48px); line-height: 1.2; text-wrap: balance; }
.docs-page .hero p { max-width: 66ch; margin-inline: auto; font-size: 16px; line-height: 1.85; }
.docs-page .hero-cta { flex-wrap: wrap; }
.docs-page .docs-hero-search { max-width: 680px; padding: 20px; border: 1px solid var(--showcase-rim); border-radius: 16px; background: var(--surface-inset); box-shadow: inset 0 1px var(--surface-highlight); }
.docs-page .docs-hero-search label { color: var(--ink); }
.docs-page .docs-hero-search input { border-color: var(--showcase-rim); font-size: 16px; }
.docs-page .docs-hero-search input::placeholder { color: var(--muted); opacity: 1; }
.docs-page .docs-hero-search input:focus-visible { border-color: var(--preview-ocean); outline: 2px solid var(--preview-ocean); outline-offset: 2px; }
.docs-page .docs-home, .docs-page .docs-category-page { padding-block: 64px; }
.docs-page .docs-category-card, .docs-page .docs-article-card { border-radius: 16px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.docs-page .docs-category-card:hover, .docs-page .docs-article-card:hover { transform: none; border-color: var(--showcase-rim); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.docs-page .docs-category-icon { border: 1px solid var(--showcase-rim); background: var(--surface-inset); color: var(--preview-ocean); }
.docs-page .docs-category-link { color: var(--preview-ocean); }
.docs-page .docs-category-card:focus-visible { outline: 2px solid var(--preview-ocean); outline-offset: 4px; }
.docs-page .docs-article-card h3 { margin-bottom: 16px; }
.docs-page .docs-article-card-title { color: var(--ink); font-size: 21px; line-height: 1.4; font-weight: 600; letter-spacing: -.025em; }
.docs-page .docs-article-card-title:hover { color: var(--preview-ocean); }
.docs-page .docs-article-card-description { color: var(--muted); font-size: 15px; line-height: 1.85; margin-bottom: 24px; }
.docs-page .docs-help-section { position: relative; isolation: isolate; overflow: hidden; padding: 48px 32px; border: 1px solid var(--showcase-rim); border-radius: 24px; background: radial-gradient(ellipse at 100% 0%, rgb(14 165 233 / 24%), transparent 70%), var(--cta-bg); box-shadow: var(--showcase-shadow); }
.docs-page .docs-help-section::before { content: ''; position: absolute; z-index: -1; pointer-events: none; width: 320px; height: 340px; top: -170px; right: -160px; border: 30px solid rgb(101 221 200 / 9%); border-radius: 46%; transform: rotate(36deg); }
.docs-page .docs-help-section h2 { color: #fff; letter-spacing: -.03em; }
.docs-page .docs-help-section p { color: #c8d9e8; font-size: 16px; line-height: 1.85; }
.docs-page .docs-help-section .btn-outline { border-color: #54758d; color: #fff; background: transparent; }
.docs-page .docs-help-section .btn-outline:hover { border-color: #88c9ef; background: rgb(255 255 255 / 8%); }
.docs-page .docs-help-actions { margin-bottom: 0; }
.docs-page .docs-main { border-radius: 20px; background: radial-gradient(ellipse 600px 260px at 100% 0%, var(--hero-ribbon), transparent 85%), var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.docs-page .docs-breadcrumb { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.docs-page .breadcrumb-list { flex-wrap: wrap; row-gap: 8px; }
.docs-page .breadcrumb-item { min-width: 0; line-height: 1.7; overflow-wrap: anywhere; }
.docs-page .breadcrumb-item a { color: var(--preview-ocean); font-size: 12px; text-underline-offset: 3px; }
.docs-page .breadcrumb-item a:hover { text-decoration: underline; }
.docs-page .breadcrumb-item.active { font-size: 12px; color: var(--muted); }
.docs-page .docs-content { line-height: 1.85; }
.docs-page .docs-content h2 { font-size: clamp(24px, 2.5vw, 30px); line-height: 1.35; letter-spacing: -.025em; }
.docs-page .docs-content h3 { font-size: 22px; line-height: 1.4; }
.docs-page .docs-content a { color: var(--preview-ocean); text-underline-offset: 3px; }
.docs-page .docs-content > :last-child { margin-bottom: 0; }
.docs-page .docs-content code { color: var(--preview-ocean); }
.docs-page .docs-content pre { border-color: var(--showcase-rim); border-radius: 12px; }
.docs-page .docs-content pre code { color: inherit; }
.docs-page .docs-content blockquote { margin: 24px 0; padding: 20px; border: 1px solid var(--showcase-rim); border-left: 3px solid var(--preview-ocean); border-radius: 12px; background: var(--surface-inset); }
.docs-page .docs-content blockquote > :last-child { margin-bottom: 0; }
.docs-page .docs-content th { background: var(--surface-inset); color: var(--ink); }
.docs-page .docs-content th, .docs-page .docs-content td { border-color: var(--line); }
.docs-page .docs-sidebar { border-color: var(--showcase-rim); border-radius: 16px; background: radial-gradient(ellipse at 100% 0%, var(--hero-ribbon), transparent 65%), var(--surface-raised); box-shadow: var(--card-shadow), inset 0 1px var(--surface-highlight); }
.docs-page .docs-nav-home { color: var(--preview-ocean); }
.docs-page .docs-nav-section { padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.docs-page .docs-nav-category-link { display: flex; align-items: center; min-height: 40px; font-size: 14px; line-height: 1.6; }
.docs-page .docs-nav-guides .docs-nav-link { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px; }
.docs-page .docs-nav-link.active { border-color: var(--showcase-rim); background: var(--surface-inset); color: var(--preview-ocean); box-shadow: inset 0 1px var(--surface-highlight); }
.docs-page .docs-nav-link:hover { color: var(--preview-ocean); background: var(--surface-inset); }
.docs-page .docs-navigation { align-items: stretch; }
.docs-page .docs-nav-prev, .docs-page .docs-nav-next { min-width: 0; }
.docs-page .docs-nav-button { min-height: 48px; max-width: 100%; padding: 14px 16px; border: 1px solid var(--showcase-rim); border-radius: 12px; background: var(--surface-inset); color: var(--preview-ocean); box-shadow: inset 0 1px var(--surface-highlight); font-size: 14px; line-height: 1.65; }
.docs-page .docs-nav-button svg { width: 18px; height: 18px; flex-shrink: 0; }
.docs-page .docs-nav-button span { min-width: 0; }
.docs-page .docs-nav-button:hover { transform: none; border-color: var(--preview-ocean); box-shadow: var(--card-shadow); }
@media (max-width: 767px) {
    .docs-page .hero { padding-block: 32px; }
    .docs-page .hero-content { padding: 28px 22px; border-radius: 20px; }
    .docs-page .hero h1 { font-size: 32px; }
    .docs-page .hero p { font-size: 15px; }
    .docs-page .docs-hero-search { padding: 16px; }
    .docs-page .docs-home, .docs-page .docs-category-page { padding-block: 40px; }
    .docs-page .docs-main { padding: 24px; border-radius: 16px; }
    .docs-page .docs-home-footer { margin-top: 40px; }
    .docs-page .docs-help-section { padding: 32px 24px; border-radius: 20px; }
}