/* ==========================================================================
   KuduDoc v6 — Seal & check, in the v6 language (loaded after theme.css).
   v5 CSS sits in a lower layer, so plain rules here win; !important only where theme.css uses it.

   What changes against v5:
   · the opening becomes the landing's blue, with the mark as a flat poster; the illustration sits
     on it as a white card (a seal record with real rows) and the blue eases into the pale ground below it
   · no stat row, no icon grid: "what stays with the file" is a plain two-item list; the handover
     diagram shows one controller handing to one recipient
   · panels that painted their own grey/ice/paper surface become white cards (or the flat blue)
   · the demonstration keeps the flat blue, loses its soft mark, and its panes become white cards
   · everything about the seal (certificate rule, seal rings) takes the one orange; the compare lists'
     marks are pale blue (a signed PDF alone) and blue (a sealed file), not orange
   · small display labels are Montserrat 650; wrapped eyebrows get line spacing
   · the closing is the landing's: full-bleed into the footer, the copy on the opening's edge, the mark
     poster, the eyebrow's slanted stroke, the orange primary action and a ghost pill
   ========================================================================== */

.sc-page {
  --v6-card: 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-poster: 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");
  --ease: 120px;   /* the opening's ease into the pale ground; the first section starts where it ends */
  padding-bottom: 0;
}

/* ---------------------------------------------------------------- 1 · the opening */
/* Full-bleed blue (the section is a centred wrap in v5: its padding now centres the content). */
html body main .sc-page > #hero {
  --gut: max(40px, calc(50vw - 580px));
  position: relative; isolation: isolate;
  max-width: none; width: 100%;
  padding: 168px var(--gut) 72px !important;
  text-align: left; color: #fff;
  background: var(--v6-poster) right -6vw top -160px / auto 1180px no-repeat, #2a64a0;
  background-color: #2a64a0;   /* the nav reads this to take its dark tone */
}
/* the blue eases into the pale ground below the opening: a fade to transparent, so no seam. The fade is
   eased at both ends (no visible edge where the solid blue stops) and finishes before the facts row, so
   the cards sit on the pale ground, not in a blue haze. */
#hero::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--ease); z-index: -1;
  background: linear-gradient(180deg,
    #2a64a0 0, rgba(42, 100, 160, .94) 15%, rgba(42, 100, 160, .78) 30%, rgba(42, 100, 160, .5) 50%,
    rgba(42, 100, 160, .22) 70%, rgba(42, 100, 160, .06) 85%, rgba(42, 100, 160, 0) 100%);
  pointer-events: none;
}
#three { position: relative; z-index: 1; padding-top: calc(var(--ease) + 24px); }

#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;
}
#hero .eyebrow::before {
  content: ""; flex: none; width: 3px; height: 13px; margin-right: 10px; border-radius: 2px;
  background: var(--orange); transform: skewX(-14deg) translateY(1px);
}
#hero h1 {
  max-width: none; margin: 0;
  font: 650 clamp(46px, 6vw, 86px)/.98 var(--font-display); letter-spacing: -.038em; color: #fff;
  text-wrap: initial;
}
#hero h1 .sc-first-thought { padding-bottom: 20px; margin-bottom: 12px; }
#hero h1 .kd-rule { background: var(--orange); width: 96px; height: 5px; }
#hero h1 .text-slate { color: #a9dcff; }
#hero .sc-lead {
  max-width: 40ch; margin: 26px 0 0;
  font: 400 clamp(19px, 1.7vw, 23px)/1.42 var(--font-sans); letter-spacing: -.012em;
  color: rgba(236, 244, 252, .86);
}
#hero .btn-row { justify-content: flex-start; gap: 14px; margin-top: 34px; }
#hero .btn-ghost {
  background: transparent; color: #fff; border-color: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(191, 227, 255, .45);
}
#hero .btn-ghost:hover { background: rgba(191, 227, 255, .1); }

