/* =========================================================================
   Trust Center — sidebar layout + content sections.
   ========================================================================= */

html { scroll-behavior: smooth; }

/* ---- Sticky fix -------------------------------------------------------
   `.body-wrap` (the marketing shell wrapper in _tidy_landing_base.html,
   styled in tidyTemplate.css L3115) has `overflow: hidden`, which silently
   turns it into a scroll container and kills `position: sticky` for every
   descendant — including the Trust Center sidebar nav (.tc-nav). With it
   broken, the nav scrolls off with the page and you have to return to the
   top to use it.

   `overflow: clip` clips exactly like `hidden` but does NOT establish a
   scroll container, so sticky works through it. Same fix the v6 home page
   uses (index_v6.css "STICKY FIX").

   This MUST live in external CSS, not an inline <style> in the template:
   public pages run under PUBLIC_CSP (`style-src 'self'`, no 'unsafe-inline'),
   which blocks inline <style> blocks. An inline override here silently does
   nothing in production. See utils/custom_middleware/csp.py. */
.body-wrap {
    overflow: clip !important;
    overflow-x: clip !important;
    overflow-y: clip !important;
}

/* ---- Palette -----------------------------------------------------------
   Own --tc-* set mirroring the Insights hub / Knowledge Center (--cni-* /
   --faqx-*): a soft lavender canvas with white cards floating on it, a warm
   purple-navy ink ramp, and a cool brand aurora. Dark mode is one re-point of
   the same tokens — the site renders its palette server-side into :root and
   flags the document with html[data-theme="dark"] (templates/style-variables.css).
   Every rule below reads a token, so nothing else changes between themes.

   Declared on EVERY Trust Center root, not just .tc-shell: /trust-center/dump/
   renders the same section partials (chips, subprocessor cards, layers) under
   .tc-dump, and /trust-center/sample/<x>/ under .tc-sample-shell. Scoping the
   tokens to .tc-shell alone left those components with unresolved var()s — 28
   cards on the dump page rendered with no background at all. */
.tc-shell,
.tc-dump,
.tc-sample-shell {
    --tc-indigo: #6366f1;
    --tc-indigo-deep: #4f46e5;
    --tc-title: #0f172a;
    --tc-ink: #2c2a4d;
    --tc-ink-soft: #4a4866;
    --tc-muted: #6f6d8a;
    --tc-border: #e4e2f2;
    --tc-border-strong: #cfcceb;
    --tc-card: #ffffff;
    --tc-page: #f5f5fb;
    --tc-lilac: rgba(99, 102, 241, 0.10);
    --tc-row-hover: color-mix(in srgb, var(--tc-ink) 4%, var(--tc-card));
    --tc-card-shadow: 0 1px 2px rgba(28, 26, 54, 0.045), 0 14px 34px -16px rgba(28, 26, 54, 0.12);
    --tc-radius: 16px;
}
html[data-theme="dark"] .tc-shell,
html[data-theme="dark"] .tc-dump,
html[data-theme="dark"] .tc-sample-shell {
    --tc-indigo: #818cf8;
    --tc-indigo-deep: #a5b4fc;   /* links must READ as links on black */
    --tc-title: #f4f6fb;
    --tc-ink: #e8eaf3;
    --tc-ink-soft: #c3c6d6;
    --tc-muted: #9aa0b8;
    --tc-border: #1e2233;
    --tc-border-strong: #333b55;
    --tc-card: #0c0f1a;
    --tc-page: var(--main-bg-color);
    --tc-lilac: rgba(129, 140, 248, 0.16);
    --tc-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 36px -16px rgba(0, 0, 0, 0.62);
}

/* ---- Shell ------------------------------------------------------------- */

.tc-shell {
    background: var(--tc-page);
    color: var(--tc-ink);
    padding: 5rem 0 7rem;
    min-height: 100vh;
    position: relative;
    /* `overflow-x: clip` prevents the page from scrolling horizontally if
       any descendant misbehaves, without breaking position:sticky on the
       sidebar (which `overflow: hidden` would). */
    overflow-x: clip;
}

/* Cool brand aurora, anchored top-right and kept off the headline so it never
   muddies the title (same treatment as the Insights hub and /pricing/). */
.tc-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(60% 50% at 104% -8%, color-mix(in srgb, var(--blurple) 12%, transparent) 0%, transparent 60%),
        radial-gradient(48% 44% at 88% 40%, color-mix(in srgb, var(--indigo) 6%, transparent) 0%, transparent 68%);
}

