/* Trial Edge, business view (/trial-edge/journey): the use-case lifecycle for business users.
   Builds on trial-edge.css (header, buttons, pills, tokens). */

/* ---- navy theme: the business view only; the technical view keeps the orange brand ----
   One OKLCH hue (264) for the whole ramp; lightness steps down evenly, chroma peaks mid-ramp and tapers at both
   ends; every step fits sRGB without chroma loss. Contrast (WCAG), light theme: white on 800 = 12.3:1,
   700 on white = 9.4:1, 700 on 50 = 8.8:1, 950 titles on white = 17.9:1, grey chart fill on white = 3.1:1. */
.tj {
  --tj-navy-50: oklch(97.5% 0.012 264); --tj-navy-100: oklch(94.5% 0.026 264); --tj-navy-200: oklch(89% 0.05 264);
  --tj-navy-300: oklch(80% 0.085 264);  --tj-navy-400: oklch(66% 0.14 264);    --tj-navy-500: oklch(55% 0.18 264);
  --tj-navy-600: oklch(47% 0.165 264);  --tj-navy-700: oklch(40% 0.14 264);    --tj-navy-800: oklch(33.5% 0.115 264);
  --tj-navy-900: oklch(27% 0.085 264);  --tj-navy-950: oklch(21% 0.06 264);
  /* neutrals for the slides, tinted with the same hue so greys sit with the navy instead of beside it */
  --tj-ink: oklch(25% 0.03 264); --tj-ink-2: oklch(47% 0.03 264); --tj-rule: oklch(95% 0.008 264); --tj-mute-fill: oklch(64% 0.025 264);

  --surface-selected: var(--tj-navy-50); --surface-brand: var(--tj-navy-800); --surface-brand-subtle: var(--tj-navy-50);
  --text-brand: var(--tj-navy-700); --text-on-brand: #fff;
  --text-link: var(--tj-navy-700); --text-link-hover: var(--tj-navy-900);
  --border-brand: var(--tj-navy-600); --border-focus: var(--tj-navy-600);
  --focus-ring: 0 0 0 3px oklch(47% 0.165 264 / .3);
  --tj-hero: linear-gradient(120deg, var(--tj-navy-950), var(--tj-navy-800) 60%, var(--tj-navy-600));
  --tj-hero: linear-gradient(in oklch 120deg, var(--tj-navy-950), var(--tj-navy-800) 60%, var(--tj-navy-600));

  /* SupportFlo design system (Stitch "SupportFlo UI Design System"): the brand steps pinned to its exact values,
     its neutrals and status ink (the DS ramps, with warning one step darker for AA on its tint), and the guide
     voice in AE orange. Light theme only; dark keeps the ramp above. */
  --tj-navy-50: #eef0f8; --tj-navy-800: #1f2d6b; --tj-navy-900: #16214f;
  --surface-page: #f5f6fa; --surface-sunken: #eef1f5;
  --border-subtle: #eef1f5; --border-default: #e3e6ee; --border-strong: #c9cfda;
  --text-strong: #121826; --text-body: #2b3443; --text-muted: #5f6d7c;
  --status-warning-fg: #9a6406;
  --tj-accent: var(--ae-orange-500);
  --tj-guide-bg: var(--ae-orange-50); --tj-guide-border: #fbd5b5; --tj-guide-label: var(--ae-orange-800);
  --tj-shadow-card: 0 1px 2px rgb(18 24 38 / .04), 0 1px 3px rgb(18 24 38 / .03);
  /* the type scale: headline xl / lg / md / sm, body lg / md / sm, label sm, metric */
  --tj-fs-display: 2rem; --tj-fs-h1: 1.5rem; --tj-fs-h2: 1.25rem; --tj-fs-h3: 1rem;
  --tj-fs-lead: 1rem; --tj-fs-body: .875rem; --tj-fs-small: .8125rem; --tj-fs-label: .75rem; --tj-fs-metric: 1.75rem;
  --fs-xs: var(--tj-fs-label); --fs-sm: var(--tj-fs-small); --fs-md: var(--tj-fs-body); --fs-lg: var(--tj-fs-lead);
  --fs-xl: var(--tj-fs-h1);
}
/* dark theme: a lighter step carries the brand on the dark page (white on 600 = 7.1:1, 300 text = 9.7:1) */
[data-theme="dark"] .tj {
  --surface-page: var(--ae-neutral-950); --surface-sunken: #0b0f14;
  --border-subtle: rgba(255,255,255,.07); --border-default: rgba(255,255,255,.13); --border-strong: rgba(255,255,255,.24);
  --text-strong: #f6f8fa; --text-body: #d3dae1; --text-muted: #b3bec9; --status-warning-fg: #ecb448;
  --tj-guide-bg: rgba(245,135,60,.1); --tj-guide-border: rgba(245,135,60,.32); --tj-guide-label: var(--ae-orange-300);
  --tj-shadow-card: none;
  --surface-selected: oklch(55% 0.18 264 / .16); --surface-brand: var(--tj-navy-600); --surface-brand-subtle: oklch(55% 0.18 264 / .12);
  --text-brand: var(--tj-navy-300); --text-link: var(--tj-navy-300); --text-link-hover: var(--tj-navy-200);
  --border-brand: var(--tj-navy-400); --border-focus: var(--tj-navy-400); --focus-ring: 0 0 0 3px oklch(66% 0.14 264 / .4);
}
/* hover is derived from the brand, not a second hand-picked colour: one step deeper (fallback first) */
.tj .te-btn--primary:hover, .tj a.te-btn--primary:hover {
  background: var(--tj-navy-900); border-color: var(--tj-navy-900); color: #fff;
  background: oklch(from var(--surface-brand) calc(l - 0.06) c h); border-color: oklch(from var(--surface-brand) calc(l - 0.06) c h);
}
.tj .te-tag.is-brand { background: var(--surface-brand-subtle); color: var(--text-brand); border-color: transparent; }

.tj-page { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 16px var(--gap-6) var(--gap-6); }

/* ---- start (upload) ---- */
.tj-start { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--gap-8); align-items: start; }
.tj-start__title { margin: 8px 0 12px; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.15; color: var(--text-strong); }
/* the headline: the pain in a few words, then SupportFlo as the answer */
.tj-start__pain { display: block; color: oklch(60% 0.19 45); }
.tj-start__answer { display: block; margin-top: 10px; font-size: .62em; font-weight: 600; line-height: 1.3; }
.tj-start__sub { margin: 0 0 var(--gap-5); font-size: var(--fs-lg, 1.1rem); line-height: 1.55; color: var(--text-body); }
.tj-mini { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--text-muted); }
.tj-mini b { color: var(--text-strong); }
.tj-form { padding: var(--gap-6); display: grid; gap: var(--gap-4); }
.tj-form .te-h2 { margin: 0; }
.tj-form__lead { margin: -8px 0 0; }
.tj-sent { justify-items: start; }
.tj-sent > span:first-child .te-ico { width: 30px; height: 30px; color: var(--text-brand); }
.tj-sent p { margin: 0; }
.tj-linkbtn { padding: 0; border: 0; background: none; font: inherit; color: var(--text-link); text-decoration: underline; cursor: pointer; }
.tj-linkbtn:hover { color: var(--text-link-hover); }
.tj-form input[readonly] { background: var(--surface-sunken); color: var(--text-strong); }

/* the way in: a navy welcome panel beside the sign-in (or upload) card, the same palette as the journey */
.tj-start { min-height: calc(100vh - 180px); align-items: stretch; }
.tj-start__copy { display: grid; align-content: center; gap: 4px; padding: 40px 44px; border-radius: var(--r-lg);
  background: var(--tj-hero); color: #fff; }
.tj-start__copy .te-eyebrow, .tj-start__copy .te-eyebrow .te-ico { color: var(--tj-navy-200); }
.tj .tj-start__copy .tj-start__title { color: #fff; }
.tj-start__copy .tj-start__sub { color: oklch(100% 0 0 / .85); }
.tj-start__copy .tj-mini { list-style: none; padding: 0; gap: 10px; color: oklch(100% 0 0 / .8); }
.tj-start__copy .tj-mini li { display: flex; align-items: center; gap: 10px; }
.tj-start__copy .tj-mini li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tj-navy-300); }
.tj-start__copy .tj-mini b { color: #fff; }
.tj-start > .tj-form { align-self: center; }
.tj-mine { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); }
.tj-mine__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tj-mine__title { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: var(--fs-lg); color: var(--text-strong); }
.tj-mine__title .te-ico { width: 22px; height: 22px; color: var(--text-brand); }
/* a row: calendar tile, date and what it holds, then a badge (ready) or an Open button */
.tj-mine__row { display: flex; align-items: center; gap: 14px; padding: 10px 12px;
  border-radius: var(--r-md); border: 1px solid var(--border-subtle); color: inherit; text-decoration: none; }
.tj-mine__row:hover { border-color: var(--border-brand); background: var(--surface-selected); }
.tj-mine__ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md);
  background: var(--surface-brand-subtle); color: var(--text-brand); }
.tj-mine__ico .te-ico { width: 20px; height: 20px; }
.tj-mine__words { flex: 1; display: grid; min-width: 0; }
.tj-mine__row b { font-size: var(--fs-md); color: var(--text-strong); }
.tj-mine__row small { font-size: var(--fs-sm); color: var(--text-muted); }
.tj-mine__tag { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--r-md);
  border: 1px solid var(--border-brand); background: var(--surface-brand-subtle); color: var(--text-brand); font-weight: 600; font-size: var(--fs-sm); }
.tj-mine__tag .te-ico { width: 16px; height: 16px; }
.tj-mine__tag.is-ready { border-color: transparent; border-radius: var(--radius-pill); background: oklch(94% .05 150); color: oklch(42% .12 150); }
.tj-mine__tag.is-ready .te-ico { color: #fff; fill: oklch(58% .15 150); stroke: #fff; }
.tj-mine__new { margin-top: 6px; }
.tj-start__trust { display: flex; gap: 8px; align-items: flex-start; margin: 18px 0 0; font-size: var(--fs-sm); color: oklch(100% 0 0 / .8); }
.tj-start__trust .te-ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--tj-navy-200); }
.te-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.tj-signin .te-field label span[aria-hidden] { color: var(--status-danger-fg, #b42318); }
.tj-consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-body); cursor: pointer; }
.tj-consent input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--surface-brand); }
.tj-consent a { color: var(--text-link); }
@media (max-width: 760px) { .te-grid2 { grid-template-columns: 1fr; } }
.tj-signin__head { display: flex; gap: 14px; align-items: flex-start; }
.tj-signin__badge { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface-selected); color: var(--text-brand); }
.tj-signin__badge .te-ico { width: 20px; height: 20px; }
.tj-signin__head .te-h2 { margin: 0 0 4px; }
.tj-signin__head .tj-form__lead { margin: 0; }
.tj-signin__foot { margin: 0; padding-top: 12px; border-top: 1px solid var(--border-subtle); font-size: var(--fs-sm); color: var(--text-muted); text-align: center; }
/* the admin bar (admins only): summary line, then build stages, AI cost per step and the operator tools */
.tj-admin { margin-bottom: 12px; border-radius: var(--r-lg); border: 1px dashed var(--border-brand); background: var(--surface-selected); }
.tj-admin__sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 16px; cursor: pointer;
  font-size: var(--fs-sm); list-style: none; }
.tj-admin__sum::-webkit-details-marker { display: none; }
.tj-admin__sum::after { content: "Details ▾"; margin-left: auto; color: var(--text-link); font-weight: 600; }
.tj-admin[open] .tj-admin__sum::after { content: "Hide ▴"; }
.tj-admin__sum b { color: var(--text-brand); }
.tj-admin__fig { font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.tj-admin__body { display: grid; gap: 12px; padding: 4px 16px 14px; }
.tj-admin__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.tj-admin__stages { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; font-size: var(--fs-sm); }
.tj-admin__stages li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 6px; background: var(--surface-card); }
.tj-admin__stages li span { color: var(--text-muted); }
.tj-admin__stages li.is-done span { color: var(--status-success-fg); }
.tj-admin__stages li.is-failed span { color: var(--status-warning-fg); font-weight: 700; }
.tj-admin__stages li.is-running span { color: var(--status-info-fg); font-weight: 600; }
.tj-admin__cost { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: var(--fs-sm); background: var(--surface-card); border-radius: 6px; }
.tj-admin__cost th, .tj-admin__cost td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--border-subtle); }
.tj-admin__cost th { color: var(--text-muted); font-weight: 600; }
.tj-admin__cost td:not(:first-child), .tj-admin__cost th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.tj-admin__note { margin: 0; font-size: var(--fs-sm); color: var(--text-body); }
@media (max-width: 900px) { .tj-admin__cols { grid-template-columns: 1fr; } }
.tj-costs { border-top: 1px solid var(--border-subtle); padding-top: 10px; }
.tj-costs summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--text-link); list-style: none; }
.tj-costs summary::-webkit-details-marker { display: none; }
.tj-costs summary::before { content: "+ "; }
.tj-costs[open] summary::before { content: "− "; }
.tj-costs summary span { font-weight: 400; color: var(--text-muted); }
.tj-costs .te-help { margin: 8px 0 10px; }
.tj-who { font-size: var(--fs-sm); color: var(--text-muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- the journey: a slim stepper (circle, label, connector), like a checkout progress bar ---- */
/* light theme: each stage a soft pill (navy icon disc, title, status chip), joined by a link that is green with a
   tick after a finished stage and blue with an open ring before one still to come */
.tj-stages { list-style: none; margin: 0 0 14px; padding: 10px; display: flex; align-items: center;
  border-radius: var(--r-xl, 20px); border: 1px solid oklch(93% .015 262); background: oklch(99.2% .004 262);
  box-shadow: 0 1px 3px oklch(40% .05 262 / .06); }
.tj-stage { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.tj-stage:first-child { flex: 0 1 auto; }
/* the link: a thin line with its marker centred on it (absolute, so the marker never drops below the line) */
.tj-stage__link { flex: 1 1 28px; min-width: 28px; height: 2px; margin: 0 4px; position: relative;
  border-radius: 1px; background: oklch(86% .04 262); }
.tj-stage__link.is-done { background: oklch(82% .09 150); }
.tj-stage__knot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; box-shadow: inset 0 0 0 2px oklch(75% .08 262); }
.tj-stage__link.is-done .tj-stage__knot { background: oklch(93% .06 150); box-shadow: inset 0 0 0 1.5px oklch(78% .11 150); color: oklch(52% .14 150); }
.tj-stage__knot .te-ico { width: 11px; height: 11px; stroke-width: 3; }
.tj-stage__btn { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 16px 8px 8px;
  border: 1px solid transparent; border-radius: var(--radius-pill, 999px); background: oklch(97% .012 262); color: var(--text-body);
  font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.tj-stage__btn:hover { border-color: oklch(88% .04 262); background: oklch(96% .018 262); }
.tj-stage__btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.tj-stage.is-open .tj-stage__btn { background: #fff; border-color: oklch(80% .07 262); box-shadow: 0 2px 8px oklch(45% .1 262 / .12); }
/* the icon: a soft tint disc with a brand-coloured glyph */
.tj-stage__badge { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: oklch(92% .035 262); color: var(--text-brand); }
.tj-stage.is-open .tj-stage__badge { background: var(--surface-brand); color: #fff; }
.tj-stage__badge .te-ico { width: 20px; height: 20px; }
.tj-stage__text { display: grid; gap: 3px; justify-items: start; min-width: 0; line-height: 1.25; }
.tj-stage__text b { color: var(--text-strong); font-size: var(--fs-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tj-stage__chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 6px; border-radius: var(--radius-pill, 999px);
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; background: oklch(95% .005 262); color: var(--text-muted); }
.tj-stage__chip .te-ico { width: 14px; height: 14px; }
.tj-stage.is-done .tj-stage__chip { background: oklch(96% .03 150); color: oklch(48% .12 150); }
.tj-stage.is-done .tj-stage__chip .te-ico { fill: oklch(68% .14 150); stroke: #fff; }
.tj-stage.is-active .tj-stage__chip { background: oklch(95% .025 262); color: var(--text-brand); }
.tj-stage.is-attention .tj-stage__chip { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.tj-stage__spin { width: 14px; height: 14px; border-radius: 50%; border: 2px dotted currentColor; animation: tj-spin 1.6s linear infinite; }
@keyframes tj-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tj-stage__spin { animation: none; } }

/* ---- the proposal view: slides on the left, the proposal and the trial clock on the right ---- */
.tj-proposal { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.tj-proposal__main { display: grid; gap: 10px; min-width: 0; padding: 12px 16px 10px; border-radius: var(--r-lg);
  border: 1px solid var(--border-default); background: var(--surface-card); }
.tj-proposal__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.tj-proposal__title { margin: 0; font-size: var(--tj-fs-h2); line-height: 1.25; color: var(--text-strong); }
.tj-proposal__head .te-muted { margin: 0; }
.tj-proposal__side { display: grid; gap: 10px; position: sticky; top: 16px; }
.tj-side__block { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--border-default);
  background: var(--surface-card); }
.tj-side__block--plain { padding: 0 2px; gap: 6px; border: 0; background: none; justify-items: center; }
.tj-side__block--plain .te-btn { justify-self: stretch; }
.tj-side__label { margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.tj-side__eta { margin: 0; font-size: var(--tj-fs-h2); font-weight: 700; line-height: 1.25; color: var(--text-brand); }
.tj-side__text { margin: -6px 0 0; font-size: var(--fs-sm); }
.tj-side__block > .tj-side__text:last-child { margin: 0; }
.tj-side__progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; font-size: var(--fs-sm);
  font-weight: 600; color: var(--text-strong); }
.tj-miles { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 0; }
.tj-mile { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding-bottom: 9px; }
.tj-mile:last-child { padding-bottom: 0; }
.tj-mile:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--border-default); }
.tj-mile.is-done:not(:last-child)::before { background: var(--surface-brand); }
.tj-mile__dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunken);
  box-shadow: inset 0 0 0 2px var(--border-default); }
.tj-mile__dot .te-ico { width: 12px; height: 12px; }
.tj-mile.is-done .tj-mile__dot { background: var(--surface-brand); color: #fff; box-shadow: none; }
.tj-mile.is-active .tj-mile__dot { background: var(--surface-card); box-shadow: inset 0 0 0 2px var(--surface-brand); }
.tj-mile.is-active .tj-mile__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--surface-brand);
  animation: tj-pulse 1.6s ease-in-out infinite; }
@keyframes tj-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tj-mile.is-active .tj-mile__dot::after { animation: none; } }
.tj-mile__text { display: grid; gap: 1px; padding-top: 1px; }
.tj-mile__text b { font-size: var(--fs-sm); color: var(--text-strong); }
.tj-mile__text small { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }
.tj-mile.is-waiting .tj-mile__text b { color: var(--text-muted); font-weight: 600; }

/* headline numbers above the slides */
.tj-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tj-stat { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; padding: 8px 12px;
  border-radius: var(--r-md); background: var(--surface-selected); }
.tj-stat b { font-size: var(--tj-fs-h2); line-height: 1.2; color: var(--text-brand); }
.tj-stat span { font-size: var(--fs-xs); color: var(--text-body); }
.tj-stat small { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--text-muted); }

/* ---- the track: stages 1-4 (minutes), then 5-8 inside the promised trial window ---- */
.tj-proposal > .tj-track, .tj-proposal > .tj-track-bar { grid-column: 1 / -1; }
.tj-track { display: grid; grid-template-columns: 3fr 3.4fr 1fr; gap: 14px; align-items: end; padding: 14px 16px; border-radius: var(--r-lg);
  border: 1px solid var(--border-default); background: var(--surface-card); position: relative; }
/* the person closes the track (x, top right) and gets a slim bar to open it again */
.tj-track__close { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 28px; height: 28px;
  padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; }
.tj-track__close:hover { background: var(--surface-brand-subtle); color: var(--text-brand); }
.tj-track__close:focus-visible, .tj-track-bar:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tj-track-bar { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; border-radius: var(--r-lg);
  border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-brand); font: inherit;
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer; text-align: left; }
.tj-track-bar:hover { border-color: var(--border-brand); }
.tj-track-bar .te-ico:last-child { margin-left: auto; transform: rotate(90deg); }
/* the admin hid the track from the client: the admin still sees it, faded and labelled */
.tj-track.is-hidden-for-client { opacity: .55; border-style: dashed; }
.tj-track.is-hidden-for-client::before { content: "Hidden from the client"; position: absolute; top: 6px; left: 16px;
  font-size: 12px; font-weight: 600; color: var(--text-muted); }
.tj-track__group { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tj-track__group--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tj-track__group--1 { grid-template-columns: 1fr; }
.tj-track__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tj-track__chip { padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; background: var(--surface-card);
  border: 1px solid var(--border-default); color: var(--text-muted); }
.tj-track__chip.is-time { border-color: var(--status-warning-border, #f0c36d); background: var(--status-warning-bg); color: var(--status-warning-fg);
  font-variant-numeric: tabular-nums; }
.tj-track__chip.is-ok { border-color: var(--status-success-border, transparent); background: var(--status-success-bg); color: var(--status-success-fg); }
.tj-countdown { display: grid; gap: 0; }
.tj-countdown span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.tj-countdown__time { font-size: var(--tj-fs-metric); line-height: 1.1; font-weight: 700; color: var(--text-brand); font-variant-numeric: tabular-nums;
  letter-spacing: .02em; }
.tj-track__step { position: relative; min-width: 0; }
.tj-track__step + .tj-track__step::before { content: ""; position: absolute; top: 15px; left: calc(-50% + 18px); right: calc(50% + 18px);
  height: 2px; background: var(--border-default); }
.tj-track__step.is-done + .tj-track__step::before, .tj-track__step.is-done + .tj-track__step.is-active::before { background: var(--surface-brand); }
.tj-track__btn { display: grid; justify-items: center; gap: 6px; width: 100%; padding: 0 4px; border: 0; background: none; font: inherit;
  color: inherit; text-align: center; }
button.tj-track__btn { cursor: pointer; }
button.tj-track__btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 8px; }
.tj-track__dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--surface-sunken); color: var(--text-muted); box-shadow: inset 0 0 0 2px var(--border-default); }
.tj-track__dot .te-ico { width: 15px; height: 15px; }
.tj-track__step.is-done .tj-track__dot { background: var(--surface-brand); color: #fff; box-shadow: none; }
.tj-track__step.is-active .tj-track__dot { background: var(--surface-card); color: var(--text-brand); box-shadow: inset 0 0 0 2px var(--surface-brand), 0 0 0 4px var(--surface-selected); }
.tj-track__step.is-open .tj-track__words b { color: var(--text-brand); text-decoration: underline; text-underline-offset: 3px; }
.tj-track__words { display: grid; gap: 1px; min-width: 0; }
.tj-track__words b { font-size: var(--fs-xs); font-weight: 700; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-track__words small { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.tj-track__step.is-active .tj-track__words small { color: var(--text-brand); font-weight: 600; }
.tj-track__window { display: grid; gap: 8px; padding: 8px 10px 4px; border-radius: 12px; border: 1px dashed var(--border-brand);
  background: var(--surface-selected); }
.tj-track__window.is-done { border-style: solid; border-color: var(--status-success-border, var(--border-brand)); }
.tj-track__tag { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em;
  color: var(--text-brand); }
.tj-track__tag .te-ico { width: 13px; height: 13px; }

/* ---- the executive numbers above the tabs ---- */
.tj-kpicards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tj-kpicard { display: grid; gap: 2px; align-content: start; padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid var(--border-subtle); background: var(--surface-card); box-shadow: 0 1px 2px oklch(21% 0.06 264 / .06); }
.tj-kpicard b { font-size: var(--tj-fs-h1); line-height: 1.15; color: var(--tj-navy-800); font-variant-numeric: tabular-nums; }
[data-theme="dark"] .tj-kpicard b { color: var(--tj-navy-300); }
.tj-kpicard span { font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); }
.tj-kpicard small { font-size: var(--fs-xs); color: var(--text-muted); }
.tj-kpicard[title] { cursor: default; }   /* the formula shows as the browser tooltip; a normal pointer, not "help" */
/* the business case's main result, in one sentence above the tiles */
.tj-headline { margin: 0; font-size: var(--tj-fs-h3); font-weight: 600; line-height: 1.4; color: var(--text-strong); }

/* ---- seed data: the test people as cards ---- */
.tj-seedbar { display: flex; align-items: flex-start; gap: 12px; }
.tj-seedbar .tj-note { flex: 1; }
.tj-personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.tj-persona { display: grid; gap: 10px; align-content: start; justify-items: start; padding: 14px; border-radius: var(--r-lg);
  border: 1px solid var(--border-default); background: var(--surface-card); }
.tj-persona__top { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; width: 100%; }
.tj-persona__avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--surface-selected); color: var(--text-brand); }
.tj-persona__top div { display: grid; min-width: 0; }
.tj-persona__top b { color: var(--text-strong); }
.tj-persona__top small { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tj-persona__try { margin: 0; font-size: var(--fs-sm); color: var(--text-body); }

/* ---- upload: the chosen file, confirmed ---- */
.tj-filecheck { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 8px 12px; border-radius: var(--r-md);
  background: var(--status-success-bg); color: var(--status-success-fg); font-size: var(--fs-sm); font-weight: 600; }
.tj-filecheck .te-ico { width: 15px; height: 15px; flex: none; }
.tj-side__now { margin: -2px 0 0; font-size: var(--fs-sm); color: var(--text-body); }

@media (max-width: 1100px) {
  .tj-track { grid-template-columns: 1fr; }
  .tj-kpicards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .tj-track__words small { display: none; }
  .tj-track__words b { font-size: 10px; white-space: normal; }
}

/* the proposal's tabs: presentation, use cases, sample data, your apps */
.tj-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-default); overflow-x: auto; scrollbar-width: none; }
.tj-tab { position: relative; display: flex; align-items: baseline; gap: 6px; padding: 8px 12px 10px; border: 0; background: none;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); white-space: nowrap; cursor: pointer; }
.tj-tab small { font-size: var(--fs-xs); font-weight: 500; color: var(--text-subtle, var(--text-muted)); }
.tj-tab:hover { color: var(--text-strong); }
.tj-tab:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; border-radius: var(--r-sm, 6px); }
.tj-tab[aria-selected="true"] { color: var(--text-brand); }
.tj-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--surface-brand); }
.tj-tab__body { display: grid; gap: 14px; min-width: 0; }
.tj-tab__body > .tj-panel__head .te-h2 { font-size: var(--tj-fs-h3); }

/* the use cases tab: expandable rows */
.tj-ucs { display: grid; gap: 8px; }
.tj-uc { border-radius: var(--r-md); border: 1px solid var(--border-default); background: var(--surface-card); }
.tj-uc[open] { border-color: var(--border-brand); }
.tj-uc__sum { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.tj-uc__sum::-webkit-details-marker { display: none; }
.tj-uc__sum::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted); transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.tj-uc[open] .tj-uc__sum::after { transform: rotate(-135deg) translateY(-2px); }
.tj-uc__name { display: grid; margin-right: auto; min-width: 0; }
.tj-uc__name b { color: var(--text-strong); }
.tj-uc__name small { font-size: var(--fs-xs); color: var(--text-muted); }
.tj-uc__value { font-weight: 700; color: var(--text-brand); white-space: nowrap; }
.tj-uc__body { display: grid; gap: 10px; padding: 0 14px 14px; }
.tj-uc__body ol { margin: -4px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: var(--fs-sm); }
.tj-uc__control { display: flex; gap: 8px; margin: 0; font-size: var(--fs-sm); }
.tj-uc__control .te-ico { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--status-success-fg); }

/* the AI agents tab: one card per agent, with how a request flows through it */
.tj-agentcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.tj-agentcard { display: grid; gap: 12px; align-content: start; justify-items: start; padding: 14px 16px; border-radius: var(--r-lg);
  border: 1px solid var(--border-default); background: var(--surface-card); }
.tj-agentcard.is-live { border-top: 3px solid var(--surface-brand); }
.tj-agentcard__top { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: start; width: 100%; }
.tj-agentcard__top > .te-ico { width: 18px; height: 18px; margin-top: 2px; color: var(--text-brand); }
.tj-agentcard__top div { display: grid; min-width: 0; }
.tj-agentcard__top b { color: var(--text-strong); }
.tj-agentcard__top small { font-size: var(--fs-xs); color: var(--text-muted); }
.tj-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.tj-flow li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: var(--fs-xs);
  background: var(--surface-page); border: 1px solid var(--border-subtle); color: var(--text-body); }
.tj-flow li .te-ico { width: 12px; height: 12px; color: var(--text-brand); }
.tj-flow li.is-you { background: var(--surface-selected); border-color: var(--border-brand); color: var(--text-brand); font-weight: 600; }
/* the arrow trails each step, so a wrapped line never starts with one */
.tj-flow li:not(:last-child)::after { content: "→"; position: absolute; right: -14px; color: var(--text-muted); font-weight: 400; }
.tj-flow li { position: relative; }

/* seed data as a test kit: what to try with each person, and Use */
.tj-try-cell span { display: block; white-space: normal; min-width: 180px; }
.tj-try-cell small { display: inline-block; margin-top: 2px; padding: 1px 7px; border-radius: 999px; font-size: var(--fs-xs);
  background: var(--surface-selected); color: var(--text-brand); }
.tj-use-cell { text-align: right; }
.tj-people li { align-items: center; }
.tj-people__who { display: grid; min-width: 0; }
.tj-people__who small { font-size: var(--fs-xs); color: var(--text-muted); }
.tj-people__use { flex: none; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-brand); background: none;
  font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--text-brand); cursor: pointer; }
.tj-people__use:hover { background: var(--surface-selected); }

/* slide: readiness split and the work table */
.tj-slide__split { display: flex; height: 4.6cqi; border-radius: 1cqi; overflow: hidden; margin-top: 1cqi; }
.tj-slide__split span { display: grid; place-items: center; min-width: 6cqi; font-size: 1.5cqi; font-weight: 700; color: #fff; }
.tj-slide__split .is-full { background: var(--tj-navy-800); }
.tj-slide__split .is-partial { background: var(--tj-navy-500); }
.tj-slide__split .is-none { background: var(--tj-mute-fill); }
.tj-slide__legend span.is-partial::before { background: var(--tj-navy-500); }
.tj-slide__table { width: 100%; border-collapse: collapse; font-size: 1.55cqi; }
.tj-slide__table th { padding: 1cqi 1.2cqi; text-align: left; font-size: 1.3cqi; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tj-ink-2); border-bottom: 2px solid var(--tj-navy-800); }
.tj-slide__table td { padding: 1.1cqi 1.2cqi; border-bottom: 1px solid var(--tj-rule); color: var(--tj-ink); }
.tj-slide__table td:nth-child(n+4), .tj-slide__table th:nth-child(n+4) { text-align: right; }
.tj-slide__table tr.is-auto td:first-child { font-weight: 700; color: var(--tj-navy-800); }
.tj-slide__table tr.is-auto td:nth-child(3) { color: var(--tj-navy-700); font-weight: 600; }

/* ---- Try it: the chat on the left, examples / sample people / what changed on the right ---- */
.tj-chat { display: flex; flex-direction: column; min-width: 0; height: calc(100vh - 110px); min-height: 460px;
  border-radius: var(--r-lg); border: 1px solid var(--border-default); background: var(--surface-card); overflow: hidden; }
.tj-chat__head { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); }
.tj-chat__head .tj-back { margin: 0; }
.tj-chat__who { display: grid; margin-right: auto; padding-left: 14px; border-left: 1px solid var(--border-subtle); }
.tj-chat__who b { font-size: var(--fs-sm); color: var(--text-strong); }
.tj-chat__status { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-muted); }
.tj-chat__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.tj-chat__dot.is-live { background: var(--status-success-fg); }
.tj-chat__log { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px;
  background: var(--surface-page); scroll-behavior: smooth; }
.tj-msg { max-width: 78%; padding: 10px 14px; border-radius: 14px; font-size: var(--fs-sm); line-height: 1.55; }
.tj-msg--user { align-self: flex-end; background: var(--surface-brand); color: #fff; border-bottom-right-radius: 4px; }
.tj-msg--bot { background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-subtle); border-top-left-radius: 4px; }
.tj-msg--system { align-self: center; max-width: 90%; padding: 4px 12px; display: flex; align-items: center; gap: 10px;
  background: none; color: var(--text-muted); font-size: var(--fs-xs); text-align: center; }
