/* ==== SHARED TOKENS + ACCESSIBILITY (all breakpoints) ==== */
:root {
  --ph-cyan-600: #0a7fa8;      /* buttons/links on white, white text 4.5:1+ */
  --ph-cyan-700: #086a8d;      /* hover */
  --ph-blue-600: #0a6fb8;      /* eyebrows, text links on white */
  --ph-text-muted: #5b6b80;    /* secondary text on white */
  --ph-placeholder: #64748b;   /* input placeholder */
  --ph-focus: #0b3d73;
  --ph-space-1: 4px; --ph-space-2: 8px; --ph-space-3: 12px; --ph-space-4: 16px; --ph-space-6: 24px; --ph-space-8: 32px;
  --ph-hit: 44px;
  --ph-h2: clamp(32px, 2.8vw, 40px);   /* one size for every section heading */
  --ph-eyebrow: 13px;
  --ph-lede: 17px;
  --ph-card-title: 19px;
  --ph-card-body: 16px;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--ph-focus); outline-offset: 2px; border-radius: 6px;
}
.pf a:focus-visible, .dk-cta a:focus-visible, .dk-trustbar a:focus-visible { outline-color: #8fd8f5; }
.dk-searchpop__form:focus-within, .dk-searchbar:focus-within, .ph-search:focus-within {
  outline: 3px solid var(--ph-focus); outline-offset: 2px;
}
.dk-searchpop__form input:focus-visible, .dk-searchbar input:focus-visible, .ph-search input:focus-visible { outline: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   ProHealth desktop header + homepage top (>= 901px)
   Source of truth: ProHealth desktop mockup (Sept 2026)
   Prefix: dk-*   Loaded after styles.css from layouts/public.blade.php
   ========================================================================== */

@media (max-width: 900px) {
  .dk-header, .dk-hero, .dk-areas, .dk-trustbar { display: none !important; }
}

@media (min-width: 901px) {

  :root {
    --dk-navy: #0b2d5b;
    --dk-ink: #0f2f57;
    --dk-text: #1d3557;
    --dk-muted: #52627a;
    --dk-cyan: #12a8cf;
    --dk-cyan-btn: var(--ph-cyan-600);
    --dk-line: #e3ebf2;
  }

  .dk-container { width: min(calc(100% - 120px), 1400px); margin-inline: auto; }

  /* old desktop header / hero pieces are replaced */
  .desktop-header, .main-nav, .mob-overlay, .mob-drawer { display: none !important; }

  /* ======================================================================
     TRUST BAR
     ====================================================================== */
  .dk-trustbar { background: #0a457b; color: #fff; font-size: 15px; font-weight: 500; }
  .dk-trustbar__inner { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 0; }
  .dk-trustbar__item { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; padding: 0 clamp(18px, 2.9vw, 44px); }
  .dk-trustbar__item svg { width: 21px; height: 21px; fill: #7cc4ef; flex: none; }
  .dk-trustbar__item svg.is-stroke { fill: none; stroke: #7cc4ef; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
  .dk-trustbar__sep { width: 1px; height: 22px; background: rgba(255,255,255,.35); flex: none; }

  /* ======================================================================
     HEADER
     ====================================================================== */
  .site-header { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--dk-line); backdrop-filter: none; }
  .dk-header { position: relative; background: #fff; }
  .dk-header__row { height: 102px; display: flex; align-items: center; gap: 32px; }
  .dk-brand { flex: none; display: block; margin-left: -8px; }
  .dk-brand img { width: 250px; height: auto; display: block; }

  .dk-nav { flex: 1; display: flex; justify-content: center; align-items: center; gap: clamp(20px, 2.6vw, 42px); }
  .dk-nav__item { position: relative; }
  .dk-nav__link {
    display: inline-flex; align-items: center; gap: 8px; height: 102px;
    font-size: 16.5px; font-weight: 600; color: #0f2a4f; letter-spacing: -.1px; white-space: nowrap;
  }
  .dk-nav__link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
  .dk-nav__link:hover, .dk-nav__link.is-active { color: var(--dk-cyan); }
  .dk-nav__item:hover > .dk-nav__link svg, .dk-nav__item:focus-within > .dk-nav__link svg { transform: rotate(180deg); }

  .dk-drop {
    position: absolute; top: calc(100% - 14px); left: -18px; z-index: 1100;
    min-width: 290px; background: #fff; border: 1px solid var(--dk-line); border-radius: 14px;
    box-shadow: 0 24px 50px rgba(11,45,91,.14); padding: 10px;
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s, transform .16s, visibility .16s;
  }
  .dk-nav__item:hover > .dk-drop, .dk-nav__item:focus-within > .dk-drop { opacity: 1; visibility: visible; transform: none; }
  .dk-drop > a { display: block; padding: 11px 12px; border-radius: 10px; }
  .dk-drop > a:hover { background: #f1f8fc; }
  .dk-drop > a strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--dk-navy); }
  .dk-drop > a span { display: block; font-size: 12.5px; color: var(--dk-muted); margin-top: 2px; }

  .dk-nav__item--mega { position: static; }
  .dk-nav { position: static; }
  .dk-drop--mega { left: 50%; transform: translate(-50%, 6px); width: min(calc(100vw - 80px), 1180px); padding: 26px 28px 0; top: 88px; }
  .dk-nav__item--mega:hover > .dk-drop--mega, .dk-nav__item--mega:focus-within > .dk-drop--mega { transform: translate(-50%, 0); }
  .dk-mega { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
  .dk-mega__col h3, .dk-mega__col .dk-drop__title { margin: 0 0 10px; font-size: 14px; font-weight: 800; color: var(--dk-navy); }
  .dk-mega__col a { display: block; font-size: 13.5px; color: #3f5470; padding: 5px 0; }
  .dk-mega__col a:hover { color: var(--dk-cyan); }
  .dk-mega__foot {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    margin: 22px -28px 0; padding: 14px 28px; background: #f4f9fc; border-top: 1px solid var(--dk-line);
    border-radius: 0 0 14px 14px; font-size: 13px; color: var(--dk-muted);
  }
  .dk-mega__foot a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--dk-cyan); }
  .dk-mega__foot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

  .dk-tools { flex: none; display: flex; align-items: center; gap: 22px; }
  .dk-tools__sep { width: 1px; height: 38px; background: var(--dk-line); }
  .dk-tool { display: inline-flex; align-items: center; gap: 10px; color: var(--dk-navy); font-size: 14px; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; }
  .dk-tool svg { fill: var(--dk-navy); }
  .dk-tool:hover { color: var(--dk-cyan); }
  .dk-tool:hover svg { fill: var(--dk-cyan); }
  .dk-tool--search svg { width: 27px; height: 27px; fill: none; stroke: var(--dk-navy); stroke-width: 2.1; stroke-linecap: round; }
  .dk-tool--search:hover svg { fill: none; stroke: var(--dk-cyan); }
  .dk-tool--account { padding-top: 6px; }
  .dk-tool--account svg { width: 27px; height: 27px; margin-top: -8px; }
  .dk-tool--basket { flex-direction: column; gap: 2px; font-size: 13px; }
  .dk-tool__icon { position: relative; display: block; }
  .dk-tool--basket svg { width: 30px; height: 30px; }
  .dk-badge {
    position: absolute; top: -14px; right: -22px; min-width: 26px; height: 26px; padding: 0 6px;
    border-radius: 13px; background: #16a6c9; color: #fff; font-size: 13px; font-weight: 700;
    display: grid; place-items: center; box-shadow: 0 0 0 2px #fff;
  }

  /* header search popover */
  .dk-searchpop { position: absolute; left: 0; right: 0; top: 100%; z-index: 1150; background: #fff; border-top: 1px solid var(--dk-line); border-bottom: 1px solid var(--dk-line); box-shadow: 0 18px 40px rgba(11,45,91,.10); padding: 18px 0 20px; }
  .dk-searchpop[hidden] { display: none; }
  .dk-searchpop .dk-container { position: relative; max-width: 820px; }
  .dk-searchpop__form {
    display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 7px 0 20px;
    background: #fff; border: 1px solid #d9e4ee; border-radius: 999px; box-shadow: 0 8px 22px rgba(25,59,91,.07);
  }
  .dk-searchpop__form > svg { width: 22px; height: 22px; fill: none; stroke: var(--dk-cyan); stroke-width: 2.2; stroke-linecap: round; flex: none; }
  .dk-searchpop__form input, .dk-searchbar input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; height: 100%;
    font-size: 16px; color: var(--dk-ink); padding: 0;
  }
  .dk-searchpop__form input::placeholder, .dk-searchbar input::placeholder { color: var(--ph-placeholder); opacity: 1; }
  .dk-searchpop__form input::-webkit-search-cancel-button, .dk-searchbar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
  .dk-searchpop__clear, .dk-searchbar__clear { flex: none; width: 34px; height: 34px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; color: #1f2a37; }
  .dk-searchpop__clear[hidden], .dk-searchbar__clear[hidden] { display: none; }
  .dk-searchpop__clear svg, .dk-searchbar__clear svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  .dk-btn-search {
    flex: none; height: 44px; padding: 0 34px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--dk-cyan-btn); color: #fff; font-size: 16px; font-weight: 700;
    box-shadow: 0 8px 18px rgba(15,169,211,.25); transition: background .15s;
  }
  .dk-btn-search:hover { background: var(--ph-cyan-700); }
  .dk-sd { left: 0; right: 0; margin-top: 12px; max-width: 560px; margin-left: auto; }
  .dk-searchpop .dk-sd { left: 0; right: 0; max-width: 560px; margin-inline: auto; }

  /* ======================================================================
     HERO
     ====================================================================== */
  .dk-hero {
    position: relative; z-index: 5; overflow-x: clip; overflow-y: visible;
    height: clamp(470px, 32.9vw, 560px);
    background:
      radial-gradient(60% 90% at 45% 10%, rgba(210,233,252,.55) 0, rgba(210,233,252,0) 70%),
      linear-gradient(90deg, #f6f9fd 0%, #f2f7fc 45%, #e6f1fc 70%, #dcecfb 100%);
    border-bottom: 1px solid #edf2f7;
  }
  .dk-hero__photo {
    position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 736 / 504;
    container-type: inline-size;
  }
  .dk-hero__photo > img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 9%, #000 22%);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 9%, #000 22%);
  }

  /* floating cards: positioned over the photo, sized in container units so they scale with it */
  .dk-float {
    position: absolute; z-index: 2;
    display: flex; align-items: center; gap: 2.2cqw;
    height: calc(13.5% + 8px); padding: 0 2.2cqw 0 1.35cqw;
    background: rgba(255,255,255,.97); border: 1px solid rgba(255,255,255,.9);
    border-radius: 1.8cqw; box-shadow: 0 1.6cqw 4cqw rgba(11,45,91,.16);
  }
  .dk-float--1 { left: calc(46.47% - 4px); top: calc(8.53% - 4px);  width: calc(40.76% + 8px); }
  .dk-float--2 { left: calc(54.48% - 4px); top: calc(29.76% - 4px); width: calc(39.4% + 8px); }
  .dk-float--3 { left: calc(53.53% - 4px); top: calc(54.96% - 4px); width: calc(33.7% + 8px); }
  .dk-float__icon {
    flex: none; width: 8.4cqw; height: 8.4cqw; border-radius: 50%;
    background: linear-gradient(180deg, #e3f3fd, #cfe9fa); display: grid; place-items: center;
  }
  .dk-float__icon svg { width: 52%; height: 52%; }
  .dk-float__icon--photo { overflow: hidden; background: #e8eef4; }
  .dk-float__icon--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .dk-float__text { flex: 1; min-width: 0; line-height: 1.25; }
  .dk-float__text strong { display: block; font-size: 2.15cqw; font-weight: 800; color: var(--dk-navy); white-space: nowrap; }
  .dk-float__text small { display: block; font-size: max(12px, 1.72cqw); color: #4b5a70; margin-top: .3cqw; white-space: nowrap; }
  .dk-float__check { flex: none; align-self: flex-start; margin-top: 1.9cqw; width: 2.8cqw; height: 2.8cqw; }
  .dk-float__check svg { width: 100%; height: 100%; }
  .dk-float__check circle { fill: #19a9d3; }
  .dk-float__check path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

  .dk-hero__inner { position: relative; z-index: 3; height: 100%; display: flex; align-items: flex-start; padding-top: clamp(20px, 1.75vw, 32px); }
  .dk-hero__copy { padding-left: 24px; max-width: 720px; }
  .dk-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 5px 16px 5px 5px; border-radius: 999px;
    background: rgba(255,255,255,.85); border: 1px solid #e0edf3;
    font-size: 15.5px; font-weight: 500; color: #146a7f;
    box-shadow: 0 4px 14px rgba(11,45,91,.05);
  }
  .dk-eyebrow__lock { width: 30px; height: 30px; border-radius: 50%; background: #d6f5ea; display: grid; place-items: center; }
  .dk-eyebrow__lock svg { width: 15px; height: 15px; fill: #0f9a6e; }
  .dk-hero h1 {
    margin: clamp(12px, 1.05vw, 18px) 0 clamp(10px, .8vw, 13px); font-size: clamp(42px, 3.97vw, 64px); line-height: .93;
    font-weight: 800; letter-spacing: -.045em; color: var(--dk-navy);
  }
  .dk-hero h1 em { font-style: normal; color: var(--dk-cyan); }
  .dk-hero__copy > p { margin: 0; max-width: 590px; font-size: clamp(17px, 1.33vw, 20.5px); line-height: 1.28; color: var(--dk-text); font-weight: 500; }

  .dk-hero__search { position: relative; margin-top: clamp(14px, 1.3vw, 20px); max-width: 688px; }
  .dk-searchbar {
    display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 6px 0 20px;
    background: #fff; border-radius: 999px; box-shadow: 0 10px 28px rgba(25,59,91,.10); border: 1px solid #edf2f7;
  }
  .dk-searchbar.is-open { border-color: #cfdbe6; }
  .dk-searchbar__icon { width: 23px; height: 23px; fill: none; stroke: var(--dk-cyan); stroke-width: 2.2; stroke-linecap: round; flex: none; }
  .dk-hero__search .dk-sd { left: auto; right: 0; width: 520px; max-width: none; }

  .dk-hero__trust { list-style: none; margin: clamp(10px, 1.05vw, 16px) 0 0; padding: 0 0 0 8px; display: flex; gap: clamp(22px, 3.3vw, 62px); }
  .dk-hero__trust li { flex: none; display: flex; align-items: center; gap: 18px; font-size: 15px; line-height: 1.35; color: var(--dk-ink); font-weight: 500; white-space: nowrap; }
  .dk-hero__ticon {
    width: 60px; height: 60px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: #fff; box-shadow: 0 8px 20px rgba(11,45,91,.10), inset 0 0 0 1px #eef3f8;
  }
  .dk-hero__ticon svg { width: 31px; height: 31px; }

  /* ======================================================================
     BROWSE BY HEALTH AREA + ACTION CARDS
     ====================================================================== */
  .dk-areas { padding: 26px 0 36px; background: #fff; }
  .dk-areas__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .dk-areas__head h2 { margin: 0; font-size: 22.5px; font-weight: 800; letter-spacing: -.3px; color: var(--dk-navy); }
  .dk-link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ph-cyan-600); }
  .dk-link-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
  .dk-link-arrow:hover svg { transform: translateX(3px); }

  .dk-areas__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
  .dk-area {
    position: relative; overflow: hidden; isolation: isolate;
    height: 149px; border-radius: 14px; padding: 18px 0 0 22px;
    display: flex; flex-direction: column; align-items: flex-start;
    color: var(--dk-navy); box-shadow: 0 1px 0 rgba(11,45,91,.03);
    transition: transform .18s, box-shadow .18s;
  }
  .dk-area:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(11,45,91,.10); }
  .dk-area--mens    { background: #ebf6fd; }
  .dk-area--womens  { background: #fdeef1; }
  .dk-area--chronic { background: #e7f9f6; }
  .dk-area--general { background: #edecfe; }
  .dk-area--travel  { background: #fef5ed; }
  .dk-area--sexual  { background: #e5f8f4; }
  .dk-area--weight  { background: #fff0e2; }
  .dk-area--nad     { background: #f1ebff; }
  .dk-area__img {
    position: absolute; z-index: -1; top: 0; right: 0; height: 100%; width: 65%; object-fit: cover; object-position: left center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
            mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  }
  .dk-area__icon { width: 34px; height: 34px; display: grid; place-items: center; margin-left: -3px; }
  .dk-area__icon svg { width: 32px; height: 32px; }
  .dk-area strong { margin-top: 9px; font-size: 16px; line-height: 1.2; font-weight: 800; letter-spacing: -.1px; }
  .dk-area__go {
    margin-top: 9px; width: 32px; height: 32px; border-radius: 50%; background: #fff;
    display: grid; place-items: center; box-shadow: 0 4px 10px rgba(11,45,91,.08);
  }
  .dk-area__go svg { width: 16px; height: 16px; fill: none; stroke: var(--dk-navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

  .dk-actions { display: grid; grid-template-columns: 1.03fr 1fr 1.01fr; gap: 16px; margin-top: 18px; }
  .dk-action {
    position: relative; overflow: hidden; min-height: 104px; border-radius: 14px;
    display: flex; align-items: center; gap: 20px; padding: 16px 22px 16px 20px;
    transition: transform .18s, box-shadow .18s;
  }
  .dk-action:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(11,45,91,.09); }
  .dk-action::after {
    content: ""; position: absolute; inset: auto -10% -60% 20%; height: 120%; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events: none;
  }
  .dk-action--consult { background: linear-gradient(100deg, #e4f3fd 0%, #eef8fe 100%); }
  .dk-action--browse  { background: linear-gradient(100deg, #e2f6ef 0%, #edf9f5 100%); }
  .dk-action--hub     { background: linear-gradient(100deg, #eeebfc 0%, #f4f2fe 100%); }
  .dk-action__icon { position: relative; z-index: 1; flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; }
  .dk-action--consult .dk-action__icon { background: #cfeafa; }
  .dk-action--browse  .dk-action__icon { background: #c9eedf; }
  .dk-action--hub     .dk-action__icon { background: #dcd8f8; }
  .dk-action__icon svg { width: 30px; height: 30px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .dk-action--consult .dk-action__icon svg { stroke: #1597cc; }
  .dk-action--browse  .dk-action__icon svg { stroke: #11966f; }
  .dk-action--hub     .dk-action__icon svg { stroke: #3d3fb8; }
  .dk-action__text { position: relative; z-index: 1; flex: 1; min-width: 0; }
  .dk-action__text strong { display: block; font-size: 16.5px; font-weight: 800; color: var(--dk-navy); margin-bottom: 5px; }
  .dk-action__text span { display: block; font-size: 15px; line-height: 1.35; color: #3f5068; }
  .dk-action__go {
    position: relative; z-index: 1; flex: none; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.9); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(11,45,91,.07);
  }
  .dk-action__go svg { width: 18px; height: 18px; fill: none; stroke: var(--dk-navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
}

/* ---- narrower desktops / small laptops ---- */
@media (min-width: 901px) and (max-width: 1439px) {
  .dk-action__text br { display: none; }
  .dk-hero__trust { gap: 18px; padding-left: 0; }
  .dk-hero__trust li { font-size: 13.5px; gap: 10px; }
  .dk-hero__ticon { width: 46px; height: 46px; }
  .dk-hero__ticon svg { width: 25px; height: 25px; }
  .dk-hero__copy > p { max-width: 540px; }
}
@media (min-width: 901px) and (max-width: 1279px) {
  .dk-container { width: calc(100% - 64px); }
  .dk-brand img { width: 196px; }
  .dk-header__row { gap: 20px; height: 88px; }
  .dk-nav__link { height: 88px; font-size: 15px; }
  .dk-tools { gap: 14px; }
  .dk-tool--account span { display: none; }
  .dk-drop--mega { top: 76px; }
  .dk-hero__photo > img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 25%, #000 50%);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 25%, #000 50%);
  }
  .dk-float--1 { display: none; }
  .dk-hero__copy { padding-left: 0; max-width: 600px; }
  .dk-areas__grid { grid-template-columns: repeat(3, 1fr); }
  .dk-actions { grid-template-columns: 1fr; }
  .dk-trustbar { font-size: 13px; }
  .dk-trustbar__item { padding: 0 14px; gap: 8px; }
}
@media (min-width: 901px) and (max-width: 1099px) {
  .dk-float { display: none; }
  .dk-hero__photo { aspect-ratio: auto; width: 50%; }
  .dk-hero__photo > img { object-position: 70% center; }
  .dk-hero__copy { max-width: 560px; }
  .dk-nav { gap: 16px; }
  .dk-trustbar__inner > span:nth-child(5), .dk-trustbar__inner > span:nth-child(6) { display: none; }
}

/* ==========================================================================
   HOW IT WORKS banner (>= 901px). Source of truth: How it works mockup.
   All sizes are in cqw of .dk-how__wrap, so the composition (text, steps and
   the phone) scales together exactly like the mockup.
   ========================================================================== */
@media (max-width: 900px) { .dk-how { display: none !important; } }

@media (min-width: 901px) {

  .dk-how {
    background: linear-gradient(90deg, #f2fafe 0%, #eef8fe 55%, #e2effa 100%);
    border-top: 1px solid #edf3f8; border-bottom: 1px solid #edf3f8;
  }
  .dk-how__wrap { position: relative; overflow: hidden; container-type: inline-size; isolation: isolate; }

  /* background photo scene: 2352x724 padded source at 0.5 scale of a 1103px-wide mockup */
  .dk-how__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .dk-how__scene { position: absolute; left: -3.72cqw; top: -4.44cqw; width: 106.6cqw; aspect-ratio: 2352 / 724; }
  .dk-how__scene > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .dk-how__screen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .dk-how__sh { font: 800 27px/1 'Manrope', sans-serif; letter-spacing: -.8px; fill: #0b2450; }
  .dk-how__sp { font: 500 12px/1 'Manrope', sans-serif; fill: #7a8ba3; }
  .dk-how__sr { font: 700 12.5px/1 'Manrope', sans-serif; fill: #12305e; }

  /* soft white veil on the left so text always reads (matches the mockup's fade) */
  .dk-how__wrap::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(243,250,254,.97) 0%, rgba(243,250,254,.9) 46%, rgba(243,250,254,.35) 64%, rgba(243,250,254,0) 74%);
  }

  .dk-how__inner {
    position: relative; z-index: 2; min-height: 22.6cqw; padding-left: 6.6cqw;
    padding-top: max(20px, 1.95cqw); padding-bottom: max(18px, 2.1cqw);
    --how-navy: #0a1f4d;
  }

  .dk-how__eyebrow {
    margin: 0; font-size: max(12px, .82cqw); line-height: 1.2; font-weight: 800;
    letter-spacing: .13em; text-transform: uppercase; color: var(--ph-blue-600);
  }
  .dk-how h2 {
    margin: max(2px, .1cqw) 0 0; font-size: min(max(24px, 2.36cqw), 44px); line-height: 1.12;
    font-weight: 800; letter-spacing: -.035em; color: var(--how-navy);
  }
  .dk-how__sub { margin: max(3px, .25cqw) 0 0; font-size: min(max(13px, 1.09cqw), 19px); line-height: 1.35; color: #22406f; font-weight: 500; }

  .dk-how__steps {
    list-style: none; margin: max(14px, 1.2cqw) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, min(16.05cqw, 262px, calc((66.4cqw - 260px) / 3))); column-gap: 0;
  }
  .dk-step { min-width: 0; }
  .dk-step__top { display: flex; align-items: center; height: min(max(46px, 4.2cqw), 76px); }
  .dk-step__num {
    flex: none; width: min(max(22px, 2cqw), 34px); height: min(max(22px, 2cqw), 34px); border-radius: 50%;
    background: #049cd0; color: #fff; font-size: min(max(11px, .93cqw), 16px); font-weight: 800;
    display: grid; place-items: center; margin-right: min(max(10px, 1.62cqw), 28px);
    box-shadow: 0 4px 10px rgba(4,156,208,.25);
  }
  .dk-step__icon {
    flex: none; width: min(max(46px, 4.2cqw), 76px); height: min(max(46px, 4.2cqw), 76px); border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 35% 28%, #f7fcff 0%, #dbf2fb 62%, #cdeaf8 100%);
    box-shadow: 0 0 0 1px #b8def4 inset, 0 0 0 min(max(4px, .38cqw), 7px) rgba(219,242,251,.55), 0 8px 18px rgba(11,61,115,.08);
  }
  .dk-step__icon svg { width: 56%; height: 56%; }
  .dk-step__arrow { position: relative; flex: 1; min-width: 20px; height: 1.5px; margin-left: min(max(10px, 1.5cqw), 26px); margin-right: min(max(10px, 2cqw), 34px); background: #b9e3f5; }
  .dk-step__arrow::after {
    content: ""; position: absolute; right: -1px; top: 50%; width: 7px; height: 7px;
    border-top: 1.6px solid #7ac4ea; border-right: 1.6px solid #7ac4ea; transform: translateY(-50%) rotate(45deg);
  }
  .dk-step h3 {
    margin: min(max(2px, .2cqw), 4px) 0 0; padding-left: min(max(36px, 3.35cqw), 58px);
    font-size: min(max(12.5px, 1.05cqw), 18px); line-height: 1.25; font-weight: 700; letter-spacing: -.015em; color: var(--how-navy); white-space: nowrap;
  }
  .dk-step p {
    margin: min(max(1px, .1cqw), 3px) 0 0; padding-left: min(max(36px, 3.35cqw), 58px);
    font-size: min(max(12px, .78cqw), 14px); line-height: 1.45; color: #34588a; font-weight: 500; white-space: normal; text-wrap: balance; padding-right: 8px;
  }

  .dk-how__btn {
    display: inline-flex; align-items: center; gap: min(max(10px, 1cqw), 16px); margin-top: min(max(12px, .95cqw), 20px);
    height: min(max(36px, 2.7cqw), 46px); padding: 0 min(max(20px, 1.9cqw), 30px);
    border: 1.5px solid #0a2a6b; border-radius: 999px; background: rgba(255,255,255,.55);
    font-size: min(max(13px, 1cqw), 17px); font-weight: 700; color: #0a2a6b; transition: background .15s, color .15s;
  }
  .dk-how__btn svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .dk-how__btn:hover { background: #0a2a6b; color: #fff; }
}

/* below 1350px the text is allowed to wrap so it never runs into the phone */
@media (min-width: 901px) and (max-width: 1349px) {
  .dk-step h3, .dk-step p { white-space: normal; padding-right: 6px; }
  .dk-step p { text-wrap: balance; }
  .dk-step p br { display: none; }
  .dk-how__scene { top: -1.2cqw; }
}

/* small laptops: drop the phone, let the four steps use the full width */
@media (min-width: 901px) and (max-width: 1099px) {
  .dk-how__scene { display: none; }
  .dk-how__wrap::before { display: none; }
  .dk-how__inner { padding-right: 4cqw; }
  .dk-how__steps { grid-template-columns: repeat(4, 1fr); }
  .dk-step__arrow { display: none; }
  .dk-step__num { margin-right: 10px; }
}

/* ==========================================================================
   CTA banner (>= 901px). Source of truth: CTA + footer mockup (2172px ref).
   ========================================================================== */
@media (max-width: 900px) { .dk-cta { display: none !important; } }

@media (min-width: 901px) {
  .dk-cta { background: #fff; container-type: inline-size; padding-top: .85cqw; }
  .dk-cta__wrap { position: relative; overflow: hidden; height: max(17.4cqw, 300px); background: #0a3a78;
    border-radius: 1.55cqw 1.55cqw 0 0; isolation: isolate; color: #fff; }
  .dk-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; z-index: 0; }
  .dk-cta__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(8,44,102,.0) 0%, rgba(8,44,102,0) 62%, rgba(8,42,96,.55) 76%, rgba(7,38,88,.72) 100%),
      linear-gradient(180deg, rgba(4,30,72,.18) 0%, rgba(4,30,72,0) 30%); }

  .dk-cta__copy { position: absolute; z-index: 2; left: 5.7cqw; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; padding-top: 1.3cqw; }
  .dk-cta__eyebrow { margin: 0; font-size: max(12px, .86cqw); line-height: 1.2; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: #7ad3ee; }
  .dk-cta h2 { margin: max(4px, .32cqw) 0 0; font-size: max(28px, 2.72cqw); line-height: 1.08; font-weight: 800; letter-spacing: -.035em; color: #fff; }
  .dk-cta__sub { margin: max(8px, .8cqw) 0 0; font-size: max(13px, 1.12cqw); line-height: 1.42; font-weight: 400; color: rgba(255,255,255,.92); }
  .dk-cta__btn { align-self: flex-start; margin-top: max(14px, 1.15cqw); display: inline-flex; align-items: center; justify-content: center; gap: max(10px, .95cqw);
    height: max(40px, 2.85cqw); padding: 0 max(24px, 2.2cqw); border-radius: 999px; background: #fff; color: #0a2a6b; text-decoration: none;
    font-size: max(14px, 1.06cqw); font-weight: 800; box-shadow: 0 .5cqw 1.2cqw rgba(2,20,52,.28); transition: transform .15s, box-shadow .15s; }
  .dk-cta__btn:hover { transform: translateY(-1px); box-shadow: 0 .7cqw 1.5cqw rgba(2,20,52,.34); }
  .dk-cta__btn svg { width: 1.3em; height: 1.3em; fill: none; stroke: #1c83e0; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

  .dk-cta__feats { list-style: none; margin: 0; padding: 0; position: absolute; z-index: 2; left: 74.4cqw; right: 1.5cqw; top: 0; bottom: 0;
    display: flex; flex-direction: column; justify-content: center; gap: .72cqw; padding-top: 1.1cqw; }
  .dk-cta__feats li { display: flex; align-items: center; gap: 1.15cqw; }
  .dk-cta__ficon { flex: none; width: max(46px, 3.78cqw); height: max(46px, 3.78cqw); border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 30%, #0f4a95, #082f6b); box-shadow: 0 0 0 max(2px, .17cqw) #37b8ea inset, 0 0 0 max(2px, .2cqw) rgba(255,255,255,.14); }
  .dk-cta__ficon svg { width: 52%; height: 52%; }
  .dk-cta__ftxt strong { display: block; font-size: max(13px, 1.06cqw); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: #fff; white-space: nowrap; }
  .dk-cta__ftxt span { display: block; margin-top: .28cqw; font-size: max(11.5px, .92cqw); line-height: 1.25; font-weight: 400; color: rgba(255,255,255,.88); white-space: nowrap; }
}

/* small laptops: give the features a little more room */
@media (min-width: 901px) and (max-width: 1240px) {
  .dk-cta__feats { left: 68cqw; }
  .dk-cta__ftxt strong, .dk-cta__ftxt span { white-space: normal; }
  .dk-cta__shade { background: linear-gradient(90deg, rgba(8,44,102,0) 0%, rgba(8,44,102,0) 50%, rgba(8,42,96,.6) 68%, rgba(7,38,88,.8) 100%); }
}

/* ==========================================================================
   HEALTH HUB + REVIEWS (>= 901px). Source of truth: Health Hub / reviews mockup
   (2000px reference; sizes in cqw of the wrap so it scales like the mockup)
   ========================================================================== */
@media (max-width: 900px) { .dk-hub, .dk-reviews { display: none !important; } }

@media (min-width: 901px) {
  .dk-hub, .dk-reviews { background: #fff; }
  .dk-hub__wrap, .dk-reviews__wrap { container-type: inline-size; max-width: 2200px; margin: 0 auto; }
  .dk-hub { padding: 1.9vw 0 0; }
  .dk-hub__wrap { padding: 0 0 1.9cqw; }
  :where(.dk-hub, .dk-reviews) :where(h2, p) { margin: 0; }

  .dk-hub__head { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 2.9cqw 0 3.1cqw; }
  .dk-hub__eyebrow { font-size: max(12px, .78cqw); line-height: 1.2; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--ph-blue-600); }
  .dk-hub h2 { margin-top: .3cqw; font-size: max(24px, 2.36cqw); line-height: 1.12; font-weight: 800; letter-spacing: -.035em; color: #0a1f4d; }
  .dk-hub__sub { margin-top: .12cqw; font-size: max(13px, 1.2cqw); line-height: 1.35; color: #5f6f8a; font-weight: 400; }
  .dk-hub__all { display: inline-flex; align-items: center; gap: .55cqw; margin-top: 1.55cqw; font-size: max(13px, 1.1cqw); font-weight: 600; color: var(--ph-blue-600); text-decoration: none; white-space: nowrap; }
  .dk-hub__all svg, .dk-art__read svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .dk-hub__all:hover, .dk-art:hover .dk-art__read { color: #056bb0; }

  .dk-hub__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8cqw; margin: .5cqw 2.4cqw 0 2.75cqw; }
  .dk-art { display: flex; min-width: 0; height: 12.35cqw; min-height: 190px; background: #fff; border-radius: 1cqw; overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: 0 0 0 1px rgba(26,70,130,.05), 0 .35cqw 1.3cqw rgba(24,60,120,.09); transition: transform .18s, box-shadow .18s; }
  .dk-art:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(26,70,130,.07), 0 .5cqw 1.6cqw rgba(24,60,120,.14); }
  .dk-art__img { flex: none; width: 40%; position: relative; }
  .dk-art__img--empty { display: grid; place-items: center; color: #7fb9e0; background: linear-gradient(160deg, #e6f4fd, #cfe8f8); }
  .dk-art__img--empty svg { width: 34%; height: auto; }
  .dk-art__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .dk-art__body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 1cqw .7cqw .9cqw 1.4cqw; }
  .dk-art__tag { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; font-size: max(12px, .74cqw); line-height: 1; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: var(--ph-blue-600);
    background: #e6f4fd; border-radius: 999px; padding: .55cqw .65cqw; white-space: nowrap; }
  .dk-art h3 { margin: .75cqw 0 0; font-size: max(14px, 1.16cqw); line-height: 1.16; font-weight: 700; letter-spacing: -.02em; color: #0a1f4d;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dk-art p { margin: .5cqw 0 0; font-size: max(12px, .88cqw); line-height: 1.32; color: #5f6f8a; font-weight: 400;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .dk-art__read { margin-top: auto; padding-top: .35cqw; display: inline-flex; align-items: center; gap: .5cqw; font-size: max(12.5px, 1cqw); font-weight: 600; color: var(--ph-blue-600); }


  /* Reviews */
  .dk-reviews__wrap { display: grid; grid-template-columns: 31.2cqw 1fr; align-items: start; padding: .2cqw 2.5cqw 2.2cqw 3.1cqw; }
  .dk-reviews h2 { margin-top: .5cqw; font-size: max(24px, 2.2cqw); line-height: 1.12; font-weight: 800; letter-spacing: -.035em; color: #0a1f4d; white-space: nowrap; }
  .dk-reviews__rate { padding-top: 1cqw; }
  .dk-reviews__score { display: flex; align-items: center; gap: 1.5cqw; margin-top: .6cqw; }
  .dk-stars { display: inline-flex; gap: .2cqw; }
  .dk-stars svg { width: max(14px, 1.2cqw); height: max(14px, 1.2cqw); fill: #f9a800; }
  .dk-stars--lg { gap: .38cqw; } .dk-stars--lg svg { width: max(22px, 1.9cqw); height: max(22px, 1.9cqw); }
  .dk-reviews__num { display: flex; flex-direction: column; }
  .dk-reviews__num strong { font-size: max(18px, 1.55cqw); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: #0a1f4d; }
  .dk-reviews__num span { margin-top: .12cqw; font-size: max(12px, 1.05cqw); line-height: 1.2; color: #5f6f8a; }

  .dk-reviews__cards { display: grid; grid-template-columns: 19.9fr 21.25fr 20.1fr; gap: .95cqw; }
  .dk-rev { margin: 0; min-width: 0; height: 9cqw; min-height: 150px; box-sizing: border-box; display: flex; flex-direction: column; background: #fff; border-radius: 1cqw; padding: 1.05cqw 1.35cqw 1cqw;
    box-shadow: 0 0 0 1px rgba(26,70,130,.05), 0 .35cqw 1.3cqw rgba(24,60,120,.08); }
  .dk-rev blockquote { margin: .5cqw 0 0; font-size: max(12.5px, 1.09cqw); line-height: 1.16; color: #5a6a86; font-weight: 400; }
  .dk-rev figcaption { margin-top: auto; display: flex; align-items: center; gap: 1.05cqw; }
  .dk-rev figcaption strong { font-size: max(13px, 1cqw); font-weight: 800; color: #0a1f4d; letter-spacing: -.01em; }
  .dk-rev__ver { display: inline-flex; align-items: center; gap: .5cqw; font-size: max(12px, 1cqw); color: #66768f; white-space: nowrap; }
  .dk-rev__ver svg { width: max(16px, 1.3cqw); height: max(16px, 1.3cqw); flex: none; }
}

/* laptops */
@media (min-width: 901px) and (max-width: 1360px) {
  .dk-hub__cards { grid-template-columns: 1fr 1fr; gap: 14px; }
  .dk-art { height: 200px; min-height: 0; }
  .dk-art__body { padding: 16px 14px 14px 20px; }
  .dk-art__tag { font-size: 12px; padding: 7px 10px; } .dk-art h3 { font-size: 16px; margin-top: 10px; } .dk-art p { font-size: 13px; margin-top: 6px; } .dk-art__read { font-size: 13.5px; }
  .dk-hub__head { padding: 0 24px; } .dk-hub__cards { margin: 14px 24px 0; } .dk-reviews__wrap { padding: 8px 24px 28px; }
  .dk-reviews__wrap { grid-template-columns: 1fr; gap: 20px; }
  .dk-reviews__rate { padding-top: 10px; }
  .dk-reviews__cards { grid-template-columns: repeat(3, 1fr); }
  .dk-rev { height: auto; min-height: 0; gap: 8px; padding: 16px 18px; } .dk-rev blockquote { font-size: 14px; line-height: 1.35; margin-top: 8px; } .dk-rev figcaption { margin-top: 14px; }
  .dk-rev figcaption { flex-wrap: wrap; gap: 6px 14px; }
  .dk-hub h2, .dk-reviews h2 { font-size: 30px; }
  .dk-rev blockquote br { display: none; }
}


/* ==== HIT AREAS (visual size unchanged) ==== */
.dk-tool, .dk-link-arrow, .dk-hub__all, .ph-view, .pf__col > a, .pf__bottom a { position: relative; }
.dk-tool::after, .dk-link-arrow::after, .dk-hub__all::after { content: ""; position: absolute; inset: -9px -6px; }
.dk-how__btn, .dk-cta__btn { min-height: 44px; }
@media (max-width: 900px) { .dk-tool, .dk-link-arrow { min-height: 44px; } }

.dk-hub__empty { padding: 32px; border-radius: 16px; background: #f3f9fd; color: var(--ph-text-muted); font-size: 15px; }
.dk-hub__empty p { margin: 0 0 8px; }

.dk-step p br { display: none; }


/* ==========================================================================
   CONSISTENCY LAYER (desktop): one content rail + one type scale.
   Rail = the same box as .dk-container (1400px max, 60px side gutters,
   32px below 1280px), so every section starts and ends on the same lines.
   Sections whose sizes are in cqw are capped to the rail, so they scale
   exactly like the rest of the page on wide screens.
   ========================================================================== */
@media (min-width: 901px) {
  .dk-how__wrap, .dk-cta, .pf { --rail: max(60px, calc((100cqw - 1400px) / 2)); }
  .dk-hub__wrap, .dk-reviews__wrap { --rail-w: min(1400px, calc(100% - 120px)); }

  /* section headings, eyebrows, ledes */
  .dk-areas__head h2, .why-us__header h2, .dk-how h2, .dk-hub h2, .dk-reviews h2, .dk-cta h2 {
    font-size: var(--ph-h2); line-height: 1.12; font-weight: 800; letter-spacing: -.035em;
  }
  .why-us__eyebrow, .dk-how__eyebrow, .dk-hub__eyebrow, .dk-cta__eyebrow { font-size: var(--ph-eyebrow); letter-spacing: .16em; }
  .why-us__header p, .dk-how__sub, .dk-hub__sub, .dk-cta__sub { font-size: var(--ph-lede); line-height: 1.45; font-weight: 500; }

  /* hero copy sits on the rail */
  .dk-hero__copy { padding-left: 0; }

  /* why us cards: text was 12px */
  .why-us-card h4 { font-size: var(--ph-card-title); }
  .why-us-card p { font-size: var(--ph-card-body); line-height: 1.5; }

  /* how it works */
  .dk-how__inner { padding-left: var(--rail); }
  .dk-step h3 { font-size: var(--ph-card-title); }
  .dk-step p { font-size: var(--ph-card-body); line-height: 1.45; }

  /* health hub */
  .dk-hub__wrap, .dk-reviews__wrap { width: var(--rail-w); max-width: none; }
  .dk-hub__head { padding: 0; }
  .dk-hub__cards { margin: 16px 0 0; gap: 16px; }
  .dk-hub__all { font-size: 15px; margin-top: 18px; }
  .dk-art { height: auto; min-height: 196px; }
  .dk-art__body { padding: 16px 14px 14px 18px; }
  .dk-art__tag { font-size: 12px; padding: 6px 10px; }
  .dk-art h3 { font-size: var(--ph-card-title); margin-top: 10px; line-height: 1.25; }
  .dk-art p { font-size: 13.5px; margin-top: 6px; line-height: 1.4; }
  .dk-art__read { font-size: 14px; padding-top: 10px; }

  /* reviews */
  .dk-reviews__wrap { padding: 8px 0 32px; grid-template-columns: 31.2% 1fr; }
  .dk-reviews__cards { gap: 16px; }
  .dk-rev { height: auto; min-height: 150px; padding: 16px 18px 14px; }
  .dk-rev blockquote { font-size: 15px; line-height: 1.45; margin-top: 8px; }
  .dk-rev blockquote br { display: none; }
  .dk-rev figcaption { padding-top: 12px; gap: 12px; }
  .dk-rev figcaption strong, .dk-rev__ver { font-size: 14px; }
  .dk-reviews__num strong { font-size: 22px; }
  .dk-reviews__num span { font-size: 14px; }
  .dk-stars svg { width: 16px; height: 16px; }
  .dk-stars--lg svg { width: 24px; height: 24px; }
  .dk-reviews__score { gap: 16px; margin-top: 12px; }

  /* CTA banner */
  .dk-cta__copy { left: var(--rail); }
  .dk-cta__sub { margin-top: 12px; }
  .dk-cta__btn { font-size: 16px; height: 46px; padding: 0 28px; margin-top: 18px; gap: 12px; }
  .dk-cta__feats { left: auto; right: var(--rail); width: max-content; gap: 14px; }
  .dk-cta__feats li { gap: 16px; }
  .dk-cta__ftxt strong { font-size: 17px; }
  .dk-cta__ftxt span { font-size: 14px; margin-top: 3px; }
}
@media (min-width: 901px) and (max-width: 1279px) {
  .dk-how__wrap, .dk-cta, .pf { --rail: 32px; }
  .dk-hub__wrap, .dk-reviews__wrap { --rail-w: calc(100% - 64px); }
  .dk-hub__cards { grid-template-columns: 1fr 1fr; }
  .dk-reviews__wrap { grid-template-columns: 1fr; gap: 16px; }
}

@media (min-width: 901px) {
  .why-us { padding: 64px 0 56px; }
  .why-us > .container { width: min(calc(100% - 120px), 1400px); max-width: none; margin-inline: auto; padding: 0; }
  .why-us .section-head span { display: block; font-size: var(--ph-eyebrow); letter-spacing: .16em; font-weight: 800; text-transform: uppercase; color: var(--ph-blue-600); margin-bottom: 8px; }
  .why-us .section-head h2 { font-size: var(--ph-h2); line-height: 1.12; font-weight: 800; letter-spacing: -.035em; margin: 0 0 8px; }
  .why-us .section-head p { font-size: var(--ph-lede); line-height: 1.45; font-weight: 500; color: var(--ph-text-muted); margin: 0; }
}
@media (min-width: 901px) and (max-width: 1279px) { .why-us > .container { width: calc(100% - 64px); } }

@media (min-width: 901px) { .dk-reviews h2 { white-space: normal; } }
@media (min-width: 1280px) {
  .dk-hub__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dk-art__img { width: 34%; }
  .dk-art h3 { -webkit-line-clamp: 3; }
  .dk-art p { -webkit-line-clamp: 2; }
  .dk-art { min-height: 208px; }
}
@media (min-width: 1280px) and (max-width: 1360px) { .dk-hub__cards { grid-template-columns: 1fr 1fr; } .dk-art__img { width: 40%; } }

@media (min-width: 901px) and (max-width: 1399px) { .dk-reviews__wrap { grid-template-columns: 1fr; gap: 16px; } }
@media (min-width: 1400px) { .dk-reviews__wrap { grid-template-columns: 34% 1fr; column-gap: 24px; } }


/* ==========================================================================
   SCALE HIERARCHY (desktop): hero large, content sections medium-large,
   reviews and CTA strong. Sizes: section h2 32-40, eyebrow 13, card title
   19, body 15-17, meta 13-14, buttons 16-18, radius 20, section gaps 88-120,
   card padding 24-32.
   ========================================================================== */
@media (min-width: 901px) {
  /* keep How it works as it was */
  .dk-step h3 { font-size: 16px; }
  .dk-step p { font-size: 14px; }

  /* vertical rhythm between sections */
  .dk-areas { padding: 40px 0 72px; }
  .why-us { padding: 96px 0 96px; }
  .dk-hub { padding: 0; }
  .dk-hub__wrap { padding: 0 0 8px; }
  .dk-reviews__wrap { padding: 88px 0 0; }
  .dk-cta { padding-top: 104px; }

  /* why patients choose */
  .why-us .section-head { margin-bottom: 40px; }
  .why-us__grid { gap: 22px; }
  .why-us-card { padding: 32px 28px; min-height: 190px; border-radius: 20px; gap: 18px; }
  .why-us-card h4 { font-size: 18px; margin-bottom: 8px; line-height: 1.25; }
  .why-us-card p { font-size: 15px; line-height: 1.55; }

  /* health hub */
  .dk-hub__cards { margin-top: 36px; gap: 20px; }
  .dk-hub__all { font-size: 16px; }
  .dk-art { min-height: 240px; border-radius: 20px; }
  .dk-art__img { width: 38%; }
  .dk-art__body { padding: 26px 22px 22px 24px; }
  .dk-art__tag { font-size: 12px; padding: 7px 12px; }
  .dk-art h3 { font-size: 19px; line-height: 1.25; margin-top: 14px; -webkit-line-clamp: 3; }
  .dk-art p { font-size: 15px; line-height: 1.5; margin-top: 8px; -webkit-line-clamp: 2; }
  .dk-art__read { font-size: 15px; padding-top: 14px; }

  /* reviews */
  .dk-reviews__rate { padding-top: 12px; }
  .dk-reviews__wrap { align-items: stretch; }
  .dk-reviews__score { gap: 20px; margin-top: 22px; }
  .dk-stars--lg svg { width: 32px; height: 32px; }
  .dk-reviews__num strong { font-size: 34px; }
  .dk-reviews__num span { font-size: 16px; margin-top: 4px; }
  .dk-reviews__cards { gap: 20px; }
  .dk-rev { min-height: 250px; padding: 28px 28px 24px; border-radius: 20px; }
  .dk-stars svg { width: 20px; height: 20px; }
  .dk-rev blockquote { font-size: 17px; line-height: 1.6; margin-top: 16px; }
  .dk-rev figcaption { padding-top: 20px; }
  .dk-rev figcaption strong { font-size: 15px; }
  .dk-rev__ver { font-size: 14px; }

  /* CTA: the conversion climax */
  .dk-cta__wrap { height: 380px; }
  .dk-cta__eyebrow { font-size: 14px; }
  .dk-cta h2 { font-size: clamp(36px, 3vw, 46px); margin-top: 10px; }
  .dk-cta__sub { font-size: 19px; line-height: 1.5; margin-top: 16px; max-width: 560px; }
  .dk-cta__copy { padding-top: 0; }
  .dk-cta__btn { font-size: 18px; height: 56px; padding: 0 36px; margin-top: 28px; gap: 14px; }
  .dk-cta__feats { gap: 22px; }
  .dk-cta__ftxt strong { font-size: 20px; }
  .dk-cta__ftxt span { font-size: 16px; margin-top: 4px; }
}
@media (min-width: 901px) and (max-width: 1399px) {
  .dk-hub__cards { grid-template-columns: 1fr 1fr; }
  .dk-reviews__wrap { padding-top: 72px; }
  .dk-cta__wrap { height: 340px; }
}

@media (min-width: 901px) {
  .dk-rev figcaption { flex-wrap: wrap; gap: 4px 12px; }
  .dk-rev figcaption strong { white-space: nowrap; }
}