/* The whole site's styles, in 1 file with no build step: the content security policy allows no inline styles.

   Every colour is a token on :root with a light and a dark value. Dark follows the computer's appearance
   (prefers-color-scheme), or the header's switch, which sets data-theme on the page. There is 1 accent, the app's own
   blue, for fills, links and the marks that say where you are. A page opens on a navy hero with a soft glow and ends on
   a navy closing panel, the same in both appearances, and the logo's cyan-to-blue gradient is kept for the hero's
   highlighted word. Type is the computer's own (Segoe UI on Windows), so there is no font to download, on a scale of 8
   steps.

   In order: tokens, base, header, buttons and links, the public pages' base, pictures of the app, the home page (hero,
   services, chapters, the report band, the extras, how it works, the closing card), Features, a feature's own page,
   Resources and the guides, Contact, the report viewer, Privacy, the account and plain pages, the footer, narrower
   windows, motion, print, and last the user guide (/Docs), which keeps its own block. */

:root {
    color-scheme: light;

    /* Ground, surfaces and text */
    --bg: #ffffff;
    --bg-soft: #f1f5fa;
    --surface: #ffffff;
    --border: #d9e2ee;
    --border-strong: #b1c1d4;
    --divider: #e5ebf3;
    --text: #142237;
    --text-muted: #4d6078;
    --header-bg: #ffffff;

    /* The accent: the app's own primary blue, darker on hover and press, with white on it */
    --accent: #1459f0;
    --accent-hover: #124ed3;
    --accent-pressed: #0f43b4;
    --accent-text: #1951b8;
    --accent-soft: #e7f0ff;
    --accent-line: #8eaee0;
    --on-accent: #ffffff;

    /* The marks that once took the logo's gradient (numbers, dots, short lines) are the accent, solid */
    --brand-from: var(--accent);
    --brand-to: var(--accent);
    --display-from: var(--accent-text);
    --display-to: var(--accent-text);
    /* The 2 soft glows on the navy hero and closing panel */
    --glow-1: rgb(29 126 157 / .2);
    --glow-2: rgb(64 91 190 / .2);

    /* Status, for the account pages' message bars and tags */
    --success: #107c10;
    --success-soft: #ecf5ec;
    --warning: #c46e00;
    --warning-soft: #f9f0e6;
    /* Warning as text: the warning colour itself is only 3.8:1 on white */
    --warning-text: #8a4600;
    --danger: #c42b1c;
    --danger-soft: #fbf0ef;
    --banner-info-border: #a1b8ee;
    --banner-success-border: #9fcb9f;
    --banner-warning-border: #e6c296;
    --banner-danger-border: #e8aba5;

    /* The account navigation, in the desktop app's frame colours */
    --nav: #dce3eb;
    --nav-text: #141b24;
    --nav-muted: #4f5a67;
    --nav-hover: #d0d8e2;
    --nav-selected: #c3ceda;

    /* Pictures of the app sit in a window frame: a title bar on a mat, a hairline round the picture */
    --frame: #ffffff;
    --frame-border: #d6dfe9;
    --frame-inner: #e3e9f0;
    --window-bar: #f3f6fb;
    --window-dot: #c9d3df;

    /* Depth: none. Edges come from the borders, so a card sits flat on the page in both appearances */
    --shadow-sm: none;
    --shadow: none;
    --shadow-lift: none;
    --shadow-xl: none;

    /* The navy grounds (the hero, the closing panel and a guide's header), the same in both appearances, and the older
       report band and closing card (.band and .closing, which no page uses now) */
    --hero-start: #10283f;
    --hero-end: #081827;
    --hero-glow: rgb(20 89 240 / .22);
    --hero-text: #ffffff;
    --hero-muted: #c3d5e7;
    --hero-faint: #b3c9e0;
    --hero-line: #536f89;
    --hero-hover: #1a3953;
    --hero-stage: #132c43;
    --hero-screen: #061320;
    --hero-title-from: #89e2ff;
    --hero-title-to: #89e2ff;
    --hero-eyebrow: #89e2ff;
    --hero-caption: #c3d5e7;
    --hero-dot: #69809a;
    --hero-link: #d5e9ff;
    /* The words in the logo's gradient on navy ("Simplified", and the closing panel's name): its royal end lifted at the
       same hue, so every point reads on the navy and its glow */
    --hero-highlight-from: #01caff;
    --hero-highlight-to: #7aa2ff;

    /* PowerShell in the guides */
    --code-comment: #5b6b7d;
    --code-string: #0b6b43;
    --code-variable: #0a6480;
    --code-command: #174cc5;
    --code-parameter: #6a3fb5;
    --code-keyword: #a81d5d;
    --code-number: #8f4a00;
    --code-operator: #4a5a6c;
    --code-type: #00657a;

    /* Type */
    --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
    --font-icons: "Segoe Fluent Icons", "Segoe MDL2 Assets";
    --step-xs: .75rem;
    --step-sm: .875rem;
    --step-base: 1rem;
    --step-md: 1.125rem;
    --step-lg: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
    --step-xl: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);
    --step-2xl: clamp(2.25rem, 1.4rem + 3.2vw, 4rem);
    --step-3xl: clamp(2.75rem, 1.6rem + 4vw, 4.25rem);

    /* Space and shape */
    --wrap: 1240px;
    --gutter: clamp(20px, 4vw, 40px);
    --section: clamp(72px, 40px + 6vw, 120px);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --ease: cubic-bezier(.2, .8, .2, 1);

    /* The older names, which the user guide's block at the end of this file still uses */
    --marketing-surface: var(--surface);
    --marketing-soft: var(--bg-soft);
    --marketing-text: var(--text);
    --marketing-muted: var(--text-muted);
    --marketing-border: var(--border);
    --marketing-blue: var(--accent);
    --marketing-blue-text: var(--accent-text);
    --marketing-blue-soft: var(--accent-soft);
    --marketing-panel-shadow: var(--shadow-sm);
    --marketing-section-space: var(--section);
}

/* Dark, twice over: once for the computer's appearance (unless the switch chose light), once for the switch. On screen
   only, so print keeps the light values above. */
@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0b1320;
        --bg-soft: #101d2d;
        --surface: #17273b;
        --border: #2c405a;
        --border-strong: #4e6b8c;
        --divider: #20324a;
        --text: #eff5fc;
        --text-muted: #b1c2d6;
        --header-bg: #0b1320;
        --accent-text: #9fc6ff;
        --accent-soft: #1c3351;
        --accent-line: #527ba9;
        --hero-start: #0d2034;
        --hero-end: #06111f;
        --success: #5ebe54;
        --success-soft: #1e3129;
        --warning: #e8aa48;
        --warning-soft: #312e27;
        --warning-text: #e8aa48;
        --danger: #f06464;
        --danger-soft: #32242b;
        --banner-info-border: #425686;
        --banner-success-border: #346238;
        --banner-warning-border: #715933;
        --banner-danger-border: #743a3f;
        --nav: #060a10;
        --nav-text: #e4e9ef;
        --nav-muted: #8591a0;
        --nav-hover: #0e141c;
        --nav-selected: #161e2a;
        --frame: #182a3d;
        --frame-border: rgb(255 255 255 / .16);
        --frame-inner: rgb(255 255 255 / .12);
        --window-bar: #1b2f44;
        --window-dot: rgb(255 255 255 / .22);
        --code-comment: #8b9cb0;
        --code-string: #7ad6a6;
        --code-variable: #74cdea;
        --code-command: #96b6ff;
        --code-parameter: #c8adf7;
        --code-keyword: #f291bf;
        --code-number: #f2b877;
        --code-operator: #b7c4d2;
        --code-type: #74cdea;
    }
}

@media screen {
    :root[data-theme="dark"] {
        color-scheme: dark;
        --bg: #0b1320;
        --bg-soft: #101d2d;
        --surface: #17273b;
        --border: #2c405a;
        --border-strong: #4e6b8c;
        --divider: #20324a;
        --text: #eff5fc;
        --text-muted: #b1c2d6;
        --header-bg: #0b1320;
        --accent-text: #9fc6ff;
        --accent-soft: #1c3351;
        --accent-line: #527ba9;
        --hero-start: #0d2034;
        --hero-end: #06111f;
        --success: #5ebe54;
        --success-soft: #1e3129;
        --warning: #e8aa48;
        --warning-soft: #312e27;
        --warning-text: #e8aa48;
        --danger: #f06464;
        --danger-soft: #32242b;
        --banner-info-border: #425686;
        --banner-success-border: #346238;
        --banner-warning-border: #715933;
        --banner-danger-border: #743a3f;
        --nav: #060a10;
        --nav-text: #e4e9ef;
        --nav-muted: #8591a0;
        --nav-hover: #0e141c;
        --nav-selected: #161e2a;
        --frame: #182a3d;
        --frame-border: rgb(255 255 255 / .16);
        --frame-inner: rgb(255 255 255 / .12);
        --window-bar: #1b2f44;
        --window-dot: rgb(255 255 255 / .22);
        --code-comment: #8b9cb0;
        --code-string: #7ad6a6;
        --code-variable: #74cdea;
        --code-command: #96b6ff;
        --code-parameter: #c8adf7;
        --code-keyword: #f291bf;
        --code-number: #f2b877;
        --code-operator: #b7c4d2;
        --code-type: #74cdea;
    }
}

/* The logo's A turns light on a dark page */
@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #mark-a stop:first-child { stop-color: #d6e2f0; }
    :root:not([data-theme="light"]) #mark-a stop:last-child { stop-color: #ffffff; }
}
@media screen {
    :root[data-theme="dark"] #mark-a stop:first-child { stop-color: #d6e2f0; }
    :root[data-theme="dark"] #mark-a stop:last-child { stop-color: #ffffff; }
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }

html {
    font-family: var(--font-body);
    font-size: 100%;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    scroll-padding-top: 5.5rem;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 650; line-height: 1.2; letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding-left: 1.25rem; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .2em; }
img { max-width: 100%; height: auto; }
svg { display: block; }
button { font: inherit; }
code, .mono { font-family: var(--font-mono); font-size: .9375em; }
.muted { color: var(--text-muted); }
.small { font-size: var(--step-sm); }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 60; padding: .5rem 1rem; background: var(--surface); color: var(--accent-text); }
.skip-link:focus { left: .5rem; }
.symbol-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* The account pages' icons: Segoe Fluent Icons glyphs, shown only where the font is (head.js adds the class); the words
   carry the meaning */
.icon { display: none; font-family: var(--font-icons); font-style: normal; font-weight: 400; line-height: 1; flex: none; }
html.icons .icon { display: inline-block; }

/* Header: the name, the site's sections as pills, the appearance switch and the account, sticky under a frosted band */

.site-header { position: sticky; top: 0; z-index: 20; background: var(--header-bg); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); box-shadow: 0 1px 0 var(--border); }
.site-nav { display: flex; align-items: center; gap: 2rem; min-height: 4.5rem; }
.brand { display: inline-flex; align-items: center; gap: .625rem; color: var(--text); font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -.03em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 36px; height: 28px; }
.links { display: flex; gap: .25rem; font-size: var(--step-sm); }
.links a { padding: .5rem .875rem; border-radius: 999px; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.links a:hover { background: var(--bg-soft); color: var(--text); text-decoration: none; }
.links a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
/* The form is a flex row too, so Sign out's box is its own line, not a taller one struck by the body's font size, and its
   baseline sits level with Your account's */
.nav-right form { display: flex; align-items: center; margin: 0; }
.band-name { overflow: hidden; max-width: 14rem; text-overflow: ellipsis; white-space: nowrap; font-size: var(--step-sm); color: var(--text-muted); }
.signin, .site-signout { font-size: var(--step-sm); font-weight: 600; color: var(--text); white-space: nowrap; }
.site-signout { padding: 0; border: 0; background: transparent; cursor: pointer; }
.signin:hover, .site-signout:hover { color: var(--accent-text); text-decoration: none; }
.signin[aria-current="page"] { color: var(--accent-text); }
.theme-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); cursor: pointer; }
.theme-button:hover { color: var(--text); border-color: var(--border-strong); }
.theme-button svg { width: 18px; height: 18px; }

/* Buttons: 1 shape everywhere, a pill. Primary on the accent, secondary on the surface, and secondary on a dark band
   in the band's own colours */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    min-height: 3rem;
    padding: .625rem 1.5rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

.button:hover { background: var(--bg-soft); text-decoration: none; }
.button:active { background: var(--divider); }
.button svg { width: 1.0625rem; height: 1.0625rem; flex: none; }
.button.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.button.primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.button.primary:active { border-color: var(--accent-pressed); background: var(--accent-pressed); }
.button:disabled { opacity: .6; cursor: not-allowed; }
.button.small { min-height: 2.375rem; padding: .375rem 1rem; font-size: var(--step-sm); }
.button.large { min-height: 3.375rem; padding: .75rem 1.75rem; font-size: 1.0625rem; }
.band .button.secondary, .closing .button.secondary { border-color: var(--hero-line); background: rgb(255 255 255 / .05); color: var(--hero-text); }
.band .button.secondary:hover, .closing .button.secondary:hover { background: var(--hero-hover); }
.band :focus-visible, .closing :focus-visible { outline-color: var(--hero-title-from); }
/* On the public pages and in the footer a button has soft corners rather than a pill; the account's panes keep theirs */
.marketing-page .button, .site-footer .button { border-radius: 10px; }

/* Links that lead on: the accent, semibold, with an arrow that steps right under the pointer */
.text-link, .highlight-more, .resource-card-bottom a, .product-shot figcaption a, .report-page figcaption a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--accent-text);
    font-size: var(--step-sm);
    font-weight: 600;
}
.text-link svg, .highlight-more svg, .resource-card-bottom svg, .product-shot figcaption svg, .report-page figcaption svg { width: 1rem; height: 1rem; flex: none; }
.text-link:hover, .resource-card-bottom a:hover, .product-shot figcaption a:hover, .report-page figcaption a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* The public pages: the page's ground, muted paragraphs, headings on the scale */

/* The defaults weigh nothing (:where), so any class that gives a link or a paragraph a colour wins */
.marketing-page { background: var(--bg); color: var(--text); }
:where(.marketing-page) a { color: inherit; }
:where(.marketing-page) a:hover { text-decoration: none; }
:where(.marketing-page) p { color: var(--text-muted); }
/* No line of 1 short word at the end of a paragraph, such as "in." after "sign-" */
:where(.marketing-page) :is(p, li, strong) { text-wrap: pretty; }
.marketing-page h1 { font-size: var(--step-2xl); line-height: 1.04; letter-spacing: -.04em; }
.marketing-page h2 { font-size: var(--step-xl); line-height: 1.08; letter-spacing: -.035em; }
.marketing-page h3 { font-size: var(--step-lg); letter-spacing: -.02em; }
.marketing-page h4 { margin: 0; }
.marketing-page img { display: block; max-width: 100%; height: auto; }
.marketing-page .eyebrow { display: flex; align-items: center; gap: .625rem; margin-bottom: 1.125rem; color: var(--accent-text); font-size: var(--step-xs); font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.marketing-page .eyebrow::before { content: ""; flex: none; width: 1.5rem; height: 2px; border-radius: 2px; background: var(--accent-text); }
.marketing-page .centred .eyebrow, .marketing-page .eyebrow.centred { justify-content: center; }
.marketing-page .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 2rem; }
.marketing-page .demo-note { color: var(--text-muted); font-size: var(--step-sm); }
.marketing-page .demo-note { margin: 1.25rem auto 0; text-align: center; }
.site.landing.marketing-page { flex: 1; width: 100%; max-width: none; display: block; padding: 0; }
.marketing-page .section { padding: var(--section) 0; }
.marketing-page .soft-section { background: var(--bg-soft); }
.marketing-page .section-header { max-width: 46rem; margin-bottom: 3rem; }
.marketing-page .section-header p:not(.eyebrow) { margin-top: 1.125rem; font-size: var(--step-md); line-height: 1.6; }
.marketing-page .lead { font-size: var(--step-md); line-height: 1.65; }

