/* ──────────────────────────────────────────────────────────────────────────
   DEDICATED RESOURCES — Single-screen inline flow
   ──────────────────────────────────────────────────────────────────────── */

.svc--dedicated .svc__commit-bar { display: none; }
/* 2026-05-25: re-enable display on the per-role commit bar (lives inside
   .df-ft-form__head or .df-plan__header inside .svc--dedicated, so the
   rule above would otherwise hide it). */
.svc--dedicated .df-commit-bar.svc__commit-bar { display: inline-flex; }

.df {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 14px;
}

/* ── TOP — TIME TOGGLE ────────────────────────────────────────────────── */
.df-time-toggle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 6px;
  background: linear-gradient(168deg, rgb(232, 230, 228) -3%, rgb(244, 243, 242) 50%, rgb(232, 230, 228) 117%);
  border-radius: 16px;
  box-shadow:
    rgba(214, 211, 208, 0.55) 6px 6px 14px 0px inset,
    rgba(255, 255, 255, 0.85) -6px -6px 14px 0px inset;
}
@media (max-width: 520px) {
  .df-time-toggle { grid-template-columns: 1fr; }
}

.df-time-toggle__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  text-align: left;
  font: inherit;
  color: var(--muted, #6b6b6b);
  cursor: pointer;
  transition: all 180ms ease;
}
.df-time-toggle__btn:hover {
  color: var(--text, #111);
  background: rgba(255, 255, 255, 0.4);
}
.df-time-toggle__btn--on {
  background: #fff;
  color: var(--text, #111);
  box-shadow:
    rgba(214, 211, 208, 0.4) 4px 4px 12px 0px,
    rgb(255, 255, 255) -4px -4px 12px 0px,
    0 0 0 2px var(--accent, #ff6f3c);
}
.df-time-toggle__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #6b6b6b);
  box-shadow:
    rgba(214, 211, 208, 0.4) 1px 1px 3px 0px inset,
    rgba(255, 255, 255, 0.9) -1px -1px 3px 0px inset;
}
.df-time-toggle__btn--on .df-time-toggle__icon {
  background: var(--accent, #ff6f3c);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}
.df-time-toggle__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.df-time-toggle__name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text, #111);
}
.df-time-toggle__price {
  font-size: 11.5px;
  color: var(--muted, #6b6b6b);
  font-weight: 500;
}
.df-time-toggle__btn--on .df-time-toggle__price {
  color: var(--accent, #ff6f3c);
  font-weight: 600;
}
.df-time-toggle__check {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent, #ff6f3c);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── SECTION HEADER ───────────────────────────────────────────────────── */
.df-section__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
}
@media (max-width: 720px) {
  .df-section__head { grid-template-columns: 1fr; }
}
.df-section__head--stacked {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.df-section__head-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-top: 4px;
}
.df-section__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text, #111);
}
.df-section__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--muted, #9a9a9a);
}
.df-section__sub {
  font-size: 13px;
  color: var(--muted, #6b6b6b);
  line-height: 1.5;
}

/* ── ONBOARDING AVAILABILITY ─────────────────────────────────────────── */
.df-avail {
  width: 320px;
  max-width: 100%;
  padding: 12px 14px;
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.df-section__head--stacked .df-avail {
  width: 100%;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
}
@media (max-width: 720px) {
  .df-avail { width: 100%; }
  .df-section__head--stacked .df-avail {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}
.df-avail__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.df-section__head--stacked .df-avail__head {
  flex: 0 0 auto;
  gap: 6px;
}
.df-avail__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #2a2a2a);
}
.df-avail__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
}
.df-avail__status-text { letter-spacing: -0.005em; }
.df-avail.capacity--open .df-avail__status { color: #1f8a55; }
.df-avail.capacity--limited .df-avail__status { color: #b87a07; }
.df-avail.capacity--nearly-full .df-avail__status { color: #c25627; }
.df-avail.capacity--full .df-avail__status { color: #b91c1c; }
.df-avail__track {
  height: 30px;
  min-width: 11rem;
  border-radius: 100px;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
}
.df-section__head--stacked .df-avail__track {
  flex: 1 1 auto;
  min-width: 11rem;
  max-width: 18rem;
}
.df-avail__track video,
.df-avail__track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.df-avail__copy {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted, #6b6b6b);
}
.df-section__head--stacked .df-avail__copy {
  flex: 1 1 0;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── ROLES + INLINE CONFIG WRAPPER ───────────────────────────────────── */
.df-roles-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.df-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
}

/* ── ROLE CARD ────────────────────────────────────────────────────────── */
.df-role-card {
  position: relative;
  text-align: left;
  padding: 14px 16px 14px 38px;
  background: rgba(255, 255, 255, 0.36);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  transition: all 180ms ease;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(20, 30, 60, 0.04),
    0 4px 12px rgba(20, 30, 60, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.df-role-card > * { position: relative; z-index: 1; }
.df-role-card__glass {
  /* 2026-05-22: switched 22x22 -> 14x14 thin slice variant (matches the
     canonical .thin-glass-frame on add-ons / qualifier opts). The 22px
     corners ate ~26% of the card's 86px height which made the slice seams
     visible mid-card and at the corners. Thin slices keep the soft-glass
     bevel without producing the artifacts. */
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    url('glass-frame/top-left.webp')     top left     / 14px 14px no-repeat,
    url('glass-frame/top-right.webp')    top right    / 14px 14px no-repeat,
    url('glass-frame/bottom-left.webp')  bottom left  / 14px 14px no-repeat,
    url('glass-frame/bottom-right.webp') bottom right / 14px 14px no-repeat,
    url('glass-frame/top.webp')    14px top    / calc(100% - 28px) 14px repeat-x,
    url('glass-frame/bottom.webp') 14px bottom / calc(100% - 28px) 14px repeat-x,
    url('glass-frame/left.webp')   left 14px   / 14px calc(100% - 28px) repeat-y,
    url('glass-frame/right.webp')  right 14px  / 14px calc(100% - 28px) repeat-y;
  mix-blend-mode: multiply;
  z-index: 0;
}
.df-role-card__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.05) 35%, transparent 60%);
  opacity: 0.6;
  mix-blend-mode: screen;
  pointer-events: none;
}
.df-role-card:hover {
  background: rgba(255, 255, 255, 0.46);
  transform: translateY(-1px);
}
.df-role-card--on {
  background: rgba(255, 255, 255, 0.58);
  box-shadow:
    0 0 0 2px var(--accent, #ff6f3c),
    0 4px 14px rgba(20, 30, 60, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.df-role-card--focused {
  box-shadow:
    0 0 0 2px var(--accent, #ff6f3c),
    0 6px 20px rgba(20, 30, 60, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.df-role-card--dim { opacity: 0.92; }
.df-role-card--dim:hover { opacity: 1; }

.df-role-card__check {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid #E2E2E2;
  background: rgba(255, 255, 255, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 2;
  box-shadow:
    inset 1px 1px 3px rgba(0,0,0,0.06),
    1px 1px 3px rgba(0,0,0,0.06),
    -1px -1px 2px rgba(255,255,255,0.7);
  transition: background 0.2s ease-out, border-color 0.2s ease-out,
              box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.df-role-card:hover .df-role-card__check:not(.is-on) {
  border-color: #6B82D6;
  box-shadow:
    inset 1px 1px 3px rgba(0,0,0,0.08),
    2px 2px 6px rgba(0,0,0,0.08),
    -1px -1px 3px rgba(255,255,255,0.8);
}
.df-role-card__check.is-on {
  /* 2026-05-22: matched to the canonical premium check style used on the
     Lead-source radio (.lead-vol__src-radio.is-on). Soft light-blue inset
     highlight + darker-blue inset shadow + warm outer glow for depth. */
  background: linear-gradient(109deg, var(--gg-blue, #002ABF) 0%, var(--gg-blue, #002ABF) 100%);
  border-color: transparent;
  color: #fff;
  transform: scale(1.05);
  box-shadow:
    rgba(255, 255, 255, 0.5) -2px -2px 2px -1px,
    rgba(219, 227, 255, 0.69) 1px 1.5px 2px 0px inset,
    rgba(123, 145, 227, 0.63) -2.5px -2px 2px 0px inset,
    rgba(84, 84, 84, 0.35) 2px 2px 8px 0px,
    rgba(0, 31, 145, 0.8) -1px -4px 20px 0px inset;
}
.df-role-card__check svg { stroke-width: 3; }
.df-role-card__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text, #111);
  letter-spacing: -0.005em;
  line-height: 1.3;
  /* 2026-05-28 Batch 2 fix: reserve space for the × remove button so the
     tooltip icon never overlaps it on short role names. */
  padding-right: 24px;
}
.df-role-card__price {
  font-size: 11.5px;
  color: var(--muted, #6b6b6b);
  margin-top: 4px;
  font-weight: 500;
}
.df-role-card--on .df-role-card__price {
  color: var(--accent, #ff6f3c);
  font-weight: 600;
}
.df-role-card__rec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 2px 7px 2px 4px;
  background: rgba(0,0,0,0.05);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted, #6b6b6b);
  line-height: 1;
  white-space: nowrap;
}
.df-role-card__rec-flag {
  display: block;
  width: 14px;
  height: 10px;
  border-radius: 1px;
  object-fit: cover;
  flex-shrink: 0;
}

/* 2026-05-28 Batch 2 (#35): explicit × remove button on selected role cards.
   Absolutely positioned top-right, only rendered when the card is checked. */
.df-role-card__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.1);
  color: var(--muted, #6b6b6b);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.df-role-card__remove:hover {
  background: rgba(200, 40, 30, 0.15);
  color: #c0392b;
}

/* 2026-05-28 Batch 2 (#32): pricing info tooltip icon on role card names.
   Mirrors .df-loc-tip-icon sizing/style but scaled slightly smaller (14px). */
/* 2026-05-29: legacy blue-circle "i" replaced with canonical
   <window.InfoIcon /> (renders the .info-icon button + SVG). All visual
   styling now lives on the canonical .info-icon class. This rule kept
   only as a no-op hook so existing CSS positional overrides elsewhere
   can still target this class name without breaking. */
.df-role-card__tip-icon { /* canonical .info-icon supplies the look */ }
/* Hover/focus styling now handled by .info-icon:hover / :focus-visible
   in the canonical stylesheet. */

/* ── INLINE CONFIG PANEL ─────────────────────────────────────────────── */
.df-inline-config {
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  overflow: hidden;
  animation: df-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.df-tab-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0 14px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
}
.df-tab {
  position: relative;
  padding: 12px 14px 11px;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted, #6b6b6b);
  cursor: pointer;
  transition: color 150ms ease;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.df-tab::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  background: transparent;
  border-radius: 2px 2px 0 0;
  transition: background 180ms ease;
}
.df-tab:hover { color: var(--text, #2a2a2a); }
.df-tab--on { color: var(--accent, #ff6f3c); font-weight: 600; }
.df-tab--on::after { background: var(--accent, #ff6f3c); }
.df-inline-config__body {
  padding: 18px 20px 20px;
  animation: df-fade-in 180ms ease both;
}

/* ── PT — DAY-RATE PLAN TILES ─────────────────────────────────────────── */
.df-plan { display: flex; flex-direction: column; gap: 12px; }
.df-plan__header { display: flex; flex-direction: column; gap: 2px; }
.df-plan__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #111);
  letter-spacing: -0.005em;
}
.df-plan__sub { font-size: 12.5px; color: var(--muted, #6b6b6b); }
.df-plan__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--muted, #9a9a9a);
}
.df-plan__rate-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--muted, #6b6b6b);
  margin-top: 4px;
}
.df-plan__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 720px) {
  .df-plan__tiles { grid-template-columns: repeat(2, 1fr); }
}
.df-plan-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 12px;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 150ms ease;
  isolation: isolate;
  overflow: hidden;
}
.df-plan-tile::before {
  /* 2026-05-22: switched 22x22 -> 14x14 thin slice variant (matches the
     canonical .thin-glass-frame on add-ons + qualifier opts + role tiles).
     The day-rate cards are short-ish, the bigger slices were too dominant. */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    url('glass-frame/top-left.webp')     top left     / 14px 14px no-repeat,
    url('glass-frame/top-right.webp')    top right    / 14px 14px no-repeat,
    url('glass-frame/bottom-left.webp')  bottom left  / 14px 14px no-repeat,
    url('glass-frame/bottom-right.webp') bottom right / 14px 14px no-repeat,
    url('glass-frame/top.webp')    14px top    / calc(100% - 28px) 14px repeat-x,
    url('glass-frame/bottom.webp') 14px bottom / calc(100% - 28px) 14px repeat-x,
    url('glass-frame/left.webp')   left 14px   / 14px calc(100% - 28px) repeat-y,
    url('glass-frame/right.webp')  right 14px  / 14px calc(100% - 28px) repeat-y;
  mix-blend-mode: multiply;
  z-index: 0;
}
.df-plan-tile > * { position: relative; z-index: 1; }
.df-plan-tile:hover { border-color: rgba(255, 111, 60, 0.5); }
.df-plan-tile--on {
  border-color: var(--accent, #ff6f3c);
  background: rgba(255, 111, 60, 0.04);
  box-shadow: 0 0 0 1px var(--accent, #ff6f3c) inset, 0 2px 10px rgba(0,0,0,0.04);
}
.df-plan-tile__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.df-plan-tile__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #2a2a2a);
  letter-spacing: -0.005em;
}
.df-plan-tile--on .df-plan-tile__name { color: var(--accent, #ff6f3c); }
.df-plan-tile__radio {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid #E2E2E2;
  background: rgba(255,255,255,0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex: 0 0 auto;
  box-shadow:
    inset 1px 1px 3px rgba(0,0,0,0.06),
    1px 1px 3px rgba(0,0,0,0.06),
    -1px -1px 2px rgba(255,255,255,0.7);
  transition: background 0.2s ease-out, border-color 0.2s ease-out,
              box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.df-plan-tile:hover .df-plan-tile__radio:not(.is-on) {
  border-color: #6B82D6;
  box-shadow:
    inset 1px 1px 3px rgba(0,0,0,0.08),
    2px 2px 6px rgba(0,0,0,0.08),
    -1px -1px 3px rgba(255,255,255,0.8);
}
.df-plan-tile__radio.is-on {
  /* 2026-05-22: matched to .lead-vol__src-radio.is-on / .df-role-card__check.is-on
     premium style (soft-blue inset highlight + darker-blue inset shadow + warm
     outer glow) for consistency across all check controls. */
  background: linear-gradient(109deg, var(--gg-blue, #002ABF) 0%, var(--gg-blue, #002ABF) 100%);
  border-color: transparent;
  color: #fff;
  transform: scale(1.05);
  box-shadow:
    rgba(255, 255, 255, 0.5) -2px -2px 2px -1px,
    rgba(219, 227, 255, 0.69) 1px 1.5px 2px 0px inset,
    rgba(123, 145, 227, 0.63) -2.5px -2px 2px 0px inset,
    rgba(84, 84, 84, 0.35) 2px 2px 8px 0px,
    rgba(0, 31, 145, 0.8) -1px -4px 20px 0px inset;
}
.df-plan-tile__radio svg { stroke-width: 3; }
.df-plan-tile__price { display: flex; align-items: baseline; gap: 2px; }
.df-plan-tile__amt {
  font-size: 22px;
  font-weight: 800;
  color: var(--text, #111);
  letter-spacing: -0.02em;
  line-height: 1;
}
.df-plan-tile--on .df-plan-tile__amt { color: var(--accent, #ff6f3c); }
.df-plan-tile__unit { font-size: 11.5px; color: var(--muted, #6b6b6b); font-weight: 500; }
.df-plan-tile__blurb {
  font-size: 11px;
  color: var(--muted, #6b6b6b);
  line-height: 1.4;
  margin-top: 2px;
}

/* Custom days */
.df-plan__custom {
  margin-top: 6px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--accent, #ff6f3c);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.df-plan__custom-label { font-size: 11.5px; font-weight: 600; color: var(--text, #2a2a2a); }
.df-plan__custom-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.df-plan__custom-step {
  width: 30px; height: 30px;
  border: 0;
  background: rgba(255, 111, 60, 0.10);
  color: var(--accent, #ff6f3c);
  border-radius: 7px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.df-plan__custom-step:hover { background: rgba(255, 111, 60, 0.18); }
.df-plan__custom-input {
  width: 50px; height: 30px;
  text-align: center;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #111);
  border: 1.5px solid rgba(0,0,0,0.10);
  border-radius: 7px;
  background: #fff;
  -moz-appearance: textfield;
}
.df-plan__custom-input::-webkit-outer-spin-button,
.df-plan__custom-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.df-plan__custom-suffix { font-size: 11.5px; color: var(--muted, #6b6b6b); padding-left: 4px; }

/* ── FT FORM ─────────────────────────────────────────────────────────── */
.df-ft-form { display: flex; flex-direction: column; gap: 0; }
.df-ft-form__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #111);
  letter-spacing: -0.005em;
  margin-bottom: 14px;
}
.df-field + .df-field { margin-top: 18px; }
.df-field__label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text, #111);
  margin-bottom: 2px;
}
.df-field__opt { font-weight: 500; color: var(--muted, #6b6b6b); }
.df-field__sub {
  font-size: 11.5px;
  color: var(--muted, #6b6b6b);
  margin-bottom: 8px;
  line-height: 1.45;
}

/* Radio pill rows */
.df-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Base radio pill ─────────────────────────────────────────────────── */
.df-radio-pill {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 9px 14px 9px;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.10);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #2a2a2a);
  cursor: pointer;
  transition: all 150ms ease;
  overflow: hidden;
}
.df-radio-pill:hover { border-color: rgba(255, 111, 60, 0.5); }
.df-radio-pill--on {
  border-color: var(--accent, #ff6f3c);
  background: rgba(255, 111, 60, 0.06);
  color: var(--accent, #ff6f3c);
  font-weight: 600;
}

/* ── Location pills — all get the same top padding so content aligns
   whether or not a recommended badge is present. The badge (22px tall)
   sits in the reserved 30px zone; pills without a badge simply have a
   slightly taller top margin. ────────────────────────────────────────── */
.df-radio-pill--loc {
  padding-top: 30px;
  min-width: 120px;
}

.df-radio-pill__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 16px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
  flex-shrink: 0;
  line-height: 1;
}
.df-radio-pill__flag-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Price range line inside location pill */
.df-radio-pill__range {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  margin-left: 30px;
}
.df-radio-pill--on .df-radio-pill__range {
  color: inherit;
  opacity: 0.85;
}

/* Seniority pill variant */
.df-radio-pill--col {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px 9px;
  min-width: 110px;
}
.df-radio-pill__name { font-size: 13px; font-weight: 600; }
.df-radio-pill__blurb { font-size: 11px; color: var(--muted, #6b6b6b); font-weight: 500; }
.df-radio-pill--on .df-radio-pill__blurb { color: var(--accent, #ff6f3c); opacity: 0.8; }

/* ── Recommended badge — top-left overlay on FT location pills ───────── */
.df-location-rec-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  height: 22px;
  width: auto;
  pointer-events: none;
  display: block;
  border-radius: 8px 0 0 0;
}

/* ── Textarea ─────────────────────────────────────────────────────────── */
.df-textarea {
  width: 100%;
  min-height: 78px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  border: 1.5px solid rgba(0,0,0,0.10);
  border-radius: 8px;
  background: #fff;
  color: var(--text, #111);
  resize: vertical;
  font-family: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.df-textarea:focus {
  outline: none;
  border-color: var(--accent, #ff6f3c);
  box-shadow: 0 0 0 3px rgba(255, 111, 60, 0.10);
}

/* ── DEPOSIT CARD ────────────────────────────────────────────────────── */
.df-deposit-card {
  padding: 18px 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f3f1 100%);
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(15,23,42,0.04),
    0 1px 2px rgba(15,23,42,0.04),
    0 14px 28px -14px rgba(44,51,102,0.18);
}
.df-deposit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,0.6), transparent 55%);
  pointer-events: none;
}
.df-deposit-card__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  position: relative;
}
.df-deposit-card__row--main { align-items: flex-end; padding-bottom: 12px; }
.df-deposit-card__divider { height: 1px; background: rgba(0,0,0,0.08); margin: 4px 0 12px; }
.df-deposit-card__label { font-size: 13px; font-weight: 600; color: var(--text, #111); }
.df-deposit-card__label-sm { font-size: 12.5px; font-weight: 600; color: var(--text, #2a2a2a); }
.df-deposit-card__sub { font-size: 11.5px; color: var(--muted, #6b6b6b); margin-top: 2px; line-height: 1.4; }
.df-deposit-card__amt {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent, #ff6f3c);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.df-deposit-card__amt-sm { font-size: 14px; font-weight: 700; color: var(--text, #111); }
.df-deposit-card__foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,0.10);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--muted, #6b6b6b);
  position: relative;
}
.df-deposit-card__foot svg { color: var(--accent, #ff6f3c); flex: 0 0 auto; }

@keyframes df-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ──────────────────────────────────────────────────────────────────────────
   BLUE ACCENT OVERRIDE — Dedicated Resources card
   ──────────────────────────────────────────────────────────────────────── */
.svc--dedicated {
  --accent: #002ABF;
  --df-accent-soft:  rgba(0, 42, 191, 0.06);
  --df-accent-soft2: rgba(0, 42, 191, 0.10);
  --df-accent-soft3: rgba(0, 42, 191, 0.14);
  --df-accent-soft4: rgba(0, 42, 191, 0.18);
  --df-accent-line:  rgba(0, 42, 191, 0.30);
  --df-accent-edge:  rgba(0, 42, 191, 0.50);
}
.svc--dedicated .df-time-toggle__btn--on {
  box-shadow:
    rgba(214,211,208,0.4) 4px 4px 12px 0px,
    rgb(255,255,255) -4px -4px 12px 0px,
    0 0 0 2px var(--accent);
}
.svc--dedicated .df-time-toggle__btn--on .df-time-toggle__icon { background: var(--accent); }
.svc--dedicated .df-role-card:hover { background: rgba(255,255,255,0.5); }
.svc--dedicated .df-role-card--on {
  background: linear-gradient(180deg, rgba(244,247,255,0.95), rgba(232,238,255,0.8));
  box-shadow:
    0 0 0 2px rgba(0,42,191,0.30) inset,
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 12px 24px -10px rgba(0,42,191,0.22);
}
.svc--dedicated .df-role-card--focused {
  box-shadow:
    0 0 0 2px rgba(0,42,191,0.45) inset,
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 14px 26px -10px rgba(0,42,191,0.28);
}
.svc--dedicated .df-tab--on { color: var(--accent); }
.svc--dedicated .df-tab--on::after { background: var(--accent); }
.svc--dedicated .df-plan-tile:hover { border-color: var(--df-accent-edge); }
.svc--dedicated .df-plan-tile--on {
  border-color: rgba(0,42,191,0.35);
  background: linear-gradient(180deg, rgba(244,247,255,0.95), rgba(232,238,255,0.8));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 12px 24px -10px rgba(0,42,191,0.22);
}
.svc--dedicated .df-plan-tile__radio.is-on { background: linear-gradient(109deg, var(--accent) 0%, var(--accent) 100%); border-color: transparent; }
.svc--dedicated .df-plan-tile--on .df-plan-tile__name,
.svc--dedicated .df-plan-tile--on .df-plan-tile__amt { color: var(--accent); }
.svc--dedicated .df-plan__custom { border-color: var(--accent); }
.svc--dedicated .df-plan__custom-step { background: var(--df-accent-soft2); color: var(--accent); }
.svc--dedicated .df-plan__custom-step:hover { background: var(--df-accent-soft4); }
.svc--dedicated .df-radio-pill:hover { border-color: var(--df-accent-edge); }
.svc--dedicated .df-radio-pill--on { background: var(--df-accent-soft); }
.svc--dedicated .df-textarea:focus { box-shadow: 0 0 0 3px var(--df-accent-soft2); }
.svc--dedicated .df-deposit-card {
  background: linear-gradient(180deg, #ffffff 0%, #f4f3f1 100%);
  border-color: rgba(15,23,42,0.06);
}
.svc--dedicated .df-deposit-card::before {
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,0.6), transparent 55%);
}

/* ── Summary ─────────────────────────────────────────────────────────── */
.summary__deposit {
  margin-bottom: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #f4f8ff 0%, #fff 100%);
  border: 1px solid rgba(0,42,191,0.30);
  border-radius: 10px;
}
.summary__deposit-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.summary__deposit-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text, #111); }
.summary__deposit-label svg { color: #002ABF; }
.summary__deposit-sub { font-size: 11px; color: var(--muted, #6b6b6b); margin-top: 2px; line-height: 1.4; }
.summary__deposit-val { font-size: 18px; font-weight: 800; color: #002ABF; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
.summary__line--role.is-expanded { background: rgba(0,42,191,0.04); }
.summary__role-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.summary__role-toggle:disabled { cursor: default; }
.summary__role-toggle:not(:disabled):hover span {
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,0.2);
  text-underline-offset: 2px;
}
.summary__role-chev { flex: 0 0 auto; color: var(--muted, #6b6b6b); transition: transform 200ms ease; }
.summary__role-chev.is-open { transform: rotate(180deg); }
.summary__role-details {
  margin: 2px 0 8px 28px;
  padding: 8px 12px;
  background: #fafafa;
  border-left: 2px solid #002ABF;
  border-radius: 0 6px 6px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  animation: df-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.summary__role-detail { display: flex; gap: 10px; font-size: 11.5px; line-height: 1.45; }
.summary__role-detail--multi { flex-direction: column; gap: 2px; }
.summary__role-detail-k {
  flex: 0 0 70px;
  color: var(--muted, #6b6b6b);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  padding-top: 1px;
}
.summary__role-detail-v {
  flex: 1 1 auto;
  color: var(--text, #2a2a2a);
  font-weight: 500;
  word-break: break-word;
  white-space: pre-wrap;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Dedicated Resources Flow
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 640px: Tablet / large phone ────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Role grid — tighter min so 2 columns always survive down to ~300px */
  .df-role-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  /* Inline config body — reduce side padding */
  .df-inline-config__body {
    padding: 14px 14px 16px;
  }

  /* 2026-05-26: stop forcing horizontal scroll on mobile. Tabs now wrap to
     multiple rows so every selected role is visible without scrolling. Each
     tab grows to fill its row evenly; minimum 44px tap height. */
  .df-tab-strip {
    overflow-x: visible;
    flex-wrap: wrap;
    padding: 4px 8px 0;
    gap: 4px;
  }

  /* Tabs on mobile — flex-grow to share the row, generous padding, hairline
     border around each so they read as discrete chips even when wrapped. */
  .df-tab {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    font-size: 12.5px;
    text-align: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.06);
    white-space: normal;
    line-height: 1.2;
  }
  .df-tab--on {
    background: color-mix(in srgb, var(--accent, #ff6f3c) 10%, #fff);
    border-color: color-mix(in srgb, var(--accent, #ff6f3c) 35%, transparent);
  }
  /* Hide the desktop ::after underline indicator on mobile — chip styling
     above already conveys the active state. */
  .df-tab::after { display: none; }

  /* Time toggle — slightly tighter padding */
  .df-time-toggle__btn {
    padding: 12px 14px;
    gap: 10px;
  }
  .df-time-toggle__icon {
    width: 34px;
    height: 34px;
  }

  /* Section title — slightly smaller */
  .df-section__title {
    font-size: 15px;
  }

  /* Deposit card — give the big amount room to breathe */
  .df-deposit-card {
    padding: 14px 16px;
  }

  /* Make textarea fill the full available width reliably */
  .df-textarea {
    box-sizing: border-box;
  }
}

/* ── 480px: Standard phones ─────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Role grid — force 2 columns on narrow phones */
  .df-role-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* Location pills — full-width stacked so flags + ranges are never clipped */
  .df-radio-pill--loc {
    width: 100%;
    min-width: unset;
    box-sizing: border-box;
  }

  /* Range text — no indent when pill is full-width */
  .df-radio-pill__range {
    margin-left: 0;
  }

  /* Seniority / column pills — 2-per-row, equal width */
  .df-radio-pill--col {
    flex: 1 1 calc(50% - 4px);
    min-width: unset;
    box-sizing: border-box;
  }

  /* Plan tiles — keep 2-col but reduce tile padding */
  .df-plan-tile {
    padding: 12px 10px 10px;
  }
  .df-plan-tile__amt {
    font-size: 19px;
  }

  /* Deposit card main row — allow wrapping so amount drops below label */
  .df-deposit-card__row--main {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Custom day-rate stepper — bigger touch targets */
  .df-plan__custom-step {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  .df-plan__custom-input {
    height: 36px;
  }

  /* Tighter flow gap on very narrow screens */
  .df {
    gap: 16px;
  }

  /* Inline config — less gap between roles wrap and panel */
  .df-roles-wrap {
    gap: 12px;
  }
}

/* ── 360px: Small / compact phones ─────────────────────────────────────── */
@media (max-width: 360px) {

  /* Role grid — single column so cards are always fully readable */
  .df-role-grid {
    grid-template-columns: 1fr;
  }

  /* Seniority pills — single column too */
  .df-radio-pill--col {
    flex: 1 1 100%;
  }

  /* Plan tiles — single column at very small sizes */
  .df-plan__tiles {
    grid-template-columns: 1fr;
  }

  /* Deposit card amount — slightly smaller so it fits inline */
  .df-deposit-card__amt {
    font-size: 22px;
  }

  /* Inline config body — minimal padding */
  .df-inline-config__body {
    padding: 12px 10px 14px;
  }

  /* Time toggle icon — compact */
  .df-time-toggle__icon {
    width: 30px;
    height: 30px;
  }
  .df-time-toggle__name { font-size: 13px; }
}
/* ── Deposit notice — shown in FT roles section ─────────────────────────── */
.df-deposit-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #fff8ec 0%, #fff3e0 100%);
  border: 1px solid rgba(230, 140, 30, 0.25);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6b4c10;
}
.df-deposit-notice__icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: #d4830a;
}
.df-deposit-notice strong {
  color: #b36800;
  font-weight: 600;
}

/* §13 — "Too early for FT" soft warning chip. Surfaces only for pre-revenue
   founders with sub-£1k ACV. Same warm orange tone family as the deposit
   notice but with a clearer "warning" framing (triangle icon, slightly
   stronger border). No hard gate — purely informational. */
.df-too-early-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #fffaf0 0%, #fff2d6 100%);
  border: 1px solid rgba(214, 130, 22, 0.45);
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6b4c10;
}
.df-too-early-warning__icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: #c77800;
}
.df-too-early-warning strong {
  color: #8a4a00;
  font-weight: 700;
}

/* §3.3 — Talent FT trust grid (2 columns, 5 perks each). */
.df-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  padding: 1rem 1.1rem;
  margin: 0.5rem 0 0.75rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(247,248,251,0.92) 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
}
@media (max-width: 720px) {
  .df-trust-grid { grid-template-columns: 1fr; gap: 0.75rem; }
}
.df-trust-grid__col {}
.df-trust-grid__title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gg-blue, #002ABF);
  margin: 0 0 0.5rem;
}
.df-trust-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.df-trust-grid__item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--gg-heading, #0f1c35);
  cursor: help;
}
.df-trust-grid__check {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--gg-blue, #002ABF);
}

/* §3.7 — Collapsible forecast comparison panel. */
.df-forecast {
  margin-top: 0.75rem;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(247,248,251,0.95) 100%);
  overflow: hidden;
}
.df-forecast__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--gg-blue, #002ABF);
  user-select: none;
  list-style: none;
}
.df-forecast__trigger::-webkit-details-marker { display: none; }
.df-forecast__chevron { transition: transform 180ms ease; }
.df-forecast[open] .df-forecast__chevron { transform: rotate(180deg); }
.df-forecast__panel {
  padding: 0.25rem 1rem 1rem;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.df-forecast__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.6rem;
}
@media (max-width: 600px) {
  .df-forecast__cols { grid-template-columns: 1fr; }
}
.df-forecast__col {
  padding: 0.7rem 0.85rem;
  background: white;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
}
.df-forecast__col--gorilla {
  border-color: color-mix(in srgb, var(--gg-blue, #002ABF) 25%, transparent);
}
.df-forecast__col-head {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gg-blue, #002ABF);
  margin-bottom: 0.5rem;
}
.df-forecast__col--inhouse .df-forecast__col-head {
  color: var(--gg-heading, #0f1c35);
  opacity: 0.7;
}
.df-forecast__rows {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.df-forecast__rows li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--gg-heading, #0f1c35);
}
.df-forecast__rows li span:last-child {
  font-weight: 600;
}
.df-forecast__total {
  padding-top: 0.45rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 1rem;
  font-weight: 800;
  color: var(--gg-blue, #002ABF);
  text-align: right;
}
.df-forecast__col--inhouse .df-forecast__total {
  color: var(--gg-heading, #0f1c35);
}
.df-forecast__savings {
  margin-top: 0.75rem;
  padding: 0.6rem 0.85rem;
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 8%, white);
  border: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 25%, transparent);
  border-radius: 10px;
  font-size: 0.88rem;
  color: var(--gg-blue, #002ABF);
  text-align: center;
}
.df-forecast__savings strong { font-weight: 800; }
.df-forecast__disclaimer {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: var(--gg-muted, #5a647d);
  line-height: 1.45;
}

/* 2026-05-25: Per-role commitment toggle (3 / 6 / 12 mo). Uses the same
   .svc__commit-bar styling as the service-level toggle so the per-role
   pills match pixel-for-pixel. Lives inline at the top-right of the role
   form header, opposite the role title. */
.df-ft-form__head,
.df-plan__header--with-commit {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.df-plan__title-wrap {
  flex: 1 1 280px;
  min-width: 0;
}
.df-commit-bar {
  margin-top: 0;
  flex-shrink: 0;
}
/* Tighten the per-role commit pills so three options fit on one line
   alongside a long role title. */
.df-commit-bar.svc__commit-bar-btn,
.df-commit-bar .svc__commit-bar-btn {
  padding: 0.45rem 0.75rem;
  font-size: 0.78rem;
}
.df-commit-bar .svc__commit-bar-save {
  font-size: 0.56rem;
  padding: 0.22rem 0.4rem;
}
@media (max-width: 600px) {
  .df-ft-form__head,
  .df-plan__header--with-commit {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .df-commit-bar { align-self: flex-start; }
}

/* 2026-05-26: Disclaimer tooltip trigger next to FT Location label.
   Mirrors the existing dis-tip-wrap pattern but sized down for an inline
   "i" icon in a field label rather than a full standalone badge. */
.df-loc-tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 35%, transparent);
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 8%, #fff);
  color: var(--gg-blue, #002ABF);
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}
.df-loc-tip-wrap:hover .df-loc-tip-icon,
.df-loc-tip-wrap:focus-within .df-loc-tip-icon {
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 16%, #fff);
  border-color: var(--gg-blue, #002ABF);
}

/* 2026-05-26: Visually merge .df-inline-config + .df-deposit-card +
   .df-forecast into ONE continuous panel separated by subtle hairline
   dividers. Eliminates ~16px of vertical waste between the three related
   sections (role config / monthly+deposit / in-house cost comparison).
   CSS-only — no JSX changes. */
.df-inline-config:has(+ .df-deposit-card) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
  margin-bottom: 0;
}
.df-inline-config + .df-deposit-card {
  /* .df is a flex column with gap: 22px. Negative margin absorbs that gap
     so the two cards visually butt together with only the hairline divider
     showing. */
  margin-top: -22px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow:
    inset 0 -1px 0 rgba(15, 23, 42, 0.04),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 28px -14px rgba(44, 51, 102, 0.18);
}
/* When deposit-card is followed by the in-house forecast disclosure, drop
   the deposit card's bottom radius / border too (so the forecast extends
   the same panel). */
.df-deposit-card:has(+ .df-forecast) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
  margin-bottom: 0;
  /* Same shadow as above but drop the bottom shadow — forecast carries it. */
  box-shadow:
    inset 0 -1px 0 rgba(15, 23, 42, 0.04),
    0 1px 2px rgba(15, 23, 42, 0.04);
}
.df-deposit-card + .df-forecast {
  /* Same -22px to swallow the .df flex gap below the deposit card. */
  margin-top: -22px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  /* Match the deposit card's outer chrome so the bottom of the panel
     reads as one continuous surface ending at the forecast. */
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(247,248,251,0.95) 100%);
  box-shadow:
    inset 0 -1px 0 rgba(15, 23, 42, 0.04),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 28px -14px rgba(44, 51, 102, 0.18);
}

/* 2026-05-26: per-item (i) info icon owns the tooltip — the row itself is
   plain text. Icon sits right after the label, mirroring the small "i"
   button used elsewhere (lead-vol, MSD, FT location label). */
.df-trust-grid__label {
  /* No flex-grow — let the label size to its content so the (i) icon
     sits flush after the text, matching the sidebar MONTHLY TOTAL (i)
     pattern. Without this, the label expands to fill the column and
     pushes the icon to the far right edge. */
  flex: 0 1 auto;
  min-width: 0;
}
/* Override base .df-trust-grid__item from earlier sheet that has
   justify-content or grid-template that would re-space items. */
.df-trust-grid__item {
  justify-content: flex-start;
}
.df-trust-grid__info-wrap {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.df-trust-grid__info {
  /* 2026-05-26: simple gray glyph — no fill, no border, no rounded button. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9aa0aa;
  cursor: help;
  font-family: inherit;
  flex: 0 0 auto;
  transition: color 150ms ease;
}
.df-trust-grid__info:hover,
.df-trust-grid__info:focus-visible {
  color: #6b7280;
  background: transparent;
  outline: none;
}
.df-trust-grid__info svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}

/* ═════════════════════════════════════════════════════════════════════════
   2026-05-27: MOBILE RESPONSIVENESS FIXES (Playwright 390x844 audit)
   1) Seniority pills 3-up so Junior/Mid/Senior never wrap with Senior orphan
   2) Trust grid (i) info icons: 32px tap target (14px glyph stays visible)
   3) FT tab strip chips: >=44px min-height for iOS tap-target compliance
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Fix #1: Force 3-up seniority pills. Override the calc(50% - 4px)
     basis from the earlier rule by using flex: 1 1 0 (equal-share) with
     min-width: 0 so all three items always fit on one row. Slightly
     reduced padding + font sizes to keep "from £25-32/hour" readable
     inside the narrower pill (~94px wide on a 320px panel). */
  .df-radio-row .df-radio-pill--col {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 8px 8px;
  }
  .df-radio-pill--col .df-radio-pill__name { font-size: 12.5px; }
  .df-radio-pill--col .df-radio-pill__blurb { font-size: 10.5px; line-height: 1.3; }
  .df-radio-pill--col .df-radio-pill__rate {
    font-size: 11px;
    margin-top: 3px;
    letter-spacing: -0.01em;
  }

  /* Fix #2: Expand (i) info-icon tap target to 32x32 while keeping the
     14px gray glyph visible. Negative margins prevent the bigger button
     from pushing the trust-grid lines apart. */
  .df-trust-grid__info {
    width: 32px;
    height: 32px;
    margin: -9px 0 -9px -3px;
    padding: 0;
  }
  .df-trust-grid__info svg { width: 14px; height: 14px; }

  /* Fix #3: Bump FT tab strip chips to >=44px min-height for iOS tap
     compliance. Keep the chip's visual padding light but ensure tap
     surface meets the guideline. */
  .df-tab {
    padding: 12px 12px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
  }
}

@media (max-width: 360px) {
  /* On very narrow phones (< 360px) fall back to 1-per-row seniority
     pills so content never clips. Restore the larger fonts since the
     pill is full-width again. */
  .df-radio-row .df-radio-pill--col {
    flex: 1 1 100%;
    padding: 10px 14px 9px;
  }
  .df-radio-pill--col .df-radio-pill__name { font-size: 13px; }
  .df-radio-pill--col .df-radio-pill__blurb { font-size: 11px; line-height: 1.35; }
  .df-radio-pill--col .df-radio-pill__rate {
    font-size: 12px;
    margin-top: 4px;
    letter-spacing: -0.005em;
  }
}