/* ==========================================================================
   KuduDoc v6 — Business (business.html), page overrides on top of theme.css.
   The opening (.hero-cu + .proof-cu) is already converted globally by 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 numbered cards; one quiet
   facts line under the capture; two drawings (recipient copy, seats and logo).
   ========================================================================== */

/* ---------------------------------------------------------------- 1. the opening */
/* the small note beside the trial button stays legible on the blue and wraps as a short column */
.biz-page .hero-cu .hero-note { color: rgba(236, 244, 252, .92); max-width: 34ch; text-align: left; }
/* the plain-words lead under the sub: one step quieter than the sub, so the H1 and sub keep the voice */
.biz-page .hero-cu .hero-lead {
  margin-top: 18px; max-width: 54ch; color: rgba(236, 244, 252, .86);
  font: 400 17px/1.6 var(--font-sans); letter-spacing: -.005em;
}
.biz-page .hero-cu .hero-lead a { color: #fff; text-decoration: underline; text-decoration-color: rgba(191, 227, 255, .5); text-underline-offset: 4px; }
.biz-page .hero-cu .hero-lead a:hover { text-decoration-color: #fff; }
/* under the capture: the plan in one quiet line, not a row of big numerals */
.biz-page .biz-glance {
  margin: 22px auto 0; max-width: 760px; text-align: center; color: #3f5470;
  font: 500 15px/1.6 var(--font-sans); letter-spacing: -.005em;
}
.biz-page .biz-glance > span { margin: 0 8px; color: #8aa0b8; }

/* ---------------------------------------------------------------- 2. one ground: no section paints a band */
.biz-page .biz-section { background: transparent; }
.biz-page .biz-heading h2 .text-slate { color: #5d7087; }

/* ---------------------------------------------------------------- 3. cards: white, hairline, soft layered shadow */
.biz-page :is(.biz-story, .biz-current-panel, .biz-copy-drawing, .biz-team-drawing, .biz-review-flow, .biz-comparison) {
  background: #fff; border: 0; border-radius: 22px;
  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);
}
.biz-page :is(.biz-current-panel, .biz-copy-drawing, .biz-team-drawing, .biz-review-flow) { border-radius: 20px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .biz-page .biz-story:hover { box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07), 0 2px 4px rgba(16, 45, 73, .06), 0 22px 48px -24px rgba(16, 45, 73, .38); }
}
/* the three situations: the concrete request leads, in ink */
.biz-page .biz-story > p { color: #102d49; font-size: 15px; line-height: 1.5; font-weight: 500; }
/* three columns: each lead holds three lines, so a longer lead does not push its card's heading below the others */
@media (min-width: 701px) { .biz-page .biz-story > p:first-child { min-height: 4.5em; } }
.biz-page .biz-pack-label { text-align: center; margin-top: 20px; }
.biz-page .kd-chip-expiring { background: #fff; color: #004e99; }
.biz-page .biz-date-rail b { font-weight: 650; }
/* captions: slate, legible on white and on the pale-blue tiles (v5's #6b7c8f is under 4.5:1 there) */
.biz-page .kd-caption { color: #56697f; }

/* ---------------------------------------------------------------- 4. the five chapters (tour) */
.biz-page .biz-feature > h2 { margin-top: 0; }
.biz-page .biz-feature .mock-frame { border: 0; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08), 0 16px 40px -24px rgba(16, 45, 73, .32); }
.biz-page .biz-tour-aside a.is-active { background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07); color: #102d49; }
.biz-page .biz-feature + .biz-feature { border-top-color: rgba(16, 45, 73, .1); }
/* the capture's window chrome: a pale bar with a hairline, as on the opening capture (v5 gives it no bar here) */
.biz-page .biz-feature .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);
}
.biz-page .biz-feature .capture-caption { padding-left: 12px; }
/* the tour's label is a v6 eyebrow, as on hr and tenders */
.biz-page .biz-tour-aside .caption {
  font: 600 12.5px/1.45 var(--font-sans); letter-spacing: .15em; text-transform: uppercase; color: #006bcb;
  text-wrap: balance;
}
/* at full size it fits on one line, as on hr (220px aside); narrower, it wraps with room to breathe */
@media (min-width: 1001px) { .biz-page .biz-tour-layout { grid-template-columns: minmax(0, 1fr) 220px; } }
.biz-page .biz-rail-note { margin-top: 14px !important; font-size: 12px !important; color: #56697f; }

/* chapter 01 — source record and recipient copy, side by side */
.biz-page .biz-copy-drawing { margin: 24px 0 0; padding: 26px; }
.biz-copy-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.biz-doc { padding: 16px 18px; border-radius: 14px; background: #f7f9fc; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08); min-width: 0; }
.biz-doc-copy { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(0, 107, 203, .35); }
.biz-doc-head { display: flex; align-items: center; gap: 10px; }
.biz-doc-head .icon { width: 24px; height: 28px; flex: none; color: #006bcb; }
.biz-doc-head small { display: block; font-size: 11px; color: #56697f; line-height: 1.35; }
.biz-doc-head b { display: block; font-size: 13.5px; color: #102d49; line-height: 1.35; overflow-wrap: anywhere; }
.biz-doc-lines { margin: 14px 0 0; }
.biz-doc-lines > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(16, 45, 73, .07); font-size: 12.5px; }
.biz-doc-lines dt { color: #56697f; }
.biz-doc-lines dd { margin: 0; color: #102d49; font-weight: 500; font-variant-numeric: tabular-nums; }
.biz-redact { display: inline-block; width: 92px; height: 12px; border-radius: 2px; background: #102d49; vertical-align: middle; }
.biz-doc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.biz-doc-chips .kd-chip { font-size: 11px; }
.biz-copy-arrow { font-size: 22px; color: #006bcb; }
.biz-copy-drawing .kd-caption { margin-top: 18px; }

/* chapter 04 — seats with roles, and your logo on the sealed PDF */
.biz-page .biz-team-drawing { margin: 24px 0 0; padding: 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.biz-team-people { display: grid; gap: 12px; }
.biz-team-title { font: 600 11px/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: #56697f; }
.biz-page .biz-team-drawing .biz-avatar { background: #eef5fc; border: 0; box-shadow: inset 0 0 0 1px rgba(0, 107, 203, .2); color: #004e99; font-weight: 600; }
.biz-page .biz-team-drawing .biz-brand-demo { padding: 18px; border-radius: 14px; background: #f7f9fc; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08); }
.biz-page .biz-logo-placeholder { border-radius: 12px; }
.biz-team-drawing .kd-caption { grid-column: 1 / -1; margin-top: 0; }

/* chapter 05 — the review steps */
.biz-page .biz-review-flow .kd-caption { margin-top: 18px; }

/* ---------------------------------------------------------------- 5. Professional or Business? */
.biz-page .biz-comparison thead th { background: #f5f9fd; }
.biz-page .biz-comparison tr > :last-child { background: #f1f7fd; }
.biz-page .biz-comparison thead th:last-child { background: #2a64a0; color: #fff; }
.biz-page .biz-comparison :is(th, td) { border-bottom-color: rgba(16, 45, 73, .07); }
.biz-page .biz-links { display: flex; flex-wrap: wrap; gap: 0 28px; }

/* ---------------------------------------------------------------- 6. Enterprise — a flat blue panel, not a full-bleed band */
.biz-page #enterprise {
  width: calc(100% - 80px); max-width: 1240px; margin: 0 auto; border-radius: 28px;
  background: #2a64a0; overflow: hidden; color: #fff;
}
.biz-page #enterprise .eyebrow { color: #d6eeff; }
.biz-page #enterprise h2 { color: #fff; }
.biz-page #enterprise .biz-enterprise > div > p:not(.eyebrow) { color: rgba(236, 244, 252, .86); }
.biz-page #enterprise .mailbox-card {
  background: #fff; border: 0; border-radius: 20px;
  box-shadow: 0 2px 4px rgba(6, 22, 42, .08), 0 24px 60px -18px rgba(6, 22, 42, .38);
}
.biz-page #enterprise .mailbox-card h3 { color: #102d49; }
.biz-page #enterprise .mailbox-card p { color: #3f5470; }

/* ---------------------------------------------------------------- 7. FAQ */
.biz-page .biz-faq .accordion-item.is-active { border-radius: 16px; }

/* ---------------------------------------------------------------- 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. */
.biz-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 */
.biz-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) */
.biz-page #closing .cta-gradient { padding: 112px 40px 96px !important; }
/* the closing's primary action is the one orange pill, as on the landing */
.biz-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);
}
.biz-page #closing .btn-onblue:hover { color: #fff; background: linear-gradient(180deg, #ff9a55 0%, #ff7036 55%, #ff5a2c 100%); }

/* ---------------------------------------------------------------- phone */
@media (max-width: 900px) {
  .biz-page #enterprise { width: calc(100% - 32px); border-radius: 24px; }
  .biz-page .biz-team-drawing { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 700px) {
  .biz-page #enterprise { width: calc(100% - 24px); border-radius: 22px; }
  /* the trial note goes under the button, not squeezed beside it */
  html body[data-page="business"] .biz-page .hero-actions { flex-wrap: wrap; }
  .biz-page .hero-cu .hero-note { max-width: none; }
  .biz-page .biz-glance { font-size: 14px; text-align: left; margin-top: 18px; }
  .biz-page .biz-pack-label { text-align: left; }
  .biz-page .biz-copy-drawing, .biz-page .biz-team-drawing { padding: 18px; }
  .biz-copy-pair { grid-template-columns: 1fr; gap: 10px; }
  .biz-copy-arrow { transform: rotate(90deg); justify-self: center; line-height: 1; }
  /* the straddle: theme.css stops the blue at 38% of the proof section, but on phones that section also
     holds the caption and the facts line, so 38% overshoots the capture. Stop it ~40% into the capture:
     8px padding + 40% of (16:9 image on the column width + 36px title bar). */
  .biz-page .hero-cu + .proof-cu { background: linear-gradient(180deg, #2a64a0 0, #2a64a0 calc(22.5vw + 13px), transparent calc(22.5vw + 13px)); }
}
@media (max-width: 640px) {
  /* the closing copy on the page gutter, level with the footer brand */
  .biz-page #closing .cta-gradient { padding: 80px 20px 64px !important; }
}

/* ---------------------------------------------------------------- 9. words pass (27 Sep 2026) */
/* links inside running copy read as links: the blue, underlined */
.biz-page .biz-feature > p a { color: #006bcb; text-decoration: underline; text-decoration-color: rgba(0, 107, 203, .35); text-underline-offset: 4px; }
.biz-page .biz-feature > p a:hover { text-decoration-color: #006bcb; }
.biz-page .biz-feature > p + p { margin-top: 12px; }
/* the opening capture keeps only its "Open full size" link: no rule beside an empty caption */
.biz-page .proof-figure .kd-caption { border-left: 0; padding-left: 0; justify-content: flex-end; }
/* the seats drawing: a company's own logo, flat */
.biz-page .biz-logo-kf { border: 0; padding: 0; width: 64px; height: 64px; display: grid; place-items: center; background: #102d49; color: #fff; font: 700 20px/1 var(--font-display); letter-spacing: -.02em; border-radius: 14px; }

/* chapter 02 — the signing editor with an offer letter, drawn as the app draws it */
.biz-page .biz-editor { margin: 24px 0 0; padding: 0; overflow: hidden; 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); }
.biz-ed-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: #f7f9fc; border-bottom: 1px solid rgba(16, 45, 73, .07); }
.biz-ed-crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/1.4 var(--font-sans); color: #56697f; }
.biz-ed-bar .kd-chip { flex: none; font-size: 11px; }
.biz-ed-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.biz-ed-sheet { padding: 22px; background: #eef3f8; }
.biz-ed-page { padding: 20px 20px 18px; background: #fff; border-radius: 6px; box-shadow: 0 1px 2px rgba(16, 45, 73, .08), 0 8px 20px -14px rgba(16, 45, 73, .3); }
.biz-ed-from { display: block; font: 600 10px/1.4 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: #56697f; }
.biz-ed-title { display: block; margin-top: 8px; padding-bottom: 10px; border-bottom: 1.5px solid #102d49; font: 650 18px/1.25 var(--font-display); letter-spacing: -.02em; color: #102d49; }
.biz-ed-terms { margin: 10px 0 0; }
.biz-ed-terms > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 12px; }
.biz-ed-terms dt { color: #56697f; }
.biz-ed-terms dd { margin: 0; color: #102d49; font-weight: 500; }
.biz-ed-lines { display: grid; gap: 7px; margin: 12px 0 16px; }
.biz-ed-lines i { display: block; height: 5px; border-radius: 3px; background: #e6ecf3; }
.biz-ed-lines i:nth-child(2) { width: 88%; }
.biz-ed-lines i:nth-child(3) { width: 64%; }
.biz-ed-fields { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; }
.biz-ed-field { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 46px; padding: 6px 10px; border-radius: 4px;
  font: 600 12px/1.2 var(--font-sans); }
.biz-ed-field small { font: 600 9.5px/1.3 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.biz-ed-field.is-one { background: #e8f2fc; color: #004e99; box-shadow: inset 0 0 0 1.5px #006bcb; }
.biz-ed-field.is-two { background: #f3f7fb; color: #3f5470; box-shadow: inset 0 0 0 1.5px #9fb3c8; }
.biz-ed-side { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-left: 1px solid rgba(16, 45, 73, .07); }
.biz-ed-label { display: block; font: 600 10.5px/1.4 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: #56697f; }
.biz-ed-signers { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.biz-ed-signers li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #f7f9fc; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07); }
.biz-ed-signers b { display: block; font-size: 13.5px; color: #102d49; }
.biz-ed-signers small { display: block; font-size: 11.5px; color: #56697f; }
.biz-ed-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 650 12px/1 var(--font-sans); }
.biz-ed-n.is-one { background: #006bcb; color: #fff; }
.biz-ed-n.is-two { background: #fff; color: #3f5470; box-shadow: inset 0 0 0 1.5px #9fb3c8; }
.biz-ed-file { padding-top: 14px; border-top: 1px solid rgba(16, 45, 73, .07); }
.biz-ed-file b { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: #102d49; font-weight: 600; }
.biz-ed-send { margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 999px; background: #102d49; color: #fff; font: 600 13px/1 var(--font-sans); }
@media (max-width: 700px) {
  .biz-ed-body { grid-template-columns: 1fr; }
  .biz-ed-sheet { padding: 14px; }
  .biz-ed-side { border-left: 0; border-top: 1px solid rgba(16, 45, 73, .07); padding: 16px; }
  .biz-ed-send { margin-top: 4px; }
  .biz-ed-crumb { font-size: 11px; }
}

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