/* Ticks: a list with the accent's check marks */
.marketing-page .ticks { display: grid; gap: .875rem; margin: 1.75rem 0 0; padding: 0; list-style: none; color: var(--text); font-size: .9375rem; line-height: 1.55; }
.marketing-page .ticks li { display: flex; align-items: flex-start; gap: .75rem; }
.marketing-page .ticks svg { width: 1.25rem; height: 1.25rem; margin-top: .0625rem; padding: .1875rem; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.marketing-page .ticks b { font-weight: 600; }

/* Pictures of the app, 2 ways. A window: a title bar with 3 dots and the page's name, the picture under it, on a long
   soft shadow. A product shot (the guides and the feature pages): the same mat and hairline everywhere, with a caption
   and a full-size link. In dark the mat is lighter than the page, so a dark picture keeps its edge. */

.window { min-width: 0; overflow: hidden; border: 1px solid var(--frame-border); border-radius: 14px; background: var(--frame); box-shadow: var(--shadow-xl); }
.window-bar { display: flex; align-items: center; gap: .4375rem; padding: .625rem .875rem; border-bottom: 1px solid var(--frame-inner); background: var(--window-bar); color: var(--text-muted); font-size: var(--step-xs); line-height: 1; }
.window-bar span { width: .625rem; height: .625rem; border-radius: 50%; background: var(--window-dot); }
.window-bar b { margin-left: .5rem; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.window picture, .window img { display: block; width: 100%; height: auto; }

.product-shot, .marketing-page .visual, .marketing-page .theme-showcase, .marketing-page .report-viewer {
    min-width: 0;
    background: var(--frame);
    border: 1px solid var(--frame-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.product-shot { margin: 0; padding: .5rem .5rem 0; overflow: hidden; }
.product-shot picture, .marketing-page .visual picture, .marketing-page .theme-showcase img {
    display: block;
    overflow: hidden;
    border: 1px solid var(--frame-inner);
    border-radius: var(--radius-sm);
}
.product-shot img, .marketing-page .visual img { display: block; width: 100%; height: auto; }
.product-shot figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1.5rem; padding: .875rem .625rem; color: var(--text-muted); font-size: var(--step-sm); line-height: 1.5; }
.product-shot figcaption a { flex: none; }
.marketing-page .visual { padding: .5rem; }
.marketing-page .visual > a { display: block; }

/* Home: the hero, light, with the headline at the left and the app's window running off the right edge, 3 notes
   pinned on it, under a soft glow in the logo's colours */

.marketing-page .hero { position: relative; overflow: hidden; padding: clamp(40px, 3vw + 24px, 80px) 0 clamp(48px, 5vw, 88px); }
.marketing-page .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60rem 34rem at 8% -12%, var(--glow-1), transparent 62%), radial-gradient(54rem 30rem at 100% 8%, var(--glow-2), transparent 60%); }
.marketing-page .hero .wrap { position: relative; z-index: 1; }
.marketing-page .hero-grid { display: grid; grid-template-columns: minmax(0, 12fr) minmax(0, 12fr); align-items: center; gap: clamp(2rem, 4vw, 4rem); }
.marketing-page .hero-copy { max-width: 38rem; }
.marketing-page .hero h1 { font-size: var(--step-3xl); font-weight: 700; line-height: 1; letter-spacing: -.045em; }
.marketing-page .hero h1 span { display: block; padding-bottom: .08em; background: linear-gradient(90deg, var(--display-from), var(--display-to)); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
.marketing-page .hero-lead { max-width: 32rem; margin-top: 1.5rem; font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); line-height: 1.6; }
.marketing-page .hero .actions { margin-top: 2.25rem; }
.marketing-page .hero-platform { display: flex; align-items: center; gap: .5rem; margin-top: 1.25rem; font-size: var(--step-sm); }
.marketing-page .hero-platform svg { width: 1rem; height: 1rem; flex: none; color: var(--accent-text); }
.marketing-page .hero-visual { position: relative; width: calc(100% + clamp(2rem, 16vw, 22rem)); min-width: 0; }
.marketing-page .hero-notes { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.marketing-page .hero-notes li { position: absolute; display: inline-flex; align-items: center; gap: .5rem; max-width: 18rem; padding: .5rem .875rem .5rem .75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-lift); color: var(--text); font-size: var(--step-sm); font-weight: 600; line-height: 1.3; white-space: nowrap; }
.marketing-page .hero-notes li::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: linear-gradient(135deg, var(--brand-from), var(--brand-to)); box-shadow: 0 0 0 3px var(--accent-soft); }
.marketing-page .hero-notes .at-bar { top: 22%; left: 3%; }
.marketing-page .hero-notes .at-run { top: 5%; left: 54%; }
.marketing-page .hero-notes .at-output { bottom: 7%; left: 56%; }

/* The 7 services, in a row under the hero */
.marketing-page .proof { padding: 1.75rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.marketing-page .proof-inner { display: flex; align-items: center; gap: 1.5rem 3rem; }
.marketing-page .proof-inner > p { flex: none; max-width: 14rem; font-size: var(--step-sm); line-height: 1.5; }
.marketing-page .proof-row { display: flex; flex: 1; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.marketing-page .proof-row li { display: flex; align-items: center; gap: .5rem; color: var(--text); font-size: .9375rem; font-weight: 600; white-space: nowrap; }
.marketing-page .proof-row svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--accent-text); }

/* The story, in chapters: a number and a word, a heading, a lead, 3 ticks, and the window beside them */
.marketing-page .chapter { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2.5rem, 6vw, 6rem); padding: var(--section) 0; }
.marketing-page .chapter.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.marketing-page .chapter.flip .chapter-visual { order: -1; }
.marketing-page .chapter + .chapter { border-top: 1px solid var(--border); }
.marketing-page .chapter.stack + .helpdesk { margin-top: -1.5rem; }
.marketing-page .chapter-copy { min-width: 0; }
.marketing-page .chapter-label { display: flex; align-items: baseline; gap: .875rem; margin-bottom: 1.5rem; }
.marketing-page .chapter-label b { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--display-from), var(--display-to)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marketing-page .chapter-label span { color: var(--accent-text); font-size: var(--step-xs); font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.marketing-page .chapter h2 { font-size: var(--step-2xl); }
.marketing-page .chapter-copy .lead { margin-top: 1.25rem; }
.marketing-page .chapter.tight { padding-bottom: 2.5rem; }
.marketing-page .chapter-copy .text-link { margin-top: 1.75rem; }
.marketing-page .chapter-visual { min-width: 0; }

/* The helpdesk, a row of 4 under the Change chapter */
.marketing-page .helpdesk { padding-bottom: var(--section); }
.marketing-page .helpdesk .eyebrow { margin-bottom: 1.25rem; }
.marketing-page .helpdesk-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.marketing-page .helpdesk-row > div { padding: 1.375rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.marketing-page .helpdesk h3 { font-family: var(--font-body); font-size: var(--step-base); font-weight: 650; letter-spacing: 0; }
.marketing-page .helpdesk p { margin-top: .5rem; font-size: var(--step-sm); line-height: 1.6; }

/* The report band: dark in both appearances, the example report's pages across it, the template builder under them */
.marketing-page .band { position: relative; isolation: isolate; overflow: hidden; padding: var(--section) 0; color: var(--hero-text); background: radial-gradient(50rem 26rem at 90% 0, var(--hero-glow), transparent 62%), linear-gradient(160deg, var(--hero-start), var(--hero-end)); }
.marketing-page .band .eyebrow, .marketing-page .band .chapter-label span { color: var(--hero-eyebrow); }
.marketing-page .band .chapter-label b { background-image: linear-gradient(135deg, #7fd3ff, #a9c8ff); }
.marketing-page .band h2, .marketing-page .band h3 { color: var(--hero-text); }
.marketing-page .band p, .marketing-page .band .ticks { color: var(--hero-muted); }
.marketing-page .band .ticks li { color: var(--hero-text); }
.marketing-page .band .ticks svg { background: rgb(255 255 255 / .12); color: #a9c8ff; }
.marketing-page .band .text-link { color: var(--hero-title-from); }
.marketing-page .band-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 2rem 4rem; margin-bottom: 3rem; }
.marketing-page .band-head h2 { font-size: var(--step-2xl); }
.marketing-page .band-head .lead { margin-top: 1.25rem; }
.marketing-page .band-head .ticks { margin-top: 0; }
.marketing-page .spread { margin: 0; }
.marketing-page .spread picture, .marketing-page .spread img { display: block; width: 100%; height: auto; }
.marketing-page .spread img { border-radius: 6px; box-shadow: 0 30px 70px rgb(0 0 0 / .45); }
.marketing-page .spread figcaption { margin-top: 1.25rem; color: var(--hero-faint); font-size: var(--step-sm); text-align: center; }
.marketing-page .band-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(2.5rem, 6vw, 6rem); margin-top: var(--section); padding-top: var(--section); border-top: 1px solid var(--hero-line); }
.marketing-page .band .window { border-color: var(--hero-line); box-shadow: 0 30px 70px rgb(0 0 0 / .4); }

/* The extras: 4 tiles */
.marketing-page .extras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.marketing-page .extra { padding: 1.75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.marketing-page .service-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 2.75rem; height: 2.75rem; margin-bottom: 1.25rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.marketing-page .service-icon svg { width: 1.375rem; height: 1.375rem; }
.marketing-page .extra h3 { font-size: var(--step-md); }
.marketing-page .extra p { margin-top: .625rem; font-size: var(--step-sm); line-height: 1.65; }

/* How it works: 3 numbered steps in a row */
.marketing-page .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.marketing-page .step { position: relative; padding: 2rem 0 0; border-top: 2px solid var(--border); counter-increment: step; }
.marketing-page .step::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 1rem; font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--display-from), var(--display-to)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marketing-page .step h3 { font-size: var(--step-md); }
.marketing-page .step p { margin-top: .625rem; font-size: .9375rem; line-height: 1.65; }

/* The guides band near the foot of the home page */
.marketing-page .home-resources { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 2.5rem 2.5rem; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-soft); }
.marketing-page .home-resources h2 { font-size: var(--step-lg); }
.marketing-page .home-resources p:not(.eyebrow) { max-width: 40rem; margin-top: .625rem; }
.marketing-page .home-resources .button { flex: none; }

/* The closing card, on every public page: dark, rounded, centred */
.marketing-page .closing { padding: 0 0 var(--section); }
.marketing-page .closing-inner { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 2rem; padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 4rem); border-radius: var(--radius-xl); color: var(--hero-text); text-align: center; background: radial-gradient(40rem 22rem at 50% 0, var(--hero-glow), transparent 65%), linear-gradient(160deg, var(--hero-start), var(--hero-end)); box-shadow: var(--shadow-xl); }
.marketing-page .closing h2 { max-width: 30rem; margin: 0 auto; color: var(--hero-text); font-size: var(--step-2xl); }
.marketing-page .closing p { max-width: 36rem; margin: 1rem auto 0; color: var(--hero-muted); font-size: var(--step-md); }
.marketing-page .closing .actions { justify-content: center; margin: 0; }

/* The brand's geometry, faint, behind a page's introduction */
.marketing-page .features-intro, .marketing-page .resources-intro, .marketing-page .contact-section, .marketing-page .product-intro { position: relative; isolation: isolate; }
.marketing-page .features-intro::before, .marketing-page .resources-intro::before, .marketing-page .contact-section::before, .marketing-page .product-intro::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50rem 26rem at 10% -20%, var(--glow-1), transparent 62%), radial-gradient(44rem 24rem at 100% 0, var(--glow-2), transparent 60%); }

/* Features: the introduction, 4 highlights, the helpdesk, the services as tabs, and the docking comparison */

.marketing-page .features-intro { padding-top: clamp(40px, 3vw + 24px, 80px); padding-bottom: 3rem; }
.marketing-page .features-intro h1 { max-width: 44rem; font-size: var(--step-3xl); }
.marketing-page .features-intro p:not(.eyebrow) { max-width: 40rem; margin: 1.5rem 0 0; font-size: var(--step-md); }
.marketing-page .feature-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.marketing-page .highlight { position: relative; display: block; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); }
.marketing-page .highlight-image { position: relative; overflow: hidden; aspect-ratio: 16 / 9; padding: 2rem 0 0 2rem; background: linear-gradient(160deg, var(--accent-soft), var(--bg-soft)); }
.marketing-page .highlight-image picture { display: contents; }
.marketing-page .highlight-image img { width: 100%; max-width: none; height: auto; border: 1px solid var(--frame-inner); border-radius: 10px 0 0 0; box-shadow: var(--shadow-lift); }
.marketing-page .highlight-image.wide img { width: 150%; }
.marketing-page .highlight-text { padding: 1.5rem 1.75rem 1.75rem; }
.marketing-page .highlight h3 { font-size: var(--step-lg); }
.marketing-page .highlight p { margin-top: .625rem; font-size: .9375rem; line-height: 1.65; }
.marketing-page .highlight-more { margin-top: 1.125rem; }
.marketing-page .highlight-link:hover { border-color: var(--accent-line); }
.marketing-page .coverage-title { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 2rem; }
.marketing-page .coverage-title p:not(.eyebrow) { max-width: 24rem; font-size: var(--step-sm); }
.marketing-page .service-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.marketing-page .service-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .5625rem 1rem .5625rem .8125rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font-size: var(--step-sm); font-weight: 500; cursor: pointer; }
.marketing-page .service-tab img { width: 1.125rem; height: 1.125rem; flex: none; }
.marketing-page .service-tab:hover { border-color: var(--border-strong); color: var(--text); }
.marketing-page .service-tab[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.marketing-page .service-detail { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem; padding: 2.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.marketing-page .service-detail + .service-detail { margin-top: 1.5rem; }
.marketing-page .service-detail h3 { font-size: var(--step-xl); }
.marketing-page .service-detail > div > p { margin-top: 1rem; font-size: var(--step-base); }
.marketing-page .service-detail .service-icon { margin-bottom: 1.25rem; }
.marketing-page .capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 1.75rem 2rem; }
.marketing-page .capability h4 { margin-bottom: .375rem; font-family: var(--font-body); font-size: var(--step-base); font-weight: 650; letter-spacing: 0; }
.marketing-page .capability p { margin: 0; font-size: var(--step-sm); line-height: 1.65; }
.marketing-page .product-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }

/* A feature's own page: the introduction with its picture, links to its sections, then the sections */

