/* ==========================================================================
   Dial In Doctor — public marketing website design system (self-contained).
   Scoped with the `dd-` prefix so it never collides with the app shell / Bootstrap.
   Brand: primary #EF494A · white + very-light-grey sections · dark ink type · Poppins.
   ========================================================================== */
:root {
  --dd-primary: #EF494A;      /* brand colour: accents, icons, rules, focus ring */
  --dd-primary-600: #d83c3d;  /* min. shade that clears 4.5:1 with white text (4.53:1) */
  --dd-primary-700: #b93031;
  --dd-primary-800: #a82a2b;
  --dd-primary-050: #fdeded;
  --dd-primary-100: #fbdcdc;

  --dd-ink: #14212c;
  --dd-ink-soft: #33454f;
  --dd-muted: #5d6d78;

  --dd-bg: #ffffff;
  --dd-bg-soft: #f6f8fb;      /* very light grey section */
  --dd-bg-tint: #fbf5f4;      /* faint warm tint */
  --dd-line: #e7edf3;
  --dd-teal: #0e9488;         /* soft calm accent, used sparingly */
  --dd-teal-050: #e6f5f3;

  --dd-r: 16px;
  --dd-r-lg: 24px;
  --dd-r-xl: 32px;
  --dd-pill: 999px;

  --dd-shadow-sm: 0 1px 2px rgba(20,33,44,.06), 0 1px 3px rgba(20,33,44,.05);
  --dd-shadow: 0 10px 30px -12px rgba(20,33,44,.18);
  --dd-shadow-lg: 0 24px 60px -24px rgba(20,33,44,.28);

  --dd-container: 1180px;
  --dd-nav-h: 64px;

  /* One page gutter for every public shell. Header, hero, sections and footer
     all read this, so no part of the page can drift to its own inset. */
  --dd-gutter: 1.25rem;

  /* Hero rhythm. Named steps rather than per-page inline styles, so a centred
     hero has the same vertical spacing wherever it appears. */
  --dd-hero-pad: clamp(2.5rem, 6vw, 4.5rem);   /* hero top and bottom */
  --dd-hero-gap-eyebrow: 1rem;                 /* eyebrow -> heading */
  --dd-hero-gap-heading: 1.1rem;               /* heading -> supporting copy */
  --dd-hero-gap-lead: 1.9rem;                  /* supporting copy -> CTA group */

  /* Measures. The heading is deliberately tighter than the body copy: a display
     line allowed to run as long as a paragraph stops reading as a headline. */
  --dd-hero-measure: 760px;
  /* In ch, so the measure tracks the font as it clamps down: the number of
     characters per line stays roughly constant instead of the heading getting
     narrower in proportion to nothing. 24ch puts the current headings on two
     lines rather than stranding a single word on a third. */
  --dd-hero-heading-measure: 24ch;

  /* brand logo: one height drives header, drawer and footer so the mark stays
     visually consistent everywhere. width is always auto (SVG keeps its ratio). */
  --dd-logo-h: 40px;
}

*, *::before, *::after { box-sizing: border-box; }

.dd {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--dd-ink);
  background: var(--dd-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
.dd img { max-width: 100%; height: auto; }
.dd a { color: inherit; text-decoration: none; }

.dd-skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  /* same white-on-brand shortfall as the primary button: use the AA-safe shade */
  background: var(--dd-primary-600); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--dd-r) 0;
}
.dd-skip:focus { left: 0; }

/* ------- layout helpers ------- */
.dd-container { width: 100%; max-width: var(--dd-container); margin: 0 auto; padding: 0 var(--dd-gutter); }
.dd-section { padding: clamp(3.25rem, 7vw, 6rem) 0; }
.dd-section--soft { background: var(--dd-bg-soft); }
.dd-section--tint { background: linear-gradient(180deg, #fff 0%, var(--dd-bg-tint) 100%); }
.dd-narrow { max-width: 760px; margin-inline: auto; }

.dd-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dd-primary-700); background: var(--dd-primary-050);
  padding: .35rem .8rem; border-radius: var(--dd-pill); margin-bottom: 1rem;
}
.dd-h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .75rem; }
.dd-h3 { font-size: 1.15rem; font-weight: 650; margin: 0 0 .4rem; }
.dd-lead { font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--dd-muted); margin: 0 auto; max-width: 60ch; }
.dd-center { text-align: center; }
.dd-accent { color: var(--dd-primary); }

/* ------- buttons ------- */
.dd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 600; font-size: 1rem; line-height: 1; text-align: center;
  padding: .95rem 1.6rem; border-radius: var(--dd-pill); border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  min-height: 52px;
}
.dd-btn i { font-size: 1.05em; }
/* White text needs 4.5:1 at this size (16px/600 is "normal" text per WCAG, not large),
   so the fill starts at -600 and darkens through the states. The brand #EF494A stays
   in the shadow glow and on every non-interactive accent. */
.dd-btn--primary { background: var(--dd-primary-600); color: #fff; box-shadow: 0 10px 24px -10px rgba(239,73,74,.6); }
.dd-btn--primary:hover { background: var(--dd-primary-700); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(239,73,74,.65); }
.dd-btn--primary:active { background: var(--dd-primary-800); transform: translateY(0); box-shadow: 0 6px 16px -10px rgba(239,73,74,.6); }
.dd-btn[aria-disabled="true"], .dd-btn:disabled { background: var(--dd-line); color: var(--dd-muted); border-color: transparent; box-shadow: none; transform: none; cursor: not-allowed; pointer-events: none; }
.dd-btn--ghost { background: #fff; color: var(--dd-ink); border-color: var(--dd-line); }
.dd-btn--ghost:hover { border-color: var(--dd-primary); color: var(--dd-primary); transform: translateY(-2px); }
.dd-btn--light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); }
.dd-btn--light:hover { background: #fff; color: var(--dd-primary); transform: translateY(-2px); }
.dd-btn--wa { background: #1fab54; color: #fff; }
.dd-btn--wa:hover { background: #178f45; transform: translateY(-2px); }
.dd-btn--sm { padding: .65rem 1.1rem; min-height: 44px; font-size: .92rem; }

/* ------- navigation ------- */
.dd-nav {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.9);
  backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.dd-nav.is-stuck { box-shadow: var(--dd-shadow-sm); border-color: var(--dd-line); background: rgba(255,255,255,.96); }
.dd-nav__inner { display: flex; align-items: center; justify-content: space-between; height: var(--dd-nav-h); gap: 1.5rem; }
.dd-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.dd-brand img { height: var(--dd-logo-h); width: auto; max-width: 100%; display: block; object-fit: contain; }
.dd-navlinks { display: flex; align-items: center; gap: .15rem; margin-inline: auto; }
.dd-navlinks a { position: relative; padding: .5rem .85rem; border-radius: var(--dd-pill); font-weight: 500; color: var(--dd-ink-soft); font-size: .95rem; transition: color .15s ease, background .15s ease; }
.dd-navlinks a:hover, .dd-navlinks a:focus-visible { color: var(--dd-primary); background: var(--dd-primary-050); }
.dd-navlinks a[aria-current="page"] { color: var(--dd-primary); font-weight: 600; }
.dd-navlinks a[aria-current="page"]::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .18rem; height: 2px; border-radius: 2px; background: var(--dd-primary); }
.dd-nav__cta { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.dd-navlogin { font-weight: 600; color: var(--dd-ink-soft); padding: .5rem .35rem; font-size: .95rem; transition: color .15s ease; }
.dd-navlogin:hover, .dd-navlogin:focus-visible { color: var(--dd-primary); }
.dd-nav__cta .dd-btn--primary { box-shadow: 0 6px 16px -9px rgba(239,73,74,.55); padding: .5rem 1.05rem; font-size: .9rem; }
.dd-nav__cta .dd-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(239,73,74,.6); }
.dd-burger { display: none; background: none; border: 1px solid var(--dd-line); border-radius: 10px; width: 42px; height: 42px; font-size: 1.4rem; color: var(--dd-ink); cursor: pointer; align-items: center; justify-content: center; transition: border-color .15s ease, color .15s ease; }
.dd-burger:hover, .dd-burger:focus-visible { border-color: var(--dd-primary); color: var(--dd-primary); }

/* mobile drawer */
.dd-drawer { position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw); background: #fff; box-shadow: var(--dd-shadow-lg); transform: translateX(105%); transition: transform .28s ease; z-index: 130; padding: 1.25rem; display: flex; flex-direction: column; gap: .25rem; overflow-y: auto; }
.dd-drawer.is-open { transform: translateX(0); }
.dd-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: .75rem; }
.dd-drawer__head img { height: var(--dd-logo-h); width: auto; max-width: 100%; display: block; object-fit: contain; }
.dd-drawer a { padding: .85rem .75rem; border-radius: var(--dd-r); font-weight: 500; color: var(--dd-ink); display: flex; align-items: center; gap: .75rem; transition: background .15s ease, color .15s ease; }
.dd-drawer a i { color: var(--dd-muted); font-size: 1.1rem; width: 1.2rem; text-align: center; }
.dd-drawer a:hover, .dd-drawer a:focus-visible { background: var(--dd-bg-soft); color: var(--dd-primary); }
.dd-drawer a:hover i, .dd-drawer a:focus-visible i { color: var(--dd-primary); }
.dd-drawer a[aria-current="page"] { background: var(--dd-primary-050); color: var(--dd-primary); font-weight: 600; }
.dd-drawer a[aria-current="page"] i { color: var(--dd-primary); }
.dd-drawer .dd-btn { margin-top: .75rem; width: 100%; justify-content: center; }
.dd-drawer__close { background: none; border: none; font-size: 1.6rem; color: var(--dd-muted); cursor: pointer; line-height: 1; }
.dd-scrim { position: fixed; inset: 0; background: rgba(15,23,32,.45); opacity: 0; visibility: hidden; transition: opacity .25s ease; z-index: 120; }
.dd-scrim.is-open { opacity: 1; visibility: visible; }

/* ------- hero ------- */
.dd-hero { position: relative; overflow: hidden; background:
  radial-gradient(1200px 500px at 85% -10%, var(--dd-primary-050) 0%, rgba(253,237,237,0) 60%),
  linear-gradient(180deg, #fff 0%, var(--dd-bg-soft) 100%); }
/* There are two deliberate hero archetypes, and they used to share one set of
   rules written for only one of them.

   SPLIT (home): a text column beside artwork, everything ranged left.
   CENTRED (How It Works, Book Appointment, and any later centred hero): one
   vertical axis with every child centred on it.

   The bug this replaces: `.dd-hero p` set `max-width: 34rem; margin: 0 0 1.75rem`
   for both. Zero side margins is correct for the split hero, where the paragraph
   should sit flush with the left edge of its column. On a centred hero it pinned
   the paragraph box to the left of the container while `text-align: center`
   centred the words inside that box - so the copy read visibly left of the
   eyebrow, heading and buttons. It also outranked `.dd-lead { margin: 0 auto }`
   on specificity (0,1,1 against 0,1,0), so the shared primitive silently lost.

   Box rules are now scoped to the archetype that wants them. Typography stays
   shared, because both archetypes want the same hero-scale copy. */
.dd-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem); }
/* margin-block, not the margin shorthand. The shorthand also sets the side
   margins to zero, and at (0,1,1) it outranks the `margin-inline: auto` the
   centred hero relies on - which pins a heading that has its own max-width to
   the left edge of the hero. This is the same trap the paragraph fell into. */
.dd-hero h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin-block: 0 var(--dd-hero-gap-heading); }
.dd-hero p { font-size: clamp(1.02rem, 1.6vw, 1.22rem); color: var(--dd-ink-soft); }

