/* ==========================================================================
   KuduDoc v6 — Professionals. Page overrides on top of theme.css.
   The v5 page CSS sits in the lower "v5" layer, so plain rules here win.
   Language: blue opening with the mark as a poster → pale → white → the closing blue;
   no section paints its own band; surfaces are white cards or flat blue panels; flat, one orange.
   24 Sep 2026: the five practice chapters became one switch (tabs); the orbit cards, the chooser
   cards, the step rows and the per-chapter legal lines are gone.
   ========================================================================== */

/* ---------------------------------------------------------------- 1 · the opening */
html body #hero.pr-hero {
  padding: 168px 0 72px !important;
  color: #fff;
  background: #2a64a0;   /* a solid colour, so site.js reads the opening as dark and the nav turns white */
  /* the surface variables the v5 atoms read, switched to the blue */
  --c-text-main: #fff; --c-text-secondary: rgba(236, 244, 252, .86); --c-accent: #d6eeff;
  --surface-ink: #fff; --surface-muted: rgba(236, 244, 252, .86); --surface-line: rgba(191, 227, 255, .28);
}
/* the flat KuduDoc-mark poster (the .hero-cu poster), fading out before the opening ends so no stroke is cut */
html body #hero.pr-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  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 center / auto 150% no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 320px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 320px), transparent 100%);
}
/* the blue eases into the pale ground over the next section's first 180px (transparent, so it meets
   whatever the ground is at that height — no seam) */
html body #hero + #practices {
  background: linear-gradient(180deg, #2a64a0 0, rgba(42, 100, 160, .97) 18px, rgba(42, 100, 160, .9) 36px, rgba(42, 100, 160, .79) 54px,
    rgba(42, 100, 160, .65) 72px, rgba(42, 100, 160, .5) 90px, rgba(42, 100, 160, .35) 108px, rgba(42, 100, 160, .21) 126px,
    rgba(42, 100, 160, .1) 144px, rgba(42, 100, 160, .03) 162px, rgba(42, 100, 160, 0) 180px);
  padding-top: 210px;
}

/* eyebrow and headline across the top; the lead and actions on the left, the example result on the right,
   the facts line across the foot */
html body #hero .pr-hero-inner { position: relative; z-index: 1; text-align: left; }
@media (min-width: 981px) {
  html body #hero .pr-hero-inner {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; align-items: start;
  }
  html body #hero .pr-hero-inner > * { grid-column: 1; }
  html body #hero .pr-hero-inner > :is(.eyebrow, h1, .pr-facts) { grid-column: 1 / -1; }
  html body #hero .pr-proof { grid-column: 2; grid-row: 3 / span 3; align-self: start; margin: 30px 0 0; max-width: none; }
}
html body #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 #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 #hero h1 {
  margin: 0; max-width: none; color: #fff;
  font: 650 clamp(46px, 5.6vw, 80px)/.98 var(--font-display); letter-spacing: -.038em;
}
html body #hero h1 > .text-slate { display: block; color: #a9dcff; text-wrap: balance; }
html body #hero .kd-rule { width: 96px; height: 4px; margin: 18px 0 16px; background: #ff762b; }
html body #hero .pr-lead {
  max-width: 34ch; margin: 24px 0 0; color: rgba(236, 244, 252, .86);
  font: 400 clamp(19px, 1.8vw, 24px)/1.42 var(--font-sans); letter-spacing: -.012em;
}
/* the plain-words line under the lead: one step quieter, so the H1 and the lead keep the voice */
html body #hero .pr-intro {
  max-width: 50ch; margin: 16px 0 0; color: rgba(236, 244, 252, .86);
  font: 400 17px/1.6 var(--font-sans); letter-spacing: -.005em;
}
html body #hero .pr-actions { justify-content: flex-start; margin-top: 32px; }
html body #hero .btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(191, 227, 255, .45); }
html body #hero .btn-ghost:hover { background: rgba(191, 227, 255, .1); }
html body #hero .pr-trial { margin-top: 14px; color: rgba(236, 244, 252, .78); font-size: 13px; }

