/* ==========================================================================
   KuduDoc v6 — about.html in the v6 language (loaded after theme.css).
   v5 CSS sits in the lower layer (v5), so plain rules here beat it; theme.css is unlayered,
   so rules that change what it sets carry the same `html body` prefix (later file wins ties).
   24 Sep 2026: page rewritten to Daniel's rules — no hero render, no facts row, no R0 / reminder numerals,
   no 'what we don't claim' list, no journey carousel; the story is a paragraph plus the verb list.
   ========================================================================== */

html body .ab-page {
  --v6-card-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);
  --v6-card-shadow-on-blue: 0 2px 4px rgba(6, 22, 42, .1), 0 24px 56px -24px rgba(6, 22, 42, .5);
  --v6-on-blue-text: rgba(236, 244, 252, .86);
  --v6-on-blue-line: rgba(191, 227, 255, .28);
  --v6-wrap-pad: max(var(--gutter-desktop, 40px), calc((100% - 1080px) / 2));
}

/* ---------------------------------------------------------------- 1 · the opening: the landing blue, the mark as a flat poster,
   easing into the pale ground over its last 150px. The section runs full-bleed (it was a 1160px wrap). */
html body #hero.ab-hero {
  max-width: none; padding: 168px var(--v6-wrap-pad) 168px !important; color: #fff;
  background-color: #2a64a0;   /* read by site.js: the nav turns light-on-dark here */
  background-image:
    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"),
    linear-gradient(180deg, #2a64a0 0, #2a64a0 calc(100% - 150px), rgba(42, 100, 160, 0) 100%),
    linear-gradient(transparent, transparent);
  /* the solid colour is for site.js (it reads the section's background-color to give the nav its dark tone);
     the empty bottom layer clips that colour to the content box, so the ease in the bottom padding shows the ground */
  background-clip: border-box, border-box, content-box;
  /* the ease ends transparent, not #dcebf8: this opening is tall, and the ground under its foot is already
     paler than #dcebf8 — a solid end colour would leave a seam. */
  /* the poster at the landing's scale (as on a one-screen opening): a tall section at auto 150% would
     spread the strokes behind the copy and cut them at the ease; this keeps them whole, on the right */
  background-position: right -6vw top -60px, 0 0, 0 0;
  background-size: auto 960px, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  gap: 40px 64px;
}
html body .ab-hero .eyebrow {
  display: flex; align-items: center; margin-bottom: 24px; color: #d6eeff;
  font: 600 12.5px/1 var(--font-sans); letter-spacing: .15em; text-transform: uppercase;
}
html body .ab-hero .eyebrow::before { content: ""; width: 3px; height: 13px; margin-right: 10px; border-radius: 2px; background: var(--orange); transform: skewX(-14deg) translateY(1px); }
/* H1: Montserrat 650, the second line the quiet sky, the orange rule under the heading (as the landing) */
html body .ab-hero h1 {
  display: flex; flex-direction: column; align-items: flex-start;
  font: 650 clamp(46px, 6vw, 86px)/.98 var(--font-display); letter-spacing: -.038em; color: #fff;
}
html body .ab-hero h1 .text-blue { order: 1; color: #a9dcff; }
html body .ab-hero h1 .kd-rule { order: 2; margin: 26px 0 0; background: var(--orange); }
html body .ab-hero-lead { margin: 24px 0 28px; font: 400 clamp(20px, 2vw, 24px)/1.4 var(--font-sans); letter-spacing: -.012em; color: rgba(236, 244, 252, .86); }
html body .ab-hero .btn-secondary { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(191, 227, 255, .45); }
html body .ab-hero .btn-secondary:hover { background: rgba(191, 227, 255, .1); }
/* what KuduDoc is, in the entity sentence, under the lead */
html body .ab-hero-intro { margin: -8px 0 30px; max-width: 58ch; color: rgba(236, 244, 252, .86); font: 400 17px/1.6 var(--font-sans); }
/* one column: the copy on the left, the flat poster mark (the section's background) on the right */
html body #hero.ab-hero { grid-template-columns: minmax(0, 1fr); }
html body .ab-hero-copy { max-width: 640px; }

/* ---------------------------------------------------------------- 2 · the story: on the ground; the stage is the flat blue panel */
html body .ab-story { background: transparent; }
html body .ab-stage { border-radius: 24px; }
html body .ab-stage .paper-record.surface-white { background: #fffdf9; border: 0; box-shadow: 0 2px 4px rgba(6, 22, 42, .1), 0 18px 40px -18px rgba(6, 22, 42, .45); color: #102d49; }
html body .ab-stage .paper-record h3 { color: #102d49; }
html body .ab-stage .paper-record .paper-meta { color: #56697f; }
html body .ab-stage .paper-record .record-signature { color: #006bcb; }
html body .ab-stage .kd-mark--behind { display: none; }           /* decorative fade mark; the panel stays flat */
/* the fingerprint under the paper: white bars and a sky base line on the blue (they drew in navy ink, a smudge);
   its two small labels (a7c94e · SHA-256) in the on-blue pale so they stay legible */
html body .ab-stage .seal-fp svg { --kd-ink: #ffffff; --kd-line-strong: rgba(191, 227, 255, .45); --kd-muted: #d6eeff; }
html body .ab-essay .ab-story-text { color: #3f5470; }
/* the paper is the landing's lease: its title and three lines instead of grey placeholder bars */
html body .ab-stage .paper-record .paper-meta { color: #006bcb; }
html body .ab-stage .paper-record h3 { font-size: clamp(19px, 1.7vw, 23px); }
/* the lease's title is a line on the paper, not a page heading (it was an h3 under the h1) */
html body .ab-stage .paper-record .ab-lease-title { margin: 0; color: #102d49; font: 700 clamp(19px, 1.7vw, 23px)/1.15 var(--font-display); letter-spacing: -.02em; }
html body .ab-lease-lines { display: grid; gap: 8px; margin-top: 4px; }
html body .ab-lease-lines span { color: #3f5470; font: 500 12.5px/1.4 var(--font-sans); padding-bottom: 8px; border-bottom: 1px solid rgba(16, 45, 73, .08); }
html body .ab-stage .paper-bottom { margin-top: auto; }
/* no stamp over the paper (its 'Sealed · date and time' line straddled the paper edge, then covered the lease lines):
   the Sealed chip and the fingerprint strip carry the seal. The sheet is a little larger so the lines rarely wrap. */
html body .ab-stage .doc-seal { max-width: 330px; }
/* the sheet is as tall as its lease lines, so the Sealed chip sits right under them (a fixed 4/5.3 frame left a
   ~110px blank band), and the fingerprint strip hangs just below the sheet instead of on its bottom edge */
html body .ab-stage .doc-seal { aspect-ratio: auto; padding-top: 7%; margin-bottom: 78px; }
html body .ab-stage .paper-record { position: relative; top: 0; height: auto; }
html body .ab-stage .paper-bottom { margin-top: 2px; }
html body .ab-stage .seal-fp { top: 100%; bottom: auto; margin-top: 12px; }
html body .ab-stage figcaption .chip-proof { color: #d6eeff; }
/* the six verbs of the approved story, one per line, the verb in ink */
html body .ab-verbs { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid rgba(16, 45, 73, .08); }
html body .ab-verbs li { position: relative; padding: 13px 0 13px 22px; border-bottom: 1px solid rgba(16, 45, 73, .08); color: #3f5470; font-size: 16px; line-height: 1.55; }
html body .ab-verbs li::before {   /* the logo's slanted stroke */
  content: ""; position: absolute; left: 3px; top: 19px; width: 3px; height: 13px; border-radius: 2px;
  background: #006bcb; transform: skewX(-14deg) rotate(-8deg);
}
html body .ab-verbs b { color: #102d49; font-weight: 650; }
html body .ab-verbs li > span { display: block; margin-top: 3px; color: #56697f; font-size: 14px; }

/* ---------------------------------------------------------------- 3 · why: heading left, the story right; the turn in ink */
html body .ab-why { align-items: start; }
html body .ab-why p { margin-top: 0; color: #3f5470; font-size: 17px; line-height: 1.65; }
html body .ab-why .ab-why-turn { margin-top: 18px; color: #102d49; font: 650 22px/1.35 var(--font-display); letter-spacing: -.02em; }
html body .ab-why-links { display: flex; flex-wrap: wrap; gap: 0 28px; }

/* ---------------------------------------------------------------- 5 · three positions: one card, the middle one the flat blue panel */
html body .ab-values { border: 0; border-radius: 24px; background: #fff; box-shadow: var(--v6-card-shadow); }
html body .ab-values article { border-right-color: rgba(16, 45, 73, .07); }
html body .ab-values h3 { font-weight: 650; }
html body .ab-values article:not(.surface-blue) p:not(.fence) { color: #3f5470; }
html body .ab-value-accent.surface-blue { background: #2a64a0; }
html body .ab-value-accent p { color: var(--v6-on-blue-text); }
html body .ab-value-accent p a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(191, 227, 255, .6); text-underline-offset: 3px; }
/* the verb list's detail line links in the page blue */
html body .ab-verbs li > span a { color: #006bcb; font-weight: 600; text-underline-offset: 3px; }
html body .ab-values article > .eyebrow:first-child { margin-top: 4px; }

/* ---------------------------------------------------------------- 8 · custody is not ownership: a card */
html body .ab-contact p a { color: #006bcb; font-weight: 600; text-underline-offset: 3px; }
html body .ab-custody.surface-paper { border: 0; border-radius: 24px; background: #fff; box-shadow: var(--v6-card-shadow); }

/* ---------------------------------------------------------------- 8b · the company behind KuduDoc (ECT Act s43): a card like custody,
   the lead left and the facts as label/value rows right. Until Daniel's details arrive the {{CO_…}} placeholders show
   as dashed chips (nav.css draws them for the dark footer; on the light card they take the ink). */
html body #company { margin-top: 40px; }
html body .ab-company {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; padding: 40px;
  border-radius: 24px; background: #fff; box-shadow: var(--v6-card-shadow);
}
html body .ab-company > * { min-width: 0; }
html body .ab-company-lead h2 { margin-bottom: 24px; }
html body .ab-company-lead p { margin: 0 0 14px; color: #3f5470; font-size: 15px; }
html body .ab-company-lead p a { color: #006bcb; font-weight: 600; text-underline-offset: 3px; }
html body .ab-company-facts { margin: 0; border-top: 1px solid rgba(16, 45, 73, .08); }
html body .ab-company-facts > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(16, 45, 73, .08); }
html body .ab-company-facts dt { color: #56697f; font: 600 13px/1.5 var(--font-sans); }
html body .ab-company-facts dd { margin: 0; color: #102d49; font: 500 15px/1.5 var(--font-sans); overflow-wrap: anywhere; }
html body .ab-company-facts dd a { color: #006bcb; font-weight: 600; text-underline-offset: 3px; }
html body .ab-page .ph { border-color: rgba(0, 107, 203, .45); color: #0b4f8f; background: rgba(0, 107, 203, .06); white-space: normal; }

/* ---------------------------------------------------------------- 9 · closing: the wrapper must not paint pale margins round the blue
   (theme.css pads both #closing and the .cta-gradient inside it; here #closing wraps one) */
html body #closing.ab-closing { padding: 0 !important; background: #2a64a0; }
/* the band is v5's two-track grid (copy | a 240px track for the mark, which theme.css empties). The copy sat
   centred in the first track, so its left edge moved with the text (x=198 against the page's 180). One track,
   capped at the page column (1080) and centred; the empty mark box goes (on phones it stacked under the copy) */
html body #closing.ab-closing .cta-gradient { grid-template-columns: minmax(0, 1080px); justify-content: center; }
/* theme.css zeroes the inner band's padding and this page zeroed #closing's, so the copy touched the band's top edge
   (and the phone's left edge): the band carries the landing's closing padding itself */
html body #closing.ab-closing .cta-gradient { padding: 112px 40px 96px !important; }
html body #closing.ab-closing .cta-gradient::after { content: none; }
html body #closing.ab-closing .cta-gradient-inner { width: 100%; max-width: none; }

/* ---------------------------------------------------------------- phone */
@media (max-width: 700px) {
  html body #hero.ab-hero { padding: 128px 20px 160px !important; background-size: auto 620px, 100% 100%, 100% 100%; background-position: right -34vw top 40px, 0 0, 0 0; }
  html body .ab-hero h1 { font-size: 46px; }
  html body .ab-hero .eyebrow { font-size: 11.5px; }
  html body .ab-hero-lead { font-size: 19px; }
  html body #closing.ab-closing .cta-gradient { padding: 80px 20px 64px !important; }
  html body .ab-verbs li { font-size: 15px; }
  html body .ab-why p { font-size: 16px; }
  html body .ab-why .ab-why-turn { font-size: 20px; }
  html body .ab-company { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 26px 18px; }
  html body .ab-company-lead h2 { font-size: 30px; }
  html body .ab-company-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 375px) {
  html body .ab-hero h1 { font-size: 42px; }
}

/* review (27 Sep 2026): 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; }