/* Split hero: paragraph ranged left inside its column. */
.dd-hero__grid p { max-width: 34rem; margin: 0 0 1.75rem; }
.dd-hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.75rem; }

/* Centred hero: one axis, and every child centres on it.
   `margin-inline: auto` on the direct children is what guarantees that - a child
   with its own max-width centres its BOX rather than relying on inherited
   text-align, which only ever centred the glyphs inside a box that was itself
   off to one side. */
.dd-hero__content {
  max-width: var(--dd-hero-measure);
  margin-inline: auto;
  padding-block: var(--dd-hero-pad);
  text-align: center;
}
.dd-hero__content > * { margin-inline: auto; }
/* text-wrap: balance evens the line lengths of a short display heading, which
   is what stops a single trailing word sitting alone on its own line. Browsers
   without it simply wrap normally inside the same measure - nothing depends on
   it, and no forced <br> is needed in the markup. */
.dd-hero__content h1 { max-width: var(--dd-hero-heading-measure); text-wrap: balance; }
.dd-hero__content p { max-width: 60ch; margin-bottom: 0; text-wrap: pretty; }

/* The eyebrow is a pill, so .dd-eyebrow makes it inline-flex - and an
   inline-level box ignores vertical margins. The gap below it was therefore
   whatever the line box happened to produce, which differed by element: pages
   writing <span class="dd-eyebrow"> got 16px and pages writing <p> got none.
   Block-level with a fitted width keeps the pill exactly as it looks while
   making the space below it real, equal and tokenised. */
.dd-hero__content .dd-eyebrow {
  display: flex;
  width: fit-content;
  margin-bottom: var(--dd-hero-gap-eyebrow);
}

/* One CTA-group pattern for every hero. Pages previously borrowed a class from
   an unrelated section further down the same page - the How It Works hero used
   the bottom call-to-action band's class, Book Appointment used the help
   panel's - which is why the two stacked at different widths on mobile. */
.dd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
  align-items: center;
  margin-top: var(--dd-hero-gap-lead);
}

/* Stack once two buttons no longer sit comfortably side by side. One breakpoint
   for every hero: the borrowed classes used 767px on one page and 640px on the
   other, so the same pair of buttons changed shape at different widths. */
@media (max-width: 640px) {
  .dd-hero__actions { flex-direction: column; align-items: stretch; }
  .dd-hero__actions .dd-btn { width: 100%; justify-content: center; }
}
.dd-hero__meta { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; color: var(--dd-muted); font-size: .92rem; }
.dd-hero__meta span { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }
.dd-hero__meta i { color: var(--dd-teal); font-size: 1.1rem; }
.dd-hero__art { position: relative; }
.dd-hero__card { position: absolute; background: #fff; border-radius: var(--dd-r); box-shadow: var(--dd-shadow-lg); padding: .8rem 1rem; display: flex; align-items: center; gap: .65rem; font-weight: 600; font-size: .9rem; }
.dd-hero__card i { font-size: 1.35rem; }
.dd-hero__card--a { top: 8%; left: -6%; color: var(--dd-teal); }
.dd-hero__card--b { bottom: 7%; right: -4%; color: var(--dd-primary); }
.dd-hero__stats { display: flex; gap: 2rem; margin-top: 1.5rem; flex-wrap: wrap; }
.dd-hero__stat b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--dd-primary); line-height: 1; }
.dd-hero__stat span { font-size: .82rem; color: var(--dd-muted); }

/* ------- generic grids/cards ------- */
.dd-grid { display: grid; gap: 1.25rem; }
.dd-grid--4 { grid-template-columns: repeat(4, 1fr); }
.dd-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dd-grid--2 { grid-template-columns: repeat(2, 1fr); }