.marketing-page .product-intro { padding-top: 2rem; padding-bottom: 2.5rem; }
.marketing-page .product-breadcrumb, .marketing-page .guide-breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; color: var(--text-muted); font-size: var(--step-xs); text-align: left; }
.marketing-page .product-breadcrumb a, .marketing-page .guide-breadcrumb a { color: var(--text-muted); }
.marketing-page .product-breadcrumb a:hover, .marketing-page .guide-breadcrumb a:hover { color: var(--accent-text); text-decoration: underline; }
.marketing-page .product-intro h1 { max-width: 48rem; font-size: var(--step-2xl); }
.marketing-page .product-lead { max-width: 40rem; margin: 1.5rem 0 0; font-size: var(--step-md); line-height: 1.65; }
.marketing-page .product-intro .product-shot { margin-top: 3rem; }
.marketing-page .product-intro .demo-note { text-align: left; margin-left: 0; }
.marketing-page .product-jumps { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .5rem; padding-bottom: 2rem; }
.marketing-page .product-jumps a { padding: .5rem 1rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-size: var(--step-sm); font-weight: 600; }
.marketing-page .product-jumps a:hover { border-color: var(--border-strong); color: var(--text); text-decoration: none; }
.marketing-page .product-section { padding: var(--section) 0; scroll-margin-top: 6rem; }
.marketing-page .product-section-heading { max-width: 46rem; margin-bottom: 2.5rem; }
.marketing-page .product-section-heading p:not(.eyebrow) { margin-top: 1.125rem; font-size: var(--step-md); line-height: 1.65; }
.marketing-page .product-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 2.25rem 0; }
.marketing-page .product-benefits article { padding: 1.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.marketing-page .product-benefits h3, .marketing-page .product-note-grid h3 { font-size: var(--step-md); }
.marketing-page .product-benefits p, .marketing-page .product-note-grid p { margin-top: .75rem; font-size: var(--step-sm); line-height: 1.7; }
.marketing-page .product-note-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 2.5rem; }
.marketing-page .product-note-grid article { padding-top: 1.25rem; border-top: 2px solid var(--border); }
.marketing-page .product-callout { display: flex; align-items: flex-start; gap: 1.25rem; margin-top: 2rem; padding: 1.5rem 1.75rem; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface); }
.marketing-page .product-callout > svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--accent-text); }
.marketing-page .product-callout h3 { font-size: var(--step-md); }
.marketing-page .product-callout p { margin-top: .625rem; font-size: .9375rem; }
.marketing-page .product-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 4rem; }
.marketing-page .product-examples p:not(.eyebrow) { margin-top: 1.25rem; }
.marketing-page .product-example-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.marketing-page .product-example-list li { padding: 1.125rem 0; border-bottom: 1px solid var(--border); font-weight: 600; }
.marketing-page .resource-card:hover { border-color: var(--accent-line); }

/* Resources: the introduction, the guides as cards, and the pages of the list */

.marketing-page .resources-intro { padding-top: clamp(40px, 3vw + 24px, 80px); padding-bottom: 3rem; }
.marketing-page .resources-intro h1 { max-width: 48rem; font-size: var(--step-3xl); }
.marketing-page .resources-intro > p:not(.eyebrow) { max-width: 40rem; margin: 1.5rem 0 0; font-size: var(--step-md); }
.marketing-page .resource-topics { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.75rem; }
.marketing-page .resource-topics span, .marketing-page .resource-label { padding: .375rem .875rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font-size: var(--step-xs); font-weight: 600; }
.marketing-page .resources-list { padding-top: clamp(40px, 3vw + 24px, 80px); padding-bottom: var(--section); }
.marketing-page .resource-list-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; margin-bottom: 1.75rem; }
.marketing-page .resource-list-heading h2 { font-size: var(--step-lg); }
/* The services as pills under the heading, the current one filled */
.marketing-page .resource-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.marketing-page .resource-filter a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.375rem; padding: .375rem .875rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font-size: var(--step-sm); font-weight: 600; white-space: nowrap; }
.marketing-page .resource-filter a:hover { border-color: var(--border-strong); color: var(--text); text-decoration: none; }
.marketing-page .resource-filter a[aria-current] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.marketing-page .resource-filter img { width: 1rem; height: 1rem; }
.marketing-page .resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
/* The whole card opens its guide: the title's link covers the card, and Read guide sits above it */
.marketing-page .resource-card { position: relative; display: flex; flex-direction: column; padding: 1.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.marketing-page .resource-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.marketing-page .resource-card-top { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.marketing-page .resource-card-top .service-icon { width: 2.25rem; height: 2.25rem; margin: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.marketing-page .resource-card-top .service-icon img { width: 1.25rem; height: 1.25rem; }
.marketing-page .resource-card-top .eyebrow { margin: 0; }
.marketing-page .resource-card-top .eyebrow::before { display: none; }
/* The title says the task, so a card has no sentence under it */
.marketing-page .resource-card h3 { margin-bottom: 1.5rem; font-size: var(--step-lg); line-height: 1.3; }
.marketing-page .resource-card:hover h3 { color: var(--accent-text); }
.marketing-page .resource-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: auto; padding-top: 1.125rem; border-top: 1px solid var(--border); }
.marketing-page .resource-card time { color: var(--text-muted); font-size: var(--step-xs); }
.marketing-page .resource-card-bottom a { position: relative; z-index: 1; }
.marketing-page .pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; margin-top: 2.75rem; }
.marketing-page .pager a, .marketing-page .pager span { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 2.5rem; height: 2.5rem; padding: 0 .875rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font-size: var(--step-sm); font-weight: 600; }
.marketing-page .pager a:hover { background: var(--bg-soft); color: var(--text); }
.marketing-page .pager [aria-current] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.marketing-page .pager svg { width: 1rem; height: 1rem; }
.marketing-page .pager [rel="prev"] svg { transform: scaleX(-1); }
.marketing-page .pager .pager-status { display: none; min-width: 0; padding: 0 .5rem; border: 0; background: none; color: var(--text); }
@media (max-width: 600px) {
    .marketing-page .pager { flex-wrap: nowrap; }
    .marketing-page .pager .pager-page { display: none; }
    .marketing-page .pager .pager-status { display: inline-flex; }
}

/* A guide: its header, the contents down the left, the article at a reading width, then related guides */

.marketing-page .guide-header { margin-bottom: 3rem; padding: clamp(40px, 5vw, 72px) var(--gutter); border-radius: 0 0 24px 24px; background: radial-gradient(ellipse at 90% 0, var(--glow-2), transparent 65%), var(--hero-end); }
.marketing-page .guide-header h1 { max-width: 60rem; }
.marketing-page .guide-summary { max-width: 50rem; margin-top: 1.375rem; font-size: var(--step-md); line-height: 1.7; }
.marketing-page .guide-meta { display: flex; flex-wrap: wrap; gap: .375rem 1.375rem; margin-top: 1.125rem; font-size: var(--step-sm); }
.marketing-page .guide-layout { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); }
.marketing-page .guide-contents { padding-right: 2rem; }
.marketing-page .guide-contents nav { position: sticky; top: 6.75rem; padding-top: .375rem; }
.marketing-page .guide-contents p { margin-bottom: .875rem; color: var(--text); font-size: var(--step-xs); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.marketing-page .guide-contents a { display: block; padding: .5rem 0 .5rem .75rem; border-left: 2px solid var(--border); color: var(--text-muted); font-size: var(--step-sm); line-height: 1.4; }
.marketing-page .guide-contents a:hover { color: var(--text); }
.marketing-page .guide-contents a[aria-current] { border-left-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.marketing-page .guide-body { min-width: 0; padding: 0 max(2.25rem, calc((100% - 48rem) / 2)); border-left: 1px solid var(--border); font-size: var(--step-base); line-height: 1.8; overflow-wrap: break-word; }
.marketing-page .guide-body p { margin: 1rem 0; color: var(--text); }
.marketing-page .guide-body .guide-answer { margin-top: 0; font-size: var(--step-md); line-height: 1.75; }
.marketing-page .guide-body section { margin-top: 3rem; scroll-margin-top: 7.5rem; }
.marketing-page .guide-body h2 { margin-bottom: 1.25rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); line-height: 1.25; }
.marketing-page .guide-body h3 { margin-top: 1.75rem; font-size: var(--step-lg); line-height: 1.35; }
.marketing-page .guide-body a:not(.button) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.marketing-page .guide-body ol, .marketing-page .guide-body ul { padding-left: 1.5rem; }
.marketing-page .guide-body li { margin: .75rem 0; padding-left: .25rem; }
.marketing-page .guide-body .method-label { margin-bottom: .625rem; color: var(--accent-text); font-size: var(--step-xs); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.marketing-page .guide-body code { font-size: .88em; overflow-wrap: anywhere; }
.marketing-page .guide-table { max-width: 100%; margin: 1.75rem 0; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.marketing-page .guide-table table { width: 100%; border-collapse: collapse; font-size: var(--step-sm); line-height: 1.65; }
.marketing-page .guide-table caption { padding: 1rem 1.25rem; color: var(--text); font-weight: 600; text-align: left; }
.marketing-page .guide-table th, .marketing-page .guide-table td { padding: .8125rem 1.25rem; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.marketing-page .guide-table thead { background: var(--bg-soft); }
.marketing-page .guide-table tbody th { width: 8.125rem; white-space: nowrap; }
.marketing-page .guide-code { margin: 1.5rem 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.marketing-page .code-toolbar { display: flex; justify-content: space-between; align-items: center; padding: .625rem 1rem; background: var(--bg-soft); color: var(--text-muted); font-size: var(--step-xs); }
.marketing-page .code-toolbar button { padding: .25rem .625rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: var(--step-xs); cursor: pointer; }
.marketing-page .code-toolbar button:hover { border-color: var(--border-strong); }
/* 12px, so a script's longest line (100 characters, which the tests hold) fits the text's width on a desktop */
.marketing-page .guide-code pre { max-width: 100%; margin: 0; padding: 1.25rem; overflow-x: auto; font-size: .75rem; line-height: 1.8; tab-size: 4; }
.marketing-page .guide-code pre code { font-size: inherit; overflow-wrap: normal; }
.marketing-page .guide-code .code-comment { color: var(--code-comment); font-style: italic; }
.marketing-page .guide-code .code-string { color: var(--code-string); }
.marketing-page .guide-code .code-variable { color: var(--code-variable); }
.marketing-page .guide-code .code-command { color: var(--code-command); font-weight: 600; }
.marketing-page .guide-code .code-parameter { color: var(--code-parameter); }
.marketing-page .guide-code .code-keyword { color: var(--code-keyword); font-weight: 600; }
.marketing-page .guide-code .code-number { color: var(--code-number); }
.marketing-page .guide-code .code-operator { color: var(--code-operator); }
.marketing-page .guide-code .code-type { color: var(--code-type); }
.marketing-page .code-status { display: block; padding: 0 1rem; color: var(--text-muted); font-size: var(--step-xs); }
.marketing-page .code-status:not(:empty) { padding-bottom: .625rem; }

/* The recommended way: a light card on the accent's soft ground with an accent hairline, the steps numbered in solid
   accent circles, as the home page's steps are */
.marketing-page .guide-recommended { padding: 2.25rem; border: 1px solid var(--accent-line); border-radius: 22px; background: var(--accent-soft); }
.marketing-page .guide-body .guide-recommended ol { padding-left: 0; list-style: none; counter-reset: guide-step; }
.marketing-page .guide-body .guide-recommended ol li { position: relative; padding-left: 2.75rem; counter-increment: guide-step; }
.marketing-page .guide-body .guide-recommended ol li::before { content: counter(guide-step); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: var(--step-xs); font-weight: 700; line-height: 1; }
.marketing-page .guide-body .guide-recommended .product-shot { margin: 1.75rem 0 1.625rem; }
.marketing-page .guide-sources { padding-top: 1.875rem; border-top: 1px solid var(--border); }
.marketing-page .guide-body .guide-sources p, .marketing-page .guide-body .guide-sources li { color: var(--text-muted); font-size: var(--step-sm); }
.marketing-page .guide-related { padding-top: 4rem; padding-bottom: 4.5rem; }

/* Contact: what the trial is at the left, the form at the right */

.marketing-page .contact-section { padding: clamp(40px, 3vw + 24px, 80px) 0 var(--section); }
.marketing-page .contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(2.5rem, 6vw, 6rem); }
.marketing-page .contact-intro { position: sticky; top: 6.5rem; }
.marketing-page .contact-intro h1 { font-size: var(--step-2xl); }
.marketing-page .contact-intro .lead { margin-top: 1.25rem; }
.marketing-page .contact-points { display: grid; gap: 1.25rem; margin: 2.25rem 0 0; padding: 0; list-style: none; }
.marketing-page .contact-points li { display: flex; align-items: flex-start; gap: 1rem; }
.marketing-page .contact-points .service-icon { width: 2.5rem; height: 2.5rem; margin: 0; border-radius: 10px; }
.marketing-page .contact-points .service-icon svg { width: 1.25rem; height: 1.25rem; }
.marketing-page .contact-points h3 { font-family: var(--font-body); font-size: var(--step-base); font-weight: 650; letter-spacing: 0; }
.marketing-page .contact-points p { margin-top: .25rem; font-size: var(--step-sm); line-height: 1.6; }
.marketing-page .contact-form { padding: 2.25rem; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow); }
.marketing-page .contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.375rem; }
.marketing-page .contact-field { min-width: 0; }
.marketing-page .contact-field-wide { grid-column: 1 / -1; }
.marketing-page .contact-field label { display: block; margin-bottom: .5rem; font-size: var(--step-sm); font-weight: 600; }
.marketing-page .contact-field label span { color: var(--text-muted); font-weight: 400; }
.marketing-page .contact-field :is(input, select, textarea) { display: block; width: 100%; min-height: 3rem; padding: .6875rem .875rem; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; font-size: 1rem; line-height: 1.5; }
.marketing-page .contact-field textarea { min-height: 7.5rem; resize: vertical; }
.marketing-page .contact-field textarea::placeholder { color: var(--text-muted); opacity: 1; }
.marketing-page .contact-field :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.marketing-page .contact-submit { display: flex; flex-direction: column; align-items: flex-start; gap: .875rem; margin-top: 1.75rem; }
.marketing-page .contact-submit p { font-size: var(--step-sm); line-height: 1.6; }

/* A report to browse: a carousel of its pages, or a gallery without JavaScript */

.marketing-page .report-viewer { overflow: hidden; }
.marketing-page .report-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; padding: 1.375rem 1.625rem; border-bottom: 1px solid var(--frame-border); }
.marketing-page .report-toolbar .eyebrow { margin-bottom: .5rem; }
.marketing-page .report-position { color: var(--text); font-size: .9375rem; font-weight: 600; }
.marketing-page .report-arrows { display: flex; flex: none; gap: .5rem; }
.marketing-page .report-arrows button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--accent-text); cursor: pointer; }
.marketing-page .report-arrows button:hover:enabled { border-color: var(--accent-line); background: var(--accent-soft); }
.marketing-page .report-arrows button:disabled { opacity: .35; cursor: default; }
.marketing-page .report-arrows svg { width: 1.125rem; height: 1.125rem; }
.marketing-page .report-arrows [data-report-previous] svg { transform: rotate(180deg); }
.marketing-page .report-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; padding: 1.625rem; background: radial-gradient(ellipse at top, var(--accent-soft), transparent 75%), var(--bg-soft); }
.marketing-page .report-page { display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0; }
.marketing-page .report-page picture { display: block; min-width: 0; max-width: 100%; }
.marketing-page .report-page img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 12px 32px rgb(20 36 56 / .12); }
.marketing-page .report-page figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .625rem 1.5rem; width: 100%; margin-top: 1.25rem; color: var(--text-muted); font-size: var(--step-sm); }
.marketing-page .report-viewer.is-carousel .report-pages { display: block; padding: 1.5rem 1.625rem 1.25rem; touch-action: pan-y; }
.marketing-page .report-viewer.is-carousel .report-page img { width: auto; max-width: 100%; max-height: min(60vh, 620px); }
.marketing-page .report-picker { position: relative; display: flex; gap: .5rem; padding: 1.125rem 1.25rem; overflow-x: auto; border-top: 1px solid var(--frame-border); scrollbar-width: thin; }
.marketing-page .report-picker button { display: flex; align-items: center; gap: .625rem; flex: 1 0 7.5rem; min-width: 0; max-width: 9.5rem; padding: .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-muted); text-align: left; cursor: pointer; }
.marketing-page .report-picker button:hover { border-color: var(--accent-line); }
.marketing-page .report-picker button[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-text); }
.marketing-page .report-picker img { width: 2rem; height: auto; flex: none; border: 1px solid var(--border); border-radius: 2px; }
.marketing-page .report-picker span { font-size: var(--step-xs); line-height: 1.4; }
.marketing-page .report-picker strong { display: block; margin-bottom: .125rem; font-size: var(--step-sm); }
.marketing-page .report-caption { padding: 0 1.625rem 1.25rem; color: var(--text-muted); font-size: var(--step-sm); line-height: 1.7; }

