/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    display: block;
    max-width: 100%;
}

input, button, textarea {
    font: inherit;
}

:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

:root { /* Palette: Meadow */ 
    /* Near-black prose; green owns interactive states. */
    --accent:       #6AD48C; /* brand green – decorative on light, functional on dark */
    --text:         #1C2421; /* body text and headings: 15.9:1 on white */
    --link:         #197A47; /* links and buttons: 5.4:1 on white */
    --link-hover:   #0E4D2C; /* hover: 9.2:1 on white */
    --surface:      #F5F7F5; /* cards, code blocks, alt-row backgrounds */
    --border:       #C8E8D4; /* green-tinted dividers and card borders */
    --dark-bg:      #1C2421; /* dark section background */
    --white:        #ffffff;

    /* Blue — Clojure-derived cool complement to the greens. */
    --link-blue:       #2563B0; /* secondary/inline links, UI on light — 5.5:1 on white */
    --link-blue-hover: #1A4881; /* hover/active — 8.4:1 on white */
    --accent-blue:     #5881D8; /* cornflower mark/underline — decorative on light, 4.7:1 on dark */
    --surface-blue:    #EEF3FA; /* soft blue section band / card tint */
    --surface-blue-2:  #E4ECF8; /* deeper gradient partner for section bands */
    --border-blue:     #C3D4F0; /* blue-tinted dividers and alt card border */

    /* Purple — tertiary accent */
    --link-purple:     #B105BD; /* text/link use on light — 5.8:1 on white */
    --accent-purple:   #E206F1; /* vivid magenta — 3.8:1, never carries body text on light */
    --surface-purple:  #FAEFFB; /* soft magenta card tint */
    --border-purple:   #F0CEF3; /* magenta-tinted card border */

    /* Neutral grays — structural borders, code blocks, inline code */
    --gray-100: #f4f4f5;
    --gray-200: #e4e4e7;
    --gray-300: #d4d4d8;
    --gray-600: #52525b;
    --gray-700: #3f3f46;

    /* Aliases so existing rules continue to work */
    --primary-color: var(--link);
    --primary-dark:  var(--link-hover);
    --gray-50:       var(--surface);
    --gray-900:      var(--text);

    /* Semantic aliases used by Stories section */
    --bg-alt:        var(--surface);     /* light background variant */
    --text-primary:  var(--text);        /* maps #111827 intent to brand near-black */
    --text-secondary: var(--gray-600);   /* maps #4b5563 intent to nearest token */

    /* Font weight tokens */
    --fw-light:    300;   /* airy display headings (h1–h3) — Open Sans Light */
    --fw-normal:   400;   /* body copy */
    --fw-medium:   500;   /* subtle emphasis, nav links */
    --fw-semibold: 600;   /* UI components: buttons, cards, nav labels */
    --fw-bold:     700;   /* strong headings: hero h1, section h2 */

    /* Heading weight policy tokens (aliases — prefer --fw-* above) */
    --font-weight-heading-display: var(--fw-normal);
    --font-weight-heading-ui:      var(--fw-semibold);
    --font-weight-heading-strong:  var(--fw-bold);

    /* Font families — lead with the web fonts loaded via the Google Fonts <link> in
       header.ftl; the device-local Meadow stack follows as fallback (renders on-brand
       before the web font arrives, and if it fails to download). Headings use --font-sans
       too (no serif), so the light 300 weight is a true Open Sans weight, not synthetic. */
    --font-sans: 'Open Sans', 'Trebuchet MS', 'Liberation Sans', Roboto, 'DejaVu Sans', sans-serif;
    --font-mono: 'Source Code Pro', 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', monospace;

    /* Type scale */
    --text-xs:   0.75rem;    /* 12px — labels, timestamps, metadata */
    --text-xs-plus: 0.8125rem; /* 13px — compact metadata and citations */
    --text-sm:   0.875rem;   /* 14px — secondary text, sidebar dates */
    --text-sm-plus: 0.9375rem; /* 15px — compact UI text and dense body copy */
    --text-base: 1rem;       /* 16px — body */
    --text-md:   1.0625rem;  /* 17px — section intros */
    --text-lg:   1.125rem;   /* 18px — card titles, emphasized body */
    --text-xl:   1.25rem;    /* 20px — featured quote body */
    --text-2xl:  1.5rem;     /* 24px — h3 in article prose (was 22px; bumped in docs reboot) */
    --text-3xl:  2rem;       /* 32px — blog post titles, article h2 (was 28px; bumped in docs reboot) */
    --text-4xl:  2.5rem;     /* 40px — section h2, article h1 */
    --text-5xl:  3.5rem;     /* 56px — hero h1 */
    --text-code: 0.9rem;     /* 14.4px — monospace blocks */

    /* Semantic aliases used by Stories and quotes */
    --text-quote-compact: var(--text-sm-plus);     /* compact quote body copy */
    --text-quote-attribution: var(--text-xs-plus); /* quote attribution / citation */

    /* Line-height scale. Named by tightness, not by role: 1.4 carries the
       section headlines but also TOC links and tab descriptions. */
    --lh-tight:  1.3;   /* card headlines */
    --lh-snug:   1.4;   /* section headlines, compact UI titles */
    --lh-normal: 1.6;   /* body copy; the body default */
    --lh-loose:  1.7;   /* body copy that wants air */

    /* Spacing scale */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    --radius-lg: 8px;

    --max-width: 1200px;
    --nav-height: 4rem;  /* sticky nav: 40px logo + 2×12px padding */

    scroll-behavior: smooth;
}

/* Self-hosted Open Sans + Source Code Pro (variable woff2, Fontsource latin/latin-ext).
   --font-sans/--font-mono lead with these; the device stack is the fallback.
   blog.datomic.com serves this CSS from www, so its font fetch is cross-origin and needs
   the www CloudFront blog-only CORS policy on /fonts/* (www/docs are same-origin). */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 300 800;
    src: url("../fonts/open-sans/open-sans-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 300 800;
    src: url("../fonts/open-sans/open-sans-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-display: swap;
    font-weight: 300 800;
    src: url("../fonts/open-sans/open-sans-latin-wght-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-display: swap;
    font-weight: 300 800;
    src: url("../fonts/open-sans/open-sans-latin-ext-wght-italic.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url("../fonts/source-code-pro/source-code-pro-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url("../fonts/source-code-pro/source-code-pro-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

html {
    scroll-padding-top: calc(var(--nav-height) + var(--space-4));
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    line-height: var(--lh-normal);
    color: var(--gray-900);
    background: var(--white);
}

/*
 * Heading policy (docs typographic reboot):
 * - All headings render in --font-sans (Open Sans), no serif.
 * - Display/section/prose headings (hero h1, section h2s, article h1–h3): 300 (airy light
 *   cascade differentiated by size). h1 page titles are centered.
 * - h4 is a compact label: --text-lg / 500.
 * - Card h3 titles (feature/edition/contact/pathway/use-case/workload/guides cards) are
 *   ALSO 300 — they sit under light h2 section heads, so a heavier weight would out-bold
 *   their own parent. Non-heading UI (nav, buttons, eyebrows, links): still 600.
 * Open Sans 300 is a true weight (web-loaded), so the light cascade is not synthetic.
 */
h1, h2, h3, h4 {
    font-family: var(--font-sans);
    font-weight: var(--fw-normal);
}

code {
    font-family: var(--font-mono);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

pre {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.strong {
    font-weight: var(--fw-semibold);
}

/* Skip to main content — first focusable element; off-screen until focused */
.skip-link {
    position: absolute;
    left: var(--space-3);
    top: 0;
    z-index: 1000;
    padding: var(--space-3) var(--space-4);
    background: var(--link);
    color: #fff;
    font-size: var(--text-base);
    text-decoration: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    transform: translateY(-120%);
}
.skip-link:focus {
    transform: translateY(0);
}

/* Cookie consent banner — fixed to viewport bottom */
.consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-8);
    background: var(--dark-bg);
    color: var(--white);
    border-top: 2px solid var(--accent);
}
.consent-banner p {
    flex: 1 1 30rem;
    margin: 0;
    font-size: var(--text-sm-plus);
}
.consent-banner-actions {
    display: flex;
    gap: var(--space-3);
    flex-shrink: 0;
}
.consent-banner-actions button {
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    border: 2px solid var(--white);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--white);
    cursor: pointer;
}
.consent-banner-actions button:hover {
    background: var(--white);
    color: var(--dark-bg);
}
.consent-banner[hidden] {
    display: none;
}

/* Navigation */
.nav {
    background: var(--white);
    border-bottom: 2px solid var(--accent);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-not-sticky {
    position: relative;
}

.nav-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0.75rem 2rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

/* Search toggle button */
.nav-search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    border-radius: 4px;
    margin-left: 1rem;
}
.nav-search-toggle:hover { color: var(--link); }

/* Search panel */
.nav-search-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
    border-top: 1px solid transparent;
}
.nav-search-panel.is-open {
    max-height: 72px;
    border-top-color: var(--border);
}
.nav-search-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 2rem;
    max-width: var(--max-width);
    margin: 0 auto;
}
#nav-search-form {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.nav-search-input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: var(--text-base);
    color: var(--text);
    background: var(--white);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nav-search-input:focus {
    outline: none;
    border-color: var(--link);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 22%, transparent);
}
.nav-search-submit,
.nav-search-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    border-radius: 4px;
}
.nav-search-submit:hover,
.nav-search-close:hover { color: var(--link); }

.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    z-index: 101;
}

.logo-img {
    height: 44px; /* matches .nav-toggle-label's 44px touch target so the nav row height stays constant across breakpoints */
    width: auto;
}

.nav-toggle {
    display: none;
}

.nav-toggle-label {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    gap: 0.3rem; /* content + padding must total <= 44px, or min-height can't hold it to 44px and the row grows taller than .logo-img */
    z-index: 101;
    padding: 0.75rem;
    min-width: 44px;
    min-height: 44px;
    margin-right: -0.75rem;
}

.nav-toggle-label span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--gray-900);
    border-radius: 3px;
    transition: all 0.3s;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: var(--space-8);
    margin-left: auto;
}

.nav-links a {
    color: var(--gray-700);
    text-decoration: none;
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--link);
}

/* Dropdown */
.nav-item-dropdown {
    position: relative;
}

/* Dropdown toggle is a <button>; reset it to match sibling .nav-links a */
.nav-dropdown-toggle {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    font: inherit;
    color: var(--gray-700);
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: color 0.2s;
}

.nav-dropdown-toggle:hover {
    color: var(--link);
}

.nav-dropdown-toggle::after {
    content: ' ▾';
    font-size: 0.7rem; /* no token */
    vertical-align: middle;
    display: inline-block;
    transition: transform 0.2s;
    margin-left: 4px;
}

.nav-dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: -1rem;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    min-width: 160px;
    z-index: 200;
    padding: 0.75rem 0 0.375rem;
}

.nav-dropdown li a {
    display: block;
    padding: 0.5rem 1.25rem;
    color: var(--gray-700);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

.nav-dropdown li a:hover {
    color: var(--link);
    background: var(--surface);
}

/* Active navigation state — set via aria-current="page" in header.ftl */
.nav-links > li > a[aria-current="page"],
.nav-links .nav-dropdown-toggle[aria-current="true"] {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--link);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.nav-dropdown a[aria-current="page"] {
    color: var(--text);
    border-left: 5px solid var(--link);
    padding-left: calc(1.25rem - 5px);
    background: var(--surface);
    text-decoration: none;
}

/* Reveal driven solely by aria-expanded (set in nav.js) — single source of truth */
.nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown {
    display: block;
}

/* Container */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

/* Hero Section */
.hero {
    padding: var(--space-24) 0 var(--space-20);
}

.homepage-hero {
    position: relative;
    overflow: hidden;
    background: var(--white);
    padding-bottom: 0;
}

.homepage-hero > .container {
    position: relative;
    z-index: 1;
}

.hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: stretch;
}

.hero-text {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: var(--text-5xl);
    font-weight: var(--fw-light);
    line-height: var(--lh-snug);
    margin-bottom: var(--space-6);
    color: var(--gray-900);
}

.hero-highlight {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 4px;
    text-underline-offset: 5px;
}

.hero-subtitle {
    font-size: var(--text-xl);
    color: var(--gray-600);
    margin-bottom: var(--space-6);
    line-height: var(--lh-loose);
}

.hero-logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-8);
    flex-wrap: wrap;
    gap: var(--space-6);
}

.hero-logos-label {
    display: none;
}

/* Logo files are trimmed flush to their artwork, so the gap between grid
   columns is the only separation: keep it generous. */