.dd-card { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: 1.6rem; box-shadow: var(--dd-shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; height: 100%; }
.dd-card:hover { transform: translateY(-4px); box-shadow: var(--dd-shadow); border-color: var(--dd-primary-100); }
.dd-card p { color: var(--dd-muted); margin: 0; font-size: .95rem; }

.dd-ico { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 1rem; background: var(--dd-primary-050); color: var(--dd-primary); }
.dd-ico--teal { background: var(--dd-teal-050); color: var(--dd-teal); }
.dd-ico img { width: 30px; height: 30px; }

/* ------- steps timeline ------- */
.dd-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; counter-reset: step; }
.dd-step { position: relative; background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: 2.4rem 1.4rem 1.4rem; box-shadow: var(--dd-shadow-sm); }
.dd-step__num { position: absolute; top: -22px; left: 1.4rem; width: 44px; height: 44px; border-radius: var(--dd-pill); background: var(--dd-primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px -8px rgba(239,73,74,.6); }
.dd-step i { font-size: 1.5rem; color: var(--dd-primary); }
.dd-step p { color: var(--dd-muted); font-size: .92rem; margin: .35rem 0 0; }

/* ------- service cards ------- */
.dd-svc { display: flex; flex-direction: column; gap: .5rem; }
.dd-svc .dd-ico { margin-bottom: .5rem; }
.dd-svc__tag { align-self: flex-start; font-size: .72rem; font-weight: 600; color: var(--dd-teal); background: var(--dd-teal-050); padding: .15rem .55rem; border-radius: var(--dd-pill); margin-top: .35rem; }

/* ------- comparison ------- */
.dd-compare { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 0; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); overflow: hidden; box-shadow: var(--dd-shadow-sm); background: #fff; }
.dd-compare__head { padding: 1.1rem 1.25rem; font-weight: 700; border-bottom: 1px solid var(--dd-line); }
.dd-compare__head--us { background: var(--dd-primary); color: #fff; }
.dd-compare__head--old { background: var(--dd-bg-soft); color: var(--dd-muted); }
.dd-compare__row { display: contents; }
.dd-compare__cell { padding: 1rem 1.25rem; border-bottom: 1px solid var(--dd-line); font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.dd-compare__label { font-weight: 600; color: var(--dd-ink); }
.dd-compare__cell--us { color: var(--dd-ink); background: var(--dd-primary-050); }
.dd-compare__cell--us i { color: #1fab54; }
.dd-compare__cell--old { color: var(--dd-muted); }
.dd-compare__cell--old i { color: #c14b4b; }
.dd-compare > :nth-last-child(-n+3) .dd-compare__cell,
.dd-compare > *:nth-last-child(-n+3) { border-bottom: none; }

/* ------- ecosystem flow ------- */
.dd-flow { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: .5rem; }
.dd-flow__node { flex: 1 1 150px; max-width: 190px; background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r); padding: 1.1rem .9rem; text-align: center; box-shadow: var(--dd-shadow-sm); }
.dd-flow__node i { font-size: 1.5rem; color: var(--dd-primary); }
.dd-flow__node b { display: block; margin-top: .4rem; font-size: .95rem; }
.dd-flow__arrow { display: flex; align-items: center; color: var(--dd-primary-100); font-size: 1.4rem; }

/* ------- doctors ------- */
.dd-doc { display: flex; align-items: center; gap: 1rem; }
.dd-doc img { width: 84px; height: 84px; border-radius: 20px; object-fit: cover; flex-shrink: 0; border: 3px solid #fff; box-shadow: var(--dd-shadow-sm); }
.dd-doc h3 { margin: 0; font-size: 1.05rem; }
.dd-doc span { color: var(--dd-muted); font-size: .9rem; }
.dd-doc__badge { margin-left: auto; color: var(--dd-teal); font-size: .8rem; font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }

/* ------- testimonials ------- */
.dd-quote { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: 1.75rem; box-shadow: var(--dd-shadow-sm); height: 100%; display: flex; flex-direction: column; }
.dd-quote__stars { color: #f5a623; margin-bottom: .75rem; letter-spacing: 2px; }
.dd-quote blockquote { margin: 0 0 1rem; font-size: 1.02rem; color: var(--dd-ink-soft); }
.dd-quote figcaption { margin-top: auto; font-weight: 600; }
.dd-quote figcaption span { display: block; color: var(--dd-muted); font-weight: 400; font-size: .85rem; }

/* ------- FAQ ------- */
.dd-faq { max-width: 820px; margin-inline: auto; }
.dd-faq details { border: 1px solid var(--dd-line); border-radius: var(--dd-r); background: #fff; margin-bottom: .75rem; box-shadow: var(--dd-shadow-sm); overflow: hidden; }
.dd-faq summary { cursor: pointer; list-style: none; padding: 1.1rem 1.25rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dd-faq summary::-webkit-details-marker { display: none; }
.dd-faq summary::after { content: "\F282"; font-family: "bootstrap-icons"; color: var(--dd-primary); transition: transform .2s ease; font-weight: normal; }
.dd-faq details[open] summary::after { transform: rotate(180deg); }
.dd-faq p { padding: 0 1.25rem 1.15rem; margin: 0; color: var(--dd-muted); }

/* ------- band / final CTA ------- */
.dd-band { background: linear-gradient(135deg, var(--dd-primary) 0%, var(--dd-primary-700) 100%); color: #fff; border-radius: var(--dd-r-xl); padding: clamp(2.5rem, 5vw, 4rem); text-align: center; box-shadow: var(--dd-shadow-lg); position: relative; overflow: hidden; }
.dd-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 240px at 15% 0%, rgba(255,255,255,.18), transparent 60%); }
.dd-band > * { position: relative; }
.dd-band h2 { color: #fff; }
.dd-band p { color: rgba(255,255,255,.9); max-width: 44rem; margin: 0 auto 1.75rem; }
.dd-band__cta { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.dd-band__note { margin-top: 1.4rem; font-size: .82rem; color: rgba(255,255,255,.8); }

/* metric strip */
.dd-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; }
.dd-metric b { display: block; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--dd-primary); }
.dd-metric span { color: var(--dd-muted); font-size: .9rem; }

/* ------- footer ------- */
.dd-footer { background: #101c26; color: #c8d3dc; padding: clamp(3rem, 5vw, 4.5rem) 0 0; }
.dd-footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 2.5rem 3rem; }
/* footer column headings are h2 so the document outline does not jump h2 -> h4;
   h4 kept in the selector so any legacy markup still renders identically */
.dd-footer h2, .dd-footer h4 { color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 1.15rem; }
.dd-footer a { color: #a7b4bf; display: block; padding: .3rem 0; font-size: .92rem; width: fit-content; transition: color .15s ease; }
.dd-footer nav a:hover, .dd-footer nav a:focus-visible { color: #fff; }
.dd-footer p { color: #93a3ae; font-size: .92rem; line-height: 1.65; }
.dd-footer__brand p { max-width: 34ch; margin-top: .25rem; }
.dd-footer__brand img { height: var(--dd-logo-h); width: auto; max-width: 100%; display: block; object-fit: contain; margin-bottom: 1.25rem; filter: brightness(0) invert(1); }
.dd-footer__contact p { display: flex; align-items: center; gap: .6rem; margin: 0 0 .55rem; }
.dd-footer__contact p i { color: var(--dd-primary); font-size: 1rem; flex-shrink: 0; }
.dd-footer__contact p a { display: inline; padding: 0; color: #c8d3dc; }
.dd-footer__contact p a:hover, .dd-footer__contact p a:focus-visible { color: #fff; }
.dd-footer__contact nav a:hover, .dd-footer__contact nav a:focus-visible { color: #fff; }
.dd-footer__social { display: flex; gap: .55rem; margin-top: 1.25rem; }
.dd-footer__social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; padding: 0; color: #c8d3dc; transition: background .15s ease, color .15s ease, transform .15s ease; }
.dd-footer__social a:hover, .dd-footer__social a:focus-visible { background: var(--dd-primary); border-color: var(--dd-primary); color: #fff; transform: translateY(-2px); }
.dd-footer__bar { border-top: 1px solid rgba(255,255,255,.1); margin-top: 3rem; padding: 1.35rem 0; text-align: center; font-size: .84rem; color: #8494a0; }

/* floating whatsapp */
.dd-wa { position: fixed; right: 18px; bottom: 18px; width: 56px; height: 56px; border-radius: 50%; background: #1fab54; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; box-shadow: var(--dd-shadow-lg); z-index: 90; }
.dd-wa:hover { transform: scale(1.06); }

/* ------- reveal on scroll ------- */
.dd-reveal { opacity: 0; transform: translateY(18px); }
.dd-reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

/* ------- responsive ------- */
@media (max-width: 991px) {
  :root { --dd-logo-h: 36px; }
  .dd-navlinks, .dd-nav__cta .dd-btn, .dd-navlogin { display: none; }
  .dd-burger { display: inline-flex; }
  .dd-hero__grid { grid-template-columns: 1fr; text-align: center; }
  .dd-hero p, .dd-hero__cta, .dd-hero__meta, .dd-hero__stats { margin-inline: auto; justify-content: center; }
  .dd-hero__art { max-width: 460px; margin: 0 auto; }
  .dd-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .dd-steps { grid-template-columns: repeat(2, 1fr); row-gap: 2.4rem; }
  .dd-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :root { --dd-logo-h: 32px; }
  .dd-grid--4, .dd-grid--3, .dd-grid--2, .dd-steps, .dd-metrics { grid-template-columns: 1fr; }
  .dd-compare { grid-template-columns: 1fr; }
  .dd-compare__head--old, .dd-compare__cell--old { display: none; } /* keep the Dial In Doctor column on tiny screens */
  .dd-flow__arrow { transform: rotate(90deg); }
  .dd-footer__grid { grid-template-columns: 1fr; }
  .dd-hero__card { display: none; }
  .dd-btn { width: 100%; }
  .dd-hero__cta .dd-btn, .dd-band__cta .dd-btn { width: auto; }
}

/* ------- accessibility ------- */
.dd a:focus-visible, .dd button:focus-visible, .dd summary:focus-visible, .dd input:focus-visible, .dd select:focus-visible, .dd textarea:focus-visible {
  outline: 3px solid var(--dd-primary); outline-offset: 2px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .dd, .dd * { scroll-behavior: auto !important; }
  .dd-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .dd-btn:hover, .dd-card:hover, .dd-wa:hover { transform: none !important; }
}
.dd-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ==========================================================================
   About page — editorial + executive blocks. Namespaced `dd-ab-`.
   Everything else on that page reuses the shared tokens, buttons, grids,
   cards and .dd-flow defined above, so it stays visually identical to Home.
   ========================================================================== */

/* hero art: the asset is a transparent PNG, so it gets no frame or shadow */
.dd-ab-art img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   About hero motion. Two restrained, transform-only animations and nothing
   else: the illustration breathes vertically, and a single soft halo drifts
   behind it. No JS, no scroll trigger, no opacity on the content itself —
   the page is complete and correct with animation entirely switched off.
   `isolation: isolate` keeps the z-index:-1 halo inside this wrapper so it
   can never paint over the hero copy or escape the column.
   -------------------------------------------------------------------------- */
.dd-ab-hero-art { position: relative; isolation: isolate; }

.dd-ab-hero-art::before {
  content: "";
  position: absolute; z-index: -1;
  left: 50%; top: 50%;
  width: 76%; aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0) scale(1);
  background: radial-gradient(circle at 50% 50%,
              rgba(44,142,203,.13) 0%,
              rgba(239,73,74,.07) 45%,
              rgba(239,73,74,0) 70%);
  pointer-events: none;
  animation: dd-ab-halo 14s ease-in-out infinite alternate;
}

.dd-ab-hero-art img { animation: dd-ab-float 11s ease-in-out infinite alternate; will-change: transform; }

@keyframes dd-ab-float {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -5px, 0); }
}
@keyframes dd-ab-halo {
  from { transform: translate3d(-50%, -50%, 0) scale(1); }
  to   { transform: translate3d(-50%, -50%, 0) scale(1.045); }
}

/* editorial two-column: narrative beside a supporting panel */
.dd-ab-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.dd-ab-prose p { color: var(--dd-ink-soft); font-size: 1.03rem; margin: 0 0 1.05rem; max-width: 62ch; }
.dd-ab-prose p:last-child { margin-bottom: 0; }

/* quiet list of real-world problems — no cards, keeps the section calm */
.dd-ab-list { list-style: none; margin: 0; padding: 0; }
.dd-ab-list li { display: flex; gap: .8rem; align-items: flex-start; padding: .85rem 0; border-bottom: 1px solid var(--dd-line); color: var(--dd-ink-soft); font-size: .97rem; }
.dd-ab-list li:last-child { border-bottom: none; }
.dd-ab-list i { color: var(--dd-primary); font-size: 1.05rem; line-height: 1.5; flex-shrink: 0; }

/* mission / vision — one large sentence each, set as a statement */
.dd-ab-statement { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.7rem, 3vw, 2.5rem); box-shadow: var(--dd-shadow-sm); height: 100%; }
.dd-ab-statement h3 { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dd-primary-700); margin: 0 0 .9rem; }
.dd-ab-statement p { font-size: clamp(1.08rem, 1.8vw, 1.35rem); line-height: 1.5; color: var(--dd-ink); font-weight: 500; margin: 0; }

/* leadership — full-width executive rows, deliberately not team cards */
.dd-ab-execs { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); max-width: 980px; margin-inline: auto; }
.dd-ab-exec { display: grid; grid-template-columns: 220px 1fr; gap: clamp(1.5rem, 3vw, 2.25rem); align-items: start; background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.4rem, 2.5vw, 2rem); box-shadow: var(--dd-shadow-sm); }
.dd-ab-exec__photo { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--dd-r); overflow: hidden; background: var(--dd-bg-soft); border: 1px solid var(--dd-line); }
/* Portraits are supplied at differing ratios (4:5 and 3:4); the container normalises them.
   The 12% vertical bias keeps the face high in frame, so any overflow is taken off the
   bottom of the shot rather than the head. */
.dd-ab-exec__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
/* Momin's replacement portrait frames the head lower than Bilal's, so the shared 12% would
   push his eye-line ~7pt further down the card. 85% takes the 6.25% overflow off the top
   instead, landing both eye-lines within ~3pt of each other. Aspect ratio is untouched. */
.dd-ab-exec__photo--momin img { object-position: 50% 85%; }
.dd-ab-exec__name { font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 700; margin: 0 0 .45rem; }
.dd-ab-exec__roles { margin: 0 0 1rem; }
.dd-ab-exec__roles b { display: block; color: var(--dd-primary-700); font-weight: 600; font-size: .92rem; }
.dd-ab-exec__roles span { display: block; color: var(--dd-muted); font-size: .92rem; }
.dd-ab-exec__bio { color: var(--dd-muted); font-size: .96rem; margin: 0; max-width: 62ch; }
/* LinkedIn profile link. Scoped to .dd-ab-exec so it cannot reach footer or nav anchors.
   44px min target, LinkedIn blue at 5.69:1 on white, and it must never read as disabled. */
.dd-ab-exec__li {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.15rem; min-height: 44px; padding: .55rem 1.05rem;
  font-size: .88rem; font-weight: 600; color: #0a66c2; max-width: 100%;
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-pill);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.dd-ab-exec__li i { font-size: 1.05rem; line-height: 1; }
.dd-ab-exec__li:hover { background: #f0f6fc; border-color: #0a66c2; color: #094f96; transform: translateY(-1px); }
.dd-ab-exec__li:active { background: #e4eef8; border-color: #094f96; color: #094f96; transform: translateY(0); }
/* keep the global 3px ring + 2px offset; only restore the pill shape it would square off */
.dd-ab-exec__li:focus-visible { border-radius: var(--dd-pill); border-color: #0a66c2; }

/* future vision pillars — plain rows, no card weight */
.dd-ab-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 3rem; text-align: center; }
.dd-ab-pillar i { font-size: 1.6rem; color: var(--dd-primary); }
.dd-ab-pillar h3 { font-size: 1.02rem; font-weight: 650; margin: .7rem 0 .3rem; }
.dd-ab-pillar p { color: var(--dd-muted); font-size: .93rem; margin: 0; }

/* final CTA — white, large, uncluttered */
.dd-ab-cta { max-width: 720px; margin-inline: auto; text-align: center; }
.dd-ab-cta h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 1rem; }
.dd-ab-cta p { color: var(--dd-muted); font-size: 1.04rem; margin: 0 auto 2rem; max-width: 52ch; }

@media (max-width: 991px) {
  .dd-ab-split { grid-template-columns: 1fr; }
  .dd-ab-pillars { grid-template-columns: 1fr; gap: 2rem; margin-top: 2.25rem; }
  .dd-ab-art { max-width: 560px; margin-inline: auto; }
  .dd-ab-list, .dd-ab-prose p { text-align: left; }   /* hero centring must not leak in */
}
@media (max-width: 640px) {
  .dd-ab-exec { grid-template-columns: 1fr; gap: 1.25rem; }
  .dd-ab-exec__photo { max-width: 176px; }
  /* the illustration is centred and small here — ambient drift reads as instability,
     so movement stops and the halo simply holds its resting position */
  .dd-ab-hero-art img { animation: none; transform: none; will-change: auto; }
  .dd-ab-hero-art::before { animation: none; transform: translate3d(-50%, -50%, 0); }
}

/* About-scoped reduced-motion. Deliberately separate from the shared block above so it
   touches nothing outside this page. Everything stays visible and in the same place —
   only movement is removed. */
@media (prefers-reduced-motion: reduce) {
  .dd-ab-hero-art img { animation: none !important; transform: none !important; will-change: auto; }
  .dd-ab-hero-art::before { animation: none !important; transform: translate3d(-50%, -50%, 0) !important; }
  .dd-ab-exec__li { transition: none; }
  .dd-ab-exec__li:hover, .dd-ab-exec__li:active { transform: none; }
}

/* ==========================================================================
   Services page. Namespaced `dd-svc-` (distinct from the older `.dd-svc`
   service-card helper above — different class token, no overlap).
   Everything else reuses the shared hero, sections, grids, cards, icon
   blocks and buttons. No animation, no keyframes, no JS dependency.
   ========================================================================== */

/* hero: no suitable repository artwork exists, so the second column is a
   composed panel built from the design system rather than a stock image */
.dd-svc-hero__panel { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--dd-shadow); text-align: left; }
.dd-svc-hero__label { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dd-muted); margin: 0 0 1.15rem; }
.dd-svc-hero__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.dd-svc-hero__list li { display: flex; align-items: center; gap: .8rem; font-weight: 500; font-size: .97rem; color: var(--dd-ink); }
.dd-svc-hero__list i { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--dd-primary-050); color: var(--dd-primary-700); font-size: 1.05rem; flex-shrink: 0; }

/* detail sections: narrative beside a supporting panel, consistent left-to-right
   so DOM order always matches reading order (no `order` reversal) */
.dd-svc-detail { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.dd-svc-detail__panel { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--dd-shadow-sm); }
.dd-svc-detail__panel h3 { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dd-primary-700); margin: 0 0 1.1rem; }
.dd-svc-detail p { color: var(--dd-ink-soft); font-size: 1.02rem; margin: 0 0 1.05rem; max-width: 62ch; }
.dd-svc-detail p:last-of-type { margin-bottom: 0; }

.dd-svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.dd-svc-list li { display: flex; gap: .75rem; align-items: flex-start; color: var(--dd-ink-soft); font-size: .97rem; }
.dd-svc-list i { color: var(--dd-teal); font-size: 1.05rem; line-height: 1.5; flex-shrink: 0; }

/* notes: readable body size, left accent bar, icon + bold label so the meaning
   never rests on colour alone. Red = safety, teal = compliance. */
/* white, not bg-soft: both notes sit inside `dd-section--soft`, so a soft fill
   would be the same colour as the section and the panel would read as flat */
.dd-svc-note { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-primary); border-radius: var(--dd-r); padding: 1.15rem 1.35rem; margin-top: 1.75rem; }
.dd-svc-note i { color: var(--dd-primary-700); font-size: 1.3rem; line-height: 1.4; flex-shrink: 0; }
.dd-svc-note strong { display: block; color: var(--dd-ink); font-size: .93rem; margin-bottom: .25rem; }
.dd-svc-note p { color: var(--dd-ink-soft); font-size: .97rem; margin: 0; max-width: none; }
.dd-svc-note--compliance { border-left-color: var(--dd-teal); }
.dd-svc-note--compliance i { color: var(--dd-teal); }

/* Connected care journey. Deterministic grid, not wrapping flex: a wrapping row
   could not guarantee the sequence stayed intact, and six capped cards plus five
   arrow elements overflowed the container, orphaning step 6 onto its own row.
   The <ol> carries the order for assistive tech; the visible numeral duplicates
   it and is aria-hidden. Column count is explicit at every breakpoint. */
.dd-svc-journey {
  --dd-svc-gap: clamp(.875rem, 1.4vw, 1.5rem);
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--dd-svc-gap);
  align-items: stretch;
}
.dd-svc-journey__step {
  position: relative; width: 100%; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r);
  padding: 1.25rem .85rem; text-align: center; box-shadow: var(--dd-shadow-sm);
  overflow-wrap: break-word;
}
.dd-svc-journey__num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--dd-pill); background: var(--dd-primary-050); color: var(--dd-primary-700); font-weight: 700; font-size: .85rem; margin-bottom: .65rem; flex-shrink: 0; }
.dd-svc-journey__step b { display: block; font-size: .93rem; font-weight: 600; line-height: 1.35; }