.tj-msgrow { display: flex; align-items: flex-start; gap: 10px; }
.tj-msgrow .tj-msg { max-width: calc(78% - 40px); }
.tj-msgrow.is-cont .tj-avatar { visibility: hidden; }
.tj-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tj-hero); color: #fff; }
.tj-avatar .te-ico { width: 15px; height: 15px; }
.tj-md p { margin: 0 0 6px; } .tj-md p:last-child { margin: 0; }
.tj-md .tj-md__h { font-weight: 700; color: var(--text-strong); }
.tj-md ul { margin: 4px 0 6px; padding-left: 18px; }
.tj-md table { border-collapse: collapse; margin: 6px 0; font-size: var(--fs-xs); }
.tj-md th, .tj-md td { padding: 4px 8px; border: 1px solid var(--border-subtle); text-align: left; }
.tj-md code { font-size: .92em; padding: 1px 4px; border-radius: 4px; background: var(--surface-sunken); }
.tj-msg--user .tj-md code { background: oklch(100% 0 0 / .18); }
.tj-card { display: grid; gap: 8px; margin-top: 6px; }
.tj-card--approval { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-brand); background: var(--surface-selected); }
.tj-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tj-card__head .te-ico { width: 16px; height: 16px; color: var(--text-brand); }
.tj-card__head b { color: var(--text-brand); }
.tj-card__head span { font-size: var(--fs-xs); color: var(--text-muted); }
.tj-card__facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: var(--fs-xs); }
.tj-card__facts dt { color: var(--text-muted); } .tj-card__facts dd { margin: 0; font-weight: 600; color: var(--text-strong); }
.tj-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tj-card__stamp { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--status-success-fg); }
.tj-card__stamp.is-no { color: var(--text-muted); }
.tj-card__stamp .te-ico { width: 14px; height: 14px; }
.tj-typing { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-muted); padding-left: 40px; }
.tj-typing__dots { display: inline-flex; gap: 3px; }
.tj-typing__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-brand); animation: tj-pulse 1.2s ease-in-out infinite; }
.tj-typing__dots i:nth-child(2) { animation-delay: .2s; } .tj-typing__dots i:nth-child(3) { animation-delay: .4s; }
.tj-run { margin-left: 40px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-default); background: var(--surface-card); }
.tj-run.is-done { border-color: var(--status-success-border); }
.tj-run.is-warn { border-color: var(--status-warning-border); }
.tj-run__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tj-run__head .te-ico { width: 16px; height: 16px; color: var(--text-brand); }
.tj-run__head b { color: var(--text-strong); font-size: var(--fs-sm); }
.tj-run__time { margin-left: auto; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tj-run__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-xs); }
.tj-run__step { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; color: var(--text-body); }
.tj-run__step .te-ico { width: 14px; height: 14px; margin-top: 1px; }
.tj-run__step.is-done .te-ico { color: var(--status-success-fg); }
.tj-run__step.is-live .te-ico { color: var(--text-brand); animation: te-spin 1.4s linear infinite; }
.tj-run__step.is-warn .te-ico { color: var(--status-warning-fg); }
.tj-run__note { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--text-muted); }
.tj-chat__fail { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: auto; max-width: 520px; padding: 14px 16px;
  border-radius: 12px; background: var(--status-warning-bg); color: var(--status-warning-fg); font-size: var(--fs-sm); }
.tj-chat__fail .te-ico { width: 16px; height: 16px; }
.tj-chat__form { display: flex; align-items: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border-subtle); }
.tj-chat__form textarea { flex: 1; resize: none; min-height: 42px; max-height: 140px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-strong); font: inherit; line-height: 1.45; }
.tj-chat__form textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.tj-try__side { max-height: calc(100vh - 110px); overflow-y: auto; }
.tj-example { display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 9px 11px; border-radius: var(--r-md);
  border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body); font: inherit; font-size: var(--fs-sm);
  text-align: left; line-height: 1.4; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.tj-example:hover { border-color: var(--border-brand); background: var(--surface-selected); }
.tj-example .te-ico { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--text-brand); }
.tj-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tj-people li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: var(--fs-sm);
  border-bottom: 1px solid var(--border-subtle); }
.tj-people li:last-child { border-bottom: 0; }
.tj-people b { font-weight: 600; color: var(--text-strong); }
.tj-people span { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tj-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tj-changes li { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: start; font-size: var(--fs-sm); }
.tj-changes li .te-ico { width: 14px; height: 14px; margin-top: 3px; color: var(--status-success-fg); }
.tj-changes li span { display: grid; } .tj-changes li b { color: var(--text-strong); font-weight: 600; }
.tj-changes li small { font-size: var(--fs-xs); color: var(--text-muted); }
.tj-changes li a { font-size: var(--fs-xs); color: var(--text-link); }
.tj-changes .tj-changes__empty { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.tj-applinks { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- details view (one level down) ---- */
.tj-back { margin: 0 0 10px; font-size: var(--fs-sm); text-decoration: none; }
.tj-back:hover { text-decoration: underline; }

/* ---- panels ---- */
.tj-panel { padding: 18px 22px; border-radius: var(--r-lg); border: 1px solid var(--border-default); background: var(--surface-card);
  display: grid; gap: 14px; animation: te-fade .15s ease both; }
.tj-panel__head .te-h2 { margin: 0 0 6px; }
.tj-panel__head .te-muted { margin: 0; max-width: 760px; }
.tj-h3 { margin: 0; font-size: var(--fs-md); color: var(--text-strong); }
.tj-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tj-progress { height: 8px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.tj-progress__fill { height: 100%; background: var(--surface-brand); transition: width .4s ease; }
.tj-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--gap-3); }
.tj-kpi { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-page);
  border: 1px solid var(--border-subtle); }
.tj-kpi span { font-size: var(--fs-sm); color: var(--text-muted); }
.tj-kpi b { font-size: var(--tj-fs-h1); color: var(--text-strong); }
.tj-kpi small { font-size: var(--fs-xs); color: var(--text-muted); }
.tj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tj-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--surface-page); }
.tj-list__end { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.tj-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--status-info-bg); color: var(--status-info-fg); font-size: var(--fs-sm); }
.tj-note .te-ico { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.tj-kpi b { color: var(--text-brand); }

/* business use case: the presentation */
.tj-deck__head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.tj-deck__head .te-h2 { margin: 0; }
.tj-deck__head .te-muted { margin: 2px 0 0; }
.tj-deck__viewer { display: grid; gap: 8px; width: 100%; max-width: 880px; margin: 0 auto; }   /* JS fits it to the screen */
.tj-deck__stage { container-type: inline-size; border-radius: var(--r-md); box-shadow: 0 10px 30px oklch(21% 0.06 264 / .16); }
.tj-deck__stage:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; }
.tj-deck__bar { display: flex; align-items: center; justify-content: center; gap: 12px; }
.tj-deck__frame { position: relative; padding: 0 26px; }   /* the arrows sit in this margin, clear of the slide's content */
.tj-deck__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 0; border-radius: 50%;
  justify-content: center; background: oklch(100% 0 0 / .92); border-color: transparent; box-shadow: 0 2px 10px oklch(21% 0.06 264 / .25);
  opacity: .85; transition: opacity .15s ease; }
.tj-deck__arrow--prev { left: 4px; }
.tj-deck__arrow--next { right: 4px; }
.tj-deck__frame:hover .tj-deck__arrow:not(:disabled), .tj-deck__arrow:focus-visible { opacity: 1; }
/* an arrow on both sides, always: the one with nowhere to go is shown faded */
.tj-deck__frame .tj-deck__arrow { opacity: 1; }
.tj-deck__frame .tj-deck__arrow:disabled { opacity: .35; pointer-events: none; }
.tj-deck__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* Present: the viewer full screen, the slide as large as the screen allows, arrows on both sides */
.tj-deck__viewer:fullscreen { max-width: none !important; width: 100vw; height: 100vh; margin: 0; padding: 24px 0 16px;
  display: grid; grid-template-rows: 1fr auto; align-items: center; background: #0b0d12; }
.tj-deck__viewer:fullscreen .tj-deck__frame { padding: 0 72px; height: 100%; display: grid; place-items: center; }
.tj-deck__viewer:fullscreen .tj-deck__stage { width: min(100%, calc((100vh - 90px) * 16 / 9)); box-shadow: none; }
.tj-deck__viewer:fullscreen .tj-deck__arrow { width: 52px; height: 52px; }
.tj-deck__viewer:fullscreen .tj-deck__arrow--prev { left: 12px; }
.tj-deck__viewer:fullscreen .tj-deck__arrow--next { right: 12px; }
.tj-deck__viewer:fullscreen .tj-deck__count { color: oklch(100% 0 0 / .7); }
.tj-deck__viewer:fullscreen .tj-deck__dot { background: oklch(100% 0 0 / .3); }
.tj-deck__viewer:fullscreen .tj-deck__dot[aria-current="true"] { background: #fff; }
.tj-deck__prev .te-ico { transform: rotate(180deg); }
.tj-deck__dots { display: flex; gap: 6px; }
.tj-deck__dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: var(--border-strong); cursor: pointer; }
.tj-deck__dot[aria-current="true"] { width: 22px; border-radius: 999px; background: var(--surface-brand); }
.tj-deck__count { font-size: var(--fs-sm); min-width: 42px; text-align: center; }

/* one slide: 16:9, sized from the viewer's width (cqi) so it reads the same on any screen */
.tj-slide { aspect-ratio: 16 / 9; display: flex; flex-direction: column; gap: 2.2cqi; padding: 4.5cqi 5.5cqi;
  border-radius: var(--r-md); background: #fff; color: var(--tj-ink); overflow: hidden; position: relative;
  border-top: 1cqi solid var(--tj-navy-800); }
.tj-slide__eyebrow { margin: 0; font-size: 1.5cqi; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tj-navy-700); }
.tj-slide__title { margin: 0; font-size: 3.6cqi; line-height: 1.15; color: var(--tj-navy-950); }
.tj-slide__sub { margin: 0; font-size: 2cqi; color: rgba(255, 255, 255, .85); }
.tj-slide__text { margin: 0; font-size: 1.8cqi; line-height: 1.5; color: var(--tj-ink-2); max-width: 85%; }
.tj-slide__foot { margin: auto 0 0; font-size: 1.6cqi; color: rgba(255, 255, 255, .7); }
.tj-slide--cover { justify-content: center; border-top: 0; background: var(--tj-hero); color: #fff; }
.tj-slide--cover .tj-slide__eyebrow { color: var(--tj-navy-200); }
.tj-slide--cover .tj-slide__title { font-size: 5.2cqi; color: #fff; max-width: 80%; }
.tj-slide--cover .tj-slide__foot { position: absolute; left: 5.5cqi; bottom: 4.5cqi; }
/* DiscoveryEdge's own slides: their words can run longer than a drawn slide, so the slide scrolls */
.tj-slide--de { gap: 1.4cqi; overflow-y: auto; }
/* DiscoveryEdge's slide as a picture: the deck exactly as downloaded */
.tj-slide-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain;
  border-radius: var(--r-md); background: #fff; }
.tj-slide--de.tj-slide--cover .tj-slide__text { color: rgba(255, 255, 255, .85); }
.tj-slide__nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6cqi; }
.tj-slide__nums > div { display: grid; gap: .4cqi; padding: 2cqi; border-radius: 1cqi; background: var(--tj-navy-50); }
.tj-slide__nums b { font-size: 3.4cqi; color: var(--tj-navy-800); line-height: 1.1; }
.tj-slide__nums span { font-size: 1.5cqi; color: var(--tj-ink-2); }
.tj-slide__nums--stack { grid-template-columns: 1fr; align-content: start; }
.tj-slide__nums--stack b { font-size: 2.8cqi; }
.tj-slide__cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3cqi; flex: 1; min-height: 0; }
.tj-slide__steps { margin: 0; padding-left: 2.6cqi; display: grid; gap: 1.2cqi; align-content: start; font-size: 1.9cqi; line-height: 1.45; }
.tj-slide__steps li::marker { color: var(--tj-navy-700); font-weight: 700; }
.tj-slide__bars { display: grid; gap: 1.3cqi; }
.tj-bar { display: grid; grid-template-columns: 34% 1fr 6cqi; align-items: center; gap: 1.6cqi; font-size: 1.6cqi; }
.tj-bar__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tj-ink); }
.tj-bar__track { height: 2.2cqi; border-radius: 999px; background: var(--tj-rule); overflow: hidden; }
.tj-bar__fill { display: block; height: 100%; border-radius: inherit; background: var(--tj-mute-fill); }
.tj-bar.is-auto .tj-bar__fill { background: var(--tj-navy-700); }
.tj-bar__val { text-align: right; font-weight: 700; color: var(--tj-ink); }
.tj-slide__legend { display: flex; gap: 2.4cqi; margin: auto 0 0; font-size: 1.4cqi; color: var(--tj-ink-2); }
.tj-slide__legend span::before { content: ""; display: inline-block; width: 1.4cqi; height: 1.4cqi; margin-right: .8cqi;
  border-radius: .3cqi; background: var(--tj-mute-fill); vertical-align: -0.2cqi; }
.tj-slide__legend span.is-auto::before { background: var(--tj-navy-700); }
.tj-slide__flow { list-style: none; margin: auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2cqi;
  counter-reset: step; }
.tj-slide__flow li { display: grid; gap: .8cqi; justify-items: start; padding: 2.4cqi; border-radius: 1cqi; background: var(--tj-navy-50); }
.tj-slide__flow .te-ico { width: 4cqi; height: 4cqi; padding: 1cqi; border-radius: 50%; background: var(--tj-navy-700); color: #fff; }
.tj-slide__flow b { font-size: 2cqi; color: var(--tj-navy-950); }
.tj-slide__flow span { font-size: 1.5cqi; color: var(--tj-ink-2); }

.tj-more { display: grid; gap: 10px; padding-top: var(--gap-4); border-top: 1px solid var(--border-subtle); }
.tj-more .te-muted { margin: 0; }
.tj-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tj-pick label { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--r-md); border: 1px solid var(--border-default); cursor: pointer; }
.tj-pick label:hover { border-color: var(--border-brand); }
.tj-pick input { width: 16px; height: 16px; accent-color: var(--surface-brand); }
.tj-more .te-btn { justify-self: start; }

/* seed data */
.tj-tables { display: grid; gap: var(--gap-5); }
.tj-table { display: grid; gap: 8px; }
.tj-table__scroll { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.tj-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tj-table th, .tj-table td { padding: 8px 12px; text-align: left; border-top: 1px solid var(--border-subtle); white-space: nowrap; }
.tj-table th { border-top: 0; background: var(--surface-page); color: var(--text-muted); font-weight: 600; }
.tj-table td:first-child { font-weight: 600; color: var(--text-strong); }

/* simulation apps: "Simulated Target Systems" - a header with an icon tile and a laptop picture, compact cards */
.tj-simhead { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-bottom: var(--gap-4); }
.tj-simhead__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--status-info-bg, var(--surface-sunken)); color: var(--text-brand); }
.tj-simhead__icon .te-ico { width: 26px; height: 26px; }
.tj-simhead__words { padding-left: 18px; border-left: 1px solid var(--border-default); min-width: 0; }
.tj-simhead__words .te-h2 { margin: 0 0 4px; }
.tj-simhead__words .te-muted { margin: 0; }
.tj-simhead__art { width: 150px; height: auto; }
.tj-art__frame { fill: var(--surface-card); stroke: var(--text-brand); stroke-width: 2; }
.tj-art__screen { fill: var(--status-info-bg, #e8eefc); }
.tj-art__base { fill: var(--status-info-bg, #e8eefc); stroke: var(--text-brand); stroke-width: 2; stroke-linejoin: round; }
.tj-art__dot { fill: var(--text-brand); }
.tj-art__play { fill: var(--surface-card); }
@media (max-width: 760px) { .tj-simhead { grid-template-columns: auto 1fr; } .tj-simhead__art { display: none; } }

.tj-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-3); }
@media (max-width: 1100px) { .tj-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tj-apps { grid-template-columns: 1fr; } }
.tj-app { display: grid; align-content: space-between; gap: 14px; padding: 14px; border-radius: var(--r-lg);
  border: 1px solid var(--border-default); background: var(--surface-card); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.tj-app__top { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; }
.tj-app__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px;
  background: var(--surface-page); border: 1px solid var(--border-subtle); color: var(--text-strong); }
.tj-app__icon .te-ico { width: 20px; height: 20px; }
.tj-app__name { min-width: 0; line-height: 1.3; }
.tj-app__name b { display: block; color: var(--text-strong); font-weight: 600; }
.tj-app__name small { display: block; color: var(--text-muted); font-size: var(--fs-xs); }
.tj-app__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tj-app__state { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-sm);
  font-weight: 500; background: var(--status-info-bg); color: var(--status-info-fg); }
.tj-app__state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tj-app__state.is-up { background: var(--status-success-bg); color: var(--status-success-fg); }
.tj-app__open { border-radius: 999px; gap: 6px; }
.tj-app__open .te-ico { width: 14px; height: 14px; }

/* building AI agents */
.tj-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tj-step { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px;
  border-radius: var(--r-md); background: var(--surface-page); }
.tj-step .te-ico { width: 16px; height: 16px; color: var(--text-subtle); }
.tj-step.is-done .te-ico { color: var(--status-success-fg); }
.tj-step.is-active .te-ico { color: var(--status-info-fg); animation: te-spin 1.4s linear infinite; }
.tj-step.is-attention .te-ico { color: var(--status-warning-fg); }
.tj-step b { color: var(--text-strong); font-weight: 600; }
.tj-agents { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--gap-3); }
.tj-agent { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--border-default); }
.tj-agent__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tj-agent__top b { color: var(--text-strong); }
.tj-agent__flow { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }

/* try */
.tj-wait, .tj-tryready { display: grid; justify-items: start; gap: 10px; padding: 22px; border-radius: var(--r-lg);
  border: 1px solid var(--border-default); background: var(--surface-page); }
.tj-wait > .te-ico, .tj-tryready > .te-ico { width: 28px; height: 28px; color: var(--text-brand); }
.tj-wait b, .tj-tryready b { font-size: var(--tj-fs-h2); color: var(--text-strong); }
.tj-tryready { border-color: var(--status-success-border); background: var(--status-success-bg); }

/* ---- smaller screens: circles only, with the open stage named ---- */
@media (max-width: 1400px) {
  .tj-stage__badge { width: 36px; height: 36px; }
  .tj-stage__badge .te-ico { width: 18px; height: 18px; }
  .tj-stage__btn { gap: 8px; padding: 6px 12px 6px 6px; }
  .tj-stage__text b { font-size: var(--fs-sm); }
  .tj-stage__link { flex-basis: 16px; min-width: 14px; }
}
@media (max-width: 1100px) {
  .tj-stage__chip { display: none; }
}
@media (max-width: 900px) {
  .tj-proposal { grid-template-columns: 1fr; }
  .tj-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tj-proposal__side { position: static; }
  .tj-chat { height: 72vh; }
  .tj-try__side { max-height: none; }
  .tj-msg, .tj-msgrow .tj-msg { max-width: 92%; }
}
@media (max-width: 760px) {
  .tj-page { padding: var(--gap-4); }
  .tj-start { grid-template-columns: 1fr; gap: var(--gap-5); }
  .tj-stage:not(.is-open) .tj-stage__text { display: none; }
  .tj-stage__btn { padding: 4px; }
  .tj-panel { padding: var(--gap-4); }
  .tj-list li { flex-wrap: wrap; }
}

/* ---- the tour: the page dimmed around one part, with a note beside it ---- */
.tj-tour__shield { position: fixed; inset: 0; z-index: 90; }
.tj-tour__spot { position: fixed; z-index: 91; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--border-brand), 0 0 0 9999px oklch(20% 0.04 264 / .55); transition: top .2s, left .2s, width .2s, height .2s; }
.tj-tour__pop { position: fixed; z-index: 92; width: min(360px, calc(100vw - 32px)); padding: 16px 16px 12px; border-radius: var(--r-lg);
  border: 1px solid var(--border-default); background: var(--surface-card); box-shadow: 0 12px 32px oklch(20% 0.04 264 / .25); }
.tj-tour__title { margin: 0 28px 6px 0; font-weight: 700; color: var(--text-brand); }
.tj-tour__text { margin: 0 0 12px; font-size: var(--fs-sm); line-height: 1.5; }
.tj-tour__foot { display: flex; align-items: center; gap: 8px; }
.tj-tour__foot > .te-muted { margin-right: auto; font-size: var(--fs-xs); }
.tj-tour__close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px;
  padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; }
.tj-tour__close:hover { background: var(--surface-brand-subtle); color: var(--text-brand); }
.tj-tour__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (prefers-reduced-motion: reduce) { .tj-tour__spot { transition: none; } }

/* ---- the Acme sample environment (launchpad): a welcome band, then one slot per section ---- */
.tj-acme { display: grid; gap: 14px; }
.tj-acme__welcome { display: grid; gap: 6px; padding: 18px 20px; border-radius: var(--r-lg);
  border: 1px solid var(--border-default); background: var(--surface-brand-subtle); }
.tj-acme__welcome p { margin: 0; }
.tj-acme__title { margin: 0; font-size: var(--tj-fs-h2); line-height: 1.25; color: var(--text-strong); }
.tj-acme__section { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-lg);
  border: 1px solid var(--border-default); background: var(--surface-card); }
.tj-acme__section .tj-h3, .tj-acme__section .tj-side__label { margin: 0; }
.tj-acme__empty { margin: 4px 0 0; padding: 12px; border-radius: var(--r-md); border: 1px dashed var(--border-default);
  font-size: var(--fs-sm); color: var(--text-muted); text-align: center; }
.tj-acme__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.tj-acme__main { display: grid; gap: 14px; min-width: 0; }
.tj-acme__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 6px; }
.tj-acme__own { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.tj-acme__own li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-page); }
.tj-acme__steps { display: flex; flex-wrap: wrap; gap: 4px; font-size: var(--fs-xs); }
.tj-acme__steps span { padding: 2px 8px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-muted); }
.tj-acme__steps span.is-done { background: var(--surface-selected); color: var(--text-brand); }
.tj-acme__steps span.is-now { background: var(--surface-brand); color: var(--text-on-brand); font-weight: 600; }

/* ---- Screen 1: the promise and an e-mail-only way in ---- */
.tj-steps3 { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.tj-steps3 li { display: flex; align-items: center; gap: 12px; color: oklch(100% 0 0 / .9); }
.tj-steps3 b { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px;
  background: oklch(100% 0 0 / .14); color: #fff; }
.tj-proof { margin: 18px 0 0; font-size: var(--fs-sm); color: oklch(100% 0 0 / .75); }
.tj-proof b { color: #fff; font-weight: 600; }
.tj-start__trust > span:last-child { display: block; }
.tj-linkbtn--light { color: var(--tj-navy-200); }
.tj-linkbtn--light:hover { color: #fff; }
.tj-entry { display: grid; gap: 12px; align-self: center; }
.tj-entry__foot { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); text-align: center; }
.tj-fine { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-muted); }
.tj-fine a { color: var(--text-link); }

/* ---- Screen 2: three short steps beside the privacy panel ---- */
.tj-start.is-upload { grid-template-columns: minmax(0, 1fr); min-height: 0; align-items: start; }
.tj-upload { display: grid; gap: 14px; min-width: 0; }
.tj-upload__title { margin: 4px 0 0; font-size: var(--tj-fs-display); color: var(--text-strong); }
.tj-upload .tj-mine { padding: 14px 16px; }
.tj-ustep { display: grid; gap: 12px; padding: 18px 20px; }
.tj-ustep__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--tj-fs-h3); color: var(--text-strong); }
.tj-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tj-choice--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tj-choice__card { position: relative; display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-lg);
  border: 1px solid var(--border-default); background: var(--surface-card); cursor: pointer; }
.tj-choice__card input { position: absolute; opacity: 0; pointer-events: none; }
.tj-choice__card b { color: var(--text-strong); }
.tj-choice__card span { font-size: var(--fs-sm); color: var(--text-muted); }
.tj-choice__card:hover { border-color: var(--border-strong); }
.tj-choice__card.is-on { border-color: var(--border-brand); background: var(--surface-selected); box-shadow: inset 0 0 0 1px var(--border-brand); }
.tj-choice__card:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.tj-mixed { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.tj-mixed select { padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-strong); }
.tj-mixed__split { grid-column: 1 / -1; display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--text-body); }
.tj-mixed__split input { width: 100%; accent-color: var(--surface-brand); }
.tj-found { display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; margin: 0; font-size: var(--fs-sm); }
.tj-found dt { font-weight: 600; color: var(--text-muted); }
.tj-found dd { margin: 0; color: var(--text-strong); }
.tj-found__map { display: flex; flex-wrap: wrap; gap: 6px; }
.tj-found__map span { padding: 2px 8px; border-radius: 999px; font-size: var(--fs-xs); }
.tj-found__map .is-ok { background: var(--status-success-bg); color: var(--status-success-fg); }
.tj-found__map .is-miss { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.tj-found__warn { margin: 0; padding-left: 18px; color: var(--status-warning-fg); }
.tj-center { text-align: center; margin: 0; }
.tj-privacy { position: sticky; top: 16px; display: grid; gap: 10px; padding: 16px; border-radius: var(--r-lg);
  border: 1px solid var(--border-default); background: var(--surface-card); }
.tj-privacy ul, .tj-privacy__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: var(--fs-sm); }
.tj-privacy li, .tj-privacy__list li { display: flex; gap: 8px; align-items: flex-start; }
.tj-privacy .te-ico, .tj-privacy__list .te-ico { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--status-success-fg); }

/* ---- dialogs and drawers ---- */
.tj-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border-radius: var(--r-lg);
  border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body);
  box-shadow: 0 18px 48px oklch(20% 0.04 264 / .3); }
.tj-dialog--wide { width: min(760px, calc(100vw - 32px)); }
.tj-dialog::backdrop { background: oklch(20% 0.04 264 / .5); }
.tj-dialog__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-card); }
.tj-dialog__head .te-h2 { margin: 0; font-size: var(--tj-fs-h2); }
.tj-dialog__head .tj-tour__close { position: static; }
.tj-dialog__body { display: grid; gap: 12px; padding: 16px 18px 20px; }
.tj-dialog__body p { margin: 0; }
.tj-dform { display: grid; gap: 12px; }
.tj-dform textarea, .tj-copyfield { width: 100%; padding: 9px 12px; border-radius: var(--r-md); border: 1px solid var(--border-default);
  background: var(--surface-card); color: var(--text-strong); font: inherit; }
.tj-dform .te-field input { width: 100%; }
.tj-howto { display: grid; gap: 6px; }
.tj-howto__tool { padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--border-subtle); }
.tj-howto__tool summary { cursor: pointer; font-weight: 600; color: var(--text-strong); }
.tj-howto__tool ol { margin: 8px 0 2px; padding-left: 20px; display: grid; gap: 4px; font-size: var(--fs-sm); }

/* ---- Screen 3: the wait, stage by stage ---- */
.tj-waitlist { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.tj-waitlist__step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); }
.tj-waitlist__step > span:last-child { display: grid; }
.tj-waitlist__step b { color: var(--text-strong); }
.tj-waitlist__step small { font-size: var(--fs-sm); color: var(--text-muted); }
.tj-waitlist__dot { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px;
  font-weight: 700; background: var(--surface-sunken); color: var(--text-muted); }
.tj-waitlist__dot .te-ico { width: 14px; height: 14px; }
.tj-waitlist__step.is-done .tj-waitlist__dot { background: var(--surface-brand); color: #fff; }
.tj-waitlist__step.is-done small { color: var(--text-body); }
.tj-waitlist__step.is-active { background: var(--surface-selected); }
.tj-waitlist__step.is-active .tj-waitlist__dot { background: var(--surface-card); color: var(--text-brand); box-shadow: inset 0 0 0 2px var(--surface-brand); }
.tj-waitlist__step.is-active small { color: var(--text-brand); font-weight: 600; }

/* ---- Screen 4: the business case ---- */
.tj-casebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle); }
.tj-casebar__words { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.tj-casebar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tj-coverage { display: grid; gap: 6px; }
.tj-coverage__bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface-sunken); }
.tj-coverage__bar span { min-width: 4px; }
.tj-coverage .is-trial { --c: var(--tj-navy-700); }
.tj-coverage .is-ready { --c: var(--tj-navy-300); }
.tj-coverage .is-stays { --c: var(--tj-mute-fill); }
.tj-coverage__bar span { background: var(--c); }
.tj-coverage__legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-sm); color: var(--text-body); }
.tj-coverage__legend > span { display: inline-flex; align-items: center; gap: 6px; }
.tj-coverage__legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.tj-assume { border-radius: var(--r-md); border: 1px solid var(--border-subtle); padding: 8px 12px; }
.tj-assume summary { cursor: pointer; font-size: var(--fs-sm); list-style: none; }
.tj-assume summary::-webkit-details-marker { display: none; }
.tj-assume summary::before { content: "+ "; color: var(--text-link); font-weight: 700; }
.tj-assume[open] summary::before { content: "− "; }
.tj-assume summary b { color: var(--text-strong); }
.tj-assume .te-help { margin: 8px 0 0; }
.tj-assume__table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: var(--fs-sm); }
.tj-assume__table th, .tj-assume__table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.tj-assume__table th { font-weight: 600; color: var(--text-strong); }
.tj-assume__table input, .tj-assume__table select { width: 120px; padding: 6px 8px; border-radius: var(--r-md);
  border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-strong); font: inherit; }
.tj-assume__table input:disabled, .tj-assume__table select:disabled { background: var(--surface-sunken); }
.tj-next { display: grid; gap: 10px; padding-top: 6px; }
.tj-next .tj-h3 { margin: 0; }
.tj-next__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tj-next__card { display: grid; gap: 8px; align-content: start; justify-items: start; padding: 14px; border-radius: var(--r-lg);
  border: 1px solid var(--border-default); background: var(--surface-card); }
.tj-next__card p { margin: 0; font-size: var(--fs-sm); color: var(--text-body); }
.tj-next__top { display: flex; align-items: center; gap: 8px; color: var(--text-brand); }
.tj-next__top .te-ico { width: 18px; height: 18px; }
.tj-next__top b { color: var(--text-strong); }
.tj-next__foot { margin: 0; font-size: var(--fs-sm); }
.tj-describe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--surface-selected); font-size: var(--fs-sm); }
.tj-describe > span { font-weight: 600; color: var(--text-strong); margin-right: 4px; }
.tj-chip { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border-brand); background: var(--surface-card);
  color: var(--text-brand); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.tj-chip:hover { background: var(--surface-brand); color: var(--text-on-brand); }
