/* ==========================================================================
   KuduDoc v6 — Property & leases. 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.
   24 Sep 2026: the stats row, the before/after cards, the icon-card grid and the check band are gone;
   the facts are one quiet line in the opening.
   ========================================================================== */

/* ---------------------------------------------------------------- 1 · the opening */
html body #hero.pr-hero {
  position: relative; isolation: isolate;
  padding: 160px 0 64px !important;
  color: #fff;
  background: #2a64a0;   /* a solid colour, so site.js reads the opening as dark and the nav turns white */
  --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) */
html body #hero.pr-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; 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;
}
/* 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 + #agent {
  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: 200px;
}

/* eyebrow and perspective switch */
html body #hero .pr-hero-top { margin-bottom: 40px; }
html body #hero .eyebrow {
  display: flex; align-items: center; margin: 0; 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 .pr-tabs button {
  border: 0; border-radius: 999px; background: transparent; color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(191, 227, 255, .45); font-weight: 600;
}
html body #hero .pr-tabs button:hover { background: rgba(191, 227, 255, .1); }
html body #hero .pr-tabs button.is-active { background: #fff; color: #102d49; box-shadow: none; }
html body #hero .pr-tabs button.is-active::before { background: #006bcb; }

/* the headline across the top; the lead, actions and fact on the left, the capture on the right */
@media (min-width: 981px) {
  html body #hero .pr-hero-panel.is-active {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); column-gap: 56px; row-gap: 0; align-items: start;
  }
  html body #hero .pr-hero-copy { display: contents; }
  html body #hero .pr-hero-copy > * { grid-column: 1; }
  html body #hero .pr-hero-copy > :is(h1, h2.pr-hero-title) { grid-column: 1 / -1; }
  html body #hero .pr-hero-media { grid-column: 2; grid-row: 2 / span 5; width: 100%; margin-top: 30px; }
}
/* the tenant view's heading is an h2 (one h1 per page, SEO-P0-51) with the h1's look */
html body #hero .pr-hero-copy :is(h1, h2.pr-hero-title) {
  margin: 0; color: #fff;
  font: 650 clamp(46px, 5.4vw, 80px)/.98 var(--font-display); letter-spacing: -.038em;
}
html body #hero .pr-hero-copy :is(h1, h2.pr-hero-title) { max-width: 20ch; text-wrap: balance; }
html body #hero .kd-rule { width: 96px; height: 4px; margin: 18px 0 16px; background: #ff762b; }
html body #hero .pr-sub {
  max-width: 38ch; margin-top: 24px; color: rgba(236, 244, 252, .86);
  font: 400 clamp(19px, 1.8vw, 24px)/1.42 var(--font-sans); letter-spacing: -.012em;
}
html body #hero .pr-actions { margin-top: 32px; gap: 12px; }
/* the secondary action as a ghost pill */
html body #hero .pr-actions .pr-link {
  min-height: 48px; padding: 0 22px; border-radius: 999px; color: #fff; font-weight: 600;
  box-shadow: inset 0 0 0 1.5px rgba(191, 227, 255, .45);
}
html body #hero .pr-actions .pr-link:hover { background: rgba(191, 227, 255, .1); text-decoration: none; }
html body #hero .pr-free { color: rgba(236, 244, 252, .78); }
/* the facts line, as on the landing: plain text, the slanted stroke between */
html body #hero .pr-facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 56px 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 #hero .pr-facts i { flex: none; width: 2px; height: 11px; border-radius: 2px; background: #ff762b; transform: skewX(-14deg); opacity: .8; }