/* Arrows exist only where all six cards share one row. Drawn as an empty
   pseudo-element (content:"" — nothing for a screen reader to announce), sized
   to the grid gap so it can never widen a column or cause overflow. The rotate
   is a one-off shape transform, not motion. */
@media (min-width: 1200px) {
  .dd-svc-journey__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + var(--dd-svc-gap) / 2);
    width: 9px; height: 9px;
    border-top: 2px solid var(--dd-primary-100);
    border-right: 2px solid var(--dd-primary-100);
    transform: translate(-50%, -50%) rotate(45deg);
    pointer-events: none;
  }
}

/* availability: an information panel, deliberately calm rather than a warning box */
.dd-svc-availability { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: var(--dd-shadow-sm); max-width: 920px; margin-inline: auto; }
.dd-svc-availability > p { color: var(--dd-muted); margin: 0 0 1.5rem; font-size: 1rem; }
.dd-svc-availability .dd-svc-list { grid-template-columns: repeat(2, 1fr); gap: .9rem 2rem; }

/* final CTA on plain white */
.dd-svc-cta { max-width: 680px; margin-inline: auto; text-align: center; }
.dd-svc-cta h2 { font-size: clamp(1.85rem, 4.2vw, 2.85rem); font-weight: 800; line-height: 1.14; letter-spacing: -.02em; margin: 0 0 1rem; }
.dd-svc-cta p { color: var(--dd-muted); font-size: 1.03rem; margin: 0 auto 2rem; max-width: 52ch; }
.dd-svc-cta__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* journey column counts — explicit at every breakpoint, row-major order preserved */
@media (max-width: 1199px) {
  .dd-svc-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); }  /* 1,2,3 / 4,5,6 */
}
@media (max-width: 767px) {
  .dd-svc-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* 1,2 / 3,4 / 5,6 */
}
@media (max-width: 640px) {
  .dd-svc-journey { grid-template-columns: 1fr; }                        /* stacked 1..6 */
}

