/* Guided care flow (Core 1.2.26). Three skins switch with the visitor's answer to "Who is this for?":
   blue (default), rose (Myself – Female) and pride (LGBTQ+). Everything reads the --f-* tokens. */
.dsh-flow {
  --f-accent: #0758e8; --f-accent-2: #2ab4f8; --f-ink: #0f2a44; --f-muted: #5b6f88; --f-line: #dfe8f4;
  --f-soft: #eaf3ff; --f-tint: #0758e8; --f-grad: linear-gradient(105deg, #2b7cf0, #0758e8);
  --f-ring: linear-gradient(135deg, #2ab4f8, #0758e8);
  --f-page: radial-gradient(70% 60% at 100% 0%, #dcebff 0, transparent 70%), radial-gradient(60% 50% at 0% 100%, #e3f7ff 0, transparent 70%), #f5f9ff;
  --f-glow: #0758e8;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(28px, 4vw, 64px); align-items: start;
  max-width: 1180px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 56px);
  border-radius: 32px; background: var(--f-page); color: var(--f-ink); font-family: var(--dsh-body, inherit);
  transition: background .5s;
}
.dsh-flow[data-theme="rose"] {
  --f-accent: #e2457a; --f-accent-2: #ff8fb1; --f-soft: #ffeef4; --f-tint: #d6336c; --f-line: #f6dbe5;
  --f-grad: linear-gradient(105deg, #ff6f9f, #e2457a); --f-ring: linear-gradient(135deg, #ff8fb1, #e2457a);
  --f-page: radial-gradient(70% 60% at 100% 0%, #ffe1ec 0, transparent 70%), radial-gradient(60% 50% at 0% 100%, #f3e8ff 0, transparent 70%), #fff7fa;
  --f-glow: #e2457a;
}
.dsh-flow[data-theme="pride"] {
  --f-accent: #7a4dff; --f-accent-2: #3d9cff; --f-soft: #f2eeff; --f-tint: #7a4dff; --f-line: #e8e2fa;
  --f-grad: linear-gradient(90deg, #ff6b3d, #f7a23b, #f2d43a, #4cc76a, #3d9cff, #8a5cf6);
  --f-ring: linear-gradient(135deg, #ff6b3d, #f2d43a, #4cc76a, #3d9cff, #8a5cf6);
  --f-page: radial-gradient(60% 50% at 100% 0%, #ffe8dc 0, transparent 70%), radial-gradient(60% 50% at 0% 100%, #e7f0ff 0, transparent 70%), radial-gradient(40% 40% at 60% 50%, #f3eaff 0, transparent 70%), #fffaf7;
  --f-glow: #8a5cf6;
}
.dsh-flow .dsh-flow-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Side panel (desktop) */
.dsh-flow-side { position: sticky; top: 110px; padding-top: 12px; }
.dsh-flow-brand { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: #fff; color: var(--f-tint); font: 700 13px/1 var(--dsh-body, inherit); box-shadow: 0 6px 18px -12px #0f2a4466; }
.dsh-site .dsh-flow-side h2 { margin: 18px 0 12px; color: var(--f-ink); font: 800 clamp(30px, 3.4vw, 44px)/1.08 var(--dsh-font, inherit); letter-spacing: -.035em; }
.dsh-site .dsh-flow-side p { margin: 0 0 26px; color: var(--f-muted); font-size: 16.5px; line-height: 1.6; max-width: 42ch; }
.dsh-flow-steps { display: grid; gap: 4px; margin: 0 0 28px; padding: 0; list-style: none; counter-reset: none; }
.dsh-flow-steps li { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: #8a9ab0; font-weight: 600; font-size: 15px; }
.dsh-flow-steps li::before { content: none !important; }
.dsh-flow-steps span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #cfd9e6; background: #fff; font-size: 12.5px; font-weight: 800; }
.dsh-flow-steps .dsh-flow-ic { width: 14px; height: 14px; }
.dsh-flow-steps .is-done { color: var(--f-ink); }
.dsh-flow-steps .is-done span { border: 0; background: var(--f-grad); color: #fff; }
.dsh-flow-steps .is-now { color: var(--f-ink); font-weight: 800; }
.dsh-flow-steps .is-now span { border: 2px solid var(--f-accent); color: var(--f-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--f-accent) 14%, transparent); }
.dsh-flow-trust { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dsh-flow-trust li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 12px; background: #ffffffb3; color: var(--f-ink); font-size: 13px; font-weight: 600; }
.dsh-flow-trust li::before { content: none !important; }
.dsh-flow-trust .dsh-flow-ic { width: 16px; height: 16px; color: var(--f-tint); }

/* Card */
.dsh-flow-card { position: relative; display: flex; flex-direction: column; min-height: 640px; padding: 22px clamp(18px, 3vw, 30px) 26px; border-radius: 30px; background: #ffffffd9; box-shadow: 0 40px 80px -48px #0f2a4499, 0 2px 0 #fff inset; backdrop-filter: blur(14px); }
.dsh-flow-top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-height: 44px; margin-bottom: 18px; }
.dsh-flow-back { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--f-ink); cursor: pointer; box-shadow: 0 6px 16px -8px #0f2a4466; }
.dsh-flow-back[hidden], .dsh-flow-skip[hidden] { display: block !important; visibility: hidden; }
.dsh-flow-head { display: flex; justify-content: center; }
.dsh-flow-head-title { color: var(--f-ink); font: 800 17px/1.2 var(--dsh-font, inherit); }
.dsh-flow-dots { display: inline-flex; gap: 6px; }
.dsh-flow-dots i { width: 7px; height: 7px; border-radius: 99px; background: #d5deea; transition: width .3s; }
.dsh-flow-dots i.is-on { width: 34px; background: var(--f-grad); }
.dsh-flow-skip { padding: 8px 0; border: 0; background: none; color: var(--f-ink); font: 700 15px/1 var(--dsh-body, inherit); cursor: pointer; justify-self: end; }
.dsh-flow-body { flex: 1; outline: none; animation: dsh-flow-in .35s ease both; }
.dsh-flow-actions { display: grid; gap: 12px; margin-top: 26px; }
@keyframes dsh-flow-in { from { opacity: 0; transform: translateY(8px); } }

/* Type */
.dsh-flow-chip { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 7px 14px 7px 11px; border-radius: 999px; background: #fff; color: var(--f-tint); font: 800 12.5px/1 var(--dsh-body, inherit); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 14px -10px #0f2a4466; }
.dsh-flow-chip .dsh-flow-ic { width: 14px; height: 14px; }
.dsh-site .dsh-flow .dsh-flow-title { margin: 0 0 8px; color: var(--f-ink); font: 800 clamp(26px, 3vw, 32px)/1.15 var(--dsh-font, inherit); letter-spacing: -.03em; outline: none; }
.dsh-site .dsh-flow .dsh-flow-sub { margin: 0 0 22px; color: var(--f-tint); opacity: .85; font-size: 15.5px; line-height: 1.55; }
.dsh-flow[data-theme="blue"] .dsh-flow-sub { color: var(--f-muted); opacity: 1; }
.dsh-flow-hero { display: grid; place-items: center; width: 84px; height: 84px; margin: 4px auto 16px; border-radius: 50%; background: #fff; color: var(--f-tint); box-shadow: 0 14px 32px -16px var(--f-glow); }
.dsh-flow-hero .dsh-flow-ic { width: 34px; height: 34px; }
.dsh-flow-hero.is-alert { color: #e0313d; box-shadow: 0 14px 32px -16px #e0313d; }
.dsh-flow[data-step="who"] .dsh-flow-title, .dsh-flow[data-step="who"] .dsh-flow-sub, .dsh-flow[data-step="recommend"] .dsh-flow-title, .dsh-flow[data-step="recommend"] .dsh-flow-sub, .dsh-flow[data-step="urgent"] .dsh-flow-title, .dsh-flow[data-step="urgent"] .dsh-flow-sub, .dsh-flow[data-step="fulfil"] .dsh-flow-title, .dsh-flow[data-step="fulfil"] .dsh-flow-sub, .dsh-flow-done .dsh-flow-title, .dsh-flow-done .dsh-flow-sub { text-align: center; }
.dsh-flow[data-step="who"] .dsh-flow-chip { display: flex; width: max-content; margin-inline: 0 auto; }
.dsh-flow-h3 { display: block; margin: 0 0 12px; padding: 0; color: var(--f-ink); font: 800 18px/1.3 var(--dsh-font, inherit); }
.dsh-flow-h4 { display: block; margin-bottom: 10px; color: var(--f-muted); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dsh-flow-eyebrow { display: block; margin-bottom: 4px; color: var(--f-tint); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dsh-flow[data-theme="pride"] .dsh-flow-eyebrow { color: #7a4dff; }
.dsh-flow fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

/* Options */
.dsh-flow-list { display: grid; gap: 12px; }
.dsh-flow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dsh-flow-option {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 16px; cursor: pointer;
  border: 2px solid transparent; border-radius: 18px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(#e6edf6, #e6edf6) border-box;
  box-shadow: 0 8px 20px -18px #0f2a4499; transition: transform .2s, box-shadow .2s, background .2s;
}
.dsh-flow-option:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -20px #0f2a4499; }
.dsh-flow-option input { position: absolute; opacity: 0; pointer-events: none; }
.dsh-flow-option:has(input:checked) { background: linear-gradient(color-mix(in srgb, var(--f-soft) 55%, #fff), color-mix(in srgb, var(--f-soft) 55%, #fff)) padding-box, var(--f-ring) border-box; box-shadow: 0 14px 30px -20px var(--f-glow); }
.dsh-flow-option:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--f-accent) 45%, transparent); outline-offset: 3px; }
.dsh-flow-option-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.dsh-flow-option-text b { color: var(--f-ink); font-size: 16px; font-weight: 700; line-height: 1.3; }
.dsh-flow-option-text small { color: var(--f-muted); font-size: 13.5px; line-height: 1.45; }
.dsh-flow-radio { flex: none; width: 22px; height: 22px; border: 2px solid #cdd6e3; border-radius: 50%; background: #fff; transition: border .2s, box-shadow .2s; }
.dsh-flow-option:has(input:checked) .dsh-flow-radio { border: 0; background: radial-gradient(circle, #fff 0 4px, transparent 4.5px), var(--f-ring); box-shadow: 0 0 0 4px color-mix(in srgb, var(--f-accent) 16%, transparent); }
.dsh-flow-bubble { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--f-soft); color: var(--f-tint); }
.dsh-flow-grid .dsh-flow-option { flex-direction: column; justify-content: center; gap: 8px; min-height: 150px; padding: 20px 12px; text-align: center; }
.dsh-flow-grid .dsh-flow-bubble { width: 56px; height: 56px; }
.dsh-flow-grid .dsh-flow-bubble .dsh-flow-ic { width: 24px; height: 24px; }
.dsh-flow-grid .dsh-flow-radio { position: absolute; top: 12px; right: 12px; }
.dsh-flow-grid .dsh-flow-concern-unsure { grid-column: 1 / -1; flex-direction: row; min-height: 72px; text-align: left; }
.dsh-flow-grid .dsh-flow-concern-unsure .dsh-flow-radio { position: static; }
/* Per-option colours (concern and identity), independent of the skin */
.dsh-flow-concern-hiv .dsh-flow-bubble { background: #ffe9ec; color: #e0313d; }
.dsh-flow-concern-sti .dsh-flow-bubble, .dsh-flow-who-male .dsh-flow-bubble { background: #e6f0ff; color: #2b7cf0; }
.dsh-flow-concern-hpv .dsh-flow-bubble, .dsh-flow-who-couple .dsh-flow-bubble { background: #f1eaff; color: #7a4dff; }
.dsh-flow-concern-premarriage .dsh-flow-bubble { background: #e2f8ef; color: #0d9b67; }
.dsh-flow-concern-fullbody .dsh-flow-bubble { background: #fff1e3; color: #e3791c; }
.dsh-flow-who-female .dsh-flow-bubble { background: #ffe9f1; color: #e2457a; }
.dsh-flow-who-lgbtq .dsh-flow-bubble { background: #fff2e6; color: #e85d2b; }
.dsh-flow-who-private .dsh-flow-bubble { background: #eef1f6; color: #5b6f88; }
.dsh-flow-concern-unsure { background: linear-gradient(#fff, #fff) padding-box, var(--f-ring) border-box !important; }
.dsh-flow-concern-unsure b { color: var(--f-tint) !important; }

/* Triage */
.dsh-flow-panel { display: grid; gap: 12px; margin-bottom: 14px; padding: 18px; border-radius: 22px; background: #fff; box-shadow: 0 12px 30px -24px #0f2a4499; }
.dsh-flow-panel > legend { display: flex; align-items: center; gap: 10px; float: left; width: 100%; margin-bottom: 12px; padding: 0; color: var(--f-ink); font: 800 17px/1.3 var(--dsh-font, inherit); }
.dsh-flow-num { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--f-soft); color: var(--f-tint); font-size: 14px; }
.dsh-flow-list.is-plain { clear: both; gap: 10px; }
.dsh-flow-list.is-plain .dsh-flow-option, .dsh-flow-pair .dsh-flow-option { min-height: 54px; padding: 12px 16px; box-shadow: none; }
.dsh-flow-list.is-plain .dsh-flow-radio { order: -1; }
.dsh-flow-urgent { margin-left: auto; color: #e0313d; font-size: 13px; font-style: normal; font-weight: 800; }
.dsh-flow-pair { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dsh-flow-pair .dsh-flow-option { justify-content: center; text-align: center; }
.dsh-flow-pair .dsh-flow-radio { display: none; }
.dsh-flow-pair .dsh-flow-option-text b { font-size: 15.5px; }
.dsh-flow-safe { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; color: var(--f-tint); font-size: 14px; font-weight: 600; }
.dsh-flow-safe .dsh-flow-ic { width: 16px; height: 16px; }
.dsh-flow-error { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: #fff0f1; color: #b4232f; font-size: 14px; font-weight: 600; }

/* Recommendation */
.dsh-flow-tests { display: grid; gap: 14px; margin-top: 6px; }
.dsh-flow-test { position: relative; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 16px 36px -28px #0f2a44aa; }
.dsh-flow-test.is-upgrade { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--f-ring) border-box; box-shadow: 0 28px 50px -32px var(--f-glow); }
.dsh-flow-test-band { padding: 12px; background: var(--f-grad); color: #fff; font: 800 12.5px/1 var(--dsh-body, inherit); letter-spacing: .32em; text-align: center; text-transform: uppercase; text-shadow: 0 1px 2px #0003; }
.dsh-flow-test-tag { display: block; padding: 18px 20px 0; color: var(--f-muted); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.dsh-flow-test-body { padding: 16px 20px 18px; }
.dsh-site .dsh-flow-test h3 { margin: 0 0 6px; color: var(--f-ink); font: 800 22px/1.2 var(--dsh-font, inherit); letter-spacing: -.02em; }
.dsh-flow-test.is-basic h3 { font-size: 19px; }
.dsh-site .dsh-flow-price { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.dsh-flow-price strong { color: var(--f-ink); font: 800 28px/1 var(--dsh-font, inherit); }
.dsh-flow-test.is-upgrade .dsh-flow-price strong { background: var(--f-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dsh-flow-price del { color: #8a9ab0; font-size: 15px; }
.dsh-flow-save { display: inline-block; margin-bottom: 10px; padding: 5px 12px; border-radius: 999px; background: var(--f-grad); color: #fff; font-size: 12.5px; font-weight: 800; text-shadow: 0 1px 1px #0003; }
.dsh-site .dsh-flow-why { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--f-soft); color: var(--f-tint); font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.dsh-flow-feats { display: grid; margin: 0 0 10px; padding: 0; list-style: none; }
.dsh-flow-feats li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #edf2f8; color: var(--f-ink); font-size: 14.5px; line-height: 1.4; }
.dsh-flow-feats li::before { content: none !important; }
.dsh-flow-feats .dsh-flow-bubble { width: 36px; height: 36px; }
.dsh-flow-feats .dsh-flow-ic { width: 17px; height: 17px; }
.dsh-flow-feats li:nth-child(4n+2) .dsh-flow-bubble { background: #f1eaff; color: #7a4dff; }
.dsh-flow-feats li:nth-child(4n+3) .dsh-flow-bubble { background: #ffe9f1; color: #e2457a; }
.dsh-flow-feats li:nth-child(4n+4) .dsh-flow-bubble { background: #e2f8ef; color: #0d9b67; }
.dsh-flow-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--f-tint) !important; font-weight: 700; text-decoration: none !important; }
.dsh-flow-link .dsh-flow-ic { width: 16px; height: 16px; }
.dsh-flow-also { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border: 1px dashed color-mix(in srgb, var(--f-accent) 40%, #fff); border-radius: 18px; background: #fff; color: var(--f-ink) !important; text-decoration: none !important; }
.dsh-flow-also > span:nth-child(2) { display: grid; flex: 1; }
.dsh-flow-also small { color: var(--f-muted); }
.dsh-flow-also-go { display: inline-flex; align-items: center; gap: 4px; color: var(--f-tint); font-weight: 800; font-size: 14px; }
.dsh-flow-points { display: grid; gap: 12px; margin: 6px 0 0; padding: 0; list-style: none; }
.dsh-flow-points li { display: flex; gap: 12px; padding: 16px; border-radius: 18px; background: #fff; color: var(--f-muted); font-size: 14.5px; line-height: 1.5; }
.dsh-flow-points li::before { content: none !important; }
.dsh-flow-points .dsh-flow-ic { color: var(--f-tint); margin-top: 2px; }
.dsh-flow-points b { display: block; color: var(--f-ink); }

/* Fulfilment, schedule, details, payment */
.dsh-flow-badge { position: absolute; left: 74px; bottom: -13px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: var(--f-soft); color: var(--f-tint); font-size: 12.5px; font-weight: 800; }
.dsh-flow-badge .dsh-flow-ic { width: 13px; height: 13px; }
.dsh-flow-mode-home { margin-bottom: 14px; }
.dsh-site .dsh-flow-note { display: flex; gap: 10px; margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--f-line); border-radius: 16px; background: #ffffffb3; color: var(--f-muted); font-size: 14px; line-height: 1.5; }
.dsh-flow-note .dsh-flow-ic { color: var(--f-tint); margin-top: 1px; }
.dsh-flow-note b { color: var(--f-tint); }
.dsh-flow-days { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.dsh-flow-day, .dsh-flow-time { position: relative; cursor: pointer; }
.dsh-flow-day input, .dsh-flow-time input { position: absolute; opacity: 0; pointer-events: none; }
.dsh-flow-day { display: grid; place-items: center; flex: none; gap: 2px; min-width: 76px; padding: 10px 8px; border: 1.5px solid var(--f-line); border-radius: 18px; background: #fff; }
.dsh-flow-day span { color: var(--f-tint); font-size: 13px; font-weight: 700; }
.dsh-flow-day b { color: var(--f-ink); font: 800 24px/1 var(--dsh-font, inherit); }
.dsh-flow-day:has(input:checked) { border-color: transparent; background: var(--f-grad); box-shadow: 0 12px 24px -14px var(--f-glow); }
.dsh-flow-day:has(input:checked) :is(span, b) { color: #fff; text-shadow: 0 1px 2px #0003; }
.dsh-flow-period { display: flex; align-items: center; gap: 6px; margin: 18px 0 10px; color: var(--f-tint); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dsh-flow-period .dsh-flow-ic { width: 16px; height: 16px; }
.dsh-flow-times { display: flex; flex-wrap: wrap; gap: 10px; }
.dsh-flow-time span { display: block; padding: 12px 16px; border: 2px solid transparent; border-radius: 14px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(var(--f-line), var(--f-line)) border-box; color: var(--f-ink); font-size: 15px; font-weight: 700; }
.dsh-flow-time:has(input:checked) span { background: linear-gradient(var(--f-soft), var(--f-soft)) padding-box, var(--f-ring) border-box; color: var(--f-tint); }
.dsh-flow-time:has(input:disabled) { cursor: not-allowed; }
.dsh-flow-time:has(input:disabled) span { color: #b8c3d2; }
.dsh-flow-day:has(input:focus-visible), .dsh-flow-time:has(input:focus-visible) span { outline: 3px solid color-mix(in srgb, var(--f-accent) 45%, transparent); outline-offset: 2px; }
.dsh-flow[data-step="schedule"] .dsh-flow-actions { grid-template-columns: 1fr auto; align-items: center; }
.dsh-site .dsh-flow-picked { display: grid; margin: 0; }
.dsh-flow-picked small { color: var(--f-tint); font-size: 14px; font-weight: 700; }
.dsh-flow-picked b { color: var(--f-ink); font: 800 22px/1.2 var(--dsh-font, inherit); }
.dsh-site .dsh-flow-privacy { display: flex; gap: 12px; margin: 0 0 18px; padding: 16px; border: 1px solid var(--f-line); border-radius: 18px; background: linear-gradient(135deg, var(--f-soft), #fff); color: var(--f-muted); font-size: 14px; line-height: 1.5; }
.dsh-flow-privacy b { display: block; color: var(--f-tint); font-size: 16px; }
.dsh-flow-privacy .dsh-flow-bubble { background: #fff; }
.dsh-flow-field { display: grid; gap: 8px; margin-bottom: 16px; }
.dsh-flow-field label { color: var(--f-ink); font-weight: 700; font-size: 15px; }
.dsh-flow-field label i { color: #e0313d; font-style: normal; }
.dsh-flow-input { display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 1.5px solid var(--f-line); border-radius: 16px; background: #fff; transition: border .2s, box-shadow .2s; }
.dsh-flow-input.is-area { align-items: flex-start; padding-top: 14px; }
.dsh-flow-input .dsh-flow-ic { color: var(--f-tint); }
.dsh-flow-input:focus-within { border-color: var(--f-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--f-accent) 14%, transparent); }
.dsh-site .dsh-flow-input :is(input, textarea) { flex: 1; min-width: 0; min-height: 52px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--f-ink); font: 500 16px/1.4 var(--dsh-body, inherit); outline: none; resize: vertical; }
.dsh-site .dsh-flow-input textarea { min-height: 84px; padding-bottom: 12px; }
.dsh-flow-hint { display: flex; align-items: center; gap: 6px; color: var(--f-tint); font-size: 13px; font-weight: 600; }
.dsh-flow-hint .dsh-flow-ic { width: 15px; height: 15px; }
.dsh-flow-summary { margin-bottom: 14px; padding: 18px; border-radius: 20px; background: #fff; box-shadow: 0 14px 32px -26px #0f2a44aa; }
.dsh-flow-summary-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dsh-site .dsh-flow-summary h3 { margin: 0; color: var(--f-ink); font: 800 19px/1.3 var(--dsh-font, inherit); }
.dsh-flow-amount { background: var(--f-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font: 800 22px/1.2 var(--dsh-font, inherit); white-space: nowrap; }
.dsh-site .dsh-flow-mode { margin: 4px 0 0; color: var(--f-tint); font-weight: 700; }
.dsh-site .dsh-flow-when { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #edf2f8; color: var(--f-ink); font-weight: 600; }
.dsh-flow-when .dsh-flow-ic { color: var(--f-tint); width: 18px; height: 18px; }
.dsh-flow-coupon { margin-bottom: 18px; padding: 12px 14px; border: 1.5px dashed color-mix(in srgb, var(--f-accent) 35%, #cfd9e6); border-radius: 18px; background: #ffffffb3; }
.dsh-flow-coupon summary { display: flex; align-items: center; gap: 12px; color: var(--f-ink); font-weight: 700; list-style: none; cursor: pointer; }
.dsh-flow-coupon summary::-webkit-details-marker { display: none; }
.dsh-flow-coupon summary::after { content: "›"; margin-left: auto; color: var(--f-tint); font-size: 22px; transition: transform .2s; }
.dsh-flow-coupon[open] summary::after { transform: rotate(90deg); }
.dsh-site .dsh-flow-coupon input { width: 100%; min-height: 46px; margin-top: 12px; padding: 0 14px; border: 1.5px solid var(--f-line); border-radius: 12px; font: 600 15px/1 var(--dsh-body, inherit); text-transform: uppercase; }
.dsh-site .dsh-flow-total { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 0 0; color: var(--f-muted); font-size: 15px; }
.dsh-flow-total strong { color: var(--f-ink); font: 800 26px/1 var(--dsh-font, inherit); }
.dsh-flow-line { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; }
.dsh-flow-line > span:last-child { display: grid; }
.dsh-flow-line small { color: var(--f-muted); font-size: 13px; }
.dsh-flow-line b { color: var(--f-ink); }
.dsh-flow-done { text-align: center; }
.dsh-flow-tick { position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin: 22px auto 28px; border: 6px solid transparent; border-radius: 50%; background: linear-gradient(#fff, #fff) padding-box, var(--f-ring) border-box; box-shadow: 0 24px 48px -22px var(--f-glow); animation: dsh-flow-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.dsh-flow-tick .dsh-flow-ic { width: 64px; height: 64px; stroke: var(--f-accent); stroke-width: 2.6; }
.dsh-flow-tick i { position: absolute; width: 14px; height: 14px; border-radius: 50%; animation: dsh-flow-float 3s ease-in-out infinite; }
.dsh-flow-tick i:nth-child(1) { left: -36px; top: 90px; background: #ff5a5f; }
.dsh-flow-tick i:nth-child(2) { left: -6px; top: -14px; width: 10px; height: 10px; background: #34c56a; animation-delay: .4s; }
.dsh-flow-tick i:nth-child(3) { right: -24px; top: -26px; background: #f7c23b; animation-delay: .8s; }
.dsh-flow-tick i:nth-child(4) { right: -52px; top: 4px; width: 18px; height: 18px; background: #3d9cff; animation-delay: 1.2s; }
.dsh-flow-tick i:nth-child(5) { right: -10px; bottom: -18px; width: 10px; height: 10px; background: #a35cf6; animation-delay: 1.6s; }
@keyframes dsh-flow-pop { from { transform: scale(.6); opacity: 0; } }
@keyframes dsh-flow-float { 50% { transform: translateY(-8px); } }

/* Buttons */
.dsh-site .dsh-flow-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 14px 24px;
  border: 2px solid transparent; border-radius: 999px; cursor: pointer; font: 800 16.5px/1.2 var(--dsh-font, inherit); text-align: center; text-decoration: none !important;
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.dsh-site .dsh-flow-btn.is-primary { background: var(--f-grad); color: #fff !important; text-shadow: 0 1px 2px #0003; box-shadow: 0 16px 30px -16px var(--f-glow); }
.dsh-site .dsh-flow-btn.is-ghost { background: linear-gradient(#fff, #fff) padding-box, var(--f-ring) border-box; color: var(--f-tint) !important; }
.dsh-site .dsh-flow-btn:hover { transform: translateY(-2px); filter: saturate(1.08); }
.dsh-site .dsh-flow-btn:focus-visible, .dsh-flow-back:focus-visible, .dsh-flow-skip:focus-visible, .dsh-flow-text:focus-visible { outline: 3px solid color-mix(in srgb, var(--f-accent) 45%, transparent); outline-offset: 3px; }
.dsh-flow[data-step="schedule"] .dsh-flow-btn { width: auto; }
.dsh-flow-text { justify-self: center; padding: 8px; border: 0; background: none; color: var(--f-tint); font: 700 15px/1 var(--dsh-body, inherit); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.dsh-flow-actions > .dsh-flow-btn + .dsh-flow-btn { margin-top: 0; }

/* Desktop: recommendation side by side */
@media (min-width: 1025px) {
  .dsh-flow[data-step="recommend"] { grid-template-columns: minmax(0, 1fr) minmax(0, 700px); }
  .dsh-flow-tests.is-pair { grid-template-columns: 1.15fr .85fr; align-items: center; }
  .dsh-flow-tests.is-pair .is-basic { opacity: .92; }
}
/* Tablets and phones: one column, no side panel */
@media (max-width: 1024px) {
  .dsh-flow { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .dsh-flow-side { display: none; }
}
@media (max-width: 767px) {
  .dsh-flow { padding: 14px 10px 24px; border-radius: 0; }
  .dsh-flow-card { min-height: 0; padding: 16px 16px 22px; border-radius: 26px; }
  .dsh-site .dsh-flow .dsh-flow-title { font-size: clamp(24px, 7.2vw, 30px); }
  .dsh-flow-grid .dsh-flow-option { min-height: 136px; }
  .dsh-flow-day { min-width: 68px; }
  .dsh-flow-time span { padding: 11px 13px; font-size: 14.5px; }
  .dsh-flow-badge { position: static; margin-top: 4px; }
  .dsh-flow-mode-home { flex-wrap: wrap; margin-bottom: 0; }
  .dsh-flow-mode-home .dsh-flow-option-text { flex-basis: calc(100% - 100px); }
}
@media (prefers-reduced-motion: reduce) {
  .dsh-flow, .dsh-flow * { animation: none !important; transition: none !important; }
}