.tj-worktable { display: grid; gap: 8px; }
.tj-worktable > p, .tj-worktable .tj-h3 { margin: 0; }
.tj-work { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tj-work th, .tj-work td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.tj-work th { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.tj-work td b { display: block; color: var(--text-strong); }
.tj-work td small { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.tj-work td[title] b { text-decoration: underline dotted var(--border-strong); text-underline-offset: 3px; cursor: help; }
/* Use cases built into this trial: a tinted row with a brand edge and a "Building" tag; the rest stay plain */
.tj-work tr.is-building td, .tj-worktable .tj-work tbody tr.is-building:hover td { background: #e6ecfb; }   /* a clear light blue */
.tj-work tr.is-building td:first-child { box-shadow: inset 4px 0 0 var(--surface-brand, #1f2f6b); }
.tj-work tr.is-building td b { color: var(--surface-brand, #1f2f6b); }
.tj-work td b .tj-work__tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; vertical-align: middle;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; background: var(--surface-brand, #1f2f6b); color: var(--text-on-brand, #fff); }
.tj-work tr:not(.is-building) td { color: var(--text-muted); }
.tj-work tr:not(.is-building) td b { color: var(--text-default, inherit); font-weight: 600; }
.tj-work .tj-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tj-work__divider td { padding-top: 14px; background: var(--surface-page); }
.tj-work__add { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-link); font-weight: 600; }
.tj-work__add input { accent-color: var(--surface-brand); }
.tj-side__ends { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text-body); }
.tj-side__ends .te-ico { width: 14px; height: 14px; }
.tj-changelog { display: grid; gap: 8px; margin-top: 8px; }
.tj-changelog .tj-h3, .tj-changelog p { margin: 0; }

/* ---- Screen 9: one offer at a time, and the pilot request ---- */
.tj-offer { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px;
  padding: 10px 44px 10px 16px; border-radius: var(--r-lg); border: 1px solid var(--border-brand); background: var(--surface-selected); }
.tj-offer > .te-ico { width: 18px; height: 18px; color: var(--text-brand); }
.tj-offer p { flex: 1 1 280px; margin: 0; font-size: var(--fs-sm); color: var(--text-strong); font-weight: 600; }
.tj-offer__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tj-offer__close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; }
.tj-offer__close:hover { background: var(--surface-card); color: var(--text-brand); }
.tj-pilot { display: grid; gap: 14px; max-width: 920px; }
.tj-pilot > .tj-back, .tj-acme > .tj-back { justify-self: start; margin: 0; }
.tj-pilot__head { display: grid; gap: 6px; }
.tj-pilot__head p { margin: 0; }
.tj-pilot__form { display: grid; gap: 12px; }
.tj-pilot__sec { display: grid; gap: 10px; padding: 16px 18px; }
.tj-pilot__sec .tj-h3 { margin: 0; }
.tj-pilot__sec .te-grid3 { margin-top: 0; }
.tj-pilot__sec select, .tj-pilot__sec textarea, .tj-pilot__crit input, .tj-pilot__sec .te-field input { width: 100%; padding: 8px 10px;
  border-radius: var(--r-md); border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-strong); font: inherit; }
.tj-pilot__crit { display: grid; gap: 8px; }
.tj-pilot__done { display: grid; gap: 10px; justify-items: start; padding: 20px; border-color: var(--status-success-border); background: var(--status-success-bg); }
.tj-pilot__done p, .tj-pilot__done .te-h2 { margin: 0; }

/* ---- Screen 6: who you are | the conversation | what changed ---- */
.tj-proposal.tj-try { grid-template-columns: 260px minmax(0, 1fr) 300px; }
.tj-mtabs { display: none; }
.tj-you { display: grid; gap: 12px; align-content: start; position: sticky; top: 16px; max-height: calc(100vh - 110px); overflow-y: auto; }
.tj-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r-lg);
  background: var(--surface-sunken); }
.tj-roles__btn { padding: 7px 8px; border: 0; border-radius: var(--r-md); background: none; color: var(--text-body); font: inherit;
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.tj-roles__btn:hover { background: var(--surface-card); }
.tj-roles__btn.is-on { background: var(--surface-card); color: var(--text-brand); box-shadow: 0 1px 2px oklch(21% 0.06 264 / .12); }
.tj-person { display: grid; gap: 8px; justify-items: start; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--border-default);
  background: var(--surface-card); }
.tj-person .tj-persona__top { grid-template-columns: 38px 1fr; }
.tj-person .tj-persona__top .te-pill { grid-column: 1 / -1; justify-self: start; }
.tj-say { display: grid; gap: 6px; }
.tj-recent { display: grid; gap: 4px; }
.tj-recent__row { display: grid; gap: 1px; padding: 7px 10px; border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  background: var(--surface-card); text-align: left; font: inherit; cursor: pointer; }
.tj-recent__row b { font-size: var(--fs-sm); color: var(--text-strong); font-weight: 600; }
.tj-recent__row small { font-size: var(--fs-xs); color: var(--text-muted); }
.tj-recent__row:hover { border-color: var(--border-brand); }
.tj-channels { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--border-subtle); overflow-x: auto; }
.tj-channels__btn { padding: 9px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-muted);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap; }
.tj-channels__btn[aria-selected="true"] { color: var(--text-brand); border-bottom-color: var(--surface-brand); }
/* the chat header on one line: back | who and status | new conversation */
.tj-chat__head { min-height: 56px; }
.tj-chat__head .tj-back { flex: none; white-space: nowrap; text-decoration: none; font-size: var(--fs-sm); }
.tj-chat__head .tj-back:hover { text-decoration: underline; }
.tj-chat__who { min-width: 0; gap: 2px; line-height: 1.2; }
.tj-chat__status span { white-space: nowrap; }
.tj-chat__head > .te-btn { flex: none; }
.tj-chat__safe { margin: 0; padding: 5px 16px; font-size: var(--fs-xs); color: var(--text-muted); background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle); }
.tj-channel { flex: 1; overflow-y: auto; display: grid; gap: 10px; align-content: start; padding: 20px; background: var(--surface-page); }
.tj-channel p, .tj-channel .tj-h3 { margin: 0; }
.tj-channel__addr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tj-channel__addr b { font-family: var(--font-mono, monospace); color: var(--text-strong); }
.tj-rolebanner { display: flex; gap: 8px; align-items: flex-start; align-self: center; max-width: 92%; padding: 8px 12px; border-radius: var(--r-md);
  background: var(--surface-selected); color: var(--text-brand); font-size: var(--fs-sm); font-weight: 600; }
.tj-rolebanner .te-ico { flex: none; width: 15px; height: 15px; margin-top: 2px; }
/* the Trial guide: a second voice, visibly not SupportFlo's */
.tj-guide { position: relative; display: grid; gap: 6px; padding: 10px 40px 10px 14px; border-radius: var(--r-md);
  border: 1px solid var(--tj-guide-border); background: var(--tj-guide-bg); color: var(--text-strong); font-size: var(--fs-sm); }
.tj-guide p { margin: 0; }
.tj-guide__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tj-guide-label); }
.tj-guide__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tj-guide .tj-offer__close { top: 6px; right: 6px; }
.tj-run__how { justify-self: start; margin: 4px 0 0; font-size: var(--fs-sm); }
.tj-rundetail { display: grid; grid-template-columns: 110px 1fr; gap: 10px 14px; margin: 0; font-size: var(--fs-sm); }
.tj-rundetail dt { font-weight: 700; color: var(--text-muted); }
.tj-rundetail dd { margin: 0; color: var(--text-strong); }
.tj-rundetail__steps { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.tj-tech { font-size: var(--fs-xs); color: var(--text-muted); }
.tj-tech summary { cursor: pointer; font-weight: 600; }
.tj-tech p { margin: 6px 0 0; font-family: var(--font-mono, monospace); word-break: break-all; }
.tj-chat__log--past { max-height: 60vh; border-radius: var(--r-md); }

@media (max-width: 1200px) {
  .tj-proposal.tj-try { grid-template-columns: 240px minmax(0, 1fr); }
  .tj-proposal.tj-try > .tj-try__side { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 900px) {
  .tj-start.is-upload, .tj-acme__layout { grid-template-columns: 1fr; }
  .tj-privacy { position: static; }
  .tj-proposal.tj-try { grid-template-columns: 1fr; }
  .tj-mtabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-lg); background: var(--surface-sunken); }
  .tj-mtab { flex: 1; padding: 8px; border: 0; border-radius: var(--r-md); background: none; font: inherit; font-weight: 600;
    color: var(--text-body); cursor: pointer; }
  .tj-mtab[aria-selected="true"] { background: var(--surface-card); color: var(--text-brand); }
  .tj-you { position: static; max-height: none; }
  .tj-try[data-pane="chat"] > .tj-you, .tj-try[data-pane="chat"] > .tj-try__side,
  .tj-try[data-pane="you"] > .tj-chat, .tj-try[data-pane="you"] > .tj-try__side,
  .tj-try[data-pane="changed"] > .tj-you, .tj-try[data-pane="changed"] > .tj-chat { display: none; }
  .tj-proposal.tj-try > .tj-try__side { grid-column: auto; }
}
@media (max-width: 600px) {
  .tj-who, .te-header .te-pill { display: none; }
  /* A signed-in header (name, Tour, Sign out) must fit a 390px phone: 16px gutter, the tag lines go, Tour keeps its icon */
  .tj .te-header__inner { gap: var(--gap-2); padding: 0 16px; }
  .tj-brand__by, .tj-brand__trial { display: none; }
  #tj-tour { font-size: 0; gap: 0; }
  .tj-chat__head { flex-wrap: wrap; gap: 6px 10px; }
  .tj-chat__head .tj-back { flex-basis: 100%; }
  .tj-chat__who { padding-left: 0; border-left: 0; }
  .tj-choice, .tj-choice--3, .tj-mixed { grid-template-columns: 1fr; }
  .tj-found, .tj-rundetail { grid-template-columns: 1fr; gap: 2px 0; }
  .tj-found dd, .tj-rundetail dd { margin-bottom: 8px; }
  .tj-casebar__actions { width: 100%; }
}

/* ======== matching the spec's mockups ======== */
/* header: SupportFlo, Free trial, the steps in the middle */
.tj-brand { display: inline-flex; align-items: center; gap: 8px; }
.tj-brand .te-brand__name { font-size: 1.15rem; font-weight: 800; color: var(--text-strong); }
.tj-brand__by { font-size: var(--fs-sm); color: var(--text-muted); }
.tj-brand__trial { padding: 2px 10px; border-radius: 999px; background: var(--surface-selected); color: var(--text-brand);
  font-size: var(--fs-sm); font-weight: 600; }
.te-header__inner { gap: 16px; }
.tj-hsteps { display: flex; align-items: center; gap: 22px; margin: 0 auto; font-size: var(--fs-sm); }
.tj-hsteps__step { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit;
  color: var(--text-muted); white-space: nowrap; }
button.tj-hsteps__step { cursor: pointer; }
button.tj-hsteps__step:hover { color: var(--text-brand); }
.tj-hsteps__step .te-ico { width: 14px; height: 14px; }
.tj-hsteps__step.is-done { color: var(--status-success-fg); }
.tj-hsteps__step.is-now { color: var(--text-brand); font-weight: 700; }
#tj-head-signin { font-size: var(--fs-sm); }

/* Screen 1: a light page, three step cards, logo placeholders, a trust note */
.tj-start__copy { background: none; color: var(--text-body); padding: 24px 8px; }
.tj .tj-start__copy .tj-start__title { color: var(--text-strong); font-size: clamp(2rem, 3.6vw, 3rem); }
.tj-start__copy .te-eyebrow { color: var(--text-muted); letter-spacing: .08em; }
.tj-start__copy .tj-start__sub { color: var(--text-body); }
.tj-steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.tj-steps3 li { display: grid; align-content: start; gap: 4px; padding: 16px; border-radius: var(--r-lg);
  border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body); }
.tj-steps3 b { width: 28px; height: 28px; background: var(--surface-brand); color: var(--text-on-brand); margin-bottom: 6px; }
.tj-steps3 strong { color: var(--text-strong); }
.tj-steps3 span { font-size: var(--fs-sm); color: var(--text-muted); }
.tj-proof { margin: 22px 0 0; color: var(--text-muted); }
.tj-proof p { margin: 0 0 8px; font-size: var(--fs-sm); }
.tj-proof ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tj-proof li { padding: 8px 14px; border-radius: var(--r-md); border: 1px dashed var(--border-strong); font-size: var(--fs-sm);
  font-weight: 600; color: var(--text-body); }
.tj-start__trust { margin-top: 22px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface-selected); color: var(--text-body); }
.tj-start__trust .te-ico { color: var(--text-brand); }
.tj-footer { display: flex; flex-wrap: wrap; gap: 18px; justify-content: flex-start; padding-left: max(24px, calc((100% - 1320px) / 2 + 24px)); }
.tj-footer a, .tj-footer .tj-linkbtn { color: var(--text-link); font-size: inherit; }

/* Screen 2: steps that fold to one line, numbers, the field table, the value box */
.tj-udone { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.tj-udone > span:nth-child(2) { flex: 1; min-width: 0; }
.tj-udone__tick { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--status-success-fg); color: #fff; }
.tj-udone__tick .te-ico { width: 14px; height: 14px; }
.tj-found { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tj-found p { margin: 0; }
.tj-found__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tj-found__stats > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-page); }
.tj-found__stats b { font-size: var(--tj-fs-h1); color: var(--text-strong); }
.tj-found__stats span { font-size: var(--fs-sm); color: var(--text-muted); }
.tj-found .tj-found__head { font-weight: 700; color: var(--text-strong); margin-top: 6px; }
.tj-found__fields { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tj-found__fields th, .tj-found__fields td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--border-subtle); }
.tj-found__fields th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.tj-found__fields td:last-child, .tj-found__fields th:last-child { text-align: right; }
.tj-found__fields .is-warn { color: var(--status-warning-fg); font-weight: 700; }
.tj-mono { font-family: var(--font-mono, ui-monospace, monospace); }
.tj-found p.tj-found__warn { color: var(--status-warning-fg); font-size: var(--fs-sm); }
.tj-value { padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--border-default); }
.tj-value__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: var(--text-strong); }
.tj-value__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tj-value__cols > div { display: grid; gap: 1px; }
.tj-value__cols small, .tj-value__cols span { font-size: var(--fs-xs); color: var(--text-muted); }
.tj-value__cols b { color: var(--text-strong); }
#tj-values { border: 0; padding: 0; }
#tj-values summary { display: none; }
.tj-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.tj-go .te-help { margin: 0; flex: 1 1 260px; }
.tj-privacy__title { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: var(--text-strong); }
.tj-privacy__title .te-ico { width: 18px; height: 18px; color: var(--text-brand); }

/* Screen 3: the right column while you wait */
.tj-waitcard { display: grid; gap: 10px; padding: 20px; border-radius: var(--r-lg); background: var(--tj-navy-800); color: #fff; }
.tj-waitcard .tj-side__label { color: var(--tj-navy-200); }
.tj-waitcard h2 { margin: 0; font-size: var(--tj-fs-h2); color: #fff; }
.tj-waitcard p { margin: 0; color: oklch(100% 0 0 / .85); }
.tj-waitcard .te-btn { background: #fff; color: var(--tj-navy-800); border-color: #fff; }

/* Screen 4: one column */
.tj-proposal.is-case { grid-template-columns: minmax(0, 1fr); }
.tj-proposal.is-case > .tj-proposal__main { gap: 16px; padding: 0; border: 0; background: none; }
.tj-casebar { border-bottom: 0; padding-bottom: 0; }
.tj-casebar__words { align-items: center; gap: 8px; }
.tj-casebar__words b { color: var(--text-strong); }
.tj-casebar__tick { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--status-success-fg); color: #fff; }
.tj-casebar__tick .te-ico { width: 14px; height: 14px; }
.tj-trialstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--surface-card); border: 1px solid var(--border-subtle); font-size: var(--fs-sm); }
.tj-trialstrip > .te-ico { width: 16px; height: 16px; color: var(--text-brand); }
.tj-trialstrip > span { flex: 1 1 320px; }
.tj-trialstrip .tj-countdown__time { font-size: inherit; color: var(--text-brand); font-variant-numeric: tabular-nums; }
/* While the trial is built: title, the step it is on with a segmented bar, and the countdown. */
.tj-trialstrip.is-building { flex-wrap: nowrap; gap: 14px 22px; padding: 14px 18px; border-left: 4px solid var(--border-brand); }
.tj-trialstrip__head .tj-linkbtn { justify-self: start; font-size: var(--fs-xs); margin-top: 2px; }
.tj-trialstrip__mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-brand-subtle); color: var(--text-brand); flex: none; }
.tj-trialstrip__mark .te-ico { width: 20px; height: 20px; }
.tj-trialstrip__head { display: grid; gap: 2px; flex: 0 1 auto; }
.tj-trialstrip__head b { font-size: var(--fs-md); color: var(--text-strong); }
.tj-trialstrip__head small, .tj-trialstrip__clock small { color: var(--text-muted); font-size: var(--fs-xs); }
.tj-trialstrip__step { flex: 1 1 280px; display: grid; gap: 8px; padding: 8px 12px; border-radius: var(--r-md);
  background: var(--surface-sunken); }
.tj-trialstrip__now { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.tj-trialstrip__now small:first-of-type { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-brand); }
.tj-trialstrip__now b { color: var(--text-strong); }
.tj-trialstrip__note { color: var(--text-muted); font-size: var(--fs-xs); }
.tj-trialstrip__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--text-brand); flex: none;
  animation: tj-strip-pulse 1.6s ease-in-out infinite; }
.tj-trialstrip__step.is-held .tj-trialstrip__pulse, .tj-trialstrip__step.is-held .tj-trialstrip__segs .is-now { background: var(--status-warning-fg); }
.tj-trialstrip__step.is-held .tj-trialstrip__now small:first-of-type { color: var(--status-warning-fg); }
.tj-trialstrip__segs { display: flex; gap: 3px; }
.tj-trialstrip__segs i { flex: 1; height: 6px; border-radius: 3px; background: var(--border-default); }
.tj-trialstrip__segs .is-done { background: var(--text-brand); }
.tj-trialstrip__segs .is-now { background: var(--text-brand); opacity: .55; animation: tj-strip-pulse 1.6s ease-in-out infinite; }
.tj-trialstrip__clock { display: grid; justify-items: end; gap: 0; }
.tj-trialstrip__clock .tj-countdown__time { font-size: var(--tj-fs-h1); line-height: 1.1; }
@keyframes tj-strip-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .tj-trialstrip__pulse, .tj-trialstrip__segs .is-now { animation: none; } }
@media (max-width: 900px) { .tj-trialstrip.is-building { flex-wrap: wrap; } }
@media (max-width: 640px) { .tj-trialstrip__clock { justify-items: start; } }
.tj-proposal.is-case .tj-headline { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.2; font-weight: 800; margin: 4px 0 0; }
.tj-headline em { font-style: normal; color: var(--text-brand); }
.tj-proposal.is-case .tj-kpicard { padding: 16px 18px; gap: 4px; }
.tj-proposal.is-case .tj-kpicard > span { font-weight: 500; color: var(--text-muted); }
.tj-proposal.is-case .tj-kpicard b { font-size: var(--tj-fs-metric); }
.tj-proposal.is-case .tj-kpicard b small { font-size: var(--fs-md); color: var(--text-muted); font-weight: 500; }
.tj-kpicard.is-key { border: 2px solid var(--border-brand); }
.tj-coverage.te-card { padding: 16px 18px; gap: 10px; }
.tj-coverage .tj-h3 { margin: 0; }
.tj-coverage__bar { height: 18px; }
.tj-coverage__legend b { margin-right: 4px; }
.tj-worktable.te-card { padding: 16px 18px; }
.tj-worktable__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.tj-worktable__head .tj-h3 { margin: 0; }
.tj-work th.tj-num, .tj-work td.tj-num { text-align: right; }
.tj-work__trial { text-align: right; }
.tj-work__rest td { color: var(--text-muted); }
.tj-assume.te-card { padding: 16px 18px; border-radius: var(--r-lg); }
.tj-assume__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.tj-assume__head .tj-h3 { margin: 0; }
.tj-assume__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.tj-assume__field { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--text-muted); }
.tj-assume__field input, .tj-assume__field select { padding: 9px 12px; border-radius: var(--r-md); border: 1px solid var(--border-default);
  background: var(--surface-card); color: var(--text-strong); font: inherit; }
.tj-assume__field small { font-size: var(--fs-xs); }
.tj-next__grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.tj-next__card { display: grid; gap: 6px; align-content: start; text-align: left; font: inherit; color: var(--text-body); cursor: pointer; }
.tj-next__card b { color: var(--text-strong); font-size: var(--tj-fs-h3); }
.tj-next__card span { font-size: var(--fs-sm); color: var(--text-muted); }
.tj-next__card:hover { border-color: var(--border-brand); }
.tj-next__card.is-dark { background: var(--tj-navy-800); border-color: var(--tj-navy-800); }
.tj-next__card.is-dark b { color: #fff; }
.tj-next__card.is-dark span { color: oklch(100% 0 0 / .8); }
.tj-next__card.is-off { cursor: default; opacity: .85; }
.tj-more2 { display: grid; gap: 8px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--border-default); background: var(--surface-card); }
.tj-more2 > .tj-h3 { margin: 0; }

/* Screen 6: switch person, and the changes as cards */
.tj-person__switch { display: grid; gap: 4px; width: 100%; font-size: var(--fs-sm); color: var(--text-muted); }
.tj-person__switch select { padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--border-default); background: var(--surface-card);
  color: var(--text-strong); font: inherit; }
.tj-changes { gap: 8px; }
.tj-changes .tj-change { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--border-subtle);
  background: var(--surface-card); }
.tj-change__top { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); color: var(--text-muted); }
.tj-change p { margin: 0; font-size: var(--fs-sm); color: var(--text-strong); }
.tj-change a { font-size: var(--fs-sm); font-weight: 600; color: var(--text-link); }
.tj-try__side .tj-h3 { margin: 0; }

/* Screen 9: the pilot request, form on the left, plan / people / pricing on the right */
.tj-pilot { max-width: none; }
.tj-pilot__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.tj-pilot__main { display: grid; gap: 14px; }
.tj-pilot__title { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--text-strong); }
.tj-pilot__sec .tj-h3 small { font-weight: 400; color: var(--text-muted); }
.tj-pilot__grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tj-pilot__field { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--text-muted); }
.tj-pilot__ucs { display: grid; gap: 8px; }
.tj-pilot__uc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border-default); cursor: pointer; }
.tj-pilot__uc.is-on { border: 2px solid var(--border-brand); background: var(--surface-selected); }
.tj-pilot__uc b { flex: 1; color: var(--text-strong); }
.tj-pilot__uc input { accent-color: var(--surface-brand); width: 18px; height: 18px; }
.tj-pilot__targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tj-pilot__target { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-page); }
.tj-pilot__target input { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--text-strong); }
.tj-pilot__targets.is-editing input { padding: 4px 8px; border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--surface-card); }
.tj-pilot__target span { font-size: var(--fs-sm); color: var(--text-body); }
.tj-pilot__rail { display: grid; gap: 14px; position: sticky; top: 16px; }
.tj-pilot__card { display: grid; gap: 8px; padding: 16px 18px; }
.tj-pilot__card .tj-h3, .tj-pilot__card p { margin: 0; }
.tj-pilot__card ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: var(--fs-sm); }
.tj-pilot__card .tj-linkbtn, .tj-pilot__card.is-partner .te-btn { justify-self: start; }
.tj-pilot__card.is-partner { border-color: var(--border-brand); background: var(--surface-selected); }

@media (max-width: 1100px) { .tj-hsteps { gap: 12px; } .tj-assume__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .tj-hsteps { display: none; }
  .tj-pilot__layout { grid-template-columns: 1fr; }
  .tj-pilot__rail { position: static; }
  .tj-steps3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tj-found__stats, .tj-value__cols, .tj-assume__grid, .tj-pilot__grid3, .tj-pilot__targets { grid-template-columns: 1fr; }
}

/* Acme use cases: what to try, how long, and what to say */
.tj-acme__scen { display: flex; flex-direction: column; gap: 8px; }
.tj-acme__scen .te-pill { align-self: flex-start; }
.tj-acme__scen .te-btn { align-self: flex-start; margin-top: auto; }
.tj-acme__meta { margin: 0; font-size: var(--tj-fs-small); color: var(--te-muted, #5b6573); }
.tj-acme__say { margin: 0; display: flex; flex-direction: column; gap: 2px; font-style: italic; }
.tj-acme__say .tj-side__label { font-style: normal; }

/* A button inside a next-step card keeps its own label colour (the card's muted span rule is for its text). */
.tj-next__card .te-btn span { color: inherit; font-size: inherit; }
/* Long addresses (the help mailbox) wrap inside the card rather than run out of it. */
.tj-next__card p { overflow-wrap: anywhere; }

/* The one Acme assistant: a single wide card */
.tj-acme__bot { max-width: 640px; gap: 10px; }
.tj-acme__bot .te-btn { margin-top: 4px; }

/* ===== Acme, spec Screens 6 and 8 ========================================================================== */
/* the header: Home · Business case · Chat · Systems */
.tj-acmenav { font-size: var(--fs-md); color: var(--text-body); }
.tj-acmenav.is-now { color: var(--text-brand); font-weight: 700; }

/* Screen 8: one shell for every sample system */
.tj-sys { display: grid; grid-template-columns: 260px minmax(0, 1fr) 320px; gap: 22px; align-items: start; margin-top: 8px; }
.tj-sys__nav, .tj-sys__how, .tj-sys__card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 14px; }
.tj-sys__nav { display: grid; gap: 4px; padding: 14px; position: sticky; top: 72px; }
.tj-sys__navtitle { margin: 0 6px 6px; font-size: var(--fs-sm); color: var(--text-muted); }
.tj-sys__sys { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border: 0;
  border-radius: 10px; background: none; font: inherit; color: var(--text-strong); text-align: left; cursor: pointer; }
.tj-sys__sys small { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tj-sys__sys:hover { background: var(--surface-subtle); }
.tj-sys__sys.is-on { background: var(--surface-selected); color: var(--text-brand); font-weight: 600; }
.tj-sys__sys.is-on small { color: var(--text-brand); font-weight: 600; }
.tj-sys__nav .te-btn { margin-top: 12px; }
.tj-sys__main { display: grid; gap: 18px; min-width: 0; }
.tj-sys__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.tj-sys__title { margin: 0; font-size: var(--tj-fs-display); line-height: 1.2; color: var(--text-strong); }
.tj-sys__tag { font-size: var(--fs-xs); font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border-default);
  color: var(--text-body); align-self: center; }
.tj-sys__tag.is-live { border-color: var(--status-success-border); background: var(--status-success-bg); color: var(--status-success-fg); }
.tj-sys__card { padding: 18px 20px; display: grid; gap: 12px; min-width: 0; }
.tj-sys__card > .te-btn { justify-self: start; }
.tj-sys__h { margin: 0; font-size: var(--tj-fs-h3); color: var(--text-strong); }
.tj-sys__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tj-sys__table th { text-align: left; font-weight: 500; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); }
.tj-sys__table td { padding: 10px; border-bottom: 1px solid var(--border-subtle); color: var(--text-body); vertical-align: top; }
.tj-sys__table tr:last-child td { border-bottom: 0; }
.tj-sys__table tr.is-new td { background: oklch(97.5% 0.03 85); }
.tj-sys__table tr.is-hit td { background: var(--surface-selected); }
.tj-sys__table tr.is-pick { cursor: pointer; }
.tj-sys__table tr.is-pick:not(.is-new):hover td { background: var(--surface-selected); }
.tj-sys__table .tj-linkbtn { padding: 0; }
.tj-strong { font-weight: 700; color: var(--text-strong) !important; }
.tj-good { color: var(--status-success-fg) !important; font-weight: 600; }
.tj-bad { color: var(--status-danger-fg, oklch(50% 0.17 25)) !important; font-weight: 600; }
.tj-after { color: var(--status-success-fg); font-weight: 600; }
.tj-sys__how { padding: 18px 20px; display: grid; gap: 12px; position: sticky; top: 72px; }
.tj-sys__howtop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tj-sys__steps { margin: 0; padding-left: 20px; display: grid; gap: 14px; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-body); }
.tj-sys__steps b { color: var(--text-strong); }
.tj-sys__sublist { display: grid; gap: 4px; margin-top: 2px; }
@media (max-width: 1100px) { .tj-sys { grid-template-columns: 220px minmax(0, 1fr); } .tj-sys__how { grid-column: 1 / -1; position: static; } }
@media (max-width: 760px) { .tj-sys { grid-template-columns: 1fr; } .tj-sys__nav { position: static; } }

/* Screen 6: the chat (every Try view) */
.tj-try.is-s6 .tj-back, .tj-try.is-s6 .tj-chat__safe, .tj-try.is-s6 .tj-chat__status, .tj-try.is-acme .tj-channels { display: none; }
/* the channels, on your own trial: quiet tabs under the chat's title */
.tj-try.is-s6 .tj-channels { padding: 0 22px; border-bottom: 1px solid var(--border-subtle); }
.tj-try.is-s6 .tj-chat__head { padding: 16px 22px; }
.tj-try.is-s6 .tj-chat__who b { font-size: var(--tj-fs-h3); }
.tj-try.is-s6 .tj-roles { background: var(--surface-subtle); padding: 6px; border-radius: 12px; }
.tj-try.is-s6 .tj-roles__btn { padding: 9px 8px; }
.tj-try.is-s6 .tj-person, .tj-try.is-s6 .tj-say { background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: 14px; padding: 16px; display: grid; gap: 10px; }
.tj-try.is-s6 .tj-persona__try b { color: var(--text-strong); }
.tj-say__title { margin: 0; font-size: var(--tj-fs-h3); color: var(--text-strong); }
.tj-try.is-s6 .tj-example { background: var(--surface-card); border: 1px solid var(--border-default); }
.tj-try.is-s6 .tj-example .te-ico { display: none; }
.tj-say__own { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.tj-try.is-s6 .tj-avatar { display: none; }
.tj-try.is-s6 .tj-msgrow .tj-msg { max-width: 82%; }
.tj-try.is-s6 .tj-msg--bot { background: var(--surface-subtle); border: 0; border-radius: 12px; padding: 14px 18px; }
.tj-try.is-s6 .tj-msg--user { border-radius: 14px; padding: 12px 18px; }
.tj-notechip { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 6px; font-size: var(--fs-sm);
  color: var(--tj-guide-label); background: var(--tj-guide-bg); border: 1px dashed var(--tj-guide-border); }
.tj-try.is-s6 .tj-card--approval { background: var(--surface-card); border: 1px solid var(--border-default); padding: 16px 18px; }
.tj-try.is-s6 .tj-card__head { display: none; }
.tj-try.is-s6 .tj-card__stamp { color: var(--status-success-fg); }
.tj-try.is-s6 .tj-guide { border-radius: var(--r-lg); padding: 16px 18px; }
.tj-change { list-style: none; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-card);
  display: grid; gap: 4px; }
.tj-change__top { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); color: var(--text-muted); }
.tj-change p { margin: 0; font-size: var(--fs-sm); color: var(--text-strong); }
.tj-change a, .tj-change .tj-linkbtn { justify-self: start; font-size: var(--fs-sm); font-weight: 600; padding: 0; }
.tj-try.is-s6 .tj-changes { gap: 10px; }
.tj-sys__table td.tj-num { white-space: nowrap; }

/* Screen 6: a white conversation with light blue-grey bot bubbles; the role tabs on a tinted block */
.tj-try.is-s6 .tj-chat__log { background: var(--surface-card); }
.tj-try.is-s6 .tj-msg--bot { background: oklch(96.6% 0.011 264); }
.tj-try.is-s6 .tj-roles { background: oklch(94.2% 0.013 264); }
.tj-try.is-s6 .tj-roles__btn.is-on { background: var(--surface-card); box-shadow: 0 1px 2px oklch(0% 0 0 / .08); }
.tj-try.is-s6 .tj-rolebanner { background: oklch(96.6% 0.011 264); }

/* ===== spec Screen 7: the channels take the full width (no "You" or "What changed" columns) ================ */
.tj-proposal.tj-try[data-channel="email"], .tj-proposal.tj-try[data-channel="glpi"], .tj-proposal.tj-try[data-channel="teams"] { grid-template-columns: minmax(0, 1fr); }
.tj-try[data-channel="email"] > .tj-you, .tj-try[data-channel="glpi"] > .tj-you, .tj-try[data-channel="teams"] > .tj-you,
.tj-try[data-channel="email"] > .tj-try__side, .tj-try[data-channel="glpi"] > .tj-try__side, .tj-try[data-channel="teams"] > .tj-try__side,
.tj-try[data-channel="email"] .tj-mtabs, .tj-try[data-channel="glpi"] .tj-mtabs, .tj-try[data-channel="teams"] .tj-mtabs { display: none; }
.tj-try.is-acme[data-channel="email"] .tj-chat__head, .tj-try.is-acme[data-channel="glpi"] .tj-chat__head,
.tj-try.is-acme[data-channel="teams"] .tj-chat__head { display: none; }
.tj-try[data-channel="email"] .tj-chat, .tj-try[data-channel="glpi"] .tj-chat, .tj-try[data-channel="teams"] .tj-chat {
  background: none; border: 0; box-shadow: none; height: auto; min-height: calc(100vh - 140px); }
.tj-try[data-channel="email"] #tj-channel-pane, .tj-try[data-channel="glpi"] #tj-channel-pane, .tj-try[data-channel="teams"] #tj-channel-pane {
  padding: 0; border: 0; background: none; flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* 7a Email: sample mailboxes */
