/* =============================================================================
   TROVIS — public waitlist landing
   -----------------------------------------------------------------------------
   Scoped under .tl so it never leaks into (or picks up) the app theme. Shared
   by the SPA front door and the FastAPI-served trovisai.com page.
   Brand: linen paper, ink type, Trovis teal (#36635F) as the one accent.
   Participant types each get a colour AND a shape AND a text label:
   person = clay circle, AI agent = teal rounded square, tool/system = slate
   square; a failed tool event is the slate square in red with an ×.
   ============================================================================= */

.tl {
  --linen: #f5f1eb;
  --cream: #fbf8f3;
  --paper: #fffdf9;
  --line: #ddd7ce;
  --line-soft: #e8e2d8;
  --ink: #2c2418;
  --body: #4a4137;
  --muted: #6b6257;
  --teal: #36635f;
  --teal-deep: #213d3a;
  --teal-ink: #1a302e;
  --teal-soft: #e2ebe9;
  --teal-light: #88b0ac;
  --person: #97552f;
  --person-bg: #f5e6db;
  --agent: #36635f;
  --system: #4c5864;
  --system-bg: #e5e8eb;
  --done: #2a7656;
  --done-bg: #e1f0e8;
  --pending: #9a5a0c;
  --pending-bg: #fbecd6;
  --pending-line: #e2a454;
  --fail: #b2382b;
  --fail-bg: #f8e3df;
  --disp: "Space Grotesk", system-ui, sans-serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  min-height: 100vh;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Resets carry zero specificity (:where) so component classes always win. */
:where(.tl) *, :where(.tl) *::before, :where(.tl) *::after { box-sizing: border-box; }
:where(.tl) :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(.tl) :where(ul, ol) { padding: 0; list-style: none; }
:where(.tl) button { font: inherit; color: inherit; }
.tl [hidden] { display: none !important; }
:where(.tl) a { color: inherit; }

.tl-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.tl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tl-skip {
  position: absolute; left: 16px; top: -48px; z-index: 50;
  background: var(--ink); color: var(--cream); padding: 10px 14px; border-radius: 8px;
  text-decoration: none; font-weight: 600;
}
.tl-skip:focus { top: 12px; }

.tl :focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.tl-join :focus-visible, .tl-footer :focus-visible { outline-color: var(--cream); }
.tl-answers :focus-visible, .tl-expl :focus-visible { outline-color: var(--teal-light); }

/* ---------- Buttons & small pieces ---------- */
.tl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 10px;
  background: var(--teal); color: #fff;
  font-family: var(--disp); font-weight: 600; font-size: 16px; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 8px 20px -12px rgba(33,61,58,0.7);
}
.tl-btn:hover { background: var(--teal-deep); }
.tl-btn:active { transform: translateY(1px); }
.tl-btn-sm { min-height: 40px; padding: 0 16px; font-size: 14.5px; }
.tl-btn-light { background: var(--cream); color: var(--teal-ink); box-shadow: none; }
.tl-btn-light:hover { background: #fff; }
.tl-btn[disabled] { opacity: 0.6; cursor: progress; }
.tl-textbtn {
  background: none; border: 0; padding: 8px 4px; cursor: pointer;
  color: inherit; text-decoration: underline; text-underline-offset: 3px; opacity: 0.85;
}

.tl-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; border: 1px dashed currentColor;
}
.tl-tag-sample { color: var(--muted); }
.tl-tag-concept { color: var(--teal); margin-bottom: 18px; }
.tl-time { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: -0.01em; white-space: nowrap; }

.tl-status {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
}
.tl-status-done { color: var(--done); background: var(--done-bg); }
.tl-status-pending { color: var(--pending); background: var(--pending-bg); }
.tl-status-fail { color: var(--fail); background: var(--fail-bg); }

.tl-src { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--system); }
.tl-insight-kicker {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-light);
}
.tl-mark-dot { width: 8px; height: 8px; border-radius: 2px; background: currentColor; box-shadow: 10px 0 0 currentColor; margin-right: 18px; }