.hero-logo {
    height: 2rem;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

/* Square marks need more height than wordmarks to match optical weight. */
.hero-logo[alt="CA Technologies"] {
    height: 3rem;
}

.hero-logo[alt="Facebook"] {
    height: 3.5rem;
}

/* Buttons */
.cta-group {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.cta-group .btn {
    white-space: nowrap;
}

/* Hero visual */
.hero-visual {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Grow the image and pin its right edge so the rings spill left across the
   gap into the text column while the callouts stay flush right. */
.hero-visual img {
    width: calc(100% + 5rem);
    max-width: none;
    margin-left: -10rem;
    height: auto;
    flex-shrink: 0;
}

/* Demo Window */
.demo-window {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
}

.tab-input {
    display: none;
}

.tab-bar {
    display: flex;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.appetizer {
    padding: var(--space-24) 0;
}

.appetizer-layout {
    display: grid;
    /* Why 1.8fr?
       At the 1200px container the code column has to clear the widest sample
       (685px) and the four tab labels (673px), or the demo scrolls horizontally
       at full width. The copy column still holds its 30ch measure.            */
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: center;
}

/* Code sample floats left of the copy. */
.appetizer .demo-window {
    grid-column: 1;
    grid-row: 1;
    background: var(--white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Only in the two-column layout, where the copy sits in the narrow right
   column. Stacked, it takes the standard 60ch like every other section intro. */
@media (min-width: 901px) {
    .appetizer-layout > .appetizer-header > .section-intro {
        max-width: 30ch;
    }
}

.appetizer-header {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
    align-self: start;
}

.appetizer .tab-bar,
.appetizer .tab-label {
    background: var(--white);
}

.appetizer .tab-panel pre {
    overflow-x: auto;
    overflow-y: hidden;
}

.appetizer .tab-panel code {
    line-height: var(--lh-normal);
}

@media (max-width: 900px) {
    .appetizer-layout {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .appetizer .demo-window {
        grid-column: auto;
        grid-row: auto;
    }

    /* Unwrap header so its heading and intro copy become their own grid
       items and can be reordered around the demo window below. */
    .appetizer-header {
        display: contents;
    }

    .appetizer-header h2 {
        order: 1;
        text-align: left;
        margin-bottom: var(--space-8);
    }

    .appetizer .demo-window {
        order: 2;
    }

    .appetizer-header .appetizer-intro {
        order: 3;
        text-align: left;
        margin-top: var(--space-4);
    }
}

.tab-label {
    flex: 0 0 auto;
    padding: 0.75rem 1.25rem;
    color: var(--gray-600);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s;
    margin-bottom: -1px;
    white-space: nowrap;
}

.tab-label:hover {
    color: var(--gray-900);
}

.tab-panels {
    background: #fff;
    padding: 0;
    display: grid;
    overflow-x: auto;
}

.tab-panel {
    grid-area: 1 / 1;
    visibility: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.tab-panel pre {
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tab-panel code {
    font-size: var(--text-code);
    line-height: var(--lh-loose);
    flex: 1;
}

.demo-window:has(#tab-top-k:checked) #panel-top-k,
.demo-window:has(#tab-discovery-log:checked) #panel-discovery-log,
.demo-window:has(#tab-time-travel-debug:checked) #panel-time-travel-debug,
.demo-window:has(#tab-query-txs:checked) #panel-query-txs {
    visibility: visible;
}

.demo-window:has(#tab-top-k:checked) label[for="tab-top-k"],
.demo-window:has(#tab-discovery-log:checked) label[for="tab-discovery-log"],
.demo-window:has(#tab-time-travel-debug:checked) label[for="tab-time-travel-debug"],
.demo-window:has(#tab-query-txs:checked) label[for="tab-query-txs"] {
    color: var(--link);
    border-bottom-color: var(--link);
}

.btn {
    display: inline-block;
    padding: 0.875rem 2rem;
    border-radius: 6px;
    font-weight: var(--fw-semibold);
    font-size: var(--text-base);
    text-decoration: none;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.btn-primary {
    background: var(--primary-color);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}

.btn-secondary:hover {
    border-color: var(--link);
    color: var(--link);
}

.btn-large {
    padding: 1.125rem 2.5rem;
    font-size: var(--text-lg);
}

.btn-small {
    padding: 0.5rem 1.25rem;
    font-size: var(--text-sm);
}

/* Article / Prose Content */
.article {
    padding: var(--space-16) 0 var(--space-24);
}

.article-content {
    max-width: 720px;
}

.article-content--wide {
    max-width: none;
}

.article-content h1 {
    font-size: var(--text-4xl);
    font-weight: var(--fw-light);
    text-align: center;
    margin-bottom: var(--space-8);
    color: var(--gray-900);
}

/* Page-number annotation on paginated blog-listing headings (pages 2+) */
.blog-page-indicator {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--fw-normal);
    color: var(--gray-600);
}

.article-content h2 {
    font-size: var(--text-3xl);
    font-weight: var(--fw-light);
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
    color: var(--gray-900);
    text-wrap: pretty;
}

.article-content h3 {
    font-size: var(--text-2xl);
    font-weight: var(--fw-light);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    color: var(--gray-900);
    text-wrap: pretty;
}

/* AnchorJS heading permalink icon; no color rule ships in the library itself. */
.anchorjs-link {
    color: var(--link);
}

.article-content h4 {
    font-size: var(--text-lg);
    font-weight: var(--fw-medium);
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
    color: var(--gray-900);
}

/* Month-group labels use compact section hierarchy. */
.article-content .archive-month {
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    margin-top: 0;
    margin-bottom: var(--space-2);
}

.article-content p {
    color: var(--gray-700);
    line-height: var(--lh-loose);
    margin-bottom: var(--space-4);
}

.article-content li p {
    margin-bottom: 0;
}

.article-content img {
    max-width: 100%;
    height: auto;
}

.article-content p a,
.article-content li a,
.article-content dt a,
.article-content dd a {
    color: var(--link);
    text-decoration: underline;
}

.article-content blockquote {
    border-left: 3px solid var(--accent);
    margin: 1.5rem 0;
    padding: 0.75rem 1.5rem;
    background: var(--gray-50);
    border-radius: 0 6px 6px 0;
}

.article-content blockquote p {
    color: var(--gray-600);
    margin-bottom: var(--space-2);
}

.article-content blockquote p:last-child {
    margin-bottom: 0;
}

.article-content pre {
    background: transparent;
    border-radius: 6px;
    padding: 0;
    margin: 1rem 0 1.5rem;
    overflow-x: auto;
}

.article-content pre code {
    display: block;
    font-size: var(--text-code);
    line-height: var(--lh-loose);
    padding: 0;
    border-radius: 0;
}

.article-content code {
    font-size: 0.875em; /* intentional: relative em unit for inline code, not a rem scale value */
    background: var(--surface);
    padding: 0.15em 0.4em;
    border-radius: 3px;
    color: var(--gray-900);
}

.article-content--wide .paragraph,
.article-content--wide .ulist,
.article-content--wide > .sect1 {
    max-width: 70ch;
}

/* Contact page: three lookup facts sit in a quiet second column, visible at load. */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(17rem, 30vw, 24rem);
    grid-template-areas: "main rail";
    column-gap: var(--space-12);
    align-items: start;
}

h2#_about_us {
    margin-top: 0;
}

.contact-rail    { grid-area: rail; }
.contact-main    { grid-area: main; }

/* Cap prose readability, not the column (so tables can use the full grid track) */
.contact-main .paragraph,
.contact-main .ulist,
.contact-main > .sect1 {
    max-width: 60ch;
}

.contact-rail .page-toc {
    margin-bottom: var(--space-12);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--border);
    /* Match other .page-toc uses, which inherit the body's default size. */
    font-size: var(--text-base);
}

.contact-rail__help {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--border);
}

.contact-rail__help-item h3 {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: var(--fw-semibold);
    color: var(--gray-900);
    margin: 0 0 var(--space-1);
}

.contact-rail__help-item p {
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    color: var(--gray-700);
    margin: 0 0 var(--space-3);
}

.contact-rail__list {
    display: grid;
    /* One column in the desktop rail; 1-3 across when stacked. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--space-5) var(--space-8);
    margin: 0;
}

.contact-rail dt {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--gray-900);
    line-height: var(--lh-snug);
    margin-bottom: var(--space-1);
}

.contact-rail dd {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    color: var(--gray-700);
    overflow-wrap: anywhere; /* emails and street lines must not widen the column */
}

.contact-rail address { font-style: normal; }

@media (max-width: 1140px) {
    .contact-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "rail" "main";
    }

    .contact-rail {
        max-width: 70ch;
        margin: 0 auto;
        border-top: 1px solid var(--border);
        /* Match .page-toc's padding-bottom so the nav's border sits at equal
           distance top and bottom, balancing the rhythm the rail keeps below. */
        padding-top: var(--space-12);
        margin-bottom: var(--space-10);
    }

    .contact-main {
        margin: 0 auto;
    }

    /* Stacked above the page, the left border/rule reads as a stray divider. So:
       drop it and align the links with the rest of the rail. Qualified to
       outrank the shared rail-ToC rules, which are declared later. */
    .contact-rail .page-toc > ul {
        border-left: none;
        padding-left: 0;
    }
}

/* Editions Section */
.editions {
    padding: var(--space-16) 0;
}

.editions h2 {
    font-size: var(--text-4xl);
    font-weight: var(--fw-light);
    line-height: var(--lh-snug);
    margin-bottom: var(--space-4);
    color: var(--gray-900);
}

.section-intro {
    color: var(--gray-600);
    font-size: var(--text-md);
    margin-bottom: var(--space-10);
    max-width: 60ch;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

/* Grid items default to min-width:auto, so a card's intrinsic content
   width can force its track wider than its 1fr share. Pin tracks to
   their fr share instead of content. */
.card-grid > * {
    min-width: 0;
}

.fits-your-data-cards {
    grid-template-columns: 0.75fr 1.25fr;
}

.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 100%;
    padding: 1.75rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.card--accent-top {
    padding: 1.75rem 2rem;
    border-top: 3px solid var(--accent);
}

.card--elevated {
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent) 12%);
    border-radius: 14px;
    padding: 2.5rem;
    box-shadow: 0 16px 36px rgba(28, 36, 33, 0.08);
}

.card--soft {
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 40%, var(--white));
}

.card--interactive {
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.card--quote {
    padding: 2rem;
    gap: 1.25rem;
}

.card--quote blockquote {
    margin: 0;
    flex: 1;
}

.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Topology carousel */
.topology-carousel {
    position: relative;
}

.topology-slides {
    position: relative;
    display: grid;
    overflow: hidden;
    background: var(--white);
    border-radius: 16px;
    padding: var(--space-10);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Countdown to the next auto-advance; also the auto-advance clock itself
   (see 'animationend' in the inline script). Paused whenever the interval
   would otherwise be paused, so the two never disagree. */
.topology-progress {
    position: absolute;
    z-index: 2;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
}

.topology-progress.is-running {
    animation: topology-progress-fill 6s linear forwards;
}

@keyframes topology-progress-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.topology-carousel:hover .topology-progress,
.topology-carousel:focus-within .topology-progress {
    animation-play-state: paused;
}

/* Manual prev/next; solid triangles drawn with the border trick. */
.topology-nav {
    position: absolute;
    z-index: 2;
    top: 50%;
    translate: 0 -50%;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--link);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topology-nav:hover,
.topology-nav:focus-visible {
    color: var(--link);
}

.topology-nav::before {
    content: "";
    inline-size: 0;
    block-size: 0;
    border-block: 0.5rem solid transparent;
}

.topology-nav--prev {
    inset-inline-start: var(--space-2);
}

.topology-nav--prev::before {
    border-inline-end: 0.625rem solid currentColor;
}

.topology-nav--next {
    inset-inline-end: var(--space-2);
}

.topology-nav--next::before {
    border-inline-start: 0.625rem solid currentColor;
}

.topology-slide {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: center;
    /* Clears the nav arrows, which are inset from the card's border box, so
       only the part not already covered by the card padding is needed here. */
    margin-inline: var(--space-8);
    visibility: hidden;
    opacity: 0;
    transition: opacity 280ms ease, visibility 0s linear 280ms;
}

.topology-diagram {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* Cloud's caption comes first in the DOM (correct reading order at every
   width), but sits right of its diagram at desktop 2-column widths. */
#slide-cloud > .topology-caption {
    order: 2;
}

#slide-cloud > .topology-diagram {
    order: 1;
}

.topology-diagram--pro {
    max-width: 80%;
}

.topology-diagram--local {
    width: 80%;
    justify-self: center;
    margin: auto 0;
}

/* Local's caption stacks header + both paragraphs on the left; the diagram
   and CTA stack on the right, using the same two-column grid as Pro/Cloud. */
#slide-local {
    align-items: stretch;
}

.local-diagram-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}

.local-cta {
    display: flex;
    justify-content: center;
    inline-size: 100%;
    margin-top: auto;
}

.topology-carousel:has(#topology-pro:checked) #slide-pro,
.topology-carousel:has(#topology-cloud:checked) #slide-cloud,
.topology-carousel:has(#topology-local:checked) #slide-local {
    visibility: visible;
    opacity: 1;
    transition: opacity 280ms ease, visibility 0s;
}

/* Segmented control, not a link/CTA pair. Opaque fill is required: the
   section-blue wash drops link-colored text below 4.5:1 contrast. */
.topology-carousel-controls {
    --edition-pill-edge: color-mix(in srgb, var(--link-blue) 40%, var(--white));
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    margin-inline: auto;
    margin-top: var(--space-6);
    padding: 3px;
    gap: 3px;
    border: 2px solid var(--edition-pill-edge);
    border-radius: 999px;
    background: var(--white);
}

.edition-pill {
    flex: 0 0 auto;
    padding: 0.4rem var(--space-4);
    border-radius: 999px;
    background-color: var(--white);
    color: var(--gray-700);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s;
}

.edition-pill:hover {
    color: var(--link-blue);
}

.topology-carousel:has(#topology-pro:checked)   .edition-pill[for="topology-pro"],
.topology-carousel:has(#topology-cloud:checked) .edition-pill[for="topology-cloud"],
.topology-carousel:has(#topology-local:checked) .edition-pill[for="topology-local"] {
    background: var(--link-blue);
    color: var(--white);
}

.topology-carousel:has(#topology-pro:focus-visible)   .edition-pill[for="topology-pro"],
.topology-carousel:has(#topology-cloud:focus-visible) .edition-pill[for="topology-cloud"],
.topology-carousel:has(#topology-local:focus-visible) .edition-pill[for="topology-local"] {
    outline: 2px solid var(--link-blue);
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .edition-pill {
        padding-inline: var(--space-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .topology-slide {
        transition: none;
    }

    /* No animation, no 'animationend' — auto-advance stops; prev/next still work. */
    .topology-progress {
        display: none;
    }
}

/* Narrowest two-column widths: the CTA labels are long ("Get Started with
   Datomic Cloud") and the base .btn inline padding of 2rem pushes them past
   the caption column. Below 901px the slide is single-column and roomy. */
@media (min-width: 901px) and (max-width: 1100px) {
    .topology-slide .btn {
        padding-inline: var(--space-5);
    }
}

@media (max-width: 900px) {
    .topology-slides {
        padding: var(--space-6);
    }

    .topology-slide {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        margin-inline: var(--space-6);
    }

    /* At full single-column width the diagram dwarfs the caption. */
    .topology-diagram {
        display: block;
        max-inline-size: 28rem;
        margin-inline: auto;
    }

    /* Stacked: DOM order (caption, then diagram) governs both slides. */
    #slide-cloud > .topology-caption,
    #slide-cloud > .topology-diagram {
        order: initial;
    }
}

/* Below 560px, arrows are dropped for swipe: the track scrolls one slide
   per snap point instead of crossfading, and the pills stay as the
   visible/labeled control. */
@media (max-width: 560px) {
    .topology-nav {
        display: none;
    }

    /* No touch equivalent of the desktop hover-pause exists; disabling the
       animation (rather than just hiding it) also stops 'animationend',
       so auto-advance is off outright. */
    .topology-progress {
        display: none;
    }

    .topology-slides {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-block: var(--space-4);
        padding-inline: 0;
    }

    /* Gutter lives on the slide itself, not the track: padding on a
       scroll container only insets before the first item and after the
       last, so a track-level inline padding lets the next slide's edge
       bleed into view at rest. */
    .topology-slide {
        box-sizing: border-box;
        margin-inline: 0;
        padding-inline: var(--space-4);
        flex: 0 0 100%;
        scroll-snap-align: start;
        visibility: visible;
        opacity: 1;
        transition: none;
    }

    .topology-slide .btn {
        padding-inline: var(--space-4);
        font-size: var(--text-sm);
    }
}

@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
    .topology-slides {
        scroll-behavior: auto;
    }
}

.homepage-benefits {
    padding: 0 0 var(--space-20);
    background: var(--white);
    border-bottom: 1px solid var(--border);
}

/* Green rail continues from under the "Build to remember" card down into the
   matching band. The other two cards get a matching rail dropping from their
   center, but they don't connect to anything below — the green band that
   follows immediately is opaque, so the stripes simply run out of room and
   disappear behind it. Only while the cards are a row — stacked, a card no
   longer sits directly above its rail. Stripe height matches the section's
   bottom padding, so each starts right at its card's bottom edge. */
@media (min-width: 769px) {
    .homepage-benefits {
        background-image: var(--rail-band), var(--rail-band-2), var(--rail-band-3);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: bottom, bottom, bottom;
        background-size: 100% var(--space-20), 100% var(--space-20), 100% var(--space-20);
    }
}

/* Benefits follow the customer proof strip. */
.benefits {
    margin-top: var(--space-16);
}

.benefit-card {
    position: relative;
    padding-inline: 1.5rem;
}

.benefit-card-head {
    text-align: center;
}

.benefit-card-link {
    color: inherit;
    text-decoration: none;
}

/* Stretched-link: the pseudo-element covers the whole card so the card
   itself is clickable. */
.benefit-card-link::before {
    content: "";
    position: absolute;
    inset: 0;
}

.benefit-card h3 {
    font-family: var(--font-sans);
    font-size: var(--text-2xl);
    font-weight: var(--fw-light);
    line-height: var(--lh-tight);
    color: var(--text);
}

.benefit-card-subtitle {
    font-size: var(--text-sm-plus);
    color: var(--gray-600);
}

/* Two accent families per card: --benefit-accent is the text-safe --link-*
   (title hover); --benefit-tint is the decorative --accent-* (border, surface).
   Declaring both here keeps the hover rules below color-agnostic. */
.benefit-card.card--accent-top-green {
    --benefit-accent: var(--link);
    --benefit-tint: var(--accent);
    --benefit-surface: color-mix(in srgb, var(--border) 30%, var(--white));
}

.benefit-card.card--accent-top-blue {
    --benefit-accent: var(--link-blue);
    --benefit-tint: var(--accent-blue);
    --benefit-surface: var(--surface-blue);
}

.benefit-card.card--accent-top-purple {
    --benefit-accent: var(--link-purple);
    --benefit-tint: var(--accent-purple);
    --benefit-surface: var(--surface-purple);
}

.benefit-card-link:hover {
    color: color-mix(in srgb, var(--benefit-accent) 70%, black);
}

/* Whole card is the click target (stretched-link via .benefit-card-link::before),
   so hover feedback must read from anywhere in the card, not just the title. */
.benefit-card:hover,
.benefit-card:has(.benefit-card-link:focus-visible) {
    border-inline-color: color-mix(in srgb, var(--benefit-tint) 70%, var(--benefit-accent));
    border-bottom-color: color-mix(in srgb, var(--benefit-tint) 70%, var(--benefit-accent));
    background: var(--benefit-surface);
    box-shadow: 0 8px 24px rgba(28, 36, 33, 0.08);
}

/* Features Section */
.features {
    position: relative;
    overflow: hidden;
    padding: var(--space-24) 0;
}

.features .container {
    position: relative;
}

.features h2 {
    font-size: var(--text-4xl);
    font-weight: var(--fw-light);
    text-align: left;
    margin-bottom: var(--space-4);
    color: var(--gray-900);
    line-height: var(--lh-snug);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.features-card {
    --features-icon-size: 2.7rem;
    position: relative;
    overflow: hidden;
    padding-top: 1.9rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid color-mix(in srgb, var(--border) 85%, var(--white));
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(28, 36, 33, 0.06);
    backdrop-filter: blur(8px);
}

/* Titles are single-line, so center them against the taller icon. */
.features-card-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-3);
    row-gap: 0;
}

.features-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, var(--link) 0%, var(--accent) 100%);
    opacity: 0.95;
}

.features-card-head {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Fixed height keeps every card's title row the same height, so titles
   align across a grid row even when an icon is optically oversized. */
.features-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: var(--features-icon-size);
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.features-icon-img {
    width: var(--features-icon-size);
    height: var(--features-icon-size);
}

/* The Clojure mark reads small at nominal size; overflows the badge box. */
.features-icon-img-clojure {
    width: 3.1rem;
    height: 3.1rem;
}

.features-card h3 {
    font-family: var(--font-sans);
    font-size: var(--text-2xl);
    font-weight: var(--fw-light);
    margin-bottom: 0;
    color: var(--gray-900);
    line-height: var(--lh-tight);
}

/* .card supplies a space-3 column gap; this only tops it up. */
.features-card > p:last-child {
    flex: 1;
    margin-top: var(--space-2);
    color: var(--gray-600);
    line-height: var(--lh-loose);
    font-size: var(--text-base);
}

@media (max-width: 1100px) {
    .hero-layout {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .hero-visual {
        max-width: 42rem;
        margin: 0 auto;
        justify-content: center;
    }

    .hero-visual img {
        width: 100%;
        margin-left: 0;
    }

    /* Keep the diagram with the actions until the narrow layout starts. */
    @media (min-width: 769px) {
        .hero-layout {
            grid-template-columns: minmax(min-content, 1.1fr) minmax(15rem, 0.9fr);
            align-items: center;
        }

        .hero-text {
            display: contents;
        }

        .hero h1 {
            grid-column: 1 / -1;
            margin-bottom: 0;
        }

        .hero-details {
            grid-column: 1;
        }

        .hero-details .cta-group {
            flex-wrap: nowrap;
        }

        .hero-visual {
            grid-column: 2;
            grid-row: 2;
        }
    }

    .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .use-case-layout {
        grid-template-columns: 1fr;
    }
}

/* CTA Section */
.cta-section {
    padding: var(--space-24) 0;
    text-align: center;
}

.cta-logo {
    height: 2.5rem;
    width: auto;
    margin-bottom: var(--space-8);
}

.cta-section h2 {
    font-size: var(--text-4xl);
    font-weight: var(--fw-light);
    line-height: var(--lh-snug);
    margin-bottom: var(--space-8);
    color: var(--white);
}

.cta-section .btn-secondary {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.4);
}

.cta-section .btn-secondary:hover {
    border-color: var(--white);
    color: var(--white);
}

.cta-group-centered {
    justify-content: center;
}

/* Blog Posts Section */
.blog-posts {
    padding: var(--space-24) 0;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
}

.blog-posts h2 {
    font-size: var(--text-4xl);
    font-weight: var(--fw-light);
    margin-bottom: var(--space-10);
    color: var(--gray-900);
}

.section-band {
    padding: var(--space-24) 0;
}

/* Background utility classes — pair with a layout class to color a section. */
.bg-surface {
    background: var(--surface);
}

.bg-dark {
    background: var(--dark-bg);
}

.bg-white-band {
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

/* Green-tinted gradient matching the homepage accent, for the .features band. */
.bg-features-gradient {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 26%, transparent) 0, transparent 34%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--border) 75%, transparent) 0, transparent 30%),
        linear-gradient(180deg, #f7fbf7 0%, #f2f6f2 100%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* Blue section band — cool-complement rhythm to break up green/white sections.
   Whisper-quiet tint matching the .features gradient weight; cornflower backed
   off to 22% since it reads hotter than the green at equal mix. */
.section-blue {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent-blue) 22%, transparent) 0, transparent 34%),
        radial-gradient(circle at bottom left, color-mix(in srgb, var(--border-blue) 75%, transparent) 0, transparent 30%),
        linear-gradient(180deg, var(--surface-blue) 0%, var(--surface-blue-2) 100%);
    border-top: 1px solid var(--border-blue);
    border-bottom: 1px solid var(--border-blue);
}

/* Benefits narrative bands — flat, shallow washes ending at the surface token
   rather than mixing further accent color in. */
/* Each interior band gets a top hairline in its own color (one seam per
   boundary, not top+bottom per band) so the four read as distinct sections
   without the heavier fenced-box look of full per-band borders. */
/* Rail geometry is shared with .homepage-benefits below so the green card's
   rail stub and the band's rail resolve to the same x. Both are full-bleed
   blocks, so 100% is the same width in each. */
.benefits-narrative .section-band,
.homepage-benefits {
    --rail-inset: max(2rem, calc((100% - var(--max-width)) / 2 + 2rem));
    --rail-x: calc(var(--rail-inset) + var(--card-width) / 2);
    --rail-width: 3rem;
    --rail-band: linear-gradient(
        90deg,
        transparent calc(var(--rail-x) - var(--rail-width) / 2),
        var(--rail-color) calc(var(--rail-x) - var(--rail-width) / 2),
        var(--rail-color) calc(var(--rail-x) + var(--rail-width) / 2),
        transparent calc(var(--rail-x) + var(--rail-width) / 2)
    );

    /* Column centers of the benefit card grid: every rail x derives from
       --card-width, so band rails and card stubs cannot drift apart. */
    --card-gap: var(--space-8);
    --card-width: calc((100% - 2 * var(--rail-inset) - 2 * var(--card-gap)) / 3);
    --rail-x-2: calc(var(--rail-inset) + var(--card-width) + var(--card-gap) + var(--card-width) / 2);
    --rail-x-3: calc(var(--rail-inset) + 2 * (var(--card-width) + var(--card-gap)) + var(--card-width) / 2);
    --rail-band-2: linear-gradient(
        90deg,
        transparent calc(var(--rail-x-2) - var(--rail-width) / 2),
        color-mix(in srgb, var(--accent-blue) 25%, white) calc(var(--rail-x-2) - var(--rail-width) / 2),
        color-mix(in srgb, var(--accent-blue) 25%, white) calc(var(--rail-x-2) + var(--rail-width) / 2),
        transparent calc(var(--rail-x-2) + var(--rail-width) / 2)
    );
    --rail-band-3: linear-gradient(
        90deg,
        transparent calc(var(--rail-x-3) - var(--rail-width) / 2),
        color-mix(in srgb, var(--accent-purple) 14%, white) calc(var(--rail-x-3) - var(--rail-width) / 2),
        color-mix(in srgb, var(--accent-purple) 14%, white) calc(var(--rail-x-3) + var(--rail-width) / 2),
        transparent calc(var(--rail-x-3) + var(--rail-width) / 2)
    );
}

.benefits-narrative .section-band {
    border-bottom: none;
}

.benefits-narrative .section-band:first-child {
    border-top: 1px solid var(--border);
}

.benefits-narrative .section-band:last-child {
    border-bottom: 1px solid var(--border-purple);
}

/* Blue section band */
.benefits-narrative .section-blue {
    --card-accent: color-mix(in srgb, var(--accent-blue) 55%, white);
    background: var(--rail-band-2);
    border-top: 1px solid var(--border-blue);
}

.benefits-narrative .section-blue .strong {
    color: var(--link-blue);
}

.benefits-narrative .section-green .strong {
    color: var(--link);
}

.benefits-narrative .section-purple .strong {
    color: var(--link-purple);
}

/* Purple section band — matches the "Decoupled scaling" benefit card. */
.benefits-narrative .section-purple {
    background: var(--rail-band-3);
    border-top: 1px solid var(--border-purple);
}

.card--accent-top-blue {
    border-top-color: var(--accent-blue);
}

.card--interactive.card--accent-top-blue {
    background: color-mix(in srgb, var(--surface-blue) 60%, var(--white));
    border: 1px solid color-mix(in srgb, var(--border-blue) 88%, var(--accent-blue) 12%);
    border-top-color: var(--accent-blue);
}

.card--accent-top-purple {
    border-top-color: var(--accent-purple);
}

.card--interactive.card--accent-top-purple {
    background: color-mix(in srgb, var(--surface-purple) 60%, var(--white));
    border: 1px solid color-mix(in srgb, var(--border-purple) 88%, var(--accent-purple) 12%);
    border-top-color: var(--accent-purple);
}

.card--accent-top-green {
    border-top-color: var(--accent);
}

.card--interactive.card--accent-top-green {
    background: color-mix(in srgb, var(--border) 18%, var(--white));
    border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent) 12%);
    border-top-color: var(--accent);
}

/* Green section band. Rail color is declared once for the band and the card
   grid above it so the two halves of the rail cannot drift apart. */
.benefits-narrative .section-green,
.homepage-benefits {
    --rail-color: color-mix(in srgb, var(--accent) 25%, white);
}

.benefits-narrative .section-green {
    background: var(--rail-band);
}

.section-header {
    margin-bottom: var(--space-10);
}

.section-header > h1,
.section-header > h2 {
    font-size: var(--text-4xl);
    font-weight: var(--fw-light);
    margin-bottom: var(--space-4);
    line-height: var(--lh-snug);
    color: var(--gray-900);
}

.section-header > .section-intro {
    margin-bottom: 0;
}

/* Prevent page title from wrapping before the layout stacks at 768px. */
@media (max-width: 980px) {
    .hero h1 {
        font-size: var(--text-4xl);
    }

    .hero-subtitle {
        font-size: var(--text-lg);
    }

    .section-header > h2,
    .features h2,
    .editions h2,
    .cta-section h2 {
        font-size: var(--text-3xl);
    }
}

/* Position the heading+intro (or list) as a left-aligned column within the
   container — the block moves, its internal text stays ragged-right. */
.align-center,
.align-right {
    max-width: 65ch;
}

.align-center {
    margin-left: auto;
    margin-right: auto;
}

.align-right {
    margin-left: auto;
    margin-right: 0;
}

.use-case-points.align-center {
    margin-left: auto;
    margin-right: auto;
}

.use-case-points.align-right {
    margin-left: auto;
    margin-right: 0;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-600);
}

.card-link {
    margin-top: auto;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--link);
    text-decoration: none;
}

.card-link:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.homepage-section-cta {
    text-align: center;
    padding-top: var(--space-8);
}

.homepage-section-cta a {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--link);
    text-decoration: none;
}

.homepage-section-cta a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.pathway-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
    list-style: none;
}