@media (max-width: 991px) {
  .dd-svc-detail { grid-template-columns: 1fr; }
  /* the hero centres its text at this width; the panel must stay left-aligned */
  .dd-svc-hero__panel { max-width: 560px; margin-inline: auto; }
  .dd-svc-detail p, .dd-svc-list li { text-align: left; }
}
@media (max-width: 640px) {
  .dd-svc-availability .dd-svc-list { grid-template-columns: 1fr; }
  .dd-svc-cta__actions .dd-btn { width: 100%; }
}

/* ==========================================================================
   Contact page. Namespaced `dd-contact-`. Reuses the shared hero, sections,
   grids, cards, icon blocks and buttons. No animation, no keyframes, no JS
   dependency — every channel is a plain link that works without script.
   ========================================================================== */

/* channel cards are real links, so they need hover/focus treatment on top of
   .dd-card, which is otherwise a static container */
.dd-contact-card { display: flex; flex-direction: column; height: 100%; }
.dd-contact-card:hover { border-color: var(--dd-primary-100); }
.dd-contact-card__meta {
  margin-top: auto; padding-top: .9rem; font-weight: 600; font-size: .95rem;
  color: var(--dd-primary-700);
  /* phone and email strings must never widen the card on a 320px screen */
  overflow-wrap: anywhere; word-break: break-word;
}
.dd-contact-card__meta i { font-size: .8rem; margin-left: .35rem; }
/* the global focus ring squares the corners off; keep the card radius */
.dd-contact-card:focus-visible { border-radius: var(--dd-r-lg); }

/* guidance panel: what to include, and what not to send */
.dd-contact-guidance { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.6rem, 3.5vw, 2.5rem); box-shadow: var(--dd-shadow-sm); max-width: 880px; margin-inline: auto; }
.dd-contact-guidance > p { color: var(--dd-muted); margin: 0 0 1.5rem; }
.dd-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.dd-contact-list li { display: flex; gap: .75rem; align-items: flex-start; color: var(--dd-ink-soft); font-size: .97rem; }
.dd-contact-list i { color: var(--dd-teal); font-size: 1.05rem; line-height: 1.5; flex-shrink: 0; }

/* expectations panel */
.dd-contact-expect { max-width: 880px; margin-inline: auto; }
.dd-contact-expect .dd-contact-list { grid-template-columns: repeat(2, 1fr); gap: .9rem 2rem; }

/* emergency notice: white so it separates from the soft section behind it;
   icon plus bold label, so meaning never rests on colour alone */
.dd-contact-emergency {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--dd-line);
  border-left: 4px solid var(--dd-primary);
  border-radius: var(--dd-r); padding: 1.25rem 1.4rem;
  max-width: 880px; margin-inline: auto;
}
.dd-contact-emergency i { color: var(--dd-primary-700); font-size: 1.35rem; line-height: 1.4; flex-shrink: 0; }
/* privacy variant: teal accent distinguishes guidance from the safety notice,
   but both carry an icon and a bold label so colour is never the only signal */
.dd-contact-emergency--privacy { border-left-color: var(--dd-teal); margin-top: 1.75rem; max-width: none; }
.dd-contact-emergency--privacy i { color: var(--dd-teal); }
.dd-contact-emergency strong { display: block; color: var(--dd-ink); font-size: .95rem; margin-bottom: .3rem; }
.dd-contact-emergency p { color: var(--dd-ink-soft); font-size: .97rem; margin: 0; }

/* final CTA on plain white */
.dd-contact-cta { max-width: 680px; margin-inline: auto; text-align: center; }
.dd-contact-cta h2 { font-size: clamp(1.85rem, 4.2vw, 2.85rem); font-weight: 800; line-height: 1.14; letter-spacing: -.02em; margin: 0 0 1rem; }
.dd-contact-cta p { color: var(--dd-muted); font-size: 1.03rem; margin: 0 auto 2rem; max-width: 52ch; }
.dd-contact-cta__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

@media (max-width: 640px) {
  .dd-contact-expect .dd-contact-list { grid-template-columns: 1fr; }
  .dd-contact-cta__actions .dd-btn { width: 100%; }
}