/* Privacy: a reading column */

.marketing-page .legal { max-width: 46rem; padding-top: clamp(40px, 3vw + 24px, 80px); padding-bottom: var(--section); }
.marketing-page .legal h1 { font-size: var(--step-2xl); }
.marketing-page .legal .lead { margin-top: 1.25rem; }
.marketing-page .legal h2 { margin-top: 2.75rem; font-size: var(--step-lg); }
.marketing-page .legal h2 + p, .marketing-page .legal p + p { margin-top: .875rem; }
.marketing-page .legal .ticks { margin-top: 1.25rem; }
.marketing-page .legal .ticks + p { margin-top: 1.25rem; }
.marketing-page .legal p:not(.lead):not(.eyebrow) { color: var(--text); line-height: 1.75; }

/* The FAQ: the reading column, with each question a heading and its answer under it */
.marketing-page .faq h2 { margin-top: 3rem; padding-bottom: .625rem; border-bottom: 1px solid var(--border); }
.marketing-page .faq section { margin-top: 1.75rem; }
/* Segoe UI Variable Display kerns y and ? apart, so a question read "buy ?". These headings are the questions */
.marketing-page :is(.faq, .guide-body) h3 { font-kerning: none; }
.marketing-page .faq h3 { font-size: var(--step-md); letter-spacing: -.01em; }
.marketing-page .faq h3 + div p { margin-top: .5rem; }
/* A link in running text is the accent and underlined: the accent alone is too close to the text's colour */
.marketing-page :is(.legal, .compare-note, .contact-intro, .home-lead) a:not(.button) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* The comparison: 1 table, the app's column marked, each row's heading in the first column; on a phone each row
   stacks as a block with the column's name over each cell (data-label) */
.marketing-page .compare { padding: clamp(40px, 3vw + 24px, 80px) 0 var(--section); }
.marketing-page .compare-table { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.marketing-page .compare table { width: 100%; border-collapse: collapse; font-size: var(--step-sm); line-height: 1.6; }
.marketing-page .compare th, .marketing-page .compare td { padding: 1rem 1.25rem; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.marketing-page .compare thead th { border-top: 0; background: var(--bg-soft); color: var(--text-muted); font-size: var(--step-xs); font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.marketing-page .compare tbody th { width: 11rem; color: var(--text); font-weight: 650; }
.marketing-page .compare td { color: var(--text-muted); }
.marketing-page .compare td code { font-size: .85em; }
.marketing-page .compare .compare-us { background: var(--accent-soft); color: var(--text); }
.marketing-page .compare thead .compare-us { color: var(--accent-text); }
.marketing-page .compare td::before { display: none; }
.marketing-page .compare-note { max-width: 46rem; margin: 1.75rem auto 0; text-align: center; font-size: var(--step-sm); }

@media (max-width: 900px) {
    .marketing-page .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .marketing-page .compare tr { display: block; padding: .25rem 0 .75rem; border-top: 1px solid var(--border); }
    .marketing-page .compare tr:first-child { border-top: 0; }
    .marketing-page .compare tbody th, .marketing-page .compare td { display: block; width: auto; padding: .75rem 1.25rem 0; border-top: 0; }
    .marketing-page .compare tbody th { padding-top: 1rem; font-size: var(--step-base); }
    .marketing-page .compare td::before { content: attr(data-label); display: block; margin-bottom: .125rem; color: var(--accent-text); font-size: var(--step-xs); font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
    .marketing-page .compare .compare-us { margin-top: .5rem; padding-bottom: .875rem; border-radius: var(--radius-sm); }
}

/* The account pages: the same ground and edges as the public pages, with the account's own panes, navigation and bars
   in the desktop app's style */

.site { flex: 1; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 2.5rem var(--gutter) 4.5rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.page-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; padding: .5rem 0 1.5rem; }
.page-header h1 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); letter-spacing: -.025em; overflow-wrap: anywhere; }
.page-subtitle { flex-basis: 100%; max-width: 44rem; color: var(--text-muted); font-size: 1.0625rem; }
.prose { max-width: 44rem; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 2.25rem; font-size: var(--step-lg); }
.prose li + li { margin-top: .375rem; }

.pane { min-width: 0; background: var(--surface); border: 1px solid var(--border); }
.pane-header { display: flex; align-items: center; gap: 1rem; min-height: 2.75rem; padding: 0 .5rem 0 1rem; background: var(--bg-soft); border-bottom: 1px solid var(--divider); }
.pane-header h2 { overflow: hidden; font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.pane-body { padding: 1rem 1rem 1.25rem; }
.pane-body > * + * { margin-top: .75rem; }
.pane-empty { display: flex; align-items: center; gap: .75rem; padding: 1.25rem 1rem; color: var(--text-muted); }
.pane-empty .icon { font-size: 1.5rem; color: var(--text-muted); }

/* A button in a pane or the account's main column keeps the portal's own push button: 2.25rem tall, 3px corners, regular
   weight and no lift (docs/Design.md, decision 9) */
:is(.pane, .account-main) .button { min-width: 6.5rem; min-height: 2.25rem; padding: 0 1rem; border-radius: 3px; font-size: inherit; font-weight: 400; }
:is(.pane, .account-main) .button:hover:not(:disabled) { transform: none; box-shadow: none; }

.message-bar { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem .75rem .75rem 1rem; border: 1px solid; color: var(--text); }
.message-bar > .icon { padding-top: .125rem; font-size: 1.25rem; }
.message-bar .message-body { flex: 1; min-width: 0; }
.message-bar.success { border-color: var(--banner-success-border); background: var(--success-soft); }
.message-bar.success > .icon { color: var(--success); }
.message-bar.info { border-color: var(--banner-info-border); background: var(--accent-soft); }
.message-bar.info > .icon { color: var(--accent-text); }
.message-bar.warning { border-color: var(--banner-warning-border); background: var(--warning-soft); }
.message-bar.warning > .icon { color: var(--warning); }
.message-bar.danger { border-color: var(--banner-danger-border); background: var(--danger-soft); }
.message-bar.danger > .icon { color: var(--danger); }

/* The rest of the account pages' kit (docs/Guide.md, Building blocks): panels in a row, and labels beside values */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.cards.four { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.section-title { margin: 2.25rem 0 1rem; font-size: var(--step-lg); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; }
.facts dt, .facts dd { padding: .625rem 0; border-bottom: 1px solid var(--divider); }
.facts dt { padding-left: 1rem; padding-right: 2.5rem; color: var(--text-muted); }
.facts dd { margin: 0; padding-right: 1rem; overflow-wrap: anywhere; }
.facts dt:nth-last-of-type(1), .facts dd:nth-last-of-type(1) { border-bottom: 0; }

.tag { display: inline-flex; background: var(--bg-soft); color: var(--text-muted); align-items: center; gap: .375rem; min-height: 1.5rem; padding: 0 .5rem; border-radius: 2px; font-size: var(--step-sm); line-height: 1.2; white-space: nowrap; vertical-align: middle; }
.tag-success { background: var(--success-soft); color: var(--success); }
.tag-accent { background: var(--accent-soft); color: var(--accent-text); }
.tag-warning { background: var(--warning-soft); color: var(--warning-text); }

/* The account frame: its navigation down the left, beside the account's panes */
.frame { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.nav { padding: .5rem 0; background: var(--nav); }
.nav-heading { padding: .5rem 1.25rem .25rem; color: var(--nav-muted); font-size: var(--step-sm); }
.nav-entry { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 2.5rem; padding: 0 1rem 0 1.25rem; color: var(--nav-text); white-space: nowrap; }
.nav-entry:hover { background: var(--nav-hover); text-decoration: none; }
.nav-entry[aria-current="page"] { background: var(--nav-selected); font-weight: 600; }
.nav-entry[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.nav-entry .icon { width: 1.25rem; font-size: 1rem; color: var(--nav-muted); text-align: center; }
.nav-entry[aria-current="page"] .icon { color: var(--accent-text); }
.account-main { min-width: 0; }
.account-main > .page-header { align-items: center; justify-content: space-between; gap: 1rem; padding: 0 0 1.25rem; }
.account-main > .page-header .page-subtitle { margin-top: .375rem; }
/* The plain title and line (Licences) stack as Overview's and Downloads' do, rather than the line sitting out to the right */
.account-main > .page-header:has(> h1) { display: block; }
.account-eyebrow { margin-bottom: .375rem; color: var(--accent-text); font-size: var(--step-xs); font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.account-status { flex: none; gap: .375rem; }
.account-status .icon { color: var(--success); }
.account-card { min-width: 0; border: 1px solid var(--border); background: var(--surface); }
.account-card-header { display: flex; align-items: center; gap: .875rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--divider); background: var(--bg-soft); }
.account-card-header h2, .account-signin h2 { font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; }
.account-card-header p { margin-top: .125rem; color: var(--text-muted); font-size: var(--step-sm); }
.account-card-icon { align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--border); background: var(--surface); color: var(--accent-text); font-size: 1.125rem; }
html.icons .account-card-icon { display: inline-flex; }
.account-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--divider); }
.account-detail { min-width: 0; padding: 1rem 1.25rem; background: var(--surface); }
.account-detail dt { margin-bottom: .375rem; color: var(--text-muted); font-size: var(--step-sm); }
.account-detail dd { margin: 0; overflow-wrap: anywhere; }
.account-detail dd.mono { font-size: .8125rem; }
.account-signin { display: flex; align-items: flex-start; gap: .875rem; padding: 1rem 1.25rem; }
.account-signin > div { min-width: 0; }
.account-signin p { margin-top: .375rem; color: var(--text-muted); }
.account-download-empty { padding: 1.25rem; color: var(--text-muted); }

/* Footer: the name and a line, the site's links in 4 groups, then the small print */

.site-footer { padding: 4rem 0 2rem; border-top: 1px solid var(--border); background: var(--bg-soft); color: var(--text-muted); font-size: var(--step-sm); }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 2.5rem; }
.footer-brand { max-width: 22rem; }
.footer-brand .brand { font-size: 1.25rem; }
.footer-brand .brand svg { width: 30px; height: 24px; }
.footer-brand p { margin-top: 1rem; line-height: 1.6; }
.footer-brand .button { margin-top: 1.5rem; }
.footer-links { display: flex; gap: clamp(2.5rem, 6vw, 5rem); }
.footer-group { display: flex; flex-direction: column; gap: .625rem; }
.footer-heading { margin-bottom: .25rem; color: var(--text); font-size: var(--step-xs); font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--text); text-decoration: none; }
.site-footer .brand, .site-footer .brand:hover { color: var(--text); }
/* A rule as wide as the content, not the gutters */
.footer-base { background: linear-gradient(var(--border), var(--border)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 3rem; padding-top: 1.5rem; font-size: var(--step-xs); }
.footer-base nav { display: flex; gap: 1.5rem; }

/* Narrower windows */

@media (max-width: 1100px) {
    .marketing-page .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .marketing-page .hero-copy { max-width: 40rem; }
    .marketing-page .hero-visual { width: 100%; }
    .marketing-page .extras, .marketing-page .helpdesk-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* The footer's 4 groups need the width: the name and its line go above them, the groups spread across it */
    .footer-inner { flex-direction: column; gap: 2rem; }
    .footer-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; align-self: stretch; }
}

@media (max-width: 1050px) {
    .marketing-page .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .marketing-page .guide-layout { grid-template-columns: 10.5rem minmax(0, 1fr); }
    .marketing-page .guide-contents { padding-right: 1.5rem; }
    .marketing-page .guide-body { padding: 0 0 0 2rem; }
}

@media (max-width: 900px) {
    .site-nav { flex-wrap: wrap; gap: .25rem 1rem; min-height: 0; padding-top: .75rem; padding-bottom: .5rem; }
    .site-nav .links { order: 4; flex-basis: 100%; justify-content: space-between; gap: 0; max-width: 34rem; overflow-x: auto; scrollbar-width: none; }
    .site-nav .links a { padding: .5rem .625rem; }
    /* The row scrolls, which clips anything drawn outside it, so the ring goes just inside the link */
    .site-nav .links a:focus-visible { outline-offset: -2px; }
    .band-name { display: none; }
    .marketing-page .hero-notes { position: static; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; pointer-events: auto; }
    .marketing-page .hero-notes li { position: static; max-width: none; white-space: normal; box-shadow: var(--shadow-sm); }
    .marketing-page .proof-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .marketing-page .proof-inner > p { max-width: none; }
    .marketing-page .proof-row { justify-content: flex-start; gap: .625rem 1.25rem; }
    .marketing-page .chapter, .marketing-page .chapter.flip, .marketing-page .band-head, .marketing-page .band-grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
    .marketing-page .chapter.flip .chapter-visual, .marketing-page .band-grid .window { order: 0; }
    .marketing-page .band-grid .window { order: 1; }
    .marketing-page .band-head .ticks { margin-top: 0; }
    .marketing-page .steps { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .marketing-page .home-resources { flex-direction: column; align-items: flex-start; padding: 2rem; }
    .marketing-page .feature-highlights { grid-template-columns: minmax(0, 1fr); }
    .marketing-page .service-detail { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding: 1.75rem; }
    .marketing-page .product-benefits, .marketing-page .product-note-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .marketing-page .product-note-grid { gap: 1.5rem; }
    .marketing-page .product-examples { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .marketing-page .resource-list-heading { flex-direction: column; gap: .5rem; }
    .marketing-page .guide-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .marketing-page .guide-contents { padding-right: 0; }
    .marketing-page .guide-contents nav { position: static; display: flex; flex-wrap: wrap; gap: 0 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
    .marketing-page .guide-contents p { width: 100%; margin-bottom: .25rem; }
    .marketing-page .guide-contents a { padding-left: 0; border-left: 0; }
    .marketing-page .guide-body { padding: 0; border-left: 0; }
    .marketing-page .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .marketing-page .contact-intro { position: static; }
    .frame { grid-template-columns: minmax(0, 1fr); }
    .nav { display: flex; overflow-x: auto; padding: 0; scrollbar-width: none; }
    .nav-heading { display: none; }
    .nav-entry { flex: none; padding: 0 1rem; }
    .nav-entry[aria-current="page"]::before { top: auto; right: 0; width: auto; height: 2px; }
    .account-detail-grid { grid-template-columns: minmax(0, 1fr); }
    .facts { grid-template-columns: minmax(0, 1fr); }
    .facts dt { padding-bottom: 0; border-bottom: 0; }
    .facts dd { padding-left: 1rem; }
}

@media (max-width: 700px) {
    .marketing-page .resource-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
    .site-nav .links { max-width: none; }
    .brand { font-size: 1.25rem; }
    .brand svg { width: 32px; height: 25px; }
    .nav-right { gap: .875rem; }
    .marketing-page .hero { padding-bottom: 2.5rem; }
    .marketing-page .hero .actions .button { flex: 1 1 auto; }
    .marketing-page .hero-platform { align-items: flex-start; }
    .marketing-page .hero-platform svg { margin-top: .2rem; }
    .marketing-page .window { border-radius: 10px; }
    .marketing-page .window-bar { padding: .5rem .625rem; }
    .marketing-page .proof { padding: 1.25rem 0; }
    .marketing-page .proof-row li { font-size: var(--step-sm); }
    .marketing-page .chapter-label { margin-bottom: 1.125rem; }
    .marketing-page .helpdesk-row, .marketing-page .extras { grid-template-columns: minmax(0, 1fr); gap: .875rem; }
    .marketing-page .extra { padding: 1.375rem; }
    .marketing-page .section-header p:not(.eyebrow), .marketing-page .features-intro p:not(.eyebrow), .marketing-page .resources-intro > p:not(.eyebrow), .marketing-page .product-lead, .marketing-page .guide-summary, .marketing-page .lead { font-size: var(--step-base); }
    .marketing-page .home-resources { padding: 1.5rem; border-radius: var(--radius-lg); }
    .marketing-page .closing-inner { border-radius: var(--radius-lg); }
    .marketing-page .closing .actions { flex-direction: column; align-items: stretch; width: 100%; }
    .marketing-page .product-shot { padding: .3125rem .3125rem 0; border-radius: var(--radius); }
    .marketing-page .visual { padding: .3125rem; border-radius: var(--radius); }
    .marketing-page .product-shot picture, .marketing-page .visual picture { border-radius: 6px; }
    .marketing-page .product-shot figcaption { padding: .75rem .375rem; }
    .marketing-page .theme-showcase { padding: .75rem; border-radius: var(--radius); }
    .marketing-page .product-breadcrumb, .marketing-page .guide-breadcrumb { margin-bottom: 2rem; }
    .marketing-page .product-intro .product-shot { margin-top: 2rem; }
    .marketing-page .product-callout { gap: .75rem; padding: 1.375rem 1.125rem; }
    .marketing-page .coverage-title { display: block; }
    .marketing-page .coverage-title p:not(.eyebrow) { margin-top: .75rem; }
    .marketing-page .service-tabs { gap: .375rem; }
    .marketing-page .service-tab { padding: .5rem .75rem .5rem .625rem; font-size: var(--step-xs); }
    .marketing-page .service-detail { padding: 1.5rem; border-radius: var(--radius-lg); }
    .marketing-page .highlight { border-radius: var(--radius-lg); }
    .marketing-page .highlight-image { padding: 1.25rem 0 0 1.25rem; }
    .marketing-page .highlight-text { padding: 1.25rem 1.375rem 1.5rem; }
    .marketing-page .product-comparison { grid-template-columns: minmax(0, 1fr); }
    .marketing-page .resource-card { padding: 1.375rem; }
    .marketing-page .guide-body .guide-answer { font-size: 1.0625rem; }
    .marketing-page .guide-body section { scroll-margin-top: 9.5rem; }
    .marketing-page .guide-recommended { padding: 1.375rem; }
    .marketing-page .guide-code pre { padding: 1rem; }
    .marketing-page .guide-table th, .marketing-page .guide-table td { padding: .75rem; }
    .marketing-page .contact-form { padding: 1.5rem; border-radius: var(--radius-lg); }
    .marketing-page .contact-fields { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .marketing-page .contact-submit .button { width: 100%; }
    .marketing-page .report-viewer { border-radius: var(--radius); }
    .marketing-page .report-toolbar { gap: .75rem; padding: 1rem; }
    .marketing-page .report-position { font-size: var(--step-sm); }
    .marketing-page .report-pages { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
    .marketing-page .report-viewer.is-carousel .report-pages { padding: 1.125rem .875rem; }
    .marketing-page .report-picker { padding: .875rem; }
    .marketing-page .report-caption { padding: 0 1rem 1rem; }
    .site { padding-top: 1.75rem; }
    .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
}

@media (max-width: 380px) {
    .marketing-page .hero .button { padding-left: 1rem; padding-right: 1rem; }
    .marketing-page .capabilities { grid-template-columns: minmax(0, 1fr); }
}

/* Motion: a short fade and rise as a page's introduction arrives and as later sections scroll into view, the hero's
   notes arriving one after another, a small lift under the pointer for things you can open, and the navy's glows
   drifting slowly. All of it only when the computer allows motion; with reduced motion set, nothing moves. site.js marks the sections that start below the
   window (.reveal.pending) and clears the mark as each comes into view, so a page without the script shows everything
   at once. */

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }

    .marketing-page .hero-copy, .marketing-page .hero-visual, .marketing-page .features-intro > *, .marketing-page .product-intro > :not(.product-breadcrumb),
    .marketing-page .resources-intro > *, .marketing-page .contact-intro, .marketing-page .contact-form, .marketing-page .guide-header > :not(.guide-breadcrumb), .marketing-page .legal > * {
        animation: rise 320ms var(--ease) both;
    }
    .marketing-page .hero-visual, .marketing-page .contact-form, .marketing-page .product-intro > .product-shot { animation-delay: 100ms; }
    .marketing-page .hero-notes li { animation: rise 320ms var(--ease) both; }
    .marketing-page .hero-notes .at-bar { animation-delay: 420ms; }
    .marketing-page .hero-notes .at-run { animation-delay: 540ms; }
    .marketing-page .hero-notes .at-output { animation-delay: 660ms; }

    .reveal { transition: opacity 320ms var(--ease), transform 320ms var(--ease); }
    .reveal.pending { opacity: 0; transform: translateY(14px); }

    .button, .text-link svg, .highlight-more svg, .marketing-page .highlight-link, .marketing-page .resource-card, .marketing-page .related-cards a,
    .marketing-page .docs-card, .marketing-page .visual:has(> a), .marketing-page .extra, .marketing-page .service-tab, .links a {
        transition: opacity 240ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease), background-color 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
    }
    .button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
    .button:active:not(:disabled) { transform: none; box-shadow: none; }
    .text-link:hover svg, .highlight-link:hover .highlight-more svg { transform: translateX(3px); }
    .marketing-page .highlight-link:hover, .marketing-page .resource-card:hover, .marketing-page .related-cards a:hover,
    .marketing-page .docs-card:hover, .marketing-page .visual:has(> a):hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lift);
    }

    .marketing-page .report-viewer.is-carousel .report-page { animation: fade 160ms ease both; }

    /* The navy's 2 glows drift slowly back and forth */
    .marketing-page :is(.home-hero-glow, .home-cta-glow) { animation: glow-drift 24s ease-in-out infinite alternate; }
}

@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade { from { opacity: .5; } }
@keyframes glow-drift {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

@media print {
    .site-header { position: static; }
    .theme-button { display: none; }
    .reveal.pending { opacity: 1; transform: none; }
}

/* Documentation: the user guide in its own area (/Docs), laid out like Microsoft Learn inside the public pages' header
   and footer. The chapters sit down the left, the page in the middle at a reading width with a breadcrumb above it and
   Previous and Next below, and the page's own headings down the right; a narrower screen folds the columns beside the
   page into Contents and On this page above it. The Markdown is rendered to plain elements, styled under .docs-body,
   with numbered steps, keys, notes and tables. Everything uses the tokens, so the dark appearance follows by itself. */

.marketing-page .docs {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr) 12rem;
    gap: 0 2.5rem;
    align-items: start;
    padding-top: 40px;
    padding-bottom: var(--marketing-section-space);
}

.marketing-page .docs-sidebar { grid-column: 1; position: sticky; top: 108px; max-height: calc(100vh - 128px); overflow-y: auto; font-size: 14px; }
.marketing-page .docs-sidebar-title { margin-bottom: 10px; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.marketing-page .docs-sidebar-title a { color: var(--marketing-muted); }
.marketing-page .docs-sidebar-title a:hover, .marketing-page .docs-sidebar-title a[aria-current="page"] { color: var(--marketing-blue-text); }
.marketing-page .docs-sidebar ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--marketing-border); }
.marketing-page .docs-sidebar li a { display: block; margin-left: -1px; padding: 7px 12px; border-left: 2px solid transparent; color: var(--marketing-muted); line-height: 1.4; }
.marketing-page .docs-sidebar li a:hover { color: var(--marketing-text); }
.marketing-page .docs-sidebar li a[aria-current="page"] { border-left-color: var(--marketing-blue); color: var(--marketing-blue-text); font-weight: 600; }
.marketing-page .docs-pdf { display: inline-block; margin-top: 18px; padding: 8px 14px; border: 1px solid var(--marketing-border); border-radius: 8px; background: var(--marketing-surface); color: var(--marketing-blue-text); font-weight: 600; }
.marketing-page .docs-pdf:hover { background: var(--marketing-soft); }