.tj-mail { display: grid; gap: 16px; }
.tj-mail__banner { padding: 12px 18px; border-radius: 12px; background: oklch(95.5% 0.012 264); font-size: var(--fs-md); color: var(--text-body); }
.tj-mail__banner b { color: var(--text-strong); }
.tj-mail__banner .tj-linkbtn, .tj-mail__banner .tj-pick { margin-left: 4px; }
.tj-mail__grid { display: grid; grid-template-columns: 240px 400px minmax(0, 1fr); background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: 14px; min-height: 620px; overflow: hidden; }
.tj-mail__boxes { padding: 16px 14px; display: grid; gap: 4px; align-content: start; border-right: 1px solid var(--border-subtle); }
.tj-mail__label { margin: 0 8px 6px; font-size: var(--fs-sm); color: var(--text-muted); }
.tj-mail__box { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border: 0; border-radius: 10px;
  background: none; font: inherit; font-size: 1rem; color: var(--text-strong); text-align: left; cursor: pointer; }
.tj-mail__box:hover { background: var(--surface-subtle); }
.tj-mail__box.is-on { background: var(--surface-selected); color: var(--text-brand); font-weight: 600; }
.tj-mail__count { min-width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; font-size: var(--fs-xs);
  color: #fff; background: var(--surface-brand); }
.tj-mail__list { border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; min-width: 0; }
.tj-mail__listhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 22px 12px; }
.tj-mail__listhead h3 { margin: 0; font-size: 1.1rem; color: var(--text-strong); }
.tj-mail__item { display: grid; gap: 3px; padding: 14px 22px; border: 0; border-bottom: 1px solid var(--border-subtle); background: none;
  font: inherit; text-align: left; cursor: pointer; color: var(--text-body); }
.tj-mail__item:hover { background: var(--surface-subtle); }
.tj-mail__item.is-on { background: oklch(96.3% 0.011 264); }
.tj-mail__itemtop { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); }
.tj-mail__itemtop b { color: var(--text-strong); }
.tj-mail__itemtop time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tj-mail__subj { font-weight: 600; color: var(--text-strong); }
.tj-mail__peek { font-size: var(--fs-sm); color: var(--text-muted); }
.tj-mail__empty { margin: 18px 22px; color: var(--text-muted); font-size: var(--fs-sm); }
.tj-mail__read { padding: 26px 34px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.tj-mail__title { margin: 0; font-size: 1.55rem; line-height: 1.25; color: var(--text-strong); }
.tj-mail__meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-sm); color: var(--text-muted); }
.tj-mail__meta b { color: var(--text-strong); }
.tj-mail__body { display: grid; gap: 12px; font-size: 1rem; line-height: 1.6; color: var(--text-strong); }
.tj-mail__body p { margin: 0; white-space: pre-wrap; }
.tj-mail__who { font-size: var(--fs-sm) !important; color: var(--text-muted) !important; }
.tj-mail__note { padding: 14px 18px; border-radius: 10px; border: 1px dashed oklch(82% 0.08 70); background: oklch(98% 0.02 75);
  font-size: var(--fs-sm); line-height: 1.55; color: var(--text-body); }
.tj-mail__note b { color: oklch(48% 0.12 55); }
.tj-mail__links { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding-top: 14px; border-top: 1px solid var(--border-subtle);
  margin: 0; font-size: var(--fs-sm); }
.tj-mail__compose { display: grid; gap: 10px; }
.tj-mail__compose input, .tj-mail__compose textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 10px; }
.tj-mail__compose .te-btn { justify-self: start; }

/* 7b GLPI: the service portal */
.tj-glpi { display: grid; gap: 0; background: oklch(96.5% 0.004 264); border-radius: 14px; overflow: hidden; border: 1px solid var(--border-subtle); }
.tj-glpi__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 12px 24px; background: oklch(24% 0.06 264); color: #e8ecf6; }
.tj-glpi__bar b { color: #fff; }
.tj-glpi__mark { color: oklch(70% 0.17 50); font-weight: 800; }
.tj-glpi__link { border: 0; background: none; color: #dfe6f5; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.tj-glpi__back { margin-left: auto; font-weight: 700; color: #fff; }
.tj-glpi__bar .tj-pick { font: inherit; }
.tj .tj-mail__bar + .tj-mail__grid { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
.tj-glpi__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; padding: 14px 24px; background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle); }
.tj-glpi__nav > b { font-size: 1.05rem; color: var(--text-strong); }
.tj-glpi__tab { border: 0; background: none; font: inherit; font-size: 1rem; color: var(--text-body); cursor: pointer; padding: 2px 0; }
.tj-glpi__tab.is-on { color: var(--text-brand); font-weight: 700; }
.tj-glpi__body { padding: 22px 24px; min-height: 560px; }
.tj-glpi__card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 20px 24px; display: grid; gap: 12px; }
.tj-glpi__card h2, .tj-glpi__card h3 { margin: 0; color: var(--text-strong); }
.tj-glpi__page { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.tj-glpi__main { display: grid; gap: 18px; min-width: 0; }
.tj-glpi__title { font-size: 1.7rem; }
.tj-glpi__card > p.te-muted { margin: 0; }
.tj-glpi__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tj-glpi__step { padding: 10px 14px; border-radius: 8px; background: var(--surface-subtle); color: var(--text-muted); font-weight: 600; font-size: var(--fs-sm); }
.tj-glpi__step.is-done { background: oklch(95% 0.03 155); color: oklch(45% 0.12 155); }
.tj-glpi__step.is-now { background: oklch(48% 0.12 155); color: #fff; }
.tj-glpi__note { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border-subtle); }
.tj-glpi__note:last-of-type { border-bottom: 0; }
.tj-glpi__note p { margin: 0; color: var(--text-strong); }
.tj-glpi__note.is-private { background: oklch(98.4% 0.018 80); margin: 0 -12px; padding: 14px 12px; border-radius: 8px; }
.tj-glpi__who { font-size: var(--fs-sm); color: var(--text-muted) !important; margin-bottom: 2px !important; }
.tj-glpi__who b { color: var(--text-strong); }
.tj-glpi__internal { margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); background: oklch(93% 0.05 80); color: oklch(45% 0.1 60); }
.tj-glpi__av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm);
  background: var(--surface-selected); color: var(--text-brand); }
.tj-glpi__av.is-bot { background: oklch(30% 0.09 264); color: oklch(70% 0.17 50); font-size: 1.1rem; }
.tj-glpi__hidden { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.tj-glpi__details { gap: 14px; }
.tj-glpi__kv { display: grid; gap: 2px; }
.tj-glpi__kv span { font-size: var(--fs-sm); color: var(--text-muted); }
.tj-glpi__kv b { color: var(--text-strong); font-weight: 500; }
.tj-glpi__pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 12px; }
.tj-glpi__pager .te-muted { margin-right: auto; font-size: var(--fs-sm); }
.tj-glpi__forms { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.tj-glpi__form { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-card);
  font: inherit; text-align: left; cursor: pointer; }
.tj-glpi__form:hover { border-color: var(--border-brand); }
.tj-glpi__art { padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.tj-glpi__art p { margin: 4px 0 0; color: var(--text-body); }

/* 7c Teams view (simulated): a neutral design, not a copy of the real product */
.tj-teams { display: grid; gap: 12px; }
.tj-teams__banner { font-size: var(--fs-md); color: var(--text-body); }
.tj-teams__banner b { color: var(--text-strong); }
.tj-teams__frame { position: relative; display: grid; grid-template-columns: 76px 340px minmax(0, 1fr); min-height: 640px;
  border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; background: var(--surface-card); }
.tj-teams__rail { background: oklch(28% 0.04 264); display: grid; align-content: start; justify-items: center; gap: 14px; padding: 18px 0; }
.tj-teams__ico { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: oklch(82% 0.02 264); }
.tj-teams__ico.is-on { background: oklch(38% 0.05 264); color: #fff; }
.tj-teams__list { border-right: 1px solid var(--border-subtle); display: grid; align-content: start; }
.tj-teams__list h3 { margin: 0; padding: 22px 22px 14px; font-size: 1.2rem; color: var(--text-strong); }
.tj-teams__item { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 12px 22px; }
.tj-teams__item.is-on { background: oklch(96.4% 0.008 264); }
.tj-teams__item b { display: block; color: var(--text-strong); }
.tj-teams__item span { font-size: var(--fs-sm); color: var(--text-muted); }
.tj-teams__item > div { min-width: 0; }
.tj-teams__item > div span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-teams__av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm);
  background: var(--surface-selected); color: var(--text-brand); }
.tj-teams__av.is-bot { background: oklch(30% 0.09 264); color: oklch(70% 0.17 50); font-size: 1.15rem; }
.tj-teams__dot { width: 9px; height: 9px; border-radius: 50%; background: oklch(68% 0.17 50); }
.tj-teams__conv { display: flex; flex-direction: column; min-width: 0; background: oklch(98.6% 0.004 264); }
.tj-teams__head { padding: 18px 26px; font-weight: 700; font-size: 1.05rem; color: var(--text-strong); border-bottom: 1px solid var(--border-subtle); background: var(--surface-card); }
.tj-teams__conv .tj-chat__log { flex: 1; background: none !important; padding: 22px 26px; }
.tj-teams__conv .tj-msg { max-width: 72%; border-radius: 6px; padding: 0 !important; background: none !important; border: 0 !important; color: var(--text-strong); }
.tj-teams__conv .tj-msg::before { content: attr(data-time); display: block; font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 6px; }
.tj-teams__conv .tj-msg--bot::before { content: "SupportFlo · " attr(data-time); }
.tj-teams__conv .tj-msg--bot > .tj-md { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 12px 16px; }
.tj-teams__conv .tj-msg--user { align-self: flex-end; text-align: left; }
.tj-teams__conv .tj-msg--user::before { text-align: right; }
.tj-teams__conv .tj-msg--user > * { background: oklch(93.5% 0.03 264); border-radius: 6px; padding: 10px 14px; display: block; }
.tj-teams__conv .tj-card--approval { background: var(--surface-card) !important; border: 1px solid var(--border-subtle) !important;
  border-top: 4px solid var(--surface-brand) !important; border-radius: 6px; padding: 18px 22px !important; }
.tj-teams__conv .tj-card__head { display: flex !important; }
.tj-teams__conv .tj-chat__form { padding: 14px 26px 20px; border-top: 1px solid var(--border-subtle); background: var(--surface-card); }
.tj-teams__toast { position: absolute; top: 76px; right: 18px; z-index: 5; display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center;
  padding: 14px 18px; border-radius: 10px; background: var(--surface-card); box-shadow: 0 6px 24px oklch(0% 0 0 / .14); max-width: 440px; }
.tj-teams__toast b { display: block; color: var(--text-strong); }
.tj-teams__toast span { font-size: var(--fs-sm); color: var(--text-body); }
@media (max-width: 1100px) {
  .tj-mail__grid { grid-template-columns: 200px minmax(0, 1fr); }
  .tj-mail__read { grid-column: 1 / -1; border-top: 1px solid var(--border-subtle); }
  .tj-glpi__page { grid-template-columns: 1fr; }
  .tj-teams__frame { grid-template-columns: 64px minmax(0, 1fr); }
  .tj-teams__list { display: none; }
}
@media (max-width: 700px) {
  .tj-mail__grid { grid-template-columns: 1fr; }
  .tj-mail__boxes, .tj-mail__list { border-right: 0; }
  .tj-glpi__steps { grid-template-columns: 1fr; }
}

/* the admin bar's destructive action */
.te-btn.tj-danger { color: var(--status-danger-fg, oklch(50% 0.17 25)); border-color: oklch(85% 0.06 25); }

/* A change card is one column (the older list rule set three narrow ones, and the text overlapped) */
.tj-changes li.tj-change { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.tj-change__top { flex-wrap: wrap; }
.tj-change__top > span { font-weight: 600; color: var(--text-body); }
.tj-change p { overflow-wrap: anywhere; }

/* ======== SupportFlo design system (Stitch): one style per pattern ========
   The rules above grew screen by screen; these bring each repeated pattern back to the one the design system draws. */
.tj { --fs-base: var(--tj-fs-body); }
.tj .te-h1 { font-size: var(--tj-fs-h1); line-height: 1.33; font-weight: 600; letter-spacing: -.015em; }
.tj .te-h2 { font-size: var(--tj-fs-h2); line-height: 1.4; font-weight: 600; letter-spacing: -.01em; }
.tj .te-h3 { font-size: var(--tj-fs-h3); line-height: 1.5; font-weight: 600; }

/* cards: white on the page tint, a hairline and a soft lift */
.tj .te-card, .tj .te-kpi, .tj .te-sidecard, .tj .te-table-wrap, .tj .te-summary, .tj .tj-steps3 li {
  border-color: var(--border-default); box-shadow: var(--tj-shadow-card); }

/* header: Free trial is the orange tag; the current step is a navy pill, done steps keep the ink and gain a green tick */
.tj-brand__trial { background: var(--tj-guide-bg); color: var(--tj-guide-label); font-size: var(--fs-xs); }
.tj-hsteps { gap: 8px; }
.tj-hsteps__step { padding: 4px 10px; border-radius: var(--radius-pill); }
.tj-hsteps__step.is-done { color: var(--text-body); }
.tj-hsteps__step.is-done .te-ico { color: var(--status-success-fg); }
.tj-hsteps__step.is-now { background: var(--surface-brand-subtle); color: var(--text-brand); }

/* eyebrow: a quiet navy pill led by an orange dot */
.tj .tj-start__copy .te-eyebrow { justify-self: start; padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--surface-brand-subtle); color: var(--text-brand); letter-spacing: .08em; }
.tj .tj-start__copy .te-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tj-accent); }

/* Screen 1 step cards: a tinted square per step (navy, orange, green), not three identical solid dots */
.tj-steps3 li { padding: 20px; }
.tj-steps3 b { width: 32px; height: 32px; border-radius: var(--r-md); }
.tj-steps3 li:nth-child(1) b { background: var(--surface-brand-subtle); color: var(--text-brand); }
.tj-steps3 li:nth-child(2) b { background: var(--tj-guide-bg); color: var(--tj-guide-label); }
.tj-steps3 li:nth-child(3) b { background: var(--status-success-bg); color: var(--status-success-fg); }
.tj-steps3 strong { font-size: var(--tj-fs-h3); }

/* the trust note: the shield on a white tile */
.tj-start__trust { gap: 14px; padding: 18px 20px; background: var(--surface-brand-subtle); }
.tj-start__trust > span:first-child { flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--r-md); background: var(--surface-card); }
.tj-start__trust .te-ico { margin-top: 0; }

/* table headers: one style everywhere: 12px caps on the sunken tint */
.tj .te-table th, .tj-table th, .tj-work th, .tj-assume__table th, .tj-found__fields th, .tj-sys__table th, .tj-admin__cost th {
  background: var(--surface-sunken); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; }

/* metrics: tabular figures, tightened like the scale's metric role */
.tj-kpi b, .tj-kpicard b, .tj-stat b, .tj-found__stats b, .tj-countdown__time { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ---- Screen 3, reading your tickets: a banner, the heading, a timeline of stage cards; the side column ---- */
#tj-proposal:not(.is-case) { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; }
#tj-proposal:not(.is-case) > .tj-proposal__main { gap: 24px; padding: 0; border: 0; background: none; box-shadow: none; }
.tj-waitbar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 20px; border-radius: var(--r-lg);
  background: var(--surface-brand-subtle); }
.tj-waitbar__where { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; flex: 1 1 auto; color: var(--text-strong); }
.tj-waitbar__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-brand); }
.tj-waitbar__who { padding-left: 12px; border-left: 1px solid var(--border-strong); color: var(--text-muted); font-size: var(--fs-sm); }
.tj-waitbar__pace { display: inline-flex; align-items: center; gap: 6px; color: var(--text-brand); font-weight: 600;
  font-variant-numeric: tabular-nums; }
.tj-waitbar__meter, .tj-stage2__meter { height: 6px; border-radius: var(--radius-pill); background: var(--border-default); overflow: hidden; }
.tj-waitbar__meter { flex: 0 0 160px; }
.tj-waitbar__meter > span, .tj-stage2__meter > span { display: block; height: 100%; border-radius: inherit; background: var(--surface-brand);
  transition: width .4s ease; }
.tj-stage2__meter > span { background: var(--tj-accent); }

.tj-waithead { display: grid; gap: 8px; }
.tj-waithead__eyebrow { justify-self: start; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--status-info-bg);
  color: var(--status-info-fg); text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); }
.tj .tj-waithead__title { margin: 4px 0 0; font-size: var(--tj-fs-display); line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
.tj-waithead__sub { margin: 0; font-size: var(--tj-fs-lead); color: var(--text-muted); }
.tj-waithead__mail { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-body); }
.tj-waithead__mail .te-ico { color: var(--tj-guide-label); }
.tj-waithead__mail b { color: var(--text-strong); overflow-wrap: anywhere; }

.tj-stagecard { padding: 24px 28px; border: 1px solid var(--border-default); border-radius: var(--r-lg); background: var(--surface-card);
  box-shadow: var(--tj-shadow-card); }
.tj-stagecard__head { display: grid; gap: 2px; margin-bottom: 20px; }
.tj-stagecard__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.tj-stage2 { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
/* the line that joins the markers */
.tj-stage2:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: -16px; width: 2px;
  background: var(--border-default); }
.tj-stage2.is-done:not(:last-child)::before { background: var(--status-success-fg); }
.tj-stage2__dot { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-sunken); color: var(--text-muted); font-weight: 600; font-size: var(--fs-sm); }
.tj-stage2.is-done .tj-stage2__dot { background: var(--status-success-fg); color: #fff; }
.tj-stage2.is-active .tj-stage2__dot { background: var(--surface-brand-subtle); color: var(--text-brand); }
.tj-stage2__spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: te-spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .tj-stage2__spin { animation: none; } }
.tj-stage2__card { display: grid; gap: 6px; padding: 14px 18px; border-radius: var(--r-lg); background: var(--surface-page); min-width: 0; }
.tj-stage2.is-active .tj-stage2__card { background: var(--surface-brand-subtle); box-shadow: inset 0 0 0 1px var(--border-default); }
.tj-stage2.is-waiting .tj-stage2__card { opacity: .7; }
.tj-stage2__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tj-stage2__row b { color: var(--text-strong); }
.tj-stage2__text { margin: 0; color: var(--text-body); }
.tj-stage2.is-active .tj-stage2__text { color: var(--text-brand); font-weight: 600; }
.tj-stage2__how { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.tj-stage2__how .te-ico { flex: none; width: 15px; height: 15px; margin-top: 2px; }

/* the side column: the sample trial (a navy edge), invite, how we handle your tickets */
.tj .tj-waitcard { gap: 12px; padding: 22px 22px 22px 26px; border: 1px solid var(--border-default); border-left: 4px solid var(--surface-brand);
  background: var(--surface-card); color: var(--text-body); box-shadow: var(--tj-shadow-card); }
.tj .tj-waitcard .tj-side__label { display: inline-flex; align-items: center; gap: 6px; color: var(--tj-guide-label); }
.tj .tj-waitcard h2 { color: var(--text-strong); }
.tj .tj-waitcard p { color: var(--text-body); }
.tj .tj-waitcard .te-btn--primary { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--text-on-brand); }
/* the demo card, Explore now: a soft brand tint, a little picture of the demo, a play button to open it */
.tj .tj-waitcard { border: 1px solid var(--border-brand, var(--border-default)); background: var(--surface-brand-subtle); }
.tj .tj-waitcard .tj-side__label { margin: 0; color: var(--tj-guide-label); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; }
.tj-waitcard__head { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; align-items: start; }
.tj-waitcard__head > div:first-child { display: grid; gap: 10px; }
.tj .tj-waitcard h2 { margin: 0; font-size: var(--tj-fs-h2); line-height: 1.2; }
.tj-waitcard__pic svg { display: block; width: 96px; height: auto; }
.tj-waitcard__pic .w { fill: var(--surface-card); stroke: var(--border-default); }
.tj-waitcard__pic circle:not(.c) { fill: var(--surface-brand); opacity: .55; }
.tj-waitcard__pic .p { fill: var(--surface-page, var(--surface-card)); stroke: var(--border-subtle); }
.tj-waitcard__pic .b0 { fill: var(--surface-brand); opacity: .35; }
.tj-waitcard__pic .b1 { fill: var(--surface-brand); opacity: .7; }
.tj-waitcard__pic .c { fill: var(--surface-brand); }
.tj-waitcard__pic .t { fill: var(--text-on-brand); }
.tj .tj-waitcard__go { justify-content: center; gap: 10px; }
.tj-waitcard__note { display: flex; gap: 8px; font-size: var(--fs-sm); }
.tj .tj-waitcard__note { color: var(--text-muted); }
.tj-waitcard__note .te-ico { flex: none; margin-top: 2px; }
.tj-sidecard2 { display: grid; gap: 10px; justify-items: start; padding: 22px; border: 1px solid var(--border-default); border-radius: var(--r-lg);
  background: var(--surface-card); box-shadow: var(--tj-shadow-card); }
.tj-sidecard2 h3 { margin: 0; font-size: var(--tj-fs-h3); color: var(--text-strong); }
.tj-sidecard2 p { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.tj-sidecard2 .te-btn--block { justify-self: stretch; }
.tj-sidecard2__icon { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--surface-brand-subtle); color: var(--text-brand); }
.tj-sidecard2--safe { background: var(--surface-brand-subtle); border-color: transparent; box-shadow: none; }
.tj-sidecard2--safe .tj-sidecard2__icon { background: var(--status-success-bg); color: var(--status-success-fg); }
@media (max-width: 1100px) { #tj-proposal:not(.is-case) { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .tj-stagecard { padding: 18px 16px; }
  .tj-stage2 { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
  .tj-stage2__dot { width: 32px; height: 32px; }
  .tj-stage2:not(:last-child)::before { left: 15px; top: 32px; }
  .tj-waitbar__meter { flex-basis: 100%; }
}

/* ---- Screen 4, the business case ---- */
/* the header row is a card: the green tick, the title, the ticket count as a tag, the actions */
.tj-proposal.is-case .tj-casebar { padding: 18px 22px; border: 1px solid var(--border-default); border-radius: var(--r-lg);
  background: var(--surface-card); box-shadow: var(--tj-shadow-card); }
.tj-casebar__words b { font-size: var(--tj-fs-h2); }
.tj-casebar__tick { width: 36px; height: 36px; background: var(--status-success-bg); color: var(--status-success-fg); }
.tj-casebar__tick .te-ico { width: 18px; height: 18px; }
.tj-casebar__meta { padding: 2px 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-muted);
  font-size: var(--fs-xs); font-weight: 500; }
/* the trial strip: the guide's orange tint, not a second navy panel */
.tj .tj-trialstrip { background: var(--tj-guide-bg); border: 1px solid var(--tj-guide-border); }
.tj .tj-trialstrip.is-building { border-left: 1px solid var(--tj-guide-border); }
.tj .tj-trialstrip > .te-ico, .tj .tj-trialstrip__mark { color: var(--tj-guide-label); }
.tj .tj-trialstrip__mark { background: var(--surface-card); }
/* the headline: the scale's display step */
.tj-proposal.is-case .tj-headline { font-size: var(--tj-fs-display); line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
/* the four tiles: a caps label, the metric, a footer band; "Value a year" lifted, not outlined */
.tj-proposal.is-case .tj-kpicard { padding: 18px 20px 0; gap: 8px; border: 1px solid var(--border-default); border-radius: var(--r-lg);
  background: var(--surface-card); box-shadow: var(--tj-shadow-card); overflow: hidden; }
.tj-proposal.is-case .tj-kpicard > span { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.tj-proposal.is-case .tj-kpicard > small { margin: 6px -20px 0; padding: 10px 20px; border-top: 1px solid var(--border-subtle);
  background: var(--surface-page); color: var(--text-body); font-size: var(--fs-sm); }
.tj-proposal.is-case .tj-kpicard.is-key { border: 1px solid var(--border-default); box-shadow: 0 4px 14px rgb(31 45 107 / .1), var(--tj-shadow-card); }
.tj-proposal.is-case .tj-kpicard.is-key > span { color: var(--text-brand); }
[data-theme="dark"] .tj-proposal.is-case .tj-kpicard.is-key { box-shadow: none; border-color: var(--border-brand); }
/* the year's tickets: a taller bar with the shares inside, the legend as three tiles */
.tj .tj-coverage .is-trial { --c: var(--tj-navy-800); --on: #fff; }
.tj .tj-coverage .is-ready { --c: var(--tj-navy-500); --on: #fff; }
.tj .tj-coverage .is-stays { --c: var(--border-strong); --on: var(--text-strong); }
.tj-coverage.te-card { padding: 20px 22px; gap: 14px; }
.tj .tj-coverage__bar { height: 24px; gap: 2px; background: none; }
.tj-coverage__bar span { display: grid; place-items: center; color: var(--on); font-size: var(--fs-xs); font-weight: 600;
  font-variant-numeric: tabular-nums; overflow: hidden; white-space: nowrap; }
.tj-coverage__bar span:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.tj-coverage__bar span:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.tj-coverage__bar span:only-child { border-radius: var(--radius-pill); }
.tj .tj-coverage__legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tj .tj-coverage__legend > span { align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface-page); }
.tj .tj-coverage__legend i { flex: none; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; }
.tj-coverage__words { display: grid; }
.tj-coverage__words b { margin: 0; color: var(--text-strong); font-size: var(--fs-sm); font-weight: 600; }
.tj-coverage__words b::first-letter { text-transform: uppercase; }
.tj-coverage__words small { color: var(--text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
/* the assumptions: filled inputs, as in the design system's form fields */
.tj .tj-assume input, .tj .tj-assume select { background: var(--surface-page); border-color: var(--border-default); }
.tj .tj-assume input:focus, .tj .tj-assume select:focus { background: var(--surface-card); }
/* what's next: an icon tile, the title, a line and the action at the foot; the first card is navy */
.tj-next__grid { gap: 16px; }
.tj .tj-next__card { gap: 8px; min-height: 200px; padding: 20px; border: 1px solid var(--border-default); background: var(--surface-card);
  box-shadow: var(--tj-shadow-card); grid-template-rows: auto auto 1fr auto; }
.tj .tj-next__card > .tj-next__icon { width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 6px;
  background: var(--surface-brand-subtle); color: var(--text-brand); }
.tj .tj-next__card > .tj-next__go { display: inline-flex; align-items: center; gap: 6px; align-self: end; margin-top: 8px;
  font-size: var(--fs-md); font-weight: 600; color: var(--text-brand); }
.tj-next__go .te-ico { width: 15px; height: 15px; transition: transform .15s ease; }
.tj-next__card:hover .tj-next__go .te-ico { transform: translateX(2px); }
.tj .tj-next__card.is-dark { background: var(--surface-brand); border-color: var(--surface-brand); }
.tj .tj-next__card.is-dark > .tj-next__icon { background: oklch(100% 0 0 / .14); color: #fff; }
.tj .tj-next__card.is-dark > .tj-next__go { justify-self: stretch; justify-content: center; padding: 9px 14px; border-radius: var(--r-md);
  background: var(--surface-card); color: var(--tj-navy-800); }
/* compact horizontal variant: icon | divider | title + line */
.tj .tj-next__card.is-row { grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center;
  min-height: 0; gap: 2px 16px; padding: 16px 20px; }
.tj .tj-next__card.is-row > .tj-next__icon { grid-row: 1 / 3; margin: 0; width: auto; height: auto; border-radius: 0; background: none;
  padding-right: 16px; border-right: 1px solid var(--border-default); color: var(--text-brand); }
.tj .tj-next__card.is-row > .tj-next__icon .te-ico { width: 24px; height: 24px; }
.tj .tj-next__card.is-row > .tj-next__text { display: grid; gap: 2px; grid-row: 1 / 3; }
.tj .tj-next__card.is-row > .tj-next__text b { font-size: var(--tj-fs-h3); }
.tj .tj-next__card.is-row.is-dark > .tj-next__icon { background: none; border-right-color: oklch(100% 0 0 / .28); color: #fff; }
@media (max-width: 700px) { .tj .tj-coverage__legend { grid-template-columns: 1fr; } }

/* ---- Screen 5, the Acme launchpad: a navy welcome, things to try, channels, systems, roles; a rail of cards ---- */
.tj-acme__layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
.tj-acme__main { gap: 32px; }
.tj-acme__block { display: grid; gap: 14px; }
.tj-acme__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; }
.tj-acme__head p { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.tj .tj-acme__h { margin: 0; font-size: var(--tj-fs-h1); line-height: 1.33; font-weight: 600; letter-spacing: -.015em; color: var(--text-strong); }
.tj-acme__count { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-muted);
  font-size: var(--fs-xs); font-weight: 600; }
.tj-acme__note { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.tj-acme__note .te-ico { color: var(--tj-accent); }

/* the welcome */
.tj-acmehero { display: grid; gap: 10px; padding: 28px; border-radius: var(--r-lg); background: var(--tj-hero); color: #fff; }
.tj-acmehero__chip { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 12px;
  border-radius: var(--radius-pill); background: oklch(100% 0 0 / .12); font-size: var(--fs-xs); font-weight: 600; }
.tj-acmehero__dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(78% 0.15 155); }
.tj .tj-acmehero__title { margin: 4px 0 0; color: #fff; font-size: var(--tj-fs-display); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.tj-acmehero__sub { margin: 0; max-width: 62ch; color: oklch(100% 0 0 / .8); }
.tj-acmehero__start { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 12px;
  padding: 16px 20px; border-radius: var(--r-md); border-left: 4px solid var(--tj-accent); background: var(--surface-card); color: var(--text-body); }
.tj-acmehero__start p { margin: 0; }
.tj-acmehero__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 4px !important; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tj-guide-label); }
.tj-acmehero__meta b { color: var(--text-strong); }
.tj-acmehero__meta > * + *::before { content: "·"; margin-right: 10px; color: var(--tj-accent); }

/* things to try */
.tj-trycards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* a card per request: its coloured icon, title and story, an arrow that moves on hover; the whole card opens the chat */
.tj-trycard { --tone-bg: var(--status-info-bg); --tone-fg: var(--status-info-fg);
  position: relative; overflow: hidden; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px;
  grid-template-areas: "icon title arrow" "icon foot arrow"; grid-template-rows: 1fr auto; align-items: center;
  padding: 22px 22px 22px 26px; border: 1px solid var(--border-default); border-radius: var(--r-lg); background: var(--surface-card);
  box-shadow: var(--tj-shadow-card); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.tj-trycard.is-red { --tone-bg: var(--status-danger-bg); --tone-fg: var(--status-danger-fg); }
.tj-trycard.is-green { --tone-bg: var(--status-success-bg); --tone-fg: var(--status-success-fg); }
.tj-trycard.is-amber { --tone-bg: var(--status-warning-bg); --tone-fg: var(--status-warning-fg); }
.tj-trycard::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--tone-fg); }
.tj-trycard:hover, .tj-trycard:focus-visible { border-color: var(--tone-fg); transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px oklch(30% 0.05 260 / .35); }
.tj-trycard:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.tj-trycard__icon { grid-area: icon; width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r-md);
  background: var(--tone-bg); color: var(--tone-fg); }
.tj-trycard__icon .te-ico { width: 24px; height: 24px; }
.tj-trycard__arrow { grid-area: arrow; align-self: center; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-sunken); color: var(--text-muted); transition: background .15s ease, color .15s ease, transform .15s ease; }
.tj-trycard__arrow .te-ico { width: 16px; height: 16px; }
.tj-trycard:hover .tj-trycard__arrow, .tj-trycard:focus-visible .tj-trycard__arrow { background: var(--tone-fg); color: #fff; transform: translateX(3px); }
.tj-trycard h3 { grid-area: title; margin: 0; font-size: var(--tj-fs-h3); color: var(--text-strong); }
.tj-trycard__foot { grid-area: foot; display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.tj-trycard__state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-muted); }
.tj-trycard__state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.tj-trycard__state.is-done { color: var(--status-success-fg); }
.tj-trycard__state.is-done::before { background: var(--status-success-fg); }
.tj-trycard__go { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit;
  font-weight: 600; color: var(--text-brand); cursor: pointer; }
.tj-trycard__go .te-ico { width: 15px; height: 15px; transition: transform .15s ease; }
.tj-trycard__go:hover .te-ico { transform: translateX(2px); }

/* four ways to ask */
.tj-chancards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tj-chancard { display: grid; gap: 6px; grid-template-rows: auto auto 1fr auto; padding: 18px; border: 1px solid var(--border-default);
  border-radius: var(--r-lg); background: var(--surface-card); box-shadow: var(--tj-shadow-card); }
.tj-chancard h3 { margin: 6px 0 0; font-size: var(--tj-fs-h3); color: var(--text-strong); }
.tj-chancard p { margin: 0 0 8px; color: var(--text-muted); font-size: var(--fs-sm); }
.tj-chancard__icon { width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--surface-brand-subtle); color: var(--text-brand); }
.tj-chancard__icon.is-email { background: var(--tj-guide-bg); color: var(--tj-guide-label); }
.tj-chancard__icon.is-glpi { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.tj-chancard__icon.is-teams { background: var(--status-info-bg); color: var(--status-info-fg); }

/* see the change happen */
.tj-syscards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.tj-syscard { display: grid; gap: 4px; grid-template-rows: auto auto 1fr auto; padding: 18px; border: 1px solid var(--border-default);
  border-radius: var(--r-lg); background: var(--surface-card); box-shadow: var(--tj-shadow-card); }
.tj-syscard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tj-syscard__icon { width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-sunken);
  color: var(--text-body); }
.tj-syscard > b { color: var(--text-strong); font-size: var(--tj-fs-h3); }
.tj-syscard > p { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.tj-syscard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.tj-syscard__foot small { color: var(--text-muted); font-size: var(--fs-xs); }
.tj-safestrip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px;
  border-radius: var(--r-lg); background: var(--surface-sunken); }
.tj-safestrip p { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-sm); color: var(--text-body); }
.tj-safestrip .te-ico { color: var(--tj-accent); }

/* you can be anyone */
.tj-rolecards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tj-rolecard { display: grid; gap: 4px; grid-template-rows: auto auto auto 1fr; padding: 18px; border: 1px solid var(--border-default);
  border-radius: var(--r-lg); background: var(--surface-card); box-shadow: var(--tj-shadow-card); }
.tj-rolecard__av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px;
  font-weight: 700; font-size: var(--fs-sm); background: var(--status-info-bg); color: var(--status-info-fg); }
