/* Packages, round 19 (Nov 7, 2026): the $1,000 Practice Needs Assessment model. Previous page: archive/pre-assessment-packages_2026-11-07/ */
@media (min-width: 1000px) { .pk.pk--two { grid-template-columns: 1.1fr 1fr; } }
/* Nov 10 (Edd): the white button blended in, so it uses the site's terracotta booking color */
.pk__line .pk__btn { align-self: flex-start; margin-top: 24px; background: var(--terracotta); color: #fff; }
.pk__line .pk__btn:hover { background: var(--terracotta-hover); }
.pk__line .pk__list strong { font-weight: 700; }



/* Round 30 (Nov 11, Edd picked C): the $1,000 assessment at the center, the route line splits to Launch and Repair and rejoins at Ongoing. Previous version: archive/pre-round30-packages-c_2026-11-11/ */
.pkd { --gold: #C9A24A; --cream: #F4F1E8; --ink: #1E392F; --muted: #4E5F55; position: relative; isolation: isolate; overflow: hidden; }
.pkd ul { list-style: none; margin: 0; padding: 0; }
.pkd .chev { width: 8px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* ============ C. The assessment at the center: the route splits and rejoins ============ */
.pkx { background: #F4F6F2; color: var(--ink); padding-block: calc(var(--bar-h, 72px) + 56px) 96px; }
.pkx__head { max-width: 40rem; margin-inline: auto; text-align: center; }
.pkx__h1 { margin: 0; font: 760 clamp(2.75rem, 6vw, 4.5rem)/1 var(--wayfinding); letter-spacing: -0.03em; }
.pkx__lede { margin: 16px auto 0; color: var(--muted); font-size: 1.125rem; line-height: 1.55; }
.pkx__map { position: relative; max-width: 1080px; margin: 48px auto 0; }
.pkx__doc { position: relative; z-index: 1; width: min(100%, 420px); margin: 0 auto; padding: 22px 24px 20px; border-radius: 18px; background: #fff; box-shadow: 0 24px 60px -36px rgba(10, 25, 18, 0.5), 0 0 0 1px rgba(33, 61, 51, 0.08); display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; }
.pkx__seal { grid-row: span 2; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 760 1.05rem/1 var(--wayfinding); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--gold); }
.pkx__doc b { font: 700 1.25rem/1.15 var(--wayfinding); }
.pkx__doc span { color: var(--muted); font-size: 0.9375rem; }
.pkx__route { display: none; }
.pkx__grid { display: grid; gap: 22px; margin-top: 28px; }
.pkx__card { position: relative; z-index: 1; background: #fff; border-radius: 26px; padding: 0 0 30px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 70px -44px rgba(10, 25, 18, 0.5), 0 0 0 1px rgba(33, 61, 51, 0.08); }
.pkx__art { background: #F4F1E8; display: flex; align-items: flex-end; justify-content: center; height: 200px; overflow: hidden; }
.pkx__art img { width: 230px; height: 230px; object-fit: cover; transform: translateY(18px); }
.pkx__in { padding: 26px 30px 0; display: flex; flex-direction: column; flex: 1; }
.pkx__for { font-size: 1rem; color: var(--muted); }
.pkx__name { margin: 4px 0 0; font: 760 clamp(2.5rem, 4.4vw, 3.25rem)/1 var(--wayfinding); letter-spacing: -0.03em; }
.pkx__list { margin-top: 20px !important; display: grid; gap: 12px; }
.pkx__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.0625rem; line-height: 1.4; }
.pkx__list li::before { content: ""; flex: none; margin-top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.4L13 6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.pkx__cta { margin-top: auto; padding-top: 26px; }
.pkx__cta a { display: inline-flex; align-items: center; gap: 12px; padding: 15px 22px; border-radius: 12px; background: var(--terracotta); color: #fff; font: 600 1rem/1 var(--wayfinding); text-decoration: none; }
.pkx__wide { margin-top: 22px; position: relative; z-index: 1; background: var(--ink); color: #fff; border-radius: 26px; padding: 32px 30px; display: grid; gap: 22px; }
.pkx__wide .pkx__for { color: #C9D6C4; }
.pkx__wide .pkx__list li { font-size: 1rem; }
.pkx__wide .pkx__list li::before { background-color: var(--sage); }
@media (min-width: 860px) {
  .pkx__route { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
  .pkx__route path { fill: none; stroke: var(--sage); stroke-width: 10; stroke-linecap: round; }
  .pkx__route circle { fill: #F4F6F2; stroke: var(--ink); stroke-width: 5; }
  .pkx__grid { grid-template-columns: 1fr 1fr; gap: 120px; margin-top: 64px; }
  .pkx__wide { margin-top: 64px; grid-template-columns: 0.75fr 1.25fr; align-items: center; padding: 40px 44px; gap: 40px; }
  .pkx__wide .pkx__list { margin-top: 0 !important; grid-template-columns: 1fr 1fr; column-gap: 28px; }
}
.pkx__doc .pkx__seal { color: #fff; font-size: 1.05rem; }
.pkx__art { height: 220px; }
.pkx__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; transform: none; }

/* Round 31 (Nov 11, Edd: "roll it live"): motion for the Packages map. Previous version: archive/pre-round31-packages-motion_2026-11-11/. Hidden start states only apply once the script adds .pkm,
   so without JS (or with reduced motion) the page shows its finished state. */
.pkx__route .rt-track { fill: none; stroke: #DCE6D3; stroke-width: 10; stroke-linecap: round; }
.pkx__route .rt-draw { fill: none; stroke: var(--sage); stroke-width: 10; stroke-linecap: round; stroke-dasharray: calc(var(--len) * 1px) 99999px; transition: stroke 300ms ease, opacity 300ms ease; }
.pkx__route .rt-flow { fill: none; stroke: #F6E7B8; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 54px 99999px; stroke-dashoffset: 54px; opacity: 0; transition: opacity 300ms ease; }
.pkx__route .rt-knot { fill: #F4F6F2; stroke: var(--ink); stroke-width: 5; }
.pkx__seal { position: relative; font-variant-numeric: tabular-nums; }
.pkx__seal::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; pointer-events: none; }
.pkx__map:not(.pkm) :is(.pkx__card, .pkx__wide, .pkx__doc), .pkm :is(.pkx__card, .pkx__wide, .pkx__doc).is-in { transition: transform 420ms cubic-bezier(.2, .7, .2, 1), opacity 420ms ease, box-shadow 420ms ease, filter 420ms ease; }
.pkx__card.is-in .pkx__art img, .pkx__map:not(.pkm) .pkx__art img { transition: transform 900ms cubic-bezier(.2, .7, .2, 1); }

/* ---- start states (JS ran, not in view yet) ---- */
.pkm .pkx__doc:not(.is-in) { opacity: 0; translate: 0 18px; scale: 0.94; }
.pkm:not(.is-in) .rt-draw { stroke-dashoffset: calc(var(--len) * 1px); }
.pkm:not(.is-in) .rt-knot { scale: 0; }
.pkm .pkx__card:not(.is-in), .pkm .pkx__wide:not(.is-in) { opacity: 0; translate: 0 34px; }
.pkm:is(.is-in) .pkx__card, .pkm:is(.is-in) .pkx__wide { opacity: 1; translate: 0 0; }
.pkm .pkx__card:not(.is-in) .pkx__art img { transform: scale(1.12); }
.pkm .pkx__card:not(.is-in) .pkx__list li, .pkm .pkx__wide:not(.is-in) .pkx__list li { opacity: 0; translate: -8px 0; }
.pkm .pkx__card:not(.is-in) .pkx__list li::before, .pkm .pkx__wide:not(.is-in) .pkx__list li::before { scale: 0; }
.pkm.is-in .pkx__card .pkx__art img { transform: scale(1); }
.pkm.is-in .pkx__list li { opacity: 1; translate: 0 0; }
.pkm.is-in .pkx__list li::before { scale: 1; }

/* ---- the entrance ---- */
.pkm .pkx__doc.is-in { transition: opacity 700ms ease, translate 800ms cubic-bezier(.2, .7, .2, 1), scale 800ms cubic-bezier(.2, .7, .2, 1.3), box-shadow 420ms ease; }
.pkm .pkx__card.is-in, .pkm .pkx__wide.is-in { transition: opacity 700ms ease, translate 900ms cubic-bezier(.2, .7, .2, 1), transform 420ms cubic-bezier(.2, .7, .2, 1), box-shadow 420ms ease, filter 420ms ease; }
.pkm .is-in .pkx__list li { transition: opacity 500ms ease, translate 500ms cubic-bezier(.2, .7, .2, 1); }
.pkm .is-in .pkx__list li::before { transition: scale 420ms cubic-bezier(.3, 1.6, .5, 1); }
.pkm .pkx__doc.is-in .pkx__seal::after, .pkm.is-in .pkx__seal::after { animation: pk-stamp 1100ms ease-out 250ms 1 both; }
@keyframes pk-stamp { 0% { opacity: 0.9; scale: 1; } 100% { opacity: 0; scale: 1.7; } }

@media (min-width: 860px) {
  .pkm.is-in .rt-draw { transition: stroke-dashoffset 900ms cubic-bezier(.55, 0, .25, 1), stroke 300ms ease, opacity 300ms ease; }
  .pkm.is-in .rt-draw--a { transition-delay: 550ms, 0s, 0s; }
  .pkm.is-in .rt-draw--b { transition-duration: 550ms, 300ms, 300ms; transition-delay: 1900ms, 0s, 0s; }
  .pkm.is-in .rt-knot { transition: scale 500ms cubic-bezier(.3, 1.6, .5, 1) 450ms; transform-origin: center; transform-box: fill-box; }
  .pkm.is-in .pkx__card { transition-delay: 1100ms, 1100ms, 0s, 0s, 0s; }
  .pkm.is-in .pkx__card + .pkx__card { transition-delay: 1250ms, 1250ms, 0s, 0s, 0s; }
  .pkm.is-in .pkx__card .pkx__art img { transition-delay: 1100ms; transition-duration: 1400ms; }
  .pkm.is-in .pkx__card li { transition-delay: calc(1500ms + var(--i, 0) * 110ms); }
  .pkm.is-in .pkx__card li::before { transition-delay: calc(1560ms + var(--i, 0) * 110ms); }
  .pkm.is-in .pkx__wide { transition-delay: 2250ms, 2250ms, 0s, 0s, 0s; }
  .pkm.is-in .pkx__wide li { transition-delay: calc(2550ms + var(--i, 0) * 70ms); }
  .pkm.is-in .pkx__wide li::before { transition-delay: calc(2600ms + var(--i, 0) * 70ms); }
  /* after the entrance, a soft light keeps travelling the route */
  .pkm.is-in .rt-flow { opacity: 0.9; animation: pk-flow 5.5s cubic-bezier(.45, 0, .3, 1) 3.2s infinite; }
  .pkm.is-in .rt-flow[data-leg="repair"] { animation-delay: 4.6s; }
  @keyframes pk-flow { 0% { stroke-dashoffset: 54px; } 60%, 100% { stroke-dashoffset: calc(var(--len) * -1px); } }

  /* ---- hover or focus a package: its path lights up ---- */
  .pkx__map[data-focus] .rt-draw { opacity: 0.28; }
  .pkx__map[data-focus="launch"] .rt-draw[data-leg="launch"], .pkx__map[data-focus="repair"] .rt-draw[data-leg="repair"] { opacity: 1; stroke: #5E7A50; }
  .pkx__map[data-focus] .rt-flow { opacity: 0; }
  .pkx__map[data-focus="launch"] .rt-flow[data-leg="launch"], .pkx__map[data-focus="repair"] .rt-flow[data-leg="repair"] { opacity: 1; animation: pk-flow 2.2s cubic-bezier(.45, 0, .3, 1) 0s infinite; }
  .pkx__map[data-focus] .pkx__card { opacity: 0.72; filter: saturate(0.75); }
  .pkx__map[data-focus="launch"] #launch, .pkx__map[data-focus="repair"] #repair { opacity: 1; filter: none; transform: translateY(-8px); box-shadow: 0 46px 90px -46px rgba(10, 25, 18, 0.6), 0 0 0 1px rgba(33, 61, 51, 0.1); }
  .pkx__map[data-focus="launch"] #launch .pkx__art img, .pkx__map[data-focus="repair"] #repair .pkx__art img { transform: scale(1.05); }
  .pkx__map[data-focus] .pkx__doc { box-shadow: 0 24px 60px -30px rgba(10, 25, 18, 0.55), 0 0 0 1px rgba(201, 162, 74, 0.5); }
}
@media (max-width: 859px) {
  .pkm .pkx__card.is-in li, .pkm .pkx__wide.is-in li { opacity: 1; translate: 0 0; transition-delay: calc(250ms + var(--i, 0) * 90ms); }
  .pkm .pkx__card.is-in li::before, .pkm .pkx__wide.is-in li::before { scale: 1; transition-delay: calc(300ms + var(--i, 0) * 90ms); }
  .pkm .pkx__card.is-in .pkx__art img { transform: scale(1); }
}
/* once the entrance is over, hover reacts right away */
.pkm.is-done .pkx__card, .pkm.is-done .pkx__wide, .pkm.is-done .pkx__doc { transition-delay: 0s !important; }
.pkx__card:focus-within { outline: none; }
@media (prefers-reduced-motion: reduce) { .pkx__route .rt-flow { display: none; } }