/* Referral demo, round 2: the screens. Inside the Connect compact shell (1rem = the Compact root: 14px up to 1440,
 * ~15px at 1995). Built from the reference images in _ref/. Type scale: page title 1.6rem; section titles ~16px
 * semibold; labels 13px muted; values 14-15px; big figures 28-32px semibold, tabular, tight tracking.
 * Fields: label above, white 1px border box; hover only darkens a border or lights a full-width row. */

html.rf .cs-crumb h1 { font-family: var(--font-display); color: var(--ats-title); }
html.rf .btn { border-radius: var(--r-ctl); }
html.rf .cs-well { padding-bottom: 4.5rem; } /* the Demo pill never sits over the last row */
html.rf { --tint: color-mix(in oklab, var(--primary) 8%, #fff); --tint-2: color-mix(in oklab, var(--primary) 16%, #fff); --ink: #12142b; --hair: rgba(16, 17, 25, 0.08); }
.mono { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; letter-spacing: 0.04em; }
.btn { font-size: var(--text-sm); height: 2.375rem; font-weight: 500; transition: background-color 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease), box-shadow 140ms var(--ease); }
.btn-lg { height: 2.875rem; padding: 0 1.25rem; font-size: 1rem; }
.btn-sm { height: 2rem; font-size: var(--text-xs); padding: 0 0.75rem; }
.btn-primary:hover { background: color-mix(in oklab, var(--primary) 88%, #000); }
.btn-outline:hover { border-color: color-mix(in oklab, var(--fg) 34%, var(--line-2)); }
.btn-ghost:hover { background: var(--subtle); color: var(--fg); }
.btn:focus-visible, .lnk:focus-visible, .cpy-i:focus-visible, .tabs button:focus-visible, .ftabs button:focus-visible, .top-pill:focus-visible, .flag:focus-visible, summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-ghost.q { color: var(--muted-fg); }
.ic-b { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--wash); color: var(--primary); }
.ic-b.ok { background: var(--green-wash); color: var(--green); }
.lnk { background: none; border: 0; padding: 0; }
.lnk.q { color: var(--fg-2); font-weight: 500; }
.muted { color: var(--muted-fg); }
.card { border-color: var(--line); border-radius: 14px; }
.c-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.c-h h3, .card > h3 { font-family: var(--font-display); font-size: 1.0667rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ats-title); }
.c-h h3 .cnt { margin-left: 0.25rem; font-weight: 500; color: var(--muted-fg); }
.pad { padding-left: 1.5rem; padding-right: 1.5rem; }
.lede { font-size: var(--text-sm); line-height: 1.55; color: var(--muted-fg); }
.lede .lnk { font-size: inherit; }
.tot { font-size: var(--text-sm); color: var(--muted-fg); }
.tot b { font-weight: 600; color: var(--fg); }

/* ---- line illustrations: Connect-blue strokes with a soft tinted fill ---- */
.ill { display: block; color: var(--primary); }
.ill .t { fill: var(--tint-2); }

/* ---- fields ---- */
.f { gap: 0.4375rem; }
.f > label, .f-l { font-size: var(--text-sm); font-weight: 500; color: var(--fg); }
.in { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-width: 0; height: 2.5rem; padding: 0 0.875rem; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; color: var(--fg); font-size: var(--text-sm); outline: none; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease); }
.in:hover { border-color: color-mix(in oklab, var(--fg) 30%, var(--line-2)); }
.in:focus, .in:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 14%, transparent); }
.in::placeholder, .in input::placeholder { color: var(--muted-fg); opacity: 0.85; }
.in.bad { border-color: rgba(212, 24, 61, 0.55); }
.in.ro { background: var(--canvas); color: var(--fg); box-shadow: none; }
.in.ro:hover { border-color: var(--line-2); }
.in.ro .ic { color: var(--muted-fg); }
.in.ro small { margin-left: auto; font-size: var(--text-xs); color: var(--muted-fg); }
.in-ic .ic { flex: none; color: var(--muted-fg); }
.in-ic input, .in-cp input, .in-lead input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; font: inherit; color: var(--fg); }
.in-cp { padding-right: 0.375rem; height: 2.75rem; }
.s-fields .in-cp { font-size: 1rem; }
.in-cp.mono input { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; letter-spacing: 0.04em; }
.g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.25rem; }
.g2 .full { grid-column: 1 / -1; }
.hint, .note { font-size: var(--text-xs); line-height: 1.5; color: var(--muted-fg); }
.note .ic { flex: none; margin-top: 2px; }
.note.warn { color: var(--amber-ink); }