.marketing-page .docs-main { grid-column: 2; min-width: 0; }
.marketing-page .docs-contents-page .docs-main { grid-column: 2 / 4; }

.marketing-page .docs-outline { grid-column: 3; position: sticky; top: 108px; max-height: calc(100vh - 128px); overflow-y: auto; font-size: 13px; }
.marketing-page .docs-outline p { margin-bottom: 10px; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--marketing-muted); }
.marketing-page .docs-outline a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid var(--marketing-border); color: var(--marketing-muted); line-height: 1.4; }
.marketing-page .docs-outline a:hover { color: var(--marketing-text); }
.marketing-page .docs-outline a[aria-current] { border-left-color: var(--marketing-blue); color: var(--marketing-blue-text); font-weight: 600; }

/* The contents page: the title, a line, the PDF, then each chapter as a row */

.marketing-page .docs-intro h1 { font-size: clamp(34px, 4.4vw, 48px); line-height: 1.12; }
.marketing-page .docs-lead { max-width: 60ch; margin-top: 14px; font-size: 18px; line-height: 1.7; }
.marketing-page .docs-intro .button { margin-top: 22px; }
.marketing-page .docs-empty { margin-top: 32px; }
.marketing-page .docs-cards { display: grid; gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; }
.marketing-page .docs-card { display: block; padding: 20px 24px; border: 1px solid var(--marketing-border); border-radius: 12px; background: var(--marketing-surface); box-shadow: var(--marketing-panel-shadow); }
.marketing-page .docs-card:hover { border-color: var(--marketing-blue-text); }
.marketing-page .docs-card strong { display: block; color: var(--marketing-text); font-size: 18px; font-weight: 620; line-height: 1.4; }
.marketing-page .docs-card span { display: block; max-width: 72ch; margin-top: 6px; color: var(--marketing-muted); font-size: 14px; line-height: 1.65; }

/* A page: the breadcrumb, the folds a narrower screen shows, the Markdown, and Previous and Next */

.marketing-page .docs-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 18px; padding: 0; list-style: none; color: var(--marketing-muted); font-size: 13px; line-height: 1.5; }
.marketing-page .docs-breadcrumb li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.marketing-page .docs-breadcrumb li + li::before { content: "/"; content: "/" / ""; color: var(--marketing-muted); }
.marketing-page .docs-breadcrumb a { color: var(--marketing-blue-text); }
.marketing-page .docs-breadcrumb a:hover { text-decoration: underline; }

.marketing-page .docs-folds { display: none; }
.marketing-page .docs-fold { border: 1px solid var(--marketing-border); border-radius: 10px; background: var(--marketing-surface); font-size: 14px; }
.marketing-page .docs-fold summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; color: var(--marketing-text); font-weight: 600; cursor: pointer; list-style: none; }
.marketing-page .docs-fold summary::-webkit-details-marker { display: none; }
/* A chevron drawn with 2 borders: down while folded, up while open */
.marketing-page .docs-fold summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -4px 3px 0 0; border-right: 1.5px solid var(--marketing-muted); border-bottom: 1.5px solid var(--marketing-muted); transform: rotate(45deg); }
.marketing-page .docs-fold[open] summary::after { margin-top: 4px; transform: rotate(225deg); }
.marketing-page .docs-fold nav { padding: 6px 14px 12px; border-top: 1px solid var(--marketing-border); }
.marketing-page .docs-fold ol { margin: 0; padding: 0; list-style: none; }
.marketing-page .docs-fold nav a:not(.docs-pdf) { display: block; padding: 7px 0; color: var(--marketing-muted); line-height: 1.4; }
.marketing-page .docs-fold nav a:not(.docs-pdf):hover { color: var(--marketing-text); }
.marketing-page .docs-fold nav a[aria-current="page"] { color: var(--marketing-blue-text); font-weight: 600; }
.marketing-page .docs-fold .docs-pdf { margin-top: 10px; }

.marketing-page .docs-body { color: var(--marketing-text); font-size: 16px; line-height: 1.75; overflow-wrap: break-word; }
.marketing-page .docs-body > * + * { margin-top: 1rem; }
.marketing-page .docs-body > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, hr) { max-width: 72ch; }
.marketing-page .docs-body > p:has(> img:only-child) { max-width: none; }
.marketing-page .docs-body p { color: var(--marketing-text); }
.marketing-page .docs-body a { color: var(--marketing-blue-text); text-decoration: underline; text-underline-offset: 3px; }
.marketing-page .docs-body h1 { margin-bottom: 1.25rem; font-size: clamp(32px, 4vw, 44px); line-height: 1.15; }
.marketing-page .docs-body h2 { margin-top: 2.75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--marketing-border); font-size: 26px; letter-spacing: -.02em; }
.marketing-page .docs-body h3 { margin-top: 2rem; font-size: 20px; letter-spacing: -.01em; }
.marketing-page .docs-body h4, .marketing-page .docs-body h5, .marketing-page .docs-body h6 { margin-top: 1.5rem; font-size: 16px; letter-spacing: 0; }
.marketing-page .docs-body ul, .marketing-page .docs-body ol { padding-left: 1.5rem; }
.marketing-page .docs-body li + li { margin-top: .375rem; }
.marketing-page .docs-body li > ul, .marketing-page .docs-body li > ol { margin-top: .375rem; }
/* Blocks only: a key is an inline block, and a margin would make its line taller */
.marketing-page .docs-body li > * + :is(p, pre, blockquote, table) { margin-top: .5rem; }
.marketing-page .docs-body ul > li::marker { color: var(--marketing-muted); }
/* Code in a sentence breaks only between the words the renderer puts in spans, never at a hyphen inside an option, and
   each part of a broken one keeps its own border */