.pathway-step {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 1.5rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* On the blue band, pathway cards adopt the blue accent so section and cards read as one identity. */
.section-blue .pathway-step {
    border-color: color-mix(in srgb, var(--border-blue) 88%, var(--accent-blue) 12%);
    border-top: 3px solid var(--accent-blue);
}

.section-blue .pathway-step .card-link {
    color: var(--link-blue);
}

.section-blue .pathway-step .card-link:hover {
    color: var(--link-blue-hover);
}

.pathway-step h3,
.use-case-featured h3,
.use-case-brief h3,
.decoupled-scaling-cards h3 {
    font-family: var(--font-sans);
    font-size: var(--text-2xl);
    font-weight: var(--fw-light);
    line-height: var(--lh-tight);
    color: var(--text);
}

.pathway-step-subtitle {
    margin-top: calc(var(--space-3) * -0.333);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-600);
}

.pathway-step-links {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.pathway-step p,
.use-case-featured p,
.use-case-brief p,
.decoupled-scaling-cards p,
.topology-caption p {
    color: var(--gray-600);
    font-size: var(--text-base);
    line-height: var(--lh-loose);
}

@media (min-width: 861px) and (max-width: 980px) {
    .pathway-steps {
        gap: var(--space-5);
    }

}

@media (max-width: 860px) {
    .pathway-steps {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .pathway-step {
        padding: 1.25rem;
        min-height: auto;
    }
}

.use-case-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.95fr);
    gap: var(--space-6);
    align-items: stretch;
}