/* ==========================================================================
   How It Works page. Namespaced `dd-hiw-`. Reuses the shared hero, sections,
   grids, cards, icon blocks, buttons and the existing .dd-faq details/summary
   styling. No animation, no keyframes, no JS dependency.
   ========================================================================== */

/* Care journey: explicit grid, never wrapping flex, so the six steps cannot
   reorder or orphan. Arrows are pseudo-elements sized to the gap. */
.dd-hiw-journey {
  --dd-hiw-gap: clamp(.875rem, 1.4vw, 1.5rem);
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--dd-hiw-gap);
  align-items: stretch;
}
.dd-hiw-step {
  position: relative; width: 100%; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r);
  padding: 1.35rem .9rem; text-align: center; box-shadow: var(--dd-shadow-sm);
  overflow-wrap: break-word;
}
.dd-hiw-step__num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--dd-pill); background: var(--dd-primary-050); color: var(--dd-primary-700); font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.dd-hiw-step i { font-size: 1.35rem; color: var(--dd-primary); margin: .7rem 0 .55rem; }
.dd-hiw-step b { display: block; font-size: .93rem; font-weight: 650; line-height: 1.35; }
.dd-hiw-step p { color: var(--dd-muted); font-size: .86rem; line-height: 1.45; margin: .4rem 0 0; }

/* arrows only where all six share one row; content:"" so nothing is announced */
@media (min-width: 1200px) {
  .dd-hiw-step:not(:last-child)::after {
    content: "";
    position: absolute; top: 2.05rem;
    left: calc(100% + var(--dd-hiw-gap) / 2);
    width: 9px; height: 9px;
    border-top: 2px solid var(--dd-primary-100);
    border-right: 2px solid var(--dd-primary-100);
    transform: translate(-50%, -50%) rotate(45deg);
    pointer-events: none;
  }
}

/* narrative beside a supporting panel; DOM order always matches reading order */
.dd-hiw-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.dd-hiw-split p { color: var(--dd-ink-soft); font-size: 1.02rem; margin: 0 0 1.05rem; max-width: 62ch; }
.dd-hiw-split p:last-of-type { margin-bottom: 0; }
.dd-hiw-panel { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--dd-shadow-sm); }
.dd-hiw-panel h3 { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dd-primary-700); margin: 0 0 1.1rem; }

.dd-hiw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.dd-hiw-list li { display: flex; gap: .75rem; align-items: flex-start; color: var(--dd-ink-soft); font-size: .97rem; }
.dd-hiw-list i { color: var(--dd-teal); font-size: 1.05rem; line-height: 1.5; flex-shrink: 0; }

/* notes: body-size text, icon plus bold label, so meaning never rests on colour */
.dd-hiw-note { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-teal); border-radius: var(--dd-r); padding: 1.15rem 1.35rem; margin-top: 1.75rem; }
.dd-hiw-note i { color: var(--dd-teal); font-size: 1.3rem; line-height: 1.4; flex-shrink: 0; }
.dd-hiw-note strong { display: block; color: var(--dd-ink); font-size: .93rem; margin-bottom: .25rem; }
.dd-hiw-note p { color: var(--dd-ink-soft); font-size: .97rem; margin: 0; max-width: none; }
.dd-hiw-note--clinical { border-left-color: var(--dd-primary); }
.dd-hiw-note--clinical i { color: var(--dd-primary-700); }

/* suitability comparison: two balanced columns, each self-labelling */
.dd-hiw-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.dd-hiw-compare__col { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--dd-shadow-sm); }
.dd-hiw-compare__head { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.15rem; font-size: 1.05rem; font-weight: 650; color: var(--dd-ink); }
.dd-hiw-compare__head i { font-size: 1.25rem; flex-shrink: 0; }
.dd-hiw-compare__col--online .dd-hiw-compare__head i { color: var(--dd-teal); }
.dd-hiw-compare__col--inperson .dd-hiw-compare__head i { color: var(--dd-primary-700); }
.dd-hiw-compare__col--inperson .dd-hiw-list i { color: var(--dd-primary-700); }

/* emergency panel */
.dd-hiw-emergency { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-primary); border-radius: var(--dd-r); padding: 1.25rem 1.4rem; max-width: 880px; margin-inline: auto; }
.dd-hiw-emergency i { color: var(--dd-primary-700); font-size: 1.35rem; line-height: 1.4; flex-shrink: 0; }
.dd-hiw-emergency strong { display: block; color: var(--dd-ink); font-size: .95rem; margin-bottom: .3rem; }
.dd-hiw-emergency p { color: var(--dd-ink-soft); font-size: .97rem; margin: 0; }

/* final CTA */
.dd-hiw-cta { max-width: 680px; margin-inline: auto; text-align: center; }
.dd-hiw-cta h2 { font-size: clamp(1.85rem, 4.2vw, 2.85rem); font-weight: 800; line-height: 1.14; letter-spacing: -.02em; margin: 0 0 1rem; }
.dd-hiw-cta p { color: var(--dd-muted); font-size: 1.03rem; margin: 0 auto 2rem; max-width: 52ch; }
.dd-hiw-cta__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* journey column counts — explicit at every breakpoint, row-major order kept */
@media (max-width: 1199px) {
  .dd-hiw-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* 1,2,3 / 4,5,6 */
}
@media (max-width: 767px) {
  .dd-hiw-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 1,2 / 3,4 / 5,6 */
}
@media (max-width: 991px) {
  .dd-hiw-split { grid-template-columns: 1fr; }
  .dd-hiw-split p, .dd-hiw-list li { text-align: left; }
}
@media (max-width: 640px) {
  .dd-hiw-journey { grid-template-columns: 1fr; }                          /* stacked 1..6 */
  .dd-hiw-compare { grid-template-columns: 1fr; }
  .dd-hiw-cta__actions .dd-btn { width: 100%; }
}

/* ==========================================================================
   Book Appointment page. Namespaced `dd-book-`. Reuses the shared sections,
   grids, cards, icon blocks and buttons. No animation, no keyframes, no
   JS-dependent visibility — the form renders and submits without script.
   ========================================================================== */

/* form beside its support panel */
.dd-book-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }

.dd-book-form { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--dd-shadow-sm); }
.dd-book-form fieldset { border: 0; margin: 0 0 1.75rem; padding: 0; min-width: 0; }
.dd-book-form fieldset:last-of-type { margin-bottom: 1.25rem; }
.dd-book-form legend { padding: 0; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dd-primary-700); margin-bottom: 1rem; }

.dd-book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.dd-book-field { display: flex; flex-direction: column; min-width: 0; }
.dd-book-field--full { grid-column: 1 / -1; }

.dd-book-label { font-size: .9rem; font-weight: 600; color: var(--dd-ink); margin-bottom: .4rem; }
/* asterisk is decorative; the native `required` attribute is what AT announces,
   so the requirement never depends on colour or on the glyph alone */
.dd-book-required { color: var(--dd-primary-700); margin-left: .15rem; }
.dd-book-legend-note { font-size: .85rem; color: var(--dd-muted); margin: 0 0 1.5rem; }

.dd-book-input {
  width: 100%; min-width: 0; font: inherit; font-size: .97rem; color: var(--dd-ink);
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r);
  padding: .7rem .85rem; min-height: 46px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dd-book-input::placeholder { color: var(--dd-muted); }
.dd-book-input:hover { border-color: var(--dd-muted); }
.dd-book-input:focus { border-color: var(--dd-primary-600); box-shadow: 0 0 0 3px var(--dd-primary-050); }
textarea.dd-book-input { min-height: 118px; resize: vertical; line-height: 1.55; }
select.dd-book-input { appearance: auto; cursor: pointer; }

.dd-book-hint { font-size: .85rem; color: var(--dd-muted); margin: .4rem 0 0; }

/* validation — dark red for AA contrast, and always paired with text */
.dd-book-validation { display: block; font-size: .85rem; font-weight: 500; color: var(--dd-primary-800); margin-top: .35rem; }
.dd-book-validation:empty { display: none; }
.dd-book-summary { border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-primary); background: #fff; border-radius: var(--dd-r); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.dd-book-summary ul { margin: 0; padding-left: 1.15rem; color: var(--dd-primary-800); font-size: .92rem; }
.dd-book-summary ul:empty { display: none; }
.dd-book-summary p { margin: 0 0 .4rem; font-weight: 650; color: var(--dd-ink); font-size: .93rem; }
/* the framework stamps validation-summary-valid while ModelState is clean; scoped
   under .dd-book-form so this can never affect a form on another page */
.dd-book-form .dd-book-summary.validation-summary-valid { display: none; }