.marketing-page .docs-body code { padding: 1px 5px; border: 1px solid var(--marketing-border); border-radius: 5px; background: var(--marketing-soft); font-size: .875em; white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.marketing-page .docs-body code:has(> span) { white-space: normal; }
.marketing-page .docs-body code > span { white-space: nowrap; }
.marketing-page .docs-body pre { overflow-x: auto; padding: 14px 16px; border: 1px solid var(--marketing-border); border-radius: 10px; background: var(--marketing-soft); font-size: 13.5px; line-height: 1.65; }
.marketing-page .docs-body pre code { padding: 0; border: 0; background: transparent; font-size: inherit; white-space: inherit; }
.marketing-page .docs-body blockquote { margin-left: 0; margin-right: 0; padding: 10px 16px; border-left: 3px solid var(--marketing-blue); border-radius: 0 8px 8px 0; background: var(--marketing-blue-soft); }
.marketing-page .docs-body blockquote > * + * { margin-top: .5rem; }
.marketing-page .docs-body hr { border: 0; border-top: 1px solid var(--marketing-border); }
.marketing-page .docs-body mark { background: var(--warning-soft); color: inherit; }
.marketing-page .docs-body img { max-width: 100%; height: auto; border: 1px solid var(--marketing-border); border-radius: 8px; box-shadow: var(--marketing-panel-shadow); }

/* A key is a small raised cap; a combination (Ctrl+S) is an outer kbd that keeps its keys on 1 line */

.marketing-page .docs-body kbd { display: inline-block; min-width: 1.75em; padding: 0 .45em; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--marketing-surface); color: var(--marketing-text); font-family: var(--font-body); font-size: max(12px, .8125em); font-weight: 600; line-height: 1.6; text-align: center; white-space: nowrap; }
.marketing-page .docs-body kbd.docs-keys { min-width: 0; padding: 0; border: 0; background: transparent; font-size: 1em; font-weight: inherit; line-height: inherit; }
.marketing-page .docs-body kbd.docs-keys kbd { margin: 0 .125em; }
.marketing-page .docs-body kbd.docs-keys kbd:first-child { margin-left: 0; }
.marketing-page .docs-body kbd.docs-keys kbd:last-child { margin-right: 0; }

/* A note: the guide's "Note:" paragraphs, as Microsoft Learn shows them, with the label on its own line, as wide as the
   tables and heading rules rather than the text */

.marketing-page .docs-body > .docs-note { max-width: none; }
.marketing-page .docs-body .docs-note { padding: 12px 16px 13px; border-left: 3px solid var(--marketing-blue); border-radius: 0 8px 8px 0; background: var(--marketing-blue-soft); }
.marketing-page .docs-body .docs-note-label { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; color: var(--marketing-blue-text); font-size: 14px; font-weight: 650; letter-spacing: .01em; }
/* An "i" in a ring, which a screen reader skips: the label already says Note */
.marketing-page .docs-body .docs-note-label::before { content: ""; content: "i" / ""; display: grid; place-items: center; flex: none; width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 50%; font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 1; }
.marketing-page .docs-body * + .docs-note { margin-top: 1.25rem; }

/* Steps: a numbered list's numbers sit in small discs. The count is the list's own (list-item), so a list that starts
   at 3 shows 3 */

.marketing-page .docs-body ol { padding-left: 0; list-style: none; }
.marketing-page .docs-body ol > li { position: relative; padding-left: 2.5rem; }
.marketing-page .docs-body ol > li + li { margin-top: .625rem; }
.marketing-page .docs-body ol > li::before { content: counter(list-item); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--marketing-blue-soft); color: var(--marketing-blue-text); font-size: 13px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }

/* A table scrolls inside its own box when the screen is too narrow for it, and never breaks a word: its first column keeps
   a width of its own, and the others keep a readable one, rather than squeezing. Rows are divided by lines only, under a
   shaded heading row, as in the admin centres' lists. */

.marketing-page .docs-body table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.marketing-page .docs-body th, .marketing-page .docs-body td { min-width: 10rem; padding: 10px 14px; border-bottom: 1px solid var(--marketing-border); overflow-wrap: normal; word-break: normal; text-align: left; vertical-align: top; }
.marketing-page .docs-body th:first-child, .marketing-page .docs-body td:first-child { min-width: 8rem; }
/* A shortcut (Ctrl+1 to Ctrl+7) stays on 1 line */
.marketing-page .docs-body td:first-child:has(> kbd) { white-space: nowrap; }
.marketing-page .docs-body th { border-bottom-color: var(--border-strong); background: var(--marketing-soft); color: var(--marketing-text); font-weight: 600; }
.marketing-page .docs-body :is(th, td) code { overflow-wrap: normal; white-space: nowrap; }
.marketing-page .docs-body .align-center { text-align: center; }
.marketing-page .docs-body .align-right { text-align: right; }

.marketing-page .docs-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--marketing-border); }
.marketing-page .docs-pager a { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 48%; padding: 12px 18px; border: 1px solid var(--marketing-border); border-radius: 10px; background: var(--marketing-surface); }
.marketing-page .docs-pager a:hover { border-color: var(--marketing-blue-text); }
.marketing-page .docs-pager span { display: flex; align-items: center; gap: 6px; color: var(--marketing-muted); font-size: 13px; }
.marketing-page .docs-pager svg { width: 14px; height: 14px; flex: none; }
.marketing-page .docs-previous svg { transform: scaleX(-1); }
.marketing-page .docs-pager strong { display: block; color: var(--marketing-blue-text); font-weight: 600; overflow-wrap: anywhere; }
.marketing-page .docs-next { margin-left: auto; align-items: flex-end; text-align: right; }

/* Narrower: first the headings fold above the page, then the chapters; a page with no headings has only the chapters */

@media (max-width: 1180px) {
    .marketing-page .docs { grid-template-columns: 13.5rem minmax(0, 1fr); gap: 0 2rem; }
    .marketing-page .docs-outline { display: none; }
    .marketing-page .docs-contents-page .docs-main { grid-column: 2; }
    .marketing-page .docs-folds { display: grid; gap: 8px; margin-bottom: 28px; }
    .marketing-page .docs-fold-contents, .marketing-page .docs-folds.docs-folds-contents-only { display: none; }
}

@media (max-width: 850px) {
    .marketing-page .docs { grid-template-columns: minmax(0, 1fr); padding-top: 24px; }
    .marketing-page .docs-sidebar { display: none; }
    .marketing-page .docs-main, .marketing-page .docs-contents-page .docs-main { grid-column: 1; }
    .marketing-page .docs-fold-contents { display: block; }
    .marketing-page .docs-folds.docs-folds-contents-only { display: grid; }
}

@media (max-width: 600px) {
    .marketing-page .docs-body h2 { font-size: 23px; }
    .marketing-page .docs-body h3 { font-size: 19px; }
    .marketing-page .docs-card { padding: 16px 18px; }
    .marketing-page .docs-pager { flex-direction: column; }
    .marketing-page .docs-pager a { max-width: none; margin-left: 0; }
}

/* Print: the page alone, light (the dark tokens are screen only), nothing cut off at the paper's edge and nothing split
   that reads badly split. The PDF stays the better copy. */

@media print {
    body:has(.docs) :is(.site-header, .site-footer) { display: none; }
    .marketing-page :is(.docs-sidebar, .docs-outline, .docs-folds, .docs-breadcrumb, .docs-pager, .docs-intro .button) { display: none; }
    .marketing-page .docs { display: block; padding: 0; }
    .marketing-page .docs-body { font-size: 11pt; line-height: 1.55; }
    .marketing-page .docs-body > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, hr) { max-width: none; }
    .marketing-page .docs-body h1 { font-size: 22pt; }
    .marketing-page .docs-body h2 { margin-top: 1.75rem; font-size: 16pt; break-after: avoid; }
    .marketing-page .docs-body :is(h3, h4) { break-after: avoid; }
    .marketing-page .docs-body :is(img, pre, tr, .docs-note), .marketing-page .docs-card { break-inside: avoid; }
    .marketing-page .docs-body table { display: table; width: auto; overflow: visible; }
    .marketing-page .docs-body :is(th, td) { min-width: 0; }
    .marketing-page .docs-body pre { overflow: visible; white-space: pre-wrap; }
    .marketing-page :is(.docs-body img, .docs-card) { box-shadow: none; }
}

/* Pictures of the app, large and clickable (25 October 2026, the owner's pass): the whole window on a thin frame, a
   detail cut from it at the original pixels overlapping the corner (or beside it, for a tall detail), and on a phone the
   detail alone, since the whole window shrunk to a phone's width cannot be read. Both open the full-size picture. */

.marketing-page .shot { position: relative; margin: 0; }
.marketing-page .shot-full, .marketing-page .shot-detail { display: block; overflow: hidden; border: 1px solid var(--frame-border); border-radius: 10px; background: var(--frame); }
.marketing-page .shot-full { box-shadow: var(--shadow); }
.marketing-page .shot-full img, .marketing-page .shot-detail img { display: block; width: 100%; height: auto; }
.marketing-page .shot-full:hover, .marketing-page .shot-detail:hover { outline: 2px solid var(--accent); outline-offset: 2px; }
.marketing-page .shot.has-detail { padding-bottom: 5rem; }
.marketing-page .shot-detail { position: absolute; right: -3%; bottom: .5rem; width: 40%; box-shadow: var(--shadow-xl); }
.marketing-page .shot.beside { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: 1.5rem; align-items: center; padding-bottom: 0; }
.marketing-page .shot.beside .shot-detail { position: static; width: auto; }
.marketing-page .shot.beside figcaption { grid-column: 1 / -1; }
.marketing-page .shot figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .375rem 1.5rem; margin-top: .875rem; font-size: var(--step-sm); line-height: 1.5; color: var(--text-muted); }
.marketing-page .shot.has-detail:not(.beside) figcaption { position: absolute; left: 0; bottom: 0; max-width: 54%; margin: 0; }
.marketing-page .shot-hint { opacity: .75; }
.marketing-page .band .shot-full, .marketing-page .band .shot-detail { border-color: var(--hero-line); }
.marketing-page .band .shot figcaption { color: var(--hero-faint); }

/* The hero: the words, then the picture at the column's full width */
.marketing-page .hero-copy { max-width: 46rem; margin-bottom: 3rem; }
.marketing-page .hero h1 { font-size: var(--step-2xl); letter-spacing: -.035em; line-height: 1.06; }
.marketing-page .hero-lead { max-width: 40rem; }

/* A chapter that stacks: the heading beside its words, then the picture at full width */
.marketing-page .chapter.stack { display: block; }
.marketing-page .chapter-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem 4rem; align-items: start; margin-bottom: 2.5rem; }
.marketing-page .chapter-intro .lead { margin-top: 0; }
.marketing-page .chapter.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.marketing-page .chapter h2, .marketing-page .band-head h2 { font-size: var(--step-xl); }
.marketing-page .band .shot { margin-top: 0; }
.marketing-page .shot-gap { height: 3.5rem; }
.marketing-page .band-builder { margin-top: var(--section); padding-top: var(--section); border-top: 1px solid var(--hero-line); }
.marketing-page .band .chapter-intro .lead { color: var(--hero-muted); }

/* Features: each highlight a row with the picture at its real proportions, not a cropped corner */
.marketing-page .feature-highlights { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.marketing-page .highlight { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: 2rem; padding: 1.5rem; }
.marketing-page .highlight-image, .marketing-page .highlight-image.wide { order: 1; aspect-ratio: auto; padding: 0; background: none; }
.marketing-page .highlight-image img, .marketing-page .highlight-image.wide img { width: 100%; border-radius: 8px; box-shadow: var(--shadow); }
.marketing-page .highlight-text { padding: 0; }

@media (max-width: 900px) {
    .marketing-page .chapter-intro { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .marketing-page .shot.has-detail { padding-bottom: 0; }
    .marketing-page .shot-detail, .marketing-page .shot.beside { display: block; }
    .marketing-page .shot-detail { position: static; width: 100%; margin-top: 1rem; }
    .marketing-page .shot.has-detail:not(.beside) figcaption { position: static; max-width: none; margin-top: .875rem; }
    .marketing-page .highlight { grid-template-columns: minmax(0, 1fr); }
    .marketing-page .highlight-image { order: -1; }
}

@media (max-width: 600px) {
    .marketing-page .shot.has-detail .shot-full { display: none; }
    .marketing-page .shot-detail { margin-top: 0; }
    .marketing-page .hero-copy { margin-bottom: 2rem; }
}

/* Home (25 October 2026, the owner's brief; its look, Deep, 7 November 2026): a short page that sells, with no pictures of
   the app. A centred hero on navy with a soft glow, the services as a row of icon chips, the feature cards as the
   centrepiece on the soft ground, 3 steps, and a navy closing panel. The feature pages carry the detail and the pictures. */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.marketing-page .home-eyebrow { margin: 0 0 1.25rem; color: var(--accent-text); font-size: var(--step-xs); font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }

/* The navy grounds: every page's hero, the closing panel and a guide's header, the same in both appearances. Inside
   them the page's tokens take the navy's values, so text, links, labels, breadcrumbs, secondary buttons and focus rings
   read on it with no rule of their own */
.marketing-page :is(.home-hero, .home-cta-panel, .guide-header) {
    --text: var(--hero-text);
    --text-muted: var(--hero-muted);
    --accent-text: var(--hero-title-from);
    --surface: var(--hero-stage);
    --bg-soft: var(--hero-hover);
    --divider: var(--hero-line);
    --border: var(--hero-line);
    --border-strong: var(--hero-line);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--hero-text);
    background-color: var(--hero-end);
}
/* The 2 glows, drifting slowly where the computer allows motion (Motion, below) */
.marketing-page :is(.home-hero-glow, .home-cta-glow) { position: absolute; inset: -30%; z-index: -1; height: 160%; pointer-events: none; background: radial-gradient(ellipse at 18% 28%, var(--glow-1), transparent 56%), radial-gradient(ellipse at 82% 72%, var(--glow-2), transparent 56%); }

/* The hero */
/* The home hero fills the first screen below the header, its content centred in it */
.marketing-page .home-hero { display: flex; align-items: center; min-height: calc(100vh - 4.5rem); min-height: calc(100svh - 4.5rem); padding: clamp(80px, 8vw, 128px) 0 clamp(64px, 7vw, 112px); text-align: center; }
.marketing-page .home-hero-inner { display: flex; flex-direction: column; align-items: center; width: 100%; }
.marketing-page .home-hero .home-eyebrow { display: inline-flex; align-items: center; gap: .625rem; padding: .4375rem .875rem; border: 1px solid var(--hero-line); border-radius: 999px; background: var(--hero-stage); }
.marketing-page .home-hero h1 { max-width: 15ch; font-size: clamp(2.625rem, 1.4rem + 5vw, 5rem); font-weight: 700; line-height: 1.02; letter-spacing: -.045em; }
/* Only the highlight: a heading's other spans, such as keep-whole, keep the heading's colour */
.marketing-page .home-hero h1 .hero-highlight { background: linear-gradient(100deg, var(--hero-highlight-from), var(--hero-highlight-to) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marketing-page .home-lead { max-width: 38rem; margin-top: 1.5rem; color: var(--text-muted); font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem); line-height: 1.6; }
.marketing-page .home-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2.25rem; }

/* The services: icon chips in a row, inside a strip on the navy */
.marketing-page .home-services { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; max-width: 60rem; margin: clamp(3rem, 5vw, 4.5rem) 0 0; padding: .75rem; list-style: none; border: 1px solid var(--hero-line); border-radius: 22px; background: var(--hero-stage); }
.marketing-page .home-services li { display: inline-flex; align-items: center; gap: .5625rem; padding: .5rem .875rem .5rem .5rem; border-radius: 14px; color: var(--text); font-size: .9375rem; font-weight: 600; white-space: nowrap; }
.marketing-page .home-services span { display: grid; place-items: center; width: 2rem; height: 2rem; }
.marketing-page .home-services img { width: 1.5rem; height: 1.5rem; }

/* The feature cards, on the soft ground under the hero */
.marketing-page .home-features { padding: clamp(64px, 7vw, 104px) 0; background: var(--bg-soft); }
.marketing-page .home-features h2, .marketing-page .home-steps h2 { font-size: var(--step-xl); line-height: 1.1; letter-spacing: -.035em; text-align: center; }
.marketing-page .home-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.marketing-page .home-card { position: relative; display: flex; flex-direction: column; min-height: 17rem; padding: 1.75rem 1.625rem 1.5rem; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.marketing-page .home-card:hover { text-decoration: none; border-color: var(--accent-line); box-shadow: var(--shadow-lift); }
.marketing-page .home-card-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: 1.75rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.marketing-page .home-card-icon svg { width: 1.5rem; height: 1.5rem; }
.marketing-page .home-card h3 { font-size: 1.25rem; letter-spacing: -.02em; }
.marketing-page .home-card p { margin-top: .625rem; color: var(--text-muted); font-size: .9875rem; line-height: 1.6; }
.marketing-page .home-card-more { display: inline-flex; align-items: center; gap: .4375rem; margin-top: auto; padding-top: 1.5rem; color: var(--accent-text); font-size: var(--step-sm); font-weight: 600; }
.marketing-page .home-card-more svg { width: 1rem; height: 1rem; transition: transform .2s var(--ease); }
.marketing-page .home-card:hover .home-card-more svg { transform: translateX(3px); }

/* How it works: 3 numbered steps joined by a line, each number in a solid accent circle */
.marketing-page .home-steps { padding: clamp(64px, 6vw + 24px, 112px) 0; text-align: center; }
.marketing-page .home-step-list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; max-width: 62rem; margin: clamp(2.5rem, 4vw, 3.5rem) auto 0; padding: 0; list-style: none; }
.marketing-page .home-step-list::before { content: ""; position: absolute; top: 1.5rem; left: 16.66%; right: 16.66%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-line) 15%, var(--accent-line) 85%, transparent); }
.marketing-page .home-step-list li { position: relative; display: flex; flex-direction: column; align-items: center; }
.marketing-page .home-step-number { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.25rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }
.marketing-page .home-step-list h3 { font-size: 1.125rem; letter-spacing: -.015em; }
.marketing-page .home-step-list p { max-width: 17rem; margin-top: .5rem; color: var(--text-muted); font-size: .9375rem; line-height: 1.6; }