.tc-shell-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 5rem;
    align-items: start;
}

/* ---- Sidebar nav ------------------------------------------------------- */

/* `top` is the fixed site header's height, not an arbitrary 6rem. Sticky
   clamps an element to its `top` offset even at scroll 0, so a 6rem offset
   pushed the nav 20px BELOW its natural grid position at rest and knocked it
   out of line with the title beside it. At 60px the nav sits at its natural
   position when the page is unscrolled and parks flush under the header once
   scrolled. No padding-top, so the first nav item's box aligns with the top of
   the content column (stable across breakpoints, unlike matching the glyphs of
   a clamp()-sized display title). */
.tc-nav {
    position: sticky;
    top: 60px;
    align-self: start;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0.25rem 1rem 0;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.2s ease;
}
.tc-nav:hover { scrollbar-color: var(--tc-border-strong) transparent; }
.tc-nav::-webkit-scrollbar { width: 4px; }
.tc-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.tc-nav:hover::-webkit-scrollbar-thumb { background: var(--tc-border-strong); }

/* A hairline guide runs the length of the nav; the active page marks it with
   an indigo segment (the same premium docs-nav treatment the Knowledge Center
   rail uses). */
.tc-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-left: 1px solid var(--tc-border);
}

.tc-nav-link {
    display: block;
    padding: 0.44rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--tc-muted);
    text-decoration: none !important;
    border-left: 2px solid transparent;
    margin-left: -1px;
    border-radius: 0 8px 8px 0;
    transition:
        color 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease;
}

.tc-nav-link:hover {
    color: var(--tc-ink);
    background: var(--tc-row-hover);
    border-left-color: var(--tc-border-strong);
}

.tc-nav-link.is-active {
    font-weight: 600;
    color: var(--tc-indigo-deep);
    background: var(--tc-lilac);
    border-left-color: var(--tc-indigo);
}

.tc-nav-link.is-active:hover {
    background: var(--tc-lilac);
    border-left-color: var(--tc-indigo);
}

/* Mobile picker is hidden on desktop. */
.tc-nav-picker { display: none; }

/* ---- Main column ------------------------------------------------------- */

.tc-main {
    min-width: 0;
    padding-top: 0;
    transition: opacity 0.15s ease;
}

.tc-main.tc-loading {
    opacity: 0.35;
    pointer-events: none;
}

.tc-page {
    max-width: 720px;
}

/* ---- Sections + typography -------------------------------------------- */

.tc-section {
    margin: 0 0 6.5rem;
    scroll-margin-top: 6rem;
}

.tc-section:last-child { margin-bottom: 0; }

/* Brand face at a confident scale — matches the Insights hub masthead and the
   Knowledge Center title rather than the generic body-font bold it was. */
.tc-h1 {
    font-family: var(--brand-font);
    font-size: clamp(1.9rem, 4.2vw, 2.7rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0 0 1.1rem;
    color: var(--tc-title);
}

.tc-section h2 {
    font-family: var(--brand-font);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 4rem 0 1.1rem;
    color: var(--tc-title);
    scroll-margin-top: 6rem;
}

.tc-section h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 2.25rem 0 0.6rem;
    color: var(--tc-title);
}

.tc-section p {
    font-size: 0.96rem;
    line-height: 1.8;
    color: var(--tc-ink-soft);
    margin: 0 0 1.3rem;
}

.tc-section ul,
.tc-section ol {
    padding-left: 1.25rem;
    margin: 0 0 1.5rem;
}

.tc-section li {
    font-size: 0.96rem;
    line-height: 1.75;
    color: var(--tc-ink-soft);
    margin: 0 0 0.55rem;
}

.tc-section li::marker { color: var(--tc-indigo); }

/* Inline anchors get a subtle underline only when they're inside body copy.
   Cards / nav / pills / footer all opt out via !important above. */
.tc-section p a,
.tc-section li a,
.tc-section td a {
    color: var(--tc-indigo-deep);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--tc-indigo) 40%, transparent);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: text-decoration-color 0.18s ease;
}

.tc-section p a:hover,
.tc-section li a:hover,
.tc-section td a:hover {
    text-decoration-color: var(--tc-indigo);
}

/* The lede closes the header band: a hairline under it separates the title
   block from the content below, the way the Knowledge Center masthead does. */
