/* ==========================================================================
   KuduDoc v6 — Library (library.html), on top of theme.css.
   The v5 page CSS sits in layer v5, so plain rules here win. The page text lives in
   lab/v6/source/library.html (rewritten 24 Sep 2026: no story carousel, no toggle,
   no repeated fences; housekeeping is a plain list).
   ========================================================================== */

/* ---------------------------------------------------------------- 1. the opening
   The landing blue with the flat mark poster. The genuine Library capture follows inside
   the same section, so the blue runs on behind the top ~40% of its frame (as .hero-cu +
   .proof-cu do). Two full-bleed pieces make that one blue:
   · .lib-hero-top — the copy block, stretched edge to edge, from the top of the page down to
     the capture. It carries a real background colour, so site.js reads it as a dark zone and
     the nav turns white over it.
   · the capture's ::before — from the capture's top edge down 40% of its frame: 36px title bar
     + the 16:9 image (56.25% of the frame's width; padding percentages resolve against width,
     so the edge tracks the frame at every size).
   The poster is anchored to the edge the two share (bottom of one, top of the other), so its
   strokes run on without a seam. */
html body #hero.lib-hero {
  position: relative; isolation: isolate; overflow-x: clip;
  padding: 0 0 76px !important; background: transparent; color: #fff;
}
.lib-hero .lib-hero-top {
  --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");
  position: relative; display: block;
  margin: 0 calc(50% - 50vw); padding: 168px calc(50vw - 50%) 56px;
  background: var(--poster) right -6vw bottom -420px / auto 1180px no-repeat, #2a64a0;
}
.lib-hero .lib-capture { position: relative; margin-top: 0; }
.lib-hero .lib-capture::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(50% - 50vw); width: 100vw; top: 0; height: 0;
  padding-bottom: calc(15px + 22.5%);
  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 -760px / auto 1180px no-repeat, #2a64a0;
}
.lib-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;
}
.lib-hero .eyebrow::before {
  content: ""; flex: none; width: 3px; height: 13px; margin-right: 10px; border-radius: 2px;
  background: var(--orange); transform: skewX(-14deg) translateY(1px);
}
html body .lib-hero h1 {
  margin: 0; max-width: 15ch; color: #fff;
  font: 650 clamp(46px, 6vw, 86px)/.98 var(--font-display); letter-spacing: -.038em;
}
.lib-hero h1 .kd-rule { width: 120px; margin: 20px 0 18px; background: var(--orange); }
.lib-hero h1 > .text-slate { color: #a9dcff; }
.lib-hero .lib-hero-intro { padding: 0; margin-top: 26px; }
.lib-hero .lib-lead {
  max-width: 34ch; color: rgba(236, 244, 252, .86);
  font: 400 clamp(20px, 2vw, 26px)/1.4 var(--font-sans); letter-spacing: -.012em;
}
.lib-hero .btn-row { margin-top: 30px; gap: 12px; flex-wrap: wrap; }
.lib-hero .btn-ghost {
  padding: 13px 22px; background: transparent; color: #fff; border: 0;
  box-shadow: inset 0 0 0 1.5px rgba(191, 227, 255, .45);
}
.lib-hero .btn-ghost:hover { background: rgba(191, 227, 255, .1); text-decoration: none; }
.lib-hero .lib-micro { margin-top: 16px; color: rgba(226, 238, 250, .78); font-size: 13px; }

/* the Library, drawn as the product: v6 radius and the layered shadow the landing gives its captures */
.lib-capture .frame, .lib-capture .mock-frame {
  border: 0; border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(16, 45, 73, .08), 0 2px 4px rgba(6, 22, 42, .08), 0 24px 60px -18px rgba(6, 22, 42, .38);
}
.lib-capture .mock-titlebar { background: #f5f8fb; }
.lib-capture .capture-caption { margin-top: 20px; }
/* one rule per caption: the caption draws it, the proof chip inside does not draw a second one */
html body .lib-capture .capture-caption .chip-proof { border-left: 0; padding-left: 0; }
.lib-caption-line { display: block; font-size: 13px; line-height: 1.6; color: #56697f; }

/* ---------------------------------------------------------------- 2. shared type and labels */
/* headings never leave one word stranded on its own line on a narrow screen */
html body .lib-page :is(h1, h2, h3) { text-wrap: pretty; }
.lib-page h2 { font-weight: 650; letter-spacing: -.03em; color: #102d49; }
.lib-page h2 .text-blue { color: #006bcb; }
.lib-page h2 .text-slate { color: #5d7087; }
.lib-page h3 { font-weight: 650; letter-spacing: -.025em; color: #102d49; }
.lib-number { font: 600 12px/1.4 var(--font-sans); letter-spacing: .15em; text-transform: uppercase; color: #56697f; }
.lib-row-copy > p:not(.eyebrow), .lib-share > div > p:not(.eyebrow), .lib-way > p,
.lib-feature-grid p, .lib-faq-intro > p:not(.eyebrow) { color: #3f5470; }
.lib-link, .lib-inline-links a { color: #006bcb; }
/* status chips: the landing's quiet blue for "waiting" and "expires" — orange stays with the CTA and the seal */
.lib-page .kd-chip-expiring { background: #e6f1fb; color: #0a4f94; }
/* proof labels: the rule sits a step away from the words, in a firmer slate that stays legible on the pale ground */
html body .lib-page .kd-mock-label .chip-proof { padding-left: 10px; }
html body .lib-page :is(.kd-mock-label, .caption-proof) .chip-proof { color: #56697f; border-left-color: #8a9bb0; }

/* ---------------------------------------------------------------- 3. a drive vs your Library: two cards */
/* the one sentence that names the category, under the section's H2 */
.lib-heading .lib-define { margin: 18px 0 0; max-width: 60ch; color: #3f5470; font-size: 18px; line-height: 1.55; }
.compare-cards-kd { gap: 24px; }
.compare-cards-kd article {
  padding: 34px; border: 0; 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);
}
.compare-cards-kd article + article {
  border-top: 0; padding-top: 34px;
  box-shadow: inset 0 0 0 1.5px rgba(0, 107, 203, .32), 0 1px 2px rgba(16, 45, 73, .05), 0 16px 40px -24px rgba(16, 45, 73, .32);
}
.compare-cards-kd article + article .lib-number { color: #006bcb; }
.compare-cards-kd li + li { border-top-color: rgba(16, 45, 73, .08); }

/* ---------------------------------------------------------------- 4. the ledger: no table rules, cards on the ground */
.lib-ledger { padding-top: 24px; padding-bottom: 40px; }
.lib-ledger-row + .lib-ledger-row { border-top: 0; }
.lib-row-media, .lib-reverse .lib-row-copy { border-left: 0; }
/* polish.js moves each mock's proof label after the mock: stack it under the card */
.lib-row-media { flex-direction: column; align-items: stretch; justify-content: center; }
.lib-page .kd-mock {
  padding: 26px; border: 0; 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);
}
.lib-mock-head { border-bottom-color: rgba(16, 45, 73, .08); color: #102d49; }
.lib-page .date-ticket { border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08), 0 10px 24px -16px rgba(16, 45, 73, .3); }
.lib-page .expiry-rail { border: 0; border-radius: 16px; background: #f5f9fd; padding: 16px 12px; }
/* four reminder windows, four columns (v5's grid had an empty fifth), so "days before" never runs together on a phone */
.lib-page .expiry-track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.lib-page .expiry-track::before { left: 12.5%; right: 12.5%; background: #cfe3f5; }
.lib-page .expiry-stop small { color: #56697f; }
.lib-search { border: 0; border-radius: 999px; background: #f2f7fc; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08); padding: 12px 18px; }
.lib-filter-row .is-filtered { background: #dcebf8; color: #0a4f94; }

/* ---------------------------------------------------------------- 5. four ways in: white cards, no peach or ice tiles */
.lib-bento { gap: 24px; }
.lib-way, .lib-way-02, .lib-way-03 {
  padding: 32px; border: 0; 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);
}
.lib-page .mock-phone-screen { background: #dcebf8; }
.lib-paper { border-radius: 6px; }
.lib-paper span { background: #e6f1fb; color: #0a4f94; border-radius: 4px; }
.lib-inbound { border: 0; border-radius: 18px; background: #f7fafd; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08); }
.lib-link-preview { background: #fff; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08); }

/* ---------------------------------------------------------------- 6. share, housekeeping */
.lib-share-person { border-radius: 999px; background: #f2f7fc; }
/* polish.js moves the mock's proof label after the mock, which dropped it into the copy column
   under the grid; keep it directly under the share card */
.lib-share { row-gap: 14px; }
.lib-share > div:first-child { grid-row: 1 / span 2; }
.lib-share > .kd-mock-label { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
.lib-share > div > p { max-width: 46ch; }
/* housekeeping: one plain list, not a card grid — two columns of short rows */
.lib-keep-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.lib-keep-list li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; align-items: baseline;
  padding: 18px 0; border-top: 1px solid rgba(16, 45, 73, .1);
}
.lib-keep-list .icon { grid-row: 1 / span 2; align-self: start; width: 24px; height: 24px; margin-top: 2px; color: #006bcb; }
.lib-keep-list .icon[viewBox] { width: 26px; height: 28px; }
.lib-keep-list h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.lib-keep-list p { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: #3f5470; }

/* ---------------------------------------------------------------- 7. Library or Vault: two cards */
.lib-vault .lv-card {
  border: 0; 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);
}
.lib-vault .lib-vault-choice {
  border-top: 0;
  box-shadow: inset 0 0 0 1.5px rgba(16, 45, 73, .28), 0 1px 2px rgba(16, 45, 73, .05), 0 16px 40px -24px rgba(16, 45, 73, .32);
}
.lib-vault .lv-card > a { color: #006bcb; }
/* a second paragraph in a card or a row (the linked follow-on sentence) sits a step below the first */
.lib-way > p + p, .lib-share > div > p + p { margin-top: 10px; }
/* the household checklist line under the two cards */
.lib-vault .lv-more { margin: 28px 0 0; color: #3f5470; font-size: 16px; line-height: 1.55; }
.lib-vault .lv-more a, .lib-row-copy p a, .lib-way p a, .lib-share p a, .lib-keep-list p a { color: #006bcb; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------------------------------------------------------------- 8. FAQ: the accordion items are cards; give the text room */
.lib-faq .accordion { border-top: 0; }
.lib-faq .accordion-trigger { padding: 20px 24px; }
.lib-faq .accordion-body { padding: 0 24px 22px; color: #3f5470; }
.lib-faq .accordion-item:has([aria-expanded=true]) { box-shadow: inset 0 0 0 1.5px rgba(0, 107, 203, .3); }

/* ---------------------------------------------------------------- 9. the closing: one full-bleed blue into the footer
   theme.css styles both #closing and .cta-gradient; here the section wraps the band, so the
   wrapper steps aside and the band runs edge to edge, its copy on the page's column. */
html body section#closing.lib-closing { max-width: none !important; padding: 0 !important; }
html body section#closing > .cta-gradient { display: block; max-width: none !important; margin: 0 !important; }
html body section#closing > .cta-gradient > .cta-gradient-inner { max-width: 1080px !important; margin: 0 auto !important; }
/* theme.css zeroes the band's padding inside #closing and the section is at 0 too: the band pads itself (phones below) */
html body section#closing > .cta-gradient { padding: 112px 40px 96px !important; }

/* the in-sentence link on the closing blue */
html body section#closing .cta-copy p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------------------------------------------------------------- 10. phones */
@media (max-width: 700px) {
  .lib-share > div:first-child, .lib-share > .kd-mock-label { grid-column: auto; grid-row: auto; }
  .lib-share { row-gap: 28px; }
  .lib-share > .kd-mock-label { margin-top: -14px; }
  html body #hero.lib-hero { padding-bottom: 48px !important; }
  .lib-hero .lib-hero-top { padding-top: 128px; padding-bottom: 40px; background-position: right -34vw bottom -60px, 0 0; background-size: auto 640px, auto; }
  .lib-hero .lib-capture::before { background-position: right -34vw top -580px, 0 0; background-size: auto 640px, auto; }
  .lib-hero .lib-lead { font-size: 19px; }
  .lib-hero .btn-row { flex-wrap: wrap; gap: 10px; }
  .lib-hero .btn-ghost { padding: 13px 20px; font-size: 15px; }
  .compare-cards-kd article, .compare-cards-kd article + article { padding: 26px 22px; }
  .lib-ledger-row { padding: 36px 0; }
  .lib-page .kd-mock { padding: 20px; }
  .lib-way, .lib-way-02, .lib-way-03 { padding: 24px; }
  .lib-keep-list { grid-template-columns: 1fr; }
  .lib-faq .accordion-trigger { padding: 18px 20px; }
  .lib-faq .accordion-body { padding: 0 20px 20px; }
  html body section#closing > .cta-gradient { padding: 72px 20px 64px !important; }
}

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

/* 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; }