/* the product capture on the blue */
html body #hero .pr-hero-media .mock-frame {
  border: 0; border-radius: 16px;
  box-shadow: 0 2px 4px rgba(6, 22, 42, .08), 0 24px 60px -18px rgba(6, 22, 42, .38);
}
html body #hero .pr-hero-media .capture-caption { color: rgba(236, 244, 252, .86); border-left-color: #a9dcff; }
html body #hero .pr-hero-media .capture-caption .chip-proof { padding: 0; border: 0; background: transparent; color: #fff; }
html body #hero .pr-capture-link { color: #fff; }
/* the tenant view's illustration: a white card on the blue */
html body #hero .pr-tenant-media .pr-mock {
  border: 0; border-radius: 20px; box-shadow: 0 2px 4px rgba(6, 22, 42, .08), 0 24px 60px -18px rgba(6, 22, 42, .38);
  --c-text-main: #102d49; --c-text-secondary: #56697f; --surface-ink: #102d49; --surface-muted: #56697f; color: #102d49;
}
html body #hero .pr-tenant-media .pr-mock :is(.pr-mock-title, b) { color: #102d49; }
html body #hero .pr-tenant-media .pr-mock .eyebrow { color: #006bcb; }
html body #hero .pr-tenant-media .pr-mock .eyebrow::before { display: none; }
/* its label sits under the card, on the blue: light and legible */
html body #hero .pr-tenant-media .kd-mock-label { color: rgba(236, 244, 252, .86); border-left-color: #a9dcff; }