.tj-rolecard.is-approver .tj-rolecard__av { background: var(--status-success-bg); color: var(--status-success-fg); }
.tj-rolecard.is-agent .tj-rolecard__av { background: var(--surface-brand-subtle); color: var(--text-brand); }
.tj-rolecard.is-hr .tj-rolecard__av { background: var(--tj-guide-bg); color: var(--tj-guide-label); }
.tj-rolecard h3 { margin: 0; font-size: var(--tj-fs-h3); color: var(--text-strong); }
.tj-rolecard p { margin: 0; color: var(--text-body); font-size: var(--fs-sm); }
.tj-rolecard small { align-self: end; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle);
  color: var(--text-muted); font-size: var(--fs-xs); }

/* the rail */
.tj-acme__rail { gap: 16px; }
.tj-railcard { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--border-default); border-radius: var(--r-lg);
  background: var(--surface-card); box-shadow: var(--tj-shadow-card); }
.tj .tj-railcard__h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--tj-fs-h3); color: var(--text-strong); }
.tj-railcard__h .te-ico { color: var(--text-brand); }
.tj-railcard__big { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-brand-subtle); }
.tj-railcard__big small { color: var(--text-muted); font-size: var(--fs-xs); }
.tj-railcard__big b { color: var(--text-brand); font-size: var(--tj-fs-metric); line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tj-railcard__row { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: var(--fs-sm); color: var(--text-body); }
.tj-railcard__row b { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.tj-railcard__bar { height: 8px; margin-top: -4px; border-radius: var(--radius-pill); background: var(--border-default); overflow: hidden; }
.tj-railcard__bar span { display: block; height: 100%; border-radius: inherit; background: var(--surface-brand); }
.tj-railcard__text { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.tj-railcard__link { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
  font: inherit; font-weight: 600; color: var(--text-brand); cursor: pointer; }
.tj-railcard__link .te-ico { width: 15px; height: 15px; }
.tj-railcard__links { display: grid; }
.tj-quicklink { display: grid; grid-template-columns: 18px minmax(0, 1fr) 14px; align-items: center; gap: 10px; padding: 10px 4px;
  border: 0; border-bottom: 1px solid var(--border-subtle); background: none; font: inherit; color: var(--text-body); text-align: left; cursor: pointer; }
.tj-quicklink:last-child { border-bottom: 0; }
.tj-quicklink:hover { color: var(--text-brand); }
.tj-quicklink .te-ico:first-child { color: var(--text-muted); }
.tj-quicklink .te-ico:last-child { width: 14px; height: 14px; color: var(--text-subtle); }
.tj-railcard__end { padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.tj-railcard__end b { color: var(--tj-guide-label); }
.tj-acme__rail .tj-acme__own li { padding: 10px 12px; }
@media (max-width: 1100px) {
  .tj-chancards, .tj-rolecards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .tj-trycards, .tj-chancards, .tj-rolecards { grid-template-columns: 1fr; }
  .tj-acmehero { padding: 20px 16px; }
}

/* ---- Screen 6, the chat: who you are | the conversation | what changed ---- */
.tj-proposal.tj-try { grid-template-columns: 300px minmax(0, 1fr) 340px; gap: 20px; }
.tj-try.is-s6 .tj-rolebox, .tj-try.is-s6 .tj-say { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--border-default);
  border-radius: var(--r-lg); background: var(--surface-card); box-shadow: var(--tj-shadow-card); }
.tj-try.is-s6 .tj-rolebox .tj-side__label, .tj-try.is-s6 .tj-say__title { margin: 0; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.tj-try.is-s6 .tj-roles { background: var(--surface-sunken); }
.tj-try.is-s6 .tj-rolebox .tj-person { padding: 14px; border: 0; border-radius: var(--r-md); background: var(--surface-page); }
.tj-try.is-s6 .tj-persona__avatar { width: 44px; height: 44px; background: var(--surface-brand); color: var(--text-on-brand); }
.tj-try.is-s6 .tj-persona__try.is-issue { color: var(--status-danger-fg); }
.tj-try.is-s6 .tj-persona__try.is-issue b { color: var(--status-danger-fg); }
.tj-try.is-s6 .tj-example { border: 0; background: var(--surface-page); color: var(--text-strong); }
.tj-try.is-s6 .tj-example:hover { background: var(--surface-brand-subtle); }
.tj-try.is-s6 .tj-example span::before { content: "“"; }
.tj-try.is-s6 .tj-example span::after { content: "”"; }

/* the conversation: a navy mark beside the name, the bot's avatar, a rounded composer with a hint */
.tj-try.is-s6 .tj-chat { border: 1px solid var(--border-default); border-radius: var(--r-lg); background: var(--surface-card);
  box-shadow: var(--tj-shadow-card); overflow: hidden; }
.tj-chat__mark { flex: none; width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--surface-brand); color: var(--text-on-brand); }
.tj-try.is-s6 .tj-chat__who { padding-left: 0; border-left: 0; }
.tj-try.is-s6 .tj-chat__who small { color: var(--text-muted); font-size: var(--fs-sm); }
.tj-try.is-s6[data-channel="chat"] .tj-avatar { display: grid; background: var(--surface-brand); color: var(--text-on-brand); }
.tj-try.is-s6[data-channel="chat"] .tj-msgrow .tj-msg { max-width: calc(82% - 40px); }
.tj-try.is-s6 .tj-msg--bot { background: var(--surface-page); }
.tj-try.is-s6 .tj-msg--user { border-bottom-right-radius: 4px; }
.tj-try.is-s6 .tj-chat__form { margin: 12px 16px 0; padding: 6px 6px 6px 14px; border: 1px solid var(--border-default); border-radius: var(--r-lg);
  background: var(--surface-page); align-items: center; }
.tj-try.is-s6 .tj-chat__form:focus-within { border-color: var(--border-focus); background: var(--surface-card); }
.tj-try.is-s6 .tj-chat__form textarea { border: 0; background: none; box-shadow: none; padding: 8px 0; height: auto; min-height: 24px; }
.tj-try.is-s6 .tj-chat__form textarea:focus { box-shadow: none; }
.tj-chat__hint { margin: 6px 16px 12px; font-size: var(--fs-xs); color: var(--text-muted); }
.tj-try.is-acme[data-channel="teams"] .tj-chat__hint, .tj-try[data-channel="email"] .tj-chat__hint,
.tj-try[data-channel="glpi"] .tj-chat__hint { display: none; }

/* what changed: a live header, each change a card with a green edge; the sample systems below */
.tj-try__side .tj-side__block { padding: 18px; border: 1px solid var(--border-default); border-radius: var(--r-lg); background: var(--surface-card);
  box-shadow: var(--tj-shadow-card); }
.tj-changed__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tj-changed__head .tj-h3 { font-size: var(--tj-fs-h3); }
.tj-try.is-s6 .tj-changes .tj-change { border: 1px solid var(--border-default); border-left: 4px solid var(--status-success-fg);
  border-radius: var(--r-md); background: var(--surface-card); }
.tj-changes__empty { padding: 14px; border: 1px solid var(--border-default); border-radius: var(--r-md); color: var(--text-muted);
  font-size: var(--fs-sm); text-align: center; list-style: none; }
.tj-applinks { display: grid; gap: 10px; }
.tj-applinks .tj-side__label { margin: 0; }
.tj-applinks__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tj-applinks__grid .te-btn { justify-content: flex-start; border-color: transparent; background: var(--surface-page); }
.tj-applinks__grid .te-btn:hover { background: var(--surface-brand-subtle); }
@media (max-width: 1200px) { .tj-proposal.tj-try { grid-template-columns: 260px minmax(0, 1fr); } }
@media (max-width: 900px) { .tj-proposal.tj-try { grid-template-columns: 1fr; } }
.tj-applinks__grid .te-btn { height: auto; min-height: var(--h-sm); padding-block: 6px; white-space: normal; text-align: left; line-height: 1.3; }
/* Acme: its sample systems as one column of equal, full-width buttons */
.tj-applinks__grid.is-list { grid-template-columns: 1fr; }
.tj-applinks__grid.is-list .te-btn { width: 100%; min-height: 40px; }

/* ---- Screens 7a-7c: Email, GLPI and Teams fill the page; the chat's card and fixed height are for the chat only ---- */
.tj-try.is-s6:not([data-channel="chat"]) .tj-chat { height: auto; min-height: 0; border: 0; background: none; box-shadow: none; overflow: visible; }
.tj-try.is-s6:not([data-channel="chat"]) .tj-channel { padding: 0; background: none; overflow: visible; }

/* 7a Email: a guide banner; mailboxes with faces and jobs, queues apart; the open message on a card */
.tj .tj-mail__banner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 12px 18px; border-radius: var(--r-lg);
  background: var(--surface-brand-subtle); }
.tj-mail__grid { border: 1px solid var(--border-default); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--tj-shadow-card); }
.tj-mail__boxes { background: var(--surface-card); }
.tj .tj-mail__label { margin: 10px 8px 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tj .tj-mail__label:first-child { margin-top: 0; }
.tj .tj-mail__box { justify-content: flex-start; gap: 10px; padding: 8px 10px; text-align: left; }
.tj .tj-mail__box.is-on { box-shadow: inset 3px 0 0 var(--surface-brand); background: var(--surface-brand-subtle); }
.tj-mail__av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-xs);
  font-weight: 700; background: var(--surface-sunken); color: var(--text-body); }
.tj-mail__box.is-on .tj-mail__av { background: var(--tj-guide-bg); color: var(--tj-guide-label); }
.tj-mail__box.is-queue .tj-mail__av { background: var(--status-info-bg); color: var(--status-info-fg); }
.tj-mail__av .te-ico { width: 15px; height: 15px; }
.tj-mail__who2 { display: grid; min-width: 0; margin-right: auto; }
.tj-mail__who2 > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tj-mail__who2 small { font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); }
.tj-mail__list { background: var(--surface-page); }
.tj .tj-mail__listhead h3 { font-size: var(--tj-fs-h3); }
.tj .tj-mail__item.is-on { background: var(--surface-card); box-shadow: inset 3px 0 0 var(--surface-brand); }
.tj .tj-mail__title { font-size: var(--tj-fs-h1); }
.tj .tj-mail__note { border: 1px solid var(--tj-guide-border); border-radius: var(--r-lg); background: var(--tj-guide-bg); color: var(--text-body); }
.tj .tj-mail__note b { color: var(--tj-guide-label); }

/* 7b GLPI: the navy persona bar with a view switch; the portal's welcome, catalogue and tickets */
.tj .tj-glpi__bar { background: var(--tj-hero); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.tj-glpi__views { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-md); background: oklch(100% 0 0 / .1); }
.tj-glpi__view { padding: 5px 12px; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; font-size: var(--fs-sm);
  color: oklch(100% 0 0 / .8); cursor: pointer; }
.tj-glpi__view.is-on { background: var(--surface-card); color: var(--text-brand); font-weight: 600; }
.tj-glpi__body { display: grid; gap: 16px; }
.tj .tj-glpi__card { border: 1px solid var(--border-default); border-radius: var(--r-lg); box-shadow: var(--tj-shadow-card); }
.tj-glpi__hero { justify-items: center; text-align: center; padding: 28px 24px !important; }
.tj-glpi__org { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.tj .tj-glpi__ask { margin: 4px 0 0; font-size: var(--tj-fs-h1); color: var(--text-strong); }
.tj-glpi__search { display: flex; align-items: center; gap: 10px; width: min(560px, 100%); margin-top: 10px; padding: 0 8px 0 14px;
  border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--surface-page); color: var(--text-muted); }
.tj-glpi__search:focus-within { border-color: var(--border-focus); background: var(--surface-card); }
.tj-glpi__search input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; font: inherit; color: var(--text-strong); outline: none; }
.tj-glpi__enter { padding: 1px 6px; border: 1px solid var(--border-default); border-radius: var(--radius-xs); font-size: var(--fs-xs); }
.tj-glpi__row { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 4px;
  border: 0; border-top: 1px solid var(--border-subtle); background: none; font: inherit; color: var(--text-body); text-align: left; cursor: pointer; }
.tj-glpi__row:hover { color: var(--text-brand); }
.tj-glpi__row b { font-variant-numeric: tabular-nums; color: var(--text-strong); }
/* a ticket's status: a stepper with a line between the steps */
.tj .tj-glpi__steps { display: flex; gap: 0; padding: 16px; border-radius: var(--r-md); background: var(--surface-page); }
.tj .tj-glpi__step { position: relative; flex: 1; display: grid; justify-items: center; gap: 6px; padding-top: 30px; border: 0; background: none;
  font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }
.tj .tj-glpi__step::before { content: ""; position: absolute; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-card);
  box-shadow: inset 0 0 0 2px var(--border-strong); }
.tj .tj-glpi__step:not(:first-child)::after { content: ""; position: absolute; top: 11px; right: calc(50% + 16px); width: calc(100% - 32px); height: 2px;
  background: var(--border-default); }
.tj .tj-glpi__step.is-done { color: var(--text-strong); font-weight: 600; }
.tj .tj-glpi__step.is-done::before { background: var(--surface-brand); box-shadow: none; }
.tj .tj-glpi__step.is-done::after { background: var(--surface-brand); }
.tj .tj-glpi__step.is-now { color: var(--status-success-fg); }
.tj .tj-glpi__step.is-now::before { background: var(--status-success-fg); }
.tj .tj-glpi__note { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-page); }

/* 7c Teams: a strip that says it is simulated, a navy title bar like the app's */
.tj .tj-teams__banner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 16px; border-radius: var(--r-lg);
  background: var(--surface-card); border: 1px solid var(--border-default); }
.tj-teams__tag { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-brand); }
.tj-teams__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tj-accent); }
.tj-teams__title { display: flex; align-items: center; gap: 10px; margin-bottom: -12px; padding: 10px 16px; border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--tj-navy-800); color: #fff; font-size: var(--fs-sm); font-weight: 600; }
.tj-teams__title .te-ico { width: 16px; height: 16px; }
.tj .tj-teams__frame { border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--tj-shadow-card); }

/* ---- Screen 8, Systems: icons and change pills in the list, the system's role, people with faces and states ---- */
.tj .tj-sys__nav, .tj .tj-sys__how, .tj .tj-sys__card { border-color: var(--border-default); border-radius: var(--r-lg); box-shadow: var(--tj-shadow-card); }
.tj .tj-sys__navtitle { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tj .tj-sys__sys { justify-content: flex-start; gap: 10px; text-align: left; }
.tj .tj-sys__sys > span { margin-right: auto; }
.tj .tj-sys__sys .te-ico { flex: none; color: var(--text-muted); }
.tj .tj-sys__sys.is-on .te-ico { color: var(--text-brand); }
.tj .tj-sys__today { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); font-size: var(--fs-xs) !important;
  font-weight: 500 !important; color: var(--text-muted) !important; white-space: nowrap; }
.tj .tj-sys__today.is-on { background: var(--status-success-bg); color: var(--status-success-fg) !important; }
.tj-sys__person { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--text-strong); }
.tj-sys__av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--surface-sunken); color: var(--text-body); }
.tj .tj-sys__table td { vertical-align: middle; }
.tj .tj-sys__table tr.is-new td { background: var(--tj-guide-bg); }
.tj .tj-sys__howtop { display: grid; gap: 2px; }
.tj .tj-sys__howtop .tj-side__label { margin: 0; color: var(--tj-guide-label); }
.tj .tj-sys__howtop .tj-sys__h { font-size: var(--tj-fs-h2); }
.tj .tj-sys__steps { list-style: none; padding: 0; counter-reset: step; }
.tj .tj-sys__steps > li { position: relative; padding-left: 38px; counter-increment: step; }
.tj .tj-sys__steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-strong); font-size: var(--fs-xs); font-weight: 700; }
.tj .tj-sys__steps > li:last-child::before { content: "✓"; background: var(--status-success-fg); color: #fff; }
.tj .tj-sys__sublist > span { padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-page); }
.tj .tj-sys__sys { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; row-gap: 4px; }
.tj .tj-sys__today { grid-column: 2; justify-self: start; }
/* banners are running text: flex would gap the words from their punctuation */
.tj .tj-mail__banner, .tj .tj-teams__banner { display: block; line-height: 1.7; }
.tj-teams__tag { margin-right: 10px; vertical-align: 1px; }

/* ---- Screen 1, check your inbox: centred, a large mail badge, one wide action, the guide's tip ---- */
.tj-signin { box-shadow: var(--tj-shadow-card); }
.tj-sent { justify-items: center; text-align: center; padding: 32px 28px; }
.tj-sent .tj-signin__head { flex-direction: column; align-items: center; gap: 16px; }
.tj-sent .tj-signin__badge { width: 64px; height: 64px; border-radius: 50%; background: var(--surface-brand-subtle); color: var(--text-brand); }
.tj-sent .tj-signin__badge .te-ico { width: 28px; height: 28px; }
.tj-sent .te-h2 { font-size: var(--tj-fs-h1); }
.tj-sent .tj-actions { display: grid; justify-items: center; gap: 12px; width: 100%; }
.tj-sent .tj-actions .te-btn { width: 100%; height: var(--h-lg); }
.tj-sent .tj-actions .tj-linkbtn { font-weight: 600; text-decoration: none; }
.tj-sent .tj-actions .tj-linkbtn::before { content: "← "; }
.tj-sent__tip { width: 100%; padding: 12px 16px; text-align: left; border-radius: var(--r-lg); }

/* ---- Screen 2, upload: the step chip and welcome; numbered cards; a tinted choice; a big drop zone; the side guides ---- */
.tj-upload__eyebrow { justify-self: start; margin: 0; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--tj-guide-bg);
  color: var(--text-muted); font-size: var(--fs-sm); }
.tj-upload__eyebrow b { color: var(--tj-guide-label); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.tj .tj-upload__title { margin: 4px 0 0; font-weight: 700; letter-spacing: -.02em; }
.tj-upload__sub { margin: 0 0 4px; font-size: var(--tj-fs-lead); color: var(--text-muted); }
.tj .tj-ustep { padding: 24px; border-color: var(--border-default); box-shadow: var(--tj-shadow-card); }
.tj .tj-ustep__title { font-size: var(--tj-fs-h3); }
.tj-ustep__tag { margin-left: auto; font-size: var(--fs-xs); font-weight: 500; }
.tj .tj-choice__card { padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface-page); border-color: transparent; }
.tj .tj-choice__card:has(input:checked) { background: var(--surface-brand-subtle); border-color: var(--surface-brand);
  box-shadow: inset 0 0 0 1px var(--surface-brand); }
.tj .tj-choice__card:has(input:checked) b { color: var(--text-brand); }
.tj #tj-step1 > .te-field:last-child { padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface-page); }
.tj #tj-step1 > .te-field:last-child select { background: var(--surface-card); }
.tj #tj-step2 .te-drop { gap: 6px; padding: 26px 20px; border-radius: var(--r-lg); background: var(--surface-page); }
.tj #tj-step2 .te-drop__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px;
  background: var(--surface-brand-subtle); color: var(--text-brand); }
.tj #tj-step2 .te-drop__icon .te-ico { width: 24px; height: 24px; }
.tj #tj-step2 .te-drop__title { font-size: var(--tj-fs-h3); }
/* the side: privacy with green ticks on a card, then the export guide */
.tj .tj-privacy { gap: 14px; padding: 20px; border: 1px solid var(--border-default); background: var(--surface-card); box-shadow: var(--tj-shadow-card); }
.tj .tj-privacy__title { display: flex; align-items: center; gap: 10px; font-size: var(--tj-fs-h3); }
.tj .tj-privacy__title .te-ico { width: 32px; height: 32px; padding: 7px; border-radius: var(--r-md); background: var(--status-success-bg);
  color: var(--status-success-fg); }
.tj-exportguide { gap: 8px; margin-top: 4px; padding: 16px 18px; border-radius: var(--r-lg); }
.tj-exportguide b { color: var(--text-strong); }
.tj-exportguide ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: col; }
.tj-exportguide li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: var(--r-md);
  background: var(--surface-card); counter-increment: col; }
.tj-exportguide li span::before { content: counter(col) ". "; color: var(--text-muted); }
.tj-exportguide li small { color: var(--status-success-fg); font-weight: 600; white-space: nowrap; }
.tj-exportguide .tj-linkbtn { justify-self: start; font-weight: 600; }
/* wider side columns on desktop only: the phone rules above collapse both layouts to one column */
@media (min-width: 901px) { .tj-start.is-upload { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .tj-acme__layout { grid-template-columns: 1fr; } }

/* Password field with an eye to show or hide what was typed (sign-in, and choosing a password) */
.tj-pw { position: relative; }
.tj-pw input { width: 100%; padding-right: 46px; }
/* Edge's own reveal eye (and clear button) would show next to ours: one eye only */
.tj-pw input::-ms-reveal, .tj-pw input::-ms-clear { display: none; }
.tj-pw__show { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text-muted); cursor: pointer; }
.tj-pw__show:hover { color: var(--text-strong); background: var(--surface-sunken); }
.tj-pw__show:focus-visible { outline: 2px solid var(--focus-ring, var(--surface-brand)); outline-offset: 1px; }
.tj-pw__show .te-ico { width: 18px; height: 18px; }
/* "Forgot password?" right under the password, at its right edge */
.tj-forgot { margin: 6px 0 0; text-align: right; font-size: var(--fs-sm); }
/* the reset screen's way back to sign in */
#tj-su-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; justify-self: start; margin: 0 0 4px; font-weight: 600; }
#tj-su-back[hidden] { display: none; }
#tj-su-back .te-ico { width: 16px; height: 16px; }

/* ---- How it works: the animated explainer (upload, business case, build, try it) ---- */
.tj-how__veil { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px;
  background: oklch(20% 0.04 264 / .55); animation: tj-how-fade .25s ease-out; }
.tj-how { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px 24px 18px;
  border-radius: var(--r-lg); background: var(--surface-card); border: 1px solid var(--border-default);
  box-shadow: 0 20px 48px oklch(20% 0.04 264 / .3); animation: tj-how-rise .35s cubic-bezier(.2,.8,.2,1); }
.tj-how .tj-tour__close { top: 12px; right: 12px; }
.tj-how__kicker { margin: 0 0 12px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-brand); }
.tj-how__stage { height: 262px; border-radius: var(--r-md); background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  overflow: hidden; display: grid; place-items: center; padding: 18px; }
.tj-how__title { margin: 16px 0 6px; font-size: 20px; color: var(--text-strong); }
.tj-how__text { margin: 0 0 16px; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-body); min-height: 3.1em; }
.tj-how__foot { display: flex; align-items: center; gap: 8px; }
.tj-how__dots { display: flex; gap: 6px; margin-right: auto; }
.tj-how__dot { position: relative; width: 26px; height: 6px; padding: 0; border: 0; border-radius: 3px; overflow: hidden;
  background: var(--border-default); cursor: pointer; }
.tj-how__dot.is-on::after { content: ""; position: absolute; inset: 0; background: var(--text-brand); transform-origin: left;
  animation: tj-how-fill var(--ms, 0ms) linear both; }
.tj-how__dot:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tj-how__scene { width: 100%; display: grid; gap: 12px; justify-items: center; animation: tj-how-fade .3s ease-out; }
.tj-how__scene .te-ico { width: 18px; height: 18px; flex: none; }

/* 1 upload: the file drops into the box, the bar fills, then the result */
.tj-how__drop { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 360px; padding: 18px; justify-content: center;
  border: 2px dashed var(--border-brand); border-radius: var(--r-md); color: var(--text-muted); font-size: var(--fs-sm);
  animation: tj-how-glow 1.2s ease-in-out 1.2s 2; }
.tj-how__file { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--surface-card);
  border: 1px solid var(--border-default); box-shadow: var(--tj-shadow-card); font-size: var(--fs-sm); color: var(--text-strong);
  animation: tj-how-drop .9s cubic-bezier(.3,1.4,.5,1) .3s both; }
.tj-how__file small { color: var(--text-muted); }
.tj-how__bar { width: 100%; max-width: 360px; height: 8px; border-radius: 4px; background: var(--border-subtle); overflow: hidden; }
.tj-how__bar span { display: block; height: 100%; background: var(--text-brand); transform-origin: left; animation: tj-how-fill 2.2s ease-in-out 1.3s both; }
.tj-how__ok { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--status-success-fg); }
.tj-how__scene--intro0 .tj-how__ok { animation: tj-how-pop .4s ease-out 3.6s both; }

/* 2 business case: cards rise one by one, bars grow */
.tj-how__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.tj-how__kpi { display: grid; gap: 2px; padding: 10px; border-radius: 10px; background: var(--surface-card); border: 1px solid var(--border-default);
  animation: tj-how-pop .45s ease-out both; }
.tj-how__kpi:nth-child(2) { animation-delay: .35s; }
.tj-how__kpi:nth-child(3) { animation-delay: .7s; }
.tj-how__kpi b { font-size: 19px; color: var(--text-brand); }
.tj-how__kpi small { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.3; }
.tj-how__bars { display: flex; align-items: flex-end; gap: 8px; height: 72px; width: 100%; max-width: 320px; }
.tj-how__bars span { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: var(--tj-accent, var(--text-brand)); opacity: .85;
  transform-origin: bottom; animation: tj-how-grow .7s ease-out both; }
.tj-how__bars span:nth-child(1) { animation-delay: 1.05s; }
.tj-how__bars span:nth-child(2) { animation-delay: 1.2s; }
.tj-how__bars span:nth-child(3) { animation-delay: 1.35s; }
.tj-how__bars span:nth-child(4) { animation-delay: 1.5s; }
.tj-how__bars span:nth-child(5) { animation-delay: 1.65s; }
.tj-how__bars span:nth-child(6) { animation-delay: 1.8s; }
.tj-how__note { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }

/* 3 build: each automation spins, then gets its tick */
.tj-how__wf { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 340px; padding: 9px 12px; border-radius: 10px;
  background: var(--surface-card); border: 1px solid var(--border-default); font-size: var(--fs-sm); color: var(--text-strong);
  animation: tj-how-pop .4s ease-out both; }
.tj-how__wf > span:nth-child(2) { margin-right: auto; }
.tj-how__spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-default); border-top-color: var(--text-brand);
  animation: tj-how-spin .8s linear infinite, tj-how-out .2s linear both; }
.tj-how__tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--status-success-bg);
  color: var(--status-success-fg); animation: tj-how-pop .3s ease-out both; }
.tj-how__wf:nth-child(1) { animation-delay: .1s; }
.tj-how__wf:nth-child(1) .tj-how__spin { animation-delay: 0s, 1.6s; }
.tj-how__wf:nth-child(1) .tj-how__tick { animation-delay: 1.7s; }
.tj-how__wf:nth-child(2) { animation-delay: .4s; }
.tj-how__wf:nth-child(2) .tj-how__spin { animation-delay: 0s, 2.8s; }
.tj-how__wf:nth-child(2) .tj-how__tick { animation-delay: 2.9s; }
.tj-how__wf:nth-child(3) { animation-delay: .7s; }
.tj-how__wf:nth-child(3) .tj-how__spin { animation-delay: 0s, 4s; }
.tj-how__wf:nth-child(3) .tj-how__tick { animation-delay: 4.1s; }
.tj-how__scene--intro2 .tj-how__ok { animation: tj-how-pop .4s ease-out 4.6s both; color: var(--text-brand); }

/* 4 try it: the request types itself, SupportFlo asks, it is approved and resolved; the channels take turns */
.tj-how__chans { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tj-how__chans span { padding: 4px 12px; border-radius: var(--radius-pill, 999px); font-size: var(--fs-xs); font-weight: 600;
  color: var(--text-muted); border: 1px solid var(--border-default); background: var(--surface-card); transition: background .3s, color .3s, border-color .3s; }
.tj-how__chans span.is-on { background: var(--surface-brand); color: var(--text-on-brand); border-color: transparent; }
.tj-how__chat { display: grid; gap: 7px; width: 100%; max-width: 400px; }
.tj-how__msg { max-width: 88%; overflow-wrap: anywhere; padding: 8px 12px; border-radius: 12px; font-size: var(--fs-sm); line-height: 1.4; }
.tj-how__msg--me { justify-self: end; min-height: 1.4em; background: var(--surface-brand); color: var(--text-on-brand); border-bottom-right-radius: 4px; }
.tj-how__typed::after { content: "|"; margin-left: 1px; animation: tj-how-blink .8s step-end infinite; }
.tj-how__msg--bot { justify-self: start; background: var(--surface-card); color: var(--text-strong); border: 1px solid var(--border-default); border-bottom-left-radius: 4px; }
.tj-how__done { display: flex; align-items: center; gap: 8px; color: var(--status-success-fg); font-weight: 600; }
.tj-how__approve { justify-self: start; }
.tj-how__approve span { display: inline-block; padding: 5px 14px; border-radius: 8px; font-size: var(--fs-xs); font-weight: 700;
  background: var(--surface-brand); color: var(--text-on-brand); }
.tj-how__ask, .tj-how__approve, .tj-how__done { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.is-asked .tj-how__ask, .is-asked .tj-how__approve, .is-done .tj-how__done { opacity: 1; transform: none; }
.is-asked:not(.is-approved) .tj-how__approve span { animation: tj-how-pulse 1s ease-in-out infinite; }
.is-approved .tj-how__approve span { background: var(--status-success-bg); color: var(--status-success-fg); }
.is-approved .tj-how__approve span::before { content: "\2713\00a0"; }
.is-approved .tj-how__typed::after { content: none; }

/* How to try it: pick a person, ask, confirm, watch it change, four ways in */
.tj-how__roles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; max-width: 300px; padding: 6px;
  border-radius: 12px; background: var(--surface-card); border: 1px solid var(--border-default); }
.tj-how__roles span { padding: 7px 10px; border-radius: 8px; text-align: center; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-muted); transition: background .3s, color .3s; }
.tj-how__roles span.is-on { background: var(--surface-brand); color: var(--text-on-brand); }
.tj-how__who { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 300px; padding: 10px 12px; border-radius: 12px;
  background: var(--surface-card); border: 1px solid var(--border-default); animation: tj-how-pop .45s ease-out .3s both; }
.tj-how__who > div { display: grid; }
.tj-how__who b { color: var(--text-strong); }
.tj-how__who small { color: var(--text-muted); font-size: var(--fs-xs); }
.tj-how__av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--surface-brand); color: var(--text-on-brand); font-weight: 700; font-size: var(--fs-sm); }
.tj-how__send { justify-self: end; opacity: 0; transition: opacity .3s; }
.tj-how__send span { display: inline-block; padding: 5px 14px; border-radius: 8px; font-size: var(--fs-xs); font-weight: 700;
  background: var(--surface-brand); color: var(--text-on-brand); }