/* Participant pills */
.tl-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; font-size: 13px; font-weight: 600; border: 1px solid; background: var(--paper); white-space: nowrap; }
.tl-pill::before { content: ""; flex: none; width: 9px; height: 9px; }
.tl-pill-person { border-radius: 999px; color: var(--person); border-color: #e5c9b6; }
.tl-pill-person::before { border-radius: 50%; background: var(--person); }
.tl-pill-agent { border-radius: 9px; color: var(--agent); border-color: #b7cfcc; }
.tl-pill-agent::before { border-radius: 3px; background: var(--agent); }
.tl-pill-system { border-radius: 4px; color: var(--system); border-color: #c5ccd3; }
.tl-pill-system::before { border-radius: 1px; background: var(--system); }
.tl-arrow { flex: none; display: inline-block; width: 16px; height: 2px; background: var(--teal-light); position: relative; }
.tl-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 6px solid var(--teal-light); border-right: 0; }

/* ---------- Header ---------- */
.tl-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(245, 241, 235, 0.86);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.tl-header.is-stuck { border-bottom-color: var(--line); }
.tl-header-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.tl-brand { display: inline-flex; color: var(--teal); text-decoration: none; padding: 4px 0; }
.tl-lockup { display: block; height: 24px; width: auto; }
.tl-nav { display: flex; align-items: center; gap: 14px; }

/* ---------- Hero ---------- */
.tl-hero { padding: 64px 0 24px; position: relative; }
.tl-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 760px; pointer-events: none;
  background:
    radial-gradient(60% 50% at 85% 10%, rgba(136, 176, 172, 0.22), transparent 70%),
    radial-gradient(40% 40% at 5% 0%, rgba(151, 85, 47, 0.07), transparent 70%);
}
.tl-hero .tl-wrap { position: relative; }
.tl-hero-copy { max-width: 1000px; }
.tl-h1 {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(38px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -0.035em;
  color: var(--ink);
}
.tl-h1, .tl-h2, .tl-expl-title, .tl-answer-title { text-wrap: balance; }
.tl-accent { display: block; color: var(--teal); }
/* Launch stage: readable status, not decoration. */
.tl-badge {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  padding: 7px 14px 7px 12px; border-radius: 999px;
  background: var(--paper); border: 1px solid #b7cfcc; color: var(--teal-deep);
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 6px 16px -12px rgba(33, 61, 58, 0.5);
}
.tl-badge-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.tl-badge-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--teal);
  opacity: 0; animation: tl-ping 2.4s var(--ease) infinite;
}
@keyframes tl-ping { 0% { transform: scale(0.5); opacity: 0.6; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
.tl-lede { margin-top: 24px; max-width: 720px; font-size: clamp(17.5px, 1.5vw, 20px); line-height: 1.6; color: var(--body); }
.tl-benefit { margin-top: 14px; font-family: var(--disp); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--teal); }

/* ---------- Signup (hero = light, closing = dark) ---------- */
.tl-signup-light { margin-top: 28px; max-width: 560px; }
.tl-form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.tl-input {
  flex: 1 1 220px; min-width: 0; width: 100%; min-height: 48px; padding: 0 14px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--cream); border: 1px solid transparent; border-radius: 10px;
}
.tl-signup-light .tl-input { background: var(--paper); border-color: var(--line); }
.tl-signup-light .tl-input:hover { border-color: #c4bbad; }
.tl-input::placeholder { color: #8c8378; }
.tl-input[aria-invalid="true"] { border-color: #e08b7d; box-shadow: 0 0 0 3px rgba(224,139,125,0.3); }
.tl-textarea { padding: 12px 14px; min-height: 92px; resize: vertical; line-height: 1.5; }
.tl-label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.tl-form-more .tl-label { margin-top: 14px; }
.tl-error { margin-top: 10px; font-size: 14px; }
.tl-form-note { margin-top: 12px; font-size: 15px; font-weight: 500; }
.tl-disclosure { margin-top: 6px; font-size: 13px; line-height: 1.55; }
.tl-optional { font-weight: 400; opacity: 0.75; }
.tl-help { margin-top: 6px; font-size: 13px; }
.tl-success-body { margin-top: 8px; padding-left: 40px; font-size: 15px; line-height: 1.55; }
.tl-disclosure a { text-underline-offset: 2px; }
.tl-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.tl-success:focus { outline: none; }
.tl-success-title { display: flex; align-items: flex-start; gap: 12px; font-family: var(--disp); font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; }
.tl-check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; }
.tl-form-more { margin-top: 18px; padding-top: 16px; border-top: 1px solid; }
.tl-more-lede { font-size: 14.5px; }
.tl-more-actions { margin-top: 16px; display: flex; align-items: center; gap: 14px; }
.tl-more-done { margin-top: 14px; font-size: 15px; }

.tl-signup-light .tl-error { color: var(--fail); }
.tl-signup-light .tl-disclosure, .tl-signup-light .tl-help { color: var(--muted); }
.tl-signup-light .tl-form-note { color: var(--ink); }
.tl-signup-light .tl-success-body { color: var(--body); }
.tl-signup-light .tl-check { background: var(--done-bg); color: var(--done); }
.tl-signup-light .tl-success { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.tl-signup-light .tl-success-title { color: var(--ink); }
.tl-signup-light .tl-form-more { border-color: var(--line-soft); }
.tl-signup-light .tl-more-lede, .tl-signup-light .tl-more-done { color: var(--body); }
.tl-signup-light .tl-form-more .tl-input { background: var(--cream); }

.tl-signup-dark { color: #e6eeed; }
.tl-signup-dark .tl-error { color: #ffc2b8; }
.tl-signup-dark .tl-disclosure, .tl-signup-dark .tl-help { color: #a9bdba; }
.tl-signup-dark .tl-form-note { color: #fff; }
.tl-signup-dark .tl-success-body { color: #cfdcda; }
.tl-signup-dark .tl-label { color: #e6eeed; }
.tl-signup-dark .tl-disclosure a { color: #e6eeed; }
.tl-signup-dark .tl-check { background: rgba(136,176,172,0.2); color: #fff; }
.tl-signup-dark .tl-success-title { color: #fff; }
.tl-signup-dark .tl-form-more { border-color: rgba(136,176,172,0.22); }
.tl-signup-dark .tl-more-lede, .tl-signup-dark .tl-more-done { color: #cfdcda; }

/* ---------- Product preview ---------- */
.tl-preview {
  margin-top: 52px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 1px 0 #fff inset, 0 40px 80px -40px rgba(44, 36, 24, 0.28), 0 12px 24px -16px rgba(44, 36, 24, 0.12);
  overflow: hidden;
}
.tl-preview-bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--line-soft); background: var(--cream);
}
.tl-preview-title { font-family: var(--disp); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--teal); }
.tl-app { display: grid; grid-template-columns: 250px minmax(0, 1.25fr) minmax(0, 1fr); min-height: 560px; }
.tl-col { min-width: 0; padding: 20px; }
.tl-col + .tl-col { border-left: 1px solid var(--line-soft); }
.tl-col-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }

/* A. Your connected work */
.tl-col-wf { background: #fbf9f5; }
.tl-wfs { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.tl-wf {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tl-wf:hover { border-color: #c4bbad; }
.tl-wf[aria-pressed="true"] { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(54, 99, 95, 0.14); }
.tl-wf-top { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tl-wf-name { font-family: var(--disp); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.tl-wf-parts { display: flex; flex-wrap: wrap; gap: 5px; }
.tl-wf-parts .tl-pill { font-size: 11.5px; padding: 2px 8px 2px 6px; }
.tl-wf-parts .tl-pill::before { width: 7px; height: 7px; }
.tl-wf-recent { font-size: 12.5px; color: var(--muted); }

/* B. Inside the agent's work */
.tl-run-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tl-run-title { margin-top: 6px; font-family: var(--disp); font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.tl-run-meta { margin-top: 2px; font-size: 13px; color: var(--muted); }
.tl-legend { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.tl-legend li { display: inline-flex; align-items: center; gap: 6px; }
.tl-key { width: 10px; height: 10px; }
.tl-key-agent { border-radius: 3px; background: var(--agent); }
.tl-key-system { border-radius: 1px; background: var(--system); }
.tl-key-person { border-radius: 50%; background: var(--person); }

.tl-events { margin-top: 10px; position: relative; }
.tl-events::before { content: ""; position: absolute; left: 21px; top: 14px; bottom: 14px; width: 2px; background: var(--line-soft); }
.tl-ev { position: relative; }
.tl-ev-btn {
  width: 100%; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 7px 10px; border: 1px solid transparent; border-radius: 10px; background: none; text-align: left; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tl-ev-btn:hover { background: var(--cream); }
.tl-ev-btn[aria-pressed="true"] { background: var(--paper); border-color: var(--teal); box-shadow: 0 0 0 3px rgba(54, 99, 95, 0.12); }
.tl-ev-dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.tl-ev-agent .tl-ev-dot { border-radius: 7px; background: var(--agent); color: #fff; }
.tl-ev-system .tl-ev-dot { border-radius: 4px; background: var(--system-bg); color: var(--system); box-shadow: 0 0 0 1px #c5ccd3 inset; }
.tl-ev-fail .tl-ev-dot { border-radius: 4px; background: var(--fail-bg); color: var(--fail); box-shadow: 0 0 0 1px #ebb5ac inset; }
.tl-ev-person .tl-ev-dot { border-radius: 50%; background: var(--person-bg); color: var(--person); box-shadow: 0 0 0 1px #e5c9b6 inset; }
.tl-ev-main { display: flex; flex-direction: column; min-width: 0; }
.tl-ev-label { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.tl-ev-fail .tl-ev-label { color: var(--fail); }
.tl-ev-kind { font-size: 11.5px; color: var(--muted); }
.tl-ev-person .tl-ev-btn { background: #fcf5ef; }
.tl-ev-person .tl-ev-btn[aria-pressed="true"] { background: var(--paper); }

.tl-details { margin-top: 12px; }
.tl-detail { background: var(--cream); border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px 16px; animation: tl-fade 0.25s var(--ease); }
.tl-detail-head { font-family: var(--disp); font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.tl-detail-n { margin-right: 8px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--muted); }
.tl-dl { margin-top: 8px; display: grid; grid-template-columns: minmax(0, 1fr); }
.tl-dl > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.tl-dl > div:first-child { border-top: 0; }
.tl-dl dt { color: var(--muted); }
.tl-dl dd { color: var(--ink); font-weight: 500; }
.tl-dd-fail { color: var(--fail) !important; font-weight: 600 !important; }
@keyframes tl-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* C. Trovis's explanation */
.tl-col-expl { background: var(--teal-ink); color: #dbe6e4; padding: 24px; }
.tl-expl { animation: tl-fade 0.3s var(--ease); }
.tl-expl-title { margin-top: 12px; font-family: var(--disp); font-size: clamp(22px, 2.1vw, 27px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: #fff; }
.tl-expl-text { margin-top: 12px; font-size: 15px; line-height: 1.6; color: #cfdcda; }
.tl-facts { margin-top: 18px; border-top: 1px solid rgba(136,176,172,0.22); }
.tl-facts > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(136,176,172,0.14); font-size: 14px; }
.tl-facts dt { color: #a9bdba; }
.tl-facts dd { color: #fff; font-weight: 600; }
.tl-basis-label { margin-top: 18px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #a9bdba; }
.tl-basis-list { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.tl-chip {
  border: 1px solid rgba(136, 176, 172, 0.45); background: rgba(255,255,255,0.04); color: #e6eeed;
  font-size: 12.5px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tl-chip:hover { background: rgba(136, 176, 172, 0.18); border-color: var(--teal-light); }

.tl-preview-cap { padding: 12px 20px 16px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line-soft); }

/* Sections fade in once JS has marked the page (no-JS shows everything). */
.tl.tl-js .tl-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.tl.tl-js .tl-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Sections ---------- */
.tl-section { padding: 104px 0 0; }
.tl-section-head { max-width: 760px; }
.tl-h2 { font-family: var(--disp); font-weight: 700; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -0.03em; }
.tl-h2-sm { font-size: clamp(28px, 3.4vw, 40px); }
.tl-h3 { font-family: var(--disp); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; line-height: 1.2; }
.tl-intro { margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--body); max-width: 640px; }

/* Problem */
.tl-problems { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.tl-problem-card { padding: 26px 28px 8px 0; }
.tl-problem-card + .tl-problem-card { padding-left: 28px; border-left: 1px solid var(--line); }
.tl-quote { font-family: var(--disp); font-weight: 600; font-size: 20px; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); }
.tl-problem-card p { margin-top: 10px; color: var(--body); font-size: 15.5px; }
.tl-problem-card:nth-child(2) { transition-delay: 0.08s; }
.tl-problem-card:nth-child(3) { transition-delay: 0.16s; }

/* How Trovis fits */
.tl-fit-steps { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tl-fit-steps li { position: relative; padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.tl-fit-steps li:not(:last-child)::after {
  content: ""; position: absolute; right: -14px; top: 38px; width: 12px; height: 2px; background: var(--teal-light);
}
.tl-fit-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--teal); color: #fff; font-family: var(--disp); font-weight: 700; font-size: 14px; }
.tl-fit-steps .tl-h3 { margin-top: 14px; }
.tl-fit-steps p { margin-top: 8px; color: var(--body); font-size: 15.5px; }
.tl-ways { margin-top: 16px; padding: 22px 24px; border-radius: 16px; background: var(--teal-soft); }
.tl-ways-title { font-family: var(--disp); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--teal-ink); }
.tl-ways-list { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.tl-ways-list li { position: relative; padding-left: 18px; font-size: 15px; color: var(--body); }
.tl-ways-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: var(--teal); }
.tl-ways-list strong { color: var(--ink); font-weight: 600; }
.tl-ways-note { margin-top: 14px; font-size: 14px; color: var(--teal-deep); }

/* Three levels of visibility: one product, zooming in then out */
.tl-zoom { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); overflow: hidden; }
.tl-zoom-step { position: relative; padding: 24px; display: flex; flex-direction: column; }
.tl-zoom-step + .tl-zoom-step { border-left: 1px solid var(--line-soft); }
.tl-zoom-step:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1; right: -9px; top: 28px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='%2336635f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 0 0 1px var(--line-soft);
}
.tl-zoom-n { font-family: var(--mono); font-size: 12px; color: var(--teal); }
.tl-zoom-step .tl-h3 { margin-top: 6px; }
.tl-zoom-step > p:not(.tl-zoom-n) { margin-top: 8px; color: var(--body); font-size: 15px; }
.tl-zoom-vis { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.tl-zv-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: var(--cream); font-size: 13px; font-weight: 600; }
.tl-zv-ev { padding: 7px 10px 7px 30px; border-radius: 9px; background: var(--cream); font-size: 13px; font-weight: 600; position: relative; }
.tl-zv-ev::before { content: ""; position: absolute; left: 10px; top: 50%; width: 11px; height: 11px; transform: translateY(-50%); }
.tl-zv-agent::before { border-radius: 3px; background: var(--agent); }
.tl-zv-fail { color: var(--fail); }
.tl-zv-fail::before { border-radius: 2px; background: var(--fail); }
.tl-zv-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border-radius: 9px; background: var(--cream); }
.tl-zv-note { font-size: 13px; color: var(--pending); font-weight: 600; padding: 0 2px; }

/* Pattern across runs */
.tl-pattern-in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px; align-items: start; }
.tl-answers { background: var(--teal-ink); color: #dbe6e4; border-radius: 20px; padding: clamp(22px, 3vw, 32px); }
.tl-ask-q { display: table; margin-bottom: 18px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.08); font-family: var(--disp); font-size: 16px; font-weight: 600; color: #fff; }
.tl-answer-title { margin-top: 10px; font-family: var(--disp); font-size: clamp(21px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: #fff; }
.tl-answer-text { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: #cfdcda; }
.tl-answers .tl-src { color: var(--teal-light); }
.tl-loop { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--paper); border-radius: 14px; padding: 14px; color: var(--ink); }
.tl-loop-arrows { display: inline-flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11px; }
.tl-loop-fwd, .tl-loop-back { padding: 0 4px; text-align: center; }
.tl-loop-fwd { color: var(--teal); border-bottom: 2px solid var(--teal-light); }
.tl-loop-back { color: var(--person); border-top: 2px dashed #d9a888; }
.tl-cites { margin-top: 16px; border-top: 1px solid rgba(136,176,172,0.22); }
.tl-cites li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 9px 0; font-size: 14px; color: #e6eeed; border-bottom: 1px solid rgba(136,176,172,0.14); }

/* Vision */
.tl-stages { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tl-stage { position: relative; padding: 20px 20px 18px; border-radius: 14px; border: 1px dashed #cfc7ba; color: var(--body); }
.tl-stage-now { border: 1px solid var(--teal); background: var(--paper); color: var(--ink); }
.tl-stage:not(:last-child)::after {
  content: "→"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%);
  width: 12px; text-align: center; color: var(--muted); font-size: 14px;
}
.tl-stage-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tl-stage-now .tl-stage-tag { color: var(--teal); }
.tl-stage-title { margin-top: 8px; font-family: var(--disp); font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.tl-stage p { margin-top: 6px; font-size: 15px; }

/* Early-team offer */
.tl-offer-label { margin-top: 32px; font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--teal); }
.tl-offer-list { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tl-offer-list li { padding: 22px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--teal); }
.tl-offer-list p { margin-top: 8px; font-size: 15.5px; color: var(--body); }

/* ---------- Join ---------- */
.tl-join { margin-top: 96px; background: var(--teal-ink); color: #e6eeed; padding: 88px 0; position: relative; overflow: hidden; }
.tl-join::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 70% at 100% 0%, rgba(136,176,172,0.22), transparent 70%),
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 18px 18px;
}
.tl-join-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.tl-join .tl-h2 { color: #fff; }
.tl-join-copy p { margin-top: 18px; font-size: 18px; line-height: 1.6; color: #cfdcda; max-width: 500px; }
.tl-join-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(136,176,172,0.3); border-radius: 18px; padding: 26px; }

.tl-faq { position: relative; margin-top: 56px; padding-top: 32px; border-top: 1px solid rgba(136,176,172,0.22); }
.tl-faq-title { font-family: var(--disp); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.tl-faq-list { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.tl-faq-list dt { font-family: var(--disp); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.tl-faq-list dd { margin-top: 8px; font-size: 15px; line-height: 1.6; color: #cfdcda; }

/* ---------- Footer ---------- */
.tl-footer { background: var(--teal-ink); color: #a9bdba; border-top: 1px solid rgba(136,176,172,0.18); }
.tl-footer-in { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 24px; padding-top: 26px; padding-bottom: 34px; font-size: 13.5px; }
.tl-footer-in p { max-width: 520px; }
.tl-foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; }
.tl-foot-links a { text-decoration: none; color: #cfdcda; padding: 6px 0; }
.tl-foot-links a:hover { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  /* Workflows become a row above; run and explanation sit side by side. */
  .tl-app { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .tl-col-wf { grid-column: 1 / -1; border-bottom: 1px solid var(--line-soft); }
  .tl-col-wf .tl-wfs { flex-direction: row; overflow-x: auto; padding: 4px; margin: 8px -4px -4px; scroll-snap-type: x mandatory; }
  .tl-col-wf .tl-wfs li { flex: 0 0 min(260px, 78vw); scroll-snap-align: start; }
  .tl-col-run { border-left: 0 !important; }
}
@media (max-width: 860px) {
  /* Stacked: workflows → explanation → steps → step detail. */
  .tl-app { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .tl-col + .tl-col { border-left: 0; }
  .tl-col-expl { order: 2; }
  .tl-col-run { order: 3; }
  .tl-fit-steps, .tl-zoom, .tl-problems, .tl-stages, .tl-offer-list, .tl-faq-list { grid-template-columns: minmax(0, 1fr); }
  .tl-faq-list { gap: 20px; }
  .tl-fit-steps li:not(:last-child)::after { right: auto; left: 34px; top: auto; bottom: -14px; width: 2px; height: 12px; }
  .tl-zoom-step + .tl-zoom-step { border-left: 0; border-top: 1px solid var(--line-soft); }
  .tl-zoom-step:not(:last-child)::after { right: auto; left: 24px; top: auto; bottom: -9px; transform: rotate(90deg); }
  .tl-ways-list { grid-template-columns: minmax(0, 1fr); }
  .tl-pattern-in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tl-problem-card, .tl-problem-card + .tl-problem-card { padding: 22px 0 18px; border-left: 0; }
  .tl-problem-card + .tl-problem-card { border-top: 1px solid var(--line); }
  .tl-stages { gap: 22px; }
  .tl-stage:not(:last-child)::after { content: "↓"; right: auto; left: 22px; top: auto; bottom: -21px; transform: none; }
  .tl-join-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 720px) {
  .tl-wrap { padding: 0 16px; }
  .tl-header-in { height: 60px; }
  .tl-lockup { height: 20px; }
  .tl-btn-sm { padding: 0 12px; font-size: 14px; }
  .tl-hero { padding-top: 40px; }
  .tl-form-row .tl-btn { width: 100%; }
  .tl-badge { font-size: 11.5px; letter-spacing: 0.06em; padding: 6px 12px 6px 10px; }
  .tl-success-body { padding-left: 0; }
  .tl-preview { margin-top: 40px; border-radius: 18px; margin-left: -4px; margin-right: -4px; }
  .tl-col { padding: 16px; }
  .tl-col-expl { padding: 20px 16px; }
  .tl-run-head { flex-direction: column; gap: 8px; }
  .tl-ev-btn { gap: 10px; padding: 7px 8px; }
  .tl-ev-btn .tl-time { font-size: 11px; }
  .tl-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tl-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tl-cites li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tl-section { padding-top: 80px; }
  .tl-join { margin-top: 88px; padding: 64px 0; }
  .tl-join-card { padding: 20px; }
}

/* ---------- Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .tl *, .tl *::before, .tl *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .tl.tl-js .tl-reveal { opacity: 1 !important; transform: none !important; }
}