/* ---------------------------------------------------------------- 2 · cards: one recipe */
html body :is(.pr-page .pr-mock, .pr-page .result-card) {
  border: 0; border-radius: 20px; 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-page h1, html body .pr-page h3, html body .pr-page h4 { font-weight: 650; }
/* the mock cards' labels are plain text (kept out of the heading outline), set as the old h3/h4 labels were */
html body .pr-page .pr-mock-title { margin: 0; color: #102d49; font: 650 22px/1.2 var(--font-display); letter-spacing: -.035em; }
/* a chapter heading's one-line lead */
html body .pr-chapter-title > p { max-width: 62ch; color: #3f5470; }
html body .pr-page :is(.pr-row-copy, .pr-chapter-title) p a { color: #006bcb; text-underline-offset: 3px; }
/* a chapter heading with no side note: one line of heading, left */
html body .pr-chapter-title { margin-bottom: 36px; }
html body .pr-chapter-title h2.kd-h2 { max-width: 22ch; }
/* the illustration tiles hold a card on a quiet pale blue, like the landing's wall tiles */
html body .pr-row-media { border: 0; border-radius: 24px; background: #eef5fc; }
html body .pr-page .kd-mock-label { border-bottom-color: rgba(16, 45, 73, .1); }
html body .pr-row { border-top-color: rgba(16, 45, 73, .09); }

/* ---------------------------------------------------------------- 3 · type and markers */
html body .pr-page .eyebrow { font: 600 12.5px/1.5 var(--font-sans); letter-spacing: .15em; text-transform: uppercase; }
html body .pr-page h2.kd-h2 { font-weight: 650; letter-spacing: -.03em; }
html body .pr-page h2.kd-h2::before { background: #ff762b; transform: skewX(-14deg) rotate(-8deg); }
html body .pr-page .kd-marks li::before { background: #006bcb; }
html body .pr-page .pr-link { color: #006bcb; }

/* ---------------------------------------------------------------- 4 · the illustrations' colour */
/* the tenant avatar and the room marks lose their orange: orange belongs to the action and the seal */
html body .pr-signers > div:nth-child(2) .pr-avatar { background: #cfe6ff; color: #004e99; }
html body .pr-photo-grid .pr-room-mark { stroke: #006bcb; }
html body .pr-photo-grid > div { background: #eef5fc; }

/* ---------------------------------------------------------------- 5 · the ink chapter: a flat blue panel, not a full-bleed band */
html body #ink {
  width: min(1240px, calc(100% - 48px)); margin: 32px 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 #ink h2 { color: #fff; }
html body #ink h2 :is(.text-sky, .text-slate, span) { color: #a9dcff; }
html body #ink .eyebrow { color: #d6eeff; }
html body #ink .pr-ink-copy p { color: rgba(236, 244, 252, .86); }
html body #ink .pr-ink-copy p + p, html body #ink .pr-ink-more p { font-size: 15px; }
html body #ink .pr-ink-more { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
html body #ink .pr-link { color: #fff; text-decoration: underline; text-decoration-color: rgba(191, 227, 255, .5); }
html body #ink .pr-link:hover { text-decoration-color: #fff; }
/* the mark in the ink panel: flat, white strokes and the one orange stroke (not v5's gradient mark) */
html body #ink .kd-mark {
  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)' fill='none' stroke-width='6.5' stroke-linecap='round'%3E%3Cpath d='M13 14V50' stroke='%23fff' stroke-opacity='.55'/%3E%3Cpath d='M25 9V55' stroke='%23FF762B'/%3E%3Cpath d='M37 13V51' stroke='%23fff' stroke-opacity='.55'/%3E%3Cpath d='M49 18V46' stroke='%23fff' stroke-opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- 6 · FAQ */
html body .pr-faq .accordion { border-top: 0; }
html body .pr-faq .accordion-item { padding: 0 24px; border: 0; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07), 0 10px 28px -22px rgba(16, 45, 73, .3); }

/* ---------------------------------------------------------------- 7 · the closing: one full-bleed blue into the footer */
html body #closing.pr-section { background: #2a64a0 !important; }
html body #closing.pr-section > .pr-container { 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);
}
html body #closing p { color: rgba(236, 244, 252, .86); }

/* ---------------------------------------------------------------- 8 · tablet and phone */
@media (max-width: 1100px) {
  html body #hero .pr-hero-panel { gap: 36px; }
}
@media (max-width: 760px) {
  html body #ink { width: calc(100% - 24px); border-radius: 22px; margin: 16px auto; }
}
@media (max-width: 700px) {
  html body #hero.pr-hero { padding: 124px 0 48px !important; }
  html body #hero.pr-hero::before { background-position: right -40vw center; }
  html body #hero .pr-hero-top { margin-bottom: 28px; }
  html body #hero .pr-hero-top > .eyebrow { margin-bottom: 18px; }
  html body #hero .pr-hero-copy :is(h1, h2.pr-hero-title) { font-size: clamp(40px, 11vw, 50px); }
  html body .pr-page .pr-mock-title { font-size: 20px; }
  html body #hero .pr-sub { font-size: 18px; }
  /* the two actions stack, full width, as on professionals: "Renewals for agents ↓" no longer wraps inside its pill */
  html body #hero .pr-actions { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 10px; }
  html body #hero .pr-actions > * { flex: none; justify-content: center; }
  html body #hero .pr-actions .pr-link { font-size: 14px; }
  html body #hero + #agent { padding-top: 170px; }
  html body #hero .pr-facts { margin-top: 40px; display: grid; gap: 10px; }
  html body #hero .pr-facts i { display: none; }
  html body #closing.pr-section { padding: 88px 20px 72px !important; }
  html body #closing .btn-row { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  html body #hero .pr-tabs button, html body #closing .btn { transition: none; }
}

/* ---------------------------------------------------------------- review (27 Sep 2026): the opening's app panel
   The Library capture (old app labels) is replaced by the Library drawn in HTML: the same kda block as product
   and library, in its compact form, on the blue. */
html body #hero .pr-app { margin: 0; }
html body #hero .pr-app .mock-frame { overflow: hidden; background: #fff; }
html body #hero .pr-app .kda { color: #102d49; }
html body #hero .pr-app .kda-chips { margin-bottom: 12px; }

/* kda · the app panel: shared, in theme.css */
/* a link in the ink panel's small print reads as a link on the blue */
html body #ink .pr-ink-more p a { color: #fff; text-decoration: underline; text-decoration-color: rgba(191, 227, 255, .6); text-underline-offset: 3px; }
html body #ink .pr-ink-more p a:hover { text-decoration-color: #fff; }