/* submitted-request confirmation, rendered server-side (no toast, no script) */
.dd-book-status { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-teal); border-radius: var(--dd-r); padding: 1.15rem 1.35rem; margin-bottom: 1.75rem; }
.dd-book-status i { color: var(--dd-teal); font-size: 1.3rem; line-height: 1.4; flex-shrink: 0; }
.dd-book-status strong { display: block; color: var(--dd-ink); font-size: .95rem; margin-bottom: .25rem; }
.dd-book-status p { color: var(--dd-ink-soft); font-size: .95rem; margin: 0; }

/* support panel */
.dd-book-support { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.4rem, 2.5vw, 1.9rem); box-shadow: var(--dd-shadow-sm); position: sticky; top: calc(var(--dd-nav-h) + 1.25rem); }
.dd-book-support h2 { font-size: 1.05rem; font-weight: 650; margin: 0 0 1rem; }
.dd-book-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.dd-book-list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--dd-ink-soft); font-size: .94rem; }
.dd-book-list i { color: var(--dd-teal); font-size: 1rem; line-height: 1.5; flex-shrink: 0; }
.dd-book-support__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem; font-size: .9rem; font-weight: 600; color: var(--dd-primary-700); text-decoration: underline; }

/* what happens next — numbered sequence */
.dd-book-next { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); counter-reset: none; }
.dd-book-next li { position: relative; min-width: 0; background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r); padding: 1.3rem 1rem; text-align: center; box-shadow: var(--dd-shadow-sm); }
.dd-book-next__num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--dd-pill); background: var(--dd-primary-050); color: var(--dd-primary-700); font-weight: 700; font-size: .85rem; margin-bottom: .6rem; }
.dd-book-next b { display: block; font-size: .95rem; font-weight: 650; }
.dd-book-next p { color: var(--dd-muted); font-size: .87rem; margin: .35rem 0 0; line-height: 1.45; }

/* availability + privacy panels */
.dd-book-availability, .dd-book-privacy { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.6rem, 3.5vw, 2.4rem); box-shadow: var(--dd-shadow-sm); max-width: 900px; margin-inline: auto; }
.dd-book-availability > p, .dd-book-privacy > p { color: var(--dd-muted); margin: 0 0 1.4rem; }
.dd-book-availability .dd-book-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 2rem; }

/* emergency panel */
.dd-book-emergency { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-primary); border-radius: var(--dd-r); padding: 1.25rem 1.4rem; max-width: 900px; margin-inline: auto; }
.dd-book-emergency i { color: var(--dd-primary-700); font-size: 1.35rem; line-height: 1.4; flex-shrink: 0; }
/* billing-guidance variant: teal accent so it reads as information, not as the
   red safety warning. Icon + bold label carry the meaning, never colour alone. */
.dd-book-emergency--billing { border-left-color: var(--dd-teal); }
.dd-book-emergency--billing i { color: var(--dd-teal); }
.dd-book-emergency strong { display: block; color: var(--dd-ink); font-size: .95rem; margin-bottom: .3rem; }
.dd-book-emergency p { color: var(--dd-ink-soft); font-size: .97rem; margin: 0; }

/* alternative support CTA */
.dd-book-help { max-width: 680px; margin-inline: auto; text-align: center; }
.dd-book-help h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 1rem; }
.dd-book-help p { color: var(--dd-muted); font-size: 1.02rem; margin: 0 auto 2rem; max-width: 52ch; }
.dd-book-help__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

@media (max-width: 991px) {
  .dd-book-layout { grid-template-columns: 1fr; }
  .dd-book-support { position: static; }
  .dd-book-next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dd-book-grid { grid-template-columns: 1fr; }
  .dd-book-next { grid-template-columns: 1fr; }
  .dd-book-availability .dd-book-list { grid-template-columns: 1fr; }
  .dd-book-help__actions .dd-btn { width: 100%; }
}

/* ==========================================================================
   FEEDBACK PAGE (dd-feedback-*)
   ========================================================================== */

/* --- hero --- */
/* The feedback hero's own action class is gone: that hero now uses the shared
   .dd-hero__actions like every other one. */

/* --- purpose --- */
.dd-feedback-purpose__grid { margin-top: clamp(2rem, 4vw, 3rem); }
.dd-feedback-purpose__note {
  display: flex; gap: .85rem; align-items: flex-start;
  max-width: 820px; margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  background: #fff; border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-teal);
  border-radius: var(--dd-r); padding: 1.15rem 1.35rem;
  color: var(--dd-ink-soft); font-size: .95rem;
}
.dd-feedback-purpose__note i { color: var(--dd-teal); font-size: 1.2rem; line-height: 1.4; flex-shrink: 0; }

/* --- form layout --- */
.dd-feedback-layout {
  display: grid; grid-template-columns: 1.35fr .65fr;
  gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.dd-feedback-form {
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--dd-shadow-sm);
}
.dd-feedback-form fieldset { border: 0; margin: 0 0 1.75rem; padding: 0; min-width: 0; }
.dd-feedback-form legend {
  padding: 0; font-size: .78rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dd-primary-700); margin-bottom: 1rem;
}

/* --- fields --- */
.dd-feedback-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.dd-feedback-field { display: flex; flex-direction: column; min-width: 0; }
.dd-feedback-label { font-size: .9rem; font-weight: 600; color: var(--dd-ink); margin-bottom: .4rem; }
.dd-feedback-required { color: var(--dd-primary-700); margin-left: .15rem; }
.dd-feedback-input {
  width: 100%; font: inherit; font-size: .95rem; color: var(--dd-ink);
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r);
  padding: .7rem .85rem; min-height: 44px;
}
.dd-feedback-input:hover { border-color: var(--dd-muted); }
.dd-feedback-input:focus { border-color: var(--dd-primary-600); box-shadow: 0 0 0 3px var(--dd-primary-050); }
.dd-feedback-textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.dd-feedback-hint { font-size: .85rem; color: var(--dd-muted); margin: .4rem 0 0; line-height: 1.5; }

/* --- rating group --- */
.dd-feedback-rating .dd-feedback-hint { margin: -.5rem 0 .9rem; }
.dd-feedback-rating__options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; }
.dd-feedback-rating__option { min-width: 0; }
.dd-feedback-rating__option input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dd-feedback-rating__option label {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; min-height: 66px; height: 100%; padding: .55rem .3rem; cursor: pointer;
  text-align: center; border: 1px solid var(--dd-line); border-radius: var(--dd-r);
  background: #fff; color: var(--dd-ink-soft); font-size: .76rem; line-height: 1.25;
}
.dd-feedback-rating__option label span:first-child { font-size: 1.15rem; font-weight: 700; color: var(--dd-ink); }
.dd-feedback-rating__option label:hover { border-color: var(--dd-muted); }
.dd-feedback-rating__option input:checked + label {
  border-color: var(--dd-primary-600); border-width: 2px; padding: calc(.55rem - 1px) calc(.3rem - 1px);
  background: var(--dd-primary-050); color: var(--dd-primary-800); font-weight: 600;
}
.dd-feedback-rating__option input:checked + label span:first-child { color: var(--dd-primary-800); }
.dd-feedback-rating__option input:focus-visible + label { outline: 3px solid var(--dd-primary); outline-offset: 2px; }

/* --- validation --- */
.dd-feedback-validation { display: block; font-size: .85rem; font-weight: 500; color: var(--dd-primary-800); margin-top: .35rem; }
.dd-feedback-validation:empty { display: none; }
.dd-feedback-summary {
  border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-primary);
  background: #fff; border-radius: var(--dd-r); padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.dd-feedback-summary p { margin: 0 0 .4rem; font-weight: 650; color: var(--dd-ink); font-size: .93rem; }
.dd-feedback-summary ul { margin: 0; padding-left: 1.15rem; color: var(--dd-primary-800); font-size: .92rem; }
.dd-feedback-summary ul:empty { display: none; }
.dd-feedback-form .dd-feedback-summary.validation-summary-valid { display: none; }

/* --- success status --- */
.dd-feedback-status {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-teal);
  border-radius: var(--dd-r); padding: 1.15rem 1.35rem; margin-bottom: 1.75rem;
}
.dd-feedback-status i { color: var(--dd-teal); font-size: 1.3rem; line-height: 1.4; flex-shrink: 0; }
.dd-feedback-status strong { display: block; color: var(--dd-ink); font-size: .95rem; margin-bottom: .25rem; }
.dd-feedback-status p { color: var(--dd-ink-soft); font-size: .95rem; margin: 0; }

/* --- submit --- */
.dd-feedback-submit { border-top: 1px solid var(--dd-line); padding-top: 1.35rem; }
.dd-feedback-submit .dd-btn { width: 100%; justify-content: center; }
.dd-feedback-submit .dd-feedback-hint { text-align: center; margin-top: .75rem; }