/* The closing panel: a piece of the hero (the navy, its 2 soft glows and the headline's end in the logo's gradient), so
   a page ends in the colours it starts in */
.marketing-page .home-cta { padding: 0 0 clamp(64px, 6vw + 24px, 112px); }
.marketing-page .home-cta-panel { padding: clamp(3rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--hero-line); border-radius: 24px; text-align: center; }
.marketing-page .home-cta-panel h2 { color: var(--text); font-size: var(--step-xl); line-height: 1.1; letter-spacing: -.035em; }
.marketing-page .home-cta-panel h2 span { background: linear-gradient(100deg, var(--hero-highlight-from), var(--hero-highlight-to) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marketing-page .home-cta-panel p { margin: .875rem 0 2rem; color: var(--text-muted); font-size: var(--step-md); }

@media (prefers-reduced-motion: no-preference) {
    .marketing-page a.home-card:hover { transform: translateY(-4px); }
}

@media (max-width: 1100px) {
    .marketing-page .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .marketing-page .home-card { min-height: 0; }
}

@media (max-width: 700px) {
    .marketing-page .home-cards { grid-template-columns: minmax(0, 1fr); }
    .marketing-page .home-step-list { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
    .marketing-page .home-step-list::before { top: 1.5rem; bottom: 1.5rem; left: 50%; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, transparent, var(--accent-line) 10%, var(--accent-line) 90%, transparent); }
    .marketing-page .home-step-list li { background: var(--bg); }
    .marketing-page .home-actions { flex-direction: column; align-self: stretch; }
    .marketing-page .home-actions .button { width: 100%; }
    .marketing-page .home-services { gap: .25rem; padding: .5rem; border-radius: 18px; }
    .marketing-page .home-services li { padding: .375rem .625rem .375rem .375rem; font-size: var(--step-sm); }
    .marketing-page .home-services span { width: 1.75rem; height: 1.75rem; }
    .marketing-page .home-services img { width: 1.375rem; height: 1.375rem; }
}


/* The other public pages in the home page's style (25 October 2026): a shorter hero, cards in 3 or 4 columns, the
   service selector as a simple panel, and links to the other feature pages. */

/* Only the home page's hero fills the screen; the others are a band */
.marketing-page .home-hero.page-hero { min-height: 0; padding: clamp(48px, 5vw, 80px) 0 clamp(40px, 4.5vw, 72px); }
.marketing-page .page-hero h1 { max-width: 22ch; font-size: clamp(2.25rem, 1.3rem + 3.4vw, 3.75rem); }
.marketing-page .page-hero .product-breadcrumb { margin-bottom: 1.5rem; }
.marketing-page .home-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.marketing-page article.home-card { min-height: 0; }
.marketing-page article.home-card:hover { border-color: var(--border); box-shadow: var(--shadow-sm); transform: none; }

.marketing-page .service-section .service-tabs { justify-content: center; margin: 2.25rem 0 1.75rem; }
.marketing-page .service-panel { max-width: 46rem; margin: 0 auto; padding: 2rem 2.25rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); text-align: left; }
.marketing-page .service-panel + .service-panel { margin-top: 1rem; }
.marketing-page .service-panel h3 { font-size: 1.25rem; letter-spacing: -.02em; }
.marketing-page .service-panel ul { display: grid; gap: .75rem; margin: 1.125rem 0 0; padding: 0; list-style: none; }
.marketing-page .service-panel li { position: relative; padding-left: 1.75rem; color: var(--text-muted); line-height: 1.55; }
.marketing-page .service-panel li::before { content: ""; position: absolute; left: 0; top: .5em; width: .625rem; height: .625rem; border-radius: 50%; background: var(--accent-text); }

/* The pages to read next, at the end of a feature, service, comparison or guide page: a heading, then cards that are
   each 1 link, 2 to a row, or 3 when there are 3 */
.marketing-page .related-features { padding-bottom: clamp(48px, 5vw, 80px); }
.marketing-page .related-features h2 { margin-bottom: 1.5rem; font-size: var(--step-lg); }
.marketing-page .related-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.marketing-page .related-cards:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.marketing-page .related-cards a { display: flex; flex-direction: column; gap: .375rem; padding: 1.375rem 1.5rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text); }
.marketing-page .related-cards a:hover { border-color: var(--accent-line); text-decoration: none; }
.marketing-page .related-cards a > span { color: var(--accent-text); font-size: var(--step-xs); font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.marketing-page .related-cards strong { font-family: var(--font-display); font-size: 1.125rem; font-weight: 650; }
.marketing-page .related-cards svg { width: 1rem; height: 1rem; color: var(--accent-text); }

@media (max-width: 1100px) {
    .marketing-page .home-cards.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .marketing-page .home-cards.three, .marketing-page .related-cards, .marketing-page .related-cards:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
    .marketing-page .service-panel { padding: 1.5rem; }
    .marketing-page .service-section .service-tabs { justify-content: flex-start; }
}

/* The cards' content centred (the owner, 25 October 2026) */
.marketing-page .home-card { align-items: center; text-align: center; }
.marketing-page .home-card p { max-width: 22rem; text-wrap: balance; }

/* Roadmap (25 October 2026, the owner's brief): where the app is heading. The near term as a path of steps on the soft
   ground, the longer term as cards with quiet icons, then a short note that plans can change. Every step and card looks
   the same, so nothing reads as done or under way: no dates, percentages or progress marks */

.marketing-page .roadmap-section { padding: clamp(56px, 5vw + 24px, 96px) 0; }
.marketing-page .roadmap-section + .roadmap-section { padding-top: 0; }
.marketing-page .roadmap-heading { display: flex; flex-direction: column; align-items: center; max-width: 40rem; margin: 0 auto; text-align: center; }
.marketing-page .roadmap-heading h2 { font-size: var(--step-xl); line-height: 1.1; letter-spacing: -.035em; }
.marketing-page .roadmap-heading p:last-child { margin-top: .875rem; font-size: var(--step-md); }

/* The 2 horizons told apart at a glance: the near term's tag filled, the longer term's outlined */
.marketing-page .roadmap-tag { margin-bottom: 1rem; padding: .3125rem .875rem; border: 1px solid var(--accent-line); border-radius: 999px; color: var(--accent-text); font-size: var(--step-xs); font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.marketing-page .roadmap-tag.near { border-color: var(--accent-soft); background: var(--accent-soft); }
.marketing-page .roadmap-tag.later { border-color: var(--border-strong); color: var(--text-muted); }

/* The near term: a line down the left joining a node for each step, the step's words in a card beside it */
.marketing-page .roadmap-path { --node: 3.25rem; position: relative; display: grid; gap: 1rem; max-width: 46rem; margin: clamp(2.5rem, 4vw, 3.5rem) auto 0; padding: 0; list-style: none; }
.marketing-page .roadmap-path::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--node) / 2 - 1px); width: 2px; background: linear-gradient(180deg, transparent, var(--accent-line) 12%, var(--accent-line) 88%, transparent); }
.marketing-page .roadmap-path li { position: relative; display: grid; grid-template-columns: var(--node) minmax(0, 1fr); align-items: center; gap: 1.25rem; }
.marketing-page .roadmap-node { display: grid; place-items: center; width: var(--node); height: var(--node); border-radius: 50%; background: linear-gradient(135deg, var(--brand-from), var(--brand-to)); color: var(--on-accent); box-shadow: 0 10px 24px -10px var(--brand-to); }
.marketing-page .roadmap-node svg { width: 1.375rem; height: 1.375rem; }
.marketing-page .roadmap-step { padding: 1.25rem 1.5rem; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.marketing-page .roadmap-step h3 { font-size: 1.1875rem; letter-spacing: -.02em; }
.marketing-page .roadmap-step p { margin-top: .375rem; line-height: 1.6; }

/* The longer term: cards in rows of 4, a short last row centred */
.marketing-page .roadmap-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin: clamp(2.5rem, 4vw, 3.5rem) 0 0; padding: 0; list-style: none; }
.marketing-page .roadmap-card { display: flex; flex: 0 1 calc((100% - 3 * 1.25rem) / 4); flex-direction: column; align-items: center; padding: 1.75rem 1.5rem; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); text-align: center; }
.marketing-page .roadmap-icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 13px; background: var(--accent-soft); color: var(--accent-text); }
.marketing-page .roadmap-icon svg { width: 1.375rem; height: 1.375rem; }
.marketing-page .roadmap-card .roadmap-icon { margin-bottom: 1.25rem; }
.marketing-page .roadmap-card h3 { font-size: 1.125rem; letter-spacing: -.015em; }
.marketing-page .roadmap-card p { margin-top: .5rem; font-size: .9375rem; line-height: 1.6; }

/* The note that plans may change: quiet, at the reading width, the icon beside the words, no heading */
.marketing-page .roadmap-note { padding: 0 0 clamp(64px, 6vw + 24px, 112px); }
.marketing-page .roadmap-note-panel { display: flex; align-items: center; gap: 1.25rem; max-width: 46rem; margin: 0 auto; padding: 1.75rem 2rem; border: 1px solid var(--border); border-radius: 22px; background: var(--bg-soft); }
.marketing-page .roadmap-note p { line-height: 1.6; }

@media (max-width: 1100px) {
    .marketing-page .roadmap-card { flex-basis: calc((100% - 1.25rem) / 2); }
}

@media (max-width: 700px) {
    .marketing-page .roadmap-path { --node: 2.75rem; }
    .marketing-page .roadmap-path li { align-items: start; gap: 1rem; }
    .marketing-page .roadmap-step { padding: 1.125rem 1.25rem; }
    /* A card as a compact row on a phone, the icon beside the words, so the 7 do not make a long page */
    .marketing-page .roadmap-card { display: grid; flex-basis: 100%; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: start; padding: 1.25rem; text-align: left; }
    .marketing-page .roadmap-card .roadmap-icon { grid-row: span 2; margin-bottom: 0; }
    .marketing-page .roadmap-card p { margin-top: .25rem; }
    .marketing-page .roadmap-note-panel { align-items: flex-start; gap: 1rem; padding: 1.25rem; }
}

/* The comparisons and Get started. A comparison's table keeps the page's gutters, which .compare's padding above takes
   away; Get started's reading column follows its steps with no second gap, and its links show as links */
.marketing-page .compare { padding-inline: var(--gutter); }
.marketing-page .legal.get-started { padding-top: 0; }
.marketing-page .get-started > h2:first-child { margin-top: 0; }
.marketing-page .get-started a { color: var(--accent-text); }
.marketing-page .get-started ol { display: grid; gap: .5rem; margin: 1rem 0 0; padding-left: 1.5rem; line-height: 1.75; }
.marketing-page .get-started ol + p { margin-top: 1.25rem; }

/* Headings in order: Contact's points are h2s, in the look they had */
.marketing-page .contact-points h2 { font-family: var(--font-body); font-size: var(--step-base); font-weight: 650; line-height: 1.2; letter-spacing: 0; }

/* Feature pages (L1). The cards on Home and Features in rows of 4, a short last row centred, as the roadmap's are.
   A feature page's detail section: a centred heading and lead over a table, ticks or a panel at the reading width */

.marketing-page .home-cards.centre-last { display: flex; flex-wrap: wrap; justify-content: center; }
.marketing-page .home-cards.centre-last > * { flex: 0 1 calc((100% - 3 * 1.25rem) / 4); min-width: 0; }

.marketing-page .feature-detail + .feature-detail { padding-top: clamp(64px, 6vw + 24px, 112px); }
/* A page whose How it works comes second ends on a detail section */
.marketing-page .feature-detail + .related-features { padding-top: clamp(64px, 6vw + 24px, 112px); }
.marketing-page .feature-detail-head { max-width: 46rem; margin: 0 auto; text-align: center; }
.marketing-page .feature-detail-head h2 { font-size: var(--step-xl); line-height: 1.1; letter-spacing: -.035em; }
.marketing-page .feature-detail-head p { margin-top: .875rem; font-size: var(--step-md); line-height: 1.6; }
.marketing-page .feature-detail .compare { max-width: 62rem; margin: 0 auto; padding: clamp(2rem, 3vw, 2.5rem) 0 0; }
.marketing-page .feature-detail .ticks, .marketing-page .feature-detail .service-panel { max-width: 46rem; margin: clamp(2rem, 3vw, 2.5rem) auto 0; }
.marketing-page .service-panel > ul:first-child { margin-top: 0; }
/* A command line option or cmdlet kept whole: a browser breaks after the hyphens of --tenants and Get-Mailbox */
.marketing-page .feature-detail-head code, .marketing-page .feature-detail .ticks code, .marketing-page .feature-detail .compare code, .marketing-page .home-card code { font-size: .85em; white-space: nowrap; }

@media (max-width: 1100px) {
    .marketing-page .home-cards.centre-last > * { flex-basis: calc((100% - 1.25rem) / 2); }
}

@media (max-width: 700px) {
    .marketing-page .home-cards.centre-last > * { flex-basis: 100%; }
    /* A 2-column table's cell needs no label over it on a phone: its row heading says what it is */
    .marketing-page .feature-detail .compare td:not([data-label])::before { display: none; }
}

/* Search: the box, what shows when nothing matches, and the user guide's results */

