/* ==========================================================================
   KuduDoc v6 — Tenders & finance (tenders-and-finance.html), page overrides on top of theme.css.
   v5 CSS sits in the lower layer (v5), so plain rules here win; !important only
   where theme.css itself uses it.
   24 Sep 2026 rewrite: no stat tiles, no bento, no limits band, no recipient table;
   one quiet facts line under the proof card; the flat blue panel carries the scenario.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. the opening: landing blue, mark poster, the proof card on the edge
   The v5 hero is centred (like everything.html's opening). Its proof card (what went to the portal)
   straddles the blue's lower edge: the blue and the KuduDoc-mark poster are painted by the
   card's ::before / ::after, ending ~40% into the card at any width. The section is itself the
   1160px wrap, so it must not clip; body's overflow-x: clip cuts the pseudos to the viewport. */
.tf-page #hero.tf-hero {
  position: relative; z-index: 0;
  padding-top: 168px !important; padding-bottom: 64px; background: transparent; color: #fff;
}
.tf-hero .tf-hero-proof { position: relative; }
.tf-hero .tf-hero-proof::before,
.tf-hero .tf-hero-proof::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc((100% - 100vw) / 2); width: 100vw; bottom: 60%;
}
.tf-hero .tf-hero-proof::before { height: 3000px; background: #2a64a0; }
.tf-hero .tf-hero-proof::after {
  height: 1400px;
  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 -170px / auto 1020px no-repeat;
}
/* the nav's tone (site.js) reads section backgrounds; the last line of copy above the card (the trial
   note, tagged tf-hero-tone so site.js measures it) reaches up to the page top and reports the blue —
   clipped to its own text, so nothing extra is painted */
.tf-hero .tf-hero-tone {
  padding-top: 1600px; margin-top: -1600px; pointer-events: none;
  background-color: #2a64a0; -webkit-background-clip: text; background-clip: text;
}
/* eyebrow: pale sky with the logo's small orange stroke */
.tf-hero > .eyebrow {
  display: inline-flex; align-items: center; margin: 0 0 24px; color: #d6eeff;
  font: 600 12.5px/1.3 var(--font-sans); letter-spacing: .15em; text-transform: uppercase;
}
.tf-hero > .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);
}
/* H1: Montserrat 650, white, the quiet second line in pale sky, the orange rule */
.tf-hero h1 {
  font: 650 clamp(46px, 6vw, 86px)/.98 var(--font-display); letter-spacing: -.038em; color: #fff;
}
.tf-hero h1 .text-slate { color: #a9dcff; }
.tf-hero h1 .kd-rule { margin: 20px auto 18px; background: var(--orange); }
.tf-hero .tf-lead {
  max-width: 34ch; margin: 26px auto 0; color: rgba(236, 244, 252, .86);
  font: 400 clamp(19px, 1.8vw, 24px)/1.4 var(--font-sans); letter-spacing: -.012em;
}
/* the lead's second line: the documents themselves, smaller, so the big lead stays one thought */
.tf-hero .tf-lead-more {
  max-width: 58ch; margin: 16px auto 0; color: rgba(236, 244, 252, .86);
  font: 400 17px/1.6 var(--font-sans); letter-spacing: -.005em;
}
.tf-hero .tf-lead-more a { color: #fff; text-decoration: underline; text-decoration-color: rgba(191, 227, 255, .55); text-underline-offset: 4px; }
.tf-hero .tf-lead-more a:hover { text-decoration-color: #fff; }
.tf-hero .tf-actions { margin: 30px 0 14px; }
.tf-hero .btn-secondary { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(191, 227, 255, .45); }
.tf-hero .btn-secondary:hover { background: rgba(191, 227, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(191, 227, 255, .7); }
.tf-hero .tf-trial { color: rgba(236, 244, 252, .92); }
/* the proof card: white, on the edge, with the landing's capture shadow */
.tf-hero .tf-hero-proof {
  margin-top: 44px; background: #fff; border: 0; border-radius: 24px;
  box-shadow: 0 2px 4px rgba(6, 22, 42, .08), 0 24px 60px -18px rgba(6, 22, 42, .38);
}
.tf-hero .tf-hero-proof .tf-pack { border: 0; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08); border-radius: 16px; }
.tf-hero .tf-proof-intro .kd-h2 { color: #102d49; }
/* under the card: the check in one quiet line, not a row of big numerals */
.tf-hero .tf-facts-line { max-width: 640px; margin: 24px auto 0; color: #3f5470; font: 500 15px/1.6 var(--font-sans); letter-spacing: -.005em; }

/* ---------------------------------------------------------------- 2. one ground: no section paints a band */
.tf-page .tf-section { background: transparent; }
.tf-page :is(.tf-title h2 > span, .tf-scenario h2 .text-slate) { color: #5d7087; }

/* ---------------------------------------------------------------- 3. cards: white, hairline, soft layered shadow */
.tf-page :is(.tf-mock, .tf-check-example) {
  background: #fff; border: 0; border-radius: 20px;
  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);
}
.tf-page #certificates .tf-mock { background: #f5f9fd; }
.tf-page #certificates .tf-row { border: 0; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08); border-radius: 14px; }

/* ---------------------------------------------------------------- 4. the tour: one orange belongs to the seal, so the gap is marked in blue */
.tf-page .tf-row-gap { background: #eef5fc; border-left: 3px solid #006bcb; }
.tf-page .tf-chip-attention { background: #fff; color: #004e99; box-shadow: inset 0 0 0 1px rgba(0, 107, 203, .25); }
.tf-page .tf-tour-aside a.is-active { background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07); color: #102d49; }
.tf-page .tf-mock .kd-mock-label { background: #eef5fc; }
.tf-page .tf-tour-block > h2 { margin-top: 0; }
/* links inside the leads, and a lead's second paragraph */
.tf-page :is(.tf-block-lead, .tf-block-more, .tf-list) a { color: #006bcb; text-underline-offset: 3px; }
.tf-page .tf-block-more { margin: -8px 0 24px; font-size: 15px; line-height: 1.65; color: #3f5470; }
/* the returnable documents and the lender's list: plain lines with the logo's slanted stroke, no icons */
.tf-page .tf-list-card { padding: 22px 28px 20px; background: #fff; border-radius: 20px;
  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); }
.tf-page .tf-list { gap: 0 32px; }
.tf-page .tf-list > li { margin: 0; padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid rgba(16, 45, 73, .07); font-size: 15px; line-height: 1.5; color: #102d49; }
.tf-page .tf-list > li::before { top: 15px; }
.tf-page .tf-list-note { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: #3f5470; }
.tf-page .tf-list-title { margin: 0 0 4px; font: 600 12px/1.4 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: #006bcb; }
.tf-page .tf-list-plain { margin-bottom: 0; }
.tf-page .tf-list-plain > li { font-size: 14.5px; color: #3f5470; }
.tf-page .tf-list-note-plain { margin: 12px 0 24px; }

/* the signing editor, drawn in HTML: a bid's returnable schedule with the fields placed, before signing */
.tf-editor { background: #fff; color: #102d49; font-family: var(--font-sans); text-align: left; }
.tf-ed-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; padding: 12px 18px; border-bottom: 1px solid rgba(16, 45, 73, .08); font-size: 13px; }
.tf-ed-bar b { font-weight: 650; }
.tf-ed-bar span { color: #56697f; font-size: 12px; }
.tf-ed-body { display: grid; grid-template-columns: 120px minmax(0, 1fr) 208px; }
.tf-ed-label { font: 600 10.5px/1.2 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: #56697f; }
.tf-ed-fields { display: flex; flex-direction: column; gap: 7px; padding: 16px 12px; border-right: 1px solid rgba(16, 45, 73, .08); }
.tf-ed-fields .tf-ed-label { margin-bottom: 3px; }
.tf-ed-field { padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .14); color: #3f5470; font-size: 12px; font-weight: 600; text-align: center; }
.tf-ed-field.is-on { background: #eef5fc; box-shadow: inset 0 0 0 1px rgba(0, 107, 203, .45); color: #004e99; }
.tf-ed-page { display: flex; justify-content: center; padding: 22px 24px; background: #f3f6fa; }
.tf-ed-sheet { width: 100%; max-width: 440px; padding: 24px 26px 28px; background: #fff; color: #3f5470; font-size: 12px; line-height: 1.55;
  box-shadow: 0 1px 2px rgba(16, 45, 73, .08), 0 6px 18px -10px rgba(16, 45, 73, .25); }
.tf-ed-sheet > small { display: block; font: 600 9.5px/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: #56697f; }
.tf-ed-sheet > b { display: block; margin: 8px 0 12px; padding-bottom: 10px; border-bottom: 2px solid #2a64a0; color: #102d49; font: 650 18px/1.2 var(--font-display); letter-spacing: -.02em; }
.tf-ed-sheet > p + p { margin-top: 8px; }
.tf-ed-slots { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px 12px; margin-top: 18px; }
.tf-ed-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; border: 1.5px dashed #006bcb; border-radius: 4px; background: #eef5fc; color: #004e99; font-size: 12px; font-weight: 650; }
.tf-ed-slot small { color: #3f5470; font-size: 10.5px; font-weight: 500; }
.tf-ed-side { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-left: 1px solid rgba(16, 45, 73, .08); }
.tf-ed-signers { display: grid; gap: 9px; margin: 0 0 6px; padding: 0; list-style: none; }
.tf-ed-signers li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; align-items: center; font-size: 12.5px; line-height: 1.3; }
.tf-ed-signers li > span { display: grid; place-items: center; grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; background: #eef5fc; color: #004e99; font-size: 11px; font-weight: 700; }
.tf-ed-signers b { color: #102d49; font-weight: 600; }
.tf-ed-signers small { color: #56697f; font-size: 11.5px; }
.tf-ed-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #102d49; font-size: 12.5px; }
.tf-ed-toggle i { position: relative; flex: none; width: 30px; height: 18px; border-radius: 999px; background: #006bcb; }
.tf-ed-toggle i::after { content: ""; position: absolute; top: 3px; right: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.tf-ed-when { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .12); color: #56697f; font-size: 12px; }
.tf-ed-when small { font-size: 12px; }
.tf-ed-when b { color: #102d49; font-weight: 600; }
.tf-ed-send { margin-top: auto; padding: 9px 12px; border-radius: 999px; background: #006bcb; color: #fff; font-size: 12.5px; font-weight: 650; text-align: center; }

/* the one ink line in the finance chapter: plain guidance, the block's own voice */
.tf-page .tf-ink-note { margin-top: 20px; font-size: 15px; line-height: 1.6; color: #3f5470; }
/* the capture's window chrome: a pale bar with a hairline, like the Library mocks' headers (v5 gives it no bar here) */
.tf-page .capture-frame-titlebar {
  font: 500 12px/1 var(--font-sans); color: #56697f; height: 36px; padding: 0 14px;
  background: #f7f9fc; border-bottom: 1px solid rgba(16, 45, 73, .07);
}

/* ---------------------------------------------------------------- 5. the scenario — a flat blue panel, not a full-bleed band */
.tf-page #scenario.tf-scenario-band {
  width: calc(100% - 80px); max-width: 1240px; margin: 0 auto; border-radius: 28px;
  padding-block: 88px; background: #2a64a0; overflow: hidden; color: #fff;
}
/* the v5 scenario box steps aside: the panel is the frame */
#scenario .tf-scenario { background: transparent; border: 0; box-shadow: none; padding: 0; }
#scenario .tf-scenario .eyebrow { color: #d6eeff; }
#scenario .tf-scenario h2 { color: #fff; }
#scenario .tf-scenario h2 .text-slate { color: #a9dcff; }
#scenario .tf-scenario p:not(.eyebrow):not(.pack-note) { color: rgba(236, 244, 252, .86); }
/* the checklist on the blue: a white card with the landing's capture shadow */
#scenario .tf-pack { background: #fff; border: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 2px 4px rgba(6, 22, 42, .08), 0 24px 60px -18px rgba(6, 22, 42, .38); }

/* ---------------------------------------------------------------- 6. what the recipient can check */
.tf-page .tf-check-note { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.6; color: #3f5470; }

/* ---------------------------------------------------------------- 7. FAQ: the question text sits inside its card */
.tf-page .tf-faq .accordion-item { padding-inline: 22px; }

/* ---------------------------------------------------------------- 8. closing: one blue band into the footer
   The section is itself the wrap round .cta-gradient; it kept theme.css's closing padding and
   left a pale frame round a boxed CTA. It now steps aside so the band runs full-bleed. */
.tf-page #closing { padding: 0 !important; max-width: none; }
/* v5 leaves .cta-gradient a two-column grid, which centred a shrink-wrapped copy box; as a block the
   copy lines up with the footer column, as the landing's closing does */
.tf-page #closing .cta-gradient { display: block; }
/* theme.css zeroes the band's padding inside #closing and this section is zeroed above, so the band carries
   the landing's closing padding itself (the copy otherwise sits on the top edge and the buttons on the footer) */
.tf-page #closing .cta-gradient { padding: 112px 40px 96px !important; }
/* the closing's primary action is the one orange pill, as on the landing */
.tf-page #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);
}
.tf-page #closing .btn-onblue:hover { color: #fff; background: linear-gradient(180deg, #ff9a55 0%, #ff7036 55%, #ff5a2c 100%); }

/* ---------------------------------------------------------------- phone */
@media (max-width: 900px) {
  .tf-ed-body { grid-template-columns: minmax(0, 1fr) 196px; }
  .tf-ed-fields { display: none; }
  .tf-page #scenario.tf-scenario-band { width: calc(100% - 32px); border-radius: 24px; padding-block: 64px; }
}
@media (max-width: 640px) {
  /* the closing copy on the page gutter, level with the footer brand (the footer steps to 20px at 640) */
  .tf-page #closing .cta-gradient { padding: 80px 20px 64px !important; }
}
@media (max-width: 600px) {
  .tf-page #hero.tf-hero { padding-top: 124px !important; padding-bottom: 44px; }
  .tf-hero > .eyebrow { font-size: 11.5px; letter-spacing: .13em; margin-bottom: 18px; }
  .tf-hero h1 .kd-rule { margin: 14px 0 12px; }
  .tf-hero .tf-lead { margin-left: 0; font-size: 18px; }
  .tf-hero .tf-lead-more { margin-left: 0; font-size: 15.5px; }
  .tf-page .tf-list-card { padding: 12px 18px 16px; }
  .tf-page .tf-list > li { font-size: 14.5px; }
  .tf-ed-body { grid-template-columns: minmax(0, 1fr); }
  .tf-ed-side { border-left: 0; border-top: 1px solid rgba(16, 45, 73, .08); }
  .tf-ed-page { padding: 14px; }
  .tf-ed-sheet { padding: 18px 16px 20px; }
  .tf-hero .tf-hero-proof { margin-top: 32px; border-radius: 20px; }
  .tf-hero .tf-hero-proof::after { background-position: right -22vw bottom -150px; background-size: auto 980px; }
  .tf-page #scenario.tf-scenario-band { width: calc(100% - 24px); border-radius: 22px; padding-block: 52px; }
  .tf-hero .tf-facts-line { font-size: 14px; text-align: left; margin-top: 20px; }
  .tf-page .tf-faq .accordion-item { padding-inline: 16px; }
}