.is-asked .tj-how__send { opacity: 1; }
.is-asked .tj-how__send span { animation: tj-how-pulse 1s ease-in-out 2; }
.tj-how__confirm { display: grid; gap: 6px; justify-items: start; padding: 10px 12px; border-radius: 12px; background: var(--surface-card);
  border: 1px solid var(--border-brand); font-size: var(--fs-sm); color: var(--text-body);
  opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.tj-how__confirm b { color: var(--text-strong); }
.is-asked .tj-how__confirm { opacity: 1; transform: none; }
.tj-how__changes { display: grid; gap: 8px; width: 100%; max-width: 380px; padding: 12px; border-radius: 12px;
  background: var(--surface-card); border: 1px solid var(--border-default); }
.tj-how__changes-head { display: flex; align-items: center; justify-content: space-between; }
.tj-how__changes-head b { color: var(--text-strong); }
.tj-how__live { padding: 2px 10px; border-radius: var(--radius-pill, 999px); font-size: var(--fs-xs); font-weight: 700;
  background: var(--status-success-bg); color: var(--status-success-fg); }
.tj-how__change { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-sunken);
  animation: tj-how-pop .45s ease-out both; }
.tj-how__change:nth-child(2) { animation-delay: .8s; }
.tj-how__change:nth-child(3) { animation-delay: 2s; }
.tj-how__change > div { display: grid; font-size: var(--fs-sm); }
.tj-how__change b { color: var(--text-strong); }
.tj-how__change small { color: var(--text-link, var(--text-brand)); text-decoration: underline; font-size: var(--fs-xs); }
.tj-how__change .tj-how__tick { animation: none; }
.tj-how__scene--try3 .tj-how__ok { animation: tj-how-pop .4s ease-out 3s both; color: var(--text-brand); }
.tj-how__scene--try0 .tj-how__ok { animation: tj-how-pop .4s ease-out 1s both; color: var(--text-brand); }
.tj-how__caption { margin: 4px 0 0; min-height: 2.8em; max-width: 360px; text-align: center; font-size: var(--fs-sm); color: var(--text-body); }

@keyframes tj-how-fade { from { opacity: 0; } }
@keyframes tj-how-rise { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes tj-how-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes tj-how-drop { from { opacity: 0; transform: translateY(-46px); } }
@keyframes tj-how-fill { from { transform: scaleX(0); } }
@keyframes tj-how-grow { from { transform: scaleY(0); } }
@keyframes tj-how-spin { to { transform: rotate(360deg); } }
@keyframes tj-how-out { to { opacity: 0; width: 0; border-width: 0; } }
@keyframes tj-how-blink { 50% { opacity: 0; } }
@keyframes tj-how-glow { 50% { background: var(--surface-brand-subtle); } }
@keyframes tj-how-pulse { 50% { box-shadow: 0 0 0 6px var(--surface-brand-subtle); } }
@media (max-width: 640px) { .tj-how__stage { height: 300px; } .tj-how__kpi b { font-size: 16px; } #tj-howto { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .tj-how__veil, .tj-how, .tj-how *, .tj-how *::before, .tj-how *::after { animation: none !important; transition: none !important; }
  .tj-how__spin { display: none; }
}

/* ===== Try it channels fit the window: one frame per channel, each column scrolls on its own (like the real apps)
   instead of the page growing. The GLPI portal is a web page and keeps the page scroll. Below 900px wide every channel uses the page scroll. ===== */
.tj-try { --tj-frame-h: clamp(460px, calc(100vh - 300px), 820px); }
.tj-mail__banner, .tj-teams__banner { padding: 10px 16px; font-size: var(--fs-sm); }
.tj-teams__banner { border-radius: 12px; background: oklch(95.5% 0.012 264); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-mail, .tj-teams { gap: 12px; }
.tj-mail__grid, .tj-glpi, .tj-teams__frame, .tj-mail__boxes, .tj-mail__list, .tj-mail__read, .tj-glpi__body, .tj-teams__list, .tj-teams__conv .tj-chat__log {
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

@media (min-width: 900px) {
  /* Email: mailboxes | inbox | message, each scrolling */
  .tj-mail__grid { height: var(--tj-frame-h); min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .tj-mail__boxes, .tj-mail__read { overflow-y: auto; min-height: 0; }
  .tj-mail__list { overflow-y: auto; min-height: 0; }
  .tj-mail__listhead { position: sticky; top: 0; z-index: 1; background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); }


  /* Teams: rail | chats | conversation; the messages scroll, the box to type in stays at the bottom */
  .tj-teams__frame { height: var(--tj-frame-h); min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .tj-teams__list { overflow-y: auto; min-height: 0; }
  .tj-teams__conv { min-height: 0; overflow: hidden; }
  .tj-teams__conv .tj-chat__log { min-height: 0; overflow-y: auto; }
}

/* Email / GLPI / Teams: a compact header (assistant name, tabs, banner) so the channel frame gets the height */
.tj-try[data-channel="email"] .tj-chat__head, .tj-try[data-channel="glpi"] .tj-chat__head, .tj-try[data-channel="teams"] .tj-chat__head {
  min-height: 0; padding: 6px 22px; }
.tj-try[data-channel="email"] .tj-chat__mark, .tj-try[data-channel="glpi"] .tj-chat__mark, .tj-try[data-channel="teams"] .tj-chat__mark {
  width: 30px; height: 30px; border-radius: 8px; }
.tj-try[data-channel="email"] .tj-chat__mark .te-ico, .tj-try[data-channel="glpi"] .tj-chat__mark .te-ico,
.tj-try[data-channel="teams"] .tj-chat__mark .te-ico { width: 15px; height: 15px; }
.tj-try[data-channel="email"] .tj-chat__who b, .tj-try[data-channel="glpi"] .tj-chat__who b, .tj-try[data-channel="teams"] .tj-chat__who b {
  font-size: var(--fs-md); }
.tj-try[data-channel="email"] .tj-chat__who small, .tj-try[data-channel="glpi"] .tj-chat__who small,
.tj-try[data-channel="teams"] .tj-chat__who small { display: none; }
.tj-try[data-channel="email"] .tj-chat__head > .te-btn, .tj-try[data-channel="glpi"] .tj-chat__head > .te-btn,
.tj-try[data-channel="teams"] .tj-chat__head > .te-btn { padding-block: 4px; min-height: 0; }
.tj-try[data-channel="email"] .tj-channels__btn, .tj-try[data-channel="glpi"] .tj-channels__btn, .tj-try[data-channel="teams"] .tj-channels__btn {
  padding-block: 6px; }
.tj-try[data-channel="email"] #tj-channel-pane, .tj-try[data-channel="glpi"] #tj-channel-pane, .tj-try[data-channel="teams"] #tj-channel-pane {
  padding-top: 8px; }
.tj-try .tj-mail, .tj-try .tj-teams { gap: 8px; }
.tj-try .tj-mail__banner, .tj-try .tj-teams__banner { padding: 7px 14px; }

/* 7d Sample systems: the list of stand-ins | the selected one's own screens (framed), like Email's layout */
.tj-proposal.tj-try[data-channel="systems"] { grid-template-columns: minmax(0, 1fr); }
.tj-try[data-channel="systems"] > .tj-you, .tj-try[data-channel="systems"] > .tj-try__side, .tj-try[data-channel="systems"] .tj-mtabs { display: none; }
.tj-try.is-acme[data-channel="systems"] .tj-chat__head { display: none; }
.tj-try[data-channel="systems"] .tj-chat { background: none; border: 0; box-shadow: none; height: auto; min-height: 0; }
.tj-try[data-channel="systems"] #tj-channel-pane { padding: 8px 0 0; border: 0; background: none; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.tj-try[data-channel="systems"] .tj-chat__head { min-height: 0; padding: 6px 22px; }
.tj-try[data-channel="systems"] .tj-chat__mark { width: 30px; height: 30px; border-radius: 8px; }
.tj-try[data-channel="systems"] .tj-chat__mark .te-ico { width: 15px; height: 15px; }
.tj-try[data-channel="systems"] .tj-chat__who b { font-size: var(--fs-md); }
.tj-try[data-channel="systems"] .tj-chat__who small { display: none; }
.tj-try[data-channel="systems"] .tj-chat__head > .te-btn { padding-block: 4px; min-height: 0; }
.tj-try[data-channel="systems"] .tj-channels__btn { padding-block: 6px; }
.tj-simtab { display: grid; gap: 8px; }
.tj-simtab .tj-mail__banner { margin: 0; padding: 7px 14px; font-size: var(--fs-sm); }
.tj-simtab__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 70vh; min-height: 460px; background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; }
.tj-simtab__list { padding: 16px 14px; display: grid; gap: 4px; align-content: start; border-right: 1px solid var(--border-subtle);
  overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.tj-simtab__view { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tj-simtab__tools { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); }
.tj-simtab__tools b { margin-right: auto; color: var(--text-strong); }
.tj-simtab__frame { flex: 1; width: 100%; min-height: 0; border: 0; background: #fff; }
@media (min-width: 900px) { .tj-simtab__grid { height: var(--tj-frame-h); } }
@media (max-width: 700px) { .tj-simtab__grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .tj-simtab__list { display: flex; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border-subtle); padding: 10px; } }
.tj-try[data-channel="systems"] .tj-chat__hint { display: none; }

/* Sample systems: the list can close (the system then takes the full width), and its pages show at 85% */
.tj-simtab__grid.is-wide { grid-template-columns: minmax(0, 1fr); }
.tj-simtab__grid.is-wide .tj-simtab__list { display: none; }
.tj-simtab__tools b, .tj-simtab__pick { margin-right: auto; }
.tj-simtab__pick { padding: 5px 10px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-card);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); }
.tj-simtab__fit { --sim-zoom: .85; position: relative; flex: 1; min-height: 0; overflow: hidden; background: #fff; }
.tj-simtab__fit .tj-simtab__frame { position: absolute; top: 0; left: 0; width: calc(100% / var(--sim-zoom)); height: calc(100% / var(--sim-zoom));
  transform: scale(var(--sim-zoom)); transform-origin: 0 0; }
@media (max-width: 700px) { .tj-simtab__fit { --sim-zoom: 1; } }

/* Sample systems: the system gets the height - no assistant row (New conversation is for the chat) and no banner
   (each system says it is a safe copy in its own strip); a thinner toolbar */
.tj-try[data-channel="systems"] .tj-chat__head, .tj-simtab > .tj-mail__banner { display: none; }
.tj-try[data-channel="systems"] #tj-channel-pane { padding-top: 6px; }
.tj-simtab__tools { padding: 4px 10px; gap: 4px; }
.tj-simtab__tools .te-btn--sm { padding-block: 3px; min-height: 0; }
.tj-simtab__pick { padding-block: 3px; }
/* ...and on the framed channels the page's bottom padding goes to the frame too */
.tj-page:has(.tj-try[data-channel="email"], .tj-try[data-channel="teams"], .tj-try[data-channel="systems"]) { padding-bottom: 8px; }

/* One upload per client: the request for another */
.tj-quota { display: grid; gap: 10px; padding: 18px 20px; }
.tj-quota { gap: 16px; }
.tj-quota__head { display: flex; align-items: center; gap: 14px; }
.tj-quota__lock { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md);
  background: var(--surface-brand-subtle); color: var(--text-brand); }
.tj-quota__lock .te-ico { width: 20px; height: 20px; }
.tj-quota__title { margin: 0 0 2px; font-size: var(--fs-lg); color: var(--text-strong); }
/* the two ways in: icon tile | rule | title and line | arrow; SupportFlo navy, Acme a light brand tint */
.tj-qcard { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 76px; border-radius: var(--r-lg); text-decoration: none;
  border: 1px solid var(--border-brand); background: var(--surface-brand-subtle); color: var(--text-body);
  box-shadow: var(--tj-shadow-card); transition: transform .15s ease, box-shadow .15s ease; }
.tj-qcard:hover { transform: translateY(-1px); box-shadow: 0 6px 16px oklch(40% .1 262 / .14); }
/* a card, not a link: no underline on hover or focus, whatever the page's link style */
.tj .tj-qcard, .tj .tj-qcard:hover, .tj .tj-qcard:focus, .tj .tj-qcard:visited,
.tj .tj-qcard:hover *, .tj .tj-qcard:focus * { text-decoration: none; }
.tj-qcard__ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md);
  background: oklch(100% 0 0 / .7); color: var(--text-brand); }
.tj-qcard__ico .te-ico { width: 20px; height: 20px; }
.tj-qcard__text { flex: 1; display: grid; gap: 2px; padding-left: 12px; border-left: 1px solid var(--border-default); min-width: 0; }
.tj-qcard__text b { font-size: var(--fs-md); color: var(--text-strong); }
.tj-qcard__text span { font-size: var(--fs-sm); color: var(--text-muted); }
.tj-qcard__go { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: oklch(100% 0 0 / .8); color: var(--text-brand); }
.tj-qcard__go .te-ico { width: 16px; height: 16px; transition: transform .15s ease; }
.tj-qcard:hover .tj-qcard__go .te-ico { transform: translateX(2px); }
.tj-qcard.is-dark { border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--tj-navy-800) 0%, var(--surface-brand) 70%, oklch(48% .17 262) 100%); }
.tj-qcard.is-dark .tj-qcard__ico, .tj-qcard.is-dark .tj-qcard__go { background: oklch(100% 0 0 / .14); color: #fff; }
.tj-qcard.is-dark .tj-qcard__text { border-left-color: oklch(100% 0 0 / .28); }
.tj-qcard.is-dark .tj-qcard__text b { color: #fff; }
.tj-qcard.is-dark .tj-qcard__text span { color: oklch(100% 0 0 / .82); }
/* the request note: info mark | rule | date in bold, then the rest */
.tj-quota #tj-quota-state:not([hidden]) { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.tj-quota__mark { flex: none; display: grid; place-items: center; padding-right: 12px; border-right: 1px solid currentColor; }
.tj-quota__mark .te-ico { width: 20px; height: 20px; }
.tj-quota p { margin: 0; }
.tj-quota__form { display: grid; gap: 8px; }
.tj-quota__form label { font-weight: 600; }
.tj-quota__form textarea { width: 100%; resize: vertical; font: inherit; padding: 8px 10px; border: 1px solid var(--border-default);
  border-radius: 8px; background: var(--surface-card); color: inherit; }
.tj-quota__form .te-btn { justify-self: start; }
.tj-quota__acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 440px)); justify-content: start; gap: 16px; }
.tj-quota__acts[hidden] { display: none; }

/* the upload step: its sections one under another (an accordion: a finished one folds into a line above the next),
   in one centred column, never two numbered levels (the header has the steps; the sections have icons) */
.tj-start.is-upload { max-width: 860px; margin-inline: auto; }
.tj-upload { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tj-upload > * { grid-column: 1 / -1; }
@media (min-width: 1000px) {
  .tj .tj-upload > .tj-ustep { padding: 20px 24px; }
  .tj .tj-upload__title { font-size: clamp(24px, 2.2vw, 30px); }
}
.tj-ustep__ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: var(--surface-brand-subtle); color: var(--text-brand); }
.tj-ustep__ic .te-ico { width: 17px; height: 17px; }
/* a file dragged over the drop zone */
.tj #tj-step2 .te-drop { transition: border-color .15s ease, background-color .15s ease; }
.tj #tj-step2 .te-drop.is-over { border-color: var(--surface-brand); border-style: solid; background: var(--surface-brand-subtle); }

/* the step 1 choice: a radio dot in the corner says which one is picked; the picked card lifts a little */
.tj .tj-choice__card { padding-right: 46px; border: 1px solid var(--border-subtle); cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background-color .15s; }
.tj .tj-choice__card::after { content: ""; position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface-card); transition: border .15s, background .15s; }
.tj .tj-choice__card:hover:not(:has(input:checked)) { border-color: var(--border-strong); background: var(--surface-card); }
.tj .tj-choice__card:has(input:checked) { box-shadow: inset 0 0 0 1px var(--surface-brand), 0 6px 16px -8px var(--surface-brand); }
.tj .tj-choice__card:has(input:checked)::after { border: 5px solid var(--surface-brand); background: var(--surface-card); }
.tj .tj-choice__card:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* the analysis wait: tighter rhythm (back link, bar, heading, stages), and the demo card as the one solid,
   navy call to action beside it */
.tj-journey > #tj-home:not([hidden]) { display: inline-flex; margin: 0 0 12px; }
#tj-proposal:not(.is-case) { gap: 16px 24px; }
#tj-proposal:not(.is-case) > .tj-proposal__main { gap: 16px; }
.tj-waitbar { padding: 10px 18px; }
.tj-waithead { gap: 4px; }
.tj .tj-waithead__title { margin: 0; font-size: clamp(26px, 2.4vw, 34px); }
.tj-waithead__mail { margin-top: 4px; font-size: var(--fs-sm); }
.tj .tj-stagecard { padding: 20px 22px; }
.tj .tj-stagecard__head { margin-bottom: 4px; }
.tj .tj-stagecard__head .te-h2 { margin: 2px 0 0; font-size: var(--tj-fs-h2); }
.tj .tj-proposal__side { top: 12px; }
.tj .tj-waitcard { position: relative; overflow: hidden; padding: 22px; border: 0;
  background: linear-gradient(150deg, var(--tj-navy-800) 0%, var(--surface-brand) 100%); color: #fff;
  box-shadow: 0 14px 32px -14px var(--tj-navy-800); }
.tj .tj-waitcard::before { content: ""; position: absolute; inset: auto -40px -60px auto; width: 180px; height: 180px; border-radius: 50%;
  background: oklch(100% 0 0 / .07); pointer-events: none; }
.tj .tj-waitcard .tj-side__label { color: oklch(85% 0.12 60); }
.tj .tj-waitcard h2 { color: #fff; }
.tj .tj-waitcard p { color: oklch(100% 0 0 / .86); }
.tj .tj-waitcard .te-btn--primary { position: relative; background: #fff; border-color: #fff; color: var(--tj-navy-800); font-weight: 700; }
.tj .tj-waitcard .te-btn--primary:hover { background: oklch(96% 0.02 260); }
.tj .tj-waitcard__note { color: oklch(100% 0 0 / .75); }
.tj-waitcard__pic .w { stroke: transparent; }
.tj-waitcard__pic .c { fill: oklch(72% 0.17 50); }
.tj-waitcard__pic .t { fill: #fff; }

/* the Acme welcome: the title, then straight to the one big Start button */
.tj .tj-acmehero__start { margin-top: 16px; padding: 20px 24px; }
.tj .tj-acmehero__go { min-height: 52px; padding: 0 28px; font-size: var(--tj-fs-lead, 18px); font-weight: 700;
  box-shadow: 0 8px 20px -10px var(--tj-navy-800); }
.tj .tj-acmehero__go .te-ico { width: 20px; height: 20px; }
.tj-acme__layout.is-solo { grid-template-columns: minmax(0, 1fr); }

/* Acme: the welcome is the title and one white Start button; Back is a real button above it */
.tj .tj-acmehero { gap: 18px; }
.tj .tj-acmehero__go { justify-self: start; background: #fff; border-color: #fff; color: var(--tj-navy-800); }
.tj .tj-acmehero__go:hover { background: oklch(96% 0.02 260); }
.tj .tj-backbtn { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 8px 16px;
  border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: var(--surface-card);
  color: var(--text-brand); font-weight: 600; text-decoration: none; box-shadow: var(--tj-shadow-card); }
.tj .tj-backbtn:hover { border-color: var(--surface-brand); background: var(--surface-brand-subtle); }

/* the chat window: wider on big screens, and the two side columns run the chat's full height (no dead space
   under them): "Try saying" on the left and "What changed" on the right take up the room */
.tj-page:has(#tj-try:not([hidden])) { max-width: 1680px; }
@media (min-width: 1201px) {
  .tj-proposal.tj-try { align-items: stretch; gap: 16px; }
  .tj-try > .tj-you, .tj-try > .tj-try__side { display: flex; flex-direction: column; gap: 12px;
    height: calc(100vh - 110px); min-height: 460px; max-height: none; overflow: hidden; }
  .tj-try > .tj-you > *, .tj-try > .tj-try__side > * { flex: none; margin: 0; }
  .tj-try > .tj-you > .tj-say { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; }
  .tj-try > .tj-you > .tj-recent { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
  .tj-try > .tj-you > .tj-side__text { font-size: var(--fs-xs); }
  .tj-try > .tj-try__side > .tj-changed { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .tj-try > .tj-try__side > .tj-changed > .tj-changes { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .tj-try > .tj-try__side > .tj-changed > .tj-changes { display: flex; flex-direction: column; }
  .tj-try > .tj-try__side .tj-changes__empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
    width: 100%; box-sizing: border-box; min-height: 120px; padding: 20px; text-align: center; }
}
body:has(#tj-try:not([hidden])) .te-header__inner { max-width: 1680px; padding-inline: var(--gap-6); }
.tj .tj-backbtn[hidden] { display: none; }
.tj-journey > .tj-backbtn { margin: 0 0 12px; }
/* back buttons: a drawn arrow (the "←" character sat low) and the label centred in the pill */
.tj .tj-backbtn { height: 40px; padding: 0 18px 0 14px; gap: 8px; line-height: 1; align-items: center; }
.tj .tj-backbtn::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat; }
.tj a.tj-backbtn, .tj a.tj-backbtn:visited { color: var(--text-brand); }
/* light theme: a soft brand-tinted pill, navy label */
.tj .tj-backbtn { height: 44px; padding: 0 22px 0 18px; gap: 12px; border-color: transparent; background: var(--surface-brand-subtle);
  color: var(--tj-navy-800); font-weight: 700; box-shadow: none; }
.tj .tj-backbtn:hover { border-color: var(--border-brand); background: var(--surface-brand-subtle); }
/* the demo card picture: a live app (green live pill), chat bubbles, a ticked change and an orange pointer */
.tj-waitcard__pic circle.l { fill: oklch(70% 0.17 150); opacity: 1; }
.tj-waitcard__pic .lp { fill: oklch(95% 0.05 150); }
.tj-waitcard__pic .lt { fill: oklch(55% 0.13 150); }
.tj-waitcard__pic .ln { fill: var(--tj-navy-800); opacity: .35; }
.tj-waitcard__pic .b0 { opacity: .18; }
.tj-waitcard__pic .b1 { opacity: 1; }
.tj-waitcard__pic .ok { fill: var(--surface-card); stroke: oklch(70% 0.17 150); stroke-width: 1.2; }
.tj-waitcard__pic circle.okd { fill: oklch(70% 0.17 150); opacity: 1; }
.tj-waitcard__pic .okt { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tj-waitcard__pic .c { fill: oklch(72% 0.17 50); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.tj-waitcard__head { grid-template-columns: minmax(0, 1fr) 128px; } .tj-waitcard__pic svg { width: 128px; filter: drop-shadow(0 6px 14px oklch(0% 0 0 / .25)); }
/* small screens: "Try saying" and "What changed" never shrink below their content; the column scrolls instead */
@media (min-width: 1201px) {
  .tj-try > .tj-you, .tj-try > .tj-try__side { overflow-y: auto; }
  .tj-try > .tj-you > .tj-say { flex: 1 0 auto; overflow: visible; }
  .tj-try > .tj-try__side > .tj-changed { flex: 1 0 auto; min-height: 220px; }
}
.tj-try > .tj-you > .tj-side__text { display: none; }
/* HR's sample people in the chat: the joiner and the leaver, what is still to do, and what this trial has done */
.tj-hrpeople { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
  background: var(--surface-card); box-shadow: var(--tj-shadow-card); }
.tj-hrpeople .tj-side__label { margin: 0; }
.tj-hrperson { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
  padding: 10px; border-radius: var(--r-md); background: var(--surface-page); }
.tj .tj-hrperson .tj-persona__avatar { width: 34px; height: 34px; min-width: 0; font-size: var(--fs-xs); }
.tj-hrperson b { display: block; color: var(--text-strong); font-size: var(--fs-sm); }
.tj-hrperson small { color: var(--text-muted); font-size: var(--fs-xs); }
.tj-hrperson .te-pill { font-size: var(--fs-xs); white-space: nowrap; }
.tj-hrperson__use { grid-column: 2 / -1; justify-self: start; font-size: var(--fs-sm); }
.tj-hrperson.is-done { background: var(--status-success-bg); }
.tj-hrperson.is-done b { text-decoration: line-through; text-decoration-color: var(--status-success-fg); }

/* ---- "How SupportFlo did it": the agent's run played back, stage by stage ---------------------------------- */
.tj-flow2__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; margin-bottom: 18px;
  border-radius: var(--r-lg); background: linear-gradient(120deg, var(--tj-navy-800), var(--surface-brand)); color: #fff; }
.tj-flow2__agent { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .02em; }
.tj-flow2__agent i { width: 10px; height: 10px; border-radius: 50%; background: oklch(78% 0.17 150);
  box-shadow: 0 0 0 0 oklch(78% 0.17 150 / .7); animation: tj-flow2-ping 1.6s ease-out infinite; }
.tj-flow2__kpis { display: flex; gap: 8px; margin-left: auto; }
.tj-flow2__kpi { display: grid; justify-items: center; min-width: 74px; padding: 6px 10px; border-radius: var(--r-md);
  background: oklch(100% 0 0 / .12); }
.tj-flow2__kpi b { font-size: var(--tj-fs-h3, 18px); line-height: 1.1; }
.tj-flow2__kpi small { font-size: var(--fs-xs); opacity: .8; }
.tj-flow2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tj-flow2__step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding-bottom: 14px; }
/* the line that joins one stage to the next, drawn as the run plays */
.tj-flow2__step:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px;
  background: linear-gradient(var(--surface-brand), var(--border-default)); transform-origin: top; }
.tj-flow2__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-brand-subtle); color: var(--text-brand); box-shadow: 0 0 0 4px var(--surface-card); }
.tj-flow2__dot .te-ico { width: 18px; height: 18px; }
.tj-flow2__step.is-change .tj-flow2__dot { background: var(--surface-brand); color: #fff; }
.tj-flow2__step.is-done .tj-flow2__dot { background: oklch(70% 0.17 150); color: #fff; }
.tj-flow2__step.is-warn .tj-flow2__dot { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.tj-flow2__card { padding: 10px 14px; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: var(--surface-card);
  box-shadow: var(--tj-shadow-card); }
.tj-flow2__step.is-change .tj-flow2__card { border-color: var(--border-brand, var(--border-default)); }
.tj-flow2__step.is-done .tj-flow2__card { background: var(--status-success-bg); border-color: transparent; }
.tj-flow2__title { display: block; color: var(--text-strong); }
.tj-flow2__card p { margin: 2px 0 0; color: var(--text-body); font-size: var(--fs-sm); }
.tj-flow2__quote { font-style: italic; }
.tj-flow2__changes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.tj-flow2__who { margin-right: 2px; font-size: var(--fs-sm); color: var(--text-strong); }
.tj-flow2__chg { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 5px; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--surface-page); font-size: var(--fs-sm); }
.tj-flow2__chg small { color: var(--text-muted); }
.tj-flow2__chg s { color: var(--text-muted); }
.tj-flow2__chg i { font-style: normal; color: var(--text-brand); }
.tj-flow2__chg em { font-style: normal; font-weight: 700; color: var(--status-success-fg); }
.tj-flow2__at { display: block; margin-top: 4px; color: var(--text-muted); font-size: var(--fs-xs); }
.tj-flow2__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.tj-flow2__foot .tj-tech { flex: 1; }

/* playing: each stage slides in, its dot pops, its line draws down, its new values flash once */
.tj-flow2.is-playing .tj-flow2__step { animation: tj-flow2-in .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d); }
.tj-flow2.is-playing .tj-flow2__dot { animation: tj-flow2-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--d) + .08s); }
.tj-flow2.is-playing .tj-flow2__step:not(:last-child)::before { animation: tj-flow2-line .4s ease-out both; animation-delay: calc(var(--d) + .25s); }
.tj-flow2.is-playing .tj-flow2__chg em { animation: tj-flow2-flash 1.2s ease-out both; animation-delay: calc(var(--d) + .3s); }
.tj-flow2.is-playing .tj-flow2__step.is-done .tj-flow2__dot { animation: tj-flow2-pop .5s cubic-bezier(.3, 1.6, .5, 1) both,
  tj-flow2-glow 1.4s ease-out 1; animation-delay: calc(var(--d) + .08s), calc(var(--d) + .5s); }
@keyframes tj-flow2-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tj-flow2-pop { from { transform: scale(.3); } to { transform: scale(1); } }
@keyframes tj-flow2-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tj-flow2-flash { 0% { background: oklch(90% 0.12 150); } 100% { background: transparent; } }
@keyframes tj-flow2-glow { 0% { box-shadow: 0 0 0 4px var(--surface-card), 0 0 0 4px oklch(70% 0.17 150 / .6); }
  100% { box-shadow: 0 0 0 4px var(--surface-card), 0 0 0 18px oklch(70% 0.17 150 / 0); } }
@keyframes tj-flow2-ping { 0% { box-shadow: 0 0 0 0 oklch(78% 0.17 150 / .7); } 100% { box-shadow: 0 0 0 10px oklch(78% 0.17 150 / 0); } }
@media (prefers-reduced-motion: reduce) {
  .tj-flow2.is-playing .tj-flow2__step, .tj-flow2.is-playing .tj-flow2__dot, .tj-flow2.is-playing .tj-flow2__step::before,
  .tj-flow2.is-playing .tj-flow2__chg em, .tj-flow2__agent i { animation: none !important; }
}
@media (max-width: 640px) { .tj-flow2__kpis { margin-left: 0; width: 100%; } .tj-flow2__kpi { flex: 1; } }

/* live typing: a caret while the words come in; buttons and facts wait for the words */
.tj-msg.is-typing .tj-md > :last-child::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  vertical-align: -2px; background: var(--text-brand); animation: tj-caret .8s steps(1) infinite; }
.tj-msg.is-typing .tj-card__actions, .tj-msg.is-typing .tj-card__facts, .tj-msg.is-typing .tj-notechip { visibility: hidden; }
.tj-msgrow[hidden] { display: none; }
@keyframes tj-caret { 50% { opacity: 0; } }
.tj-typing__text { transition: opacity .2s; }

/* ---- Agent flow (chat screen tab): the assistant's design as its builder draws it ---- */
.tj-aflow { display: grid; gap: 8px; padding: 20px; }
.tj-aflow__lead { margin: 0 0 6px; color: var(--text-muted); font-size: var(--fs-sm); }
.tj-aflow__scroll { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
  background-color: var(--surface-sunken);
  background-image: radial-gradient(circle, var(--border-default) 1px, transparent 1.2px); background-size: 18px 18px; }
.tj-aflow__canvas { position: relative; margin: 0 auto; }
.tj-aflow__wires { position: absolute; inset: 0; overflow: visible; }
.tj-aflow__wire { fill: none; stroke: var(--text-muted); stroke-width: 1.6; stroke-dasharray: 2000; stroke-dashoffset: 0;
  animation: tj-aflow-draw .7s ease-out both; animation-delay: calc(var(--i) * 180ms + 250ms); }
.tj-aflow__wire.is-branch { stroke-dasharray: 3 4; animation-name: tj-aflow-fade; }
.tj-aflow__wires marker path { fill: var(--text-muted); }
.tj-aflow__when { position: absolute; padding: 1px 6px; border: 1px solid var(--border-default); border-radius: var(--r-md);
  background: var(--surface-card); color: var(--text-muted); font: 11px/1.4 ui-monospace, Consolas, monospace; white-space: nowrap; }
.tj-aflow__block { position: absolute; display: flex; align-items: center; gap: 10px; width: 216px; height: 84px; padding: 10px 12px;
  box-sizing: border-box; border: 1px solid var(--border-subtle); border-left: 3px solid var(--text-brand); border-radius: var(--r-lg);
  background: var(--surface-card); box-shadow: var(--tj-shadow-card);
  animation: tj-aflow-pop .45s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i) * 140ms); }
.tj-aflow__block.is-step { border-left-color: oklch(55% 0.2 290); }
.tj-aflow__icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--r-md);
  background: var(--surface-brand); color: #fff; }