.tc-lede {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--tc-ink-soft);
    margin: 0 0 2.2rem;
    padding-bottom: 1.9rem;
    border-bottom: 1px solid var(--tc-border);
    max-width: none;
}

/* ---- Trust signal chips (overview) ------------------------------------
   Compact informational chips. Not interactive, not navigation. min() lets
   the grid shrink below preferred width on narrow viewports instead of
   forcing horizontal scroll. */

/* Each fact is its own raised card on the canvas. The previous treatment was a
   single bordered box with inset vertical rules, which made ragged cells
   obvious (a four-line value next to "Delaware, USA" left the strip looking
   unbalanced). Discrete cards let every fact carry its own weight and the row
   reads as evidence, not as a table with holes. */
.tc-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 12px;
    margin: 0 0 3rem;
    padding: 0;
}

.tc-chip {
    position: relative;
    padding: 1.15rem 1.3rem 1.25rem;
    margin: 0;
    background: var(--tc-card);
    border: 1px solid var(--tc-border);
    border-radius: 14px;
    box-shadow: var(--tc-card-shadow);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.tc-chip:hover { border-color: var(--tc-border-strong); }

.tc-chip-label {
    display: flex;
    align-items: center;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tc-muted);
    margin: 0 0 0.65rem;
}

/* Small operational signal — a thin accent rule preceding each label. */
.tc-chip-dot {
    display: inline-block;
    width: 2px;
    height: 0.7rem;
    margin-right: 0.55rem;
    background: var(--tc-indigo);
    flex-shrink: 0;
}

.tc-chip-value {
    display: block;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--tc-title);
    margin: 0;
    line-height: 1.35;
}

/* Link anchors inside chips inherit the chip's color so the chip row reads
   as a uniform data table, not a mix of "labels" and "blue links". Hover
   reveals interactivity with a subtle purple underline. */
.tc-chip-value a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.18s ease, color 0.18s ease;
}

.tc-chip-value a:hover,
.tc-chip-value a:focus-visible {
    color: var(--tc-indigo-deep);
    border-bottom-color: var(--tc-indigo);
    outline: none;
}

/* ---- Requests / contact list ------------------------------------------ */

/* One raised panel with hairline-separated rows, rather than naked rules on
   the page — the same card language the fact chips and the answer lists use. */
.tc-contact {
    margin: 0 0 2rem;
    padding: 0 1.4rem;
    background: var(--tc-card);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-card-shadow);
    overflow: hidden;
}

.tc-contact-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.5rem;
    padding: 1.1rem 0;
}

.tc-contact-row + .tc-contact-row {
    border-top: 1px solid var(--tc-border);
}

.tc-contact-row dt {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tc-title);
    margin: 0;
}

.tc-contact-row dd {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--tc-ink-soft);
}

.tc-contact-row dd a {
    color: var(--tc-indigo-deep);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--tc-indigo) 40%, transparent);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.tc-contact-row dd a:hover { text-decoration-color: var(--tc-indigo); }

@media (max-width: 640px) {
    .tc-contact { padding: 0 1.1rem; }
    .tc-contact-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
        padding: 0.95rem 0;
    }
}

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

.tc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.25rem;
    margin: 0 0 3rem;
}

.tc-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border: 1px solid var(--tc-border);
    border-radius: 14px;
    background: var(--tc-card);
    box-shadow: var(--tc-card-shadow);
    text-decoration: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.tc-card:hover {
    border-color: var(--tc-border-strong);
    transform: translateY(-1px);
}

.tc-card-title {
    font-family: var(--brand-font);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--tc-title);
    margin: 0 0 0.55rem;
    letter-spacing: -0.015em;
}

.tc-card-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--tc-ink-soft);
    margin: 0 0 1.5rem;
}

.tc-card-cta {
    margin-top: auto;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tc-indigo-deep);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: gap 0.25s ease;
}

.tc-card:hover .tc-card-cta { gap: 0.6rem; }

/* ---- Subprocessor cards -----------------------------------------------
   Reshaped from an 8-column table to a card grid. A wide table forced
   horizontal scrolling on anything narrower than ~1100px and trapped users
   into scrolling all the way down to find the bottom scrollbar. The card
   layout works at every viewport with no horizontal scroll. */

.tc-sub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: 1rem;
    margin: 0 0 2.5rem;
}

