/* ==========================================================================
   KuduDoc v6 — pricing.html in the v6 language (loaded after theme.css).
   v5 CSS sits in the lower layer (v5), so plain rules here beat it; theme.css is unlayered,
   so rules that change what it sets carry the same `html body` prefix (later file wins ties).
   The opening (.hero-cu) is handled by theme.css. 24 Sep 2026: content cut to plans → comparison → seats →
   questions → closing (the trial, credits and cancel bands and the fence disclosures were removed).
   ========================================================================== */

/* ---------------------------------------------------------------- shared recipes on this page
   card  = white, radius 22, hairline + soft layered shadow (as the landing's plan cards)
   panel = flat landing blue #2a64a0, white headings, rgba(236,244,252,.86) text               */
html body .pr-page {
  --v6-card-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);
  --v6-card-shadow-on-blue: 0 2px 4px rgba(6, 22, 42, .1), 0 24px 56px -24px rgba(6, 22, 42, .5);
  --v6-on-blue-text: rgba(236, 244, 252, .86);
  --v6-on-blue-line: rgba(191, 227, 255, .28);
}

/* ---------------------------------------------------------------- the opening (theme's .hero-cu)
   - the CTA row and its note sit on solid blue, above the 150px ease (168px bottom padding at every width)
   - the ease ends transparent, not #dcebf8: the ground under this opening's foot is already paler, and a
     solid end colour left a seam across the page. site.js reads .hero-cu as dark by its class, so the
     transparent background-color does not change the nav's tone.
   - the poster is sized in px from the top, so its strokes end inside the opening instead of being cut
     flat by the section edge (auto 150%, centred, spilled past the foot of this short opening) */