/* the illustration: one white card on the blue, like the landing's documents */
#hero .sc-composite {
  margin: 64px 0 0; padding: 22px 30px 30px; border: 0; border-radius: 24px;
  background: #fff; color: var(--navy);
  box-shadow: 0 2px 4px rgba(6, 22, 42, .08), 0 24px 60px -18px rgba(6, 22, 42, .38);
}
#hero .sc-composite figcaption { color: #3f5470; }
/* the two panes fill the card and line up with its caption (v5 centred them in a 900px column) */
@media (min-width: 901px) {
  #hero .sc-composite-body { max-width: none; grid-template-columns: 1fr 1fr; gap: 32px; }
}
#hero .sc-certificate {
  background: #fff; border: 0; border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .09), inset 0 3px 0 var(--orange), 0 14px 30px -20px rgba(16, 45, 73, .35);
}
#hero .sc-hero-result {
  background: #fff; border: 0; border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08), 0 14px 30px -20px rgba(16, 45, 73, .35);
}
#hero .sc-hero-result :is(p, small) { color: #3f5470; }
#hero .sc-hero-result .kd-seal-result b { color: var(--navy); }
/* the seal record: label + value rows, no placeholder rules; the seal ring sits top right */
#hero .sc-certificate h3 { margin: 12px 0 14px; padding-right: 80px; font-weight: 650; font-size: 21px; }
.sc-seal-rows { margin: 0; display: grid; gap: 0; }
.sc-seal-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid #e6ecf2; font-size: 13.5px; }
.sc-seal-rows dt { color: #56697f; }
.sc-seal-rows dd { margin: 0; color: var(--navy); font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.sc-seal-rows .sc-mono { font: 500 12.5px/1.5 var(--font-mono); }
#hero .sc-ring { top: 18px; right: 20px; bottom: auto; width: 62px; }
#hero .sc-paper-top { color: #d4520f; font: 600 11px/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }

/* ---------------------------------------------------------------- small display labels: Montserrat 650, never 700 */
.sc-page .kd-step b, .sc-page .kd-seal-result b { font-weight: 650; }
/* eyebrows that wrap on a phone need line spacing (the theme sets them at line-height 1) */
.sc-page section:not(#hero) .eyebrow { line-height: 1.35; }

/* ---------------------------------------------------------------- seal marks take the one orange */
.sc-ring .kd-object, .sc-cert-card .kd-object { --kd-blue: var(--orange); --kd-blue-200: #ffd3b8; }

/* ---------------------------------------------------------------- 2 · what a seal records */
.sc-page .sc-copy h3.display-lg, .sc-page .sc-copy h2.display-lg { font-weight: 650; letter-spacing: -.028em; text-wrap: balance; }
.sc-fp-visual { background: #fff; border-radius: 22px; box-shadow: var(--v6-card); }
.sc-fp-visual .fingerprint { color: var(--navy); }
.sc-cert-card {
  border: 0; border-radius: 20px; background: #fff;
  box-shadow: inset 0 3px 0 var(--orange), var(--v6-card);
}
.sc-cert-card h4 { font-weight: 650; letter-spacing: -.02em; }
.sc-cert-card > .kd-object { width: 72px; height: 72px; }
/* the seal marks show the ring and mark only: their viewBox stops above the tiny "date and time" line */
.sc-ring .kd-object, .sc-cert-card > .kd-object { overflow: hidden; }

/* ---------------------------------------------------------------- 5 · the demonstration (flat blue) */
html body .sc-demo.surface-dawn {
  border-radius: 24px; padding: 56px;
  background: var(--v6-poster) right -90px top -40px / auto 130% no-repeat, #2a64a0;
}
.sc-demo .kd-mark--behind { display: none; }       /* decorative soft mark: flat language, no glow */
.sc-demo > p { color: rgba(236, 244, 252, .86); }
.sc-demo .text-sky { color: #a9dcff; }
.sc-demo .fp-pane {
  background: #fff; border: 0; border-radius: 18px;
  box-shadow: 0 2px 4px rgba(6, 22, 42, .08), 0 18px 40px -20px rgba(6, 22, 42, .4);
}
.sc-demo .fp-pane label { color: var(--navy); }
.sc-demo .sc-hash-label { color: #56697f; }
.sc-demo textarea { background: #f5f8fb; border-color: #dfe6ee; }
.sc-demo .fp-hash { background: #eef5fc; color: #004e99; }
.sc-demo .fp-verdict { background: #fff; color: var(--navy); }
.sc-demo .fp-verdict::before { background: #006bcb; }
.sc-demo .caption-proof { color: rgba(236, 244, 252, .9); }

/* ---------------------------------------------------------------- 6 · read the record */
.sc-outcomes { background: #fff; border: 0; border-radius: 22px; box-shadow: var(--v6-card); }
.sc-outcomes .result-card { border: 0; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08); }
.sc-tablist .kd-chip { background: #fff; border-color: #dfe6ee; }
.sc-tablist .kd-chip.is-active { background: #eef5fc; border-color: #006bcb; box-shadow: none; color: #004e99; }
#check .sc-copy p:first-child { margin-top: 0; }
#check .sc-copy p { font-size: 16px; line-height: 1.6; color: #3f5470; }
.sc-outcomes .sc-small { margin: 14px 0 0; color: #3f5470; }
/* the activity record: its own short section, no counters, no filler mark */
.sc-activity { padding-top: 0; }
.sc-activity .kd-activity { background: #fff; border-radius: 20px; box-shadow: var(--v6-card); padding: 14px 18px 14px 34px; }
.sc-activity .kd-activity::before { left: 19px; }

/* ---------------------------------------------------------------- 7 · custody */
.sc-custody-diagram { border: 0; border-radius: 22px; background: #fff; box-shadow: var(--v6-card); }
/* one controller hands to one recipient */
.sc-handover { display: grid; grid-template-columns: 1fr minmax(48px, 110px) 1fr; align-items: center; gap: 10px; margin: 8px 0 14px; }
.sc-party { padding: 12px 10px; border-radius: 14px; background: #f3f7fb; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08); }
.sc-party.is-next { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(0, 107, 203, .35); }
.sc-party-role { display: block; font-size: 11.5px; line-height: 1.35; color: #56697f; }
.sc-party b { display: block; margin-top: 4px; font: 650 15px/1.3 var(--font-display); color: var(--navy); }
.sc-handover-arrow { width: 100%; height: 28px; color: #006bcb; }

/* ---------------------------------------------------------------- 8 · what stays with the file: a plain two-item list */
.sc-keeps { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.sc-keeps li { padding: 28px 30px; border-radius: 22px; background: #fff; box-shadow: var(--v6-card); }
.sc-keeps h3 { margin: 0 0 10px; font: 650 19px/1.35 var(--font-display); letter-spacing: -.015em; color: var(--navy); }
.sc-keeps p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: #3f5470; }

/* ---------------------------------------------------------------- 10 · questions: the site's accordion cards */
/* the theme's card sets the inner gutter on summary and answer; v5's :last-child rule used to add a second
   gutter to the last card only (it sat indented) */
.sc-faq details, .sc-faq details:last-child {
  border: 0; border-radius: 16px; background: #fff; margin-bottom: 10px; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07);
}
.sc-faq details[open] { padding-bottom: 0; box-shadow: inset 0 0 0 1px rgba(0, 107, 203, .28); }
.sc-faq summary { color: var(--navy); }
/* the + badge: line-height 1 so the glyph sits on the circle's centre (it inherited the summary's 35px) */
.sc-faq summary span { background: #eef5fc; line-height: 1; place-items: center; color: #006bcb; }

/* ---------------------------------------------------------------- 11 · closing: as on the landing
   Full-bleed blue into the footer (global); here: one column on the opening's 1160 edge, the mark
   poster, the eyebrow's slanted stroke, the orange primary action and a ghost pill. */
html body main .sc-page > #closing.sc-section { padding: 0 !important; margin: 0 !important; max-width: none; width: auto; background: #2a64a0; }
html body #closing > .cta-gradient-kd {
  display: block;
  background: var(--v6-poster) right -6vw top -170px / auto 720px no-repeat, #2a64a0;
}
html body #closing > .cta-gradient-kd::after { content: none; }
html body #closing > .cta-gradient-kd > .cta-gradient-inner { width: 100%; max-width: 1160px; margin: 0 auto; }
#closing .eyebrow { display: flex; align-items: flex-start; color: #d6eeff; line-height: 1.25; }
#closing .eyebrow::before {
  content: ""; flex: none; width: 3px; height: 13px; margin-right: 10px; border-radius: 2px;
  background: var(--orange); transform: skewX(-14deg) rotate(-8deg) translateY(1px);
}
#closing h2.kd-h2 { padding-left: 0; }
#closing h2.kd-h2::before { content: none; }
#closing p { color: rgba(236, 244, 252, .86); }
#closing .btn-row { gap: 12px; }
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; }

/* ---------------------------------------------------------------- phone */
@media (max-width: 900px) {
  html body .sc-demo.surface-dawn { padding: 40px 32px; }
  .sc-keeps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sc-page { --ease: 96px; }
  html body main .sc-page > #hero { --gut: 20px; padding: 128px var(--gut) 56px !important; background-position: right -30vw top -60px; background-size: auto 820px; }
  #hero .eyebrow { font-size: 11.5px; letter-spacing: .13em; margin-bottom: 18px; }
  #hero h1 { font-size: clamp(40px, 11vw, 46px); }
  #hero h1 .sc-first-thought { padding-bottom: 16px; margin-bottom: 8px; }
  #hero .sc-lead { font-size: 17px; margin-top: 20px; }
  #hero .btn-row { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 26px; }
  #hero .btn-row .btn { width: 100%; }
  #hero .sc-composite { margin-top: 40px; padding: 16px; border-radius: 20px; }
  html body .sc-demo.surface-dawn { padding: 30px 20px; border-radius: 22px; background-size: auto 60%; background-position: right -120px top -20px; }
  .sc-keeps li { padding: 22px 20px; }
  /* the closing keeps the opening's 20px gutter */
  html body #closing > .cta-gradient-kd {
    padding: 88px 20px 72px !important;
    background-size: auto 480px; background-position: right -130px top -60px;
  }
}

/* ---------------------------------------------------------------- 12 · words pass (27 Sep 2026)
   Link lines under a row, the demo's next step on the blue, the FAQ's + drawn by CSS (so the question
   text carries no stray "+"), and the seal record's file name as a label, not a page heading. */
.sc-copy .sc-more { display: inline-block; margin-top: 2px; font-weight: 600; }
.sc-keeps .sc-more { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; }
.sc-demo > .sc-demo-next { margin-top: 8px; font-size: 14px; }
.sc-demo-next a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); text-underline-offset: 3px; }
.sc-faq summary span::before { content: "+"; }
#hero .sc-certificate .sc-cert-name { margin: 12px 0 14px; padding-right: 80px; font: 650 21px/1.25 var(--font-display); letter-spacing: -.02em; color: var(--navy); }

/* review (27 Sep 2026): the forensic pack card shows the export it describes */
.sc-zip { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: #f5f8fb; box-shadow: inset 0 0 0 1px #e6ecf2; }
.sc-zip-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sc-zip-head > div { min-width: 0; }
.sc-zip-ico { display: grid; flex: none; place-items: center; width: 32px; height: 38px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1px #d6e0eb; color: #3f5470; font: 700 9px/1 var(--font-sans); font-style: normal; letter-spacing: .05em; }
.sc-zip-head b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; color: var(--navy); }
.sc-zip-head small { display: block; font-size: 12.5px; color: #56697f; }
.sc-zip dl { margin: 12px 0 0; }
.sc-zip dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0 0; border-top: 1px solid #e6ecf2; margin-top: 8px; font-size: 13px; }
.sc-zip dt { font-weight: 600; color: var(--navy); }
.sc-zip dd { margin: 0; color: #56697f; text-align: right; }