.tc-sub-card {
    border: 1px solid var(--tc-border);
    border-radius: 14px;
    background: var(--tc-card);
    box-shadow: var(--tc-card-shadow);
    padding: 1.35rem 1.45rem 1.25rem;
    display: flex;
    flex-direction: column;
}

.tc-sub-head {
    margin: 0 0 1.1rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid var(--tc-border);
}

.tc-sub-name {
    font-family: var(--brand-font);
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--tc-title);
    line-height: 1.25;
}

.tc-sub-cat {
    margin: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tc-muted);
}

.tc-sub-fields {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(86px, auto) minmax(0, 1fr);
    gap: 0.55rem 1rem;
    align-items: baseline;
}

.tc-sub-fields dt {
    margin: 0;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tc-muted);
    padding-top: 0.2rem;
}

.tc-sub-fields dd {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--tc-ink);
}

@media (max-width: 480px) {
    .tc-sub-card { padding: 1.15rem 1.2rem; }
    .tc-sub-fields {
        grid-template-columns: minmax(78px, auto) minmax(0, 1fr);
        gap: 0.5rem 0.85rem;
    }
}

.tc-pill {
    display: inline-block;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.tc-pill--yes { background: var(--tc-lilac); color: var(--tc-indigo-deep); }
.tc-pill--no  { background: color-mix(in srgb, var(--tc-ink) 8%, transparent); color: var(--tc-muted); }
.tc-pill--req { background: var(--tc-lilac); color: var(--tc-indigo-deep); }
.tc-pill--opt { background: color-mix(in srgb, var(--tc-ink) 8%, transparent); color: var(--tc-ink-soft); }

/* ---- Watchdog sample report page --------------------------------------
   The reliability "View sample" pages embed a watchdog email report (heavy
   inline styles) inside the marketing chrome. This wrapper clears the fixed
   site header and recreates the report's gray "email" backdrop so the report
   reads as a framed preview rather than a raw document. */

.tc-sample-shell {
    background: var(--main-bg-color);
    color: var(--inv-bg-color);
    min-height: 100vh;
    padding: 6rem 1rem 5rem;
}

.tc-sample-head {
    max-width: 720px;
    margin: 0 auto 1.25rem;
}

.tc-sample-back {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--purple);
    text-decoration: none !important;
}

.tc-sample-back:hover { text-decoration: underline !important; }

.tc-sample-note {
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--inv-bg-color);
    opacity: 0.55;
}

.tc-sample-report {
    max-width: 720px;
    margin: 0 auto;
    background: #f0f4f8;
    border: 1px solid var(--grey-accent-color);
    border-radius: 14px;
    overflow: hidden;
}

/* ---- Fine print -------------------------------------------------------
   Small muted italic note (e.g. the "internal artifact" disclaimer under the
   Watchdog sample download cards). A class, not an inline style — public pages
   run under PUBLIC_CSP which blocks inline style attributes. */
.tc-fineprint {
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--tc-muted);
    margin: 0.5rem 0 0;
}

/* ---- Callout ---------------------------------------------------------- */

.tc-callout {
    padding: 1.25rem 1.5rem;
    border: 1px solid color-mix(in srgb, var(--tc-indigo) 28%, transparent);
    background: var(--tc-lilac);
    border-radius: 14px;
    margin: 0 0 2rem;
}

.tc-callout p:last-child { margin-bottom: 0; }

.tc-callout-label {
    display: block;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tc-indigo-deep);
    margin: 0 0 0.5rem;
}

/* ---- Attribution callout (AI Agent Security) --------------------------
   A muted variant of the callout for the "this references a public
   third-party framework, which does not endorse us" disclaimer. Neutral,
   not accent-forward, so it reads as a footnote rather than a claim. */
.tc-attribution {
    border-color: var(--tc-border);
    background: transparent;
    margin-top: 2.5rem;
}
.tc-attribution .tc-callout-label { color: var(--tc-muted); }
.tc-attribution p { font-size: 0.84rem; color: var(--tc-muted); }

/* ---- Figure (original diagrams) --------------------------------------- */
.tc-figure { margin: 0 0 2.5rem; }
.tc-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--tc-border);
    border-radius: 14px;
}
.tc-figcaption {
    margin: 0.85rem 0 0;
    font-size: 0.82rem;
    line-height: 1.6;
    font-style: italic;
    color: var(--tc-muted);
    text-align: center;
}