html body .pr-page .hero-cu {
  padding-bottom: 168px;
  background-color: transparent;
  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"),
    linear-gradient(180deg, #2a64a0 0, #2a64a0 calc(100% - 150px), rgba(42, 100, 160, 0) 100%);
  background-size: auto 680px, 100% 100%;
  background-position: right -6vw top -60px, 0 0;
  background-repeat: no-repeat;
}
/* a short opening: the plan prices sit on the first screen */
html body .pr-page .hero-cu.pr-hero-short { padding-top: 132px; padding-bottom: 150px; background-size: auto 420px, 100% 100%; background-position: right 2vw top -40px, 0 0; }
/* one poster only: theme.css draws a second, masked one in ::after; in this short opening the two overlapped into a smear */
html body .pr-page .hero-cu.pr-hero-short::after { content: none; }
html body .pr-hero-short .cu-wrap { max-width: 1240px; }
html body .pr-hero-short h1 { font-size: clamp(42px, 4.6vw, 64px); max-width: none; }
html body .pr-hero-short .kd-rule { margin: 16px 0 0; }
html body .pr-hero-short .hero-sub { max-width: 52ch; margin-top: 18px; font-size: clamp(17px, 1.5vw, 20px); }
html body .pr-page .pr-plan-zone { margin-top: -64px; position: relative; }
@media (max-width: 640px) {
  html body .pr-page .hero-cu.pr-hero-short { padding-top: 112px; padding-bottom: 130px; background-size: auto 300px, 100% 100%; background-position: right -18vw top -10px, 0 0; }
  html body .pr-page .pr-plan-zone { margin-top: -48px; }
  html body .pr-page .hero-cu { padding-bottom: 160px; background-size: auto 520px, 100% 100%; background-position: right -34vw top 0, 0 0; }
}

/* ---------------------------------------------------------------- plan zone: on the ground, no band edge */
html body .pr-plan-zone { border-top: 0; background: transparent; padding-top: 8px; }

/* ---------------------------------------------------------------- plan cards: white cards; Business the flat blue panel */
html body .pr-grid { gap: 16px; }
html body .pr-grid .plan {
  border: 0; border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #fdfcf9); box-shadow: var(--v6-card-shadow);
}
html body .pr-grid .plan.surface-dawn { background: #2a64a0; box-shadow: var(--v6-card-shadow); }
html body .pr-grid .plan-price { font-weight: 650; letter-spacing: -.035em; }
html body .pr-grid .plan-name.kd-h2 { font-weight: 650; padding-left: 0; }
html body .pr-grid .plan-name.kd-h2::before, html body .pr-enterprise .kd-h2::before { content: none; }
html body .pr-enterprise .kd-h2 { padding-left: 0; }
html body .pr-feature-link { color: #006bcb; text-decoration: underline; text-decoration-color: rgba(0, 107, 203, .3); text-underline-offset: 3px; }
html body .pr-feature-link:hover { text-decoration-color: currentColor; }
html body .pr-grid .plan-body { border-top: 1px solid rgba(16, 45, 73, .07); }
html body .pr-grid .plan.surface-dawn .plan-body { border-top-color: var(--v6-on-blue-line); }
html body .pr-grid .plan.surface-dawn :is(.plan-tagline, .plan-unit, .plan-trial, .plan-review, .plan-caption, .pr-features li) { color: var(--v6-on-blue-text); }
html body .pr-grid .plan.surface-dawn .plan-review { border-top-color: var(--v6-on-blue-line); }
html body .pr-grid .plan.surface-dawn .fence { color: var(--v6-on-blue-text); }
html body .pr-grid .plan.surface-dawn .fence::before { background: rgba(191, 227, 255, .55); }
html body .pr-grid .plan.surface-dawn .pr-plan-link { color: #fff; }
html body .pr-grid .plan-caption { color: #56697f; letter-spacing: .12em; }
html body .pr-grid .pr-plan-link, html body .pr-card-boundary a { color: #006bcb; }

/* Enterprise: a card on the ground */
html body .pr-enterprise { border: 0; border-radius: 22px; background: #fff; box-shadow: var(--v6-card-shadow); }
html body .pr-enterprise-price b { font-weight: 650; color: #102d49; }

/* ---------------------------------------------------------------- compare the plans: the table, open */
html body .pr-comparison { margin-top: 72px; }
html body .pr-comparison .pr-section-heading { margin-bottom: 24px; }
html body .pr-comparison .kd-h2 { font-size: clamp(30px, 3vw, 40px); font-weight: 650; letter-spacing: -.032em; }
/* the price row leads the table, in the plan cards' type */
html body .pr-table .pr-price-row th, html body .pr-table .pr-price-row td { padding-top: 20px; padding-bottom: 20px; color: #56697f; }
html body .pr-table .pr-price-row .price-value { font: 650 22px/1 var(--font-display); letter-spacing: -.03em; color: #102d49; transition: opacity .2s, transform .2s; display: inline-block; }
html body .pr-table .pr-price-row .price-value.is-out { opacity: 0; transform: translateY(-4px); }
html body .pr-table .pr-price-row small { font-size: 12px; }
@media (prefers-reduced-motion: reduce) { html body .pr-table .pr-price-row .price-value { transition: none; } }
html body .pr-table-scroll { border: 0; border-radius: 20px; background: #fff; box-shadow: var(--v6-card-shadow); }
html body .pr-table caption { background: #fff; color: #56697f; }
html body .pr-table th, html body .pr-table td { border-bottom-color: rgba(16, 45, 73, .07); }
html body .pr-table thead, html body .pr-table thead th:first-child { background: #2a64a0; color: #fff; }
html body .pr-table tbody tr:nth-child(even) { background: #f7fafd; }
html body .pr-table td:last-child { background: #eef5fc; }
html body .pr-table th[scope="row"] { color: #102d49; box-shadow: 1px 0 rgba(16, 45, 73, .07); }

/* ---------------------------------------------------------------- seats: a flat blue panel, not a full-bleed band */
html body .pr-dark {
  width: calc(100% - 80px); max-width: 1240px; margin: 56px auto 24px; padding: 88px 72px 80px;
  border-radius: 28px; background: #2a64a0;
}
html body .pr-dark .text-sky { color: #a9dcff; }
html body .pr-chapter-copy > p { color: var(--v6-on-blue-text); font-size: 17px; line-height: 1.55; }
html body .pr-dark .kd-h2 { color: #fff; font-weight: 650; }
/* the estimator: a white card on the panel (theme turns .surface-white transparent) */
html body .pr-estimator.surface-white { background: #fff; border-radius: 22px; box-shadow: var(--v6-card-shadow-on-blue); color: #102d49; }
html body .pr-dark .pr-estimator h3.kd-h3 { font-weight: 650; color: #102d49; }
html body .pr-estimator select { border-radius: 12px; background: #f5f9fd; border-color: #dfe6ee; }
html body .pr-estimator output { font-weight: 650; letter-spacing: -.035em; color: #102d49; }
html body .pr-estimator .pr-total { border-top-color: rgba(16, 45, 73, .1); }
html body .pr-estimator .pr-range-labels, html body .pr-estimator .pr-charge-note, html body .pr-estimator .estimator-note { color: #56697f; }
html body .pr-estimator .pr-seat-strokes span { background: #dcebf8; }
html body .pr-estimator .pr-seat-strokes .is-occupied { background: #006bcb; }

/* ---------------------------------------------------------------- questions */
html body .pr-faq { background: transparent; }
html body .pr-faq .accordion-item.is-active { box-shadow: inset 0 0 0 1.5px #006bcb; }

/* ---------------------------------------------------------------- closing: the wrapper must not paint pale margins round the blue
   (theme.css pads both #closing and the .cta-gradient inside it; here #closing wraps one) */
html body #closing.pr-closing { background: #2a64a0; }
/* theme.css zeroes the .cta-gradient's padding inside #closing, so with the wrapper at 0 the copy sat on the band's
   top edge and, below 1320px, on the viewport's left edge: the band's room now comes from the wrapper (still all blue) */
html body #closing.pr-closing { padding: 104px 40px 88px !important; }
@media (max-width: 600px) { html body #closing.pr-closing { padding: 72px 20px 56px !important; } }
html body #closing.pr-closing .cta-copy > p { max-width: 60ch; }
/* the band is v5's two-track grid (copy | a 240px track for the mark, which theme.css empties). The copy sat
   centred in the first track, so its left edge moved with the text (x=162 against the page's 100). One track,
   capped at the page column (1240, as the plan grid and the seats panel) and centred; the empty mark box goes
   (on phones it also stacked a 140px empty box under the copy) */
html body #closing.pr-closing .cta-gradient { grid-template-columns: minmax(0, 1240px); justify-content: center; }
html body #closing.pr-closing .cta-gradient::after { content: none; }
html body #closing.pr-closing .cta-gradient-inner { width: 100%; max-width: none; }

/* ---------------------------------------------------------------- phone */
@media (max-width: 900px) {
  html body .pr-plan-navigation button { border: 0; border-radius: 999px; background: #fff; color: #102d49; box-shadow: var(--v6-card-shadow); }
  html body .pr-dark { width: calc(100% - 40px); padding: 64px 32px; }
}
@media (max-width: 600px) {
  html body .pr-dark { width: calc(100% - 24px); margin-top: 40px; padding: 48px 20px 44px; border-radius: 24px; }
  html body .pr-estimator.surface-white { padding: 24px 20px; }
}

/* ---------------------------------------------------------------- SEO wording pass (27 Sep 2026) */
/* feature links on the blue Business card read white, like its other text */
html body .pr-grid .plan.surface-dawn .pr-feature-link { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }
/* the follow-on link under the comparison table */
html body .pr-table-link { margin: 20px 0 0; font-size: 15px; }
html body .pr-table-link a { color: #006bcb; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(0, 107, 203, .3); text-underline-offset: 3px; }
html body .pr-table-link a:hover { text-decoration-color: currentColor; }
/* the hero's link to electronic signing, on the blue: white, underlined */
html body .pr-hero-short .hero-sub a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); text-underline-offset: 3px; }
html body .pr-hero-short .hero-sub a:hover { text-decoration-color: #fff; }

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