:root {
    color-scheme: light;
    --blue: #0a6bcb;
    --blue-dark: #054279;
    --nav-bg: #054279;
    --bg: #f4f6f8;
    --panel: #ffffff;
    --border: #d8dee5;
    --text: #1c2733;
    --muted: #64748b;
    --error: #b42318;
    --error-bg: #fdecea;
    --error-border: #f5c6c0;
    --warn-bg: #fff3cd;
    --warn-text: #7a5c00;
    --warn-border: #e6d59a;
    --code-bg: #e8eef4;
    --row-alt: #fafbfc;
    --pre-soft-bg: #f1f4f7;
    --shadow: rgba(5, 66, 121, 0.18);
}

/* Follow the operating system's appearance. */

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --blue: #3f8fd6;
        --blue-dark: #7db4e8;
        --nav-bg: #0b2f52;
        --bg: #0f1620;
        --panel: #182231;
        --border: #2c3a4d;
        --text: #dce5ee;
        --muted: #8fa1b5;
        --error: #ff8d80;
        --error-bg: #3a1713;
        --error-border: #6b2a22;
        --warn-bg: #33290c;
        --warn-text: #eac96a;
        --warn-border: #55471c;
        --code-bg: #223146;
        --row-alt: #131c29;
        --pre-soft-bg: #1e2a3b;
        --shadow: rgba(0, 0, 0, 0.5);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

main { padding: 1.25rem 2rem 3rem; max-width: 1200px; margin: 0 auto; }

h1 { font-size: 1.5rem; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.05rem; margin: 0 0 0.75rem; color: var(--blue-dark); }