/* ---- Security layers (AI Agent Security) ------------------------------
   Each stratum is one layer of the security architecture: a card with a
   left accent rail, the layer name, the rogue-agent facet it closes, the
   mechanism, and the filing(s) that protect it. Real horizontal strata,
   not a table row — the stack IS the argument. */
.tc-layers {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 0 0 1.5rem;
}
.tc-layer {
    border: 1px solid var(--tc-border);
    border-left: 4px solid var(--tc-indigo);
    border-radius: 14px;
    background: var(--tc-card);
    box-shadow: var(--tc-card-shadow);
    padding: 1.05rem 1.35rem 1.1rem;
}
.tc-layer-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    flex-wrap: wrap;
    margin: 0 0 0.4rem;
}
.tc-layer-name {
    font-family: var(--brand-font);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--tc-title);
}
.tc-layer-closes {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tc-indigo-deep);
    white-space: nowrap;
}
.tc-layer-body {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--tc-ink-soft);
    margin: 0;
}

/* ---- Dump page -------------------------------------------------------- */

.tc-dump {
    background: var(--main-bg-color);
    color: var(--inv-bg-color);
    padding: 7rem 0 6rem;
    min-height: 100vh;
}

.tc-dump-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.tc-dump-toc {
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--grey-accent-color);
    border-radius: 14px;
    background: var(--off-bg-color);
    margin: 0 0 4rem;
}

.tc-dump-toc-title {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--purple);
    margin: 0 0 0.85rem;
}

.tc-dump-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 1.75rem;
}

.tc-dump-toc-list li { margin: 0 0 0.5rem; break-inside: avoid; }
.tc-dump-toc-list a {
    font-size: 0.88rem;
    color: var(--inv-bg-color);
    opacity: 0.8;
    text-decoration: none !important;
    transition: color 0.18s ease, opacity 0.18s ease;
}
.tc-dump-toc-list a:hover { color: var(--purple); opacity: 1; }

.tc-dump-divider {
    border: 0;
    border-top: 1px solid var(--grey-accent-color);
    margin: 4rem 0;
}

/* ---- Responsive — tablet & mobile (≤960px) ---------------------------
   Mobile drops the sidebar entirely and replaces it with a native
   <select> picker. Native OS picker UI, zero overflow risk, one row of
   vertical space, no horizontal scrolling tabs. The marketing shell has
   a position:fixed site header that is 60px tall with z-index 10
   (see .site-header in tidyTemplate.css). */