.tj-aflow__block.is-step .tj-aflow__icon { background: oklch(55% 0.2 290); }
.tj-aflow__block.is-agent .tj-aflow__icon { border-radius: 50%; }
.tj-aflow__icon .te-ico { width: 16px; height: 16px; }
.tj-aflow__text { display: grid; min-width: 0; line-height: 1.25; }
.tj-aflow__text small { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tj-aflow__text b { color: var(--text-strong); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tj-aflow__text span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--text-muted); font-size: var(--fs-xs); }
.tj-aflow__start { position: absolute; top: -11px; left: 14px; padding: 1px 9px; border-radius: var(--radius-pill);
  background: var(--tj-navy-800); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
@keyframes tj-aflow-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tj-aflow-draw { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }
@keyframes tj-aflow-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tj-aflow__block, .tj-aflow__wire { animation: none; } }

/* Quick replies under a bot message ("Send me a reset link | No thanks"): one tap answers */
.tj-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tj-quick__btn { padding: 6px 14px; border: 1px solid var(--border-brand, var(--border-default)); border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-brand); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.tj-quick__btn:hover { background: var(--surface-brand-subtle); }
.tj-quick__btn:focus-visible { outline: 2px solid var(--text-brand); outline-offset: 2px; }

/* Acme home, product-page style: eyebrow, headline, two buttons, a number row; colleagues, steps, systems, value, close */
.tj .tj-acmehero.is-big { gap: 14px; padding: 40px 36px 32px; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, oklch(100% 0 0 / .10), transparent 55%), var(--tj-hero); }
.tj-acmehero__eyebrow { margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: oklch(100% 0 0 / .7); }
.tj .tj-acmehero.is-big .tj-acmehero__title { max-width: 20ch; font-size: clamp(28px, 4vw, 40px); line-height: 1.12; }
.tj-acmehero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.tj .tj-acmehero__alt { min-height: 52px; padding: 0 24px; background: transparent; border: 1px solid oklch(100% 0 0 / .45); color: #fff;
  font-weight: 600; }
.tj .tj-acmehero__alt:hover { background: oklch(100% 0 0 / .1); }
/* a shorter hero: less padding and spacing, a smaller title and button */
.tj .tj-acmehero.is-big { gap: 8px; padding: 22px 28px 18px; }
.tj .tj-acmehero.is-big .tj-acmehero__title { max-width: 32ch; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; margin: 0; }
.tj .tj-acmehero.is-big .tj-acmehero__sub { font-size: var(--fs-sm); }
.tj .tj-acmehero.is-big .tj-acmehero__ctas { margin-top: 4px; }
.tj .tj-acmehero.is-big .tj-acmehero__go, .tj .tj-acmehero.is-big .tj-acmehero__alt { min-height: 40px; padding: 0 18px; font-size: var(--fs-sm); }
.tj .tj-acmehero.is-big .tj-acmehero__go .te-ico { width: 16px; height: 16px; }

.tj-mates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tj-mate { display: grid; gap: 10px; grid-template-rows: auto auto 1fr auto auto; padding: 22px; border: 1px solid var(--border-default);
  border-radius: var(--r-lg); background: var(--surface-card); box-shadow: var(--tj-shadow-card); transition: transform .15s ease, box-shadow .15s ease; }
.tj-mate:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -16px var(--tj-navy-800, #1b2a4a); }
.tj-mate__top { display: flex; align-items: center; gap: 14px; }
.tj-mate__top b { display: block; font-size: var(--tj-fs-h3); color: var(--text-strong); }
.tj-mate__top small { color: var(--text-muted); font-size: var(--fs-sm); }
.tj-mate__avatar { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface-brand); color: var(--text-on-brand); box-shadow: 0 0 0 4px var(--surface-selected); }
.tj-mate__avatar.is-hr { background: oklch(58% 0.14 300); }
.tj-mate__avatar .te-ico { width: 24px; height: 24px; }
.tj-mate > p { margin: 0; color: var(--text-body); font-size: var(--fs-sm); }
.tj-mate__can { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tj-mate__can li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-strong); }
.tj-mate__can .te-ico { width: 16px; height: 16px; color: var(--status-success-fg); flex: none; }
.tj .tj-mate__where { color: var(--text-muted); font-size: var(--fs-xs); }
.tj-mate__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px;
  border-top: 1px solid var(--border-subtle); }
.tj-mate__foot small { color: var(--text-muted); font-size: var(--fs-xs); }

.tj-runsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: run; }
.tj-runsteps li { position: relative; display: grid; gap: 4px; align-content: start; padding: 16px; border-radius: var(--r-lg);
  background: var(--surface-card); border: 1px solid var(--border-default); animation: tj-runin .4s ease both; animation-delay: calc(var(--i) * 80ms); }
.tj-runsteps li:not(:last-child)::after { content: ""; position: absolute; top: 34px; right: -10px; width: 8px; height: 8px;
  border-top: 2px solid var(--border-strong); border-right: 2px solid var(--border-strong); transform: rotate(45deg); }
.tj-runsteps__ic { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 10px;
  background: var(--surface-selected); color: var(--text-brand); }
.tj-runsteps__ic .te-ico { width: 18px; height: 18px; }
.tj-runsteps b { color: var(--text-strong); }
.tj-runsteps span:last-child { color: var(--text-muted); font-size: var(--fs-sm); }
@keyframes tj-runin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tj-syschips { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.tj-syschip { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border-default);
  border-radius: var(--r-lg); background: var(--surface-card); }
.tj-syschip b { display: block; color: var(--text-strong); }
.tj-syschip small { color: var(--text-muted); font-size: var(--fs-xs); }

.tj-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tj-value { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: var(--r-lg); background: var(--surface-sunken);
  border-top: 3px solid var(--tj-accent); }
.tj-value small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-brand); }
.tj-value b { color: var(--text-strong); font-size: var(--tj-fs-h3); line-height: 1.3; }
.tj-value p { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }

.tj .tj-acmeclose { padding: 32px 36px; text-align: left; }
.tj .tj-acmeclose .tj-acmehero__title { font-size: clamp(22px, 3vw, 30px); }

@media (max-width: 900px) {
  .tj-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tj-runsteps { grid-template-columns: 1fr; }
  .tj-runsteps li:not(:last-child)::after { display: none; }
}
@media (max-width: 640px) {
  .tj-mates, .tj-values { grid-template-columns: 1fr; }
  .tj .tj-acmehero.is-big, .tj .tj-acmeclose { padding: 24px 18px; }
}
@media (prefers-reduced-motion: reduce) { .tj-runsteps li { animation: none; } .tj-mate, .tj-mate:hover { transition: none; transform: none; } }

/* Acme: behind the scenes, one request through the four layers */
.tj-tour { display: grid; gap: 18px; }
.tj-tour__eyebrow { margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-brand); }
/* tour notes are compact: a small heading over short text */
.tj .tj-tour__title { margin: 2px 28px 4px 0; font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: 0; color: var(--text-strong); }
.tj-tour__sub { margin: 6px 0 0; max-width: 70ch; color: var(--text-muted); }
.tj-tour__picks { display: flex; flex-wrap: wrap; gap: 8px; }
.tj-tour__pick { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border-default);
  border-radius: var(--radius-pill); background: var(--surface-card); color: var(--text-body); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.tj-tour__pick:hover { border-color: var(--surface-brand); }
.tj-tour__pick.is-on { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--text-on-brand); font-weight: 600; }
.tj-tour__pick.is-mine { border-style: dashed; }
.tj-tour__pick.is-mine.is-on { border-style: solid; }
.tj-tour__pick .te-ico { width: 15px; height: 15px; }
.tj-tour__facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.tj-tour__facts div { display: grid; gap: 2px; }
.tj-tour__facts dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.tj-tour__facts dd { margin: 0; font-weight: 600; color: var(--text-strong); }

.tj-tour__stage { border: 1px solid var(--border-default); border-radius: var(--r-lg); background: var(--surface-card); box-shadow: var(--tj-shadow-card); overflow: hidden; }
.tj-tour__scroll { overflow-x: auto; }
.tj-tour__grid { position: relative; display: grid; grid-template-columns: 190px repeat(var(--n), minmax(104px, 1fr));
  grid-template-rows: repeat(4, 92px); min-width: calc(190px + var(--n) * 104px); }
.tj-tour__lane { position: sticky; left: 0; z-index: 3; grid-column: 1; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background: var(--surface-card); border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.tj-tour__lane b { display: block; color: var(--text-strong); font-size: var(--fs-sm); }
.tj-tour__lane small { display: block; color: var(--text-muted); font-size: 11px; line-height: 1.3; }
.tj-tour__laneic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: var(--lane); }
.tj-tour__laneic .te-ico { width: 17px; height: 17px; }
.tj-tour__band { grid-column: 2 / -1; border-bottom: 1px solid var(--border-subtle); background: color-mix(in oklch, var(--lane) 5%, transparent); }
.tj-tour__lane:nth-of-type(7), .tj-tour__band:nth-of-type(8) { border-bottom: 0; }
.is-channel { --lane: oklch(58% 0.13 240); }
.is-agent { --lane: oklch(56% 0.17 295); }
.is-auto { --lane: oklch(62% 0.16 50); }
.is-systems { --lane: oklch(56% 0.12 160); }
.tj-tour__wires { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
.tj-tour__wire { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .55; }
.tj-tour__wire.is-done { stroke: var(--surface-brand); stroke-dasharray: none; opacity: .8; }
.tj-tour__wire.is-now { stroke-width: 2.5; stroke-dasharray: 8 6; animation: tj-tourflow .8s linear infinite; }
@keyframes tj-tourflow { to { stroke-dashoffset: -14; } }
.tj-tour__node { position: relative; z-index: 2; align-self: center; justify-self: center; display: grid; justify-items: center; gap: 4px;
  width: calc(100% - 14px); padding: 8px 6px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-card);
  font: inherit; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease, border-color .2s ease; }
.tj-tour__num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-sunken);
  color: var(--text-muted); font-size: 11px; font-weight: 700; }
.tj-tour__nt { font-size: 12px; line-height: 1.25; text-align: center; color: var(--text-body); }
.tj-tour__node.is-later { opacity: .5; }
.tj-tour__node.is-done .tj-tour__num { background: var(--lane); color: #fff; }
.tj-tour__node.is-now { border: 2px solid var(--lane); transform: scale(1.06); box-shadow: 0 0 0 5px color-mix(in oklch, var(--lane) 18%, transparent), 0 10px 22px -12px var(--lane); }
.tj-tour__node.is-now .tj-tour__num { background: var(--lane); color: #fff; }
.tj-tour__node.is-now .tj-tour__nt { font-weight: 700; color: var(--text-strong); }

.tj-tour__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tj-tour__count { margin-left: auto; color: var(--text-muted); font-size: var(--fs-sm); }
.tj-tour__card { display: grid; gap: 6px; padding: 20px 22px; border-radius: var(--r-lg); background: var(--surface-card);
  border: 1px solid var(--border-default); border-left: 4px solid var(--tj-accent); animation: tj-runin .3s ease both; }
.tj-tour__cardtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tj-tour__cardtop small { color: var(--text-muted); font-size: var(--fs-xs); }
.tj-tour__tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--lane) 14%, transparent); color: var(--lane); font-size: var(--fs-xs); font-weight: 700; }
.tj-tour__tag .te-ico { width: 14px; height: 14px; }
.tj-tour__card h3 { margin: 4px 0 0; font-size: var(--tj-fs-h3); color: var(--text-strong); }
.tj-tour__detail { margin: 0; color: var(--text-body); }
.tj-tour__card .te-btn { justify-self: start; margin-top: 4px; }
.tj-tour__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.tj-tour__foot { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.tj-tour__foot .te-ico { flex: none; width: 16px; height: 16px; margin-top: 2px; }
@media (max-width: 640px) {
  .tj-tour__grid { grid-template-columns: 116px repeat(var(--n), 108px); min-width: 0; grid-template-rows: repeat(4, 96px); }
  .tj-tour__lane { padding: 0 8px; gap: 6px; } .tj-tour__lane small { display: none; } .tj-tour__laneic { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .tj-tour__wire.is-now { animation: none; } .tj-tour__node { transition: none; } .tj-tour__node.is-now { transform: none; } .tj-tour__card { animation: none; }
}

/* What changed before the first change: compact, says what will appear and in which systems */
.tj .tj-try > .tj-try__side > .tj-changed.is-empty { flex: none; min-height: 0; }
.tj .tj-try > .tj-try__side > .tj-changed.is-empty > .tj-changes { flex: none; overflow: visible; }
.tj .tj-try > .tj-try__side .tj-changed.is-empty .tj-changes__empty { flex: none; display: grid; gap: 6px; justify-items: start; min-height: 0;
  padding: 16px; text-align: left; font-size: var(--fs-sm); }
.tj .tj-try .tj-changes li.tj-changes__empty { grid-template-columns: minmax(0, 1fr); }

/* Acme email: an approval waiting in a mailbox, and the approver's two buttons */
.tj-mail__box.is-ask small { color: var(--status-warning-fg, oklch(55% 0.15 60)); font-weight: 600; }
.tj-mail__box.is-ask .tj-mail__count { background: var(--status-warning-fg, oklch(62% 0.16 60)); }
.tj-mail__decide { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 10px; padding: 12px 14px;
  border-radius: var(--r-md); background: var(--surface-selected); }
.tj-mail__decide > span { font-weight: 600; color: var(--text-strong); margin-right: 4px; }

/* Acme email: Inbox / Sent, a sent mail's state, the folded mailboxes */
.tj-mail__folders { display: flex; gap: 4px; padding: 8px 16px; border-bottom: 1px solid var(--border-subtle); }
.tj-mail__folder { padding: 6px 14px; border: 0; border-radius: var(--radius-pill); background: none; font: inherit;
  font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer; }
.tj-mail__folder:hover { background: var(--surface-sunken); color: var(--text-strong); }
.tj-mail__folder.is-on { background: var(--surface-selected); color: var(--text-brand); font-weight: 600; }
.tj-mail__state { margin-left: auto; margin-right: 8px; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600;
  background: var(--surface-sunken); color: var(--text-muted); }
.tj-mail__state.is-done { background: color-mix(in oklch, var(--status-success-fg) 14%, transparent); color: var(--status-success-fg); }
.tj-mail__itemtop { gap: 6px; }
.tj-mail__who.is-mine { color: var(--text-brand); font-weight: 600; }
.tj-mail__more { margin: 8px 12px; padding: 6px 10px; border: 1px dashed var(--border-default); border-radius: var(--r-md); background: none;
  font: inherit; font-size: var(--fs-sm); color: var(--text-brand); cursor: pointer; text-align: left; }
.tj-mail__more:hover { border-style: solid; }

/* Acme email: ideas to write, and SupportFlo still writing back */
.tj-mail__ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 4px; }
.tj-mail__ideaslabel { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.tj-mail__idea { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border-default);
  border-radius: var(--radius-pill); background: var(--surface-card); font: inherit; font-size: var(--fs-sm); color: var(--text-body); cursor: pointer; }
.tj-mail__idea .te-ico { width: 14px; height: 14px; color: var(--text-brand); }
.tj-mail__idea:hover { border-color: var(--surface-brand); }
.tj-mail__idea.is-on { background: var(--surface-selected); border-color: var(--surface-brand); color: var(--text-brand); font-weight: 600; }
.tj-mail__waiting { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface-sunken); color: var(--text-muted); font-size: var(--fs-sm); }
.tj-mail__dots { flex: none; width: 28px; height: 8px; background:
  radial-gradient(circle, var(--text-brand) 3px, transparent 3.5px) 0 0 / 10px 8px repeat-x; animation: tj-maildots 1s steps(3) infinite; }
@keyframes tj-maildots { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .tj-mail__dots { animation: none; } }

/* Acme Try it: "Chatting as …" in one line (no person card) */
.tj-rolebox.is-line { padding: 0; }
.tj-asline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; padding: 12px 14px; border-radius: var(--r-lg);
  background: var(--surface-sunken); font-size: var(--fs-sm); color: var(--text-muted); }
.tj-asline b { color: var(--text-strong); }
.tj-asline small { color: var(--text-muted); font-size: var(--fs-sm); }
.tj-asline__av { display: grid; place-items: center; width: 28px; height: 28px; margin-right: 4px; border-radius: 50%;
  background: var(--surface-brand); color: var(--text-on-brand); font-size: 11px; font-weight: 700; }
.tj-asline .tj-linkbtn { margin-left: auto; }
.tj-asline__pick { margin-left: auto; max-width: 100%; padding: 4px 8px; border: 1px solid var(--border-default); border-radius: var(--r-md);
  font: inherit; font-size: var(--fs-sm); background: var(--surface-card); }

/* Acme Try it: who you are chatting as (you, signed in; or a scenario's sample person) */
.tj-me { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: center;
  padding: 16px; border-radius: var(--r-lg); overflow: hidden; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, oklch(100% 0 0 / .12), transparent 60%), var(--tj-hero, var(--surface-brand)); }
.tj-me:not(.is-me) { background: var(--surface-sunken); color: var(--text-body); }
.tj-me__av { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-weight: 700; font-size: 15px;
  background: #fff; color: var(--tj-navy-800, var(--text-brand)); box-shadow: 0 0 0 3px oklch(100% 0 0 / .25); }
.tj-me:not(.is-me) .tj-me__av { background: var(--surface-brand); color: var(--text-on-brand); box-shadow: 0 0 0 3px var(--surface-selected); }
.tj-me__words p { margin: 0; }
.tj-me__label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.tj-me__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px !important; }
.tj-me__name b { font-size: var(--tj-fs-h3, 17px); line-height: 1.25; }
.tj-me:not(.is-me) .tj-me__name b { color: var(--text-strong); }
.tj-me__tag { padding: 1px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700;
  background: oklch(78% 0.15 155); color: oklch(25% 0.05 155); }
.tj-me:not(.is-me) .tj-me__tag { background: var(--surface-card); color: var(--text-muted); border: 1px solid var(--border-default); }
.tj-me__job { font-size: var(--fs-sm); opacity: .85; }
.tj-me:not(.is-me) .tj-me__job { color: var(--text-muted); opacity: 1; }
.tj-me__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.tj-me__switch { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid oklch(100% 0 0 / .4); background: oklch(100% 0 0 / .08); color: inherit; font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.tj-me__switch:hover { background: oklch(100% 0 0 / .18); }
.tj-me:not(.is-me) .tj-me__switch { border-color: var(--border-default); background: var(--surface-card); color: var(--text-brand); }
.tj-me__switch .te-ico { width: 15px; height: 15px; }
.tj-me__pick { padding: 6px 10px; border: 1px solid var(--border-default); border-radius: var(--r-md); font: inherit; font-size: var(--fs-sm);
  background: var(--surface-card); color: var(--text-body); max-width: 100%; }

/* Agent flow takes the full width, like Email and ITSM */
.tj-proposal.tj-try[data-channel="flow"] { grid-template-columns: minmax(0, 1fr); }
.tj-try[data-channel="flow"] > .tj-you,
.tj-try[data-channel="flow"] > .tj-try__side,
.tj-try[data-channel="flow"] .tj-mtabs { display: none; }
.tj-try.is-acme[data-channel="flow"] .tj-chat__head { display: none; }
.tj-try[data-channel="flow"] .tj-chat { height: auto; min-height: calc(100vh - 140px); }
.tj-try[data-channel="flow"] #tj-channel-pane { overflow: visible; }

.tj-try[data-channel="flow"] .tj-chat__hint { display: none; }

/* Agent flow, the client's view: the steps a request takes, as the assistant's flow runs them (equal cards,
   numbered, one arrow between each; a column on narrow screens) */
.tj-fd__stage { position: relative; margin-top: 10px; padding: 28px 28px 20px; border-radius: var(--r-lg);
  background: radial-gradient(circle at 1px 1px, color-mix(in oklch, var(--text-muted) 18%, transparent) 1px, transparent 0) 0 0 / 18px 18px,
              linear-gradient(180deg, var(--surface-card), var(--surface-sunken));
  border: 1px solid var(--border-default); min-width: 0; max-width: 100%; box-sizing: border-box; }
.tj-fd__scroll { overflow-x: auto; max-width: 100%; margin: -6px -6px 0; padding: 6px 6px 10px; }
/* always one row: each step at least 190px wide; when the pane is narrower the row scrolls sideways */
.tj-fd { --gap: 34px; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(190px, 1fr)); gap: var(--gap);
  margin: 0; padding: 0; list-style: none; align-items: stretch; }
.tj-fd__step { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 16px 16px;
  border-radius: 14px; background: var(--surface-card); border: 1px solid var(--border-default);
  box-shadow: 0 1px 2px oklch(25% 0.03 265 / .06), 0 12px 26px -20px oklch(25% 0.05 265 / .55);
  animation: tj-runin .4s ease both; animation-delay: calc(var(--i) * 70ms); }
/* the arrow to the next step, at the middle of the boxes */
.tj-fd__step:not(:last-child)::after { content: ""; position: absolute; top: calc(50% - 1px); right: calc(-1 * var(--gap) + 6px);
  width: calc(var(--gap) - 12px); height: 2px; background: var(--border-strong); }
.tj-fd__step:not(:last-child)::before { content: ""; position: absolute; top: calc(50% - 5px); right: calc(-1 * var(--gap) + 4px);
  border: 5px solid transparent; border-left: 7px solid var(--border-strong); border-right: 0; z-index: 1; }
.tj-fd__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; margin-bottom: 6px; }
.tj-fd__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: var(--surface-brand-subtle); color: var(--text-brand); }
.tj-fd__ic .te-ico { width: 20px; height: 20px; }
.tj-fd__ic.is-logo { flex: 0 1 auto; width: auto; min-width: 0; height: 40px; padding: 0; background: none; }
.tj-fd__logo { display: block; height: auto; max-height: 20px; width: auto; max-width: 100%; }
.tj-fd__num { flex: none; }
.tj-fd__num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 700;
  color: var(--text-muted); background: var(--surface-sunken); border: 1px solid var(--border-default); }