.use-case-featured,
.use-case-brief {
    border: 1px solid var(--border);
    border-radius: 8px;
}

.use-case-featured {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 2rem;
    background: var(--white);
    border-left: 4px solid var(--link);
    box-shadow: 0 12px 32px rgba(28, 36, 33, 0.05);
}

.benefits-narrative .use-case-featured {
    border-left-color: var(--card-accent, var(--rail-color));
}

.use-case-stack {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-5);
}

.use-case-brief {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 1.5rem;
    background: var(--white);
}

.use-case-points {
    margin: 0;
    padding-left: 1.25rem;
    font-size: var(--text-base);
    color: var(--gray-600);
}

.use-case-points li + li {
    margin-top: var(--space-2);
}

/* Suggestive industry examples at the card foot, ancillary to the headline. */
.use-case-domains {
    margin-top: auto;
    text-align: right;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    font-size: var(--text-xs);
    font-weight: var(--fw-normal);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-600);
}

.workload-fit-band {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--border) 60%, transparent) 0, transparent 28%),
        linear-gradient(180deg, var(--white) 0%, var(--surface) 100%);
}

.workload-fit-layout {
    display: grid;
    gap: var(--space-12);
}

.workload-fit-duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26rem;
    gap: var(--space-20);
    align-items: stretch;
}

/* Second row mirrors the first: same column widths, opposite sides.
   Poor Fit column is a fixed width, not fr, so it never absorbs
   space freed by narrowing the Good Fit column. */
.workload-fit-duo--mirror {
    grid-template-columns: 26rem minmax(0, 1fr);
}

.workload-fit-card {
    gap: var(--space-4);
    min-height: auto;
}

.workload-fit-primary {
    background: var(--white);
    border-left: 4px solid var(--link);
    box-shadow: 0 12px 32px rgba(28, 36, 33, 0.05);
}

.workload-fit-anti {
    align-self: center;
    border-width: 2px;
    border-style: dashed;
    border-color: var(--border);
    background: var(--white);
}

/* Below ~960px the fixed 26rem column leaves too little room for the
   fluid column's text; stack single-column before that squeeze hits. */
@media (max-width: 960px) {
    .workload-fit-duo,
    .workload-fit-duo--mirror {
        grid-template-columns: 1fr;
    }

    .workload-fit-anti {
        align-self: stretch;
    }
}

.workload-fit-primary h2,
.workload-fit-primary h3,
.workload-fit-anti h2,
.workload-fit-anti h3 {
    font-family: var(--font-sans);
    line-height: var(--lh-tight);
}

.workload-fit-primary h2,
.workload-fit-primary h3 {
    color: var(--text);
    font-size: var(--text-xl);
    font-weight: var(--fw-light);
}

.workload-fit-anti h2,
.workload-fit-anti h3 {
    color: var(--gray-600);
    font-size: var(--text-lg);
    font-weight: var(--fw-light);
}

.workload-fit-primary p,
.workload-fit-primary li {
    color: var(--gray-700);
}

.workload-fit-anti p,
.workload-fit-anti li,
.workload-fit-anti .eyebrow {
    color: var(--gray-600);
}

.workload-fit-primary p,
.workload-fit-anti p {
    line-height: var(--lh-loose);
}

.workload-fit-points {
    margin: 0;
    padding-left: 1.25rem;
}

.workload-fit-points li + li {
    margin-top: var(--space-2);
}

.workload-fit-sectors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.workload-fit-sectors li {
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--gray-700);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
}

.runtime-options .topology-caption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-5);
    min-height: 100%;
}

/* Two classes, not one: .editions h2 sets a bottom margin in later media
   blocks, and a single-class selector here would lose to it. */
.runtime-options .topology-caption h2 {
    margin-bottom: 0;
}

/* Flex stretch would otherwise force the CTA to the column's full width. */
.runtime-options .topology-caption .btn {
    align-self: flex-start;
}

/* Blog Listing Page */

.blog-post {
    padding-bottom: var(--space-10);
    margin-bottom: var(--space-10);
    border-bottom: 1px solid var(--border);
}

.blog-post:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

/* .article-content prefix required: the listing sits inside .article-content,
   so a bare class loses to .article-content h2 / p. */
.article-content .blog-post-title {
    margin-top: 0;
    margin-bottom: var(--space-1);
}

.article-content .blog-post-title a {
    color: var(--text);
    text-decoration: none;
}

.article-content .blog-post-title a:hover {
    color: var(--link);
}

.article-content .blog-post-date {
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--gray-600);
    margin-bottom: var(--space-5);
}

.blog-post-summary {
    color: var(--gray-700);
    line-height: var(--lh-loose);
    margin-bottom: var(--space-4);
}

.article-content a.blog-post-readmore {
    display: inline-block;
    font-size: var(--text-sm-plus);
    font-weight: var(--fw-semibold);
    color: var(--link);
    text-decoration: none;
    border: 1.5px solid var(--link);
    padding: 0.375rem 0.875rem;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.article-content a.blog-post-readmore:hover {
    background: var(--link);
    color: var(--gray-900);
}

.blog-pagination {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-top: var(--space-8);
    font-size: var(--text-sm-plus);
}

.blog-pagination-prev,
.blog-pagination-next,
.article-content p.blog-archive-link a {
    font-weight: var(--fw-semibold);
    color: var(--link);
    text-decoration: none;
}

.blog-pagination-prev:hover,
.blog-pagination-next:hover,
.article-content p.blog-archive-link a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.blog-pagination-prev.disabled,
.blog-pagination-next.disabled {
    color: var(--gray-300);
    pointer-events: none;
}

.blog-pagination-count {
    color: var(--gray-600);
}

/* Reads as attached to the pagination row, not a new section. */
.blog-archive-link {
    margin-top: var(--space-5);
    font-size: var(--text-sm-plus);
}

/* Archive month groups */

.archive-group + .archive-group {
    margin-top: var(--space-6);
}

.archive-list {
    margin: 0;
    padding-left: 1.5rem;
}

.article-content .archive-item {
    padding: 0.125rem 0;
}

.article-content .archive-item a:hover {
    text-decoration: underline;
}

/* Blog Post Navigation */

.blog-post-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-8);
    margin-top: var(--space-4);
}