@media (max-width: 960px) {
    .tc-shell {
        /* Picker is fixed (out of flow); the top padding on .tc-main below
           carries the full chrome offset (site header + picker). Shell only
           needs bottom breathing room here. */
        padding: 0 0 4rem;
    }

    .tc-shell-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 0;
    }

    /* Hide the desktop sidebar list. */
    .tc-nav-list { display: none; }

    /* The <aside> only wraps the picker on mobile. */
    .tc-nav {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 0;
        margin: 0;
    }

    /* Picker bar — fixed to the viewport just below the 60px fixed site
       header. position:fixed (rather than sticky) so it stays available
       across the entire scroll length of the trust center, not just for
       the height of its .tc-nav parent. z-index < 10 keeps the site
       header above it when both render. */
    .tc-nav-picker {
        display: block;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        z-index: 5;
        background: var(--main-bg-color);
        padding: 0.75rem 1.25rem;
        border-bottom: 1px solid var(--grey-accent-color);
    }

    /* ---- Custom trigger button ---- */
    .tc-nav-trigger {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        width: 100%;
        box-sizing: border-box;
        padding: 0.7rem 0.95rem 0.7rem 1rem;
        font-family: inherit;
        text-align: left;
        color: var(--inv-bg-color);
        background: var(--off-bg-color);
        border: 1px solid var(--grey-accent-color);
        border-radius: 10px;
        cursor: pointer;
        transition: border-color 0.15s ease, background 0.15s ease;
    }

    .tc-nav-trigger:hover { border-color: color-mix(in srgb, var(--purple) 35%, var(--grey-accent-color)); }
    .tc-nav-trigger:focus-visible {
        outline: 2px solid var(--purple);
        outline-offset: 2px;
    }

    .tc-nav-trigger-text {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        min-width: 0;
    }

    .tc-nav-trigger-kicker {
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--inv-bg-color);
        opacity: 0.5;
    }

    .tc-nav-trigger-current {
        font-size: 0.95rem;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -0.005em;
        color: var(--inv-bg-color);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tc-nav-trigger-chevron {
        flex-shrink: 0;
        color: var(--inv-bg-color);
        opacity: 0.55;
        transition: transform 0.2s ease, opacity 0.15s ease;
    }

    .tc-nav-trigger[aria-expanded="true"] .tc-nav-trigger-chevron {
        transform: rotate(-180deg);
        opacity: 0.95;
    }

    .tc-nav-trigger[aria-expanded="true"] {
        border-color: color-mix(in srgb, var(--purple) 45%, var(--grey-accent-color));
    }

    /* ---- Dropdown panel — glassmorphism, matching marketing topnav ---- */
    .tc-nav-menu {
        position: absolute;
        top: calc(100% - 0.25rem);
        left: 1.25rem;
        right: 1.25rem;
        z-index: 11;
        padding: 0.4rem;
        background: color-mix(in srgb, var(--main-bg-color) 95%, transparent);
        backdrop-filter: blur(24px) saturate(1.4);
        -webkit-backdrop-filter: blur(24px) saturate(1.4);
        border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
        border-radius: 14px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
        opacity: 0;
        transform: scale(0.97) translateY(-4px);
        transform-origin: top center;
        pointer-events: none;
        transition:
            opacity 0.18s ease,
            transform 0.18s ease,
            visibility 0s linear 0.18s;
        visibility: hidden;
    }

    .tc-nav-trigger[aria-expanded="true"] + .tc-nav-menu {
        opacity: 1;
        transform: scale(1) translateY(0);
        pointer-events: auto;
        visibility: visible;
        transition:
            opacity 0.18s ease,
            transform 0.18s ease,
            visibility 0s linear 0s;
    }

    .tc-nav-menu-item {
        display: block;
        padding: 0.7rem 0.85rem;
        font-size: 0.92rem;
        font-weight: 500;
        line-height: 1.3;
        color: var(--inv-bg-color);
        opacity: 0.78;
        text-decoration: none !important;
        border-radius: 8px;
        transition: background 0.12s ease, opacity 0.12s ease, color 0.12s ease;
    }

    .tc-nav-menu-item:hover {
        background: var(--off-bg-color);
        opacity: 1;
    }

    .tc-nav-menu-item.is-active {
        color: var(--purple);
        font-weight: 600;
        opacity: 1;
        background: color-mix(in srgb, var(--purple) 10%, transparent);
    }

    .tc-nav-menu-item--sub {
        padding-left: 1.6rem;
        font-size: 0.88rem;
        opacity: 0.68;
    }

    .tc-nav-menu-divider {
        height: 1px;
        margin: 0.35rem 0.5rem;
        background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    }

    .tc-main {
        /* 60px fixed site header + ~80px fixed picker + breathing room.
           Everything above the H1 is fixed and out of flow. */
        padding: calc(60px + 80px + 1.5rem) 1.25rem 0;
        min-width: 0;
    }

    .tc-page {
        max-width: none;
    }

    /* Anchors should not land under the fixed header + fixed picker. */
    .tc-section,
    .tc-section h2 { scroll-margin-top: calc(60px + 80px + 1rem); }

    .tc-section { margin-bottom: 4.5rem; }
    .tc-h1      { font-size: 1.9rem; line-height: 1.18; margin-bottom: 1.15rem; }
    .tc-lede    { font-size: 1rem; margin-bottom: 2.25rem; }
    .tc-section h2 { font-size: 1.2rem; margin-top: 3rem; }

    .tc-cards, .tc-signals { gap: 0.85rem; }
    .tc-card    { padding: 1.4rem; }

    /* Dump page has no sticky picker — give it normal top padding. */
    .tc-dump        { padding: 5rem 0 4rem; }
    .tc-dump-inner  { padding: 0 1.25rem; }
    .tc-dump-toc    { padding: 1.25rem; }
    .tc-dump-toc-list { columns: 1; }
}

/* ---- Small phones (≤480px) ------------------------------------------- */

@media (max-width: 480px) {
    .tc-main         { padding-left: 1rem; padding-right: 1rem; }
    .tc-nav-picker   { padding-left: 1rem; padding-right: 1rem; }
    .tc-h1           { font-size: 1.55rem; }
    .tc-lede         { font-size: 0.95rem; margin-bottom: 1.75rem; }
    .tc-section h2   { font-size: 1.1rem; }
    .tc-card         { padding: 1.2rem; border-radius: 14px; }
    .tc-signal       { padding: 0.9rem 1rem; }
    .tc-callout      { padding: 1rem 1.1rem; }
}

