/* ==========================================================================
   KuduDoc v6 — Expiry (expiry.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/expiry.html (rewritten 24 Sep 2026: no stat cards, a closer Home crop,
   reminders shown as a default schedule the owner can change).
   ========================================================================== */

/* ---------------------------------------------------------------- 1. the opening
   The landing blue with the flat mark poster. The headline sits left and the sub, actions and
   facts line right (as the Library's opening does); the genuine Home capture runs below at a
   size where its row text reads at about its native 14px, and overhangs the blue's lower edge
   into the pale ground (as .hero-cu + .proof-cu do). The hero carries a real background colour,
   so site.js reads it as a dark zone for the nav — and that zone ends where the blue does. */
html body #hero.ex-hero {
  position: relative; padding: 168px 0 0 !important; margin-bottom: 170px; color: #fff;
  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 bottom -420px / auto 1180px no-repeat, #2a64a0;
}
.ex-hero .ex-hero-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: 56px; row-gap: 0; align-items: end; }
.ex-hero .ex-hero-intro { min-width: 0; padding-bottom: 6px; }
.ex-hero .ex-hero-media { grid-column: 1 / -1; position: relative; z-index: 1; width: 100%; max-width: 880px; margin: 56px 0 -170px; }
.ex-hero .ex-hero-copy > .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;
}
.ex-hero .ex-hero-copy > .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 .ex-hero h1 {
  margin: 0; max-width: 13ch; color: #fff;
  font: 650 clamp(46px, 6vw, 86px)/.98 var(--font-display); letter-spacing: -.038em;
}
.ex-hero h1 .kd-rule { width: 120px; margin: 18px 0 8px; background: var(--orange); }
.ex-hero h1 .text-blue { color: #a9dcff; }
.ex-hero .ex-sub {
  margin: 0; max-width: 34ch; color: rgba(236, 244, 252, .86);
  font: 400 clamp(20px, 2vw, 26px)/1.4 var(--font-sans); letter-spacing: -.012em;
}
.ex-hero .ex-hero-cta { margin: 28px 0 14px; gap: 12px; flex-wrap: wrap; }
.ex-hero .ex-hero-cta .btn-ghost {
  padding: 13px 22px; font-size: 15px; background: transparent; color: #fff; border: 0;
  box-shadow: inset 0 0 0 1.5px rgba(191, 227, 255, .45);
}
.ex-hero .ex-hero-cta .btn-ghost:hover { background: rgba(191, 227, 255, .1); }
.ex-hero .ex-cta-note { margin: 0; color: rgba(226, 238, 250, .82); }
/* the capture: no paper mat, the frame straight on the blue with the landing's capture shadow */
.ex-hero .ex-hero-media { padding: 0; border: 0; border-radius: 0; background: transparent; }
.ex-hero .ex-hero-media .mock-frame {
  border: 0; border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(6, 22, 42, .12), 0 2px 4px rgba(6, 22, 42, .1), 0 24px 60px -18px rgba(6, 22, 42, .45);
}
.ex-hero .ex-hero-media .mock-titlebar { background: #f5f8fb; }
/* the crop: Home's "Needs you" rows (x 428–1228, y 362–630 of the 1280×720 capture), shown
   at 880px so the record titles, dates and Renew buttons read at full size */
.ex-hero .ex-hero-crop { aspect-ratio: 800 / 268; }
.ex-hero .ex-hero-crop img { width: 160%; max-width: none; left: -53.5%; top: -135.07%; }
/* one rule per caption, a step away from the words: the caption draws it (v5 left the words flush
   against it), the proof chip inside no longer draws a second one */
html body .ex-hero .ex-hero-media .capture-caption {
  margin-top: 16px; padding: 0 0 0 12px; color: #56697f; border-left-color: #8a9bb0;
}
html body .ex-hero .ex-hero-media .capture-caption .chip-proof { color: #3f5470; border-left: 0; padding-left: 0; }
.ex-hero .ex-hero-media .capture-caption a, .ex-hero .ex-hero-media .btn-link { color: #006bcb; }

/* ---------------------------------------------------------------- 2. shared type, labels, chips */
/* headings never leave one word stranded on its own line on a narrow screen */
html body .ex-page :is(h1, h2, h3) { text-wrap: pretty; }
.ex-page .eyebrow { color: #006bcb; }
.ex-page :is(.surface-dawn, .surface-blue, .cta-gradient) .eyebrow { color: #d6eeff; }
.ex-page h2, .ex-title .kd-h2 { font-weight: 650; letter-spacing: -.03em; }
.ex-page :is(h3, h4) { font-weight: 650; letter-spacing: -.025em; }
.ex-sub { color: #3f5470; }
.ex-caption { color: #56697f; }
/* proof labels under the mocks: a firmer slate that stays legible on the pale ground */
html body .ex-page .ex-box > .kd-mock-label { color: #56697f; border-left-color: #8a9bb0; }
/* status chips: the landing's quiet blue — orange stays with the CTA and the seal */
.ex-page .kd-chip-expiring { background: #e6f1fb; color: #0a4f94; }

/* ---------------------------------------------------------------- 3. calendar vs record: two cards, one line each */
.ex-compare { gap: 24px; }
/* html body: the cards carry .surface-white, which theme.css clears to transparent along with the sections */
html body .ex-compare-card {
  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);
}
html body .ex-compare-with { 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); }
.ex-card-label { font: 600 12px/1.4 var(--font-sans); letter-spacing: .15em; text-transform: uppercase; color: #56697f; }
.ex-compare-with .ex-card-label { color: #006bcb; }
.ex-compare-card h3 { font-weight: 650; color: #102d49; }
.ex-compare-with h3 { color: #006bcb; }
.ex-calendar-example { border-radius: 16px; background: #f3f8fd; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .06); }
.ex-compare-card > p { margin: 18px 0 0; font-size: 16px; line-height: 1.55; color: #3f5470; }
.ex-compare + .ex-caption { margin-top: 14px; }
.ex-compare-card a { color: #006bcb; }

/* ---------------------------------------------------------------- 4. three steps: no table rules; the mocks are cards */
.ex-steps { border-bottom: 0; padding-bottom: 16px; }
.ex-steps .kd-step > i { width: 4px; background: #006bcb; }
.ex-steps .kd-step b { color: #102d49; }
.ex-steps .kd-step small { color: #56697f; }
.ex-box { border-bottom: 0; row-gap: 14px; }
/* polish.js moves each mock's proof label after the mock: keep it under its card, in the mock's column */
.ex-box > .ex-box-copy { grid-column: 1; grid-row: 1 / span 2; }
.ex-box > .ex-mock { grid-column: 2; grid-row: 1; }
.ex-box > .kd-caption { grid-column: 2; grid-row: 2; margin-top: 0; }
.ex-box-reverse > .ex-box-copy { grid-column: 2; }
.ex-box-reverse > .ex-mock, .ex-box-reverse > .kd-caption { grid-column: 1; }
.ex-box-copy .kd-h3 { font-weight: 650; color: #102d49; }
.ex-box-copy > p:not(.fence) { color: #3f5470; }
.ex-box-copy > a { color: #006bcb; font-weight: 600; }
html body .ex-mock {
  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);
}
.ex-suggest-page { border: 0; border-radius: 16px; background: #f7fafd; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07); }
.ex-suggest-page .ex-hl { border-left-color: #006bcb; background: #fff; border-radius: 0 10px 10px 0; }
.ex-hl mark { background: #dcebf8; color: #102d49; border-radius: 3px; padding: 0 2px; }
.ex-timeline-line { color: #cfe3f5; }
.ex-timeline i { background: #006bcb; }
.ex-timeline .ex-last-window i { background: #004e99; }
.ex-timeline b { font-weight: 650; color: #102d49; }
.ex-timeline-note { margin: 6px 0 14px; font-size: 12px; letter-spacing: .02em; color: #56697f; text-align: center; }
.ex-box-copy > p + p { margin-top: 12px; }
.ex-email { border: 0; border-radius: 16px; background: #f7fafd; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07); }
.ex-email-meta { border-bottom-color: rgba(16, 45, 73, .08); }
.ex-example-link { color: #006bcb; }
.ex-paper { border: 0; border-radius: 16px; background: #f7fafd; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07); }
.ex-paper.is-new { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(0, 107, 203, .4); }
.ex-paper p { border-top-color: rgba(16, 45, 73, .08); }

/* ---------------------------------------------------------------- 5. at work and at home: the flat blue panel
   Already a contained panel; the faded v5 mark becomes the flat poster, the translucent
   navy lists become a flat deeper blue, and every caption stays legible on the blue. */
html body .ex-wl.surface-dawn { border-radius: 28px; overflow: hidden; padding: 56px 0; }
.ex-wl .kd-mark--behind {
  width: 640px; right: -110px; bottom: -170px; opacity: 1;
  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");
}
.ex-wl .kd-h2 .text-sky { color: #a9dcff; }
.ex-wl-col + .ex-wl-col { border-left-color: rgba(191, 227, 255, .22); }
.ex-wl-col > p:not(.fence):not(.ex-caption) { color: rgba(236, 244, 252, .86); }
.ex-wl-list { border: 0; border-radius: 16px; background: #245a92; box-shadow: inset 0 0 0 1px rgba(191, 227, 255, .16); }
.ex-wl-list .kd-doc-row + .kd-doc-row { border-top-color: rgba(191, 227, 255, .16); }
.ex-wl-list .kd-doc-title small { color: rgba(226, 238, 250, .82); }
.ex-wl-list .kd-doc-side { color: #a9dcff; }
.ex-wl .ex-caption { color: rgba(226, 238, 250, .82); }
.ex-wl .fence { color: rgba(236, 244, 252, .9); }
.ex-wl-links a { color: #fff; }
/* links inside the copy: underlined in running text, on the pale boxes and on the blue band */
.ex-box-copy > p a { color: #006bcb; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ex-wl-col > p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ex-wl-col > p + p { margin-top: 12px; }

/* ---------------------------------------------------------------- 6. where the dates show up: three items */
.ex-igrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ex-icard { border-top-color: rgba(16, 45, 73, .1); }
.ex-icard-tile { background: #e6f1fb; border-radius: 12px; }
.ex-icard-text h3 { font-weight: 650; color: #102d49; }
.ex-icard-text p { color: #3f5470; }

/* ---------------------------------------------------------------- 7. owner email: a contained blue panel, not a full-bleed band */
html body #band.surface-blue {
  width: min(1080px, calc(100% - 80px)); margin: 24px auto 0; padding: 80px 0;
  border-radius: 28px; background: #2a64a0; background-image: none;
}
.ex-band p { color: rgba(236, 244, 252, .86); }
.ex-band p { font-size: 18px; line-height: 1.55; }
/* the v5 slanted blue→paper seam has no band to leave any more: it becomes plain space */
.ex-page > .kd-divider { height: 24px; background: none; }
.ex-page > .kd-divider::before, .ex-page > .kd-divider::after { content: none; }

/* ---------------------------------------------------------------- 8. FAQ: the accordion items are cards; give the text room */
.ex-faq .accordion { border-top: 0; }
.ex-faq .accordion-trigger { padding: 20px 24px; }
.ex-faq .accordion-body { padding: 0 24px 22px; color: #3f5470; }
.ex-faq .accordion-item:last-child { border-bottom: 0; }
.ex-faq .accordion-chevron { color: #006bcb; }
.ex-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 and a wrap sit around
   the band, so they step aside and the band runs edge to edge, its copy on the page's column. */
html body section#closing.ex-sec { max-width: none !important; padding: 0 !important; }
html body section#closing > .ex-wrap { max-width: none !important; margin: 0 !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 and wrap are at 0 too: the band pads itself (phones below) */
html body section#closing .cta-gradient { padding: 112px 40px 96px !important; }

/* ---------------------------------------------------------------- 10. tablets and phones */
@media (max-width: 900px) {
  .ex-hero .ex-hero-row { grid-template-columns: 1fr; row-gap: 26px; }
  .ex-hero .ex-hero-media { margin-top: 30px; }
  .ex-igrid { grid-template-columns: 1fr; }
  .ex-box > .ex-box-copy, .ex-box > .ex-mock, .ex-box > .kd-caption { grid-column: auto; grid-row: auto; }
  .ex-box-reverse > .ex-box-copy { order: 0; }
  .ex-box-reverse > .ex-mock { order: 1; } .ex-box-reverse > .kd-caption { order: 2; }
  html body #band.surface-blue { width: calc(100% - 40px); }
}
@media (max-width: 600px) {
  /* phones: the two renewal rows' titles and dates (x 504–780, y 516–630) */
  .ex-hero .ex-hero-crop { aspect-ratio: 276 / 114; }
  .ex-hero .ex-hero-crop img { width: 463.768%; left: -182.609%; top: -452.632%; }
  html body #hero.ex-hero { padding: 128px 0 0 !important; margin-bottom: 110px; background-position: right -40vw bottom -200px; background-size: auto 760px; }
  .ex-hero .ex-hero-media { margin-bottom: -110px; }
  .ex-hero .ex-hero-cta { flex-wrap: wrap; gap: 10px; }
  .ex-hero .ex-hero-cta .btn-primary { padding: 13px 20px; }
  .ex-hero .ex-hero-cta .btn-ghost { padding: 13px 18px; font-size: 14px; }
  .ex-compare-card { padding: 24px 20px; }
  html body .ex-wl.surface-dawn { padding: 0; border-radius: 22px; }
  .ex-wl-col + .ex-wl-col { border-top-color: rgba(191, 227, 255, .22); }
  .ex-wl .kd-mark--behind { width: 320px; right: -80px; bottom: -80px; }
  html body #band.surface-blue { padding: 52px 0; border-radius: 22px; }
  .ex-faq .accordion-trigger { padding: 18px 20px; }
  .ex-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; }