/* ──────────────────────────────────────────────────────────────────────────
   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__info { transition: color 0.15s ease; }
.df-section__info:hover, .df-loc-tip-wrap:hover .df-section__info { color: #374151; }
.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;
}
/* 2026-06-09: availability spans the box width as a compact row, like the add-ons,
   without stretching the 3D capacity asset; description sits inline beside it. */
.df-plan > .df-avail, .df-ft-form > .df-avail { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
/* 2026-06-09: head on its own line; capacity asset fixed at the 260px add-on width so it is not deformed */
.df-plan > .df-avail .df-avail__head, .df-ft-form > .df-avail .df-avail__head { flex: 0 0 100%; justify-content: flex-start; }
.df-plan > .df-avail .df-avail__track, .df-ft-form > .df-avail .df-avail__track { flex: 0 0 260px; width: 260px; max-width: 100%; min-width: 0; }
.df-plan > .df-avail .df-avail__copy, .df-ft-form > .df-avail .df-avail__copy { flex: 1 1 200px; margin: 0; font-size: 12px; line-height: 1.45; }
.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;
}
/* 2026-06-03: thin glass frame over the onboarding-availability pill,
   mirroring .addon__capacity-track > .addon__capacity-frame. The bevel is
   painted by .thin-glass-frame::before (app.v2.css); overflow:hidden on the
   track clips it to the pill curve. */
.df-avail__track > .df-avail__frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
}
.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;
}
/* 2026-06-10: roles — fixed 5 per row on desktop so cards are wider and
   role names fit without wrapping awkwardly. Applies to both FT and PT.
   The 640/480/360px breakpoints further down override this by source order. */
@media (min-width: 900px) {
  .df-role-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ── ROLE CARD ────────────────────────────────────────────────────────── */
.df-role-card {
  position: relative;
  text-align: left;
  padding: 14px 16px 14px 33px;
  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;
  min-height: 104px;
  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: 13px;
  left: 11px;
  width: 18px; height: 18px;
  border-radius: 5px;
  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: 2px;
}
.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: 16px;
  margin-top: 13px;
  overflow: visible;
  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: -11px;
  left: 50%;
  transform: translateX(-50%);
  height: 22px;
  width: auto;
  pointer-events: none;
  display: block;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(15, 28, 53, 0.18);
}

/* ── 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;
  /* 2026-06-08 (Loom 32): amber treatment mirroring the white-label margin box (.svc-margin--gold) */
  background: linear-gradient(180deg, #FFF4E4 0%, #FFFDFA 78%);
  border: 0;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 0 0 1.5px rgba(252, 157, 43, 0.55),
    0 10px 26px -12px rgba(199, 120, 0, 0.35);
}
.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 {
  /* 2026-06-03 (Loom 18 7:40): match the pricing-card glass treatment
     (.svc / .tier / .client-section-card) instead of the flat panel. */
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.75rem;
  padding: 1.5rem 1.6rem;
  margin: 1rem 0 1.1rem;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 0;
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(15,23,42,0.05),
    0 18px 36px -18px rgba(44, 51, 102, 0.2);
}
.df-trust-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    url('glass-frame/top-left.webp')     top left     / 22px 22px no-repeat,
    url('glass-frame/top-right.webp')    top right    / 22px 22px no-repeat,
    url('glass-frame/bottom-left.webp')  bottom left  / 22px 22px no-repeat,
    url('glass-frame/bottom-right.webp') bottom right / 22px 22px no-repeat,
    url('glass-frame/top.webp')    22px top    / calc(100% - 44px) 22px repeat-x,
    url('glass-frame/bottom.webp') 22px bottom / calc(100% - 44px) 22px repeat-x,
    url('glass-frame/left.webp')   left 22px   / 22px calc(100% - 44px) repeat-y,
    url('glass-frame/right.webp')  right 22px  / 22px calc(100% - 44px) repeat-y;
  mix-blend-mode: multiply;
  z-index: 1;
}
.df-trust-grid::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(130% 90% at 50% -15%, rgba(255,255,255,0.5), transparent 55%);
  z-index: 1;
}
.df-trust-grid > * { position: relative; z-index: 2; }
@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.7rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(15, 28, 53, 0.08);
}
.df-trust-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.df-trust-grid__item {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  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: 0;
  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;
  }
}

/* 2026-06-05 (Loom 24 00:00): role-card badge now straddles the top edge,
   centred, like the Grow tier RECOMMENDED banner, instead of an inline row
   that consumed vertical space. Applies to the AI (recommended) and
   Full-Stack Marketer (popular) role cards. */
.df-role-card--badged { overflow: visible; padding-top: 22px; }
.df-role-card .df-role-card__rec-banner {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  height: 22px;
  width: auto;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(60, 40, 10, 0.18));
}