/* --- aside --- */
.dd-feedback-aside {
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg);
  padding: clamp(1.4rem, 2.5vw, 1.9rem); box-shadow: var(--dd-shadow-sm);
  position: sticky; top: calc(var(--dd-nav-h) + 1.25rem);
}
.dd-feedback-aside h2 { font-size: 1.05rem; font-weight: 650; margin: 0 0 1rem; }
.dd-feedback-aside h2.dd-feedback-aside__second { margin-top: 1.75rem; }
.dd-feedback-aside__link {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem;
  font-size: .9rem; font-weight: 600; color: var(--dd-primary-700); text-decoration: underline;
}
.dd-feedback-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.dd-feedback-list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--dd-ink-soft); font-size: .94rem; }
.dd-feedback-list i { color: var(--dd-teal); font-size: 1rem; line-height: 1.5; flex-shrink: 0; }
.dd-feedback-list--avoid i { color: var(--dd-primary-700); }

/* --- privacy --- */
.dd-feedback-privacy {
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg);
  padding: clamp(1.6rem, 3.5vw, 2.4rem); box-shadow: var(--dd-shadow-sm);
  max-width: 900px; margin-inline: auto;
}
.dd-feedback-privacy > p { color: var(--dd-muted); margin: 0 0 1.4rem; }
.dd-feedback-privacy .dd-h3 { margin: 0 0 1rem; font-size: 1.05rem; }
.dd-feedback-privacy__note {
  margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--dd-line);
  color: var(--dd-muted); font-size: .92rem;
}

/* --- what happens next --- */
.dd-feedback-next {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem);
}
.dd-feedback-next li {
  position: relative; min-width: 0; background: #fff; border: 1px solid var(--dd-line);
  border-radius: var(--dd-r); padding: 1.3rem 1rem; text-align: center; box-shadow: var(--dd-shadow-sm);
}
.dd-feedback-next__num {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: var(--dd-pill); background: var(--dd-primary-050); color: var(--dd-primary-700);
  font-weight: 700; font-size: .85rem; margin-bottom: .6rem;
}
.dd-feedback-next b { display: block; font-size: .95rem; font-weight: 650; }
.dd-feedback-next p { color: var(--dd-muted); font-size: .87rem; margin: .35rem 0 0; line-height: 1.45; }

/* --- clinical panel --- */
.dd-feedback-clinical {
  display: flex; gap: 1.15rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg);
  padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--dd-shadow-sm);
  max-width: 900px; margin-inline: auto;
}
.dd-feedback-clinical .dd-h3 { margin: 0 0 .5rem; }
.dd-feedback-clinical p { color: var(--dd-ink-soft); margin: 0 0 1.15rem; }
.dd-feedback-clinical__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* --- support --- */
.dd-feedback-support {
  display: flex; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; justify-content: space-between;
  flex-wrap: wrap; background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg);
  padding: clamp(1.6rem, 3.5vw, 2.4rem); box-shadow: var(--dd-shadow-sm);
  max-width: 900px; margin-inline: auto;
}
.dd-feedback-support h2 { margin: 0 0 .5rem; }
.dd-feedback-support p { color: var(--dd-ink-soft); margin: 0; max-width: 52ch; }

/* --- emergency --- */
.dd-feedback-emergency {
  display: flex; gap: 1.15rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--dd-line); border-left: 5px solid var(--dd-primary-700);
  border-radius: var(--dd-r-lg); padding: clamp(1.4rem, 3vw, 1.9rem);
  max-width: 900px; margin-inline: auto;
}
.dd-feedback-emergency i { color: var(--dd-primary-700); font-size: 1.5rem; line-height: 1.3; flex-shrink: 0; }
.dd-feedback-emergency .dd-h3 { margin: 0 0 .45rem; }
.dd-feedback-emergency p { color: var(--dd-ink-soft); margin: 0; }

/* --- final CTA --- */
.dd-feedback-cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.5rem; }

/* --- responsive --- */
@media (max-width: 991px) {
  .dd-feedback-layout { grid-template-columns: 1fr; }
  .dd-feedback-aside { position: static; }
  .dd-feedback-next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .dd-feedback-rating__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dd-feedback-grid { grid-template-columns: 1fr; }
  .dd-feedback-next { grid-template-columns: 1fr; }
  .dd-feedback-rating__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-feedback-cta .dd-btn,
  .dd-feedback-clinical__actions .dd-btn,
  .dd-feedback-support > .dd-btn { width: 100%; justify-content: center; }
  .dd-feedback-support { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   PRIVACY PAGE (dd-privacy-*)
   ========================================================================== */

/* --- layout --- */
.dd-privacy-body { padding-top: clamp(2rem, 4vw, 3rem); }
.dd-privacy-layout {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start;
}

/* --- in-page navigation --- */
.dd-privacy-nav {
  position: sticky; top: calc(var(--dd-nav-h) + 1.25rem);
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg);
  padding: 1.35rem 1.4rem; box-shadow: var(--dd-shadow-sm);
}
.dd-privacy-nav h2 { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dd-primary-700); margin: 0 0 .9rem; }
.dd-privacy-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dd-privacy-nav a { display: block; font-size: .9rem; line-height: 1.4; color: var(--dd-ink-soft); text-decoration: none; }
.dd-privacy-nav a:hover { color: var(--dd-primary-700); text-decoration: underline; }
.dd-privacy-nav a:focus-visible { outline: 3px solid var(--dd-primary); outline-offset: 2px; border-radius: 3px; }

/* --- content --- */
.dd-privacy-content { min-width: 0; }
.dd-privacy-section { scroll-margin-top: calc(var(--dd-nav-h) + 1.5rem); }
.dd-privacy-section + .dd-privacy-section { margin-top: clamp(2.25rem, 4vw, 3.25rem); padding-top: clamp(2.25rem, 4vw, 3.25rem); border-top: 1px solid var(--dd-line); }
.dd-privacy-section .dd-h2 { margin: 0 0 1rem; }
.dd-privacy-section .dd-h3 { margin: 1.6rem 0 .5rem; font-size: 1.02rem; }
.dd-privacy-section .dd-h3:first-of-type { margin-top: 1.1rem; }
.dd-privacy-section p { color: var(--dd-ink-soft); margin: 0 0 1rem; max-width: 68ch; }
.dd-privacy-section a { color: var(--dd-primary-700); text-decoration: underline; }

/* --- lists --- */
.dd-privacy-list { margin: 0 0 1.25rem; padding-left: 1.3rem; color: var(--dd-ink-soft); max-width: 68ch; }
.dd-privacy-list li { margin-bottom: .55rem; line-height: 1.6; }
.dd-privacy-list li:last-child { margin-bottom: 0; }
.dd-privacy-list strong { color: var(--dd-ink); }

/* --- inline note --- */
.dd-privacy-note {
  background: var(--dd-primary-050); border-left: 4px solid var(--dd-primary-600);
  border-radius: var(--dd-r); padding: .9rem 1.15rem;
  font-size: .93rem; color: var(--dd-ink-soft); margin: 1.25rem 0 0; max-width: 68ch;
}

/* --- security notice --- */
.dd-privacy-notice {
  display: flex; gap: .9rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-teal);
  border-radius: var(--dd-r); padding: 1.05rem 1.25rem; margin-top: 1.25rem; max-width: 68ch;
}
.dd-privacy-notice i { color: var(--dd-teal); font-size: 1.2rem; line-height: 1.4; flex-shrink: 0; }
.dd-privacy-notice p { margin: 0; font-size: .94rem; }

/* --- emergency panel --- */
.dd-privacy-emergency {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--dd-line); border-left: 5px solid var(--dd-primary-700);
  border-radius: var(--dd-r-lg); padding: clamp(1.3rem, 3vw, 1.8rem); max-width: 68ch;
}
.dd-privacy-emergency i { color: var(--dd-primary-700); font-size: 1.45rem; line-height: 1.3; flex-shrink: 0; }
.dd-privacy-emergency .dd-h3 { margin: 0 0 .45rem; }
.dd-privacy-emergency p { margin: 0; }

/* --- final CTA --- */
.dd-privacy-cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.5rem; }

/* --- responsive --- */
@media (max-width: 991px) {
  .dd-privacy-layout { grid-template-columns: 1fr; }
  .dd-privacy-nav { position: static; }
  .dd-privacy-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.25rem; }
}
@media (max-width: 640px) {
  .dd-privacy-nav ul { grid-template-columns: 1fr; }
  .dd-privacy-cta .dd-btn { width: 100%; justify-content: center; }
}