.article-content a.blog-post-nav-prev,
.article-content a.blog-post-nav-next {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 45%;
    text-decoration: none;
    color: var(--text);
}

.article-content a.blog-post-nav-next {
    margin-left: auto;
    text-align: right;
}

.blog-post-nav-label {
    font-size: var(--text-xs-plus);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-600);
}

.blog-post-nav-title {
    font-size: var(--text-sm-plus);
    font-weight: var(--fw-medium);
    color: var(--link);
    line-height: var(--lh-snug);
}

.article-content a.blog-post-nav-prev:hover .blog-post-nav-title,
.article-content a.blog-post-nav-next:hover .blog-post-nav-title {
    text-decoration: underline;
}

/* Footer */
.footer {
    background: var(--surface);
    color: var(--text);
    padding: var(--space-16) 0 var(--space-8);
    border-top: 1px solid var(--border);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-12);
    margin-bottom: var(--space-12);
    max-width: 640px;
    margin-inline: auto;
}

.footer-column-title {
    font-family: var(--font-sans);
    color: var(--text);
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-4);
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: var(--space-2);
}

.footer-column a {
    color: var(--gray-600);
    font-size: var(--text-base);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-column a:hover {
    color: var(--link);
}

/* Base size set here, not on the bare copyright <p>: a `.footer-bottom-inner p`
   rule would outrank .footer-legal-links and resize it. */
.footer-bottom {
    text-align: center;
    font-size: var(--text-base);
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    color: var(--gray-600);
}

.footer-bottom-inner {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    text-align: left;
}

.footer-legal-links {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
}

.footer-legal-links a {
    color: var(--gray-600);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-legal-links a:hover {
    color: var(--link);
}

.footer-cognitect-logo {
    height: 36px;
    width: auto;
    margin: 0;
    opacity: 0.7;
}

/* Shared logo baseline — size and position overridden per context below */
.card--elevated {
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent) 12%);
    border-radius: 14px;
    padding: 2.5rem;
    box-shadow: 0 16px 36px rgba(28, 36, 33, 0.08);
}

.card--soft {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    background: color-mix(in srgb, var(--surface) 40%, var(--white));
    gap: var(--space-3);
}

/* Wide page header */
.page-hero {
    padding: var(--space-16) 0 var(--space-8);
    background: var(--bg-alt);
}

.page-hero h1 {
    margin-bottom: var(--space-3);
}

/* Stories listing page */

.stories-list {
    padding: var(--space-12) 0 var(--space-16);
}

.stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: var(--space-8);
}

.story-card-logo {
    height: 5rem;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    align-self: center;
}

/* Linked card logo: the <a> becomes the flex child, so it carries the
   centering the img used to have. */
.story-card-logo-link {
    display: block;
    align-self: center;
}

.story-card-logoless p {
    display: flex;
    flex: 1;
    align-items: center;
    margin: 0;
}

.story-card blockquote p {
    font-size: var(--text-quote-compact);
    font-style: italic;
    color: var(--text-secondary);
    margin: 0 0 var(--space-2);
}

.story-card blockquote footer {
    font-size: var(--text-quote-attribution);
    color: var(--gray-600);
}

/* Featured story with video */

.story-featured {
    padding: var(--space-12) 0 0;
}

.story-featured-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: center;
}

.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Facade thumbnail fills the 16:9 box; cover crops any off-ratio image. */
.video-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Play button centered over the thumbnail. */
.video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--link);
    color: var(--white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: background 0.2s, transform 0.2s;
}

.video-play-button:hover {
    background: var(--link-hover);
    transform: translate(-50%, -50%) scale(1.08);
}

.video-play-button:focus-visible {
    outline: 3px solid var(--link-blue);
    outline-offset: 3px;
}

.video-play-icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
    margin-left: 2px; /* re-centers the triangle glyph inside the circle */
}

.story-featured-quote {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.story-featured-quote blockquote {
    margin: var(--space-6) 0;
}

.story-featured-quote blockquote p {
    font-size: var(--text-base);
    font-style: italic;
    color: var(--text-secondary);
    line-height: var(--lh-loose);
    margin: 0 0 var(--space-3);
}

.story-featured-quote blockquote footer {
    font-size: var(--text-quote-attribution);
    color: var(--gray-600);
}

.story-featured--reverse .story-featured-quote {
    order: -1;
}

.story-featured-quote .btn {
    align-self: flex-start;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .story-featured-layout {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .story-featured--reverse .story-featured-quote {
        order: 0;
    }
}

/* Individual story page */
.story {
    --story-copy-width: 70ch;
    padding: var(--space-16) 0;
}

.story-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    padding-bottom: var(--space-10);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-10);
}

.story-logo {
    height: 6rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.story-title {
    margin: 0;
    font-size: var(--text-4xl);
    font-weight: var(--fw-light);
    line-height: var(--lh-snug);
    color: var(--text-primary);
}

.story-pullquote {
    width: 100%;
    max-width: var(--story-copy-width);
    margin: 0;
    padding: 1.5rem 2rem;
    background: var(--bg-alt);
    border-left: 4px solid var(--accent);
    border-radius: 0 6px 6px 0;
}

.story-pullquote p {
    font-size: var(--text-lg);
    font-style: italic;
    margin: 0 0 var(--space-3);
    color: var(--text-primary);
}

.story-pullquote footer {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--gray-600);
    font-style: normal;
}

.story-body {
    width: 100%;
    max-width: var(--story-copy-width);
}

.story-body h2 {
    font-size: var(--text-3xl);
    font-weight: var(--fw-light);
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
    color: var(--gray-900);
}

.story-body p {
    color: var(--gray-700);
    line-height: var(--lh-loose);
    margin-bottom: var(--space-4);
}

.story-footer {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border);
}

.story-back {
    font-size: var(--text-sm-plus);
    font-weight: var(--fw-semibold);
    color: var(--link);
    text-decoration: none;
}

.story-back:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* Responsive Design */