.tj-fd__step small { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.tj-fd__step b { color: var(--text-strong); font-size: 15px; line-height: 1.3; }
.tj-fd__line { margin: 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.45; }
.tj-fd__you { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 12px; font-weight: 800; font-size: 14px;
  background: var(--surface-brand); color: var(--text-on-brand); }
/* the AI assistant: the one dark card */
.tj-fd__step.is-agent { border-color: transparent; color: #fff;
  background: radial-gradient(120% 120% at 100% 0%, oklch(100% 0 0 / .12), transparent 55%), var(--tj-hero, oklch(30% 0.09 265));
  box-shadow: 0 16px 32px -18px oklch(30% 0.1 265); }
.tj-fd__step.is-agent small, .tj-fd__step.is-agent .tj-fd__line { color: oklch(100% 0 0 / .78); }
.tj-fd__step.is-agent b { color: #fff; }
.tj-fd__step.is-agent .tj-fd__ic { background: #fff; color: oklch(40% 0.15 285); }
.tj-fd__step.is-agent .tj-fd__num { background: oklch(100% 0 0 / .12); border-color: oklch(100% 0 0 / .25); color: #fff; }
.tj-fd__step.is-run.is-ae { border-color: oklch(80% 0.12 55); }
.tj-fd__step.is-sys .tj-fd__ic, .tj-fd__step.is-reply .tj-fd__ic { background: oklch(95% 0.04 160); color: oklch(45% 0.11 160); }
/* the operations it runs, and the systems they change */
.tj-fd__chips, .tj-fd__syslist { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.tj-fd__chip, .tj-fd__sysrow { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 9px; border-radius: 9px;
  background: var(--surface-sunken); color: var(--text-strong); font-size: 12px; font-weight: 600; line-height: 1.3; }
.tj-fd__chip .te-ico, .tj-fd__sysrow .te-ico { flex: none; width: 14px; height: 14px; }
.tj-fd__chip .te-ico { color: oklch(50% 0.13 60); }
.tj-fd__sysrow .te-ico { color: oklch(45% 0.11 160); }
.tj-fd__note { display: flex; gap: 8px; align-items: flex-start; margin: 18px 0 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.45; }
.tj-fd__note .te-ico { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.tj-aflow__builder { margin-top: 26px !important; }
/* live, by class (works where CSS animation is off): the step a request is at, the arrows it has passed, the line below */
.tj-fd__step { transition: box-shadow .35s ease, border-color .35s ease; }
.tj-fd__step.is-active { border-color: var(--border-brand, oklch(55% 0.15 265));
  box-shadow: 0 0 0 3px color-mix(in oklch, oklch(55% 0.17 265) 28%, transparent), 0 18px 32px -18px oklch(25% 0.08 265 / .6); }
.tj-fd__step.is-agent.is-active { box-shadow: 0 0 0 4px color-mix(in oklch, oklch(60% 0.17 285) 45%, transparent), 0 18px 34px -16px oklch(30% 0.1 265); }
.tj-fd__step.is-ae.is-active { border-color: oklch(70% 0.17 55); box-shadow: 0 0 0 3px oklch(70% 0.17 55 / .28), 0 18px 32px -18px oklch(40% 0.1 55 / .5); }
.tj-fd__step.is-active .tj-fd__num { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--text-on-brand); }
.tj-fd__step.is-agent.is-active .tj-fd__num { background: #fff; color: oklch(35% 0.12 265); }
.tj-fd__step.is-passed:not(:last-child)::after { background: oklch(64% 0.19 50); }
.tj-fd__step.is-passed:not(:last-child)::before { border-left-color: oklch(64% 0.19 50); }
.tj-fd__step.is-passed .tj-fd__num { background: oklch(95% 0.05 150); border-color: oklch(80% 0.1 150); color: oklch(42% 0.12 150); }
.tj-fd__step.is-agent.is-passed .tj-fd__num { background: oklch(100% 0 0 / .2); border-color: oklch(100% 0 0 / .4); color: #fff; }
.tj-fd__chip, .tj-fd__sysrow { transition: background-color .3s ease, box-shadow .3s ease; }
.tj-fd__step.is-active .tj-fd__chip.is-active { background: oklch(95% 0.05 60); box-shadow: inset 3px 0 0 oklch(64% 0.19 50); }
.tj-fd__step.is-active .tj-fd__sysrow.is-active { background: oklch(95% 0.04 160); box-shadow: inset 3px 0 0 oklch(55% 0.13 160); }
.tj-fd__live { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 8px 12px; width: fit-content; max-width: 100%;
  border-radius: 999px; background: var(--surface-card); border: 1px solid var(--border-default); font-size: 13px; color: var(--text-body); }
.tj-fd__live b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: oklch(55% 0.2 25); }
.tj-fd__livedot { width: 8px; height: 8px; border-radius: 50%; background: oklch(60% 0.22 25); box-shadow: 0 0 0 3px oklch(60% 0.22 25 / .2);
  animation: tj-fdblink 1.4s ease-in-out infinite; }
@keyframes tj-fdblink { 50% { opacity: .35; } }
[data-theme="dark"] .tj-fd__step.is-active .tj-fd__chip.is-active { background: oklch(35% 0.06 60 / .6); }
[data-theme="dark"] .tj-fd__step.is-active .tj-fd__sysrow.is-active { background: oklch(35% 0.06 160 / .6); }
[data-theme="dark"] .tj-fd__step.is-passed .tj-fd__num { background: oklch(35% 0.06 150 / .6); color: oklch(88% 0.1 150); }
/* live, where animation is on: a dot runs along each arrow in turn, in step with the script (1.4 s a step and a pause) */
.tj-fd__pulse { position: absolute; top: calc(50% - 5px); left: calc(100% + 4px); width: 10px; height: 10px; border-radius: 50%; z-index: 2;
  background: oklch(64% 0.19 50); box-shadow: 0 0 0 4px oklch(64% 0.19 50 / .22), 0 0 10px oklch(64% 0.19 50 / .6);
  opacity: 0; pointer-events: none; animation: tj-fdpulse calc((var(--n) + 1) * 1.4s) linear infinite; animation-delay: calc(var(--i) * 1.4s); }
@keyframes tj-fdpulse { 0% { opacity: 0; transform: translateX(0); } 2% { opacity: 1; }
  14% { opacity: 1; transform: translateX(calc(var(--gap) - 18px)); } 16%, 100% { opacity: 0; transform: translateX(calc(var(--gap) - 18px)); } }
@media (prefers-reduced-motion: reduce) { .tj-fd__step { animation: none; } .tj-fd__pulse { display: none; } }
[data-theme="dark"] .tj-fd__step.is-sys .tj-fd__ic, [data-theme="dark"] .tj-fd__step.is-reply .tj-fd__ic {
  background: oklch(40% 0.07 160 / .45); color: oklch(85% 0.1 160); }
[data-theme="dark"] .tj-fd__chip .te-ico { color: oklch(85% 0.12 75); }
[data-theme="dark"] .tj-fd__sysrow .te-ico { color: oklch(85% 0.1 160); }
/* an Acme reset link: opens the trial's own "choose your new password" page */
.tj-resetlink { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0; padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--surface-brand); color: var(--text-on-brand) !important; font-weight: 600; text-decoration: none; }
.tj-resetlink:hover { filter: brightness(1.1); }
.tj-resetlink::after { content: "↗"; font-size: .9em; }

/* Under the business case headline: where the full analysis is (the deck) */
.tj-deckline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: -6px 0 4px; color: var(--muted, #5b6474); font-size: 15px; }
.tj-deckline svg { width: 16px; height: 16px; flex: none; }
.tj-deckline .tj-linkbtn { font-weight: 600; }

/* "Your trials" inside the business case card, before the title, set off by a divider */
.tj-casebar__back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; margin-right: 4px;
  border-right: 1px solid var(--border, #e3e7ee); color: var(--brand-fg, #1f3a8a); font-weight: 600; text-decoration: none; }
.tj-casebar__back .te-ico { width: 16px; height: 16px; transform: scaleX(-1); }
.tj-casebar__back:hover span { text-decoration: underline; }

/* the business case card: one row on a wide screen (it wraps only on small ones) */
@media (min-width: 1100px) { .tj-casebar { flex-wrap: nowrap; } .tj-casebar__words { flex-wrap: nowrap; white-space: nowrap; } }

/* Sign-up form: two fields a row on wide screens, one on phones */
.tj-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 560px) { .tj-form__row { grid-template-columns: 1fr; } }
#tj-register .tj-check { align-items: flex-start; margin: 4px 0 8px; font-size: 14px; }
#tj-register .tj-check input { margin-top: 2px; }
.tj-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tj-check input { width: 16px; height: 16px; flex: none; }

/* 1024px and narrower desktops: the header keeps to the screen (trial feedback: horizontal scroll at 1024px).
   The signed-in name and the guide buttons' words give way; their icons and titles stay. */
@media (max-width: 1180px) {
  .te-header__end { gap: 4px; min-width: 0; }
  .te-header__end .tj-who { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 1100px) {
  #tj-howto, #tj-tour { font-size: 0; gap: 0; padding-inline: 8px; }
  #tj-howto .te-ico, #tj-tour .te-ico { width: 18px; height: 18px; }
}

/* The portal's request form */
.tj-glpi__raise { display: grid; gap: 12px; max-width: 640px; }
.tj-glpi__raise .te-field { display: grid; gap: 6px; }
.tj-glpi__raise select, .tj-glpi__raise textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--border, #d9dee7); border-radius: 8px; background: var(--surface, #fff); color: inherit; }
.tj-glpi__raise .te-btn { justify-self: start; }

/* "What you can try in your trial": highlighted - a brand edge and tint, an icon tile, the count as a pill */
.tj-worktable.te-card { position: relative; overflow: hidden; padding: 18px 20px 14px 24px; gap: 12px;
  border-color: var(--border-brand, var(--text-brand));
  background: linear-gradient(180deg, var(--status-info-bg, #eef3ff) 0, var(--surface-card) 92px);
  box-shadow: 0 6px 18px rgba(31, 47, 107, .08); }
.tj-worktable.te-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--surface-brand, #1f2f6b); }
.tj-worktable__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.tj-worktable__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  background: var(--surface-brand, #1f2f6b); color: var(--text-on-brand, #fff); }
.tj-worktable__icon .te-ico { width: 20px; height: 20px; }
.tj-worktable__words .tj-h3 { margin: 0; font-size: var(--fs-lg, 1.125rem); color: var(--text-strong); }
.tj-worktable__words .te-muted { margin: 2px 0 0; font-size: var(--fs-sm); }
.tj-worktable__count { padding: 4px 12px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  background: var(--surface-brand, #1f2f6b); color: var(--text-on-brand, #fff); }
.tj-worktable .tj-table__scroll { border-radius: var(--r-md); border: 1px solid var(--border-subtle); background: var(--surface-card); }
.tj-worktable .tj-work tbody tr { transition: background-color .12s ease; }
.tj-worktable .tj-work tbody tr:hover { background: var(--surface-hover); }
.tj-worktable .tj-work tbody tr:last-child td { border-bottom: 0; }
/* under the headline: what the figures cover (all the client's tickets) and what the trial automates (a few of them) */
.tj-scope { display: flex; align-items: flex-start; gap: 12px; margin: -4px 0 0; padding: 14px 18px; border-radius: var(--r-lg);
  background: var(--surface-brand-subtle); border: 1px solid var(--border-brand, var(--border-default));
  color: var(--text-body); font-size: var(--fs-base, 1rem); line-height: 1.55; }
.tj-scope p { margin: 0; max-width: 110ch; }
.tj-scope b { color: var(--text-strong); }
.tj-scope > .te-ico { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--text-brand); }
/* the four columns: the use case (wide), tickets and value a year (centred numbers), how SupportFlo handles it */
.tj-worktable .tj-work { table-layout: fixed; }
.tj-worktable .tj-work th, .tj-worktable .tj-work td { padding: 12px 16px; vertical-align: middle; }
.tj-worktable .tj-work th:nth-child(1) { width: 44%; }
.tj-worktable .tj-work th:nth-child(2) { width: 15%; }
.tj-worktable .tj-work th:nth-child(3) { width: 15%; }
.tj-worktable .tj-work th:nth-child(4) { width: 26%; }
.tj-work td small.tj-work__deck { margin-top: 2px; color: var(--text-brand); }
.tj-worktable .tj-work th.tj-num, .tj-worktable .tj-work td.tj-num { text-align: center; }
@media (max-width: 700px) { .tj-worktable .tj-work { table-layout: auto; } }
/* a phone: one tile a row, and each use case a block of its own with its figures labelled (no sideways scroll) */
@media (max-width: 600px) {
  .tj .tj-kpicards { grid-template-columns: minmax(0, 1fr); }
  .tj-worktable .tj-work, .tj-worktable .tj-work tbody, .tj-worktable .tj-work tr { display: block; width: 100%; }
  .tj-worktable .tj-work thead { display: none; }
  .tj-worktable .tj-work tr { padding: 12px 4px; border-bottom: 1px solid var(--border-subtle); }
  .tj-worktable .tj-work tbody tr:last-child { border-bottom: 0; }
  .tj-worktable .tj-work td { display: flex; justify-content: space-between; gap: 12px; width: auto !important; padding: 3px 12px;
    border: 0; text-align: left !important; }
  .tj-worktable .tj-work td:first-child { display: block; padding-bottom: 6px; }
  .tj-worktable .tj-work td[data-label]::before { content: attr(data-label); color: var(--text-muted); font-size: var(--fs-xs);
    font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .tj-worktable .tj-table__scroll { overflow: visible; }
}
@media (max-width: 560px) { .tj-worktable__head { grid-template-columns: auto minmax(0, 1fr); } .tj-worktable__count { grid-column: 2; justify-self: start; } }

/* Try it: two columns. No left column: the chat takes that room, and the right-hand column holds who you
   are (signed in) on top, then "What changed" and the sample systems. Email, ITSM, Systems and Agent flow
   keep their own full-width layout (their rules above are more specific). */
.tj-proposal.tj-try { grid-template-columns: minmax(0, 1fr) 340px; }
.tj-try__side > .tj-you { position: static; max-height: none; overflow: visible; }
@media (max-width: 1200px) {
  .tj-proposal.tj-try { grid-template-columns: minmax(0, 1fr) 300px; }
  .tj-proposal.tj-try > .tj-try__side { grid-column: auto; }
}
@media (max-width: 900px) {
  .tj-proposal.tj-try { grid-template-columns: 1fr; }
  .tj-try[data-pane="changed"] > .tj-chat { display: none; }
}

/* the bot's forms (the identity operations): labelled boxes on the card, two to a row, then Submit / Cancel */
.tj-cardform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.tj-cardform .te-field label { font-size: var(--fs-sm); }
.tj-cardform .te-field textarea { min-height: 64px; padding: 8px 10px; border: 1px solid var(--border-default); border-radius: var(--r-md);
  background: var(--surface-card); font: inherit; resize: vertical; }
.tj-cardform .te-field input[type="checkbox"] { justify-self: start; width: 18px; height: 18px; }
.tj-cardform .te-field :disabled { opacity: .75; cursor: default; }
.tj-cardform .te-field [aria-invalid="true"] { border-color: var(--status-danger-fg); }
/* a message holding a form uses the chat's full width, so its two columns have room */
.tj-msgrow .tj-msg:has(.tj-card--form), .tj-try.is-s6[data-channel="chat"] .tj-msgrow .tj-msg:has(.tj-card--form) { max-width: 100%; flex: 1; }
@media (max-width: 600px) { .tj-cardform { grid-template-columns: 1fr; } }

/* ---- "We understood your work" number cards: icon tile | label, number, note (like the business case's headline) ---- */
.tj-kpis { gap: 16px; }
.tj .tj-kpi.has-ico { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r-lg);
  background: var(--surface-card); border: 1px solid oklch(92% .015 262); box-shadow: 0 2px 10px oklch(40% .08 262 / .06); }
.tj-kpi__ico { flex: none; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
  background: oklch(95.5% .02 262); color: var(--tj-navy-800); }
.tj-kpi__ico .te-ico { width: 26px; height: 26px; stroke-width: 1.7; }
.tj-kpi__words { display: grid; gap: 2px; min-width: 0; }
.tj .tj-kpi.has-ico .tj-kpi__words > span { font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); }
.tj .tj-kpi.has-ico .tj-kpi__words > b { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; font-weight: 700;
  color: oklch(48% .2 262); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tj .tj-kpi.has-ico .tj-kpi__words > small { font-size: var(--fs-sm); color: var(--text-muted); }
[data-theme="dark"] .tj .tj-kpi.has-ico .tj-kpi__words > b { color: var(--tj-navy-300); }
@media (max-width: 760px) { .tj .tj-kpi.has-ico { padding: 14px 16px; gap: 12px; } .tj-kpi__ico { width: 44px; height: 44px; } }

/* ---- the business case's headline: the deck line with its button, and the four cards with an icon tile ---- */
.tj-deckline.is-bar { gap: 10px 16px; margin: 0; color: var(--text-body); }
.tj-deckline.is-bar > svg { width: 20px; height: 20px; color: var(--text-brand); }
.tj-deckline.is-bar .tj-deckline__btn { border-radius: var(--radius-pill, 999px); padding: 0 20px; min-height: 42px; font-weight: 600;
  background: linear-gradient(135deg, var(--tj-navy-800), oklch(48% .19 262)); border-color: transparent; }
.tj-deckline.is-bar .tj-deckline__btn svg { width: 18px; height: 18px; }
.tj .tj-proposal .tj-kpicards { gap: 16px; }
.tj .tj-proposal .tj-kpicard.has-ico { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r-lg);
  background: var(--surface-card); border: 1px solid oklch(92% .015 262); box-shadow: 0 2px 10px oklch(40% .08 262 / .06); }
.tj .tj-proposal .tj-kpicard.has-ico.is-key { border-color: oklch(85% .05 262); box-shadow: 0 4px 16px oklch(40% .12 262 / .12); }
.tj-kpicard__ico { flex: none; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
  background: oklch(95.5% .02 262); color: var(--tj-navy-800); }
.tj-kpicard__ico .te-ico { width: 26px; height: 26px; stroke-width: 1.7; }
.tj-kpicard__words { display: grid; gap: 2px; min-width: 0; }
.tj .tj-proposal .tj-kpicard.has-ico .tj-kpicard__words > span { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--text-strong); }
.tj .tj-proposal .tj-kpicard.has-ico .tj-kpicard__words > b { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; font-weight: 700;
  color: oklch(48% .2 262); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tj .tj-proposal .tj-kpicard.has-ico .tj-kpicard__words > b small { font-size: var(--fs-md); font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.tj .tj-proposal .tj-kpicard.has-ico .tj-kpicard__note { margin: 0; padding: 0; border: 0; background: none; font-size: var(--fs-xs); color: var(--text-muted); }
[data-theme="dark"] .tj .tj-proposal .tj-kpicard.has-ico .tj-kpicard__words > b { color: var(--tj-navy-300); }
@media (max-width: 760px) { .tj .tj-proposal .tj-kpicard.has-ico { padding: 14px 16px; gap: 12px; } .tj-kpicard__ico { width: 44px; height: 44px; } }

/* the header steps carry longer names now ("Try SupportFlo (Seed Data)"): one line each, tighter on mid-size screens */
.tj-hsteps__step { white-space: nowrap; }
@media (max-width: 1500px) { .tj-hsteps { gap: 14px; } .tj-hsteps__step { font-size: 13px; } }

/* header: the person as their initials in a circle (name and e-mail on hover), and the steps never push
   Tour / Sign out off the edge */
.tj .tj-who { flex: none; width: 34px; height: 34px; max-width: none; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--surface-brand); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; overflow: visible; cursor: default; }
.tj .tj-who[hidden] { display: none; }
/* the account menu: the initials are a button; the card under them holds the name, e-mail and Sign out */
.tj-usermenu { position: relative; display: inline-flex; }
.tj-usermenu[hidden] { display: none; }
.tj .tj-usermenu .tj-who { border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.tj .tj-usermenu .tj-who:hover, .tj .tj-usermenu .tj-who[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--surface-selected); }
.tj-usermenu__pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 280px; max-width: calc(100vw - 32px);
  padding: 6px; border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--surface-card);
  box-shadow: 0 12px 32px rgb(15 23 42 / .16), 0 2px 6px rgb(15 23 42 / .08); }
.tj-usermenu__pop[hidden] { display: none; }
.tj-usermenu__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 10px 12px;
  border-bottom: 1px solid var(--border-default); margin-bottom: 6px; }
.tj-usermenu__av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-brand);
  color: #fff; font-size: 14px; font-weight: 700; }
.tj-usermenu__words { display: grid; gap: 2px; min-width: 0; }
.tj-usermenu__words b { color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tj-usermenu__words small { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--fs-sm); min-width: 0; }
.tj-usermenu__words small span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tj-usermenu__words small .te-ico { flex: none; width: 14px; height: 14px; }
.tj-usermenu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--r-sm, 6px);
  background: none; color: var(--text-body); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.tj-usermenu__item:hover, .tj-usermenu__item:focus-visible { background: var(--surface-page); color: var(--text-strong); }
.tj-usermenu__item .te-ico { width: 16px; height: 16px; }
.tj .te-header__inner { display: flex; align-items: center; }
.tj .te-header__end { flex: none; display: flex; align-items: center; gap: 8px; }
.tj .tj-hsteps { flex: 1 1 auto; min-width: 0; justify-content: center; }
/* the header stepper: circles joined by a line; done steps tick and turn the line solid, the current step is filled */
.tj .tj-hsteps.is-stepper { gap: 0; }
.tj .is-stepper .tj-hsteps__step { gap: 8px; padding: 4px 6px; background: none; border-radius: var(--radius-pill); color: var(--text-muted); }
.tj .is-stepper .tj-hsteps__step.is-now { background: none; color: var(--text-strong); font-weight: 700; }
.tj .is-stepper .tj-hsteps__step.is-done { color: var(--text-body); }
.tj .is-stepper button.tj-hsteps__step:hover .tj-hsteps__label { color: var(--text-brand); text-decoration: underline; text-underline-offset: 3px; }
.tj-hsteps__dot { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px;
  font-weight: 700; color: var(--text-muted); background: var(--surface-card); border: 1.5px solid var(--border-strong); }
.is-stepper .tj-hsteps__step.is-now .tj-hsteps__dot { color: var(--text-on-brand); background: var(--surface-brand); border-color: var(--surface-brand);
  box-shadow: 0 0 0 4px var(--surface-brand-subtle); }
.is-stepper .tj-hsteps__step.is-done .tj-hsteps__dot { color: #fff; background: var(--status-success-fg); border-color: var(--status-success-fg); }
.tj .is-stepper .tj-hsteps__step .tj-hsteps__dot .te-ico { width: 14px; height: 14px; color: inherit; }
.tj-hsteps__line { flex: 1 1 24px; min-width: 16px; max-width: 64px; height: 0; margin: 0 4px;
  border-top: 2px dashed var(--border-strong); }
.tj-hsteps__line.is-done { border-top-style: solid; border-color: var(--status-success-fg); }

/* ---- the trial strip when ready (or ended): a calendar tile, the days left in an orange pill, an orange button ---- */
.tj .tj-trialstrip.is-ready { flex-wrap: wrap; gap: 12px 18px; padding: 14px 18px; border-radius: 16px;
  border: 1.5px solid var(--ae-orange-300, #f8b27a); background: linear-gradient(90deg, var(--ae-orange-50, #fff4ec), #fff 70%);
  box-shadow: 0 6px 18px rgb(245 135 60 / .12); }
.tj-trialstrip__tile { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(245 135 60 / .14); color: var(--ae-orange-500, #f5873c); }
.tj-trialstrip__tile .te-ico { width: 28px; height: 28px; }
.tj .tj-trialstrip.is-ready .tj-trialstrip__words { flex: 1 1 320px; font-size: var(--fs-lg); color: var(--text-body); }
.tj-trialstrip__words b { color: var(--text-strong); font-weight: 800; }
.tj-trialstrip__days { display: inline-block; margin-left: 2px; padding: 2px 14px; border-radius: 999px; font-weight: 800;
  background: rgb(245 135 60 / .16); color: var(--ae-orange-800, #b4501a); }
.tj-trialstrip__cta { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border: 0; border-radius: 10px;
  background: linear-gradient(180deg, var(--ae-orange-500, #f5873c), #e0561f); color: #fff; font: inherit; font-weight: 700;
  box-shadow: 0 3px 0 #c44716, 0 6px 14px rgb(224 86 31 / .25); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.tj-trialstrip__cta .te-ico { width: 18px; height: 18px; transition: transform .15s ease; }
.tj-trialstrip__cta:hover { transform: translateY(-1px); }
.tj-trialstrip__cta:hover .te-ico { transform: translateX(2px); }
.tj-trialstrip__cta:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; }
[data-theme="dark"] .tj .tj-trialstrip.is-ready { background: rgb(245 135 60 / .08); }
@media (max-width: 760px) { .tj-trialstrip__cta { width: 100%; justify-content: center; } .tj-trialstrip__tile { width: 44px; height: 44px; } }
/* the tile is a span too: keep it out of the old "every span grows" rule, so it stays a 52px circle */
.tj .tj-trialstrip.is-ready > .tj-trialstrip__tile { flex: 0 0 52px; width: 52px; height: 52px; }
.tj .tj-trialstrip.is-ready > .tj-trialstrip__words { flex: 1 1 auto; min-width: 0; text-align: left; }
@media (max-width: 760px) { .tj .tj-trialstrip.is-ready > .tj-trialstrip__tile { flex-basis: 44px; width: 44px; height: 44px; } }

/* Option A (2 Nov): the ready strip as a calm status line - slim, a light tint, no glow; the build link a quiet
   text link, so "Try SupportFlo" stays the page's main action */
.tj .tj-trialstrip.is-ready { min-height: 0; padding: 8px 16px; gap: 8px 14px; border: 1px solid #fbd5b5; border-radius: 12px;
  background: var(--ae-orange-50, #fff7f1); box-shadow: none; }
.tj .tj-trialstrip.is-ready > .tj-trialstrip__tile { flex: 0 0 36px; width: 36px; height: 36px; background: rgb(245 135 60 / .12); }
.tj .tj-trialstrip.is-ready > .tj-trialstrip__tile .te-ico { width: 20px; height: 20px; }
.tj .tj-trialstrip.is-ready > .tj-trialstrip__words { font-size: var(--fs-md); }
.tj .tj-trialstrip.is-ready .tj-trialstrip__words b { font-weight: 700; }
.tj .tj-trialstrip.is-ready .tj-trialstrip__days { margin: 0 1px 0 2px; padding: 1px 10px; font-weight: 700; }
.tj .tj-trialstrip.is-ready .tj-trialstrip__cta { padding: 4px 2px; border-radius: 6px; background: none; box-shadow: none;
  color: var(--text-brand); font-weight: 600; gap: 6px; }
.tj .tj-trialstrip.is-ready .tj-trialstrip__cta:hover { transform: none; text-decoration: underline; }
.tj .tj-trialstrip.is-ready .tj-trialstrip__cta .te-ico { width: 16px; height: 16px; }
@media (max-width: 760px) { .tj .tj-trialstrip.is-ready .tj-trialstrip__cta { width: auto; } }

/* ---- Try SupportFlo (Your Data): its own teal accent, so it never looks like the Seed Data (Acme) demo ---- */
.tj-try.is-own { --own: oklch(50% .1 190); --own-strong: oklch(42% .09 190); --own-soft: oklch(96.5% .025 190); --own-line: oklch(85% .06 190); }
.tj-ownbadge { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 2px 10px; border-radius: 999px;
  background: oklch(94% .04 190); color: oklch(38% .09 190); font-size: var(--fs-xs); font-weight: 700; vertical-align: middle; white-space: nowrap; }
.tj-ownbadge i { width: 7px; height: 7px; border-radius: 50%; background: oklch(55% .12 190); }
.tj-ownline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 10px 22px;
  background: var(--own-soft); border-left: 4px solid var(--own); color: var(--text-body); font-size: var(--fs-sm); }
.tj-ownline[hidden] { display: none; }
.tj-ownline .te-ico { width: 16px; height: 16px; color: var(--own); }
.tj-ownline b { color: var(--own-strong); }
.tj-try.is-own .tj-chat__mark { background: var(--own); color: #fff; }
.tj-try.is-own .tj-channels__btn[aria-selected="true"] { color: var(--own-strong); border-bottom-color: var(--own); }
.tj-try.is-own .tj-chat__form .te-btn--primary { background: var(--own); border-color: var(--own); }
.tj-try.is-own .tj-chat__form .te-btn--primary:hover { background: var(--own-strong); border-color: var(--own-strong); }
.tj-try.is-own .tj-chat__form:focus-within { border-color: var(--own-line); }
.tj .tj-try.is-own .tj-mail__box.is-on { box-shadow: inset 3px 0 0 var(--own); background: var(--own-soft); color: var(--own-strong); }
/* the badge sits under "SupportFlo", flush with it (no "IT assistant" line in Your Data) */
.tj-try.is-own .tj-chat__who .tj-ownbadge { margin: 4px 0 0; justify-self: start; }

/* Try SupportFlo (Your Data): the channels live in the header (as in the Acme demo), so not again in the chat;
   the way back to the business case sits above, across the whole page */
.tj-try.is-own .tj-channels { display: none; }
@media (min-width: 1201px) {
  .tj-try.is-own > .tj-try__side { height: calc(100vh - 170px); }
}

/* the Seed Data demo's tab: the person's own analysis has finished, with the way back to it */
.tj-readybar { position: fixed; z-index: 80; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center;
  gap: 12px; max-width: calc(100vw - 32px); padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--surface-card);
  border: 1px solid var(--border-default); box-shadow: 0 16px 40px -12px oklch(20% 0.05 265 / .45); color: var(--text-strong);
  font-weight: 600; }
.tj-readybar[hidden] { display: none; }
.tj-readybar > .te-ico { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--status-success-bg);
  color: var(--status-success-fg); }
.tj-readybar__close { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none;
  color: var(--text-muted); cursor: pointer; }
.tj-readybar__close:hover { background: var(--surface-sunken); color: var(--text-strong); }

/* the uploaded file's row: Replace file and Remove side by side */
.tj-udone__acts { flex: none; display: flex; align-items: center; gap: 16px; }
.tj .tj-udone__remove { color: var(--status-danger-fg, #b42318); }
/* the sample tickets: a sentence with a download link (not a file row), then "or" before the drop zone */
.tj .tj-sample { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 0; border: 0; background: none; cursor: auto;
  color: var(--text-body); font-size: var(--fs-sm); line-height: 1.55; }
.tj .tj-sample b { color: var(--text-strong); }
.tj-sample__ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: var(--surface-brand-subtle); color: var(--text-brand); }
.tj-sample__ic .te-ico { width: 15px; height: 15px; }
.tj-sample__link { color: var(--text-link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tj-or { display: flex; align-items: center; gap: 12px; margin: 2px 0; color: var(--text-muted); font-size: var(--fs-xs);
  font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.tj-or::before, .tj-or::after { content: ""; flex: 1; border-top: 1px solid var(--border-default); }

/* Review fixes: the ready time as plain text, the summary after the cards, the deck block, locked "Try it" */
.tj-casebar__ready { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.tj-casebar__ready svg { width: 16px; height: 16px; flex: none; }
.tj-trialstrip.is-line { flex-wrap: wrap; padding: 10px 14px; }
.tj-trialstrip.is-line .tj-trialstrip__words { flex: 1 1 280px; }
.tj-summary { margin: 0; font-size: var(--fs-md, 1rem); line-height: 1.5; color: var(--text-default, inherit); }
.tj-summary b { color: var(--text-strong); font-weight: 700; }
.tj-deckline__words { display: grid; gap: 2px; flex: 1 1 280px; min-width: 0; }
.tj-deckline__words b { color: var(--text-strong); font-size: var(--fs-md, 1rem); }
.tj-deckline__words span { font-size: var(--fs-sm); color: var(--text-muted); }
.tj-work__go { text-align: right; white-space: nowrap; }
.tj-work__locked { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.tj-work__locked svg { width: 14px; height: 14px; flex: none; }
.tj-track__step.is-locked .tj-track__btn { cursor: not-allowed; opacity: .8; }
.tj-track__step.is-locked .tj-track__dot svg { width: 14px; height: 14px; }

/* Upload review fixes: recent trials in a sticky side panel, a one-line sample link, a file row with its button */
.tj-start.is-upload { max-width: 1160px; }
.tj-ulayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.tj-umain { display: grid; gap: 12px; min-width: 0; max-width: 860px; }
.tj-ulayout.has-recent .tj-umain { max-width: none; }
.tj-uside { position: sticky; top: 16px; align-self: start; padding: 14px 16px; border-bottom: 0; }
.tj-ulayout.has-recent { grid-template-columns: minmax(0, 1fr) 340px; }
/* in the narrow panel a row is the icon and the words side by side, and the badge on a line of its own below */
.tj-uside .tj-mine__row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.tj-uside .tj-mine__row .tj-mine__tag { grid-column: 1 / -1; justify-self: start; }
.tj-uside .tj-mine__words b { white-space: nowrap; font-size: var(--fs-sm); }
.tj-uside .tj-mine__words small { overflow-wrap: anywhere; }
@media (max-width: 900px) { .tj-ulayout.has-recent { grid-template-columns: minmax(0, 1fr); } .tj-uside { position: static; } }
.tj .tj-sample { display: block; padding: 10px 14px; border: 0; border-radius: var(--r-md); background: var(--surface-subtle, oklch(96% 0 0));
  color: var(--text-muted); font-size: var(--fs-sm); }
.tj .tj-sample__link { color: var(--text-link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tj-filerow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--r-md);
  background: var(--surface-card); }
.tj-filerow[hidden] { display: none; }
.tj-filerow__ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--surface-selected); color: var(--text-brand); }
.tj-filerow__ic .te-ico { width: 18px; height: 18px; }
.tj-filerow__words { flex: 1; min-width: 0; display: grid; }
.tj-filerow__words b { overflow-wrap: anywhere; color: var(--text-strong); }
.tj-filerow__words small { color: var(--text-muted); }

/* ---- UX review (12 Nov): quiet status line, grey basis line, light deck row, one-line ending ---- */
.tj .tj-trialstrip.is-quiet { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; gap: 6px 10px;
  flex-wrap: wrap; align-items: center; min-height: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.tj .tj-trialstrip.is-quiet > .tj-trialstrip__tile { flex: none; width: 18px; height: 18px; background: none; border-radius: 0; }
.tj .tj-trialstrip.is-quiet > .tj-trialstrip__tile .te-ico { width: 16px; height: 16px; color: var(--text-muted); }
.tj .tj-trialstrip.is-quiet > .tj-trialstrip__words { flex: 0 1 auto; font-size: var(--fs-sm); color: var(--text-muted); }
.tj .tj-trialstrip.is-quiet .tj-linkbtn { font-size: var(--fs-sm); color: var(--text-muted); text-decoration: underline; }
.tj-summary { font-size: var(--fs-lg, 1.125rem); line-height: 1.55; }
.tj-basis { margin: -6px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.tj-deckline.is-bar { background: var(--ae-blue-50, #f3f8ff); border: 0; border-radius: 14px; padding: 16px 20px; margin: 0 0 28px; }
.tj-endline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
  margin-top: 8px; font-size: var(--fs-sm); color: var(--text-muted); }
.tj-endline__link { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: var(--fs-sm); }
.tj-endline__link .te-ico { width: 16px; height: 16px; }
[data-theme="dark"] .tj-deckline.is-bar { background: rgb(80 140 255 / .10); }

/* UX review (12 Nov), upload limit: actions first, the sample company as a quiet link, a dashed divider, the request button on the right */
.tj-quota__seed { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: var(--fs-sm); color: var(--text-muted);
  text-decoration: underline; cursor: pointer; }
.tj-quota__seed .te-ico { width: 14px; height: 14px; }
.tj-quota__form { padding-top: 16px; border-top: 1px dashed var(--border-default); }
.tj-quota__form .te-btn { justify-self: end; }
.tj-endline__links { display: inline-flex; flex-wrap: wrap; gap: 8px 20px; margin-left: auto; }
.tj-endline__links .tj-endline__link { margin-left: 0; }
.tj-waitcard.is-after { max-width: 520px; }
.tj-proposal.is-waiting { grid-template-columns: minmax(0, 1fr); }

/* Analysis screen on one view (no scrolling): the five stages side by side, each a dot over its card */
@media (min-width: 1100px) {
  .tj-proposal.is-waiting .tj-stagecard__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
  .tj-proposal.is-waiting .tj-stage2 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto 1fr; gap: 10px; }
  .tj-proposal.is-waiting .tj-stage2::before { display: none; }
  .tj-proposal.is-waiting .tj-stage2__dot { width: 34px; height: 34px; }
  .tj-proposal.is-waiting .tj-stage2__card { padding: 12px 14px; align-content: start; }
  .tj-proposal.is-waiting .tj-stage2__row b { font-size: var(--fs-sm); }
  .tj-proposal.is-waiting .tj-stage2__text { font-size: var(--fs-sm); }
  .tj-proposal.is-waiting .tj-stage2__how { font-size: var(--fs-xs); }
}
#tj-proposal.is-waiting { grid-template-columns: minmax(0, 1fr); }

/* the Seed Data demo in the business case bar: clearly a button, with one line saying what it is */
.tj-seedtry { display: grid; justify-items: end; gap: 4px; }
.tj-seedtry small { font-size: var(--fs-xs); color: var(--text-muted); text-align: right; }
.tj .tj-seedbtn { background: var(--surface-brand-subtle, #eef3ff); color: var(--text-brand, #1d3a8a); border: 1.5px solid var(--border-brand, #1d3a8a);
  border-radius: 999px; padding: 0 18px; min-height: 40px; font-weight: 700; box-shadow: none; }
.tj .tj-seedbtn:hover { background: var(--surface-brand, #1d3a8a); color: var(--text-on-brand, #fff); }
.tj .tj-seedbtn .te-ico { width: 18px; height: 18px; }
.tj-deckline.is-bar.tj-seedline { margin: 0 0 28px; background: var(--surface-card, #fff); border: 1px solid var(--border-default); }
.tj-deckline.is-bar.tj-seedline .tj-seedline__btn { box-shadow: 0 2px 8px oklch(40% .12 262 / .35); }
.tj-deckline.is-bar.tj-seedline .tj-seedline__btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px oklch(40% .12 262 / .45); }
.tj-deckline.is-bar:not(.tj-seedline) { margin-bottom: 16px; }
.tj-deckline.is-bar.tj-seedline { margin-bottom: 4px; }
#tj-details-seed:not(:empty) { margin: 0 0 16px; }
#tj-details-seed .tj-seedline { margin: 0; }

/* UX review (12 Nov): back arrow only; the Seed Data entry as a plain row above the deck, a bold underlined link */
.tj-casebar__back.is-arrow { padding: 6px; border-right: 0; margin-right: 0; }
.tj-seedrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 4px 0 -4px; padding: 0 4px; }
.tj-seedrow > .te-ico { flex: none; width: 20px; height: 20px; color: var(--text-muted); }
.tj-seedrow__words { display: grid; gap: 2px; flex: 1 1 320px; min-width: 0; }
.tj-seedrow__words b { color: var(--text-strong); }
.tj-seedrow__words span { font-size: var(--fs-sm); color: var(--text-muted); }
.tj-seedrow__link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--text-brand, #1d3a8a); text-decoration: underline; text-underline-offset: 3px; }
.tj-seedrow__link .te-ico { width: 16px; height: 16px; transition: transform .15s ease; }
.tj-seedrow__link:hover .te-ico { transform: translateX(3px); }
.tj-seedrow__link:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; border-radius: 4px; }
.tj-casebar__back.is-arrow { padding: 8px; margin-right: 6px; }
.tj-casebar__back.is-arrow .te-ico { width: 24px; height: 24px; stroke-width: 2.25; }
/* the Seed Data row as a box, the same as the deck row under it */
.tj-seedrow { gap: 10px 16px; margin: 0 0 12px; padding: 16px 20px; border-radius: 14px; background: var(--ae-blue-50, #f3f8ff); border: 0; }
.tj-seedrow > .te-ico { width: 20px; height: 20px; color: var(--text-brand); }
.tj-seedrow__words b { font-size: var(--fs-md, 1rem); }
[data-theme="dark"] .tj-seedrow { background: rgb(80 140 255 / .10); }
/* the Seed Data row in its own light violet, so it reads as a different thing from the blue deck row; the link is a boxed button */
.tj-seedrow { background: oklch(96.5% .022 295); }
.tj-seedrow > .te-ico { color: oklch(48% .16 295); }
.tj-seedrow__link { padding: 9px 18px; border: 1.5px solid oklch(68% .12 295); border-radius: 999px; background: oklch(99% .008 295);
  color: oklch(40% .16 295); text-decoration: none; }
.tj-seedrow__link:hover { background: oklch(94% .035 295); }
[data-theme="dark"] .tj-seedrow { background: rgb(150 110 255 / .12); }
[data-theme="dark"] .tj-seedrow__link { background: rgb(150 110 255 / .10); color: oklch(85% .08 295); border-color: oklch(60% .12 295); }
.tj-mail__example { margin-top: 10px; }
.tj-mail__examplebtn { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 14px; border: 1px solid var(--border-brand, var(--border-default));
  border-radius: 999px; background: var(--surface-brand-subtle, #eef3ff); color: var(--text-brand); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-align: left; }
.tj-mail__examplebtn:hover { background: var(--surface-selected, #e4ecff); }
.tj-mail__examplebtn .te-ico { width: 16px; height: 16px; flex: none; }
.tj-mail__examplebtn b { overflow-wrap: anywhere; }
.tj-mail__banner.is-compact { background: none; border: 0; padding: 0 2px 8px; font-size: var(--fs-sm); color: var(--text-muted); }
.tj-mail__banner.is-compact b { color: var(--text-strong); }

/* Agent flow: the whole row fits the page, no sideways scroll (the steps share the width; on a narrow page they wrap) */
.tj-fd__scroll { overflow-x: visible; }
.tj-fd { --gap: 24px; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
.tj-fd__step { padding: 14px 12px 12px; }
.tj-fd__step b { font-size: 14px; overflow-wrap: anywhere; }
.tj-fd__line { font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 1250px) {
  .tj-fd { --gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
  .tj-fd__step::after, .tj-fd__step::before, .tj-fd__pulse { display: none; }
}
@media (max-width: 760px) { .tj-fd { grid-template-columns: minmax(0, 1fr); } }

/* Excel next to the deck; the CSV link in the sandbox table's heading */
.tj-deckline__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.tj-deckline__data { border-radius: 999px; padding: 0 16px; min-height: 42px; font-weight: 600; background: var(--surface-card, #fff);
  border: 1.5px solid var(--border-brand, var(--border-default)); color: var(--text-brand); }
.tj-deckline__data svg { width: 18px; height: 18px; }
.tj-worktable__csv { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.tj-worktable__csv .te-ico { width: 15px; height: 15px; }