/* ---- Shared responsibility two-column layout -------------------------
   Used on the Security page to contrast CustomerNode-side vs. tenant-side
   responsibilities. Collapses to a single column on narrow viewports. */

.tc-shared-resp {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.25rem;
    margin: 0 0 2rem;
}

.tc-shared-resp > div {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--grey-accent-color);
    border-radius: 10px;
    background: var(--off-bg-color);
}

.tc-shared-resp h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--inv-bg-color);
    margin: 0 0 0.75rem;
    letter-spacing: -0.01em;
}

.tc-shared-resp ul {
    margin: 0;
    padding-left: 1.1rem;
}

.tc-shared-resp li {
    margin-bottom: 0.5rem;
    line-height: 1.55;
}

.tc-shared-resp li:last-child { margin-bottom: 0; }

/* Trust Center pages need the body wrapper to not clip (moved from an
   inline <style> in trust_center/base.html — strict PUBLIC_CSP blocks
   inline styles). */
.body-wrap { overflow: visible !important; }

/* ── Reliability — measured availability (native dark, brand type) ─────── */
.rel-status {
    margin: 0 0 3rem;
    padding: 1.6rem 1.75rem 1.5rem;
    border: 1px solid rgba(99, 102, 241, 0.18);
    background: rgba(99, 102, 241, 0.045);
    border-radius: 14px;
}
.rel-status-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.15rem;
}
.rel-status-eyebrow {
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--inv-bg-color); opacity: 0.4;
}
.rel-status-state {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.005em;
}
/* Squared marker that echoes the uptime bars — deliberately not a pulsing dot. */
.rel-status-state::before {
    content: ''; width: 7px; height: 7px; border-radius: 2px; flex: none;
}
.rel-status--operational .rel-status-state { color: #4ade80; }
.rel-status--operational .rel-status-state::before { background: #4ade80; }
.rel-status--degraded    .rel-status-state { color: #fbbf24; }
.rel-status--degraded    .rel-status-state::before { background: #fbbf24; }
.rel-status--down        .rel-status-state { color: #f87171; }
.rel-status--down        .rel-status-state::before { background: #f87171; }

.rel-status-figure { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.rel-status-pct {
    font-family: var(--brand-font, 'Space Grotesk', sans-serif);
    font-size: 3rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1;
    color: var(--inv-bg-color); font-variant-numeric: tabular-nums;
}
.rel-status-sub { font-size: 0.8rem; color: var(--inv-bg-color); opacity: 0.5; }

.rel-uptime-bars {
    display: flex; align-items: stretch; gap: 3px; height: 34px; margin-top: 1.6rem;
}
.rel-bar {
    flex: 1 1 0; min-width: 2px; border-radius: 2px; position: relative;
    background: rgba(241, 245, 249, 0.09); transition: opacity 0.12s ease;
}
.rel-bar--up       { background: #34d399; opacity: 0.82; }
.rel-bar--degraded { background: #fbbf24; opacity: 0.9; }
.rel-bar--down     { background: #f87171; }
.rel-bar--nodata   { background: rgba(241, 245, 249, 0.09); }
.rel-bar:hover { opacity: 1; }
.rel-bar-tip {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: #1e293b; border: 1px solid rgba(241, 245, 249, 0.14);
    color: var(--inv-bg-color); font-size: 0.72rem; white-space: nowrap;
    padding: 4px 9px; border-radius: 7px; opacity: 0; pointer-events: none;
    transition: opacity 0.1s ease; z-index: 3;
}
.rel-bar:hover .rel-bar-tip { opacity: 1; }
.rel-uptime-axis {
    display: flex; justify-content: space-between; margin-top: 0.55rem;
    font-size: 0.7rem; letter-spacing: 0.02em; color: var(--inv-bg-color); opacity: 0.35;
}
/* Higher specificity than `.tc-section p` (0,0,1,1), which would otherwise
   force this footnote back to 0.96rem. */
.rel-status p.rel-status-note {
    margin: 1.1rem 0 0; font-size: 0.5rem; line-height: 1.5;
    color: var(--inv-bg-color); opacity: 0.4; max-width: 560px;
}
@media (max-width: 560px) {
    .rel-status-pct { font-size: 2.4rem; }
    .rel-uptime-bars { height: 28px; }
    .rel-status-head { flex-wrap: wrap; gap: 0.5rem; }
}