.marketing-page .search-box { display: flex; align-items: center; gap: .625rem; width: 100%; max-width: 36rem; margin-top: 2rem; padding: .3125rem .3125rem .3125rem 1.125rem; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); }
.marketing-page .search-box:has(input:focus-visible) { border-color: var(--accent); outline: 2px solid var(--accent-text); outline-offset: 2px; }
.marketing-page .search-box svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--text-muted); }
.marketing-page .search-box input { flex: 1; min-width: 0; min-height: 2.5rem; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1rem; text-align: left; }
.marketing-page .search-box input:focus { outline: none; }
.marketing-page .search-box input::placeholder { color: var(--text-muted); opacity: 1; }
/* Round like the box it sits in */
.marketing-page .search-box .button { flex: none; min-height: 2.5rem; margin: 0; padding: .375rem 1.25rem; border-radius: 999px; }
.marketing-page .docs-intro .search-box { margin-top: 22px; }
.marketing-page .docs-intro .search-box + .button { margin-top: 18px; }

.marketing-page .search-empty { padding: 2.5rem 2rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-soft); text-align: center; }
.marketing-page .search-empty p + p { margin-top: .5rem; }
.marketing-page .search-empty strong { color: var(--text); font-size: var(--step-md); font-weight: 650; }
.marketing-page .search-empty .text-link { margin: .5rem .75rem 0; }
.marketing-page .docs-main .search-empty { margin-top: 32px; padding: 1.75rem 2rem; text-align: left; }
.marketing-page .docs-main .search-empty .text-link { margin: .25rem 0 0; }

.marketing-page .search-for { margin-top: 32px; color: var(--text-muted); font-size: 14px; }
.marketing-page .search-results { display: grid; gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.marketing-page .search-result { padding: 20px 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); }
.marketing-page .search-result h2 { font-family: var(--font-body); font-size: 18px; font-weight: 620; line-height: 1.4; letter-spacing: 0; }
.marketing-page .search-result h2 a { color: var(--accent-text); }
.marketing-page .search-result h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.marketing-page .search-result-section { margin-top: 2px; color: var(--text); font-size: 14px; font-weight: 600; }
.marketing-page .search-result-text { max-width: 72ch; margin-top: 6px; font-size: 14px; line-height: 1.65; }
.marketing-page .search-result mark { background: transparent; color: var(--text); font-weight: 700; }
.marketing-page .search-result-more { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; }
.marketing-page .search-result-more span { color: var(--text-muted); }
.marketing-page .search-result-more a { color: var(--accent-text); }
.marketing-page .search-result-more a:hover { text-decoration: underline; }
.marketing-page .search-elsewhere { margin-top: 28px; font-size: 14px; }
.marketing-page .search-elsewhere a { color: var(--accent-text); font-weight: 600; }
.marketing-page .search-elsewhere a:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .marketing-page .search-box { padding-left: .875rem; }
    .marketing-page .search-box .button { padding: .375rem 1rem; }
    .marketing-page .search-empty { padding: 1.75rem 1.25rem; }
    .marketing-page .search-result { padding: 16px 18px; }
}

/* The service pages, and the links to them on Home */
.marketing-page .service-block { padding: 0 0 clamp(56px, 5vw + 16px, 96px); }
.marketing-page .service-block-heading { max-width: 44rem; margin: 0 auto; text-align: center; }
.marketing-page .service-block-heading h2 { font-size: var(--step-xl); line-height: 1.1; letter-spacing: -.035em; }
.marketing-page .service-block-heading p { margin-top: .875rem; color: var(--text-muted); font-size: var(--step-md); line-height: 1.6; }
.marketing-page .service-stack { display: grid; gap: 1.25rem; margin-top: clamp(2rem, 3vw, 2.75rem); }
.marketing-page .service-stack + .service-stack { margin-top: 1.25rem; }
.marketing-page .service-stack.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Groups in rows of 3, each row as tall as its tallest group and a short last row centred, so no row has a hole */
.marketing-page .service-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.marketing-page .service-groups > .service-group { flex: 0 1 calc((100% - 2 * 1.25rem) / 3); min-width: 0; }
.marketing-page .service-group { padding: 1.5rem 1.625rem 1.625rem; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-sm); }
.marketing-page .service-group h3 { font-size: 1.125rem; letter-spacing: -.015em; }
.marketing-page .service-group p { margin-top: .5rem; color: var(--text-muted); font-size: var(--step-sm); line-height: 1.6; }
.marketing-page .service-group .service-names + p { margin-top: 1rem; }
.marketing-page .service-group .text-link { margin-top: 1.25rem; }
.marketing-page .service-group p .text-link { margin-top: 0; }
.marketing-page .service-group.lead { border-color: var(--accent-line); }
.marketing-page .service-names { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
/* A pill on 1 line; a long name that wraps on a phone keeps the same corners rather than turning into a lozenge */
.marketing-page .service-names li { padding: .3125rem .75rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--bg-soft); color: var(--text); font-size: var(--step-sm); line-height: 1.45; }
.marketing-page .service-group.lead .service-names li { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.marketing-page .service-block .resource-grid { margin-top: clamp(2rem, 3vw, 2.75rem); }
.marketing-page .service-more { margin-top: 1.75rem; text-align: center; }
.marketing-page .service-panel .text-link { margin-top: 1.5rem; }
.marketing-page .service-block .resource-grid.few { display: flex; flex-wrap: wrap; justify-content: center; }
.marketing-page .resource-grid.few > .resource-card { flex: 0 1 calc((100% - 2.5rem) / 3); }
.marketing-page .home-services li { padding: 0; }
.marketing-page .home-services a { display: inline-flex; align-items: center; gap: .5625rem; padding: .5rem .875rem .5rem .5rem; border-radius: 14px; color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-line); text-decoration-thickness: 1px; text-underline-offset: .3em; }
.marketing-page .home-services a:hover { background: var(--bg-soft); color: var(--accent-text); text-decoration-color: currentColor; }

@media (max-width: 1050px) {
    .marketing-page .resource-grid.few > .resource-card, .marketing-page .service-groups > .service-group { flex-basis: calc((100% - 1.25rem) / 2); }
}

@media (max-width: 700px) {
    .marketing-page .service-groups > .service-group { flex-basis: 100%; }
    .marketing-page .service-stack.pair { grid-template-columns: minmax(0, 1fr); }
    .marketing-page .service-group { padding: 1.25rem; }
    .marketing-page .service-names { gap: .375rem; }
    .marketing-page .service-names li { padding: .25rem .625rem; line-height: 1.35; }
    .marketing-page .resource-grid.few > .resource-card { flex-basis: 100%; }
    .marketing-page .home-services a { padding: .375rem .625rem .375rem .375rem; }
}

/* Home's link to Get started, titles that keep a hyphenated word whole, and a chapter's search box in the user guide */

.marketing-page .home-steps-more { margin-top: clamp(2.25rem, 3vw, 3rem); }
/* A browser breaks after a typed hyphen ("sign-" then "ins"); ResourceGuide's *Html properties put such words in this */
.keep-whole { white-space: nowrap; }

/* The contents page's search box without its button, which a sidebar has no room for: Enter searches */
.marketing-page .docs-find { display: flex; align-items: center; gap: .5rem; margin: 0 0 14px; padding: 0 .875rem; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--marketing-surface); }
.marketing-page .docs-find:has(input:focus-visible) { border-color: var(--accent); outline: 2px solid var(--accent-text); outline-offset: 2px; }
.marketing-page .docs-find svg { flex: none; width: 1.125rem; height: 1.125rem; color: var(--marketing-muted); }
.marketing-page .docs-find input { flex: 1; min-width: 0; min-height: 2.5rem; padding: 0; border: 0; background: transparent; color: var(--marketing-text); font: inherit; font-size: 1rem; }
.marketing-page .docs-find input:focus { outline: none; }
.marketing-page .docs-find input::placeholder { color: var(--marketing-muted); opacity: 1; }
.marketing-page .docs-fold .docs-find { margin: 8px 0 6px; }

/* Legal pages: the owner's documents as Microsoft's own legal pages show theirs. The name, Last updated, the sections down
   the left beside the text (folded above it on a narrow screen), the text at a reading width, and tables that scroll in
   their own box. Printed, the text alone. The footer's 5th group, Legal, needs a narrower name column beside the groups. */

.marketing-page .legal-page { padding-top: clamp(40px, 3vw + 24px, 80px); padding-bottom: var(--section); }
.marketing-page .legal-header { max-width: 52rem; margin-bottom: clamp(2rem, 3vw, 3rem); }
.marketing-page .legal-header h1 { font-size: var(--step-xl); line-height: 1.1; letter-spacing: -.03em; }
.marketing-page .legal-updated { margin-top: 1rem; color: var(--text-muted); font-size: var(--step-sm); }
/* The aside stretches down the text, so its list can stay in view */
.marketing-page .legal-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 0 3rem; }
.marketing-page .legal-contents nav { position: sticky; top: 6.75rem; max-height: calc(100vh - 8.5rem); overflow-y: auto; padding-top: .375rem; }
.marketing-page .legal-contents p { margin-bottom: .875rem; color: var(--text); font-size: var(--step-xs); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.marketing-page :is(.legal-contents, .legal-fold) ol { margin: 0; padding: 0; list-style: none; }
.marketing-page .legal-contents a { display: block; padding: .4375rem 0 .4375rem .75rem; border-left: 2px solid var(--border); color: var(--text-muted); font-size: var(--step-sm); line-height: 1.4; }
.marketing-page :is(.legal-contents, .legal-fold) a:hover { color: var(--text); }
.marketing-page .legal-contents a[aria-current] { border-left-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.marketing-page .legal-fold { display: none; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: var(--step-sm); }
.marketing-page .legal-fold summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem .875rem; color: var(--text); font-weight: 600; cursor: pointer; list-style: none; }
.marketing-page .legal-fold summary::-webkit-details-marker { display: none; }
/* A chevron drawn with 2 borders: down while folded, up while open */
.marketing-page .legal-fold summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -4px 3px 0 0; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg); }
.marketing-page .legal-fold[open] summary::after { margin-top: 4px; transform: rotate(225deg); }
.marketing-page .legal-fold nav { padding: .25rem .875rem .75rem; border-top: 1px solid var(--border); }
.marketing-page .legal-fold a { display: block; padding: .4375rem 0; color: var(--text-muted); line-height: 1.4; }

.marketing-page .legal-body { min-width: 0; color: var(--text); font-size: var(--step-base); line-height: 1.75; overflow-wrap: break-word; }
.marketing-page .legal-body > * + * { margin-top: 1rem; }
/* The text at a reading width; the headings' rules and the tables take the column, so their right edges line up */
.marketing-page .legal-body > :is(p, ul, ol, blockquote) { max-width: 45rem; }
.marketing-page .legal-body p { color: var(--text); }
.marketing-page .legal-body > :first-child { margin-top: 0; }
.marketing-page .legal-body h2 { margin-top: 3rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); line-height: 1.25; letter-spacing: -.02em; }
.marketing-page .legal-body :is(h2, p[id]) { scroll-margin-top: 6.5rem; }
.marketing-page .legal-body strong { font-weight: 650; }
.marketing-page .legal-body a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.marketing-page .legal-body :is(ul, ol) { padding-left: 1.5rem; }
.marketing-page .legal-body li + li { margin-top: .375rem; }
.marketing-page .legal-body ul > li::marker { color: var(--text-muted); }
.marketing-page .legal-body code { padding: 1px 5px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-soft); font-size: .875em; }
.marketing-page .legal-body blockquote { margin-left: 0; margin-right: 0; padding: .75rem 1rem; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: var(--accent-soft); }
.marketing-page .legal-body blockquote > * + * { margin-top: .625rem; }
.marketing-page .legal-table { overflow-x: auto; }
.marketing-page .legal-body table { width: 100%; border-collapse: collapse; font-size: var(--step-sm); line-height: 1.55; }
/* A table wider than its box shows a shade at the edge it scrolls towards. The covers move with the table and hide a
   shade once that edge is reached; the shades stay at the box's edges */
.marketing-page .legal-table {
    background:
        linear-gradient(to right, var(--bg) 40%, transparent) left / 2.5rem 100% no-repeat local,
        linear-gradient(to left, var(--bg) 40%, transparent) right / 2.5rem 100% no-repeat local,
        linear-gradient(to right, color-mix(in srgb, var(--text) 18%, transparent), transparent) left / .875rem 100% no-repeat scroll,
        linear-gradient(to left, color-mix(in srgb, var(--text) 18%, transparent), transparent) right / .875rem 100% no-repeat scroll;
}
.marketing-page .legal-body :is(th, td) { min-width: 6.5rem; max-width: 26rem; padding: .625rem .875rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: normal; }
.marketing-page .legal-body th { border-bottom-color: var(--border-strong); background: var(--bg-soft); color: var(--text); font-weight: 600; }
.marketing-page .legal-body td:first-child { min-width: 7rem; }

.footer-brand { max-width: 17rem; }
.footer-links { gap: clamp(2rem, 3vw, 3rem); }

@media (max-width: 1100px) {
    .footer-links { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem 1.5rem; }
}

@media (max-width: 900px) {
    .marketing-page .legal-layout { grid-template-columns: minmax(0, 1fr); }
    .marketing-page .legal-contents { display: none; }
    .marketing-page .legal-fold { display: block; margin-bottom: 2rem; }
}

@media (max-width: 760px) {
    .footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* 2 columns fit the width, and a short column, such as a term, takes only the room it needs */
    .marketing-page .legal-body :is(th, td) { padding: .5rem .625rem; }
    .marketing-page .legal-body table:not(:has(th:nth-child(3))) :is(th, td) { min-width: 0; }
    /* A wider table stacks each row as a card, as the comparison's do: the first cell bold as its title, then each other
       cell under its column's name (data-label) */
    .marketing-page .legal-table:has(th:nth-child(3)) { overflow: visible; background: none; }
    .marketing-page .legal-body table:has(th:nth-child(3)) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .marketing-page .legal-body table:has(th:nth-child(3)), .marketing-page .legal-body table:has(th:nth-child(3)) :is(tbody, tr, td) { display: block; }
    .marketing-page .legal-body table:has(th:nth-child(3)) tr { padding: .625rem 0 .75rem; border-top: 1px solid var(--border); }
    .marketing-page .legal-body table:has(th:nth-child(3)) tbody tr:last-child { border-bottom: 1px solid var(--border); }
    .marketing-page .legal-body table:has(th:nth-child(3)) td { min-width: 0; max-width: none; padding: .375rem 0 0; border-bottom: 0; }
    .marketing-page .legal-body table:has(th:nth-child(3)) td:first-child { font-weight: 650; }
    .marketing-page .legal-body table:has(th:nth-child(3)) td:empty { display: none; }
    .marketing-page .legal-body table:has(th:nth-child(3)) td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; color: var(--accent-text); font-size: var(--step-xs); font-weight: 650; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; }
}

@media print {
    body:has(.legal-page) :is(.site-header, .site-footer) { display: none; }
    .marketing-page :is(.legal-contents, .legal-fold) { display: none; }
    .marketing-page .legal-page { padding: 0; }
    .marketing-page .legal-layout { display: block; }
    .marketing-page .legal-header h1 { font-size: 22pt; }
    .marketing-page .legal-body { font-size: 11pt; line-height: 1.55; }
    .marketing-page .legal-body > :is(p, ul, ol, blockquote) { max-width: none; }
    .marketing-page .legal-body h2 { margin-top: 1.75rem; font-size: 15pt; break-after: avoid; }
    .marketing-page .legal-table { overflow: visible; background: none; }
    .marketing-page .legal-body :is(th, td) { min-width: 0; max-width: none; }
    .marketing-page .legal-body :is(tr, blockquote) { break-inside: avoid; }
}

/* Blueprints: the example file, as wide as the table under it */
.marketing-page .feature-detail .guide-code { max-width: 62rem; margin: clamp(2rem, 3vw, 2.5rem) auto 0; }