/* ==========================================================================
   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;

  /* 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 1.25rem; }
.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%); }
.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); }
.dd-hero h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 1.1rem; }
.dd-hero p { font-size: clamp(1.02rem, 1.6vw, 1.22rem); color: var(--dd-ink-soft); max-width: 34rem; margin: 0 0 1.75rem; }
.dd-hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.75rem; }
.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 --- */
.dd-feedback-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.75rem; }

/* --- 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-hero__actions .dd-btn,
  .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; }
}