/* ── Deposit card: Costs | Talent buyout tabs (Loom 32) ─────────────────── */
.df-deposit-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.df-deposit-tab {
  flex: 1 1 0; padding: 7px 10px; border: 1px solid #d8dee9;
  background: #fff; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600;
  color: #6b7280; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.df-deposit-tab:hover { border-color: rgba(252, 157, 43, 0.5); }
.df-deposit-tab--on { background: #FFE9D2; color: #7A3E00; border-color: rgba(252, 157, 43, 0.6); }
.df-deposit-buyout { padding: 2px 0 4px; }
.df-deposit-buyout__lede { font-size: 13px; line-height: 1.5; color: #0f1c35; margin-bottom: 10px; }
.df-deposit-buyout__tiers { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.df-deposit-buyout__tiers li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 6px 10px; background: #fafbfd; border: 1px solid #eef0f5; border-radius: 8px; }
.df-deposit-buyout__tiers li span:last-child { font-weight: 700; color: #0f1c35; }

/* Loom 32: keep the last word of a role name and its info icon on the same line */
.df-role-card__name-tail { white-space: nowrap; }

/* ── 2026-06-08: deselect (X) button on FT/PT role config tabs ────────────
   .df-tab became a flex container holding the label button + a close button
   so users can remove a role straight from its tab. Keeps the desktop
   underline (::after on the container) and the mobile chip styling intact. */
.df-tab { display: inline-flex; align-items: center; gap: 5px; }
.df-tab__name {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  white-space: inherit;
}
.df-tab__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted, #9aa0a6);
  opacity: 0.6;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, opacity 140ms ease;
}
.df-tab__close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text, #2a2a2a);
  opacity: 1;
}
.df-tab--on .df-tab__close { color: #002ABF; opacity: 0.85; }
.df-tab--on .df-tab__close:hover { background: rgba(0, 42, 191, 0.14); opacity: 1; }

/* ── 2026-06-08: trim dead space on role cards without the recommended row ──
   Full-Time role cards render a "Recommended: <flag>" pill at the bottom; the
   104px min-height reserves room for it. Part-Time cards have no such row, so
   that reserved height left an empty gap below the price (flagged by Alexander).
   Cards lacking the rec row now size to their content; CSS grid's default
   align-items:stretch still keeps every card in a row equal height. */
.svc--dedicated .df-role-card:not(:has(.df-role-card__rec)) {
  min-height: 0;
  padding-bottom: 10px;
}
/* Recommended/Popular badged PT cards reserve 22px up top for the floating
   badge (which only dips ~11px into the card); 16px clears it and pulls the
   whole row down, shrinking the gap on shorter sibling cards in that row. */
.svc--dedicated .df-role-card--badged:not(:has(.df-role-card__rec)) {
  padding-top: 16px;
}

/* ── 2026-06-08: "Contract length" eyebrow above the per-role month toggle ──
   Wraps the commit pills in a column so the small-caps label sits on top of
   them (left-aligned to the bar), matching the "MINIMUM COMMITMENT PRICING"
   treatment on the standard service cards. The wrapper replaces .df-commit-bar
   as the right-hand flex child of .df-ft-form__head (which is align-items:
   flex-start, so the label tops out level with the role title). */
.df-commit-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  flex-shrink: 0;
}
.df-commit-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  line-height: 1;
}
.df-commit-eyebrow .svc__commit-eyebrow-info {
  width: 12px;
  height: 12px;
  opacity: 0.6;
}
@media (max-width: 600px) {
  .df-commit-wrap { align-self: flex-start; }
}

/* ── 2026-06-08: kill dead space under the FT role title ──────────────────
   The "Contract length" eyebrow made the commit-toggle block taller than the
   title, and because .df-ft-form__head is a flex row (align-items:flex-start)
   the row grew to the toggle's height, leaving empty space under the (short)
   title. Float the toggle into the top-right corner so it no longer inflates
   the header row; the title's own margin then sets the gap to Office Location.
   Desktop only — the mobile layout already stacks the toggle below the title. */
.df-ft-form, .df-plan { position: relative; }
@media (min-width: 601px) {
  .df-ft-form .df-commit-wrap { position: absolute; top: 0; right: 0; z-index: 2; }
  .df-ft-form__head { margin-bottom: 0; }
}

/* ── 2026-06-08: FT hire-quantity stepper (inline at end of Seniority row) ──
   Sits to the right of the Junior/Mid/Senior tiles, using the empty
   horizontal space so it needs no extra row. Multiplies the deposit +
   monthly estimate by the chosen headcount. */
.df-ft-qty {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  margin-left: auto;          /* push to the far right of the row */
  align-self: stretch;        /* match the seniority pill height */
  padding: 8px 14px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
}
.df-ft-qty__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #6b6b6b);
  white-space: nowrap;
}
.df-ft-qty__ctrl { display: inline-flex; align-items: center; gap: 10px; }
.df-ft-qty__btn {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  font-size: 16px;
  line-height: 1;
  color: var(--text, #222);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.df-ft-qty__btn:hover:not(:disabled) { border-color: var(--accent, #ff6f3c); color: var(--accent, #ff6f3c); }
.df-ft-qty__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.df-ft-qty__num {
  min-width: 22px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #111);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .df-ft-qty {
    margin-left: 0;
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ── 2026-06-08: thin glass frame on the FT Office Location + Seniority pills,
   matching the 14px bevel used on add-on chips, qualifier options and the
   onboarding pill elsewhere. CSS-only (no markup change): replicate the
   reusable .thin-glass-frame ::before overlay, scoped to these pills. The
   glass-frame/* assets resolve from /assets/ just like in app.v2.css. */
.df-radio-pill--loc::before,
.df-radio-pill--col::before {
  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: 1;
}
/* Keep the pill content above the bevel overlay. The RECOMMENDED ribbon is
   excluded so it keeps its own absolute positioning (top:-11px); it just gets
   a higher z-index to sit above the bevel. */
.df-radio-pill--loc > *:not(.df-location-rec-ribbon),
.df-radio-pill--col > * { position: relative; z-index: 2; }
.df-location-rec-ribbon { z-index: 3; }
/* Nudge the corner radius to 10px so the 14px frame corners seat cleanly
   (the 10:14 ratio used by the other framed cards). */
.df-radio-pill--loc,
.df-radio-pill--col { border-radius: 10px; }

/* ── 2026-06-08: hire quantity moves INTO the selected seniority card ──────
   The seniority tile is now a horizontal container: a text block on the left
   (.df-sen__main, original column layout) and a quantity section on the right
   (.df-sen__qty) that animates open only when the card is selected, so the
   card appears to expand to the right. The thin glass frame on
   .df-radio-pill--col already wraps the whole (expanding) card. */
.df-radio-pill--col {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
}
.df-sen__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px 9px;
  flex: 1 1 auto;
  min-width: 0;
}
.df-sen__qty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  max-width: 0;
  padding: 8px 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  white-space: nowrap;
  border-left: 0 solid var(--df-accent-line, rgba(0, 42, 191, 0.30));
  transition: max-width 280ms ease, opacity 200ms ease, padding 280ms ease, border-left-width 280ms ease;
}
.df-radio-pill--col.df-radio-pill--on .df-sen__qty {
  max-width: 170px;
  opacity: 1;
  pointer-events: auto;
  padding: 8px 14px;
  border-left-width: 1px;
}
.df-sen__qty .df-ft-qty__label { font-size: 10.5px; line-height: 1.1; }
.df-sen__qty .df-ft-qty__ctrl { gap: 8px; }
/* disabled-look for the min/max limit (spans, so no :disabled pseudo) */
.df-ft-qty__btn--off { opacity: 0.35; pointer-events: none; }


/* Batch 24 (Loom 31 FT): glass-style the Configure-placement box to match .df-trust-grid */
.df-ft-form, .df-plan {
  background: linear-gradient(180deg, #FFF4E4 0%, #FFFDFA 78%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 18px;
  padding: 1.4rem 1.5rem;
  margin: 0.5rem 0 0.6rem;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 1.5px rgba(252, 157, 43, 0.55), 0 12px 28px -14px rgba(199, 120, 0, 0.35);
}
.df-ft-form > .df-deposit-card { margin-top: 1.1rem; padding: 0.95rem 1.05rem; background: rgba(255,255,255,0.55); border: 1px solid rgba(252, 157, 43, 0.32); border-radius: 14px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.df-ft-form::before, .df-plan::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    url('glass-frame/top-left.webp')     top left     / 22px 22px no-repeat,
    url('glass-frame/top-right.webp')    top right    / 22px 22px no-repeat,
    url('glass-frame/bottom-left.webp')  bottom left  / 22px 22px no-repeat,
    url('glass-frame/bottom-right.webp') bottom right / 22px 22px no-repeat,
    url('glass-frame/top.webp')    22px top    / calc(100% - 44px) 22px repeat-x,
    url('glass-frame/bottom.webp') 22px bottom / calc(100% - 44px) 22px repeat-x,
    url('glass-frame/left.webp')   left 22px   / 22px calc(100% - 44px) repeat-y,
    url('glass-frame/right.webp')  right 22px  / 22px calc(100% - 44px) repeat-y;
  mix-blend-mode: multiply; z-index: 1;
}
.df-ft-form::after, .df-plan::after {
  content: ''; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(130% 90% at 50% -15%, rgba(255,255,255,0.5), transparent 55%); z-index: 1;
}
.df-ft-form > *, .df-plan > * { position: relative; z-index: 2; }
.df-ft-form > .df-ft-form__head { z-index: 3; } /* keep absolute contract pills above the Office Location field */
/* ── 2026-06-09: custom role card + config form ──────────────────────────
   The "Custom role" card sits at the end of the FT role grid as a dashed
   add-affordance; once selected it reads like the other role cards. Its
   config dialog (name / hourly rate / requirements) reuses .df-field. */
.df-role-card--custom {
  border-style: dashed;
  border-color: rgba(0, 42, 191, 0.30);
}
.df-role-card--custom.df-role-card--on { border-style: solid; }
.df-role-card--custom .df-role-card__name { color: var(--accent, #002ABF); }
.df-role-card--custom.df-role-card--dim .df-role-card__name { color: var(--text, #2a2a2a); }

/* custom config form inputs */
.df-custom-text {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--text, #1a1a1a);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.df-custom-text:focus {
  outline: none;
  border-color: var(--df-accent-edge, rgba(0,42,191,0.5));
  box-shadow: 0 0 0 3px var(--df-accent-soft2, rgba(0,42,191,0.10));
}
.df-custom-text::placeholder { color: #9aa0a6; }
.df-custom-rate { display: inline-flex; align-items: center; gap: 6px; }
.df-custom-rate__prefix { font-size: 15px; font-weight: 700; color: var(--text, #1a1a1a); }
.df-custom-rate__input { width: 110px; text-align: left; }
.df-custom-rate__suffix { font-size: 13px; color: var(--muted, #6b6b6b); }
.df-custom-brief { width: 100%; box-sizing: border-box; }
.df-custom-loc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(0, 42, 191, 0.05);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text, #2a2a2a);
}
.df-custom-loc__flag { border-radius: 2px; flex: 0 0 auto; object-fit: cover; }

/* ── 2026-06-09: recommended-country shown as text (name) not a flag ──────── */
.df-role-card__rec { padding: 2px 8px; }   /* even out the pill (no flag now) */
.df-role-card__rec-country { font-weight: 600; color: var(--text, #4a4a4a); }

/* ── 2026-06-09: per-role task tick grid (PT expanded section) ────────────
   Reuses the .df-trust-grid glass card; one heading spans both columns,
   then two columns of task ticks (no per-column titles, no help cursor). */
.df-trust-grid__heading {
  grid-column: 1 / -1;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gg-blue, #002ABF);
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(15, 28, 53, 0.08);
}
.df-trust-grid--tasks .df-trust-grid__item { cursor: default; }


/* ── RWD-02 (2026-06-10): touch-target hit-box extensions (no visual change).
   QA measured: qty steppers 26px, role remove 18px, tab close 16px — all
   below the 44px guideline. ::after extends only the CLICKABLE area on
   coarse-pointer devices; layout and visuals are untouched. */
@media (pointer: coarse) {
  .df-ft-qty__btn,
  .df-tab__close { position: relative; }
  .df-ft-qty__btn::after { content: ''; position: absolute; inset: -9px; }       /* 26 -> 44px */
  .df-tab__close::after { content: ''; position: absolute; inset: -12px; }       /* 16 -> 40px */
  .df-role-card__remove::after { content: ''; position: absolute; inset: -11px; } /* 18 -> 40px */
}

/* ── 2026-06-10 (Loom 34): FT cost card split — per-role breakdown left,
   Estimated monthly + Starting deposit in a right-hand totals column. ── */
.df-deposit-card__split { display: grid; grid-template-columns: minmax(0, 1fr) 252px; gap: 12px 22px; align-items: start; }
.df-deposit-card__lines-head { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gg-muted, #6b7280); margin: 2px 0 6px; }
.df-deposit-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px dashed rgba(15, 28, 53, 0.10); }
.df-deposit-line:last-child { border-bottom: 0; }
/* 2026-06-12 (Loom 45): per-role overlay link inside the cost card. */
.df-deposit-line__namewrap { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.df-deposit-line__more { background: none; border: none; padding: 0; font-size: 10.5px; font-weight: 600; color: var(--gg-blue, #002ABF); cursor: pointer; text-align: left; line-height: 1.3; }
.df-deposit-line__more:hover .df-deposit-line__more-text { text-decoration: underline; }
.df-deposit-line__more-arrow { display: inline-block; transition: transform 0.15s ease; }
.df-deposit-line__more:hover .df-deposit-line__more-arrow { transform: translateX(3px); }
.df-deposit-line__name { display: block; font-size: 13px; font-weight: 600; }
.df-deposit-line__meta { display: block; font-size: 11.5px; color: var(--gg-muted, #6b7280); margin-top: 2px; }
.df-deposit-line__amt { font-size: 13px; font-weight: 700; white-space: nowrap; }
.df-deposit-card__totals { border-left: 1px solid rgba(15, 28, 53, 0.10); padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.df-deposit-total__amt { margin: 3px 0 4px; }
@media (max-width: 860px) {
  .df-deposit-card__split { grid-template-columns: 1fr; }
  .df-deposit-card__totals { border-left: 0; padding-left: 0; border-top: 1px solid rgba(15, 28, 53, 0.10); padding-top: 12px; }
}

/* ── 2026-06-10 (Loom 34): PT day tiles 2x2 with the cost breakdown beside ── */
.df-plan__split { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 14px 18px; align-items: start; }
.df-plan__tiles--stacked { grid-template-columns: repeat(2, 1fr); }
.df-plan__side .df-deposit-card { margin: 0; }
.df-deposit-card__lines--pt { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(15, 28, 53, 0.10); }
@media (max-width: 860px) {
  .df-plan__split { grid-template-columns: 1fr; }
}

/* ── 2026-06-10 (Loom 34): Mid seniority Recommended ribbon + role-card tip
   polish. Seniority pills mirror the location row, overflow opened and the
   row dropped 13px so the half-out ribbon has room; the child z-index rule
   is re-overridden so the ribbon keeps its absolute centring. ── */
.df-radio-pill--col { overflow: visible; margin-top: 13px; padding-top: 14px; }
.df-radio-pill--col > .df-location-rec-ribbon { position: absolute; z-index: 3; }
/* Role-card hover tips fade in like every .dis-tip on the same screen
   (they were the only tooltips that snapped), and sit 6px clear of the icon. */
.df-role-tip-portal { animation: df-role-tip-in 0.16s ease both; margin-top: -6px; }
@keyframes df-role-tip-in { from { opacity: 0; } to { opacity: 1; } }
/* The 13px icon rode 1.3px low against the name text midline. */
.df-role-card__name-tail .info-tip-icon { position: relative; top: -1px; }

/* ── 2026-06-10 (Nicole review): FT config split — fields left, cost card in
   the right half. Card stacks internally inside the narrow side column. ── */
.df-ft-split { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 4px 24px; align-items: start; }
.df-ft-split__side .df-deposit-card { margin: 0; }
.df-ft-split__side .df-deposit-card__split { display: block; }
.df-ft-split__side .df-deposit-card__totals { border-left: 0; padding-left: 0; border-top: 1px solid rgba(15, 28, 53, 0.10); padding-top: 12px; margin-top: 10px; }
@media (max-width: 1080px) {
  .df-ft-split { grid-template-columns: 1fr; }
  .df-ft-split__side .df-deposit-card__split { display: grid; }
  .df-ft-split__side .df-deposit-card__totals { border-left: 1px solid rgba(15, 28, 53, 0.10); border-top: 0; padding-left: 22px; padding-top: 0; margin-top: 0; }
}
@media (max-width: 860px) {
  .df-ft-split__side .df-deposit-card__split { display: block; }
  .df-ft-split__side .df-deposit-card__totals { border-left: 0; padding-left: 0; border-top: 1px solid rgba(15, 28, 53, 0.10); padding-top: 12px; margin-top: 10px; }
}

/* ── 2026-06-10 (Nicole review): tighter PT day tiles, wider combined box.
   The stacked tiles carried dead air under the blurbs, so padding and gaps
   tighten only inside the 2x2 variant and the freed width goes to the
   breakdown column (312px to 372px). ── */
.df-plan__split { grid-template-columns: minmax(0, 1fr) 372px; }
.df-plan__tiles--stacked { gap: 8px; }
.df-plan__tiles--stacked .df-plan-tile { padding: 10px 12px 8px; gap: 3px; }
.df-plan__tiles--stacked .df-plan-tile__blurb { line-height: 1.32; margin-top: 0; }

/* ── 2026-06-10 (Nicole): fill the dead space in the config boxes ──────────
   FT, the three location and seniority pills stretch across the whole fields
   column instead of leaving a gap before the cost card. PT, the day tiles
   stretch to the height of the combined box so neither column trails off. */
.df-ft-split__fields .df-radio-row { display: flex; }
.df-ft-split__fields .df-radio-row .df-radio-pill { flex: 1 1 0; }
.df-ft-split__fields .df-radio-row .df-radio-pill--col.df-radio-pill--on { flex: 1.55 1 0; }
.df-plan__split { align-items: stretch; }
.df-plan__split .df-plan__tiles--stacked { grid-auto-rows: 1fr; height: 100%; align-content: stretch; }
.df-plan__side .df-deposit-card { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.df-plan__side .df-deposit-card__foot { margin-top: auto; }

/* ── 2026-06-10 (Nicole): no flat boxes inside glass boxes — the day-rate
   tiles get the same thin glass bevel as the location and seniority pills. */
.df-plan-tile::before {
  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: 1;
}
.df-plan-tile > * { position: relative; z-index: 2; }

/* ── 2026-06-10 (Nicole, round 2): layered glass everywhere ────────────────
   The amber cost card keeps its gradient but gains the thin-glass bevel on
   ::after (its ::before is the radial highlight), and the new per-role
   breakdown panel in the FT left column is a thin-glass box like the pills. */
.df-deposit-card::after {
  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: 1;
}
.df-deposit-card > * { position: relative; z-index: 2; }
.df-role-breakdown {
  position: relative;
  margin-top: 16px;
  padding: 12px 14px 6px;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.10);
  border-radius: 10px;
}
.df-role-breakdown::before {
  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: 1;
}
.df-role-breakdown > * { position: relative; z-index: 2; }
.df-deposit-card__totals--solo { border-left: 0; padding-left: 0; display: flex; flex-direction: column; gap: 12px; }
.df-ft-split__side .df-deposit-card__totals--solo { border-left: 0; padding-left: 0; border-top: 0; padding-top: 0; margin-top: 0; }

/* PT column shortened: tighter tiles and a tighter combined card. */
.df-plan__tiles--stacked .df-plan-tile { padding: 8px 10px 7px; gap: 2px; }
.df-plan__tiles--stacked .df-plan-tile__blurb { font-size: 10.5px; }
.df-plan__side .df-deposit-card { padding: 14px 16px; }
.df-plan__side .df-deposit-card .df-deposit-line { padding: 5px 0; }
.df-plan__side .df-deposit-card__lines--pt { margin-bottom: 8px; padding-bottom: 5px; }
.df-plan__side .df-deposit-card__foot { margin-top: 10px; padding-top: 9px; }

/* ── 2026-06-10 (Nicole, round 2): tiles back to natural compact height.
   The stretch made the slimmed tiles inflate to the card height, so the
   columns top-align again and the availability bar fills under the tiles. */
.df-plan__split { align-items: start; }
.df-plan__split .df-plan__tiles--stacked { height: auto; grid-auto-rows: auto; }
.df-plan__side .df-deposit-card { height: auto; }
.df-plan__main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.df-plan__main .df-avail { margin-top: 2px; }

/* ── 2026-06-10 (Nicole, round 3) ──────────────────────────────────────────
   FT, the In-House | Direct Hire card stretches to the left column's height
   (breakdown grows, card grows), foot pinned to its base. PT, the day tiles
   are cut shorter horizontally (fixed 192px tiles) and the combined box takes
   all remaining width; tile rows spread vertically so the narrow column has
   no dead block; availability runs full width on its own line below. */
.df-ft-split { align-items: stretch; }
.df-ft-split__side .df-deposit-card { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.df-ft-split__side .df-deposit-card__foot { margin-top: auto; }
.df-plan__split { grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
.df-plan__tiles--stacked { grid-template-columns: repeat(2, 192px); height: 100%; grid-auto-rows: auto; align-content: space-between; }
.df-plan__side .df-deposit-card { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.df-plan__side .df-deposit-card__foot { margin-top: auto; }
@media (max-width: 860px) {
  .df-plan__tiles--stacked { grid-template-columns: repeat(2, 1fr); height: auto; }
}

/* ── 2026-06-10 (Nicole): DAY RATE icon spacing — the label's 5px flex gap
   stacked on the tip wrapper's 0.4rem margin (11.4px total). Gap zeroed so
   the wrapper's standard 0.4rem is the whole story; the icon itself is now
   the canonical InfoIcon, which brings the grey-to-blue hover transition. */
.df-plan__rate-label { gap: 0; }

/* ── 2026-06-10 (Nicole): trust grid to standard spacing. The .df column
   already provides a uniform 22px flex gap between sections; the grid's own
   1rem/1.1rem margins stacked on top of it (~44px above Roles). Margins
   zeroed so the grid sits on the same 22px rhythm as everything else. */
.df-trust-grid { margin: 0; }

/* ── 2026-06-10 (Nicole): PT combined box starts level with Office Location.
   The split now wraps the location field, the DAY RATE eyebrow, and the
   tiles in a left column sized to the location pills row, with the tiles
   widening to that same edge (where the South Africa pill ends). ── */
.df-plan__left { display: flex; flex-direction: column; gap: 14px; width: max-content; min-width: 0; }
.df-plan__left .df-field--pt-loc { width: max-content; }
.df-plan__tiles--stacked { grid-template-columns: repeat(2, 1fr); width: 100%; }
@media (max-width: 860px) {
  .df-plan__left { width: auto; }
  .df-plan__left .df-field--pt-loc { width: auto; }
}
/* In-House / Direct Hire tab tooltips: wrappers keep the 50/50 flex split. */
.df-deposit-tab-tipwrap { display: flex; flex: 1 1 0; min-width: 0; }
.df-deposit-tab-tipwrap .df-deposit-tab { width: 100%; }

/* ── 2026-06-10 (Nicole): cost-card tab panes grid-stacked so switching tabs
   never changes the card height; tab tooltips live on small info icons. ── */
.df-deposit-panes { display: grid; }
.df-deposit-pane { grid-area: 1 / 1; visibility: hidden; }
.df-deposit-pane.is-on { visibility: visible; }
.df-deposit-tab { display: inline-flex; align-items: center; justify-content: center; }
.df-deposit-tab .info-tip-icon { cursor: help; }

/* ── 2026-06-10 (Nicole): amber glow removed from the cost cards. Both the
   PT Combined-across box and the FT In-House | Direct Hire box now wear the
   same neutral glass treatment as the trust grid (translucent white, soft
   neutral shadow, blur), keeping the thin-glass bevel on ::after. The amber
   radial highlight on ::before goes with it. ── */
.df-deposit-card {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(15,23,42,0.05),
    0 18px 36px -18px rgba(44, 51, 102, 0.2);
}
.df-deposit-card::before { background: none; }

/* The .svc--dedicated variant outranked the neutral override above and kept
   its own white gradient; matched at the same specificity so the cards carry
   the trust grid's translucent glass for real. */
.svc--dedicated .df-deposit-card {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.svc--dedicated .df-deposit-card::before { background: none; }

/* ── 2026-06-10 (Loom 43 1:01): white instead of orange. The cost cards match
   the add-on tiles, solid white with the thin-glass bevel, layered glass on
   glass. Tab active state and hover move from amber to the brand blue tint. */
.df-deposit-card, .svc--dedicated .df-deposit-card { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.df-deposit-tab:hover { border-color: rgba(0, 42, 191, 0.45); }
.df-deposit-tab--on { background: rgba(0, 42, 191, 0.06); color: var(--gg-blue, #002ABF); border-color: rgba(0, 42, 191, 0.45); }

/* ── 2026-06-10 (Loom 43 1:01, Nicole): the Configure-your placement panel
   (FT) and the Office Location / day-rate panel (PT) are the boxes that go
   white. Amber gradient, amber ring, and amber glow replaced with the white
   add-on-tile treatment; geometry and the thin-glass bevel unchanged. ── */
.df-ft-form, .df-plan {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(15,23,42,0.05),
    0 18px 36px -18px rgba(44, 51, 102, 0.2);
}

/* ── 2026-06-10 (Loom 43 0:51, Nicole): the day-plan eyebrow becomes a field
   label, Select the number of days, bold and the same colour as Office
   Location instead of the muted uppercase DAY RATE. ── */
.df-plan__rate-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text, #111);
}

/* ── 2026-06-11 (Loom 42 0:00): the Recommended line on Full-Time role cards
   shows the country flag again, matching the location pills' flag styling.
   The country name remains as alt and title text. ── */
.df-role-card__rec-flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* ── 2026-06-11 (Loom 42, Nicole): one glass component, tabs inside it.
   The role-tab strip used to sit on the flat grey .df-inline-config wrapper
   with the glass panel nested below, a 2D layer behind the glass. The glass
   treatment moves up to the wrapper itself, so tabs and config share one
   glass box, and the inner panels lose their own box entirely. ── */
.df-inline-config {
  position: relative;
  isolation: isolate;
  background: #fff;
  border: 0;
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(15,23,42,0.05),
    0 18px 36px -18px rgba(44, 51, 102, 0.2);
}
.df-inline-config::before {
  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: 1;
}
.df-inline-config > * { position: relative; z-index: 2; }
.df-tab-strip { background: transparent; padding: 0.4rem 1.4rem 0; }
.df-ft-form, .df-plan {
  background: transparent;
  box-shadow: none;
  margin: 0;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.df-ft-form::before, .df-plan::before { display: none; }

/* ── 2026-06-11 (Nicole): one cost box, rows + totals together, capped to
   the left column. The card absolutely fills its side column so the grid
   row height is set by Location + Seniority (FT) or the tiles (PT) alone;
   rows scroll when more roles are selected than fit; totals stay pinned.
   Grey metas and subs are gone, replaced by info-icon tooltips. ── */
.df-ft-split__side, .df-plan__side { position: relative; }
.df-ft-split__side .df-deposit-card, .df-plan__side .df-deposit-card {
  position: absolute;
  inset: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.df-deposit-panes { flex: 1 1 auto; min-height: 0; }
.df-deposit-pane { min-height: 0; overflow: hidden; }
.df-deposit-pane--costs.is-on { display: flex; flex-direction: column; }
.df-deposit-pane > .df-deposit-buyout { overflow-y: auto; max-height: 100%; }
.df-deposit-card__lines--scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
.df-deposit-card__totals--pinned { flex: 0 0 auto; border-top: 1px solid rgba(15, 28, 53, 0.10); padding-top: 10px; margin-top: 8px; }
.df-deposit-line { align-items: center; }
.df-deposit-line__amtwrap { display: inline-flex; align-items: center; white-space: nowrap; }
.df-line-tipwrap { display: inline-flex; }
.df-line-tip-icon svg { display: block; }
@media (max-width: 1080px) {
  .df-ft-split__side .df-deposit-card, .df-plan__side .df-deposit-card { position: static; }
  .df-deposit-card__lines--scroll { max-height: 280px; }
}
@media (max-width: 860px) {
  .df-ft-split__side .df-deposit-card, .df-plan__side .df-deposit-card { position: static; }
}

/* ── 2026-06-11 (Nicole, round 2): cost-box polish. Scrollbars lose their
   up and down arrows and become a thin rounded thumb that only appears when
   rows genuinely overflow; totals put the figure on the same line as its
   label on both tiers to save height. ── */
.df-deposit-card__lines--scroll { scrollbar-width: thin; scrollbar-color: rgba(15, 28, 53, 0.20) transparent; }
.df-deposit-card__lines--scroll::-webkit-scrollbar { width: 6px; }
.df-deposit-card__lines--scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.df-deposit-card__lines--scroll::-webkit-scrollbar-thumb { background: rgba(15, 28, 53, 0.20); border-radius: 99px; }
.df-deposit-card__lines--scroll::-webkit-scrollbar-track { background: transparent; }
.df-deposit-pane > .df-deposit-buyout { scrollbar-width: thin; scrollbar-color: rgba(15, 28, 53, 0.20) transparent; }
.df-deposit-pane > .df-deposit-buyout::-webkit-scrollbar { width: 6px; }
.df-deposit-pane > .df-deposit-buyout::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.df-deposit-pane > .df-deposit-buyout::-webkit-scrollbar-thumb { background: rgba(15, 28, 53, 0.20); border-radius: 99px; }
.df-deposit-total--inline { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.df-deposit-total--inline .df-deposit-card__label { flex: 1 1 auto; min-width: 0; }
.df-deposit-card__totals--pinned .df-deposit-total__amt { margin: 0; font-size: 21px; white-space: nowrap; }
.df-deposit-card__totals--pinned { display: flex; flex-direction: column; gap: 8px; }

/* ── 2026-06-11 (Nicole, round 3): header gap above Configure-your trimmed
   (139px of strip and stacked paddings), totals figures sized down on both
   tiers, Direct Hire lede smaller so nothing scrolls, and breathing room
   between scrolling rows and the Estimated monthly line. ── */
.df-inline-config__body { padding-top: 8px; }
.df-ft-form, .df-plan { padding-top: 0.85rem; }
.df-tab-strip { padding-top: 0.3rem; }
.df-deposit-card__totals--pinned .df-deposit-total__amt { font-size: 18px; }
.df-deposit-buyout__lede { font-size: 12px; line-height: 1.45; }
.df-deposit-card__totals--pinned { margin-top: 10px; padding-top: 12px; }
.df-deposit-card__lines--scroll { padding-bottom: 6px; }

/* The old side-column rule (.df-ft-split__side .df-deposit-card__totals--solo,
   0-3-0) was flattening the pinned totals' divider, padding, and margin to
   zero, which is exactly the rows-touching-Estimated-monthly Nicole flagged.
   Matched at higher specificity for both tiers. */
.df-ft-split__side .df-deposit-card__totals--pinned,
.df-plan__side .df-deposit-card__totals--pinned {
  border-top: 1px solid rgba(15, 28, 53, 0.10);
  padding-top: 12px;
  margin-top: 10px;
}

/* 2026-06-12 (Loom 45, reviewed): the custom-days stepper docks compact under
   the role it configures inside the cost card, and each role's amount carries
   a grey days-per-month line in place of the old formula tooltip. */
.df-deposit-card--merged .df-plan__custom--incard { margin: 4px 0 10px; padding: 8px 10px; border: 1px solid rgba(0, 42, 191, 0.14); background: rgba(0, 42, 191, 0.045); border-radius: 10px; }
.df-plan__custom--incard .df-plan__custom-label { font-size: 11px; font-weight: 700; display: block; margin: 0; flex: 1 1 auto; min-width: 0; }
.df-plan__custom-head { display: flex; align-items: center; gap: 6px; }
.df-plan__custom-badge { font-size: 9.5px; font-weight: 700; color: #B85E0A; background: linear-gradient(180deg, rgba(184, 94, 10, 0.14), rgba(184, 94, 10, 0.06)); border: 1px solid rgba(184, 94, 10, 0.35); border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.df-plan__custom-collapse { background: none; border: none; padding: 2px; cursor: pointer; color: var(--gg-muted, #6b7280); display: inline-flex; align-items: center; flex-shrink: 0; }
.df-plan__custom-collapse:hover { color: var(--gg-blue, #002ABF); }
.df-plan__custom--incard .df-plan__custom-input-wrap { margin-top: 6px; }
.df-plan__custom--incard .df-plan__custom-input-wrap { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 0; }
.df-plan__custom--incard .df-plan__custom-step { width: 22px; height: 22px; min-width: 22px; padding: 0; font-size: 13px; line-height: 1; }
.df-plan__custom--incard .df-plan__custom-input { width: 40px; height: 24px; font-size: 12.5px; padding: 0 2px; text-align: center; }
.df-plan__custom--incard .df-plan__custom-suffix { font-size: 10.5px; color: var(--gg-muted, #6b7280); }
.df-deposit-card--merged .df-deposit-line__amtwrap { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.df-deposit-line__days { display: block; font-size: 10.5px; color: var(--gg-muted, #6b7280); margin-top: 1px; text-align: right; white-space: nowrap; }

/* 2026-06-12 (Loom 41): waitlist pill on role cards. */
.df-role-card__wl { margin-top: 5px; align-self: flex-start; }

/* 2026-06-12 (Loom 41): start-window selector. */
.df-start { margin: 14px 0 0; padding: 12px 14px; }
.df-start__head { display: flex; align-items: center; margin-bottom: 8px; }
.df-start__title { font-size: 13px; font-weight: 700; color: var(--gg-heading, #0f1c35); }
.df-start__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.df-start__opt { padding: 7px 12px; border-radius: 10px; border: 1px solid rgba(15, 28, 53, 0.10); background: rgba(255, 255, 255, 0.75); font-size: 12px; font-weight: 600; color: var(--gg-body, #1f2937); cursor: pointer; font-family: inherit; transition: border-color 0.15s ease, background 0.15s ease; }
.df-start__opt:hover { border-color: rgba(0, 42, 191, 0.35); }
.df-start__opt--on { background: var(--gg-blue, #002ABF); border-color: var(--gg-blue, #002ABF); color: #fff; }

/* 2026-06-12 (Loom 41, Nicole's Option A): one-off vs recurring billing pill
   row pinned to the top of the Part-Time cost card, the Pay-upfront pattern
   at card scale. */
.df-billing-row { display: flex; align-items: center; justify-content: flex-end; gap: 0.3rem; margin: 0 0 0.55rem; }
.df-deposit-card--merged .df-billing-toggle { margin: 0; }
.df-pt-commit-eyebrow { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: -0.1rem 0 0.55rem; line-height: 1; }
.df-pt-commit-eyebrow .svc__commit-eyebrow-info { width: 12px; height: 12px; opacity: 0.6; }
.df-pt-commit-eyebrow--off { visibility: hidden; }

/* 2026-06-12 (Nicole): custom-role form, the hourly rate and a compact
   office-location picker share one row, pills never wrap to a second line. */
.df-custom-row { display: flex; gap: 1.1rem; align-items: flex-start; flex-wrap: nowrap; }
.df-custom-row .df-field { margin: 0; }
.df-custom-row .df-field--rate { flex: 0 0 auto; }
.df-custom-row .df-field--loc { flex: 1 1 0; min-width: 0; }
.df-radio-row--loc-compact { flex-wrap: nowrap; gap: 0.4rem; }
.df-radio-pill--loc-sm { min-width: 0; height: 47px; padding: 0 0.75rem; margin-top: 6px; font-size: 0.78rem; white-space: nowrap; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.4rem; }
.df-radio-pill--loc-sm .df-radio-pill__flag-img { width: 18px; height: 13px; }
.df-radio-pill--loc-sm .df-location-rec-ribbon { height: 18px; top: -9px; }

/* 2026-06-12 (Loom 46): explicit role-overlay link on the role cards, the
   cost-card link pattern at card scale. */
.df-role-card__more { display: block; background: none; border: none; padding: 0; margin: 4px 0 0; font-size: 10.5px; font-weight: 600; color: var(--gg-blue, #002ABF); cursor: pointer; text-align: left; line-height: 1.3; }
.df-role-card__more:hover { text-decoration: underline; }

/* 2026-06-12 (Nicole's polish round): the start-window box reads as a white
   card like the config panel, the custom form breathes (the rate row and the
   Role description clear their neighbours), and pills sit on one line. */
.df-start--card {
  position: relative;
  isolation: isolate;
  background: #fff;
  border: 0;
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(15,23,42,0.05),
    0 18px 36px -18px rgba(44, 51, 102, 0.2);
}
.df-start--card::before {
  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;
  z-index: 1;
}
.df-start--card > * { position: relative; z-index: 2; }
.df-custom-form .df-custom-row { margin-top: 18px; }
.df-custom-form .df-custom-row + .df-field { margin-top: 18px; }

/* 2026-06-12 (Nicole): the hourly-rate input and the location pills share an
   exact 47px height. */
.df-custom-form .df-custom-rate__input { height: 47px; box-sizing: border-box; }

/* 2026-06-12 (review round two): waitlisted FT cost-card lines stack, the
   amber badge sits below the dash. */
.df-deposit-line__amtwrap--wl { flex-direction: column; align-items: flex-end; gap: 3px; white-space: normal; }
.df-deposit-line__wl { font-size: 9px; }

/* 2026-06-12 (review): the PT custom fields breathe less inside the day-rate
   panel, the FT custom rate input aligns with the location pills, and the
   in-name waiting-list badge spaces off the role name. */
.df-plan__left .df-field + .df-field { margin-top: 8px; }
.df-plan__left .df-field .df-field__label { margin-bottom: 4px; }
.df-custom-row .df-custom-rate { margin-top: 6px; }
.df-deposit-line__name .df-deposit-line__wl { margin-left: 6px; vertical-align: middle; }

/* 2026-06-12 (review): cost-card role names are clickable tab hops. */
.df-deposit-line__name-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.df-deposit-line__name-btn:hover { color: var(--gg-blue, #002ABF); text-decoration: underline; }

/* 2026-06-12 (review): the see-what link breathes below a badged name line. */
.df-deposit-line__namewrap .df-deposit-line__more { margin-top: 4px; }

/* 2026-06-13 (review): inline warning under the custom role fields when the
   professional-language check clears them, plus the attention pulse the Next
   gate puts on the empty name field. */
.df-field__warn {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
}
.df-custom-text--attn {
  border-color: #b45309 !important;
  box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.18) !important;
}
/* Persistent amber edge whilst the professional-language warning is showing,
   the text stays in place so the user can edit rather than retype. */
.df-custom-text--flagged {
  border-color: #b45309;
  box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.12);
}