/* the example result, as a white card sitting on the blue */
html body #hero .pr-proof-label { text-align: left; color: rgba(236, 244, 252, .86); font-size: 12px; }
html body #hero .kd-seal-result {
  border: 0; border-radius: 20px; background: #fff; padding: 22px 24px;
  box-shadow: 0 2px 4px rgba(6, 22, 42, .08), 0 24px 60px -18px rgba(6, 22, 42, .38);
}
html body #hero .kd-seal-result b { color: #102d49; }
html body #hero .kd-seal-result small { color: #56697f; }
html body #hero .kd-seal-result .pr-text-link { color: #006bcb; }

/* the facts line, as on the landing: plain text, the slanted stroke between */
html body .pr-facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 64px 0 0; padding: 22px 0 0;
  border-top: 1px solid rgba(191, 227, 255, .28); color: rgba(236, 244, 252, .86); font-size: 13.5px; line-height: 1.5;
}
html body .pr-facts a { color: #fff; text-decoration: underline; text-decoration-color: rgba(191, 227, 255, .45); text-underline-offset: 4px; }
html body .pr-facts a:hover { text-decoration-color: #fff; }
html body .pr-facts i { flex: none; width: 2px; height: 11px; border-radius: 2px; background: #ff762b; transform: skewX(-14deg); opacity: .8; }

/* ---------------------------------------------------------------- 2 · sections sit on the ground */
html body .pr-section, html body .pr-plan { background: transparent; }
html body .pr-wrap .eyebrow { font: 600 12.5px/1.5 var(--font-sans); letter-spacing: .15em; text-transform: uppercase; }
html body .pr-wrap h2.kd-h2 { font-weight: 650; letter-spacing: -.03em; }
html body .pr-wrap h2.kd-h2::before { background: #ff762b; transform: skewX(-14deg) rotate(-8deg); }
/* centred two-line headings: v5 pins the chapter slash at the box's left edge, so it floated far from the first
   word. Set it inline, in front of the first word (as on families). */
html body .pr-title h2.kd-h2 { padding-left: 0; text-wrap: balance; }
html body .pr-title h2.kd-h2::before {
  position: relative; top: auto; left: auto; display: inline-block; height: .7em; margin-right: .3em; vertical-align: -.04em;
}

/* ---------------------------------------------------------------- 3 · pick your practice: one switch */
/* No script: the panels are anchors (#legal, #accounting, #insurance, #body-corporates, #commercial — the menu
   links), and :target shows the one the address names; with no practice in the address, Legal shows.
   Browsers without :has() show every panel, stacked, and hide the switch. */
html body .pr-switch-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 22px; }
html body .pr-switch-nav a {
  display: inline-flex; align-items: center; min-height: 46px; padding: 12px 18px; border-radius: 999px; background: #fff; color: #3f5470;
  font: 600 14px/1.2 var(--font-sans); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .1);
  transition: background-color 160ms var(--v6-ease), color 160ms var(--v6-ease);
}
html body .pr-switch-nav a:hover { color: #006bcb; }
html body .pr-switch-nav a:focus-visible { outline: 3px solid #4fb3ff; outline-offset: 3px; }
html body .pr-panel {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center;
  padding: 44px; border-radius: 26px; background: #fff; margin-bottom: 20px;
  scroll-margin-top: 84px;   /* under the fixed nav's 104px, so the switch stays in view above the panel */
  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);
}
@supports selector(:has(*)) {
  html body .pr-switch .pr-panel { display: none; margin-bottom: 0; }
  html body .pr-switch .pr-panel:target,
  html body .pr-switch:not(:has(.pr-panel:target)) .pr-panel:first-of-type { display: grid; }
  html body .pr-switch:not(:has(.pr-panel:target)) .pr-switch-nav a[href="#legal"],
  html body .pr-switch:has(#legal:target) .pr-switch-nav a[href="#legal"],
  html body .pr-switch:has(#accounting:target) .pr-switch-nav a[href="#accounting"],
  html body .pr-switch:has(#insurance:target) .pr-switch-nav a[href="#insurance"],
  html body .pr-switch:has(#body-corporates:target) .pr-switch-nav a[href="#body-corporates"],
  html body .pr-switch:has(#commercial:target) .pr-switch-nav a[href="#commercial"] { background: #006bcb; color: #fff; box-shadow: none; }
}
@supports not selector(:has(*)) {
  html body .pr-switch-nav { display: none; }
}
html body .pr-panel-copy { min-width: 0; }
html body .pr-panel-copy .eyebrow { margin-bottom: 14px; color: #006bcb; }
/* each panel's eyebrow is its H2 (the practice's topic line); it keeps the eyebrow's look, the voice line stays the h3 */
html body .pr-panel-copy h2.eyebrow { margin: 0 0 14px; max-width: 46ch; color: #006bcb; font: 600 12.5px/1.5 var(--font-sans); letter-spacing: .15em; text-transform: uppercase; text-wrap: balance; }
html body .pr-panel-copy > p:not(.eyebrow) a { color: #006bcb; text-decoration: underline; text-decoration-color: rgba(0, 107, 203, .35); text-underline-offset: 4px; }
html body .pr-panel-copy > p:not(.eyebrow) a:hover { text-decoration-color: #006bcb; }
/* two text links under one panel sit on one line, wrapping on a phone */
html body .pr-panel-copy > p.pr-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 14px; }
html body .pr-panel-copy > p.pr-links .pr-text-link { margin-top: 0; text-decoration: none; }
html body .pr-panel-copy h3 { margin: 0; color: #102d49; font: 650 clamp(26px, 2.4vw, 34px)/1.14 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
html body .pr-panel-copy > p:not(.eyebrow) { margin-top: 18px; color: #56697f; font-size: 16px; line-height: 1.7; }
html body .pr-panel-copy .pr-text-link { margin-top: 14px; color: #006bcb; }
html body .pr-panel .pr-inline-scenario { margin-top: 22px; padding: 18px 0 0; border-top: 1px solid rgba(16, 45, 73, .1); }
html body .pr-panel .pr-inline-scenario .caption { color: #006bcb; }
html body .pr-panel .pr-inline-scenario p { margin-top: 6px; font-size: 14.5px; line-height: 1.65; color: #3f5470; }

/* the illustrated work: a quiet pale-blue card; polish.js moves each mock's label out to sit under it as a caption */
html body .pr-panel-media { min-width: 0; }
html body .pr-panel-media > .mock {
  min-width: 0; border: 0; border-radius: 20px; background: #f3f7fb; padding: 24px;
  box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .06);
}
html body .pr-panel-media > .kd-mock-label { margin-top: 14px; }
html body .pr-panel .pr-mock-top { border-bottom-color: rgba(16, 45, 73, .1); color: #102d49; }
html body .pr-panel .pr-count { color: #56697f; font-size: 12px; }
html body .pr-panel .pr-records { margin-top: 8px; }
html body .pr-panel .pr-records > div { border-bottom-color: rgba(16, 45, 73, .08); font-size: 13.5px; }
html body .pr-panel .pr-records > div:last-child { border-bottom: 0; }
html body .pr-panel .pr-records > div > span:first-child { color: #102d49; }
html body .pr-panel .pr-records b { color: #56697f; font-size: 12px; }
html body .pr-panel .kd-who-signs { margin: 18px 0 10px; }
html body .pr-panel .kd-signer { background: #fff; border-radius: 12px; }
html body .pr-panel .pr-trustees .kd-signer { border-left: 2px solid rgba(16, 45, 73, .1); border-radius: 0 12px 12px 0; }
html body .pr-panel .pr-trustees .pr-order-on { background: #e3effa; border-left-color: #006bcb; }
html body .pr-panel .pr-reminder { margin: 12px 0 8px; border-radius: 14px; background: #fff; }
html body .pr-template-paper { border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .06); }
html body .pr-template-paper .pr-template-title { margin-top: 8px; color: #102d49; font: 650 23px/1.2 var(--font-display); letter-spacing: -.02em; }
html body .pr-panel .pr-bulk-steps .kd-step b { color: #102d49; }
html body .pr-panel .pr-bulk-steps .kd-step small { color: #56697f; }

/* the other pages, as one line under the switch */
html body .pr-elsewhere {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 22px; margin: 28px auto 0; max-width: 980px;
  color: #56697f; font-size: 14.5px; line-height: 1.5; text-align: center;
}
html body .pr-elsewhere span { flex-basis: 100%; }
html body .pr-elsewhere a { display: inline-flex; align-items: center; min-height: 44px; color: #006bcb; font-weight: 650; text-decoration: none; }
html body .pr-elsewhere a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ---------------------------------------------------------------- 4b · the seal is the one orange */
/* signing order is not the seal: the emphasised third stroke is the deep blue, not v5's orange */
html body .kd-chip-sealed { background: #fff1e7; color: #b8480f; }
html body .kd-chip-sealed::before { background: #ff762b; }

/* ---------------------------------------------------------------- 4 · Ask: a flat blue panel, not a full-bleed band */
html body #inside {
  width: min(1240px, calc(100% - 48px)); margin: 24px auto; border-radius: 28px;
  background: #2a64a0; background-image: none;
  --c-text-main: #fff; --c-text-secondary: rgba(236, 244, 252, .86); --c-accent: #d6eeff; --c-border: rgba(191, 227, 255, .26);
  --surface-ink: #fff; --surface-muted: rgba(236, 244, 252, .86); --surface-line: rgba(191, 227, 255, .26);
}
html body #inside :is(h2, h3) { color: #fff; }
html body #inside .eyebrow { color: #d6eeff; }
html body #inside :is(p, small, li) { color: rgba(236, 244, 252, .86); }
html body #inside .pr-text-link { color: #fff; }
html body #inside .pr-inside-head { align-items: end; }
html body #inside .pr-inside-head > div > p { font-size: 17px; line-height: 1.65; }
html body #inside .mock-frame { border: 0; border-radius: 18px; box-shadow: 0 2px 4px rgba(6, 22, 42, .08), 0 24px 60px -18px rgba(6, 22, 42, .38); }
html body #inside .capture-caption { color: rgba(236, 244, 252, .86); border-left-color: #a9dcff; }
html body #inside .capture-caption .chip-proof { padding: 0; border: 0; background: transparent; color: #fff; }
/* the capture's title bar: outside a .mock the --mock-* variables are undefined, so v5 drew no bar,
   no divider and 17px body text. Give it the light window bar the other captures have. */
html body #inside .capture-frame-titlebar {
  display: flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px;
  background: #f5f8fb; border-bottom: 1px solid #e3eaf2;
}
html body #inside .capture-frame-titlebar span { font: 500 12px/16px var(--font-sans); letter-spacing: 0; color: #56697f; }

/* ---------------------------------------------------------------- 5 · the plan: R199 is the one large figure */
html body .pr-price { font-weight: 650; letter-spacing: -.035em; color: #102d49; }
html body .pr-annual { color: #56697f; }
html body .pr-plan-actions { justify-content: flex-start; gap: 12px; margin-top: 28px; }
html body .pr-plan-card {
  padding: 32px 34px; border-radius: 22px; 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);
}
html body .pr-allow { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; color: #2b4460; font-size: 15px; line-height: 1.45; }
html body .pr-allow li { position: relative; padding-left: 20px; }
html body .pr-allow li::before {
  content: ""; position: absolute; left: 4px; top: 4px; width: 3px; height: 13px; border-radius: 2px;
  background: #4fb3ff; transform: skewX(-14deg) rotate(-8deg);
}
html body .pr-plan-card .pr-plan-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(16, 45, 73, .08); color: #56697f; font-size: 13px; }

/* ---------------------------------------------------------------- 6 · FAQ */
html body .pr-faq .accordion { max-width: 860px; margin: 0 auto; }

/* ---------------------------------------------------------------- 7 · the closing: one full-bleed blue into the footer */
html body #closing.pr-closing { background: #2a64a0 !important; }
html body #closing.pr-closing > .pr-wrap { max-width: 1080px; padding: 0; }
html body #closing .cta-gradient {
  display: block; padding: 0 !important; background: transparent; box-shadow: none;
}
html body #closing .cta-gradient::after { display: none; }
html body #closing .eyebrow { display: flex; align-items: center; color: #d6eeff; font: 600 12.5px/1 var(--font-sans); letter-spacing: .15em; }
html body #closing .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 #closing h2.kd-h2 { padding-left: 0; font-weight: 650; }
html body #closing h2.kd-h2::before { display: none; }
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);
}

/* ---------------------------------------------------------------- 8 · tablet and phone */
@media (max-width: 980px) {
  html body #hero .pr-proof { margin-top: 40px; max-width: 620px; }
  html body .pr-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px; }
}
@media (max-width: 760px) {
  html body #inside { width: calc(100% - 24px); border-radius: 22px; margin: 12px auto; }
  html body .pr-plan-card { padding: 26px 24px; }
}
@media (max-width: 640px) {
  html body #hero.pr-hero { padding: 128px 0 56px !important; }
  html body #hero.pr-hero::before { background-position: right -40vw center; }
  html body #hero + #practices { padding-top: 190px; }
  html body #hero h1 { font-size: clamp(40px, 11vw, 52px); }
  html body #hero .pr-lead { font-size: 18px; }
  html body #hero .pr-intro { font-size: 15.5px; }
  /* the audience eyebrow runs to two lines: the stroke sits by the first line, the lines get air */
  html body #hero .eyebrow { align-items: flex-start; line-height: 1.5; }
  html body #hero .eyebrow::before { margin-top: 3px; }
  html body #hero .pr-actions { align-items: stretch; gap: 10px; }
  html body #hero .pr-trial { text-align: left; }
  html body .pr-facts { margin-top: 40px; display: grid; gap: 10px; }
  html body .pr-facts i { display: none; }
  /* the practice switch scrolls sideways on a phone rather than wrapping into a block of pills */
  html body .pr-switch-nav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -20px 18px; padding: 2px 20px 6px; scrollbar-width: none; }
  html body .pr-switch-nav::-webkit-scrollbar { display: none; }
  html body .pr-switch-nav a { flex: none; }
  html body .pr-panel { padding: 24px 20px; border-radius: 22px; }
  html body .pr-panel-media > .mock { padding: 18px; }
  html body .pr-elsewhere { justify-content: flex-start; text-align: left; gap: 0 18px; }
  html body .pr-plan-actions { flex-direction: column; align-items: stretch; }
  html body #closing.pr-closing { padding: 88px 20px 72px !important; }
  html body #closing .btn-row { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  html body .pr-switch-nav a, html body #closing .btn { transition: none; }
}

/* ---------------------------------------------------------------- review (27 Sep 2026): Ask, drawn in HTML
   The Ask capture (an old app build with a sparkle icon) is replaced by the kda panel: the question and the
   cited answer beside the letter, open at the highlighted clause. The section is blue, so the panel's text
   colours are set again here (the section's light-text rule is an id rule). */
html body #inside .pr-app { margin: 0; }
html body #inside .pr-app .mock-frame { overflow: hidden; background: #fff; }
html body #inside .kda { color: #102d49; }
html body #inside .kda :is(p, small, li) { color: #3f5470; }
html body #inside .kda small.kda-k { color: #56697f; }
html body #inside .kda .kda-a p { color: #26405c; }
html body #inside .kda .kda-paper p.is-hl { color: #102d49; }
html body #inside .kda .kda-note, html body #inside .kda .kda-note span { color: #004e99; }
html body #inside .kda .kda-note em { color: #56697f; }
.pr-ask-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.pr-ask-answer { display: grid; align-content: start; gap: 12px; padding: 20px 22px 24px; border-right: 1px solid #e6ecf2; }
.pr-ask-answer .kda-a { margin: 0; }
.kda .pr-ask-answer p.pr-ask-cite { display: inline-flex; margin: 4px 0 0; padding: 4px 10px; border-radius: 999px; background: #eef5fc; color: #004e99; font-size: 12px; font-weight: 600; }
html body #inside .kda .pr-ask-answer p.pr-ask-cite { color: #004e99; }
.pr-ask-source { min-width: 0; }
.pr-ask-source .kda-canvas { height: 100%; }
@media (max-width: 860px) {
  .pr-ask-body { grid-template-columns: minmax(0, 1fr); }
  .pr-ask-answer { border-right: 0; border-bottom: 1px solid #e6ecf2; padding: 14px 14px 16px; }
}

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

/* review (27 Sep 2026): the first-child padding in theme.css pushed the opening 120px lower than every other page's */
html body #hero .pr-hero-inner { padding-top: 0 !important; }   /* theme.css pads main > :first-child > :first-child */
/* review (27 Sep 2026): the opening's card is the record itself — the sealed file, who signed it in order,
   and the check a recipient runs — not a lone result chip */
html body #hero .pr-record { overflow: hidden; border-radius: 20px; background: #fff; color: #102d49;
  box-shadow: 0 2px 4px rgba(6, 22, 42, .08), 0 24px 60px -18px rgba(6, 22, 42, .38); }
html body #hero .pr-record :is(b, small) { display: block; }
html body #hero .pr-record b { color: #102d49; }
html body #hero .pr-record small { margin-top: 2px; color: #56697f; font-size: 12px; line-height: 1.45; }
.pr-record-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #e6ecf2; }
.pr-record-head > div { min-width: 0; }
html body #hero .pr-record-head b { font: 650 15.5px/1.3 var(--font-display); letter-spacing: -.01em; }
.pr-record-doc { display: grid; flex: none; place-items: center; width: 30px; height: 36px; border-radius: 5px; background: #f3f7fb;
  box-shadow: inset 0 0 0 1px #dde5ee; color: #56697f; font: 700 8.5px/1 var(--font-sans); font-style: normal; letter-spacing: .05em; }
.pr-record-seal { display: inline-flex; flex: none; align-items: center; gap: 7px; height: 26px; margin-left: auto; padding: 0 11px 0 9px;
  border-radius: 999px; background: #fff1e7; color: #b8480f; font: 600 12px/1 var(--font-sans); box-shadow: inset 0 0 0 1px rgba(255, 118, 43, .42); }
.pr-record-seal::before { content: ""; width: 3px; height: 11px; border-radius: 2px; background: #ff762b; transform: skewX(-14deg); }
.pr-record-signers { display: grid; gap: 12px; margin: 0; padding: 16px 22px 18px; list-style: none; }
.pr-record-signers li { display: flex; align-items: center; gap: 12px; }
.pr-record-signers i { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #eef5fc;
  color: #006bcb; font: 650 12px/1 var(--font-sans); font-style: normal; }
html body #hero .pr-record .kd-seal-result { border-radius: 0; box-shadow: none; background: #f5f9fd; border-top: 1px solid #e6ecf2; padding: 16px 22px; }
html body #hero .pr-record .kd-seal-result .ic { width: 38px; height: 38px; border-radius: 10px; }
@media (max-width: 640px) {
  .pr-record-head, html body #hero .pr-record .kd-seal-result { padding-inline: 16px; }
  .pr-record-signers { padding: 14px 16px 16px; }
}
html body #hero .pr-record-signers b { font: 600 14px/1.35 var(--font-sans); letter-spacing: 0; }