.cpy { display: flex; gap: 0.5rem; }
.cpy .in { flex: 1; }
.cpy-b { flex: none; min-width: 6rem; }
.cpy-b.copied, .cpy-b.btn-primary.copied { background: var(--green); border-color: var(--green); color: #fff; }
.cpy-b.btn-outline.copied { background: #fff; color: var(--green-ink); border-color: var(--green-line); }
.cpy-i { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 7px; color: var(--muted-fg); transition: color 140ms var(--ease), background-color 140ms var(--ease); }
.cpy-i:hover { color: var(--fg); background: var(--subtle); }
.cpy-i.copied { color: var(--green); }
.f-inv { margin-top: 1rem; }
.who { display: flex; align-items: center; gap: 0.375rem; font-size: var(--text-xs); color: var(--muted-fg); white-space: nowrap; }
.who .ic { flex: none; }

/* ---- page frame: the content fills the Settings column (round 1 capped it at 64rem: the dead right gap) ---- */
.st-main { max-width: none; }
.pg-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin: 0.125rem 0 1.5rem; }
.pg-h h2 { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: var(--ats-title); }
.pg-h p { margin-top: 0.375rem; font-size: var(--text-sm); line-height: 1.55; color: var(--muted-fg); max-width: 40rem; }
.pg-h .who { padding-bottom: 0.125rem; }

/* ---- status dot + label (no grey pills) ---- */
.sd { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); color: var(--fg); white-space: nowrap; }
.sd i { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #a3a6b4; }
.sd[data-t='blue'] i { background: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 16%, transparent); }
.sd[data-t='amber'] i { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in oklab, var(--amber) 20%, transparent); }
.sd[data-t='green'] i { background: var(--green); box-shadow: 0 0 0 3px color-mix(in oklab, var(--green) 18%, transparent); }
.sd[data-t='muted'] { color: var(--muted-fg); }
.sd[data-t='muted'] i { background: transparent; border: 1.5px solid #b4b7c3; }

/* where it's up to */
.wh { display: inline-flex; align-items: center; gap: 0.4375rem; font-size: var(--text-sm); color: var(--fg-2); min-width: 0; }
.wh .ic { flex: none; }
.wh.ok { color: var(--green-ink); }
.wh.ok .ic { color: var(--green); }
.wh.ok b { font-weight: 600; }
.wh.amb { color: var(--amber-ink); }
.wh.amb .ic { color: var(--amber); }
.wh.mute { color: var(--muted-fg); }
.wh.bar { gap: 0.75rem; }
.pb { flex: none; display: block; width: 5.5rem; height: 0.375rem; border-radius: 999px; background: color-mix(in oklab, var(--primary) 12%, #eef0f6); overflow: hidden; }
.pb i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.pb.wide { width: 100%; height: 0.625rem; }
.wh.bar.sm .pb { width: 3.5rem; }

/* company logo square: initials on the company's own tint */
.lg { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9px; background: hsl(var(--h) 80% 95%); color: hsl(var(--h) 48% 34%); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; box-shadow: inset 0 0 0 1px hsl(var(--h) 50% 40% / 0.1); }
.lg.sm { width: 1.75rem; height: 1.75rem; border-radius: 7px; font-size: 0.6875rem; }
.lg.xs { width: 1.375rem; height: 1.375rem; border-radius: 6px; font-size: 0.5625rem; }

/* ---- the referral list ---- */
.rl { display: flex; flex-direction: column; }
.rl-h, .rl-r { display: grid; grid-template-columns: minmax(14rem, 1.5fr) minmax(10rem, 0.9fr) minmax(13rem, 1.4fr) 5rem; gap: 1.25rem; align-items: center; padding: 0 1.5rem; }
.rl.v-stepper .rl-h, .rl.v-stepper .rl-r { grid-template-columns: minmax(14rem, 1.4fr) minmax(13rem, 1fr) minmax(13rem, 1.3fr) 5rem; }
.rl-h { height: 2.5rem; font-size: var(--text-xs); font-weight: 500; color: var(--muted-fg); border-bottom: 1px solid var(--line); }
.rl-r { min-height: 4rem; padding-top: 0.625rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--hair); transition: background-color 140ms var(--ease); }
.rl-r:last-of-type { border-bottom: 0; }
.rl-r:hover { background: color-mix(in oklab, var(--primary) 3.5%, var(--canvas)); }
.rl-co { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.rl-co > span:not(.lg) { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rl-co b { font-size: var(--text-sm); font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-co small { margin-top: 1px; font-size: var(--text-xs); color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-r.is-ended .lg { filter: grayscale(1); opacity: 0.7; }
.rl-r.is-ended .rl-co b { color: var(--fg-2); font-weight: 500; }
.rl-dt { text-align: right; font-size: var(--text-sm); color: var(--muted-fg); }
.rl-more { height: 3rem; border-top: 1px solid var(--line); font-size: var(--text-sm); font-weight: 500; color: var(--primary); text-align: center; }
.rl-more:hover { background: var(--canvas); }
.rl-first { display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.5rem; border-top: 1px solid var(--line); background: color-mix(in oklab, var(--primary) 3%, #fff); font-size: var(--text-sm); color: var(--fg-2); border-radius: 0 0 14px 14px; }
.rl-first .ic { color: var(--primary); }

/* mini stepper: Link opened > Talking > Paying > Rewarded */
.stp { display: inline-flex; align-items: center; flex-wrap: wrap; row-gap: 0.375rem; }
.stp i { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 999px; border: 1.5px solid #c9ccd8; background: #fff; }
.stp i.done { border-color: var(--primary); background: var(--primary); }
.stp i.now { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 16%, transparent); }
.stp b { flex: none; width: 1.25rem; height: 1.5px; background: #dcdee7; }
.stp i.done + b { background: var(--primary); }
.stp em { flex-basis: 100%; font-style: normal; font-size: var(--text-xs); font-weight: 500; color: var(--fg-2); }
.stp.end i { border-color: #d5d7e0; background: #eceef3; }
.stp.end b { background: #e3e5ec; }
.stp.end em { color: var(--muted-fg); font-weight: 400; }
.stp i:last-of-type.now { border-color: var(--green); background: var(--green); box-shadow: 0 0 0 3px color-mix(in oklab, var(--green) 18%, transparent); }
.stp:has(i:last-of-type.now) i.done { border-color: var(--green); background: var(--green); }
.stp:has(i:last-of-type.now) i.done + b { background: var(--green); }
.stp:has(i:last-of-type.now) em { color: var(--green-ink); }

/* empty state: an illustration, one line and the copy button */
.es { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 3rem 1.5rem 3.25rem; }
.es .ill { margin-bottom: 0.5rem; }
.es h3 { font-family: var(--font-display); font-size: 1.0667rem; font-weight: 600; color: var(--ats-title); }
.es p { max-width: 24rem; font-size: var(--text-sm); line-height: 1.5; color: var(--muted-fg); }
.es .btn { margin-top: 0.75rem; }
.es.sm { padding: 2rem 1rem; }

/* ---- the area chart ---- */
.ch { position: relative; margin-top: 1rem; }
.ch-plot { position: relative; }
.ch svg { display: block; width: 100%; height: 9.5rem; overflow: visible; }
.ch-l { fill: none; stroke: var(--primary); stroke-width: 2; }
.ch-b { stroke: var(--line-2); stroke-width: 1; }
.ch-g { stroke: var(--hair); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.ch-dot { position: absolute; width: 0.625rem; height: 0.625rem; margin: -0.3125rem 0 0 -0.3125rem; border-radius: 999px; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 18%, transparent); }
.ch-x { display: flex; justify-content: space-between; margin-top: 0.625rem; font-size: var(--text-xs); color: var(--muted-fg); }
.ch-x span:last-child { color: var(--fg); font-weight: 500; }
.ch-empty { position: relative; }
.ch-empty .ch svg { opacity: 0.22; filter: grayscale(1); }
.ch-empty p { position: absolute; inset: 0 0 1.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; text-align: center; font-size: var(--text-sm); color: var(--muted-fg); }
.ch-empty p b { color: var(--fg); font-weight: 600; }

/* ---- tabs (Searchable) ---- */
.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); margin-top: 0.5rem; }
.tabs button { position: relative; height: 2.875rem; padding: 0 1rem; font-size: 1rem; font-weight: 500; color: var(--muted-fg); transition: color 140ms var(--ease); }
.tabs button span { margin-left: 0.25rem; font-size: var(--text-xs); color: var(--muted-fg); padding: 0.125rem 0.4375rem; border-radius: 999px; background: var(--subtle); }
.tabs button:hover { color: var(--fg); }
.tabs button[aria-selected='true'] { color: var(--ats-title); }
.tabs button[aria-selected='true']::after { content: ''; position: absolute; left: 0.75rem; right: 0.75rem; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ats-title); }
.tab-p { margin-top: 1.5rem; }
/* inside Spotlight's column the flex gap already spaces it; pull the panel up so it sits 0.75rem under its tabs */
.d1 > .tab-p { margin-top: -0.75rem; }

/* ---- how it works, three illustrated steps (Gusto) ---- */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding: 0.5rem 0 0.25rem; }
.how li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.375rem; }
.how-i { display: grid; place-items: center; width: 5.5rem; height: 5.5rem; margin-bottom: 0.5rem; border-radius: 999px; background: radial-gradient(closest-side, color-mix(in oklab, var(--primary) 7%, #fff), transparent); }
.how b { font-family: var(--font-display); font-size: 1.0667rem; font-weight: 600; color: var(--ats-title); }
.how p { max-width: 21rem; font-size: var(--text-sm); line-height: 1.55; color: var(--muted-fg); text-wrap: pretty; }

.terms { display: flex; flex-direction: column; gap: 0.625rem; padding-left: 1.125rem; list-style: disc; }
.terms li { font-size: var(--text-sm); line-height: 1.55; color: var(--fg-2); max-width: 52rem; }

/* =============================================================== Direction 1: Spotlight (Dub + Searchable) */
.d1 { display: flex; flex-direction: column; gap: 1.5rem; }
.d1 .pg-h { margin-bottom: 0; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 37rem) minmax(16rem, 1fr); gap: 2rem; padding: 2.25rem 2.5rem 2rem; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; isolation: isolate;
	background:
		radial-gradient(38% 70% at 92% 18%, color-mix(in oklab, var(--primary) 34%, #fff) 0%, transparent 70%),
		radial-gradient(34% 60% at 70% 100%, #bfe0ff 0%, transparent 72%),
		radial-gradient(30% 55% at 100% 96%, #d9d0ff 0%, transparent 72%),
		radial-gradient(30% 60% at 62% 10%, #dbe9ff 0%, transparent 72%),
		radial-gradient(26% 50% at 80% 55%, #eef3ff 0%, transparent 80%),
		linear-gradient(90deg, #fff 38%, #f4f7ff 100%); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--hair) 1px, transparent 1px), linear-gradient(90deg, var(--hair) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 70%); mask-image: linear-gradient(90deg, transparent 30%, #000 70%); opacity: 0.7; }
.hero-l { display: flex; flex-direction: column; min-width: 0; }
.hl { font-family: var(--font-display); font-size: 1.0667rem; font-weight: 600; color: var(--ats-title); margin-bottom: 0.75rem; }
.hl-2 { margin-top: 2rem; }
.cpy.big .in { height: 2.875rem; font-size: 1rem; padding: 0 1rem; }
.cpy.big .btn { height: 2.875rem; padding: 0 1.125rem; font-size: 1rem; }
.hero-or { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.625rem; font-size: var(--text-sm); color: var(--muted-fg); }
.hero-or b { margin-left: 0.25rem; color: var(--fg); font-weight: 600; }
.hero-or .cpy-i { width: 1.75rem; height: 1.75rem; }
.rules { display: flex; flex-direction: column; gap: 0.75rem; }
.rules li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1rem; line-height: 1.45; color: var(--fg-2); }
.rules li .ic { flex: none; margin-top: 0.1875rem; color: var(--ats-title); }
.rules b { font-weight: 600; color: var(--ats-title); }
.hero-ft { display: flex; align-items: center; gap: 0.625rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--hair); font-size: var(--text-sm); color: var(--muted-fg); }
.hero-ft b { color: var(--fg); font-weight: 600; }
.hero-ft .lnk { font-size: var(--text-sm); }
.dotsep { width: 3px; height: 3px; border-radius: 9px; background: currentColor; opacity: 0.5; }
.hero-r { position: relative; display: grid; place-items: center; min-height: 18rem; }
.tile { position: relative; display: grid; place-items: center; width: 15rem; aspect-ratio: 1; border-radius: 2rem; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 30px 60px -28px rgba(32, 52, 190, 0.35), inset 0 1px 0 #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tile-mk { display: grid; place-items: center; width: 8.25rem; height: 8.25rem; border-radius: 999px; background: var(--navy); color: #fff; box-shadow: 0 18px 36px -14px rgba(0, 6, 37, 0.55); }
.tile-mk svg { width: 3.75rem; height: auto; }
.ghost { position: absolute; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 1.125rem; background: rgba(255, 255, 255, 0.28); border: 1px solid rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.95); }
.ghost.g1 { top: 2%; left: 8%; }
.ghost.g2 { bottom: 14%; right: 2%; }
.pair { position: absolute; bottom: 0.25rem; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.5rem; height: 2.125rem; padding: 0 0.75rem 0 0.625rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 16px -10px rgba(0, 6, 37, 0.3); font-size: var(--text-xs); color: var(--muted-fg); white-space: nowrap; }
.pair img { height: 1rem; width: auto; }
.d1-row { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(18rem, 1fr); gap: 1.5rem; }
.c-chart, .c-sum { padding: 1.5rem 1.5rem 1.25rem; }
.fig { margin-top: 0.375rem; display: flex; align-items: baseline; gap: 0.5rem; font-family: var(--font-display); font-size: 2rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; color: var(--ats-title); }
.fig small { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; color: var(--muted-fg); }
.c-range { display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding: 0 0.75rem; border-radius: 8px; border: 1px solid var(--line); font-size: var(--text-xs); color: var(--fg-2); white-space: nowrap; }
.c-sum { display: flex; flex-direction: column; }
.sum { display: flex; flex-direction: column; margin-top: 0.75rem; }
.sum > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--hair); }
.sum > div:last-child { border-bottom: 0; }
.sum dt { font-size: var(--text-sm); color: var(--muted-fg); }
.sum dt small { display: block; font-size: var(--text-xs); opacity: 0.85; }
.sum dd { margin: 0; font-size: 1rem; font-weight: 600; color: var(--ats-title); text-align: right; }
.sum.sm > div { padding: 0.625rem 0; }
.c-list { overflow: hidden; }
.c-how { padding: 2rem 1.5rem 2rem; }
.c-terms { padding: 1.5rem 1.75rem; }

/* =============================================================== Direction 2: Progress (Gusto + Contra + Fabric) */
.d2 { display: flex; flex-direction: column; gap: 1.5rem; }
.d2 .pg-h { margin-bottom: 0; }
.d2-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.p-share { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.125rem; }
.p-share .lede { margin-top: -0.5rem; }
.p-share .cpy .in { height: 2.75rem; }
.p-share .cpy .btn { height: 2.75rem; min-width: 7.5rem; }
.in-msg { height: auto; padding: 0.75rem 0.875rem; background: var(--canvas); box-shadow: none; }
.in-msg:hover { border-color: var(--line-2); }
.in-msg p { font-size: var(--text-sm); line-height: 1.55; color: var(--fg-2); }
.p-msg-a { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.gv { font-size: 10.5px; font-weight: 500; fill: var(--muted-fg); }
.gl.on .gv { fill: color-mix(in oklab, var(--primary) 70%, #000); }
.p-note { display: flex; align-items: center; gap: 0.4375rem; margin-top: auto; padding-top: 0.25rem; font-size: var(--text-xs); color: var(--muted-fg); }
.p-prog { padding: 1.5rem 1.5rem 1.25rem; display: flex; flex-direction: column; }
.tag { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.75rem; padding: 0 0.625rem; border-radius: 7px; background: var(--tint); color: var(--primary); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.gauge { position: relative; width: min(100%, 30rem); margin: 0.25rem auto 0; }
.gauge > svg { display: block; width: 100%; height: auto; overflow: visible; }
.ga-bg { fill: none; stroke: #e7e9f1; stroke-width: 6; stroke-linecap: round; }
.ga-on { fill: none; stroke: var(--primary); stroke-width: 6; stroke-linecap: round; }
.gn { fill: #fff; stroke: #cfd3e0; stroke-width: 2; }
.gn.on { fill: var(--primary); stroke: #fff; stroke-width: 2.5; }
.gl { font: 500 12px var(--font-sans); fill: var(--muted-fg); }
.gl.on { fill: var(--primary); font-weight: 600; }
.ga-c { position: absolute; left: 0; right: 0; top: 33%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ga-k { font-size: var(--text-sm); color: var(--muted-fg); }
.ga-big { display: flex; flex-direction: column; align-items: center; margin-top: 0.25rem; font-family: var(--font-display); font-size: 2.5rem; line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; color: var(--ats-title); }
.ga-big small { margin-top: 0.25rem; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; color: var(--muted-fg); }
.ga-next { display: flex; align-items: center; justify-content: center; gap: 0.4375rem; margin-top: -0.75rem; font-size: var(--text-sm); color: var(--fg-2); }
.ga-next .ic { color: var(--primary); }
.ga-next b { font-weight: 600; color: var(--ats-title); }
.p-band { margin-top: 1.25rem; padding: 0.75rem 1rem; border-radius: 10px; background: var(--tint); font-size: var(--text-sm); color: var(--fg-2); text-align: center; }
.p-band b { color: var(--primary); font-weight: 600; }
.p-band .lnk { font-size: var(--text-sm); margin-left: 0.25rem; }
.p-how { padding: 1.5rem 1.5rem 2rem; }
.p-how .how { margin-top: 1rem; }
.p-list { overflow: hidden; }
.p-list > .c-h { padding-top: 1.25rem; padding-bottom: 1rem; align-items: baseline; }

/* =============================================================== Direction 3: Settings (Railway + Deel) */
.d3 { container-type: inline-size; }
.d3-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.d3-main { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.d3-rail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.5rem; align-items: start; align-content: start; align-self: start; }
.s-share { padding: 1.5rem; }
.s-share .lede { margin-top: 0.375rem; max-width: 46rem; }
.s-fields { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.s-fields.n2 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.s-list { overflow: hidden; }
.s-list > .c-h { padding-top: 1.25rem; }
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1.125rem 0 1.5rem; }
.figs > div { padding: 0 1.5rem; border-left: 1px solid var(--line); }
.figs > div:first-child { padding-left: 0; border-left: 0; }
.figs dt { font-size: var(--text-xs); color: var(--muted-fg); }
.figs dd { margin: 0.375rem 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-family: var(--font-display); font-size: 1.8667rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; color: var(--ats-title); }
.figs dd small { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0; color: var(--muted-fg); }
.s-list .rl-h { border-top: 1px solid var(--line); background: var(--canvas); }
.r-sum, .r-how { padding: 1.375rem 1.5rem; }
.r-total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 0.875rem 1rem; border-radius: 10px; background: var(--canvas); border: 1px solid var(--hair); }
.r-total span { font-size: var(--text-sm); color: var(--muted-fg); }
.r-total b { font-size: 1.0667rem; font-weight: 600; color: var(--ats-title); }
.r-sum .sum { margin-top: 0.5rem; }
.ilist { display: flex; flex-direction: column; gap: 1.125rem; margin-top: 1rem; }
.ilist li { display: flex; gap: 0.875rem; }
.ii { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--tint); color: var(--primary); }
.ilist b { font-size: var(--text-sm); font-weight: 600; color: var(--ats-title); }
.ilist p { margin-top: 0.1875rem; font-size: var(--text-sm); line-height: 1.5; color: var(--muted-fg); }
@container (min-width: 1000px) {
	.d3-grid { grid-template-columns: minmax(0, 1fr) 23rem; }
	.d3-rail { grid-template-columns: minmax(0, 1fr); position: sticky; top: calc(var(--head-h) + 1rem); }
}

/* =============================================================== dialogs */
.dlg-bg { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: center; align-items: flex-start; padding: 2rem 1rem; overflow-y: auto; background: rgba(0, 6, 37, 0.36); opacity: 0; transition: opacity 200ms var(--ease); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.dlg-bg.open { opacity: 1; }
.dlg-bg.instant { transition: none; }
.dlg { position: relative; width: min(36rem, 100%); flex: none; margin: auto 0; background: var(--card); border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 32px 64px -20px rgba(0, 6, 37, 0.35); transform: translateY(8px) scale(0.99); transition: transform 320ms var(--ease); }
.dlg-bg.open .dlg { transform: none; }
.dlg-bg.instant .dlg { transition: none; }
.dlg.sm { width: min(30rem, 100%); }
.dlg-h { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1.25rem 1.25rem 1rem 1.5rem; }
.dlg-h > div { flex: 1; min-width: 0; }
.dlg-h h2 { font-family: var(--font-display); font-size: 1.2857rem; font-weight: 600; color: var(--ats-title); }
.dlg-h p { margin-top: 0.25rem; font-size: var(--text-sm); line-height: 1.5; color: var(--muted-fg); }
.dlg-h .dlg-x { position: static; margin: -0.25rem -0.25rem 0 0; }
.dlg-s { padding: 1.125rem 1.5rem; border-top: 1px solid var(--line); }
.dlg-s.form { display: flex; flex-direction: column; gap: 1rem; }
.dlg-f { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 0.875rem 1.5rem; border-top: 1px solid var(--line); }
.dlg-x { position: absolute; top: 0.875rem; right: 0.875rem; z-index: 2; }
.dlg-x:hover { background: var(--subtle); color: var(--fg); }

/* Illustrated (Manus) */
.d-ill { width: min(37rem, 100%); padding: 2rem 2rem 1.25rem; }
.d-ill .di-top .ill { stroke-width: 2.1; }
.di-top { display: flex; flex-direction: column; align-items: center; text-align: center; }
.di-top .ill { color: var(--ats-title); margin-bottom: 0.875rem; }
.di-top .ill .t { fill: var(--tint-2); }
.di-top h2 { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--ats-title); text-wrap: balance; max-width: 33rem; }
.di-top p { margin-top: 0.5rem; font-size: var(--text-sm); line-height: 1.5; color: var(--muted-fg); max-width: 33rem; }
.di-body { margin-top: 1.75rem; display: flex; flex-direction: column; }
.di-body .f > label { color: var(--fg-2); }
.hair { display: flex; align-items: center; gap: 0.875rem; margin: 1.75rem 0 1rem; font-size: var(--text-xs); color: var(--muted-fg); }
.hair::before, .hair::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.di-strip { display: flex; align-items: center; gap: 2.5rem; padding: 1.125rem 1.375rem; border-radius: 12px; border: 1px solid var(--line); background: var(--canvas); }
.di-strip > div { display: flex; flex-direction: column; gap: 0.125rem; }
.di-strip b { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ats-title); }
.di-strip span { font-size: var(--text-xs); color: var(--muted-fg); }
.di-strip > .ic { margin-left: auto; color: #c4c7d4; stroke-width: 1.5; }
.di-f { display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; padding: 0 0.25rem; }
.di-f .lnk { font-size: var(--text-sm); }
.di-f .lnk:first-child { color: var(--muted-fg); text-decoration: underline; text-underline-offset: 3px; font-weight: 400; }

/* Progress (v0 + Lindy) */
.d-prog { width: min(35rem, 100%); }
.dp-h { display: flex; align-items: center; gap: 0.625rem; padding: 1rem 1.25rem 1rem 1.5rem; border-bottom: 1px solid var(--line); }
.dp-h .ic { color: var(--ats-title); }
.dp-h b { font-size: 1rem; font-weight: 500; color: var(--ats-title); }
.dp-h .dlg-x { position: static; margin-left: auto; }
.dp-body { padding: 1.5rem 1.5rem 0.5rem; }
.dp-body h2 { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--ats-title); text-wrap: balance; }
.dp-bar { margin-top: 1.25rem; }
.dp-sub { margin-top: 0.625rem; font-size: var(--text-sm); line-height: 1.55; color: var(--muted-fg); }
.dp-track { position: relative; height: 2.25rem; border-radius: 999px; background: var(--subtle); border: 1px solid var(--line); overflow: hidden; }
.dp-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, color-mix(in oklab, var(--primary) 70%, #fff), var(--primary)); }
.dp-track span { position: absolute; inset: 0; display: grid; place-items: center; font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 0.8rem; color: var(--fg-2); }
.dp-bar p { display: flex; justify-content: space-between; margin-top: 0.375rem; font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: var(--text-xs); font-weight: 600; color: var(--fg); }
.in-join { padding: 0 0.25rem 0 0.875rem; height: 2.875rem; }
.in-join input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; font: inherit; color: var(--fg); }
.in-join .cpy-b { height: 2.25rem; min-width: 5.5rem; }
.dp-bar b { font-weight: 600; color: var(--ats-title); }
.dp-figs { display: flex; gap: 1.25rem; margin-top: 1rem; font-size: var(--text-sm); color: var(--muted-fg); }
.dp-figs b { color: var(--ats-title); font-weight: 600; }
.dp-figs .muted { margin-left: auto; }
.dp-share { margin-top: 1.25rem; padding: 1rem 1.125rem 1.125rem; border-radius: 12px; background: var(--canvas); border: 1px solid var(--hair); }
.dp-body h3 { margin-top: 1.5rem; font-size: var(--text-sm); font-weight: 600; color: var(--fg-2); font-family: var(--font-sans); }
.dp-how { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.75rem; }
.dp-how li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: var(--text-sm); line-height: 1.45; color: var(--fg-2); }
.dp-how .ic { flex: none; margin-top: 2px; color: var(--ats-title); }
.dp-how b { font-weight: 600; color: var(--ats-title); }
.faq { margin-top: 1.25rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9375rem 0; font-size: var(--text-sm); font-weight: 500; color: var(--fg); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { flex: none; color: var(--muted-fg); transition: transform 200ms var(--ease); }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq summary:hover { color: var(--primary); }
.faq details p { padding: 0 2rem 1rem 0; font-size: var(--text-sm); line-height: 1.55; color: var(--muted-fg); }
.dp-f { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1.5rem; border-top: 1px solid var(--line); background: var(--canvas); border-radius: 0 0 16px 16px; }
.dp-f .lnk { font-size: var(--text-sm); }

/* Split (Heidi + Base44) */
.d-split { width: min(56rem, 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; }
.ds-l { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; min-height: 33rem; padding: 3.25rem 3rem; background: radial-gradient(80% 70% at 0% 100%, #2a44e8 0%, transparent 60%), linear-gradient(160deg, #0b1a8f 0%, var(--navy) 100%); color: #fff; overflow: hidden; isolation: isolate; }
.ds-pill { align-self: flex-start; display: inline-flex; align-items: center; height: 1.75rem; padding: 0 0.625rem; border-radius: 6px; background: #fff; color: var(--navy); font-size: var(--text-xs); font-weight: 600; }
.ds-l h2 { font-family: var(--font-display); font-size: 2.65rem; line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
.ds-l ul { display: flex; flex-direction: column; gap: 0.5rem; padding-left: 1.125rem; list-style: disc; }
.ds-l li { font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.ds-l li::marker { color: rgba(255, 255, 255, 0.5); }
.ds-fine { font-size: var(--text-xs); line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.ds-mk { position: absolute; z-index: -1; right: -5rem; bottom: -6rem; width: 22rem; color: rgba(255, 255, 255, 0.06); }
.ds-mk svg { width: 100%; height: auto; }
.ds-l::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); mask-image: linear-gradient(180deg, #000, transparent 75%); }
.ds-r { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0.875rem; padding: 3rem 2.5rem; }
.ds-r h3 { font-family: var(--font-display); font-size: 1.2667rem; line-height: 1.25; font-weight: 600; color: var(--ats-title); }
.ds-r > p.muted { margin-top: -0.375rem; font-size: var(--text-sm); line-height: 1.5; }
.ds-r .in-lead { margin-top: 0.75rem; height: 2.75rem; }
.ds-r .cpy-b { align-self: flex-start; height: 2.75rem; padding: 0 1.125rem; }
.ds-or { display: flex; align-items: center; gap: 0.25rem; font-size: var(--text-sm); color: var(--muted-fg); }
.ds-or b { margin-left: 0.25rem; color: var(--fg); }
.ds-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ds-foot .lnk { font-size: var(--text-sm); }

/* the Contra-style toast: white, green hairline, a green check, top right */
.ctoast { position: fixed; z-index: 980; top: 4.25rem; right: 1.5rem; display: flex; align-items: center; gap: 0.75rem; max-width: 32rem; padding: 0.875rem 1.25rem 0.875rem 0.875rem; border-radius: 12px; background: #fff; border: 1px solid var(--green-line); box-shadow: 0 18px 40px -18px rgba(0, 6, 37, 0.3); font-size: var(--text-sm); font-weight: 500; line-height: 1.4; color: var(--green-ink); opacity: 0; transform: translateY(-6px); transition: opacity 220ms var(--ease), transform 380ms var(--ease); pointer-events: none; }
.ctoast .ic { flex: none; width: 2rem; height: 2rem; padding: 0.375rem; border-radius: 999px; background: var(--green-wash); color: var(--green); }
.ctoast.show { opacity: 1; transform: none; }

/* =============================================================== dashboard and its entry points */
.db { display: flex; flex-direction: column; gap: 1.5rem; }
.db-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.kpi { padding: 1.125rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.kpi span { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); color: var(--muted-fg); }
.kpi b { font-family: var(--font-display); font-size: 1.8667rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ats-title); }
.db-two { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(20rem, 1fr); gap: 1.5rem; align-items: start; }
.db-vac { overflow: hidden; }
.db-vac > .c-h { padding-top: 1.25rem; padding-bottom: 0.875rem; align-items: baseline; }
.vl-r { display: grid; grid-template-columns: minmax(0, 1fr) 8rem 10rem; gap: 1rem; align-items: center; min-height: 3.75rem; padding: 0.5rem 1.5rem; border-top: 1px solid var(--hair); transition: background-color 140ms var(--ease); }
.vl-r:hover { background: var(--canvas); }
.vl-t { display: flex; flex-direction: column; line-height: 1.3; }
.vl-t b { font-size: var(--text-sm); font-weight: 600; }
.vl-t small { font-size: var(--text-xs); color: var(--muted-fg); }
.vl-r .muted { font-size: var(--text-sm); }
.db-side { display: flex; flex-direction: column; gap: 1.5rem; }
.db-cred { padding: 1.25rem 1.375rem; }
.db-cred .c-h { margin-bottom: 0.625rem; align-items: baseline; }
.db-cred .c-h .muted { font-size: var(--text-xs); }
.cred-n { font-size: var(--text-sm); }
.cred-n b { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--ats-title); }
.meter { height: 0.5rem; margin: 0.625rem 0 0.5rem; border-radius: 999px; background: var(--subtle); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 999px; background: var(--amber); }
.meter-line { display: flex; align-items: center; gap: 0.5rem; width: calc(100% + 2.75rem); margin: 0.875rem -1.375rem -1.25rem; padding: 0.875rem 1.375rem; border-top: 1px solid var(--line); font-size: var(--text-sm); color: var(--fg-2); text-align: left; border-radius: 0 0 14px 14px; transition: background-color 140ms var(--ease); }
.meter-line span { flex: 1; }
.meter-line .ic { color: var(--primary); }
.meter-line .ic:last-child { color: var(--muted-fg); }
.meter-line:hover { background: var(--canvas); }
.db-ref { display: flex; gap: 1rem; padding: 1.25rem 1.375rem; }
.db-ref-i .ill { color: var(--primary); }
.db-ref h3 { font-family: var(--font-display); font-size: 1.0667rem; font-weight: 600; color: var(--ats-title); }
.db-ref p { margin: 0.25rem 0 0.625rem; font-size: var(--text-sm); line-height: 1.5; color: var(--muted-fg); }
.db-ref .lnk { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: 500; color: var(--primary); }
.moment { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1rem; background: var(--card); border: 1px solid var(--primary-line); border-radius: 14px; animation: fadeUp 420ms var(--ease) both; }
.moment p { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; font-size: var(--text-sm); line-height: 1.45; }
.moment p b { font-weight: 600; color: var(--fg); }
.moment p span { color: var(--muted-fg); }
.moment-a { display: flex; align-items: center; gap: 0.25rem; flex: none; }
/* the top-bar pill (Contra's Refer & earn, made quiet: hairline, no gradient) */
.top-pill { display: inline-flex; align-items: center; gap: 0.4375rem; height: 2rem; padding: 0 0.875rem 0 0.75rem; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: var(--text-sm); font-weight: 500; color: var(--fg); transition: border-color 140ms var(--ease), color 140ms var(--ease), background-color 140ms var(--ease); }
.top-pill .ic { color: var(--primary); }
.top-pill:hover { border-color: var(--primary-line); background: var(--tint); color: var(--primary); }
.cs-item.has-tag { height: 3.25rem; }
.cs-item.has-tag .lbl { display: flex; flex-direction: column; line-height: 1.25; }
.cs-tag { font-size: 0.7857rem; font-weight: 400; color: var(--nav-muted); }
.cs-app.collapsed .cs-item.has-tag { height: 2.5rem; }

/* =============================================================== product composition (Connect UI, no photos) */
.pc { position: relative; width: 34rem; height: 34rem; transform: perspective(1600px) rotateY(-10deg) rotateX(4deg) rotate(-2deg); }
.pc.flat { width: 30rem; height: 24rem; transform: perspective(1600px) rotateY(-8deg) rotate(-1.5deg); }
.pc-card { position: absolute; background: #fff; border: 1px solid rgba(16, 17, 25, 0.08); border-radius: 14px; box-shadow: 0 30px 60px -24px rgba(0, 6, 37, 0.35), 0 2px 6px rgba(0, 6, 37, 0.06); font-size: 0.8667rem; color: var(--fg); }
.pc-vac { left: 0; top: 1rem; width: 25rem; padding: 1.125rem 1.25rem; }
.pc-vh { display: flex; align-items: flex-start; gap: 0.75rem; }
.pc-vh > div { flex: 1; display: flex; flex-direction: column; gap: 0.125rem; }
.pc-vh b { font-size: 1rem; font-weight: 600; color: var(--ats-title); }
.pc-vh small, .pc-n small, .pc-slot small, .pc-lh small { font-size: 0.75rem; color: var(--muted-fg); }
.pc-vh .sd { font-size: 0.75rem; }
.pc-ic { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9px; background: var(--tint); color: var(--primary); }
.pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1rem; }
.pc-stats div { display: flex; flex-direction: column; padding-left: 0.875rem; border-left: 1px solid var(--hair); }
.pc-stats div:first-child { padding-left: 0; border-left: 0; }
.pc-stats b { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--ats-title); }
.pc-stats small { font-size: 0.75rem; color: var(--muted-fg); }
.pc-pipe { display: flex; gap: 3px; margin-top: 0.875rem; height: 0.375rem; }
.pc-pipe i { border-radius: 9px; background: var(--primary); }
.pc-pipe i:nth-child(2) { opacity: 0.6; } .pc-pipe i:nth-child(3) { opacity: 0.35; } .pc-pipe i:nth-child(4) { background: var(--green); }
.pc-list { left: 6rem; top: 11.5rem; width: 27rem; padding: 0.875rem 0 0.375rem; }
.pc-lh { display: flex; align-items: baseline; justify-content: space-between; padding: 0 1.125rem 0.625rem; border-bottom: 1px solid var(--hair); }
.pc-lh b { font-size: 0.9333rem; font-weight: 600; color: var(--ats-title); }
.pc-r { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1.125rem; border-bottom: 1px solid var(--hair); }
.pc-r:last-child { border-bottom: 0; }
.pc-av { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: hsl(var(--h) 75% 93%); color: hsl(var(--h) 45% 32%); font-size: 0.6875rem; font-weight: 600; }
.pc-n { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.pc-n b { font-size: 0.8667rem; font-weight: 600; }
.pc-m { flex: none; height: 1.5rem; display: inline-flex; align-items: center; padding: 0 0.5rem; border-radius: 6px; background: var(--tint); color: var(--primary); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-slot { left: 1rem; top: 29.5rem; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; width: 17rem; }
.pc-slot > div { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.pc-slot b { font-size: 0.8667rem; font-weight: 600; }
.pc-cal { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 2.5rem; height: 2.75rem; border-radius: 9px; border: 1px solid var(--line); line-height: 1; }
.pc-cal small { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); font-weight: 600; }
.pc-cal b { margin-top: 0.125rem; font-family: var(--font-display); font-size: 1.125rem; }
.pc-ok { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--green-wash); color: var(--green); }
.pc.flat .pc-vac { width: 26rem; }
.pc.flat .pc-list .pc-r:nth-child(n+5) { display: none; }
.pc.flat { height: 28rem; }
.pc.flat .pc-slot { left: auto; right: -4rem; top: 0; }
.pc.flat .pc-vac { top: 4rem; }
.pc.flat .pc-list { top: 15rem; left: 4rem; width: 24rem; }
@media (min-width: 1700px) { .ivs-r .pc { transform: perspective(1600px) rotateY(-10deg) rotateX(4deg) rotate(-2deg) scale(1.18); } }

/* =============================================================== the referred company's page */
#invited { min-height: 100vh; background: #fff; }
.iv { display: flex; flex-direction: column; min-height: 100vh; }
/* round 3: no site header or footer; each design starts straight with its content */
.pair2 { display: inline-flex; align-items: center; gap: 0.75rem; }
.p2-nl { display: grid; place-items: center; height: 2.75rem; padding: 0 0.875rem; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.p2-nl img { height: 1.25rem; width: auto; display: block; }
.p2-x { color: var(--muted-fg); display: grid; }
.p2-cx { display: grid; place-items: center; height: 2.75rem; padding: 0 0.875rem; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.p2-cx svg { height: 1.25rem; width: auto; display: block; color: var(--navy); }
.pair2.dark .p2-nl, .pair2.dark .p2-cx { border-color: transparent; }
.pair2.dark .p2-x { color: rgba(255, 255, 255, 0.55); }
.iv-form { display: flex; flex-direction: column; gap: 1rem; }
.iv-form h2 { font-family: var(--font-display); font-size: 1.3333rem; font-weight: 600; color: var(--ats-title); }
.iv-form .btn-primary { width: 100%; }
.iv-form .hint a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.iv-form.start .btn-primary { gap: 0.5rem; }
.iv-done { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; padding: 0.5rem 0; }
.iv-done h2 { font-family: var(--font-display); font-size: 1.3333rem; font-weight: 600; color: var(--ats-title); }
.iv-done p { font-size: var(--text-sm); line-height: 1.5; }

/* Split (Faire): deep navy panel with the form, product composition on the right */
.iv-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.iv--split .iv-split { flex: 1; }
.ivs-l { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; padding: 3.5rem clamp(2rem, 5vw, 6rem); background: #0a1450; color: #fff; }
.ivs-l h1 { font-family: var(--font-display); font-size: clamp(2rem, 1.2rem + 1.6vw, 3.1rem); line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; max-width: 34rem; text-wrap: balance; }
.ivs-offer { max-width: 34rem; font-size: 1.0667rem; line-height: 1.55; color: rgba(255, 255, 255, 0.78); }
.ivs-offer b { color: #fff; font-weight: 600; }
.ivs-l .iv-form { max-width: 34rem; margin-top: 0.5rem; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.ivs-l .iv-form h2, .ivs-l .iv-done h2 { color: #fff; }
.ivs-l .f > label { color: rgba(255, 255, 255, 0.9); }
.ivs-l .in { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.3); color: #fff; box-shadow: none; }
.ivs-l .in:hover { border-color: rgba(255, 255, 255, 0.55); }
.ivs-l .in:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16); }
.ivs-l .in::placeholder { color: rgba(255, 255, 255, 0.45); }
.ivs-l .sel[aria-expanded='true'], .ivs-l .sel:focus-visible { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16); }
.ivs-l .sel-c { opacity: 0.7; }
.ivs-l .in.ro { background: rgba(255, 255, 255, 0.08); border-style: dashed; }
.ivs-l .in.ro .ic, .ivs-l .in.ro small { color: rgba(255, 255, 255, 0.6); }
.ivs-l .hint, .ivs-l .muted { color: rgba(255, 255, 255, 0.6); }
html.rf .ivs-l .btn-primary { background: #fff; color: var(--navy); }
html.rf .ivs-l .btn-primary:hover { background: #e9ecff; }
.ivs-r { position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(60% 55% at 55% 45%, color-mix(in oklab, var(--primary) 26%, #fff) 0%, transparent 72%), radial-gradient(50% 50% at 100% 100%, #d9d0ff 0%, transparent 70%), linear-gradient(160deg, #eef2ff, #e3e9ff); }
.ivs-r::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(48, 78, 255, 0.12) 1px, transparent 1px); background-size: 20px 20px; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }

/* Two-sided (Uber Eats): centred, two offer rows, the form as one card */
.iv-two { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 4.5rem 1.5rem; text-align: center; overflow: hidden; }
.iv-two h1 { margin-top: 1.75rem; font-family: var(--font-display); font-size: clamp(1.9rem, 1.3rem + 1.2vw, 2.6rem); line-height: 1.12; font-weight: 600; letter-spacing: -0.03em; color: var(--ats-title); max-width: 36rem; text-wrap: balance; }
.iv2-sub { margin-top: 0.875rem; max-width: 34rem; font-size: 1rem; line-height: 1.55; color: var(--muted-fg); }
.iv2-sub .lnk { font-size: inherit; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.offers { display: flex; flex-direction: column; gap: 1.25rem; width: min(100%, 34rem); margin-top: 2rem; text-align: left; }
.of { display: flex; gap: 1rem; }
.of-i { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; background: var(--tint); color: var(--primary); }
.of b { font-family: var(--font-display); font-size: 1.2667rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ats-title); }
.of p { margin-top: 0.25rem; font-size: var(--text-sm); line-height: 1.5; color: var(--muted-fg); }
.iv2-card { width: min(100%, 34rem); margin-top: 2rem; padding: 1.75rem; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 48px -28px rgba(0, 6, 37, 0.25); }
.iv2-deco { position: absolute; top: 9rem; }
.iv2-deco .ill { width: 17rem; height: 17rem; stroke-width: 0.6; }
/* both fully inside the window (round 2 clipped the paper plane at the left edge) */
.iv2-deco.l { left: clamp(1rem, 3vw, 4rem); transform: rotate(-6deg); }
.iv2-deco.r { right: clamp(1rem, 3vw, 4rem); top: 15rem; transform: rotate(4deg); }

.eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); text-align: center; margin-bottom: 1.5rem; }

/* =============================================================== back office (round 3: the real Connect back office)
 * Sizes and colours from wt-brand-fe: BackOfficeShell.tsx, AppFrame.tsx, ClientTabStrip.tsx, ClientContextPicker.tsx,
 * clientsListParts.tsx, components/ui/{data-table,table-pager,select,section-card,card,form-field,status-pill}.tsx,
 * lib/{statusTones,accents}.ts. Tailwind rem = the compact root, so 1rem here = 1rem there. */
html.rf { --bo-input: #f3f3f5; --bo-ring: #a1a1a1; }

/* shell: the BT workspace block, the Back Office user, the Terms footer */
.cs-brand.bo-ws { justify-content: center; gap: 0.75rem; height: auto; padding: 0.375rem 0.5rem; }
.bo-bt { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.375rem; background: var(--primary); color: #fff; font-size: 0.875rem; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.bo-wt { min-width: 0; display: flex; flex-direction: column; }
.bo-wt small { font-size: 0.6875rem; font-weight: 500; line-height: 1.45; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.bo-wt b { font-size: 0.875rem; font-weight: 500; line-height: 1.43; color: var(--nav-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-app.collapsed .bo-wt { display: none; }
.cs-app.is-bo .cs-brand .wm, .cs-app.is-bo .cs-brand .mk { display: none; }
.cs-foot.end { justify-content: flex-end; }
.cs-foot.end a { color: var(--primary); }
.cs-foot.end a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* the breadcrumb tab strip: a band under the header, one tab joined to the page, then "+" */
.bo-strip { position: sticky; top: calc(var(--head-h) - 1px); z-index: 20; margin: calc(var(--page-top) * -1) calc(var(--page-gutter) * -1) var(--page-top); background: var(--canvas); }
.bo-strip-in { display: flex; align-items: flex-end; gap: 0.25rem; height: 2.75rem; padding: 0 var(--page-gutter); border-bottom: 1px solid var(--line); background: rgba(16, 17, 25, 0.035); }
.bo-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.5rem; height: calc(2.25rem + 1px); margin-bottom: -1px; padding: 0 0.75rem 1px; border: 1px solid var(--line); border-bottom: 0; border-radius: 0.5rem 0.5rem 0 0; background: var(--canvas); font-size: 0.875rem; color: var(--fg); box-shadow: 0 -1px 2px rgba(15, 23, 42, 0.03); }
.bo-tab .ic { color: var(--muted-fg); }
.bo-plus { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin: 0 0 0.375rem 0.25rem; border-radius: 0.375rem; color: var(--muted-fg); transition: background-color 150ms var(--ease), color 150ms var(--ease); }
.bo-plus:hover { background: rgba(16, 17, 25, 0.06); color: var(--fg); }

/* ---- the list, laid out as the real Clients list */
.bo-l { display: flex; flex-direction: column; }
.bo-ph { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1.25rem; }
.bo-ph h2 { font-family: var(--font-display); font-size: 1.4286rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; color: var(--ats-title); }
.bo-ph > p { font-size: 0.875rem; color: var(--muted-fg); }
.bo-ph .bo-mode { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.125rem; font-size: 0.75rem; color: color-mix(in oklab, var(--muted-fg) 85%, #fff); }
.bo-ph .bo-mode .ic { flex: none; opacity: 0.8; }
.bo-sec { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.bo-sec > h3 { font-family: var(--font-display); font-size: 0.9375rem; line-height: 1.5rem; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.dt { min-width: 0; border: 1px solid var(--line); border-radius: 0.5rem; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.dt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem; border-bottom: 1px solid var(--line); }
.bo-q { width: 24rem; max-width: 100%; height: 2.25rem; gap: 0.5rem; padding: 0 0.75rem; border-radius: 0.375rem; box-shadow: none; }
.bo-q .ic { width: 1rem; height: 1rem; }
.bo-q input { font-size: 0.875rem; }
/* the real PlanSegments */
.segs { display: inline-flex; gap: 0.125rem; padding: 0.125rem; border-radius: 0.5rem; background: var(--muted); max-width: 100%; overflow-x: auto; }
.segs button { display: inline-flex; align-items: center; gap: 0.5rem; height: 2rem; padding: 0 0.75rem; border-radius: 0.375rem; font-size: 0.8125rem; color: var(--muted-fg); white-space: nowrap; transition: background-color 150ms var(--ease), color 150ms var(--ease), box-shadow 150ms var(--ease); }
.segs button span { color: color-mix(in oklab, var(--muted-fg) 70%, transparent); }
.segs button:hover { color: var(--fg); }
.segs button[aria-pressed='true'] { background: #fff; font-weight: 500; color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--line); }
.segs button[aria-pressed='true'] span { color: var(--muted-fg); font-weight: 400; }
.segs button:focus-visible, .th-s:focus-visible, .qa:focus-visible, .pg-b:focus-visible, .pg-n:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--bo-ring) 40%, transparent); }

/* table: the real DataTable in compact density */
.bt-h, .bt-r { display: grid; grid-template-columns: minmax(8.5rem, 0.8fr) minmax(12rem, 1.2fr) 5.75rem 6.75rem minmax(11.5rem, 1.35fr) minmax(10.5rem, 1fr) 13.25rem; column-gap: 0.75rem; align-items: center; padding: 0 0.75rem; }
.bt-h { height: 2.5rem; font-size: 0.75rem; font-weight: 500; color: var(--muted-fg); box-shadow: inset 0 -1px 0 var(--line); }
.th-s { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 0.25rem; transition: color 150ms var(--ease); }
.th-s:hover { color: var(--fg); }
.th-s .ic { width: 0.875rem; height: 0.875rem; }
.th-s .ic.dim { opacity: 0.5; }
.bt-r { min-height: 2.5rem; padding-top: 0.375rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--line); font-size: 0.875rem; transition: background-color 150ms var(--ease); }
.bt-r:last-child { border-bottom: 0; }
.bt-r:hover { background: color-mix(in oklab, var(--muted) 45%, transparent); }
.bt-co { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.bt-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.bt-n.b { font-weight: 500; }
.bt-r.is-ended .ct { filter: grayscale(1); opacity: 0.6; }
.bt-r.is-ended .bt-n { color: var(--muted-fg); }
.bt-st { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.bt-why { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: var(--muted-fg); }
.bt-f { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.bt-a { display: flex; align-items: center; justify-content: flex-end; gap: 0.125rem; }
.wh.bar.sm { gap: 0.5rem; font-size: 0.8125rem; }
.wh.bar.sm .pb { width: 3rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the real ClientTile (initials on a -100/-700 tint) */
.ct { flex: none; display: inline-grid; place-items: center; font-weight: 600; line-height: 1; letter-spacing: 0.01em; user-select: none; }
.ct-20 { width: 1.25rem; height: 1.25rem; border-radius: 5px; font-size: 0.5625rem; }
.ct-24 { width: 1.5rem; height: 1.5rem; border-radius: 0.375rem; font-size: 0.625rem; }
.ct-28 { width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; font-size: 0.6875rem; }
.ct.tn-blue { background: #dbeafe; color: #1d4ed8; }
.ct.tn-emerald { background: #d1fae5; color: #047857; }
.ct.tn-violet { background: #ede9fe; color: #6d28d9; }
.ct.tn-amber { background: #fef3c7; color: #b45309; }
.ct.tn-sky { background: #e0f2fe; color: #0369a1; }
.ct.tn-rose { background: #ffe4e6; color: #be123c; }
.ct.tn-teal { background: #ccfbf1; color: #0f766e; }

/* the real StatusPill / PlanPill (TONE_PILL) */
.sp { display: inline-flex; flex: none; align-items: center; gap: 0.375rem; width: fit-content; padding: 0.125rem 0.5rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.75rem; line-height: 1rem; font-weight: 500; white-space: nowrap; }
.sp i { width: 0.375rem; height: 0.375rem; border-radius: 999px; flex: none; }
.sp.tn-info { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.sp.tn-info i { background: #3b82f6; }
.sp.tn-pending { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.sp.tn-pending i { background: #f59e0b; }
.sp.tn-success { background: #d1fae5; color: #047857; border-color: #a7f3d0; }
.sp.tn-success i { background: #10b981; }
.sp.tn-neutral { background: var(--muted); color: rgba(16, 17, 25, 0.7); }
.sp.tn-neutral i { background: rgba(113, 113, 130, 0.4); }

/* flags: the amber pill at the real pill size, with its tooltip */
.flag { position: relative; display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0.125rem 0.5rem; border-radius: 999px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 0.75rem; line-height: 1rem; font-weight: 500; white-space: nowrap; cursor: help; }
.flag .ic { width: 11px; height: 11px; }
.flag-tip { position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 8px); width: 16rem; padding: 0.625rem 0.75rem; border-radius: 8px; background: var(--ink); color: #fff; font-size: var(--text-xs); font-weight: 400; line-height: 1.45; white-space: normal; transform: translate(-50%, 4px); opacity: 0; pointer-events: none; transition: opacity 140ms var(--ease), transform 200ms var(--ease); box-shadow: 0 10px 24px -10px rgba(0, 6, 37, 0.4); }
.flag:hover .flag-tip, .flag:focus .flag-tip { opacity: 1; transform: translate(-50%, 0); }

/* row actions: the real quiet icon + text links (Branding, Edit) */
.qa { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.75rem; padding: 0 0.5rem; border-radius: 0.375rem; font-size: 0.8125rem; color: var(--muted-fg); white-space: nowrap; transition: background-color 150ms var(--ease), color 150ms var(--ease); }
.qa .ic { width: 0.875rem; height: 0.875rem; }
.qa:hover { background: var(--accent); color: var(--fg); }
.qa.pri { color: var(--primary); font-weight: 500; }
.qa.pri:hover { background: color-mix(in oklab, var(--primary) 8%, transparent); color: var(--primary-ink); }
.bo-done { display: inline-flex; align-items: center; gap: 0.375rem; padding-right: 0.5rem; font-size: 0.8125rem; color: var(--muted-fg); white-space: nowrap; }
.bo-done .ic { width: 0.875rem; height: 0.875rem; color: #10b981; }
.bo-done.amb .ic { color: #f59e0b; }

/* the real TablePager */
.dt-ft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; border-top: 1px solid var(--line); }
.dt-ft > p { font-size: 0.75rem; color: var(--muted-fg); }
.dt-ft-r { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.dt-rows { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--muted-fg); }
.dt-rows .sel { width: 4.25rem; height: 2rem; padding: 0 0.5rem 0 0.75rem; border-color: transparent; border-radius: 0.375rem; background: var(--bo-input); box-shadow: none; font-size: 0.75rem; }
.dt-rows .sel:hover { border-color: rgba(16, 17, 25, 0.2); }
.dt-rows .sel[aria-expanded='true'], .dt-rows .sel:focus-visible { border-color: var(--bo-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--bo-ring) 30%, transparent); }
.pg-btns { display: flex; align-items: center; gap: 0.25rem; }
.pg-b, .pg-n { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; height: 2rem; min-width: 2rem; padding: 0 0.5rem; border-radius: 0.375rem; font-size: 0.75rem; color: var(--fg); }
.pg-b:hover:not(:disabled), .pg-n:hover { background: var(--accent); }
.pg-b:disabled { color: var(--muted-fg); opacity: 0.6; }
.pg-n.on { border: 1px solid var(--line); background: #fff; }

/* ---- the client form: the real BOClientForm (stacked SectionCards, filled grey fields) */
.bf { display: flex; flex-direction: column; gap: 1rem; }
.bf-back { width: 2.25rem; height: 2.25rem; margin: -0.25rem 0 0 -0.25rem; color: var(--fg); }
.bf-back:hover { background: var(--accent); }
.bf-cards { display: flex; flex-direction: column; gap: 1.5rem; }
.bcard { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.bcard > header { display: flex; flex-direction: column; gap: 0.375rem; }
.bcard h3 { font-family: var(--font-display); font-size: 1rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--ats-title); }
.bcard > header p, .bc-lines p { font-size: 0.875rem; color: var(--muted-fg); }
.bc-lines { display: flex; flex-direction: column; gap: 0.5rem; }
.fg2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; row-gap: 1.25rem; align-items: start; }
.bf .f { gap: 0; }
.bf .f > label, .f-q { margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--fg); }
.bf .req { margin-left: 0.125rem; color: var(--danger); }
.bf .f > .hint { margin-top: 0.375rem; font-size: 0.75rem; color: var(--muted-fg); }
.bf .in { height: 2.25rem; padding: 0 0.75rem; border-color: transparent; border-radius: 0.375rem; background: var(--bo-input); box-shadow: none; font-size: 0.875rem; }
.bf .in:hover { border-color: rgba(16, 17, 25, 0.2); }
.bf .in:focus, .bf .in:focus-within, .bf .sel[aria-expanded='true'], .bf .sel:focus-visible { border-color: var(--bo-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--bo-ring) 30%, transparent); }
.bf .in.mono { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; letter-spacing: 0.04em; }
.in-affix { padding: 0 !important; gap: 0; overflow: hidden; }
.in-affix span { display: flex; align-items: center; height: 100%; padding: 0 0.625rem; color: var(--muted-fg); white-space: nowrap; }
.in-affix span:first-child { border-right: 1px solid rgba(255, 255, 255, 0.9); }
.in-affix span:last-child { border-left: 1px solid rgba(255, 255, 255, 0.9); }
.in-affix input { flex: 1; min-width: 0; height: 100%; padding: 0 0.75rem; border: 0; outline: none; background: none; font: inherit; color: var(--fg); }
.rb-row { position: relative; display: flex; gap: 0.5rem; }
.rb-co { flex: 1; min-width: 0; gap: 0.5rem; }
.rb-co input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; font: inherit; color: var(--fg); }
.rb-co .sel-c { flex: none; width: 1rem; height: 1rem; opacity: 0.5; transition: transform 200ms var(--ease); }
.rb-co.open { border-color: var(--bo-ring) !important; box-shadow: 0 0 0 3px color-mix(in oklab, var(--bo-ring) 30%, transparent) !important; }
.rb-co.open .sel-c { transform: rotate(180deg); }
.rb-code { flex: none; width: 8.5rem; }
.ref-info { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.375rem; }
.ref-info .hint { font-size: 0.75rem; line-height: 1.5; color: var(--muted-fg); }
.ref-info .note.warn { font-size: 0.75rem; color: #92400e; }
.ref-info .note.warn .ic { color: #f59e0b; margin-top: 2px; }
/* Referred by: its list has the custom select's look (white, hairline border, soft shadow, hover tint, check) */
.combo { position: relative; }
.combo-lg { display: grid; place-items: center; flex: none; }
.combo-l { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); padding: 4px; background: #fff; border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.2), 0 2px 6px rgba(15, 23, 42, 0.06); animation: selIn 140ms var(--ease) both; }
.combo-o { position: relative; display: flex; width: 100%; align-items: center; gap: 0.75rem; padding: 0.4375rem 2rem 0.4375rem 0.625rem; border-radius: 6px; font-size: 14px; cursor: pointer; }
.combo-o.act { background: var(--accent); }
.combo-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.combo-t b { font-weight: 500; }
.combo-t small { color: var(--muted-fg); font-size: 0.75rem; }
.combo-c { font-size: 0.75rem; color: var(--muted-fg); }
.combo-none { padding: 0.5rem 0.625rem; font-size: 14px; color: var(--muted-fg); }
/* the real SegmentedTabs (Yes / No) */
.seg2 { display: inline-flex; gap: 0.125rem; padding: 0.1875rem; border-radius: 0.5rem; background: var(--muted); }
.seg2 button { height: 2rem; min-width: 3.25rem; padding: 0 0.875rem; border-radius: 0.375rem; font-size: 0.875rem; color: var(--muted-fg); transition: color 150ms var(--ease); }
.seg2 button:hover { color: var(--fg); }
.seg2 button[aria-checked='true'] { background: #fff; color: var(--fg); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--line); }
.bc-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bc-link { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border: 1px solid var(--line); border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--fg); transition: background-color 150ms var(--ease); }
.bc-link .ic { width: 0.875rem; height: 0.875rem; color: var(--muted-fg); }
.bc-link:hover { background: var(--accent); }
.ad-list { display: flex; flex-direction: column; }
.ad-r { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.ad-r:first-child { padding-top: 0; border-top: 0; }
.ad-r:last-child { padding-bottom: 0; }
.ad-r p { font-size: 0.875rem; font-weight: 500; color: var(--fg); }
.ad-r small { font-size: 0.75rem; color: var(--muted-fg); }
.sw { flex: none; position: relative; width: 2rem; height: 1.15rem; border-radius: 999px; background: #cbced4; transition: background-color 160ms var(--ease); }
.sw i { position: absolute; top: 2px; left: 2px; width: calc(1.15rem - 4px); height: calc(1.15rem - 4px); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); transition: transform 200ms var(--ease); }
.sw[aria-checked='true'] { background: var(--primary); }
.sw[aria-checked='true'] i { transform: translateX(0.85rem); }
.bf-act { display: flex; justify-content: flex-end; gap: 0.75rem; }
.bf-act .btn { height: 2.25rem; border-radius: 0.375rem; }

/* the Approve confirm popover */
.apop { position: fixed; z-index: 950; width: 23rem; padding: 1rem 1rem 0.875rem; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 24px 48px -16px rgba(0, 6, 37, 0.3); opacity: 0; transform: translateY(-4px); transition: opacity 140ms var(--ease), transform 220ms var(--ease); }
.apop.open { opacity: 1; transform: none; }
.apop-t { font-size: var(--text-sm); font-weight: 600; color: var(--ats-title); }
.apop dl { display: flex; flex-direction: column; gap: 0.625rem; margin: 0.875rem 0 1rem; }
.apop dl > div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; }
.apop dt { font-size: var(--text-xs); color: var(--muted-fg); }
.apop dd { margin: 0; display: flex; flex-direction: column; gap: 0.125rem; font-size: var(--text-sm); }
.apop dd b { font-weight: 600; }
.apop dd small { font-size: var(--text-xs); color: var(--muted-fg); }
.apop-note { align-self: flex-start; padding: 0.125rem 0.5rem; border-radius: 6px; background: var(--subtle); font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 0.8rem; }
.apop .in { height: 2.125rem; }
.apop-a { display: flex; justify-content: flex-end; gap: 0.375rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }

/* =============================================================== narrower windows */
@media (max-width: 1400px) {
	.rl-h, .rl-r { grid-template-columns: minmax(12rem, 1.4fr) minmax(9rem, 0.9fr) minmax(11rem, 1.3fr) 4.5rem; gap: 1rem; padding: 0 1.25rem; }
	.rl.v-stepper .rl-h, .rl.v-stepper .rl-r { grid-template-columns: minmax(11rem, 1.3fr) minmax(11rem, 1fr) minmax(10rem, 1.2fr) 4.5rem; }
	.pad { padding-left: 1.25rem; padding-right: 1.25rem; }
	.hero { grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.6fr); padding: 2rem; }
	.tile { width: 12rem; }
	.tile-mk { width: 6.75rem; height: 6.75rem; }
	.tile-mk svg { width: 3rem; }
	.pc { transform: perspective(1600px) rotateY(-10deg) rotateX(4deg) rotate(-2deg) scale(0.86); }
	.pc.flat { transform: perspective(1600px) rotateY(-8deg) rotate(-1.5deg) scale(0.86); }
	.iv2-deco { display: none; }
	.bt-h, .bt-r { grid-template-columns: minmax(7rem, 0.8fr) minmax(10rem, 1.2fr) 5.25rem 6.25rem minmax(10.5rem, 1.3fr) minmax(9.5rem, 1fr) 12.25rem; column-gap: 0.625rem; }
	.qa { padding: 0 0.375rem; }
}
@media (max-width: 1300px) {
	.figs dd { font-size: 1.6rem; }
	.d1-row { grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr); }
	.rl-h, .rl-r { grid-template-columns: minmax(11rem, 1.3fr) minmax(8.5rem, 0.9fr) minmax(10rem, 1.3fr) 4rem; }
	.pb { width: 4rem; }
}
@media (max-width: 1200px) {
	.db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.db-two { grid-template-columns: minmax(0, 1fr); }
	.d2-top { grid-template-columns: minmax(0, 1fr); }
	.hero { grid-template-columns: minmax(0, 1fr); }
	.hero-r { display: none; }
	.figs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.25rem; }
	.figs > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 1100px) {
	.d1-row { grid-template-columns: minmax(0, 1fr); }
	.how { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.d3-rail { grid-template-columns: minmax(0, 1fr); }
	.iv-split, 	.ivs-r, 	.d-split { grid-template-columns: minmax(0, 1fr); }
	.ds-l { min-height: 0; }
}
@media (max-width: 900px) {
	.fg2 { grid-template-columns: minmax(0, 1fr); }
	.s-fields.n2, .g2, .ref-g { grid-template-columns: minmax(0, 1fr); }
	.rl-h { display: none; }
	.rl-r, .rl.v-stepper .rl-r { grid-template-columns: minmax(0, 1fr) auto; }
	.rl-r > :nth-child(3) { grid-column: 1 / -1; }
	.rl-r .rl-dt { display: none; }
}