/* =========================================================
   Case study pages (/work/*) and the sample-data UI recreations.
   Loaded after styles.css. Product palettes live on .t-* classes,
   so each recreation looks like the real product in either site theme.
   ========================================================= */

/* ---------- Case study layout ---------- */
.cs-hero { padding: 40px 0 8px; position: relative; }
.crumbs { display: flex; gap: 8px; align-items: center; font: 500 13px/1 var(--mono); color: var(--muted); margin: 0 0 28px; }
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.cs-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; font: 500 13px/1 var(--mono); color: var(--muted); }
.cs-status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); background: var(--surface); }
.cs-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.cs-status--dev i { background: #e2a33b; }
.cs-status--beta i { background: var(--accent); }
.cs-hero h1 { font-size: clamp(2.5rem, 6.6vw, 5rem); letter-spacing: -0.045em; line-height: .98; max-width: 16ch; text-wrap: balance; }
.cs-lede { font-size: clamp(1.08rem, 1.7vw, 1.3rem); color: var(--muted); max-width: 52ch; margin: 22px 0 0; }
.cs-meta { margin: 36px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cs-meta div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.cs-meta dt { font: 500 12px/1.4 var(--mono); color: var(--muted); margin-bottom: 6px; }
.cs-meta dd { margin: 0; color: var(--ink); font-weight: 500; font-size: 15px; overflow-wrap: anywhere; }
.cs-meta a { color: var(--ink); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
@media (min-width: 900px) { .cs-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cs-stage { margin-top: 44px; position: relative; padding-bottom: 40px; }
.cs-stage__main { width: 100%; }
.cs-stage__float { position: absolute; right: 0; bottom: 0; width: 24%; min-width: 120px; }
.cs-stage__float--wide { width: 40%; }
@media (min-width: 900px) { .cs-stage__main { width: 86%; } }
@media (max-width: 720px) { .cs-stage__float { width: 34%; } .cs-stage__float--wide { width: 62%; } }

.cs-glance { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.cs-glance > div { padding: 22px 0; border-bottom: 1px solid var(--line); }
.cs-glance h3 { font: 500 12.5px/1 var(--mono); color: var(--accent); letter-spacing: .02em; margin-bottom: 12px; }
.cs-glance p { margin: 0; font-size: 1.05rem; color: var(--text); }
@media (min-width: 900px) { .cs-glance { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; border-bottom: 1px solid var(--line); } .cs-glance > div { border-bottom: 0; } }

.cs-part { padding: 72px 0; border-top: 1px solid var(--line); display: grid; gap: 36px; align-items: center; }
.cs-part:first-child { border-top: 0; }
.cs-part__body { min-width: 0; }
.cs-part__body h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); letter-spacing: -0.035em; margin-bottom: 16px; text-wrap: balance; }
.cs-part__body > p { color: var(--muted); max-width: 54ch; }
.cs-part__visual { min-width: 0; position: relative; }
@media (min-width: 980px) {
  .cs-part { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 64px; padding: 96px 0; }
  .cs-part--flip .cs-part__visual { order: -1; }
  .cs-part--flip { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); }
}
.cs-label { font: 500 12.5px/1 var(--mono); color: var(--accent); margin: 0 0 16px; }
.feat { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.feat li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15.5px; color: var(--text); line-height: 1.5; }
.feat li::before { content: ""; width: 14px; height: 14px; margin-top: 4px; border-radius: 4px; background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.feat b { color: var(--ink); font-weight: 600; }

.cs-builds { display: grid; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 640px) { .cs-builds { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .cs-builds { grid-template-columns: repeat(3, 1fr); } }
.cs-build { background: var(--surface); padding: 26px 24px 28px; }
.cs-build h3 { font-size: 1.08rem; margin-bottom: 8px; }
.cs-build p { margin: 0; color: var(--muted); font-size: 15px; }

.cs-stack { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.cs-stack li { font: 500 13px/1 var(--mono); padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); }
.cs-foot { display: grid; gap: 40px; }
@media (min-width: 900px) { .cs-foot { grid-template-columns: 1fr 1fr; gap: 64px; } }
.cs-foot h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.03em; margin-bottom: 18px; }
.privacy-note { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 18px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.privacy-note svg { width: 22px; height: 22px; color: var(--accent); margin-top: 1px; }
.privacy-note p { margin: 0; }

.cs-next { display: grid; gap: 14px; }
.cs-next a { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px; padding: 28px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.cs-next a:last-child { border-bottom: 1px solid var(--line); }
.cs-next small { display: block; font: 500 12.5px/1 var(--mono); color: var(--muted); margin-bottom: 10px; }
.cs-next strong { font-size: clamp(1.5rem, 3.4vw, 2.4rem); letter-spacing: -0.035em; font-weight: 600; line-height: 1.05; }
.cs-next span[aria-hidden] { font-size: 1.6rem; transition: transform .25s ease; }
.cs-next a:hover span[aria-hidden] { transform: translateX(6px); }

/* ---------- Work index cards (home page) ---------- */
.work-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
.work-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s; }
.work-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.work-card__visual { aspect-ratio: 16 / 10; position: relative; overflow: hidden; display: grid; place-items: center; padding: 22px 22px 0; }
.work-card__visual > * { width: 100%; align-self: end; }
.work-card__visual .frame, .work-card__visual .ui { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: var(--shadow); }
.work-card__body { padding: 22px 24px 26px; display: grid; gap: 8px; border-top: 1px solid var(--line); flex: 1; align-content: start; }
.work-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font: 500 12.5px/1.3 var(--mono); color: var(--muted); }
.work-card h3 { font-size: 1.4rem; letter-spacing: -0.025em; }
.work-card p { margin: 0; color: var(--muted); font-size: 15.5px; }
.work-card__go { margin-top: 8px; font-weight: 500; color: var(--ink); font-size: 15px; }
.bg-ecm { background: linear-gradient(160deg, #0d2240, #133a63); }
.bg-wl { background: linear-gradient(160deg, #efe7dc, #d9c8b4); }
.bg-hoaly { background: linear-gradient(160deg, #e9e6df, #cfd8d0); }
.bg-fin { background: radial-gradient(120% 90% at 50% 0%, #1C6B69, #0F3F40 70%); }
.bg-rtd { background: radial-gradient(120% 90% at 50% 0%, #1b2a52, #0b1220 70%); }
.work-card__visual--phone { padding-top: 26px; place-items: start center; }
.work-card__visual--phone > * { width: min(62%, 230px); max-width: none; align-self: start; }

/* =========================================================
   UI recreations. Everything below is styled from --u-* tokens.
   ========================================================= */
.t-ecm   { --u-bg:#f4f6f9; --u-surface:#fff; --u-ink:#0c1d33; --u-text:#24344a; --u-muted:#66758a; --u-line:#e3e8ef; --u-side:#0c1d33; --u-side-ink:#c9d6e6; --u-accent:#0e7490; --u-accent-soft:#e2f5fa; --u-ok:#0f6e48; --u-warn:#8a5a12; --u-font: "Geist", ui-sans-serif, system-ui, sans-serif; }
.t-wl    { --u-bg:#f6f1ea; --u-surface:#fffdf9; --u-ink:#2a2420; --u-text:#3d342e; --u-muted:#7d7067; --u-line:#e7ddd0; --u-side:#22362b; --u-side-ink:#d8e1d9; --u-accent:#a35a3c; --u-accent-soft:#f3e3d9; --u-ok:#3c6b4f; --u-warn:#b7791f; --u-font: "Geist", ui-sans-serif, system-ui, sans-serif; --u-display: "Cormorant Garamond", Georgia, serif; }
.t-wlops { --u-bg:#f5f6f4; --u-surface:#fff; --u-ink:#18211c; --u-text:#2b352f; --u-muted:#6c766f; --u-line:#e3e7e3; --u-side:#18211c; --u-side-ink:#c8d2cb; --u-accent:#2f6b4f; --u-accent-soft:#e3efe8; --u-ok:#2f8a5a; --u-warn:#b7791f; --u-font: "Geist", ui-sans-serif, system-ui, sans-serif; }
.t-hoaly { --u-bg:#f4f2ed; --u-surface:#fff; --u-ink:#1a2a24; --u-text:#2a3a33; --u-muted:#6b766f; --u-line:#e4e1d9; --u-side:#1f3a31; --u-side-ink:#cfe0d6; --u-accent:#1f3a31; --u-accent-soft:#e3ece6; --u-gold:#c9a24a; --u-ok:#2f8a5a; --u-warn:#b7791f; --u-font: "Figtree", "Geist", ui-sans-serif, system-ui, sans-serif; }
.t-fin   { --u-bg:#F3F6F5; --u-surface:#fff; --u-ink:#17181C; --u-text:#17181C; --u-muted:#6B6C73; --u-line:#E9E6E1; --u-side:#0F3F40; --u-side-ink:#B9D9D7; --u-accent:#0E7C7B; --u-accent-soft:#E6F3F1; --u-accent-2:#5B8DEF; --u-ok:#137D58; --u-warn:#9A5B00; --u-warn-soft:#FFF4E0; --u-bad:#C9353B; --u-apricot:#FF8A5B; --u-on-apricot:#2A1206; --u-apricot-soft:#FFF1EA; --u-hero:#0F3F40; --u-band:linear-gradient(160deg,#0C6564,#0E7C7B 55%,#11827E); --u-band-ink:#fff; --u-band-sub:#EBF7F5; --u-tile:rgba(0,28,30,.22); --u-tile-line:rgba(255,255,255,.16); --u-tile-good:#C9F4E1; --u-tile-warn:#FFDCCC; --u-chip:rgba(0,30,30,.16); --u-track:rgba(255,255,255,.18); --u-fill:#fff; --u-later:#F1F4F3; --u-card-line:transparent; --u-card-shadow:0 10px 28px rgba(10,79,78,.14); --u-tabbar:#fff; --u-font: "Inter", "Geist", ui-sans-serif, system-ui, sans-serif; }
/* Dusk, the app's night appearance: soft deep teal, never near black. */
.t-fin.fin-dusk { --u-bg:#1B2C2B; --u-surface:#243A38; --u-ink:#EEF5F4; --u-text:#EEF5F4; --u-muted:#9DB8B4; --u-line:#2F4A47; --u-accent:#8FE0D7; --u-accent-soft:#1E4542; --u-apricot-soft:#3A2418; --u-band:linear-gradient(160deg,#0B5352,#0E6463 55%,#12706D); --u-band-sub:#D2EAE7; --u-fill:#8FE0D7; --u-later:#2D4644; --u-card-line:#2F4A47; --u-card-shadow:none; --u-tabbar:#1B2C2B; }
.t-bw    { --u-bg:#f3efe6; --u-surface:#fbf9f4; --u-ink:#1d1b17; --u-text:#3a362f; --u-muted:#7b7467; --u-line:#e6dfd0; --u-side:#1d1b17; --u-side-ink:#d9d2c3; --u-accent:#a8843a; --u-accent-soft:#f1e8d3; --u-ok:#3c6b4f; --u-warn:#b7791f; --u-font: "Geist", ui-sans-serif, system-ui, sans-serif; }
.t-rtd   { --u-bg:#fbfaf7; --u-surface:#fff; --u-ink:#14171a; --u-text:#3f454c; --u-muted:#646b73; --u-line:#e3e1da; --u-side:#0b1220; --u-side-ink:#8a97b6; --u-accent:#14171a; --u-accent-soft:#efede7; --u-gold:#e3b75c; --u-gold-ink:#8f6410; --u-ok:#127a4a; --u-ok-bg:#e7f4ec; --u-warn:#a15c00; --u-warn-bg:#fff3db; --u-bad:#b42318; --u-teal:#0b7285; --u-survey:#e8590c; --u-font: "Manrope", "Geist", ui-sans-serif, system-ui, sans-serif; --u-display: "Bricolage Grotesque", "Geist", ui-sans-serif, system-ui, sans-serif; }

.ui { font-family: var(--u-font); background: var(--u-bg); color: var(--u-text); border: 1px solid var(--u-line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); font-size: 12px; line-height: 1.4; position: relative; text-align: left; }
.ui * { box-sizing: border-box; }
.ui b, .ui strong { color: var(--u-ink); font-weight: 600; }
.ui-sample { position: absolute; bottom: 10px; right: 10px; z-index: 5; font: 500 9.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--u-muted); background: var(--u-surface); border: 1px solid var(--u-line); padding: 5px 7px; border-radius: 999px; }
.ui-chrome { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: var(--u-surface); border-bottom: 1px solid var(--u-line); }
.ui-chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--u-line); }
.ui-chrome span { margin: 0 auto; transform: translateX(-12px); font: 500 10.5px/1 var(--mono); color: var(--u-muted); }
.ui-shell { display: grid; grid-template-columns: 168px minmax(0, 1fr); min-height: 100%; }
.ui-side { background: var(--u-side); color: var(--u-side-ink); padding: 14px 10px; display: grid; align-content: start; gap: 2px; font-size: 11.5px; }
.ui-side .logo { display: flex; align-items: center; gap: 8px; padding: 2px 8px 14px; color: #fff; font-weight: 600; font-size: 12.5px; }
.ui-side .logo i { width: 18px; height: 18px; border-radius: 5px; background: var(--u-accent); }
.ui-side small { font: 500 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .55; padding: 12px 8px 6px; }
.ui-side a, .ui-side > span { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; color: inherit; text-decoration: none; }
.ui-side a::before, .ui-side > span::before { content: ""; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid currentColor; opacity: .55; }
.ui-side a.on, .ui-side > span.on { background: rgba(255,255,255,.1); color: #fff; }
.ui-side a.on::before, .ui-side > span.on::before { background: var(--u-accent); border-color: var(--u-accent); opacity: 1; }
.ui-main { padding: 16px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.ui-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ui-h h4 { margin: 0; font-size: 15px; color: var(--u-ink); letter-spacing: -0.01em; font-weight: 600; }
.ui-h p { margin: 2px 0 0; color: var(--u-muted); font-size: 11px; }
.ui-seg { display: inline-flex; background: var(--u-surface); border: 1px solid var(--u-line); border-radius: 8px; padding: 2px; gap: 2px; }
.ui-seg span { padding: 4px 8px; border-radius: 6px; font-size: 10.5px; color: var(--u-muted); }
.ui-seg span.on { background: var(--u-ink); color: var(--u-surface); }
.ui-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.ui-kpi { background: var(--u-surface); border: 1px solid var(--u-line); border-radius: 10px; padding: 10px; display: grid; gap: 4px; min-width: 0; }
.ui-kpi small { color: var(--u-muted); font-size: 10px; }
.ui-kpi b { font-size: 17px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ui-kpi em { font-style: normal; font-size: 10px; color: var(--u-ok); }
.ui-card { background: var(--u-surface); border: 1px solid var(--u-line); border-radius: 12px; padding: 12px; display: grid; gap: 10px; min-width: 0; }
.ui-card > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ui-card > header b { font-size: 12.5px; }
.ui-card > header span { color: var(--u-muted); font-size: 10.5px; }
.ui-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ui-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ui-table { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.ui-table th { text-align: left; font-weight: 500; color: var(--u-muted); font-size: 10px; padding: 0 8px 7px 0; border-bottom: 1px solid var(--u-line); white-space: nowrap; }
.ui-table td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--u-line); color: var(--u-text); white-space: nowrap; }
.ui-table tr:last-child td { border-bottom: 0; }
.ui-table .r { text-align: right; padding-right: 0; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 500; background: var(--u-accent-soft); color: var(--u-accent); white-space: nowrap; }
.chip--ok { background: color-mix(in srgb, var(--u-ok) 14%, transparent); color: var(--u-ok); }
.chip--warn { background: color-mix(in srgb, var(--u-warn) 16%, transparent); color: var(--u-warn); }
.chip--muted { background: color-mix(in srgb, var(--u-muted) 14%, transparent); color: var(--u-muted); }
.chip--dark { background: var(--u-ink); color: var(--u-surface); }
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 8px; background: var(--u-ink); color: var(--u-surface); font-size: 11px; font-weight: 600; white-space: nowrap; }
.ui-btn--accent { background: var(--u-accent); color: #fff; }
.ui-btn--ghost { background: transparent; color: var(--u-ink); border: 1px solid var(--u-line); }
.ui-btn--block { width: 100%; height: 34px; }
.blur { filter: blur(4.5px); user-select: none; }
.ui-avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--u-accent), var(--u-ink)); flex: none; }
.ui-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ui-row > .grow { flex: 1; min-width: 0; }
.ui-muted { color: var(--u-muted); }
.ui-list { display: grid; gap: 0; }
.ui-list > div { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--u-line); min-width: 0; }
.ui-list > div:first-child { border-top: 0; }
.ui-list .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--u-muted) 16%, transparent); overflow: hidden; }
.track i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--u-accent); }
.hbars { display: grid; gap: 9px; }
.hbars > div { display: grid; grid-template-columns: 84px minmax(0, 1fr) 54px; gap: 8px; align-items: center; font-size: 11px; }
.hbars > div > span:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--u-ink); font-weight: 500; }
.spark { width: 100%; height: 86px; display: block; }
.spark text { font: 9px var(--u-font); fill: var(--u-muted); }

/* Phone device */
.phone { width: 100%; max-width: 300px; margin: 0 auto; border-radius: 36px; padding: 8px; background: #0b0b0c; box-shadow: 0 0 0 1px var(--line-2), var(--shadow-lg); position: relative; }
.phone > .ui { border-radius: 29px; border: 0; box-shadow: none; aspect-ratio: 9 / 19.5; display: flex; flex-direction: column; }
.phone .ui-status { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px 4px; font-size: 10.5px; font-weight: 600; color: var(--u-ink); flex: none; }
.phone .ui-status i { width: 66px; height: 18px; border-radius: 999px; background: #0b0b0c; }
.phone .ui-scroll { flex: 1; overflow: hidden; padding: 6px 12px 12px; display: grid; gap: 9px; align-content: start; }
.phone .ui-tabs { flex: none; display: flex; justify-content: space-around; padding: 8px 6px 14px; border-top: 1px solid var(--u-line); background: var(--u-surface); font-size: 9px; color: var(--u-muted); }
.phone .ui-tabs span { display: grid; justify-items: center; gap: 3px; }
.phone .ui-tabs span::before { content: ""; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid currentColor; opacity: .7; }
.phone .ui-tabs span.on { color: var(--u-accent); }
.phone .ui-tabs span.on::before { background: currentColor; opacity: 1; }
.phone .ui-sample { top: 40px; bottom: auto; right: 14px; }
.ui-pilltabs { position: absolute; left: 14px; right: 14px; bottom: 16px; display: flex; justify-content: space-around; padding: 9px 6px; border-radius: 999px; background: color-mix(in srgb, var(--u-surface) 80%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--u-line); font-size: 9px; color: var(--u-muted); }
.ui-pilltabs span.on { color: var(--u-accent); font-weight: 600; }

/* Paired visuals: phone beside a desktop recreation */
.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: end; }
@media (min-width: 640px) { .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.duo .phone { max-width: 260px; }

/* Screenshot frames in case studies */
.shot { margin: 0; }
.shot figcaption { font: 500 12px/1.4 var(--mono); color: var(--muted); margin-top: 12px; }

@media (max-width: 720px) {
  .ui-shell { grid-template-columns: minmax(0, 1fr); }
  .ui-side { display: none; }
  .ui-hide-sm { display: none !important; }
  .ui-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-table-wrap { overflow-x: auto; }
}

/* Tiny HTML phones are unreadable on small screens; keep the float only for screenshots there. */
@media (max-width: 720px) { .cs-stage__float:has(.phone) { display: none; } }

.bg-bw { background: linear-gradient(160deg, #efe9dd, #d8ccb4); }

/* Austin: no all-caps labels anywhere, including inside the mock screens */
.ui, .ui * { text-transform: none !important; letter-spacing: normal !important; }

/* ---------- Run The Deal recreation (paper app, night verdict panel, Bricolage + Manrope) ---------- */
.t-rtd .chip--ok { background: var(--u-ok-bg); }
.t-rtd .chip--warn { background: var(--u-warn-bg); }
.t-rtd .ui-kpi, .t-rtd .ui-card { border-radius: 12px; }
.t-rtd .ui-h h4 { font-family: var(--u-display); font-weight: 700; font-size: 16px; }
.rtd-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: var(--u-bg); border-bottom: 1px solid var(--u-line); min-width: 0; }
.rtd-logo { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 var(--u-display); color: var(--u-ink); white-space: nowrap; }
.rtd-logo svg { width: 18px; height: 18px; flex: none; }
.rtd-logo em { font-style: normal; color: var(--u-gold-ink); }
.rtd-nav { display: flex; gap: 14px; font-size: 10.5px; color: var(--u-muted); font-weight: 600; min-width: 0; overflow: hidden; white-space: nowrap; }
.rtd-nav .on { color: var(--u-ink); }
.rtd-ic { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; border: 1px solid var(--u-line); background: var(--u-surface); color: var(--u-ink); font-size: 12px; }
.rtd-crumb { font-size: 9.5px; color: var(--u-muted); }
.rtd-title { font: 700 17px/1.15 var(--u-display); color: var(--u-ink); margin: 2px 0 0; }
.rtd-tabs { display: flex; gap: 12px; border-bottom: 1px solid var(--u-line); font-size: 10.5px; color: var(--u-muted); font-weight: 600; white-space: nowrap; overflow: hidden; }
.rtd-tabs span { padding: 0 1px 6px; }
.rtd-tabs .on { color: var(--u-ink); box-shadow: inset 0 -2px 0 var(--u-ink); }
.rtd-night { background: radial-gradient(90% 70% at 100% 0%, #1b2a52, transparent 62%), #0b1220; color: #e9eefb; border-radius: 14px; padding: 13px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.rtd-night b, .rtd-night strong { color: #fff; }
.rtd-night p { margin: 0; font-size: 10.5px; color: #b7c1da; line-height: 1.5; }
.rtd-l { font-size: 9.5px; color: #8a97b6; font-weight: 700; }
.rtd-big { font: 800 32px/1 var(--u-display); color: #fff; font-variant-numeric: tabular-nums; }
.rtd-how { font-size: 9.5px; color: #c5cde0; text-decoration: underline dotted; text-underline-offset: 3px; }
.rtd-pill { display: inline-flex; align-items: center; gap: 5px; width: max-content; padding: 3px 9px; border-radius: 999px; font-weight: 800; font-size: 10.5px; background: var(--u-ok-bg); color: var(--u-ok); }
.rtd-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.rtd-pill--warn { background: var(--u-warn-bg); color: var(--u-warn); }
.rtd-strats { display: flex; gap: 4px; flex-wrap: wrap; }
.rtd-strats span { border: 1px solid #1f2b45; border-radius: 999px; padding: 4px 8px; font-size: 9px; color: #8a97b6; font-weight: 600; }
.rtd-strats .on { background: #e9eefb; color: #0b1220; border-color: transparent; }
.rtd-ntiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.rtd-ntiles > div { border: 1px solid #1f2b45; background: #111a2e; border-radius: 10px; padding: 7px 9px; display: grid; gap: 2px; min-width: 0; }
.rtd-ntiles small { font-size: 8.5px; color: #8a97b6; font-weight: 700; }
.rtd-ntiles strong { font: 700 14px/1.15 var(--u-display); color: #fff; font-variant-numeric: tabular-nums; }
.rtd-ntiles em { font-size: 8.5px; color: #8a97b6; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rtd-ntiles .g { color: #4fd1a1; } .rtd-ntiles .r { color: #ff7a7a; }
.rtd-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--u-warn-bg); border: 1px solid color-mix(in srgb, var(--u-warn) 45%, transparent); font-size: 10.5px; }
.rtd-banner b { display: block; }
.rtd-banner span { color: var(--u-muted); }
.rtd-banner em { font-style: normal; font-weight: 700; color: var(--u-warn); }
.rtd-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rtd-acts span { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--u-line); background: var(--u-surface); font-size: 9.5px; font-weight: 700; color: var(--u-ink); text-align: center; }
.rtd-acts svg { font-size: 13px; }
.rtd-todo { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.rtd-todo i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--u-muted); }
.rtd-todo small { display: block; color: var(--u-muted); font-size: 9.5px; }
.rtd-warnrow { padding: 6px 9px; border-radius: 8px; background: var(--u-warn-bg); color: var(--u-ink); font-size: 10px; }
.rtd-map { position: relative; min-height: 170px; border-radius: 10px; overflow: hidden; border: 1px solid var(--u-line); background:
  linear-gradient(90deg, transparent 47%, #fff 47%, #fff 50%, transparent 50%), linear-gradient(0deg, transparent 31%, #fff 31%, #fff 34%, transparent 34%), linear-gradient(0deg, transparent 69%, #fff 69%, #fff 72%, transparent 72%), linear-gradient(35deg, transparent 58%, #f6f4ef 58%, #f6f4ef 61%, transparent 61%), #e9e7e1; }
.rtd-map .ring { position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px dashed var(--u-teal); background: color-mix(in srgb, var(--u-teal) 6%, transparent); }
.rtd-map .pin { position: absolute; width: 11px; height: 11px; margin: -5.5px; border-radius: 50%; background: var(--u-teal); border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.25); }
.rtd-map .pin--you { background: var(--u-survey); width: 13px; height: 13px; margin: -6.5px; }
.rtd-map .pin--off { background: #9aa9b3; }
.rtd-legend { display: flex; gap: 10px; font-size: 9.5px; color: var(--u-muted); flex-wrap: wrap; }
.rtd-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
.rtd-mtabs { flex: none; display: flex; justify-content: space-around; padding: 7px 4px 13px; border-top: 1px solid var(--u-line); background: var(--u-surface); font-size: 8.5px; color: var(--u-muted); font-weight: 600; }
.rtd-mtabs span { display: grid; justify-items: center; gap: 3px; white-space: nowrap; }
.rtd-mtabs svg { font-size: 15px; }
.rtd-mtabs .on { color: var(--u-ink); font-weight: 800; }
.phone .t-rtd .ui-sample, .phone .t-fin .ui-sample { top: auto; bottom: 60px; right: 12px; }

/* ---------- Finance app recreation (Lagoon: teal header band, white cards, Apricot actions, Inter) ---------- */
.fin-band { flex: none; background: var(--u-band); color: var(--u-band-ink); padding: 0 12px 34px; display: grid; gap: 7px; }
.fin-band .ui-status { color: var(--u-band-ink); padding-left: 8px; padding-right: 8px; }
.fin-band b, .fin-band strong { color: var(--u-band-ink); }
.fin-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fin-logo { display: inline-flex; align-items: center; gap: 6px; }
.fin-logo i, .fin-logo u { display: block; }
.fin-logo i { width: 15px; height: 15px; border-radius: 5px; border: 2px solid var(--u-band-ink); opacity: .9; }
.fin-logo u { width: 44px; height: 7px; border-radius: 4px; background: var(--u-band-ink); opacity: .5; }
.fin-who { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: var(--u-chip); font-size: 9.5px; font-weight: 700; }
.fin-icons { display: flex; gap: 5px; }
.fin-icbtn { position: relative; width: 24px; height: 24px; border-radius: 50%; background: var(--u-chip); display: grid; place-items: center; font-size: 11px; color: var(--u-band-ink); }
.fin-icbtn sup { position: absolute; top: -3px; right: -3px; min-width: 12px; height: 12px; border-radius: 6px; background: #C9F4E1; color: #0A3F3E; font-size: 7.5px; font-weight: 800; display: grid; place-items: center; line-height: 1; }
.fin-greet { font-weight: 700; font-size: 12px; line-height: 1.3; }
.fin-lbl { font-size: 10px; color: var(--u-band-sub); }
.fin-num { font-weight: 800; font-size: 34px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.fin-num small { font-size: .5em; font-weight: 700; }
.fin-bar { height: 5px; border-radius: 3px; background: var(--u-track); overflow: hidden; }
.fin-bar i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--u-fill); }
.fin-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 9px; color: var(--u-band-sub); }
.fin-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 999px; background: var(--u-chip); color: var(--u-band-ink); white-space: nowrap; }
.fin-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--u-apricot); }
.fin-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.fin-tiles > div { background: var(--u-tile); border: 1px solid var(--u-tile-line); border-radius: 9px; padding: 6px 7px; display: grid; gap: 1px; min-width: 0; }
.fin-tiles small { font-size: 8.5px; color: var(--u-band-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-tiles strong { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fin-tiles em { font-size: 8px; font-style: normal; color: var(--u-tile-good); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-tiles em.w { color: var(--u-tile-warn); }
.fin-title { font-size: 19px; font-weight: 800; color: var(--u-band-ink); margin: 2px 0 0; line-height: 1.1; }
.fin-sub { font-size: 10px; color: var(--u-band-sub); margin: 0; }
.fin-body { flex: 1; min-height: 0; overflow: hidden; margin-top: -24px; padding: 0 10px 10px; display: grid; gap: 8px; align-content: start; position: relative; }
.fin-card { background: var(--u-surface); border: 1px solid var(--u-card-line); border-radius: 16px; padding: 11px; display: grid; gap: 7px; box-shadow: var(--u-card-shadow); min-width: 0; }
.fin-card > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fin-card > header b { font-size: 11.5px; font-weight: 700; }
.fin-card > header span { font-size: 9.5px; font-weight: 700; color: var(--u-accent); }
.fin-hero { background: var(--u-hero); color: #fff; border-radius: 16px; padding: 11px 12px; display: grid; gap: 3px; min-width: 0; box-shadow: var(--u-card-shadow); }
.fin-hero b, .fin-hero strong { color: #fff; }
.fin-hero small { font-size: 9px; color: #B9D9D7; }
.fin-hero strong { font-size: 24px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fin-hero em { font-size: 9.5px; font-style: normal; color: #8FE3BE; font-weight: 600; }
.fin-kick { font-size: 9px; font-weight: 800; color: var(--u-accent); }
.fin-move { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; }
.fin-move b { font-size: 12px; line-height: 1.3; display: block; }
.fin-ict { width: 26px; height: 26px; border-radius: 8px; background: var(--u-apricot-soft); color: var(--u-apricot); display: grid; place-items: center; font-size: 13px; flex: none; }
.fin-ict--teal { background: var(--u-accent-soft); color: var(--u-accent); }
.fin-row2 { display: flex; justify-content: space-between; gap: 6px; font-size: 9.5px; color: var(--u-muted); }
.fin-ptrack { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--u-muted) 16%, transparent); overflow: hidden; }
.fin-ptrack i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--c, var(--u-apricot)); }
.fin-ctas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.fin-btn { height: 27px; border-radius: 999px; background: var(--u-apricot); color: var(--u-on-apricot); font-weight: 700; font-size: 10.5px; display: grid; place-items: center; padding: 0 12px; white-space: nowrap; }
.fin-btn--later { background: var(--u-later); color: var(--u-ink); }
.fin-btn--teal { background: var(--u-accent); color: #fff; }
.fin-list { display: grid; gap: 7px; }
.fin-list > div { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 10.5px; min-width: 0; }
.fin-list > div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-list small { color: var(--u-muted); font-size: 9.5px; }
.fin-ini { width: 20px; height: 20px; border-radius: 6px; color: #fff; font-size: 7.5px; font-weight: 800; display: grid; place-items: center; }
.fin-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.fin-days span { display: grid; justify-items: center; gap: 1px; padding: 4px 0 5px; border-radius: 8px; background: color-mix(in srgb, var(--u-muted) 9%, transparent); font-size: 7.5px; color: var(--u-muted); }
.fin-days span b { font-size: 11px; font-weight: 800; }
.fin-days span i { width: 4px; height: 4px; border-radius: 50%; background: var(--u-accent); }
.fin-days span.today { background: transparent; box-shadow: inset 0 0 0 1.5px var(--u-accent); }
.fin-days span.pay { background: var(--u-apricot-soft); }
.fin-days span.pay i { background: var(--u-apricot); }
.fin-insight { background: var(--u-accent-soft); border-radius: 14px; padding: 9px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 9.5px; color: var(--u-muted); }
.fin-insight b { display: block; font-size: 10.5px; }
.fin-insight > i { width: 24px; height: 24px; border-radius: 8px; background: var(--u-surface); color: var(--u-accent); display: grid; place-items: center; font-size: 12px; }
.fin-split > div { display: grid; gap: 4px; font-size: 10.5px; }
.fin-split > div > span:first-child { display: flex; align-items: center; gap: 6px; }
.fin-split > div > span:first-child::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.fin-split > div > span:first-child em { font-style: normal; color: var(--u-muted); }
.fin-split > div > span:first-child b { margin-left: auto; font-variant-numeric: tabular-nums; }
.fin-seg { display: inline-flex; padding: 2px; border-radius: 999px; background: color-mix(in srgb, var(--u-muted) 12%, transparent); font-size: 9.5px; }
.fin-seg span { padding: 3px 10px; border-radius: 999px; color: var(--u-muted); font-weight: 600; }
.fin-seg .on { background: var(--u-surface); color: var(--u-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.fin-yn { display: flex; gap: 4px; }
.fin-yn span { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--u-muted) 10%, transparent); font-size: 9px; font-weight: 600; color: var(--u-ink); }
.fin-tabs { flex: none; display: flex; justify-content: space-around; padding: 6px 4px 12px; border-top: 1px solid var(--u-line); background: var(--u-tabbar); font-size: 8.5px; color: var(--u-muted); }
.fin-tabs span { display: grid; justify-items: center; gap: 2px; }
.fin-tabs i { width: 32px; height: 19px; border-radius: 10px; display: grid; place-items: center; font-size: 13px; }
.fin-tabs .on { color: var(--u-accent); font-weight: 700; }
.fin-tabs .on i { background: var(--u-accent-soft); }
/* The three-phone hero is unreadable on a phone: show the Home screen alone there. */
@media (max-width: 720px) {
  .fin-trio { grid-template-columns: minmax(0, 1fr) !important; padding: 28px 28px 0 !important; }
  .fin-trio__side { display: none; }
  .fin-trio .phone { max-width: 270px; }
}
.fin-logo { gap: 5px; color: var(--u-band-ink); }
.fin-logo svg { width: 17px; height: 17px; }
.fin-logo b { font: 700 13px/1 "Bricolage Grotesque", var(--u-font); letter-spacing: -0.03em; }

/* Livelihood waitlist on the case page */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs-wait { margin-top: 28px; display: grid; gap: 14px; padding: 22px; border-radius: 20px; background: linear-gradient(150deg, #0E7C7B, #0a5d5c); color: #e9f5f4; }
@media (min-width: 900px) { .cs-wait { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; padding: 26px 30px; } }
.cs-wait__h { margin: 0 0 4px; font-weight: 700; font-size: 1.15rem; color: #fff; }
.cs-wait__p { margin: 0; font-size: 14.5px; color: #cfe9e6; }
.cs-wait .lh__row { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-wait input, .cs-wait select { min-height: 48px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.96); color: #0b2a2a; font: 400 16px/1 var(--font); padding: 0 14px; }
.cs-wait input { flex: 1 1 200px; min-width: 0; }
.cs-wait .btn { min-height: 48px; background: #FF8A5B; color: #2a1206; border-color: #FF8A5B; }
.cs-wait .lh__msg { margin: 0; color: #fff; font-size: 14px; }
.cs-wait .lh__msg:empty { display: none; }
@media (max-width: 560px) { .cs-wait select, .cs-wait .btn { flex: 1 1 100%; } }

/* ==== Hoaly case study, refreshed 2026-10-17 (owned by tools/work/hoaly.mjs) ====
   Matches hoaly.app now: warm stone, lodge green, gold Pay, Fraunces titles over Figtree. */
.t-hoaly { --u-bg:#f5f3ee; --u-surface:#fff; --u-ink:#1b2620; --u-text:#1b2620; --u-muted:#56635c; --u-line:#e2ddd3; --u-side:#1f3a31; --u-side-ink:#f3efe6; --u-accent:#1f4d3f; --u-accent-soft:#ebe6dc; --u-gold:#8a6420; --u-ok:#2d7a4e; --u-warn:#7a4e0b; --hy-soft:#ebe6dc; --hy-okbg:#ddefe3; --hy-warnbg:#f6e6c8; --hy-bad:#a8432f; --hy-badbg:#f7e1db; --u-font:"Figtree", "Geist", ui-sans-serif, system-ui, sans-serif; --hy-display:"Fraunces", Georgia, "Times New Roman", serif; }
.t-hoaly b, .t-hoaly strong { font-weight: 700; }
.t-hoaly svg { flex: none; }
.t-hoaly .hy-top { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.t-hoaly .hy-top > b { flex: 1; min-width: 0; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-hoaly .hy-mark { width: 22px; height: 22px; border-radius: 7px; background: var(--u-accent); color: #f3efe6; display: grid; place-items: center; flex: none; }
.t-hoaly .hy-mark svg { width: 17px; height: 17px; }
.t-hoaly .hy-pay { display: inline-flex; align-items: center; gap: 4px; background: var(--u-gold); color: #fff; border-radius: 999px; padding: 5px 10px; font-weight: 800; font-size: 10.5px; }
.t-hoaly .hy-me { color: var(--u-accent); font-size: 15px; display: inline-flex; }
.t-hoaly .hy-place { position: relative; border-radius: 14px; overflow: hidden; min-height: 82px; display: grid; align-items: end; background: var(--u-side); }
.t-hoaly .hy-place svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.t-hoaly .hy-place::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(12,24,19,.7)); }
.t-hoaly .hy-place span { position: relative; z-index: 1; padding: 9px 11px; display: grid; color: #f6f2ea; font-size: 9.5px; font-weight: 600; }
.t-hoaly .hy-place span b { color: #f6f2ea; font: 700 17px/1.05 var(--hy-display); letter-spacing: -.01em; }
.t-hoaly .hy-title { margin: 0; font: 700 19px/1.08 var(--hy-display); color: var(--u-ink); letter-spacing: -.015em; }
.t-hoaly .hy-title--lg { font-size: 23px; }
.t-hoaly .hy-eyebrow { font-size: 9.5px; font-weight: 800; color: var(--u-muted); }
.t-hoaly .hy-card { background: var(--u-surface); border: 1px solid var(--u-line); border-radius: 13px; padding: 10px 11px; display: grid; gap: 7px; min-width: 0; }
.t-hoaly .hy-card > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.t-hoaly .hy-soft { background: var(--hy-soft); border-radius: 11px; padding: 8px 10px; display: grid; gap: 3px; }
.t-hoaly .hy-status { display: flex; align-items: center; gap: 7px; border-radius: 11px; padding: 8px 10px; font-weight: 700; font-size: 11px; line-height: 1.3; }
.t-hoaly .hy-status--warn { background: var(--hy-warnbg); color: var(--u-warn); }
.t-hoaly .hy-status--ok { background: var(--hy-okbg); color: #1e5b3a; }
.t-hoaly .hy-ask { display: flex; align-items: center; gap: 7px; background: var(--u-surface); border: 1px solid var(--u-line); border-radius: 13px; padding: 4px 4px 4px 9px; color: var(--u-muted); font-size: 10.5px; box-shadow: 0 6px 16px -10px rgba(27,38,32,.35); }
.t-hoaly .hy-ask > span:not(.hy-btn) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-hoaly .hy-ask svg { color: var(--u-accent); }
.t-hoaly .hy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 26px; padding: 0 11px; border-radius: 9px; background: var(--u-accent); color: #f3efe6; font-weight: 800; font-size: 10.5px; white-space: nowrap; }
.t-hoaly .hy-btn--light { background: #f3efe6; color: var(--u-side); }
.t-hoaly .hy-btn--ghost { background: var(--u-surface); color: var(--u-ink); border: 1px solid var(--u-line); }
.t-hoaly .hy-btn--gold { background: var(--u-gold); color: #fff; }
.t-hoaly .hy-btn--block { width: 100%; min-height: 30px; }
.t-hoaly .hy-pill { display: inline-flex; align-items: center; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--hy-soft); color: var(--u-muted); white-space: nowrap; }
.t-hoaly .hy-pill--ok { background: var(--hy-okbg); color: #1e5b3a; }
.t-hoaly .hy-pill--warn { background: var(--hy-warnbg); color: var(--u-warn); }
.t-hoaly .hy-pill--bad { background: var(--hy-badbg); color: var(--hy-bad); }
.t-hoaly .hy-pill--dark { background: var(--u-accent); color: #f3efe6; }
.t-hoaly .hy-chips { display: flex; gap: 5px; }
.t-hoaly .hy-chips span { border-radius: 999px; padding: 5px 10px; font-weight: 700; font-size: 10px; background: var(--hy-soft); color: var(--u-ink); white-space: nowrap; }
.t-hoaly .hy-chips span.on { background: var(--u-accent); color: #f3efe6; }
.t-hoaly .hy-rows { display: grid; }
.t-hoaly .hy-rows > div { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 0; border-top: 1px solid var(--u-line); font-weight: 600; font-size: 10.5px; line-height: 1.3; min-width: 0; }
.t-hoaly .hy-rows > div:first-child { border-top: 0; }
.t-hoaly .hy-rows .grow { flex: 1; min-width: 0; }
.t-hoaly .hy-rows .hy-chev { color: var(--u-muted); font-size: 12px; display: inline-flex; }
.t-hoaly .hy-ic { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--hy-soft); color: var(--u-accent); flex: none; font-size: 13px; }
.t-hoaly .hy-ic--warn { background: var(--hy-warnbg); color: var(--u-warn); }
.t-hoaly .hy-ic--bad { background: var(--hy-badbg); color: var(--hy-bad); }
.t-hoaly .hy-ic--ok { background: var(--hy-okbg); color: #1e5b3a; }
.t-hoaly .hy-hero { background: var(--u-side); color: #f3efe6; border-radius: 14px; padding: 11px 12px; display: grid; gap: 4px; }
.t-hoaly .hy-hero small { color: color-mix(in srgb, #f3efe6 78%, transparent); font-size: 10px; }
.t-hoaly .hy-hero b { color: #f3efe6; }
.t-hoaly .hy-big { font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--u-ink); }
.t-hoaly .hy-hero .hy-big { color: #f3efe6; }
.t-hoaly .hy-num { font-variant-numeric: tabular-nums; }
.t-hoaly .hy-muted { color: var(--u-muted); }
.t-hoaly .hy-cats { display: grid; gap: 7px; }
.t-hoaly .hy-cats > div { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 3px 7px; align-items: center; font-size: 11px; font-weight: 700; }
.t-hoaly .hy-cats .dot { width: 8px; height: 8px; border-radius: 3px; background: var(--c); }
.t-hoaly .hy-cats .bar { grid-column: 1 / -1; height: 6px; border-radius: 4px; background: var(--hy-soft); overflow: hidden; }
.t-hoaly .hy-cats .bar i { display: block; height: 100%; width: var(--w); background: var(--c); border-radius: 4px; }
.t-hoaly .hy-stack { display: flex; height: 9px; border-radius: 5px; overflow: hidden; gap: 2px; }
.t-hoaly .hy-stack i { flex: var(--f); background: var(--c); }
.t-hoaly .hy-quorum { position: relative; height: 14px; border-radius: 7px; background: var(--hy-soft); overflow: visible; }
.t-hoaly .hy-quorum i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; }
.t-hoaly .hy-quorum .line { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--u-ink); border-radius: 1px; }
.t-hoaly .hy-check { width: 15px; height: 15px; border-radius: 5px; border: 1.5px solid var(--u-line); flex: none; display: grid; place-items: center; color: #fff; font-size: 10px; }
.t-hoaly .hy-check.on { background: var(--u-ok); border-color: var(--u-ok); }
.t-hoaly .hy-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.t-hoaly .hy-tiles > div { background: var(--u-surface); border: 1px solid var(--u-line); border-radius: 12px; padding: 9px; display: grid; gap: 5px; font-weight: 700; font-size: 10.5px; position: relative; }
.t-hoaly .hy-tiles .hy-pill { position: absolute; top: 8px; right: 8px; }
.t-hoaly .hy-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.t-hoaly .hy-col { display: grid; gap: 10px; min-width: 0; }
.t-hoaly .hy-spark { display: flex; align-items: end; gap: 3px; height: 46px; }
.t-hoaly .hy-spark i { flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px; background: var(--c, #5aa58f); }
.phone .t-hoaly .hy-tabs { flex: none; display: flex; justify-content: space-around; padding: 7px 4px 13px; border-top: 1px solid var(--u-line); background: color-mix(in srgb, #fff 96%, transparent); font-size: 8.5px; font-weight: 700; color: var(--u-muted); }
.phone .t-hoaly .hy-tabs span { display: grid; justify-items: center; gap: 2px; }
.phone .t-hoaly .hy-tabs svg { width: 15px; height: 15px; }
.phone .t-hoaly .hy-tabs span.on { color: var(--u-accent); }
.phone .t-hoaly .ui-scroll { gap: 8px; padding-top: 4px; }
.phone .t-hoaly .ui-sample { top: auto; bottom: 58px; right: 12px; }
.t-hoaly .hy-main { padding: 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
@media (max-width: 560px) { .t-hoaly .hy-cols { grid-template-columns: minmax(0, 1fr); } .t-hoaly .hy-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t-hoaly .hy-hide-sm { display: none; } }

/* ---------- Run The Deal, look A (2026-10-17): the app's current light look. Warm paper, white cards with soft
   depth, tinted stat tiles, big display numerals, Sage accent, Figtree. Used by tools/work/rtd.mjs (theme t-rtda,
   classes rta-*). The older .t-rtd and .rtd-* rules above are no longer used by any page. ---------- */
.bg-rtd { background: radial-gradient(90% 70% at 15% 0%, #dbe9e2, transparent 70%), radial-gradient(80% 70% at 100% 100%, #efe3cf, transparent 70%), #f5f3ee; }
.t-rtda { --u-bg:#f5f3ee; --u-surface:#fff; --u-ink:#1f2421; --u-text:#3d423e; --u-muted:#5c615d; --u-line:#ebe6dc; --u-side:#1f2421; --u-side-ink:#c8d0cb; --u-accent:#2f6f5e; --u-accent-soft:#e7f0ec; --u-ok:#2e7650; --u-warn:#94600f;
  --u-font: "Figtree", "Geist", ui-sans-serif, system-ui, sans-serif;
  --a-paper2:#faf9f6; --a-sage:#2f6f5e; --a-good:#2e7650; --a-good-bg:#e6f2ea; --a-warn:#94600f; --a-warn-bg:#fbf1dd; --a-bad:#b0412e; --a-bad-bg:#fae9e4;
  --a-teal:#1f6670; --a-terra:#b0573a; --a-terra-soft:#e3b3a0; --a-gold:#8d6823; --a-survey:#c0673f;
  --a-shadow: 0 1px 2px rgba(28,25,20,.04), 0 4px 16px -6px rgba(28,25,20,.1);
  --tone:#2f6f5e; --tint:#e7f0ec; --tink:#1d4a3f; }
.t-rtda [data-tone="sage"] { --tone:#2f6f5e; --tint:#e7f0ec; --tink:#1d4a3f; }
.t-rtda [data-tone="teal"] { --tone:#1f6670; --tint:#e4f0f1; --tink:#17505a; }
.t-rtda [data-tone="terra"] { --tone:#b0573a; --tint:#f8ebe4; --tink:#8a3f26; }
.t-rtda [data-tone="sky"] { --tone:#3d6e98; --tint:#e7f0f8; --tink:#2b5476; }
.t-rtda [data-tone="gold"] { --tone:#8d6823; --tint:#f6efdf; --tink:#6b4f17; }
.t-rtda [data-tone="heather"] { --tone:#6d5a85; --tint:#f0ecf5; --tink:#4f3f66; }
.t-rtda [data-tone="muted"] { --tone:#5c615d; --tint:#efede8; --tink:#4a4f4b; }
.t-rtda [data-tone="none"] { --tone:#e2ded5; }
.t-rtda b, .t-rtda strong { font-weight: 650; }
.t-rtda .pos { color: var(--a-good) !important; }
.t-rtda .neg { color: var(--a-bad) !important; }
.t-rtda .ui-btn { border-radius: 999px; }
.rta-main { padding: 14px 16px 18px; gap: 11px; }
/* Top bar: wordmark, search, pull meter, avatar */
.rta-top { flex: none; display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: color-mix(in srgb, var(--u-bg) 85%, #fff); border-bottom: 1px solid var(--u-line); min-width: 0; }
.rta-wm { font: 650 14px/1 var(--u-font); color: var(--u-ink); white-space: nowrap; letter-spacing: -0.02em !important; }
.rta-search { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; max-width: 260px; height: 26px; padding: 0 10px; border-radius: 999px; background: #fff; border: 1px solid var(--u-line); color: var(--u-muted); font-size: 10px; white-space: nowrap; overflow: hidden; }
.rta-search svg { flex: none; font-size: 12px; }
.rta-meter { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 9.5px; color: var(--u-muted); white-space: nowrap; }
.rta-meter > i { width: 38px; height: 4px; border-radius: 4px; background: var(--u-line); overflow: hidden; display: block; }
.rta-meter > i > i { display: block; height: 100%; background: var(--a-good); }
.rta-av { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 650 10px/1 var(--u-font); font-style: normal; color: #fff; background: linear-gradient(135deg, #2f6f5e, #1f6670); box-shadow: 0 0 0 2px var(--u-bg), 0 0 0 3px color-mix(in srgb, #2f6f5e 40%, transparent); }
.rta-av--sm { width: 18px; height: 18px; font-size: 8.5px; box-shadow: none; }
.rta-top--phone { padding: 6px 14px 8px; background: var(--u-bg); }
.rta-top--phone .rta-wm { font-size: 15px; margin-right: auto; }
.rta-ic { display: grid; place-items: center; font-size: 13px; color: var(--u-ink); }
.rta-left { font-size: 9.5px; color: var(--u-muted); }
/* Deal and project header */
.rta-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rta-head .grow { flex: 1; min-width: 0; }
.rta-head h5 { margin: 2px 0 0; font: 680 17px/1.15 var(--u-font); color: var(--u-ink); letter-spacing: -0.025em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rta-head p { margin: 2px 0 0; font-size: 10px; color: var(--u-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rta-head--sm h5 { font-size: 14px; white-space: normal; }
.rta-crumb { font-size: 9.5px; color: var(--u-muted); }
.rta-crumb span { margin: 0 3px; }
.rta-photo { flex: none; width: 40px; height: 40px; border-radius: 12px; overflow: hidden; box-shadow: var(--a-shadow); display: block; }
.rta-head--sm .rta-photo { width: 34px; height: 34px; border-radius: 10px; }
.rta-photo svg { width: 100%; height: 100%; display: block; }
.rta-selects { display: flex; gap: 6px; }
.rta-select { display: grid; gap: 3px; }
.rta-select small { font-size: 8.5px; font-weight: 650; color: var(--u-muted); }
.rta-select span { min-width: 84px; padding: 6px 9px; border-radius: 10px; background: #fff; border: 1px solid var(--u-line); font-size: 10px; color: var(--u-ink); font-weight: 500; }
/* Pills: page tabs and strategy switches */
.rta-pills { display: flex; gap: 2px; padding: 3px; width: max-content; max-width: 100%; border-radius: 999px; background: color-mix(in srgb, var(--u-ink) 5%, var(--u-bg)); overflow: hidden; white-space: nowrap; }
.rta-pills span { padding: 5px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 550; color: var(--u-muted); }
.rta-pills .on { background: #fff; color: var(--u-ink); font-weight: 650; box-shadow: 0 1px 3px rgba(28,25,20,.1); }
.rta-pills--sm { background: #fff; border: 1px solid var(--u-line); }
.rta-pills--sm span { padding: 4px 9px; font-size: 9.5px; }
.rta-pills--sm .on { background: var(--a-paper2); box-shadow: inset 0 0 0 1px var(--u-line); }
/* The hero card: warm white with a soft sage glow */
.rta-hero { display: grid; gap: 10px; padding: 13px; border-radius: 18px; border: 1px solid var(--u-line); box-shadow: var(--a-shadow); background: radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, #2f6f5e 7%, transparent), transparent 70%), #fff; min-width: 0; }
.rta-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.rta-l { font-size: 10px; font-weight: 550; color: var(--u-text); }
.rta-kick { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; color: var(--a-gold); }
.rta-kick::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.rta-h { margin: 2px 0 0; font: 700 16px/1.15 var(--u-font); color: var(--u-ink); letter-spacing: -0.025em !important; }
.rta-why { margin: 0; font-size: 10.5px; line-height: 1.55; color: var(--u-text); }
.rta-how { font-size: 9.5px; color: var(--u-ink); text-decoration: underline dotted; text-underline-offset: 3px; }
.rta-fine { font-size: 9.5px; line-height: 1.45; color: var(--u-muted); }
/* Display numerals */
.t-rtda .rta-n { display: inline-flex; align-items: baseline; font-family: var(--u-font); font-weight: 650; color: var(--u-ink); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.03em !important; line-height: 1; white-space: nowrap; }
.t-rtda .rta-n .c { font-size: .56em; align-self: flex-start; margin: .08em .06em 0 0; opacity: .75; font-weight: 560; }
.t-rtda .rta-n .u { font-size: .5em; margin-left: .08em; opacity: .7; font-weight: 520; }
.t-rtda .rta-n.xl { font-size: 40px; font-weight: 680; letter-spacing: -0.045em !important; }
.phone .t-rtda .rta-n.xl { font-size: 36px; }
/* Verdict chip */
.rta-vc { display: inline-flex; align-items: center; gap: 5px; width: max-content; padding: 3px 9px 3px 4px; border-radius: 999px; font-size: 10px; font-weight: 650; white-space: nowrap; }
.rta-vc i { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; font-size: 9px; font-style: normal; color: #fff; }
.rta-vc--good { background: var(--a-good-bg); color: var(--a-good); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a-good) 22%, transparent); }
.rta-vc--good i { background: var(--a-good); }
.rta-vc--warn { background: var(--a-warn-bg); color: var(--a-warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a-warn) 25%, transparent); }
.rta-vc--warn i { background: var(--a-warn); }
.rta-vc--bad { background: var(--a-bad-bg); color: var(--a-bad); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a-bad) 22%, transparent); }
.rta-vc--bad i { background: var(--a-bad); }
/* Tinted stat tiles */
.rta-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.phone .rta-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.rta-tile { position: relative; display: grid; gap: 4px; align-content: start; padding: 9px 10px; border-radius: 12px; background: var(--tint); border: 1px solid color-mix(in srgb, var(--tone) 18%, transparent); min-width: 0; overflow: hidden; }
.rta-tile small { font-size: 9.5px; font-weight: 600; color: var(--tink); }
.rta-tile b { font-size: 17px; line-height: 1.05; }
.rta-tile b .rta-n { font-size: 17px; }
.phone .rta-tile { padding: 7px 8px; }
.phone .rta-tile b .rta-n { font-size: 14px; }
.rta-tile em { font-style: normal; font-size: 9px; color: color-mix(in srgb, var(--tink) 80%, var(--u-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rta-spark { position: absolute; right: 8px; top: 22px; width: 46px; height: 16px; }
/* Cards */
.rta-card { display: grid; gap: 8px; padding: 11px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--u-line); box-shadow: var(--a-shadow); min-width: 0; }
.rta-card > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rta-card > header b { font-size: 12px; color: var(--u-ink); }
.rta-card > header > span { font-size: 9.5px; color: var(--u-muted); }
.rta-g { gap: 10px; }
.rta-kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 10px; color: var(--u-text); }
.rta-kv b { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Stress test columns */
.rta-stress { gap: 6px; align-content: start; }
.rta-stress > b { font-size: 11px; }
.rta-bars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: end; height: 108px; }
.rta-bars span { display: grid; justify-items: center; align-content: end; gap: 3px; min-width: 0; }
.rta-bars i { width: 70%; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #d99a85, #f0d2c6); display: block; }
.rta-bars .base i { background: linear-gradient(180deg, #5f6862, #8a928c); }
.rta-bars em { font-style: normal; font-size: 9px; font-weight: 650; color: var(--u-ink); font-variant-numeric: tabular-nums; }
.rta-bars small { font-size: 8px; color: var(--u-muted); white-space: nowrap; }
.rta-bars .base small { color: var(--u-ink); font-weight: 650; }
/* Assumptions banner, ledger */
.rta-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 14px; background: var(--a-warn-bg); border: 1px solid color-mix(in srgb, var(--a-warn) 45%, transparent); font-size: 10.5px; }
.rta-banner b { display: block; font-size: 11px; }
.rta-banner span { color: var(--u-muted); font-size: 9.5px; }
.rta-banner em { font-style: normal; font-weight: 650; color: var(--a-warn); }
.rta-ledger { display: grid; }
.rta-ledger > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--u-line); font-size: 10.5px; color: var(--u-ink); }
.rta-ledger > div:first-child { border-top: 0; }
.rta-ledger b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rta-ledger .rta-total { border-top: 1.5px solid var(--u-ink); padding-top: 9px; font-weight: 650; }
.rta-ledger .rta-total b { font-size: 14px; }
.rta-tag { font-style: normal; font-size: 8.5px; font-weight: 650; margin-left: 4px; }
.rta-tag--yours { color: var(--u-ink); }
.rta-tag--assumed { color: var(--a-warn); }
/* Chips in tones */
.t-rtda .rta-chip { background: var(--tint); color: var(--tink); font-weight: 600; font-size: 9px; padding: 2px 7px; }
/* Sub2 exits */
.rta-exits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.rta-exit { display: grid; gap: 4px; align-content: start; padding: 9px; border-radius: 12px; border: 1px solid var(--u-line); background: var(--a-paper2); min-width: 0; }
.rta-exit small { font-size: 9.5px; font-weight: 600; color: var(--tink); }
.rta-exit b .rta-n { font-size: 16px; }
.rta-exit em { font-style: normal; font-size: 9px; color: var(--u-muted); }
.rta-exit.on { background: var(--tint); border-color: color-mix(in srgb, var(--tone) 35%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone) 14%, transparent); }
.rta-exit .rta-chip { width: max-content; margin-top: 2px; background: #fff; }
/* Comps */
.rta-range { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #efede8 0 10%, #9cc0ba 10% 88%, #efede8 88%); }
.rta-range b { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--a-teal); box-shadow: 0 0 0 3px #fff, 0 1px 4px rgba(0,0,0,.25); }
.rta-range em { position: absolute; top: -4px; width: 2px; height: 16px; border-radius: 2px; background: var(--a-survey); }
.rta-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 9px; color: var(--u-muted); }
.rta-legend span { display: inline-flex; align-items: center; gap: 4px; }
.rta-legend .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.rta-legend .bar { width: 2px; height: 9px; border-radius: 2px; background: var(--a-survey); display: inline-block; }
.rta-ring { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: conic-gradient(var(--a-sage) calc(var(--p) * 1%), #ece8df 0); position: relative; }
.rta-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.rta-ring b { position: relative; font-size: 15px; font-variant-numeric: tabular-nums; }
.rta-ring b small { font-size: 8px; font-weight: 600; }
.rta-mini { display: grid; gap: 2px; padding: 7px 8px; border-radius: 10px; background: #fff; border: 1px solid var(--u-line); min-width: 0; }
.rta-mini small { font-size: 9px; font-weight: 600; color: var(--u-text); }
.rta-mini .rta-n { font-size: 14px; }
.rta-mini em { font-style: normal; font-size: 8.5px; color: var(--u-muted); }
.rta-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 -13px -13px; padding: 10px 13px; border-top: 1px solid var(--u-line); background: var(--a-paper2); border-radius: 0 0 18px 18px; font-size: 10px; color: var(--u-text); }
.rta-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: var(--a-sage); color: #fff; font-size: 10px; font-weight: 650; white-space: nowrap; box-shadow: 0 2px 6px -2px color-mix(in srgb, #2f6f5e 60%, transparent); }
.rta-btn--ghost { background: #fff; color: var(--u-ink); border: 1px solid var(--u-line); box-shadow: none; }
.rta-btn-ghost { border-radius: 999px; height: 28px; font-size: 10px; background: #fff; gap: 5px; }
.rta-map { position: relative; min-height: 190px; border-radius: 16px; overflow: hidden; border: 1px solid var(--u-line); box-shadow: var(--a-shadow); background:
  linear-gradient(90deg, transparent 47%, #fff 47%, #fff 49.5%, transparent 49.5%), linear-gradient(0deg, transparent 31%, #fff 31%, #fff 33%, transparent 33%), linear-gradient(0deg, transparent 69%, #fff 69%, #fff 71%, transparent 71%), linear-gradient(28deg, transparent 58%, #fff 58%, #fff 60%, transparent 60%), linear-gradient(118deg, transparent 22%, #f3f2ef 22%, #f3f2ef 24%, transparent 24%), #e8e7e3; }
.rta-map .ring { position: absolute; left: 50%; top: 56%; width: 72%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px dashed var(--a-sage); background: color-mix(in srgb, #2f6f5e 5%, transparent); }
.rta-map .pin { position: absolute; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--a-sage); border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.25); }
.rta-map .pin--you { background: var(--a-survey); }
.rta-map .pin--off { background: #a9b0aa; width: 9px; height: 9px; margin: -4.5px; }
.rta-legend--map { position: absolute; right: 8px; top: 8px; z-index: 1; padding: 4px 8px; border-radius: 999px; background: #fff; box-shadow: var(--a-shadow); }
.rta-comp { display: grid; gap: 6px; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--u-line); box-shadow: var(--a-shadow); }
.rta-comp .rta-n { font-size: 15px; }
.rta-toggle { width: 22px; height: 13px; border-radius: 999px; background: var(--a-teal); position: relative; display: inline-block; }
.rta-toggle::after { content: ""; position: absolute; right: 2px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
/* Money tab */
.rta-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 12px; background: var(--a-paper2); border: 1px solid var(--u-line); text-align: center; }
.rta-seg span { display: grid; gap: 1px; padding: 6px 4px; border-radius: 9px; font-size: 10.5px; font-weight: 600; color: var(--u-text); }
.rta-seg small { font-size: 8.5px; font-weight: 500; color: var(--u-muted); }
.rta-seg .on { background: var(--u-ink); color: #fff; }
.rta-seg .on small { color: #c8d0cb; }
.rta-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.rta-field { display: grid; gap: 3px; min-width: 0; }
.rta-field small { display: flex; justify-content: space-between; font-size: 9px; font-weight: 600; color: var(--u-ink); }
.rta-field small em { font-style: normal; font-weight: 500; color: var(--u-muted); font-size: 8px; }
.rta-field > span { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 9px; border: 1px solid var(--u-line); background: #fff; font-size: 11px; color: var(--u-ink); }
.rta-field i { font-style: normal; color: var(--u-muted); }
.t-rtda .rta-table td { padding-top: 7px; padding-bottom: 7px; }
.t-rtda .rta-table tr.on td { background: color-mix(in srgb, #2f6f5e 6%, transparent); }
.rta-warnline { font-size: 9.5px; color: var(--a-warn); }
.rta-warnline::before { content: "⚠ "; }
/* Projects */
.rta-alert { padding: 8px 10px; border-radius: 12px; background: var(--a-bad-bg); border: 1px solid color-mix(in srgb, var(--a-bad) 22%, transparent); font-size: 10px; color: var(--a-bad); }
.rta-alert b { color: var(--a-bad); }
.rta-budget { position: relative; height: 12px; border-radius: 999px; background: #efede8; overflow: visible; display: flex; }
.rta-budget i { display: block; height: 100%; border-radius: 999px 0 0 999px; background: linear-gradient(90deg, #4f8a78, #2f6f5e); }
.rta-budget em { display: block; height: 100%; border-radius: 0 999px 999px 0; background: repeating-linear-gradient(135deg, #e3b3a0 0 4px, #f3dcd2 4px 8px); }
.rta-budget b { position: absolute; top: -3px; width: 2px; height: 18px; background: var(--u-ink); border-radius: 2px; }
.rta-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.rta-acts span { display: grid; justify-items: center; gap: 5px; padding: 9px 4px; border-radius: 14px; border: 1px solid var(--u-line); background: #fff; box-shadow: var(--a-shadow); font-size: 9.5px; font-weight: 650; color: var(--u-ink); text-align: center; }
.rta-acts i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: #e7f0ec; color: var(--a-sage); font-size: 12px; }
.rta-acts span:nth-child(3) i { background: #f0ecf5; color: #6d5a85; }
.rta-stack { display: flex; gap: 2px; height: 10px; border-radius: 999px; overflow: hidden; }
.rta-stack i { display: block; height: 100%; background: var(--tone); }
/* Approvals and team */
.rta-appr { display: grid; gap: 6px; padding: 9px 0; border-top: 1px solid var(--u-line); }
.rta-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--a-paper2); border: 1px solid var(--u-line); font-size: 10px; }
.rta-switch > i { flex: none; width: 26px; height: 15px; border-radius: 999px; background: #d6d2c8; position: relative; }
.rta-switch > i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.rta-sheet { background: radial-gradient(90% 90% at 100% 0%, #e7f0ec, transparent 70%), #fff; }
/* Strategy picker */
.rta-group { display: grid; gap: 6px; padding: 9px 10px; border-radius: 14px; background: #fff; border: 1px solid var(--u-line); box-shadow: var(--a-shadow); }
.rta-group > .ui-row b { font-size: 11px; color: var(--tink); }
.rta-count { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--tint); color: var(--tink); font-size: 9px; font-weight: 700; text-align: center; }
.rta-opt { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--u-line); background: var(--a-paper2); font-size: 9.5px; color: var(--u-ink); white-space: nowrap; }
.rta-opt.on { background: var(--u-ink); color: #fff; border-color: var(--u-ink); }
.rta-opt--more { background: transparent; border-style: dashed; color: var(--u-muted); }
/* Phone bottom tabs */
.rta-tabbar { flex: none; display: flex; justify-content: space-around; padding: 6px 4px 12px; border-top: 1px solid var(--u-line); background: color-mix(in srgb, #fff 88%, var(--u-bg)); font-size: 8px; color: var(--u-muted); }
.rta-tabbar span { display: grid; justify-items: center; gap: 2px; }
.rta-tabbar i { display: grid; place-items: center; width: 30px; height: 18px; border-radius: 999px; font-size: 12px; font-style: normal; }
.rta-tabbar .on { color: var(--u-ink); font-weight: 650; }
.rta-tabbar .on i { background: #e7f0ec; color: var(--a-sage); }
@media (max-width: 720px) {
  .rta-split { grid-template-columns: minmax(0, 1fr); }
  .rta-tiles, .rta-exits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rta-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-rtda .rta-n.xl { font-size: 34px; }
  .rta-search { max-width: none; }
}
.t-rtda .pos .rta-n, .t-rtda .neg .rta-n { color: inherit; }
.phone .t-rtda .ui-sample { top: auto; bottom: 60px; right: 12px; }

/* East Coast Mortgage: Eco dock, call list split (recreations, sample data) */
.t-ecm .ecm-dockwrap { display: grid; grid-template-columns: minmax(0, 1fr) 250px; min-width: 0; }
.t-ecm .ecm-dock { background: var(--u-surface); border-left: 1px solid var(--u-line); padding: 14px 12px 44px; display: grid; gap: 9px; align-content: start; min-width: 0; }
.t-ecm .ecm-dock > header { display: flex; align-items: center; gap: 7px; }
.t-ecm .ecm-dock > header .chip { margin-left: auto; }
.t-ecm .ecm-wave { width: 18px; height: 18px; color: var(--u-accent); flex: none; }
.t-ecm .ecm-msg { display: grid; gap: 7px; padding: 9px 10px; border-radius: 10px; background: var(--u-bg); font-size: 11px; min-width: 0; }
.t-ecm .ecm-msg .ui-list > div { padding: 5px 0; }
.t-ecm .ecm-msg .ui-btn { height: 24px; padding: 0 9px; font-size: 10.5px; }
.t-ecm .ecm-msg--me { justify-self: end; max-width: 88%; background: var(--u-ink); color: #fff; border-bottom-right-radius: 4px; }
.t-ecm .ecm-msg--draft { background: var(--u-accent-soft); }
.t-ecm .ecm-msg--draft small { color: var(--u-muted); font-size: 10px; }
.t-ecm .ecm-ask { display: flex; align-items: center; gap: 8px; border: 1px solid var(--u-line); border-radius: 9px; padding: 7px 9px; color: var(--u-muted); font-size: 11px; }
.t-ecm .ecm-ask .grow { flex: 1; }
.t-ecm .ecm-ask kbd { font: 500 9.5px/1 var(--mono); border: 1px solid var(--u-line); border-radius: 4px; padding: 3px 4px; }
.t-ecm .ecm-split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 10px; }
.t-ecm .ecm-split .ui-list > div { align-items: center; }
.t-ecm .ecm-split .ui-list .grow { white-space: normal; line-height: 1.35; }
.t-ecm .ecm-count { display: flex; align-items: baseline; gap: 8px; }
.t-ecm .ecm-count b { font-size: 26px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.t-ecm .ecm-count span { color: var(--u-muted); font-size: 10.5px; }
.t-ecm .ecm-bar { height: 6px; border-radius: 99px; background: var(--u-line); overflow: hidden; }
.t-ecm .ecm-bar i { display: block; height: 100%; background: var(--u-accent); border-radius: inherit; }
@media (max-width: 720px) {
  .t-ecm .ecm-dockwrap, .t-ecm .ecm-split { grid-template-columns: minmax(0, 1fr); }
  .t-ecm .ecm-dock { border-left: 0; }
}