/* Tablets and below */
@media (max-width: 768px) {
    .nav:has(.nav-toggle:checked) {
        border-bottom-color: transparent;
    }

    .nav-toggle-label {
        display: flex;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        flex-direction: column;
        gap: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }

    .nav-toggle:checked ~ .nav-links {
        max-height: 480px;
        padding-bottom: var(--space-2);
        border-bottom: 3px solid var(--accent);
    }

    .nav-links li {
        border-bottom: 1px solid var(--gray-200);
    }

    .nav-links li:last-child {
        border-bottom: none;
    }

    .nav-links a {
        display: block;
        padding: 1rem 2rem;
        color: var(--gray-700);
    }

    /* Toggle is a <button>; fill the row like the mobile links above */
    .nav-dropdown-toggle {
        display: block;
        width: 100%;
        text-align: left;
        padding: 1rem 2rem;
    }

    /* Reveal still driven by aria-expanded; current section auto-expands via nav.js */

    .nav-dropdown {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        border-top: 1px solid var(--gray-200);
        background: var(--gray-50);
        padding: 0;
        min-width: 0;
    }

    .nav-dropdown li {
        border-bottom: 1px solid var(--gray-200);
    }

    .nav-dropdown li a {
        padding: 0.875rem 2rem 0.875rem 3rem;
        font-size: var(--text-sm-plus);
    }

    .nav-dropdown a[aria-current="page"] {
        padding-left: calc(3rem - 5px);
        border-left-width: 5px;
        background: var(--border);
    }

    /* Caret stays visible on mobile so toggles read as expandable */
    .nav-dropdown-toggle::after {
        margin-left: 0.4rem;
    }

    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) {
        transform: rotate(45deg) translate(7px, 7px);
    }

    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    .nav-search-toggle {
        margin-left: 0.5rem;
    }
    .nav-toggle-label {
        margin-left: auto;
    }
    .nav-search-inner {
        padding: 0.625rem 1.5rem;
    }

    .container {
        padding: 0 1.5rem;
    }

    .hero {
        padding: var(--space-16) 0 var(--space-12);
    }

    .homepage-hero {
        padding-bottom: 0;
    }

    .article {
        padding: var(--space-10) 0 var(--space-16);
    }

    .hero-layout {
        grid-template-columns: minmax(min-content, 1.2fr) minmax(0, 0.8fr);
        gap: var(--space-4);
        align-items: center;
    }

    .hero-text {
        display: contents;
    }

    .hero-details .cta-group {
        flex-wrap: nowrap;
    }

    .hero h1 {
        grid-column: 1 / -1;
        margin-bottom: var(--space-2);
    }

    .hero-details {
        grid-column: 1;
    }

    .hero-visual {
        display: flex;
        grid-column: 2;
        grid-row: 2;
        max-width: none;
        margin: 0;
        justify-content: center;
    }

    .hero-subsubtitle {
        margin-bottom: var(--space-8);
    }

    .hero-logos {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        justify-items: center;
        gap: var(--space-5);
        margin: var(--space-16) 0 var(--space-10);
    }

    .hero-logos-label {
        display: block;
        grid-column: 1 / -1;
        margin: 0 0 var(--space-2);
        color: var(--gray-600);
        font-size: var(--text-sm);
    }

    .hero-logo {
        max-width: 100%;
    }

    .homepage-benefits {
        padding: var(--space-6) 0 var(--space-16);
    }

    .benefits {
        margin-top: 0;
    }

    .card-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    /* ch is relative to font-size, so 60ch here (base font-size) and
       60ch on .section-intro (--text-md) aren't the same width. Scale by
       the font-size ratio so the two match. */
    .decoupled-scaling-cards {
        max-width: calc(60ch * (var(--text-md) / 1rem));
        margin-left: auto;
        margin-right: auto;
    }

    .card--elevated {
        padding: 1.75rem;
    }

    .card--soft {
        padding: 1.25rem;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .pathway-steps {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .pathway-step {
        padding: 1.25rem 1.25rem 1.25rem 3rem;
        min-height: auto;
    }

    .use-case-layout {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .use-case-featured {
        padding: 1.5rem;
    }

    .runtime-options .topology-caption {
        padding: 1.25rem;
    }

    .section-header {
        margin-bottom: var(--space-8);
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .features-card {
        padding: 1.5rem;
    }

    .blog-post-nav {
        flex-direction: column;
        gap: var(--space-5);
    }

    .article-content a.blog-post-nav-next {
        margin-left: 0;
        text-align: left;
    }
}

/* Hero stacks to one column here — the h1 line-wraps in the two-column
   layout below this width. */
@media (max-width: 700px) {
    .hero-layout {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .hero-details {
        display: contents;
    }

    .hero h1 {
        grid-row: 1;
    }

    .hero-subtitle {
        grid-row: 3;
    }

    .hero-subsubtitle {
        grid-row: 4;
    }

    .hero-details .cta-group {
        grid-row: 5;
        justify-content: center;
    }

    .hero-visual {
        grid-column: 1;
        grid-row: 2;
        max-width: 22rem;
        margin: var(--space-2) auto var(--space-6);
    }

    /* Two rows of logos: compact marks above, wide wordmarks below. Five
       equal columns squeeze the wordmarks to an illegible sliver. */
    .hero-logos {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        row-gap: var(--space-5);
    }

    .hero-logo {
        grid-column: span 2;
    }

    .hero-logo[alt="The Climate Corporation"],
    .hero-logo[alt="Netflix"] {
        grid-row: 2;
        grid-column: span 3;
    }
}

/* Small mobile devices */
@media (max-width: 640px) {
    .nav-container {
        padding: 0.75rem 1.5rem;
    }

    .container {
        padding: 0 1rem;
    }

    .hero {
        padding: var(--space-12) 0 var(--space-8);
    }

    /* .hero's shorthand above sets bottom padding; reassert homepage-hero's
       override so it doesn't leak back in below this breakpoint. */
    .homepage-hero {
        padding-bottom: 0;
    }

    .article {
        padding: var(--space-8) 0 var(--space-12);
    }

    .hero-subtitle {
        margin-bottom: var(--space-6);
    }

    .tab-label {
        padding: 0.625rem 1rem;
    }

    .appetizer .tab-panel code {
        font-size: 0.8rem;
    }

    .btn {
        padding: 0.75rem 1.5rem;
        font-size: var(--text-sm-plus);
    }

    .btn-large {
        padding: 0.875rem 2rem;
        font-size: var(--text-base);
    }

    .section-header {
        margin-bottom: var(--space-8);
    }

    .card--elevated {
        padding: 1.5rem;
    }

    .card--soft {
        padding: 1.25rem;
    }

    .features,
    .cta-section,
    .appetizer,
    .section-band {
        padding: var(--space-16) 0;
    }

    .features h2,
    .editions h2,
    .cta-section h2 {
        margin-bottom: var(--space-10);
    }

    .features-card {
        --features-icon-size: 1.875rem;
    }

    .features-icon-img-clojure {
        width: 2.15rem;
        height: 2.15rem;
    }

    .footer {
        padding: var(--space-12) 0 var(--space-6);
    }

    .footer-grid {
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
        column-gap: var(--space-6);
        row-gap: var(--space-8);
        margin-bottom: var(--space-8);
        max-width: none;
    }

    .footer-column:last-child {
        grid-column: 1 / -1;
    }

    .edition-tab-bar {
        flex-direction: column;
    }

}

/* Edition Tabs (Get Started page) */
.edition-tabs {
    margin-top: var(--space-8);
}

.edition-tab-bar {
    display: flex;
    gap: var(--space-4);
    width: 100%;
}

.edition-tab-label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1.25rem;
    border: 2px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.edition-tab-label:hover {
    border-color: var(--link);
}

.edition-tab-name {
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.edition-tab-desc {
    font-size: var(--text-sm);
    color: var(--gray-600);
    line-height: var(--lh-snug);
}

.edition-tab-panel {
    display: none;
    padding-top: 1.5rem;
}

.edition-tabs:has(#local:checked) .edition-tab-panel#panel-local,
.edition-tabs:has(#pro:checked) .edition-tab-panel#panel-pro,
.edition-tabs:has(#cloud:checked) .edition-tab-panel#panel-cloud {
    display: block;
}

/* Page ToC (siderail table of contents) presentation. */
/* Used on Get Started, Sample Datasets, FAQ, and Contact. */
.page-toc ul {
    list-style: none;
    padding-left: 0.75rem;
    border-left: 2px solid var(--border);
}

.page-toc li {
    margin-bottom: 0.125rem;
}

.page-toc li a {
    display: block;
    color: var(--gray-600);
    text-decoration: none;
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    transition: color 0.2s, background 0.2s;
    line-height: var(--lh-snug);
}

.page-toc li a:hover {
    color: var(--link);
    background: var(--surface);
}

.page-toc[data-scrollspy] li a.is-current {
    color: var(--link);
    font-weight: var(--fw-medium);
}

.page-toc-section {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

.page-toc-section > summary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    list-style: none;
    cursor: pointer;
    font-weight: var(--fw-semibold);
    color: var(--gray-700);
    margin-bottom: 0.25rem;
    transition: color 0.2s;
}

.page-toc-section > summary::-webkit-details-marker {
    display: none;
}

.page-toc-section > summary::after {
    content: '\25BE';
    font-size: 1.1rem; /* no token */
    line-height: 1;
    margin-left: var(--space-2);
    color: var(--gray-600);
    transition: transform 0.2s;
}

.page-toc-section[open] > summary::after {
    transform: rotate(180deg);
}

.page-toc-section > summary:hover {
    color: var(--link);
}

/* The rail sits in the free space to the right of the 720px .article-content
   measure, so the panel must overflow its own column to reach it. Gated above
   68rem: 720 + 48 + 220 = 988px of content needs a 1052px viewport. */
@media (min-width: 68rem) {
    .edition-tabs:has(#local:checked) .edition-tab-panel#panel-local,
    .edition-tabs:has(#pro:checked) .edition-tab-panel#panel-pro,
    .edition-tabs:has(#cloud:checked) .edition-tab-panel#panel-cloud {
        display: grid;
        width: calc(100% + 220px + var(--space-12));
        grid-template-columns: minmax(0, 1fr) 220px;
        grid-template-areas:
            "head toc"
            "body toc";
        column-gap: var(--space-12);
        align-items: start;
    }

    .edition-tab-panel > h2 {
        grid-area: head;
    }

    .page-toc-body {
        grid-area: body;
        min-width: 0;
    }

    .page-toc-layout {
        display: grid;
        width: calc(100% + 220px + var(--space-12));
        grid-template-columns: minmax(0, 1fr) 220px;
        grid-template-areas: "body toc";
        column-gap: var(--space-12);
        align-items: start;
    }

    .page-toc[data-scrollspy] {
        grid-area: toc;
        position: sticky;
        top: calc(var(--nav-height) + var(--space-4));
        max-height: calc(100vh - var(--nav-height) - var(--space-8));
        overflow-y: auto;
        margin-top: var(--space-12); /* match .article-content h2 so the rail starts level with "Hello, Datomic <edition>". -- overridden for sectioned page-tocs below */
        padding-right: var(--space-2);
        font-size: var(--text-sm);
    }
    .page-toc[data-scrollspy]:has(.page-toc-section) {
        margin-top: 0; /* zero it out for pages whose page-toc contains collapsible sections (currently only FAQ) */
    }

}

/* Each page-toc section draws its own left rule; the rail drops its rule
   here to avoid a doubled line, at every width. */
.page-toc > ul:has(.page-toc-section) {
    padding-left: 0;
    border-left: none;
}

/* Below the two-column gate, scrollspy-enabled page-tocs stack above the
   content as plain, fully expanded lists -- same treatment as the Contact
   rail at narrow widths, so there's no toggle to click or keyboard-trap to
   trip. FAQ's three groups keep their own native <details> disclosure
   (page-toc-section rules above), unaffected by this. */
@media (max-width: 67.99rem) {
    .page-toc[data-scrollspy] {
        margin: var(--space-6) 0;
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    .page-toc > ul {
        border-left: none;
        padding-left: 0;
    }
}

.edition-tabs:has(#local:checked) label[for="local"],
.edition-tabs:has(#pro:checked) label[for="pro"],
.edition-tabs:has(#cloud:checked) label[for="cloud"] {
    border-color: var(--link);
    background: color-mix(in srgb, var(--link) 6%, transparent);
}

.build-tool-tabs {
    --build-tool-panel-pad-block: var(--space-4);
    --build-tool-panel-pad-inline: var(--space-5);
    margin: var(--space-4) 0 var(--space-8);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: var(--gray-50);
    overflow: hidden;
}

.build-tool-tabs .tab-bar,
.build-tool-tabs .tab-label {
    background: var(--white);
}

.build-tool-tabs .tab-panels {
    position: relative;
}

.build-tool-panel {
    position: relative;
}

.build-tool-panel pre {
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.build-tool-panel code {
    background: transparent;
    border-radius: 0;
}

.build-tool-panel pre code,
.build-tool-panel pre code.hljs {
    display: block;
    padding: var(--build-tool-panel-pad-block) calc(var(--build-tool-panel-pad-inline) + 2rem + var(--space-4)) var(--build-tool-panel-pad-block) var(--build-tool-panel-pad-inline);
}

/* Shared copy widget (build-tool panels + listing blocks) */
.copy-widget {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--white);
    color: var(--gray-600);
    cursor: pointer;
    flex-shrink: 0;
}

.copy-btn:hover {
    border-color: var(--gray-600);
    color: var(--text);
}

.copy-btn.is-copied {
    border-color: var(--border);
    color: var(--link-hover);
}

.copy-btn.is-error {
    border-color: #c0392b;
    color: #c0392b;
}

.copy-feedback {
    font-size: 0.75rem;
    color: var(--link-hover);
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    white-space: nowrap;
}

.copy-feedback.is-visible {
    opacity: 1;
}

.build-tool-panel .copy-widget {
    top: var(--build-tool-panel-pad-block);
    right: var(--build-tool-panel-pad-inline);
}

.copy-code-blocks .listingblock > .content .copy-widget {
    top: 0.75rem;
    right: 0.75rem;
}

@media (max-width: 640px) {
    .build-tool-tabs {
        --build-tool-panel-pad-inline: var(--space-4);
    }
}

.build-tool-tabs:has(.build-tool-input[data-build-tool="deps"]:checked) .build-tool-panel[data-build-tool-panel="deps"],
.build-tool-tabs:has(.build-tool-input[data-build-tool="lein"]:checked) .build-tool-panel[data-build-tool-panel="lein"] {
    visibility: visible;
}

.build-tool-tabs:has(.build-tool-input[data-build-tool="deps"]:checked) label[for="local-build-tool-deps"],
.build-tool-tabs:has(.build-tool-input[data-build-tool="lein"]:checked) label[for="local-build-tool-lein"] {
    color: var(--link);
    border-bottom-color: var(--link);
}

/* REPL-launch tabs: command-line vs editor-integrated require form.
   Prefix selectors cover per-edition id suffixes (-local, -pro, and the
   unsuffixed Cloud block); :has() scopes each .repl-tabs group independently. */
.repl-tabs:has([id^="repl-cli"]:checked) [id^="repl-panel-cli"],
.repl-tabs:has([id^="repl-editor"]:checked) [id^="repl-panel-editor"] {
    visibility: visible;
}

/* Outrank `.article-content pre` margin: drop its top gap, keep breathing room below. */
.repl-tabs .tab-panel pre {
    margin: 0 0 1.5rem;
}

.repl-tabs:has([id^="repl-cli"]:checked) label[for^="repl-cli"],
.repl-tabs:has([id^="repl-editor"]:checked) label[for^="repl-editor"] {
    color: var(--link);
    border-bottom-color: var(--link);
}

/* Very small mobile devices */
@media (max-width: 480px) {
    .hero {
        padding-top: var(--space-8);
    }

    .hero h1 {
        padding-bottom: var(--space-4);
    }

    .nav-container {
        padding: 0.75rem 1rem;
    }

    .container {
        padding: 0 1rem;
    }

    .cta-group {
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn,
    .btn-large {
        width: 100%;
        text-align: center;
        padding: 0.875rem 1rem;
    }

    .features h2,
    .editions h2 {
        margin-bottom: var(--space-8);
    }

    .cta-section p {
        font-size: var(--text-base);
    }

    .features-grid {
        gap: 1.25rem;
    }

    .features-card {
        padding: 1.25rem;
    }

    .benefit-card {
        padding-block: 1rem;
    }

    .pathway-step {
        gap: var(--space-2);
        padding: 1rem 1rem 1rem 2.75rem;
    }

    .pathway-step::before {
        top: 1rem;
        left: 0.875rem;
        width: 0.875rem;
        height: 0.875rem;
        box-shadow: 0 0 0 2px var(--white);
    }

    .use-case-featured,
    .use-case-brief {
        padding: 1.25rem;
    }
}

/* ============================================================
   AsciiDoc content styles (merged from asciidoctor-mod.css)
   All rules scoped under .adoc-content to prevent global bleed
   ============================================================ */
.adoc-content .left { float: left !important; }

.adoc-content .right { float: right !important; }

.adoc-content .text-left { text-align: left !important; }

.adoc-content .text-right { text-align: right !important; }

.adoc-content .text-center { text-align: center !important; }

.adoc-content .text-justify { text-align: justify !important; }

.adoc-content .hide { display: none; }

.adoc-content .subheader, .adoc-content #content #toctitle, .adoc-content .admonitionblock td.content > .title, .adoc-content .exampleblock > .title, .adoc-content .imageblock > .title, .adoc-content .videoblock > .title, .adoc-content .listingblock > .title, .adoc-content .literalblock > .title, .adoc-content .openblock > .title, .adoc-content .paragraph > .title, .adoc-content .quoteblock > .title, .adoc-content .sidebarblock > .title, .adoc-content .tableblock > .title, .adoc-content .verseblock > .title, .adoc-content .dlist > .title, .adoc-content .olist > .title, .adoc-content .ulist > .title, .adoc-content .qlist > .title, .adoc-content .hdlist > .title, .adoc-content .tableblock > caption { line-height: var(--lh-snug); font-weight: 300; margin-top: 0.2em; margin-bottom: 0.5em; }

/* Unordered Lists */
.adoc-content ul li ul, .adoc-content ul li ol { margin-bottom: 0; font-size: 1em; /* Override nested font-size change */ }
.adoc-content ul.square li ul, .adoc-content ul.circle li ul, .adoc-content ul.disc li ul { list-style: inherit; }
.adoc-content ul.square { list-style-type: square; }
.adoc-content ul.circle { list-style-type: circle; }
.adoc-content ul.disc { list-style-type: disc; }
.adoc-content ul.no-bullet { list-style: none; }

/* Ordered Lists */
.adoc-content ol li ul, .adoc-content ol li ol { margin-bottom: 0; }

.adoc-content .ulist,
.adoc-content .olist {
    margin: 0 0 var(--space-4) var(--space-8);
}

.adoc-content .ulist > ul,
.adoc-content .olist > ol {
    margin: 0;
    padding-left: 0;
    list-style-position: outside;
}

.adoc-content .tableblock > caption { text-align: left; font-weight: bold; white-space: nowrap; overflow: visible; max-width: 0; }

.adoc-content table.tableblock #preamble > .sectionbody > .paragraph:first-of-type p { font-size: inherit; }

.adoc-content .admonitionblock > table { border: 0; background: none; width: 100%; margin: 0; }
.adoc-content .admonitionblock > table td.icon { text-align: center; width: 34px; }
.adoc-content .admonitionblock > table td.icon img { max-width: none; }
.adoc-content .admonitionblock > table td.icon .title { font-weight: bold; text-transform: uppercase; }
.adoc-content .admonitionblock > table td.content > :last-child > :last-child { margin-bottom: 0; }

/* Callout box (used for dated product-name notes on older posts, and any AsciiDoc admonition) */
.adoc-content .admonitionblock { margin: 1.5em 0; padding: 0.85em 1.1em; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 4px; }
.adoc-content .admonitionblock > table,
.adoc-content .admonitionblock > table > tbody,
.adoc-content .admonitionblock > table > tbody > tr { display: block; }
.adoc-content .admonitionblock > table td.icon { display: block; width: auto; text-align: left; padding: 0; }
.adoc-content .admonitionblock > table td.icon .title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--link); }
.adoc-content .admonitionblock > table td.content { display: block; padding: 0.25em 0 0; font-size: 0.95em; line-height: 1.5; font-style: italic; }

.adoc-content .exampleblock > .content { border-style: solid; border-width: 1px; border-color: var(--gray-200); margin-bottom: 1.25em; padding: 1.25em; background: white; -webkit-border-radius: 4px; border-radius: 4px; }
.adoc-content .exampleblock > .content > :first-child { margin-top: 0; }
.adoc-content .exampleblock > .content > :last-child { margin-bottom: 0; }
.adoc-content .exampleblock > .content h1, .adoc-content .exampleblock > .content h2, .adoc-content .exampleblock > .content h3, .adoc-content .exampleblock > .content #toctitle, .adoc-content .sidebarblock.exampleblock > .content > .title, .adoc-content .exampleblock > .content h4, .adoc-content .exampleblock > .content h5, .adoc-content .exampleblock > .content h6, .adoc-content .exampleblock > .content p { color: var(--text); }
.adoc-content .exampleblock > .content h1, .adoc-content .exampleblock > .content h2, .adoc-content .exampleblock > .content h3, .adoc-content .exampleblock > .content #toctitle, .adoc-content .sidebarblock.exampleblock > .content > .title, .adoc-content .exampleblock > .content h4, .adoc-content .exampleblock > .content h5, .adoc-content .exampleblock > .content h6 { line-height: 1; margin-bottom: 0.625em; }
.adoc-content .exampleblock > .content h1.subheader, .adoc-content .exampleblock > .content h2.subheader, .adoc-content .exampleblock > .content h3.subheader, .adoc-content .exampleblock > .content .subheader#toctitle, .adoc-content .sidebarblock.exampleblock > .content > .subheader.title, .adoc-content .exampleblock > .content h4.subheader, .adoc-content .exampleblock > .content h5.subheader, .adoc-content .exampleblock > .content h6.subheader { line-height: var(--lh-snug); }

.adoc-content .exampleblock.result > .content { -webkit-box-shadow: 0 1px 8px var(--border); box-shadow: 0 1px 8px var(--border); }

.adoc-content .sidebarblock { border-style: solid; border-width: 1px; border-color: var(--border); margin-bottom: 1.25em; padding: 1.25em; background: var(--surface); -webkit-border-radius: 4px; border-radius: 4px; }
.adoc-content .sidebarblock > :first-child { margin-top: 0; }
.adoc-content .sidebarblock > :last-child { margin-bottom: 0; }
.adoc-content .sidebarblock h1, .adoc-content .sidebarblock h2, .adoc-content .sidebarblock h3, .adoc-content .sidebarblock #toctitle, .adoc-content .sidebarblock > .content > .title, .adoc-content .sidebarblock h4, .adoc-content .sidebarblock h5, .adoc-content .sidebarblock h6, .adoc-content .sidebarblock p { color: var(--text); }
.adoc-content .sidebarblock h1, .adoc-content .sidebarblock h2, .adoc-content .sidebarblock h3, .adoc-content .sidebarblock #toctitle, .adoc-content .sidebarblock > .content > .title, .adoc-content .sidebarblock h4, .adoc-content .sidebarblock h5, .adoc-content .sidebarblock h6 { line-height: 1; margin-bottom: 0.625em; }
.adoc-content .sidebarblock h1.subheader, .adoc-content .sidebarblock h2.subheader, .adoc-content .sidebarblock h3.subheader, .adoc-content .sidebarblock .subheader#toctitle, .adoc-content .sidebarblock > .content > .subheader.title, .adoc-content .sidebarblock h4.subheader, .adoc-content .sidebarblock h5.subheader, .adoc-content .sidebarblock h6.subheader { line-height: var(--lh-snug); }

.adoc-content .exampleblock > .content > :last-child > :last-child, .adoc-content .exampleblock > .content .olist > ol > li:last-child > :last-child, .adoc-content .exampleblock > .content .ulist > ul > li:last-child > :last-child, .adoc-content .exampleblock > .content .qlist > ol > li:last-child > :last-child, .adoc-content .sidebarblock > .content > :last-child > :last-child, .adoc-content .sidebarblock > .content .olist > ol > li:last-child > :last-child, .adoc-content .sidebarblock > .content .ulist > ul > li:last-child > :last-child, .adoc-content .sidebarblock > .content .qlist > ol > li:last-child > :last-child { margin-bottom: 0; }

.adoc-content .literalblock > .content pre.nowrap, .adoc-content .listingblock > .content pre.nowrap { overflow-x: auto; white-space: pre; word-wrap: normal; }
.adoc-content .literalblock > .content pre > code, .adoc-content .listingblock > .content pre > code { display: block; }

.adoc-content .listingblock > .content { position: relative; }

.adoc-content .listingblock:hover code[class*=" language-"]:before { text-transform: uppercase; font-size: 0.9em; color: var(--gray-600); position: absolute; top: 0.375em; right: 0.375em; }

.adoc-content .listingblock:hover code.asciidoc:before { content: "asciidoc"; }
.adoc-content .listingblock:hover code.clojure:before { content: "clojure"; }
.adoc-content .listingblock:hover code.css:before { content: "css"; }
.adoc-content .listingblock:hover code.groovy:before { content: "groovy"; }
.adoc-content .listingblock:hover code.html:before { content: "html"; }
.adoc-content .listingblock:hover code.java:before { content: "java"; }
.adoc-content .listingblock:hover code.javascript:before { content: "javascript"; }
.adoc-content .listingblock:hover code.python:before { content: "python"; }
.adoc-content .listingblock:hover code.ruby:before { content: "ruby"; }
.adoc-content .listingblock:hover code.scss:before { content: "scss"; }
.adoc-content .listingblock:hover code.xml:before { content: "xml"; }
.adoc-content .listingblock:hover code.yaml:before { content: "yaml"; }

.adoc-content .listingblock.terminal pre .command:before { content: attr(data-prompt); padding-right: 0.5em; color: var(--gray-600); }

.adoc-content .listingblock.terminal pre .command:not([data-prompt]):before { content: '$'; }

.adoc-content table.pyhltable { border: 0; margin-bottom: 0; }

.adoc-content table.pyhltable td { vertical-align: top; padding-top: 0; padding-bottom: 0; }

.adoc-content table.pyhltable td.code { padding-left: .75em; padding-right: 0; }

.adoc-content .highlight.pygments .lineno, .adoc-content table.pyhltable td:not(.code) { color: var(--gray-600); padding-left: 0; padding-right: .5em; border-right: 1px solid var(--border); }

.adoc-content .highlight.pygments .lineno { display: inline-block; margin-right: .25em; }

.adoc-content table.pyhltable .linenodiv { background-color: transparent !important; padding-right: 0 !important; }

.adoc-content .quoteblock { margin: 0 0 1.25em; padding: 0.5625em 1.25em 0 1.1875em; border-left: 1px solid var(--border); }
.adoc-content .quoteblock blockquote { margin: 0 0 1.25em 0; padding: 0 0 0.5625em 0; border: 0; }
.adoc-content .quoteblock blockquote > .paragraph:last-child p { margin-bottom: 0; }
.adoc-content .quoteblock .attribution { margin-top: -.25em; padding-bottom: 0.5625em; font-size: inherit; color: var(--text-secondary); }
.adoc-content .quoteblock .attribution br { display: none; }
.adoc-content .quoteblock .attribution cite { display: block; margin-bottom: 0.625em; }

.adoc-content table thead th, .adoc-content table tfoot th { font-weight: bold; }

.adoc-content table.tableblock.frame-topbot, .adoc-content table.tableblock.frame-none { border-left: 0; border-right: 0; }

.adoc-content table.tableblock.frame-sides, .adoc-content table.tableblock.frame-none { border-top: 0; border-bottom: 0; }

.adoc-content table.tableblock td .paragraph:last-child p, .adoc-content table.tableblock td > p:last-child { margin-bottom: 0; margin-top: 0; }

.adoc-content th.tableblock.halign-left, .adoc-content td.tableblock.halign-left { text-align: left; }

.adoc-content th.tableblock.halign-right, .adoc-content td.tableblock.halign-right { text-align: right; }

.adoc-content th.tableblock.halign-center, .adoc-content td.tableblock.halign-center { text-align: center; }

.adoc-content th.tableblock.valign-top, .adoc-content td.tableblock.valign-top { vertical-align: top; }

.adoc-content th.tableblock.valign-bottom, .adoc-content td.tableblock.valign-bottom { vertical-align: bottom; }

.adoc-content th.tableblock.valign-middle, .adoc-content td.tableblock.valign-middle { vertical-align: middle; }

.adoc-content p.tableblock.header { color: var(--dark-bg); font-weight: bold; }

/* Data tables — carded grid
   Asciidoctor emits a bare <table> with no wrapper, so the table element itself
   is the card AND its own horizontal scroll container. */
.adoc-content table.tableblock {
    display: block;              /* enables overflow-x; confines wide-table reflow */
    overflow: auto;              /* scroll when wider than viewport */
    width: fit-content;
    max-width: 100%;
    margin: var(--space-6) 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: 0 12px 28px rgba(28, 36, 33, 0.06);
}
/* A display:block table's rows can never fill the container, so the card can
   only stretch under real table layout. Above the breakpoint even the widest
   table fits; below it the scroll box above is still needed. */
@media (min-width: 769px) {
    .adoc-content table.tableblock {
        display: table;
    }
}
.adoc-content table.tableblock th,
.adoc-content table.tableblock td {
    padding: var(--space-3) var(--space-4);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.adoc-content table.tableblock th:last-child,
.adoc-content table.tableblock td:last-child { border-right: 0; }
.adoc-content table.tableblock tr:last-child td,
.adoc-content table.tableblock tr:last-child th { border-bottom: 0; }
.adoc-content table.tableblock thead th {
    background: var(--surface);
    text-transform: uppercase;
    font-size: 0.74rem;
    letter-spacing: 0.07em;
    font-weight: 600;
    color: var(--gray-700);
}
/* Round the header's outer top corners to match the card. Above the breakpoint
   the card is a real table, which does not clip its cells, so a square header
   would cover the card's rounded corners. */
.adoc-content table.tableblock thead th:first-child { border-top-left-radius: var(--radius-lg); }
.adoc-content table.tableblock thead th:last-child { border-top-right-radius: var(--radius-lg); }

.adoc-content td > div.verse { white-space: pre; }

.adoc-content ol > li p, .adoc-content ul > li p, .adoc-content .article-content ol > li p, .adoc-content .article-content ul > li p, .adoc-content ul dd, .adoc-content ol dd, .adoc-content .olist .olist, .adoc-content .ulist .ulist, .adoc-content .ulist .olist, .adoc-content .olist .ulist { margin-bottom: 0; margin-top: 0; }

.adoc-content ul.unstyled, .adoc-content ol.unnumbered, .adoc-content ul.checklist, .adoc-content ul.none { list-style-type: none; }

.adoc-content ul.unstyled, .adoc-content ol.unnumbered, .adoc-content ul.checklist { margin-left: 0.625em; }

.adoc-content ul.checklist li > p:first-child > i[class^="icon-check"]:first-child, .adoc-content ul.checklist li > p:first-child > input[type="checkbox"]:first-child { margin-right: 0.25em; }

.adoc-content ul.checklist li > p:first-child > input[type="checkbox"]:first-child { position: relative; top: 1px; }

.adoc-content ul.inline { margin: 0 auto 0.625em auto; margin-left: -1.375em; margin-right: 0; padding: 0; list-style: none; overflow: hidden; }
.adoc-content ul.inline > li { list-style: none; float: left; margin-left: 1.375em; display: block; }
.adoc-content ul.inline > li > * { display: block; }

.adoc-content .unstyled dl dt { font-weight: normal; font-style: normal; }

.adoc-content ol.arabic { list-style-type: decimal; }

.adoc-content ol.decimal { list-style-type: decimal-leading-zero; }

.adoc-content ol.loweralpha { list-style-type: lower-alpha; }

.adoc-content ol.upperalpha { list-style-type: upper-alpha; }

.adoc-content ol.lowerroman { list-style-type: lower-roman; }

.adoc-content ol.upperroman { list-style-type: upper-roman; }

.adoc-content ol.lowergreek { list-style-type: lower-greek; }

.adoc-content .hdlist > table, .adoc-content .colist > table { border: 0; background: none; }
.adoc-content .hdlist > table > tbody > tr, .adoc-content .colist > table > tbody > tr { background: none; }

.adoc-content td.hdlist1 { padding-right: .8em; font-weight: bold; }

.adoc-content td.hdlist1, .adoc-content td.hdlist2 { vertical-align: top; }

.adoc-content .literalblock + .colist, .adoc-content .listingblock + .colist { margin-top: -0.5em; }

.adoc-content .colist > table tr > td:first-of-type { padding: 0 .8em; line-height: 1; }
.adoc-content .colist > table tr > td:last-of-type { padding: 0.25em 0; }

/* Block images sit in the vertical rhythm; floated variants override below. */
.adoc-content .imageblock { margin: 1.5em 0; }

.adoc-content .imageblock.left, .adoc-content .imageblock[style*="float: left"] { margin: 0.25em 0.625em 1.25em 0; }
.adoc-content .imageblock.right, .adoc-content .imageblock[style*="float: right"] { margin: 0.25em 0 1.25em 0.625em; }
.adoc-content .imageblock > .title { margin-bottom: 0; }
.adoc-content .imageblock.thumb, .adoc-content .imageblock.th { border-width: 6px; }
.adoc-content .imageblock.thumb > .title, .adoc-content .imageblock.th > .title { padding: 0 0.125em; }

.adoc-content .image.left, .adoc-content .image.right { margin-top: 0.25em; margin-bottom: 0.25em; display: inline-block; line-height: 0; }
.adoc-content .image.left { margin-right: 0.625em; }
.adoc-content .image.right { margin-left: 0.625em; }

.adoc-content a.image { text-decoration: none; }

/* Inline images (span.image) must override the global `img { display: block }`
   so logos/icons flow within text instead of breaking onto their own line. */
.adoc-content span.image img { display: inline-block; vertical-align: middle; }

.adoc-content span.footnote, .adoc-content span.footnoteref { vertical-align: super; font-size: 0.875em; }
.adoc-content span.footnote a, .adoc-content span.footnoteref a { text-decoration: none; }

.adoc-content #footnotes { padding-top: 0.75em; padding-bottom: 0.75em; margin-bottom: 0.625em; }
.adoc-content #footnotes hr { width: 20%; min-width: 6.25em; margin: -.25em 0 .75em 0; border-width: 1px 0 0 0; }
.adoc-content #footnotes .footnote { padding: 0 0.375em; line-height: var(--lh-tight); font-size: 0.875em; margin-left: 1.2em; text-indent: -1.2em; margin-bottom: .2em; }
.adoc-content #footnotes .footnote a:first-of-type { font-weight: bold; text-decoration: none; }
.adoc-content #footnotes .footnote:last-of-type { margin-bottom: 0; }

.adoc-content #content #footnotes { margin-top: -0.625em; margin-bottom: 0; padding: 0.75em 0; }

/* #fff intentionally hardcoded: GitHub Gist embed requires explicit white background */
.adoc-content .gist .file-data > table { border: none; background: #fff; width: 100%; margin-bottom: 0; }
.adoc-content .gist .file-data > table td.line-data { width: 99%; }

.adoc-content div.unbreakable { page-break-inside: avoid; }

.adoc-content .underline { text-decoration: underline; }

.adoc-content .overline { text-decoration: overline; }

.adoc-content .line-through { text-decoration: line-through; }

.adoc-content span.icon > [class^="icon-"], .adoc-content span.icon > [class*=" icon-"] { cursor: default; }

.adoc-content .conum { display: inline-block; color: white !important; background-color: var(--dark-bg); -webkit-border-radius: 100px; border-radius: 100px; text-align: center; width: 20px; height: 20px; font-size: 12px; font-weight: bold; line-height: 20px; font-family: Arial, sans-serif; font-style: normal; position: relative; top: -2px; letter-spacing: -1px; }
.adoc-content .conum * { color: white !important; }
.adoc-content .conum + b { display: none; }
.adoc-content .conum:after { content: attr(data-value); }
.adoc-content .conum:not([data-value]):empty { display: none; }

.adoc-content .literalblock > .content > pre, .adoc-content .listingblock > .content > pre { -webkit-border-radius: 0; border-radius: 0; max-height: 32em; overflow-y: auto; }

/* Asciidoctor puts in <p> tags when making a column header-styled, e.g. on the Support comparison table. */
.adoc-content th.tableblock p.tableblock { margin-top: 0; margin-bottom: 0;}

/* ============================================================
 * Guides page (content/guides.adoc)
 * Cards row for visual/interactive resources + prose list for
 * tutorials. CSS-only generative thumbnails (placeholder until
 * real imagery is created).
 * ============================================================ */

.guides-section {
    margin-bottom: var(--space-16);
}
.guides-section:last-child {
    margin-bottom: 0;
}

/* --- Cards grid --- */

.guides-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

@media (max-width: 1000px) {
    .guides-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .guides-cards { grid-template-columns: 1fr; }
}

.guides-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.guides-card:hover,
.guides-card:has(.guides-card__link:focus-visible) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(28, 36, 33, 0.08);
    border-color: var(--link);
}

.guides-card__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.guides-card__body {
    display: block;
    padding: var(--space-5) var(--space-6) var(--space-6);
}

.guides-card__title {
    font-size: var(--text-xl);
    font-weight: var(--fw-light);
    line-height: var(--lh-tight);
    margin: 0 0 var(--space-2);
    color: var(--text);
}

/* Title link overlays the whole card; description links sit above. */
.guides-card__link {
    color: inherit;
    text-decoration: none;
}
.guides-card__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.guides-card__desc {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--gray-600);
    margin: 0;
    line-height: var(--lh-normal);
}
.guides-card__desc a {
    position: relative;
    z-index: 2;
    color: var(--link);
}
.guides-card__desc a:hover {
    color: var(--link-hover);
}

/* --- Card thumbnails (CSS-only placeholders) --- */

.guides-card__thumb--datoms {
    background: url("/images/thumb-datom-range-viz.png") center/cover no-repeat, var(--surface);
}

.guides-card__thumb--max {
    background: url("/images/thumb-max-datom.png") center/cover no-repeat, var(--dark-bg);
}

.guides-card__thumb--try {
    background: url("/images/thumb-learn-datomic-datalog.png") center/cover no-repeat, var(--surface);
}

.guides-card__thumb--videos {
    background: url("/images/thumb-datomic-videos.png") center/cover no-repeat, var(--dark-bg);
}

/* --- Typographic plates (prose cards) ---
 * Three dark-bg plates whose content is the "image": pull-quote (italic
 * Palatino), REPL session (terminal green-on-black), dataset list
 * (white-on-black monospace). Sit inside `.guides-card__thumb` so they
 * inherit the 16:9 aspect ratio and live next to image-thumbnail cards
 * as peers. */

.guides-card__thumb--quote,
.guides-card__thumb--repl,
.guides-card__thumb--datasets {
    display: flex;
    overflow: hidden;
}

.guides-card__thumb--quote {
    background: var(--dark-bg);
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}
.guides-card__plate-quote {
    font-family: Palatino, 'Palatino Linotype', 'Book Antiqua', 'Noto Serif', 'DejaVu Serif', serif;
    font-style: italic;
    color: rgba(255, 255, 255, 0.65); /* muted off-white: lower contrast on dark bg */
    font-size: clamp(1.05rem, 2.4vw, 1.55rem);
    line-height: var(--lh-tight );
    text-align: center;
    text-wrap: balance;
}

.guides-card__thumb--repl {
    background: #0c1612;
    align-items: center;
    padding: var(--space-4) var(--space-5);
}
.article-content .guides-card__plate-code {
    font-family: var(--font-mono);
    color: #6AD48C;
    font-size: clamp(0.7rem, 1.4vw, 0.875rem);
    line-height: var(--lh-normal);
    margin: 0;
    padding: 0;
    background: transparent;
    white-space: pre;
    overflow: hidden;
    border-radius: 0;
}

.guides-card__thumb--datasets {
    background: var(--dark-bg);
    align-items: center;
    padding: var(--space-4) var(--space-5);
}
.article-content .guides-card__plate-list {
    font-family: var(--font-mono);
    color: var(--white);
    font-size: clamp(0.4rem, 0.85vw, 0.6rem); /* tiny: full 9-name list reads as texture */
    line-height: var(--lh-tight);
    margin: 0;
    padding: 0;
    background: transparent;
    white-space: pre;
    overflow: hidden;
    border-radius: 0;
}

.guides-card__thumb--cheatsheets-peer,
.guides-card__thumb--cheatsheets-client {
    /* Strong radial vignette: tight clear focal at upper-left, hard fade to
     * full white at the edges. Reads as a small snippet of cheatsheet, not
     * a wall of links. */
    background:
        radial-gradient(ellipse 65% 75% at 28% 42%,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 1) 90%),
        var(--cheatsheet-thumb-image) left center/cover no-repeat,
        var(--surface);
}
.guides-card__thumb--cheatsheets-peer {
    --cheatsheet-thumb-image: url("/images/thumb-cheatsheet-peer.png");
}
.guides-card__thumb--cheatsheets-client {
    --cheatsheet-thumb-image: url("/images/thumb-cheatsheet-client.png");
}

.guides-card__thumb--cache-tiers {
    background: url("/images/thumb-cache-tier-viz.png") center/cover no-repeat, var(--surface);
}

/* --- Overrides for `.article-content` cascade ---
 * The guides markup sits inside `.article-content`, which adds underline +
 * green color to `li a`, semibold weight + large margins to `h3`, and
 * gray-700 + 1.75 line-height + bottom margin to `p`. Reset them here at a
 * matching or higher specificity. */

.article-content .guides-card__link {
    color: inherit;
    text-decoration: none;
}

.article-content .guides-card__title {
    margin-top: 0;
    margin-bottom: var(--space-1);
    color: var(--text);
}
.article-content .guides-card__title  { font-weight: var(--fw-light); }
.article-content .guides-card__title  { margin-bottom: var(--space-2); }

.article-content .guides-card__desc {
    color: var(--gray-600);
    line-height: var(--lh-normal);
    margin: 0;
}

.article-content .guides-card__desc a {
    color: var(--link);
    text-decoration: underline;
}
.article-content .guides-card__desc a:hover {
    color: var(--link-hover);
}

.article-content .guides-section__title {
    margin-top: 0;
    margin-bottom: var(--space-6);
    color: var(--text);
}

.article-content .guides-cards {
    list-style: none;
    margin: 0;
    padding: 0;
}
.article-content .guides-cards > li {
    margin: 0;
    list-style: none;
    min-width: 0;
}

/* Flex-item override: the REPL/list/grid plates use <pre> with
 * `white-space: pre`. As a flex item its default min-width: auto would
 * widen its track to fit the longest line; reset so overflow: hidden
 * does the clipping cleanly. */
.article-content .guides-card__plate-code,
.article-content .guides-card__plate-list,
.article-content .guides-card__plate-grid {
    min-width: 0;
    max-width: 100%;
}

p.hero-subsubtitle {
    margin-bottom: var(--space-8);
    max-width: 95%;
}
@media (max-width: 1140px) {
    p.hero-subsubtitle {
        margin-bottom: var(--space-10);
    }
}
p.hero-subsubtitle {
    font-size: var(--text-md);
    color: var(--gray-600);
}

.article-content div.page-toc-body h2#choosing {
    margin-top: 0;
}