/* ==========================================================================
   Packs — the v6 language on the v5 page (pages/packs.css).
   Loaded after theme.css; the v5 page CSS sits in the lower layer (v5), so plain rules here win.
   Sections, top to bottom: #hero (blue opening) · #tabs (the ease into the ground) · #steps · #grid (three cards) ·
   #faq · #closing (full-bleed blue into the footer).
   ========================================================================== */

/* ---------------------------------------------------------------- shared on this page */
html body .pk-page {
  --v6-on-blue: rgba(236, 244, 252, .86);
  --v6-on-blue-2: rgba(226, 238, 250, .78);
  --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-blue-panel: rgba(191, 227, 255, .07);
  --v6-blue-line: rgba(191, 227, 255, .2);
}
html body .pk-page .eyebrow { font: 600 12.5px/1.5 var(--font-sans); letter-spacing: .15em; text-transform: uppercase; }
/* display names in the pack cards: Montserrat 650, not v5's 800 */
html body .pk-page :is(.pack-name, .pk-share-title) { font-weight: 650; }
html body .pk-page .kd-quote::before { background: #006bcb; }
/* primary actions: the one orange pill with white text (v5's .btn-ember had navy text) */
html body .pk-page .btn-ember,
html body .pk-page #closing .btn-onblue {
  color: #fff; border: 0; border-radius: 999px;
  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 .pk-page .btn-ember:hover,
html body .pk-page #closing .btn-onblue:hover { background: linear-gradient(180deg, #ff9a55 0%, #ff7036 55%, #ff5a2c 100%); color: #fff; }

/* list bullets: the logo's slanted stroke in blue — markers are blue; the orange stays for the action,
   the H1 rule, the chapter slashes and the seal (theme.css paints every .kd-marks bullet orange) */
html body .pk-page ul.kd-marks > li::before {
  top: 5px; width: 3px; height: 14px; border-radius: 2px; background: #006bcb; transform: skewX(-14deg) rotate(-8deg);
}

/* ---------------------------------------------------------------- 1. #hero — the blue opening */
/* The hero paints the blue as its background-colour (site.js reads it to give the nav its dark tone);
   the ease into the pale ground happens at the top of #tabs below. */
html body .pk-page > #hero.pk-hero {
  padding: 168px 0 64px !important; 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 top 24px / auto calc(100% - 24px) no-repeat,
    #2a64a0;
}
html body .pk-page .pk-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr); }
html body .pk-page .pk-hero .eyebrow {
  display: flex; align-items: center; margin: 0 0 24px; color: #d6eeff; line-height: 1;
}
html body .pk-page .pk-hero .eyebrow::before {
  content: ""; flex: none; width: 3px; height: 13px; margin-right: 10px; border-radius: 2px;
  background: #ff762b; transform: skewX(-14deg) translateY(1px);
}
html body .pk-page .pk-hero h1 {
  /* the landing's scale, capped so "Ready for the next" keeps one line beside the pack */
  margin: 0; font: 650 clamp(44px, 4.3vw, 62px)/.98 var(--font-display); letter-spacing: -.038em; color: #fff;
}
html body .pk-page .pk-hero h1 > .text-slate { color: #a9dcff; }
html body .pk-page .pk-hero h1 .kd-rule { margin: 18px 0 20px; background: #ff762b; }
html body .pk-page .pk-lead {
  margin-top: 26px; max-width: 30ch; font: 400 clamp(19px, 1.7vw, 23px)/1.45 var(--font-sans); letter-spacing: -.012em; color: var(--v6-on-blue);
}
html body .pk-page .pk-actions { margin-top: 32px; }
html body .pk-page .pk-hero .btn-ghost {
  padding-left: 22px; background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(191, 227, 255, .45);
}
html body .pk-page .pk-hero .btn-ghost:hover { background: rgba(191, 227, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(191, 227, 255, .7); }
html body .pk-page .pk-hero .pk-trial { font-size: 13px; color: var(--v6-on-blue); }
/* the pack: a white card lifted on the blue, as the landing's document */
html body .pk-page .pk-hero-visual .pack {
  border: 0; box-shadow: 0 2px 4px rgba(6, 22, 42, .08), 0 30px 70px -24px rgba(6, 22, 42, .5);
}
html body .pk-page .pk-hero-visual .kd-hand { color: #a9dcff; }
html body .pk-page .pk-hero .pk-trial { margin-top: 16px; max-width: 46ch; line-height: 1.55; }

/* ---------------------------------------------------------------- 2. #tabs — one white card per request */
/* the opening eases into the ground at the top of this section */
html body .pk-page > #hero + #tabs {
  padding-top: 150px; background: linear-gradient(180deg, #2a64a0 0, rgba(42, 100, 160, 0) 140px);
}
/* the request tabs: pills like the landing's chooser (v5's dashed chips and square-cornered active ring go) */
html body .pk-page .pk-tabs .chip {
  border: 0; border-radius: 999px; padding: 0 18px; background: #fff; color: #3f5470;
  box-shadow: inset 0 0 0 1.5px #dfe6ee; animation: none;
  transition: box-shadow 140ms var(--v6-ease), color 140ms var(--v6-ease), background-color 140ms var(--v6-ease);
}
html body .pk-page .pk-tabs .chip::before { content: none; }
html body .pk-page .pk-tabs .chip:hover { background: #fff; color: #102d49; box-shadow: inset 0 0 0 1.5px #006bcb; }
html body .pk-page .pk-tabs .chip.is-active,
html body .pk-page .pk-tabs .chip[aria-selected="true"] {
  border: 0; border-radius: 999px; background: #fff; color: #004e99;
  box-shadow: inset 0 0 0 1.5px #006bcb, 0 0 0 4px rgba(0, 107, 203, .12), 0 10px 24px -14px rgba(0, 78, 153, .45);
}
html body .pk-page .pk-tabs .chip:focus-visible { outline: 2px solid #006bcb; outline-offset: 3px; }
html body .pk-page .pk-tab-panel { background: #fff; border: 0; border-radius: 28px; box-shadow: var(--v6-card-shadow); }
/* the pack inside the card: a real hairline (v5's white head painted over the inset shadow, leaving square corners) */
html body .pk-page .pk-tab-panel .pack { border: 1px solid rgba(16, 45, 73, .09); box-shadow: none; }

/* ---------------------------------------------------------------- 3. #steps — four decisions */
html body .pk-page .pk-process-nav { border-bottom-color: rgba(16, 45, 73, .08); }
html body .pk-page .pk-step { border-bottom-color: rgba(16, 45, 73, .08); }
html body .pk-page .pk-step .mock-frame { box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07), 0 2px 4px rgba(6, 22, 42, .06), 0 24px 60px -28px rgba(6, 22, 42, .38); }
/* no one-word last lines on the step headings ("runs." alone at 1440px). Chrome does not balance across
   the <br>, so the second line becomes its own block and is balanced there. */
html body .pk-page .pk-step h3 > span { display: block; text-wrap: balance; }
html body .pk-page .pk-mock { background: #fff; border: 0; border-radius: 22px; box-shadow: var(--v6-card-shadow); }
html body .pk-page .pk-version { border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08); }
html body .pk-page .pk-version-current { box-shadow: inset 0 0 0 1.5px #006bcb; }
html body .pk-page .pk-version-stroke { background: #006bcb; }
html body .pk-page .pk-paper { border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08), 0 8px 18px -12px rgba(16, 45, 73, .25); }
html body .pk-page .pk-share-fields > div { border-bottom-color: rgba(16, 45, 73, .08); }

/* ---------------------------------------------------------------- 4. #grid — three cards around each document */
html body .pk-page .pk-feature { border-top-color: rgba(16, 45, 73, .1); }
html body .pk-page .pk-feature > .icon { color: #006bcb; }
html body .pk-page .pk-feature > p { font-size: 14.5px; line-height: 1.6; color: #3f5470; }
html body .pk-page .pk-feature > .pk-link { display: inline-block; margin-top: 14px; }
html body .pk-page .pk-check-feature > p { margin-top: 14px; }

/* ---------------------------------------------------------------- 5. #closing — full-bleed blue, straight into the footer */
html body .pk-page > #closing.pk-closing-section { background: #2a64a0; padding: 112px 0 96px !important; }
html body .pk-page > #closing.pk-closing-section > .pk-wrap { max-width: 1160px; }
html body .pk-page #closing .cta-gradient { padding: 0 !important; background: transparent; box-shadow: none; grid-template-columns: minmax(0, 1fr); }
/* the v5 corner mark is already blank in v6 (theme.css); drop its empty 240px column so the copy gets the width */
html body .pk-page #closing .cta-gradient::after { content: none; }
/* theme.css centres the inner box with margin auto; inside v5's grid that shrinks it to its text — keep it full width */
html body .pk-page #closing .cta-gradient-inner { max-width: none; margin: 0; }
html body .pk-page #closing .eyebrow { display: flex; align-items: center; margin-bottom: 2px; color: #d6eeff; }
html body .pk-page #closing .eyebrow::before {
  content: ""; flex: none; width: 3px; height: 13px; margin-right: 10px; border-radius: 2px;
  background: #ff762b; transform: skewX(-14deg) translateY(1px);
}
html body .pk-page #closing h2.kd-h2 { padding-left: 0; }
html body .pk-page #closing h2.kd-h2::before { content: none; }

/* ---------------------------------------------------------------- tablet and phone */
@media (max-width: 800px) {
  html body .pk-page .pk-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
/* three cards stay one row down to the phone (v5 drops to two columns at 800px, which orphaned the third) */
@media (min-width: 601px) and (max-width: 800px) {
  html body .pk-page .pk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
}
@media (max-width: 600px) {
  html body .pk-page > #hero.pk-hero { padding: 124px 0 48px !important; }
  html body .pk-page .pk-hero .eyebrow { font-size: 11.5px; letter-spacing: .13em; line-height: 1.3; }
  html body .pk-page .pk-hero h1 { font-size: clamp(36px, 9.8vw, 46px); }
  html body .pk-page .pk-hero h1 .kd-rule { width: 88px; margin: 14px 0 16px; }
  html body .pk-page .pk-lead { font-size: 18px; margin-top: 18px; }
  html body .pk-page .pk-actions { margin-top: 24px; gap: 10px; }
  html body .pk-page .pk-hero .btn-ghost { width: 100%; justify-content: center; }
  html body .pk-page .pk-tab-panel { border-radius: 22px; }
  html body .pk-page > #hero + #tabs { padding-top: 112px; background: linear-gradient(180deg, #2a64a0 0, rgba(42, 100, 160, 0) 100px); }
  /* v5 dropped the left indent on the sealed-copies card (it had no icon); it has one now, like the other two */
  html body .pk-page .pk-grid .pk-check-feature { padding-left: 42px; }
  html body .pk-page > #closing.pk-closing-section { padding: 88px 0 72px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body .pk-page .pk-tabs .chip { transition: none; }
}

/* ---------------------------------------------------------------- SEO wording pass (27 Sep 2026) */
/* the checklist answer under the #tabs heading: a reading-width paragraph, left-aligned, centred as a block */
html body .pk-page #tabs .pk-heading > p {
  max-width: 780px; margin: 20px auto 0; text-align: left;
  font-size: 16.5px; line-height: 1.65; color: #3f5470;
}
/* links written into sentences read as links: the one link blue, underlined */
html body .pk-page :is(.pk-step-copy, .pk-feature) > p a { color: #006bcb; text-decoration: underline; text-decoration-color: rgba(0, 107, 203, .3); text-underline-offset: 3px; }
html body .pk-page :is(.pk-step-copy, .pk-feature) > p a:hover { text-decoration-color: currentColor; }
/* the closing's text link to KuduDoc for business, on the blue */
html body .pk-page #closing .cta-copy p a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .55); text-underline-offset: 3px; }
html body .pk-page #closing .cta-copy p a:hover { text-decoration-color: #fff; }

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

/* review (27 Sep 2026): the company file is drawn as the product (the capture it replaces showed the app's
   old sidebar labels) */
html body .pk-lib { margin: 0; }
html body .pk-lib .frame { border: 0; border-radius: 16px; box-shadow: 0 0 0 1px rgba(16, 45, 73, .08), 0 2px 4px rgba(6, 22, 42, .06), 0 24px 56px -22px rgba(6, 22, 42, .34); }