/* ==========================================================================
   KuduDoc v6 — security-and-trust.html in the v6 language (loaded after theme.css).
   v5 CSS sits in a lower layer, so plain rules here win; theme.css !important rules are
   overridden with !important only where noted.
   24 Sep 2026: page rewritten to Daniel's rules — the eight-card overview, the 'what we don't claim' panel,
   the 'Certifications held: 0' band, the identity chapter and the facts row are gone; each point is said once.
   ========================================================================== */

/* ---------------------------------------------------------------- 0 · shared: the landing's 1200px column, v6 type, one card */
html body .st-page .st-wrap { max-width: 1280px; }
html body .st-page .eyebrow { color: #006bcb; }
html body .st-page h3 { font-weight: 650; }
html body .st-page :is(h2, h3) { color: #102d49; }
html body .st-page p { color: #56697f; }
html body .st-page .fence { color: #3f5470; }
html body .st-page .st-link { color: #006bcb; }
html body .st-page :is(.st-detail-mock.mock, .st-evidence.surface-paper, .st-faq details) {
  border: 0; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07), 0 1px 2px rgba(16, 45, 73, .05), 0 16px 40px -24px rgba(16, 45, 73, .32);
}

/* ---------------------------------------------------------------- 1 · the opening: blue, the mark as a flat poster, easing into the pale ground */
html body #hero.st-hero {
  position: relative; overflow: hidden; text-align: left; color: #fff;
  padding: 168px 0 196px !important;   /* theme.css clears the nav with !important */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 72'%3E%3Cg transform='translate(40 36) rotate(-8) skewX(-14) translate(-31 -32)' stroke-linecap='round' stroke-width='6.5'%3E%3Cpath d='M13 14V50' stroke='%23004e99' stroke-opacity='.16'/%3E%3Cpath d='M25 9V55' stroke='%23004e99' stroke-opacity='.22'/%3E%3Cpath d='M37 13V51' stroke='%23004e99' stroke-opacity='.13'/%3E%3Cpath d='M49 18V46' stroke='%23004e99' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") right -6vw top -40px / auto 760px no-repeat,
    linear-gradient(180deg, #2a64a0 0, #2a64a0 calc(100% - 150px), rgba(42, 100, 160, 0) 100%),
    none;
  /* a solid colour too, so site.js reads the opening as dark and gives the nav its white tone; clipped to
     the content box (via the empty last layer) so it never paints under the ease. The ease runs to
     transparent, so it meets the page ground at whatever shade it has there — no seam. */
  background-color: #2a64a0;
  background-clip: border-box, border-box, content-box;
}
html body .st-hero > .st-wrap { position: relative; z-index: 1; }
html body .st-hero .eyebrow {
  display: flex; align-items: center; margin: 0 0 24px; color: #d6eeff;
  font: 600 12.5px/1 var(--font-sans); letter-spacing: .15em; text-transform: uppercase;
}
html body .st-hero .eyebrow::before {
  content: ""; flex: none; width: 3px; height: 13px; margin-right: 10px; border-radius: 2px;
  background: #ff762b; transform: skewX(-14deg) rotate(-8deg) translateY(1px);
}
html body .st-hero h1 { margin: 0 0 24px; max-width: none; color: #fff; font: 650 clamp(46px, 6vw, 86px)/.98 var(--font-display); letter-spacing: -.038em; }
html body .st-hero .st-first-line { margin: 0; color: #fff; }
html body .st-hero h1 .text-blue { color: #a9dcff; }
html body .st-hero .st-first-line .kd-rule { width: 96px; height: 4px; margin: 18px 0 16px; background: #ff762b; }
html body .st-hero .st-lead { max-width: 34ch; margin: 0; color: rgba(236, 244, 252, .86); font: 400 clamp(20px, 2vw, 26px)/1.4 var(--font-sans); letter-spacing: -.012em; }
html body .st-hero .st-ctas { justify-content: flex-start; margin-top: 32px; }
html body .st-hero .btn-secondary { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(191, 227, 255, .45); }
html body .st-hero .btn-secondary:hover { background: rgba(191, 227, 255, .1); }
/* the illustrated result card left the opening: the same three lines are shown, interactively, in chapter 01 */

/* ---------------------------------------------------------------- 2 · shared marks */
/* the illustrated states' labels: Montserrat 650 like every heading, not 700/900 */
html body .st-page :is(.kd-step b, .kd-seal-result b, .mock > strong) { font-weight: 650; }
/* a fence's rule is its ::before; on the blue it is pale, not a blue line lost in the blue */
html body :is(#disclose, #closing) .fence::before { background: rgba(214, 238, 255, .5); }
/* the old #results / #dont-claim targets are a zero-size anchor on the chapters' heading */
html body .st-alias { display: block; height: 0; }

/* ---------------------------------------------------------------- 4 · look closer: the reading rail and eight chapters */
html body .st-side a { color: #6b7c8f; border-radius: 12px; }
html body .st-side a span { color: #3f5470; }
html body .st-side a.is-active { background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07), 0 8px 20px -14px rgba(16, 45, 73, .3); }
html body .st-side a.is-active::before { width: 3px; height: 15px; border-radius: 2px; transform: skewX(-14deg) rotate(-8deg); }
html body .st-side a.is-active span { color: #102d49; }
html body .st-detail { border-bottom-color: rgba(16, 45, 73, .08); }
html body .st-detail h3 { letter-spacing: -.03em; }
html body .st-detail-mock.mock { border-radius: 22px; padding: 28px; }
html body .st-result-controls button { border: 0; border-radius: 999px; padding: 10px 16px; background: #fff; color: #3f5470; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .12); }
html body .st-result-controls button:hover { box-shadow: inset 0 0 0 1.5px #006bcb; }
html body .st-result-controls button[aria-pressed=true] { background: #006bcb; color: #fff; box-shadow: none; }
html body .st-detail .kd-activity { background: #f6f9fd; border-radius: 14px; }
html body .st-control-grid > div { border: 0; border-radius: 14px; background: #f6f9fd; }
/* links inside the body copy (the guides, the checker, the Information Officer) and the mock's "retention duties" */
html body .st-detail p:not(.fence) a, html body .st-control-grid small a {
  color: #006bcb; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(0, 107, 203, .35); text-underline-offset: 3px;
}
html body .st-detail p:not(.fence) a:hover, html body .st-control-grid small a:hover { text-decoration-color: currentColor; }
html body .st-certificate .st-cert-icon, html body .st-mini .st-cert-icon { border-color: #cfe6ff; }
html body .st-page .st-certificate strong { font-weight: 650; }   /* "Validity unknown": v5 set 700; every heading here is 650 */
html body .st-receipt { border-top-color: rgba(16, 45, 73, .08); }
html body .st-page .capture .mock-frame { border: 0; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07), 0 16px 40px -24px rgba(16, 45, 73, .32); }
/* the captures' title bars: the landing's quiet browser bar (small slate label), not an 18px line of body text */
html body .st-page .capture .capture-frame-titlebar {
  height: 40px; padding: 0 18px; gap: 8px; background: #f6f9fd; border-bottom: 1px solid rgba(16, 45, 73, .07);
  color: #56697f; font: 500 12.5px/1 var(--font-sans); letter-spacing: 0;
}
/* the Vault capture says "Cropped to the Vault panel": v5's crop (148% wide, shifted left) is overridden by the
   generic .capture img { width: 100% }, so the frame showed an empty corner and cut the panel. Restore the crop. */
html body .st-page .st-capture-crop img { width: 148%; max-width: none; }

/* ---------------------------------------------------------------- 5 · keep evidence */
html body .st-evidence.surface-paper { border-radius: 24px; padding: 48px; }
html body .st-evidence-files > div { border: 0; border-radius: 16px; background: #f6f9fd; }
html body .st-evidence-files b { color: #102d49; }
/* the four files as text tiles with the logo's slanted stroke — the illustration symbols shrank to specks here */
html body .st-evidence-files > div { align-items: flex-start; justify-content: flex-start; text-align: left; padding: 22px 20px 20px; gap: 6px; }
html body .st-evidence-files > div::before { content: ""; width: 3px; height: 14px; margin: 0 0 8px 2px; border-radius: 2px; background: #006bcb; transform: skewX(-14deg) rotate(-8deg); }
html body .st-evidence-files b { font: 650 17px/1.3 var(--font-display); letter-spacing: -.02em; }

/* ---------------------------------------------------------------- 6 · responsible disclosure: a flat blue panel, not a band */
html body #disclose.surface-blue { background: transparent; padding: 32px 0; color: inherit; }
html body #disclose > .st-wrap {
  max-width: 1200px; padding: 64px; border-radius: 28px; background: #2a64a0; color: #fff;
}
html body #disclose .eyebrow { color: #d6eeff; }
html body #disclose h2 { color: #fff; }
html body #disclose > .st-wrap > div > p { color: rgba(236, 244, 252, .86); }
html body #disclose .mailbox-card { border-radius: 22px; box-shadow: 0 2px 4px rgba(6, 22, 42, .08), 0 24px 60px -18px rgba(6, 22, 42, .38); }
html body #disclose .mailbox-card address { color: #102d49; }
html body #disclose .mailbox-card p { color: #56697f; }
html body #disclose .mailbox-card small { color: #006bcb; }

/* ---------------------------------------------------------------- 7 · FAQ */
html body .st-faq details { border-radius: 18px; }
html body .st-faq details[open] { background: #fff; }
html body .st-faq summary { color: #102d49; }
/* theme.css pads every summary evenly; this one carries a round + on the right, so its text must stop short of it */
html body main .st-faq details > summary { padding-right: 64px; }
html body .st-faq summary::after { background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .12); color: #006bcb; }
html body .st-faq-contact { color: #56697f; }

/* ---------------------------------------------------------------- 8 · the closing: full bleed, straight into the footer */
html body #closing.st-closing { padding: 0 !important; max-width: none; }
html body #closing.st-closing > .cta-gradient {
  grid-template-columns: minmax(0, 1fr);
  padding: 112px max(40px, calc((100% - 1200px) / 2)) 96px !important;
}
html body #closing.st-closing > .cta-gradient::after { content: none; }
html body #closing.st-closing .cta-gradient-inner { max-width: 1200px; margin: 0; }
html body #closing.st-closing .cta-copy > .eyebrow { color: #d6eeff; }
html body #closing.st-closing .cta-copy > p { color: rgba(236, 244, 252, .86); }

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1000px) {
  html body #disclose > .st-wrap { margin: 0 20px; width: auto; padding: 56px 36px; }
}

/* ---------------------------------------------------------------- phone */
@media (max-width: 700px) {
  html body #hero.st-hero {
    padding: 124px 0 172px !important;
    background-position: right -48vw top 40px, 0 0, 0 0; background-size: auto 620px, auto, auto;
  }
  html body .st-hero h1 { font-size: 46px; line-height: .98; margin-bottom: 20px; }
  html body .st-hero .st-first-line .kd-rule { width: 72px; margin: 14px 0 12px; }
  html body .st-hero .st-lead { font-size: 19px; }
  html body .st-hero .st-ctas { margin-top: 26px; }
  html body #disclose.surface-blue { padding: 24px 0; }
  html body #disclose > .st-wrap { margin: 0 12px; padding: 44px 20px 40px; border-radius: 22px; }
  html body .st-detail-mock.mock { padding: 18px; border-radius: 20px; }
  /* the sticky topic rail on phones: a floating card that clears the fixed nav */
  html body .st-side { top: 76px; border: 0; border-radius: 16px; padding: 6px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07), 0 10px 24px -16px rgba(16, 45, 73, .35); }
  html body .st-side a.is-active { box-shadow: none; background: #eef5fc; }
  /* v5 lays the rail out as 2 rows × 4 (~100px); with the fixed nav that covered ~176px of the screen and the
     chapters' eyebrows passed under it. One row that scrolls sideways inside itself (~52px) — the document stays 390. */
  html body .st-side { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 2px; }   /* row: v5's desktop rail is a column */
  html body .st-side::-webkit-scrollbar { display: none; }
  html body .st-side a { flex: none; min-height: 36px; padding: 8px 12px 8px 16px; }
  html body .st-detail { scroll-margin-top: 150px; }
  html body .st-evidence.surface-paper { padding: 24px 20px; border-radius: 20px; }
  html body .st-page .st-capture-crop img { width: 164%; }   /* v5's phone crop, restored as on desktop */
  html body #closing.st-closing > .cta-gradient { padding: 80px 20px 64px !important; }
  html body main .st-faq details > summary { padding-right: 56px; }
}

/* ---------------------------------------------------------------- review (27 Sep 2026): the Vault and Ask, drawn in HTML
   The two captures (old app builds: a sparkle icon, other labels) are replaced by the kda panels vault.html and
   ask.html draw, so the same screen looks the same on every page. */
html body .st-page .st-app { margin: 0; }
html body .st-page .st-app .mock-frame { overflow: hidden; border: 1px solid rgba(16, 45, 73, .1); border-radius: 20px; background: #fff;
  box-shadow: 0 1px 2px rgba(16, 45, 73, .05), 0 16px 40px -24px rgba(16, 45, 73, .32); }
html body .st-page .st-app .kda { color: #102d49; }
html body .st-page .st-app .capture-caption { margin-top: 12px; }
html body .st-page .st-app .capture-caption p { margin: 0; }

/* the closing's primary action is the landing's orange, as on every other page */
html body #closing .btn-onblue {
  color: #fff; border: 0; background: linear-gradient(180deg, #ff8f45 0%, #ff6a30 55%, #ff5528 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(160,40,10,.25), 0 1px 2px rgba(120,30,0,.25), 0 8px 22px -6px rgba(255,90,40,.55);
}
html body #closing .btn-onblue:hover { background: linear-gradient(180deg, #ff9a55 0%, #ff7036 55%, #ff5a2c 100%); color: #fff; }

/* kda · the app panel: shared, in theme.css */