.topnav {
    display: flex; align-items: center; gap: 1.25rem;
    background: var(--nav-bg); color: #fff; padding: 0.6rem 2rem;
}
.topnav a { color: #dbe9f7; text-decoration: none; font-size: 0.95rem; }
.topnav a:hover { color: #fff; }
.topnav .brand { font-weight: 700; letter-spacing: 0.03em; }
.topnav .spacer { flex: 1; }
.topnav .lang a { font-size: 0.85rem; }
.inline { display: inline; }
.linklike {
    background: none; border: none; color: #dbe9f7; cursor: pointer;
    font-size: 0.95rem; padding: 0;
}
.linklike:hover { color: #fff; }

.warning-banner {
    background: var(--warn-bg); color: var(--warn-text); border-bottom: 1px solid var(--warn-border);
    padding: 0.4rem 2rem; font-size: 0.85rem;
}

.kpi-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.kpi {
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    padding: 0.9rem 1.4rem; min-width: 160px; display: flex; flex-direction: column;
}
.kpi-value { font-size: 1.7rem; font-weight: 700; color: var(--blue-dark); }
.kpi-label { font-size: 0.8rem; color: var(--muted); }

.panel {
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.panel-row { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.panel-row .panel { flex: 1; min-width: 280px; }

table.grid { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.grid th, table.grid td {
    text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border);
}
table.grid th { color: var(--muted); font-weight: 600; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.row-error td { color: var(--error); }
.detail-row td { padding: 0 0.6rem 0.5rem; background: var(--row-alt); }
.detail-row pre {
    white-space: pre-wrap; word-break: break-word; background: var(--pre-soft-bg);
    padding: 0.5rem; border-radius: 6px; max-height: 320px; overflow: auto;
}

/* Where an ORI answer came from, per API call in the MCP log. */

.cache-src
{
    display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; color: #fff;
}
.cache-memory { background: #2e7d32; }
.cache-disk { background: #b8860b; }
.cache-live { background: #0072bb; }

.login-box {
    max-width: 360px; margin: 8vh auto; background: var(--panel);
    border: 1px solid var(--border); border-radius: 10px; padding: 2rem;
}
.login-box h1 { text-align: center; color: var(--blue-dark); }
.login-box label { display: block; margin-top: 0.9rem; font-size: 0.85rem; color: var(--muted); }
.login-box input { width: 100%; padding: 0.5rem; margin-top: 0.25rem; border: 1px solid var(--border); border-radius: 6px; }
.login-box button { margin-top: 1.25rem; width: 100%; }

button, .tile-method {
    background: var(--blue); color: #fff; border: none; border-radius: 6px;
    padding: 0.5rem 1.1rem; font-size: 0.95rem; cursor: pointer;
}
button:hover { background: var(--blue-dark); }

.error {
    background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border);
    border-radius: 6px; padding: 0.6rem 0.9rem; margin: 0.75rem 0;
}
.muted { color: var(--muted); font-size: 0.85rem; }
.docs { max-width: 800px; }

.explorer-controls { display: flex; gap: 0.75rem; margin-bottom: 1rem; }
.explorer-controls input[type="search"] {
    flex: 1; max-width: 420px; padding: 0.5rem 0.75rem;
    border: 1px solid var(--border); border-radius: 6px;
}
.explorer-controls select { padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px; }

.tile-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.9rem;
}
.tile {
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    padding: 0.85rem 1rem; text-decoration: none; color: var(--text);
    display: flex; flex-direction: column; gap: 0.3rem; transition: box-shadow 0.15s;
}
.tile:hover { box-shadow: 0 2px 10px var(--shadow); }
.tile-category { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.tile-name { font-weight: 600; }
.tile-method {
    align-self: flex-start; font-size: 0.7rem; padding: 0.1rem 0.5rem; cursor: default;
}
.tile-timing { font-size: 0.75rem; color: var(--muted); }

.scenario-form { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; }
.form-row { margin-bottom: 0.75rem; }
.form-row label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.25rem; }
.wide { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; }
.mono { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 0.82rem; }
pre.result {
    background: #10141a; color: #d5e2ef; padding: 1rem; border-radius: 8px;
    max-height: 540px; overflow: auto; font-size: 0.8rem;
}

.filter-row { display: flex; gap: 0.9rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem; }
.filter-row label { display: flex; flex-direction: column; font-size: 0.8rem; color: var(--muted); gap: 0.25rem; }
.filter-row input { padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: 6px; }

/* -- Landing page ---------------------------------------------------------- */

main.anonymous { max-width: 1080px; }

.landing-header { display: flex; align-items: center; padding: 0.5rem 0 1rem; }
.landing-logo { height: 56px; max-width: 70vw; }
.landing-header .lang a { color: var(--blue-dark); text-decoration: none; font-size: 0.9rem; }

.hero { display: flex; gap: 2.5rem; align-items: flex-start; margin: 1rem 0 2rem; }
.hero-text { flex: 1.4; }
.hero-text h1 { font-size: 2rem; color: var(--blue-dark); margin: 0 0 0.75rem; }
.lead { font-size: 1.1rem; }
.hero .login-box { flex: 1; margin: 0; }
.button-link {
    display: inline-block; background: #f39200; color: #fff; text-decoration: none;
    border-radius: 6px; padding: 0.55rem 1.2rem; font-weight: 600;
}
.button-link:hover { background: #d98200; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.feature { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; }
.feature h3 { margin: 0 0 0.5rem; color: var(--blue-dark); font-size: 1rem; }
.feature p { margin: 0; font-size: 0.9rem; }

.screenshots h2 { color: var(--blue-dark); }
.screenshot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.screenshot-grid figure { margin: 0; }
.screenshot-grid img {
    width: 100%; border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 2px 12px var(--shadow);
}
.screenshot-grid figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.35rem; text-align: center; }

.landing-footer { margin-top: 2.5rem; border-top: 1px solid var(--border); padding-top: 1rem; font-size: 0.9rem; }

.brand-link { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.brand-icon { height: 26px; }

.onboarding { max-width: 780px; }
.onboarding pre { background: #10141a; color: #d5e2ef; padding: 0.75rem 1rem; border-radius: 8px; overflow-x: auto; }
.onboarding code { background: var(--code-bg); padding: 0.1rem 0.35rem; border-radius: 4px; }
.onboarding pre code, .onboarding pre { font-size: 0.85rem; }

/* -- Small screens (iPhone and friends) ------------------------------------ */

@media (max-width: 760px) {
    main { padding: 1rem 1rem 2.5rem; }
    .topnav { flex-wrap: wrap; gap: 0.6rem 1rem; padding: 0.6rem 1rem; }
    .hero { flex-direction: column; gap: 1.25rem; }
    .hero-text h1 { font-size: 1.5rem; }
    .login-box { width: 100%; max-width: none; margin: 0; }
    .kpi { flex: 1 1 40%; min-width: 0; }
    table.grid { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .filter-row { gap: 0.5rem; }
    .explorer-controls { flex-direction: column; }
    .landing-logo { height: 44px; }
    pre.result { max-height: 320px; }
    input, select, textarea, button { font-size: 16px; }
}

/* -- Form controls in both colour schemes ---------------------------------- */

input, select, textarea {
    background: var(--panel);
    color: var(--text);
}

/* Keep screenshots readable on a dark background. */

@media (prefers-color-scheme: dark) {
    .screenshot-grid img { opacity: 0.92; }
}

/* -- Marketing chrome (Invantive Cloud style) ------------------------------- */

body.marketing { display: flex; flex-direction: column; min-height: 100vh; }
body.marketing main { flex: 1; width: 100%; }

.mkt-header {
    display: flex; align-items: center; gap: 1.4rem;
    background: var(--panel); border-bottom: 1px solid var(--border);
    padding: 0.55rem 2rem; position: sticky; top: 0; z-index: 20;
}
.mkt-logo { height: 44px; display: block; }
.mkt-nav { display: flex; gap: 1.1rem; }
.mkt-nav a, .mkt-header .menu summary {
    color: var(--text); text-decoration: none; font-size: 0.95rem;
}
.mkt-nav a:hover { color: var(--blue); }
.mkt-header .spacer { flex: 1; }
.button-link.signin { background: var(--blue); }
.button-link.signin:hover { background: var(--blue-dark); }
.button-link.secondary { background: var(--panel); color: var(--blue-dark); border: 1px solid var(--border); }
.button-link.secondary:hover { background: var(--bg); }
.cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Dropdown menus (language and nine-dot) built on <details>. */

details.menu { position: relative; }
details.menu summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.5rem;
    border-radius: 6px; color: var(--text);
}
details.menu summary::-webkit-details-marker { display: none; }
details.menu[open] summary, details.menu summary:hover { background: var(--bg); }
details.menu.onnav summary { color: #dbe9f7; }
details.menu.onnav[open] summary, details.menu.onnav summary:hover { background: rgba(255, 255, 255, 0.12); }
.menu-panel {
    position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 50;
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 8px 28px var(--shadow); padding: 0.6rem; min-width: 220px;
    max-width: 92vw;
}
/* The nine-dot menu sits at the far left, so its panel opens to the right. */
details.waffle .menu-panel { inset-inline-end: auto; inset-inline-start: 0; }
.waffle-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; width: 340px; max-width: 84vw;
}
.waffle-grid a {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 64px; padding: 0.4rem; border-radius: 8px; font-size: 0.78rem;
    color: var(--text); text-decoration: none; background: var(--bg);
}
.waffle-grid a:hover { background: var(--code-bg); color: var(--blue-dark); }
.lang-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.1rem 0.5rem; width: 380px; max-width: 92vw; }
.lang-list a {
    padding: 0.3rem 0.5rem; border-radius: 6px; color: var(--text);
    text-decoration: none; font-size: 0.88rem; white-space: normal; overflow-wrap: anywhere;
}
.lang-list a:hover { background: var(--bg); }
.lang-list a.active { font-weight: 700; color: var(--blue-dark); }

.free-badge {
    display: inline-block; background: #f39200; color: #fff; font-weight: 800;
    letter-spacing: 0.08em; padding: 0.3rem 0.9rem; border-radius: 999px; font-size: 0.95rem;
}
.free-badge.small { font-size: 0.7rem; padding: 0.15rem 0.6rem; }

.longread { max-width: 780px; }
.longread h1 { font-size: 1.7rem; color: var(--blue-dark); }
.longread h2 { font-size: 1.2rem; margin-top: 1.75rem; }
.longread h3 { font-size: 1rem; color: var(--blue-dark); margin: 1.25rem 0 0.4rem; }

body.marketing main:has(.login-box.standalone) { display: flex; }
.login-box.standalone { margin: auto; width: 100%; }

/* -- Marketing footer -------------------------------------------------------- */

.mkt-footer { background: var(--nav-bg); color: #cddcec; margin-top: 2rem; }
.mkt-footer a { color: #e8f1fa; }
.mkt-footer code { background: rgba(255, 255, 255, 0.12); padding: 0.05rem 0.35rem; border-radius: 4px; }
.mkt-footer-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem;
    max-width: 1200px; margin: 0 auto; padding: 2rem;
}
.mkt-footer-grid h4 { margin: 0 0 0.6rem; color: #ffffff; font-size: 0.95rem; }
.mkt-footer-grid p { margin: 0.3rem 0; font-size: 0.85rem; }
.footer-icon { height: 42px; }
.mkt-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.8rem 2rem; font-size: 0.8rem; text-align: center;
}

@media (max-width: 760px) {
    .mkt-header { flex-wrap: wrap; gap: 0.5rem 0.9rem; padding: 0.5rem 1rem; }
    .mkt-logo { height: 36px; }
    .mkt-nav { order: 3; width: 100%; gap: 0.9rem; overflow-x: auto; }
    .menu-panel { position: fixed; inset-inline: 0.75rem; top: 4.2rem; width: auto; }
    .waffle-grid, .lang-list { width: auto; }
}

/* Icons in the nine-dot menu tiles. */

.waffle-grid a { flex-direction: column; gap: 0.3rem; }
.tile-icon { color: var(--blue); flex-shrink: 0; }
.waffle-grid a:hover .tile-icon { color: var(--blue-dark); }

/* Hero subtitle under the brand name. */

.subtitle { font-size: 1.25rem; color: #f39200; font-weight: 600; margin: 0 0 0.75rem; }


/* Environment badge in the top bar (hidden on Production). */

.env-badge {
    background: #f39200; color: #fff; font-weight: 700; font-size: 0.72rem;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.2rem 0.65rem; border-radius: 999px; align-self: center;
}


/* Quiet administrator sign-in link (deliberately unobtrusive). */

/* The admin sign-in is deliberately discreet on the public site: it stays
   invisible (but still occupies its spot, so the corner remains hoverable and
   the layout does not shift) until the visitor hovers, focuses or activates
   it. Keyboard focus reveals it too, so it is not an accessibility trap. */

.signin-link
{
    color: var(--muted);
    text-decoration: none;
    font-size: 0.85rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.signin-link:hover,
.signin-link:focus,
.signin-link:focus-visible,
.signin-link:active
{
    opacity: 1;
    color: var(--blue-dark);
    text-decoration: underline;
}


/* Category chip with icon on the explorer tiles. */

.tile-category { display: flex; align-items: center; gap: 0.35rem; }
.tile-category .tile-icon { width: 14px; height: 14px; }

/* Connector onboarding step illustrations. */

.connector-steps { margin-top: 2rem; }
.connector-steps h2 { color: var(--blue-dark); }
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.steps-grid figure { margin: 0; }
.steps-grid img {
    width: 100%; border: 1px solid var(--border); border-radius: 8px;
    background: var(--panel); box-shadow: 0 2px 12px var(--shadow);
}
.steps-grid figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.4rem; }
.step-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; background: var(--blue);
    color: #fff; font-size: 0.75rem; font-weight: 700; margin-right: 0.35rem;
}

/* -- Onboarding two-column with sticky table of contents ------------------- */

.onboarding-layout { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 2rem; }
.onboarding-layout .onboarding { max-width: 780px; }
.onboarding section { scroll-margin-top: 5rem; margin-bottom: 1.75rem; }
.onboarding section h2 { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.recommended {
    font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em;
    background: #f39200; color: #fff; padding: 0.15rem 0.5rem; border-radius: 999px; vertical-align: middle;
}
.onboarding-toc { font-size: 0.9rem; }
.toc-sticky { position: sticky; top: 5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.toc-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.25rem; }
.onboarding-toc a { color: var(--text); text-decoration: none; border-left: 2px solid var(--border); padding-left: 0.6rem; }
.onboarding-toc a:hover { color: var(--blue); border-left-color: var(--blue); }

@media (max-width: 860px) {
    .onboarding-layout { grid-template-columns: 1fr; }
    .onboarding-toc { order: -1; }
    .toc-sticky { position: static; flex-flow: row wrap; }
    .onboarding-toc a { border-left: none; border-bottom: 2px solid var(--border); padding: 0.1rem 0.4rem; }
}

/* -- Feedback thumbs up/down ------------------------------------------------- */

.feedback {
    display: flex; align-items: center; gap: 0.6rem; margin: 2.5rem 0 0.5rem;
    padding-top: 1.25rem; border-top: 1px solid var(--border);
}
.feedback-q { font-size: 0.9rem; color: var(--muted); }
.feedback-btn {
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    font-size: 1.1rem; line-height: 1; padding: 0.35rem 0.6rem; cursor: pointer;
}
.feedback-btn:hover { border-color: var(--blue); }
.feedback-btn:disabled { opacity: 0.5; cursor: default; }
.feedback-thanks { font-size: 0.9rem; color: #2e9e5b; }

/* Two-up "see it in action" grid on the home page. */

.screenshot-grid.two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }


/* Health indicator lamp in the top bar. */

.health-lamp { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--muted); text-decoration: none; }
.health-lamp .lamp {
    width: 10px; height: 10px; border-radius: 50%; background: #9aa4af;
    box-shadow: 0 0 0 0 rgba(46,158,91,0.5);
}
.health-lamp.ok .lamp { background: #2e9e5b; animation: lamp-pulse 2.4s infinite; }
.health-lamp.down .lamp { background: #b42318; }
@keyframes lamp-pulse { 0%{box-shadow:0 0 0 0 rgba(46,158,91,0.45)} 70%{box-shadow:0 0 0 6px rgba(46,158,91,0)} 100%{box-shadow:0 0 0 0 rgba(46,158,91,0)} }

/* -- Right rail: table of contents + feedback on every marketing page ------ */

.mkt-main-wrap { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.mkt-main-wrap > main { padding-left: 0; padding-right: 0; max-width: none; margin: 0; }
.page-rail { font-size: 0.9rem; }
.page-rail .rail-sticky { position: sticky; top: 5rem; display: flex; flex-direction: column; gap: 0.9rem; }
.page-rail .toc { display: flex; flex-direction: column; gap: 0.4rem; }
.page-rail .toc a { color: var(--text); text-decoration: none; border-left: 2px solid var(--border); padding-left: 0.6rem; }
.page-rail .toc a:hover { color: var(--blue); border-left-color: var(--blue); }
.page-rail .feedback { flex-direction: column; align-items: flex-end; text-align: right; border-top: 1px solid var(--border); margin: 0; padding-top: 1rem; }
.page-rail .feedback-buttons { display: flex; gap: 0.5rem; }

/* Styled thumbs icons (documentation.invantive.com style). */
.feedback-btn { display: inline-flex; padding: 0.4rem; color: var(--muted); background: var(--panel); }
.feedback-btn svg { width: 20px; height: 20px; }
.feedback-btn[data-rating="up"]:hover { border-color: #2e9e5b; color: #2e9e5b; }
.feedback-btn[data-rating="down"]:hover { border-color: #b42318; color: #b42318; }

/* Feedback modal with the Zoho form iframe. */
.feedback-modal { position: fixed; inset: 0; background: rgba(11,26,43,0.45); display: none; align-items: center; justify-content: center; z-index: 100; }
.feedback-modal.open { display: flex; }
.feedback-dialog { background: var(--panel); border-radius: 12px; width: min(480px, 92vw); max-height: 88vh; overflow: hidden; position: relative; box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
.feedback-dialog iframe { width: 100%; height: 520px; border: 0; display: block; }
.feedback-close { position: absolute; top: 8px; inset-inline-end: 10px; background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--muted); }

@media (max-width: 860px) {
    /* One column with comfortable side gutters; the rail drops BELOW the
       article (no more floating tabs above the heading). The h2 table of
       contents is hidden on mobile — the article is right there — leaving just
       the feedback widget, left-aligned and full width. */
    .mkt-main-wrap { grid-template-columns: 1fr; gap: 1.25rem; padding: 0 1.15rem; }
    .page-rail { order: 0; }
    .page-rail .rail-sticky { position: static; }
    .page-rail .toc { display: none; }
    .page-rail .feedback { align-items: flex-start; text-align: left; }
}