:root{--c-0f7a55:#0F7A55;--c-122030-rgb:18 32 48;--c-12344e-rgb:18 52 78;--c-14191f:#14191F;--c-17a673-rgb:23 166 115;--c-17a673:rgb(var(--c-17a673-rgb));--c-3f4a56:#3F4A56;--c-5f6a76:#5F6A76;--c-6b7682:#6B7682;--c-a6b0ba:#A6B0BA;--c-c0435c-rgb:192 67 92;--c-d9e1e8:#D9E1E8;--c-e7ecf1:#E7ECF1;--c-e9eff4:#E9EFF4;--c-edfaf4:#EDFAF4;--c-eef2f6:#EEF2F6;--c-f2f6f9:#F2F6F9;--c-f5f9fb:#F5F9FB;--c-f7fafc-rgb:247 250 252;--c-f7fafc:rgb(var(--c-f7fafc-rgb));--sh-14cfa4:0 0 0 0 rgb(var(--c-17a673-rgb)/.5);--sh-3ca856:0 22px 48px -44px rgb(var(--c-122030-rgb)/.5);--sh-5612c9:0 30px 60px -40px rgb(var(--c-c0435c-rgb)/.55);--sh-63e527:0 30px 62px -44px rgb(var(--c-12344e-rgb)/.65),inset 0 1.5px 0 var(--surface);--sh-7aba34:0 0 0 7px rgb(var(--c-17a673-rgb)/0);--sh-dd7d27:0 40px 84px -60px rgb(var(--c-122030-rgb)/.6);--sh-ecb6d8:0 18px 36px -20px rgb(var(--c-c0435c-rgb)/.95);--ease-pk:cubic-bezier(.22,.8,.3,1)}
/* packages.css - the rail and the detail panel.
 *
 * SOURCE FILE. gen_packages.py writes assets/css/packages.<hash>.css from
 * this and only the packages page links it. Do not edit the built file.
 *
 * WHY ITS OWN STEM. These rules belong to one page. build/style.css is the
 * `style` stem and FORTY pages carry it - the 31 test pages, the 4 condition
 * pages, contact, for-corporates, preparation and this one. Putting a rail,
 * a detail panel and seven keyframes in there would charge all forty for a
 * component thirty-nine of them cannot render. verify.py refuses a .pk rule
 * in style.css for that reason.
 *
 * PORTED FROM docs/packages-redesign/packages-slider-detail.html. Three
 * changes and no others: the brand is #C3455A (ours) rather than #c0435c,
 * its deep shade #A93348, and the mono face is IBM Plex Mono because that is
 * the one this site loads. The reference's :root tokens are scoped to
 * .pk-page here so they travel with the component - a :root rule carries no
 * class, so the sheet partition could not move it and would have left the
 * component's own palette behind in the shared sheet.
 *
 * ONE CLASS IS RENAMED FROM THE REFERENCE. Its CTA row is .pk-cta and
 * THE HOMEPAGE ALREADY OWNS THAT NAME - its packages slider has carried
 * a .pk-cta since it was built. The moment this page shipped the same
 * class, the homepage's rule stopped being homepage-only and fell into
 * site.css, which all 58 pages carry; and the two rules would have
 * applied to each other's markup. Ours is .pk-ctarow.
 *
 * The homepage's other package classes are UNHYPHENATED - pkc, pkbg,
 * pkslide, pkdots - so nothing else in this file collides. verify.py
 * asserts that, because the next class either of them adds is where
 * this would happen again.
 */
.pk-page{background:linear-gradient(180deg,var(--c-f7fafc) 0%,var(--c-f2f6f9) 40%,var(--c-f2f6f9) 100%);padding:54px 0 84px}
  .pk-wrap{max-width:1240px;margin:0 auto;padding:0 28px;display:flex;flex-direction:column;gap:24px}
  .pk-wrap--btm{gap:22px}

  /* header */
  .pk-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px}
  .pk-head-l{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:11px}
  .pk-rule{width:34px;height:4px;border-radius:var(--r-sm);background:var(--action);transform-origin:left;animation:pk-line 620ms var(--ease-pk) 150ms both}
  .pk-page h1{margin:0;line-height:1.04;font-weight:800;letter-spacing:-.035em}
  .pk-lede{margin:0;max-width:470px;font-size:15.5px;line-height:1.55;color:var(--c-5f6a76);text-wrap:pretty}
  .pk-nav{display:flex;align-items:center;gap:10px}
  .pk-centre{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--c-e7ecf1);font-size:13.5px;font-weight:600;color:var(--c-5f6a76);min-width:0}
  .pk-centre-t{min-width:0;text-wrap:balance}.pk-centre b{white-space:nowrap}
  .pk-dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--c-17a673);animation:pk-dot 2.4s ease-out infinite}
  .pk-nav button{width:46px;height:46px;flex:none;border-radius:var(--r-md);border:1.5px solid var(--c-e7ecf1);background:var(--surface);color:var(--c-14191f);font-size:17px;cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s}
  .pk-nav button:hover{background:var(--c-14191f);color:var(--surface);border-color:var(--c-14191f)}

  /* rail */
  .pk-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:22px 28px 20px;animation:pk-rise 620ms var(--ease-pk) 80ms both}
  .pk-rail::-webkit-scrollbar{display:none}
  .pk-slide{position:relative;flex:0 0 min(268px,74%);scroll-snap-align:center;display:flex;flex-direction:column;gap:14px;padding:14px;border-radius:var(--r-lg);cursor:pointer;text-align:left;background:var(--surface);border:1px solid var(--c-e7ecf1);box-shadow:var(--sh-3ca856);transition:transform 360ms var(--ease-pk),box-shadow 360ms ease,border-color 260ms ease}
  .pk-slide:hover{transform:translateY(-5px)}
  .pk-slide[aria-pressed="true"]{border-color:var(--action);box-shadow:var(--sh-5612c9)}
  .pk-frame{position:relative;display:block;height:142px;overflow:hidden;border-radius:var(--r-lg);background:var(--c-e9eff4)}
  .pk-shot{display:block;width:100%;height:100%;background-size:cover;background-position:78% center;background-repeat:no-repeat;transition:transform 620ms var(--ease-pk)}
  .pk-slide:hover .pk-shot{transform:scale(1.05)}
  .pk-scrim{position:absolute;inset:0;background:linear-gradient(190deg,rgb(var(--surface-rgb)/0) 30%,rgb(var(--surface-rgb)/.55) 100%)}
  .pk-badge{position:absolute;left:12px;top:12px;font-size:var(--fs-min);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--action);background:rgb(var(--surface-rgb)/.94);border-radius:var(--r-sm);padding:6px 9px}
  .pk-body{display:flex;flex-direction:column;gap:7px;padding:4px 2px 0}
  .pk-meta{font-family:var(--font-body);font-size:var(--fs-min);letter-spacing:.08em;color:var(--c-6b7682)}
  .pk-name{font-size:17px;line-height:1.2;font-weight:800;letter-spacing:-.026em;text-wrap:pretty}
  .pk-price{display:flex;align-items:baseline;gap:8px}
  .pk-price b{font-size:21px;font-weight:800;letter-spacing:-.028em}
  .pk-price s{font-size:13px;font-weight:600;color:var(--c-a6b0ba)}
  .pk-underline{position:absolute;left:14px;right:14px;bottom:8px;height:3px;border-radius:var(--r-sm);background:var(--action);transform-origin:left;transform:scaleX(0);transition:transform 380ms cubic-bezier(.22,.9,.25,1)}
  .pk-slide[aria-pressed="true"] .pk-underline{transform:scaleX(1)}

  /* dots */
  .pk-dots-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
  .pk-dots{display:flex;align-items:center;gap:0}
  .pk-dots button{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
  .pk-dots button::before{content:"";width:9px;height:9px;border-radius:var(--r-pill);background:var(--c-d9e1e8);transition:width 300ms cubic-bezier(.22,.9,.25,1),background .3s}
  .pk-dots button[aria-current="true"]::before{width:30px;background:var(--c-14191f)}
  /* thirteen 44px dots do not fit a phone: the counter and the arrows carry it there */
  @media(max-width:620px){.pk-dots{display:none}}
  .pk-counter{font-family:var(--font-body);font-size:var(--fs-min);letter-spacing:.08em;color:var(--c-6b7682);font-variant-numeric:tabular-nums}

  /* detail panel */
  .pk-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--c-e7ecf1);box-shadow:var(--sh-dd7d27);animation:pk-rise 620ms var(--ease-pk) 140ms both}
  .pk-detail{display:flex;flex-direction:column;gap:22px;padding:40px 40px 38px;min-width:0}
  .pk-detail-head{display:flex;flex-direction:column;gap:10px}
  .pk-eyebrow{font-family:var(--font-body);color:var(--c-6b7682)}
  .pk-detail h2{margin:0;line-height:1.04;font-weight:800;letter-spacing:-.034em;text-wrap:pretty}
  .pk-money{display:flex;flex-direction:column;gap:8px}
  .pk-money-row{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
  .pk-money-row b{font-size:40px;font-weight:800;letter-spacing:-.032em}
  .pk-money-row s{font-size:18px;font-weight:600;color:var(--c-a6b0ba)}
  .pk-save{align-self:flex-start;font-size:13.5px;font-weight:700;color:var(--c-0f7a55);background:var(--c-edfaf4);border-radius:var(--r-sm);padding:8px 12px}
  .pk-note{font-size:14px;line-height:1.55;color:var(--c-5f6a76);text-wrap:pretty}
  .pk-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
  .pk-fact{display:flex;flex-direction:column;gap:4px;padding:13px 14px;border-radius:var(--r-md);background:var(--c-f5f9fb)}
  .pk-fact-k{font-size:var(--fs-min);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c-6b7682)}
  .pk-fact-v{font-size:14.5px;font-weight:700;letter-spacing:-.015em}
  .pk-tests{display:flex;flex-direction:column;gap:16px;padding-top:20px;border-top:1px solid var(--c-eef2f6)}
  .pk-tests-cap{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-6b7682)}
  .pk-group{display:flex;flex-direction:column;gap:9px}
  .pk-group-t{font-size:var(--fs-min);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--action)}
  .pk-chips{display:flex;flex-wrap:wrap;gap:6px}
  .pk-chip{font-size:12.5px;font-weight:600;color:var(--c-3f4a56);background:var(--c-f5f9fb);border:1px solid var(--c-e7ecf1);border-radius:var(--r-sm);padding:8px 12px}
  .pk-ctarow{display:flex;flex-wrap:wrap;align-items:center;gap:11px}
  .pk-filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .pk-fchip[aria-pressed="true"],.pk-fchip[aria-pressed="true"]:hover{background:var(--ink);border-color:var(--ink);color:var(--surface)}
  .pk-slide[hidden]{display:none}
  .pk-ctarow>*{flex:1 1 calc((400px - 100%) * 999)}
  .pk-btn{display:inline-flex}
  .pk-btn-ghost{display:inline-flex}
  .pk-arrow{display:inline-block;transition:transform 260ms var(--ease-pk)}
  .pk-btn:hover .pk-arrow{transform:translateX(5px)}

  /* hero */
  .pk-hero{position:relative;min-height:460px;overflow:hidden;background:var(--c-e9eff4)}
  .pk-hero-img{position:absolute;inset:0;display:block;background-size:cover;background-position:80% center;background-repeat:no-repeat}
  .pk-hero-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(200deg,rgb(var(--surface-rgb)/0) 32%,rgb(var(--c-f7fafc-rgb)/.72) 100%)}
  .pk-glass{position:absolute;left:26px;right:26px;bottom:26px;display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--r-lg);
    background:linear-gradient(150deg,rgb(var(--surface-rgb)/.78) 0%,rgb(var(--surface-rgb)/.56) 100%);
    backdrop-filter:blur(30px) saturate(1.8) brightness(1.06);-webkit-backdrop-filter:blur(30px) saturate(1.8) brightness(1.06);
    border:1px solid rgb(var(--surface-rgb)/.95);
    box-shadow:var(--sh-63e527)}
  @supports not (backdrop-filter: blur(1px)){ .pk-glass{background:rgb(var(--surface-rgb)/.93)} }
  .pk-glass-dot{flex:0 0 auto;width:9px;height:9px;border-radius:var(--r-pill);background:var(--c-17a673);animation:pk-dot 2.4s ease-out infinite}
  .pk-glass-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
  .pk-glass-txt b{font-size:14.5px;font-weight:800;letter-spacing:-.016em}
  .pk-glass-txt span{font-size:13px;font-weight:600;color:var(--c-5f6a76)}

  /* stagger — two alternating sets so re-selection restarts the animation */
  .pk-s1{animation:pk-step 480ms var(--ease-pk) both}
  .pk-s2{animation:pk-step 480ms var(--ease-pk) 80ms both}
  .pk-s3{animation:pk-step 480ms var(--ease-pk) 160ms both}
  .pk-s4{animation:pk-step 480ms var(--ease-pk) 240ms both}
  .pk-t1{animation:pk-step2 480ms var(--ease-pk) both}
  .pk-t2{animation:pk-step2 480ms var(--ease-pk) 80ms both}
  .pk-t3{animation:pk-step2 480ms var(--ease-pk) 160ms both}
  .pk-t4{animation:pk-step2 480ms var(--ease-pk) 240ms both}
  .pk-zoom{animation:pk-zoom 640ms var(--ease-pk) both}
  .pk-zoom2{animation:pk-zoom2 640ms var(--ease-pk) both}

  @keyframes pk-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes pk-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes pk-dot{0%,100%{box-shadow:var(--sh-14cfa4)}70%{box-shadow:var(--sh-7aba34)}}
  @keyframes pk-step{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes pk-step2{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes pk-zoom{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
  @keyframes pk-zoom2{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}

  @media (max-width:768px){
    .pk-detail{padding:30px 26px 28px}
    .pk-hero{min-height:340px}
  }
  /* THE WHOLE BANNER ON A PHONE (Phase 4e). The banners are 2.8:1 and a
     330x340 box showed a third of one - half a tube, one of the two people.
     Below 620 the image takes the banner's own shape and the glass card moves
     under it, so nothing is cropped and nothing sits over the subject. */
  @media(max-width:620px){
    .pk-hero{min-height:0;display:flex;flex-direction:column;gap:12px;overflow:visible;background:none}
    .pk-hero-img{position:relative;inset:auto;aspect-ratio:1400/500;border-radius:var(--r-lg);background-position:center}
    .pk-hero-scrim{display:none}
    .pk-glass{position:relative;left:auto;right:auto;bottom:auto}
  }
  @media (prefers-reduced-motion: reduce){
    .pk-rail,.pk-panel,.pk-rule,.pk-dot,.pk-glass-dot,
    .pk-s1,.pk-s2,.pk-s3,.pk-s4,.pk-t1,.pk-t2,.pk-t3,.pk-t4,
    .pk-zoom,.pk-zoom2{animation:none!important;opacity:1!important;transform:none!important}
    .pk-slide:hover{transform:none}
    .pk-rail{scroll-behavior:auto}
  }
/* 1b9dbf3's ghost button colours, restored 2026-11-02 */
.btn.pk-btn,.btn.pk-btn:hover{box-shadow:var(--sh-ecb6d8)}
.btn.pk-btn-ghost{background:transparent;border-color:var(--c-e7ecf1);color:var(--c-14191f)}
.btn.pk-btn-ghost:hover{background:transparent;border-color:var(--c-14191f);color:var(--c-14191f)}