/* /try — the guided demo (lib/views/try.mjs, behaviour in /try.js, rules in /js/try-rules.js). Builds on /styles.css
   (tokens, .btn, .field, .check, .mk-* chrome) and /css/landing.css (.lp tokens, the warm CTA and its outlined twin).
   One frame drawn like the LotRevive app (sidebar, top bar, screen) with the tour on top of it: a guide card beside the next
   thing to do (pinned above the screen on narrow screens) and a pulsing ring round that thing. The sage accent marks where
   you are; the desaturated green (--ok) only what the visitor has done (approved, a buyer kept, sold). A sticky bar keeps
   the price and Buy now in reach. */

.ty {
  --ty-line: #171b1d;          /* hairlines inside the app */
  --ty-line-2: #262b2d;        /* component borders */
  --ty-line-3: #3a4042;        /* hover borders */
  --ty-panel: #070a0c;         /* the app */
  --ty-panel-2: #0c1012;       /* raised boxes */
  --ty-ink: var(--text);
  --ty-ink-2: #c9cdcc;
  --ty-ink-3: #a9aead;
  --ty-ink-4: #868b8a;         /* smallest text: stays above 4.5:1 on the panels */
  --ty-guide: #0f1416;         /* the guide card */
  --ty-guide-line: #3b4342;
}
.ty main { display: block; }
:where(.ty) :where(h1, h2, h3, p, ol, ul, dl, dd, blockquote) { margin: 0; }

/* ── Page head ── */
.ty-head { position: relative; padding: 64px 0 36px; overflow: clip; }
.ty-head::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgb(255 255 255 / .026) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .026) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center -1px;
  -webkit-mask-image: linear-gradient(#000, transparent 92%); mask-image: linear-gradient(#000, transparent 92%); }
.ty-head > .mk-wrap { position: relative; }
.ty-label { display: inline-flex; align-items: center; gap: 11px; color: var(--lp-mono); font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.ty-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgb(182 194 178 / .14); }
.ty-h1 { max-width: 24em; margin-top: 22px; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.06; letter-spacing: .012em; text-wrap: balance; }
.ty-lede { max-width: 640px; margin-top: 16px; color: var(--lp-ink-2); font-size: 18px; line-height: 1.5; }

/* ── The app frame ── */
.ty-app { padding: 0 0 84px; }
.ty-frame { position: relative; display: grid; grid-template-columns: 212px minmax(0, 1fr); border: 1px solid var(--ty-line-2); border-radius: 8px; background: var(--ty-panel);
  box-shadow: 0 40px 90px -50px rgb(0 0 0 / .9); }
.ty-progress { position: absolute; left: 0; right: 0; top: -1px; z-index: 5; height: 2px; overflow: hidden; border-radius: 8px 8px 0 0; pointer-events: none; }
.ty-progress i { display: block; width: 0; height: 100%; background: var(--accent); transition: width 520ms var(--ease-out); }

.ty-side { display: flex; flex-direction: column; min-width: 0; padding: 18px 10px 16px; border-right: 1px solid var(--ty-line); border-radius: 8px 0 0 8px; background: #05080a; }
.ty-brand { padding: 4px 10px 20px; }
.ty-brand .logo { display: block; width: auto; height: 17px; }
.ty-nav { display: grid; gap: 2px; }
.ty-nav button { display: flex; align-items: center; gap: 11px; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 4px; background: none; color: #c4c8c7;
  font: inherit; font-size: 13.5px; text-align: left; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.ty-nav button:disabled { color: #8f9493; cursor: default; }
.ty-nav button:not(:disabled):hover { background: #0f1314; color: #f4f5f3; }
.ty-nav button[aria-current="page"] { background: #141819; color: #f4f5f3; box-shadow: inset 1.5px 0 0 var(--accent); }
.ty-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ty-nav .icon { flex: none; width: 16px; height: 16px; stroke-width: 1.6; }
.ty-count { min-width: 18px; height: 18px; margin-left: auto; padding: 0 5px; border-radius: 9px; background: #1c2224; color: #e6e8e7; font: 500 10px/18px var(--mono); text-align: center; }
.ty-side-note { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding: 16px 10px 0; color: var(--ty-ink-4); font-size: 11.5px; line-height: 1.4; }
.ty-side-note .icon { flex: none; width: 13px; height: 13px; margin-top: 1px; }

.ty-main { display: flex; flex-direction: column; min-width: 0; }
.ty-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 0 16px 0 26px; border-bottom: 1px solid var(--ty-line); }
.ty-top-t { color: var(--ty-ink); font-size: 19px; line-height: 1.2; }
.ty-top-a { display: flex; align-items: center; gap: 8px; }
.ty-mini { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border: 0; border-radius: 3px; background: none; color: var(--ty-ink-3);
  font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.ty-mini:hover { background: #0f1314; color: var(--ty-ink); }
.ty-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ty-mini .icon { width: 13px; height: 13px; }
.ty .ty-top-buy { --h: 34px; width: auto; gap: 9px; padding: 1px 15px 0; font-size: 11px; letter-spacing: .12em; }
.ty-top-buy .icon { width: 12px; height: 12px; }
.ty-view { flex: 1; min-height: 560px; padding: 24px 26px 30px; }

/* ── The guide card, the ring round its target, and the dimmed app under the first and last cards ── */
.ty-guide { position: absolute; z-index: 30; width: 318px; padding: 16px 18px 17px; border: 1px solid var(--ty-guide-line); border-radius: 8px; background: var(--ty-guide); color: var(--ty-ink-2);
  box-shadow: 0 22px 60px -14px rgb(0 0 0 / .8), 0 0 0 4px rgb(182 194 178 / .05); }
.ty-guide:is([data-kind="intro"], [data-kind="finale"]) { width: 470px; padding: 26px 28px 24px; }
.ty-guide-arrow { position: absolute; display: none; width: 12px; height: 12px; border: 1px solid var(--ty-guide-line); background: var(--ty-guide); rotate: 45deg; }
.ty-guide[data-side="right"] .ty-guide-arrow { display: block; left: -7px; top: calc(var(--ty-ay, 24px) - 6px); border-top: 0; border-right: 0; }
.ty-guide[data-side="left"] .ty-guide-arrow { display: block; right: -7px; top: calc(var(--ty-ay, 24px) - 6px); border-bottom: 0; border-left: 0; }
.ty-guide[data-side="below"] .ty-guide-arrow { display: block; top: -7px; left: calc(var(--ty-ax, 24px) - 6px); border-right: 0; border-bottom: 0; }
.ty-guide[data-side="above"] .ty-guide-arrow { display: block; bottom: -7px; left: calc(var(--ty-ax, 24px) - 6px); border-top: 0; border-left: 0; }
.ty-guide-n { color: var(--accent); font: 500 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ty-guide-t { margin-top: 8px; color: var(--ty-ink); font-size: 17px; font-weight: 400; line-height: 1.3; letter-spacing: 0; outline: none; }
.ty-guide:is([data-kind="intro"], [data-kind="finale"]) .ty-guide-t { margin-top: 12px; font-size: 25px; line-height: 1.18; text-wrap: balance; }
.ty-guide-b { margin-top: 8px; font-size: 13.5px; line-height: 1.55; }
.ty-guide:is([data-kind="intro"], [data-kind="finale"]) .ty-guide-b { margin-top: 12px; font-size: 15px; }
.ty-guide-do { display: flex; align-items: flex-start; gap: 9px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #252c2c; color: var(--ty-ink); font-size: 13px; font-weight: 500; line-height: 1.4; }
.ty-guide-do .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--accent); }
.ty-guide-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; border: 1px solid #262d2d; border-radius: 6px; background: rgb(255 255 255 / .015); }
.ty-guide-sum:empty { display: none; }
.ty-guide-sum > div { padding: 11px 13px; }
.ty-guide-sum > div + div { border-left: 1px solid #222828; }
.ty-guide-sum dt { color: var(--ty-ink-4); font: 400 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ty-guide-sum dd { margin-top: 5px; color: var(--ty-ink); font-size: 14.5px; line-height: 1.3; }
.ty-guide-a { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ty-guide[data-kind="do"] .ty-guide-a { display: none; }
.ty-guide[data-kind="next"] .ty-guide-a { margin-top: 14px; }
.ty-guide [data-ty-show] { display: none; }
.ty-guide[data-kind="intro"] [data-ty-show~="intro"], .ty-guide[data-kind="next"] [data-ty-show~="next"], .ty-guide[data-kind="finale"] [data-ty-show~="finale"] { display: inline-flex; }
.ty-guide[data-kind] .ty-guide-price { display: none; }
.ty-guide:is([data-kind="intro"], [data-kind="finale"]) .ty-guide-price { display: block; margin-top: 12px; color: var(--ty-ink-3); font-size: 13px; }
.ty-guide-price strong { color: var(--ty-ink); font-weight: 500; }
.ty .ty-guide-buy { --h: 44px; width: auto; padding: 1px 20px 0; }
.ty-guide .ty-btn-next { height: 44px; padding: 0 20px; }
.ty-guide[data-kind="next"] .ty-btn-next { height: 38px; padding: 0 16px; }
.ty-guide-more { align-items: center; gap: 10px; margin-top: 14px; color: var(--ty-ink-4); font-size: 12.5px; }
.ty-guide[data-kind="finale"] .ty-guide-more { display: flex; }
.ty-guide-more button { padding: 4px 0; border: 0; background: none; color: var(--ty-ink-3); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: #3a4042; text-underline-offset: 3px; }
.ty-guide-more button:hover { color: var(--ty-ink); }
.ty-guide-more button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .ty-guide { animation: ty-in 320ms var(--ease-out); }
}
@keyframes ty-in { from { opacity: 0; translate: 0 4px; } }

.ty-ring { position: absolute; z-index: 25; border: 2px solid var(--accent); border-radius: 8px; pointer-events: none; box-shadow: 0 0 0 4px rgb(182 194 178 / .12); }
@media (prefers-reduced-motion: no-preference) {
  .ty-guide[data-side]:not([data-side="flow"], [data-side="center"]) { transition: left 300ms var(--ease-out), top 300ms var(--ease-out); }
  .ty-ring { animation: ty-pulse 1.9s var(--ease-out) infinite; transition: left 300ms var(--ease-out), top 300ms var(--ease-out), width 300ms var(--ease-out), height 300ms var(--ease-out); }
}
@keyframes ty-pulse { 0% { box-shadow: 0 0 0 0 rgb(182 194 178 / .42); } 70%, 100% { box-shadow: 0 0 0 14px rgb(182 194 178 / 0); } }
.ty-scrim { position: absolute; inset: 0; z-index: 20; border-radius: 8px; background: rgb(3 5 6 / .74); opacity: 0; pointer-events: none; transition: opacity 320ms var(--ease-out); }
.ty-frame:is([data-kind="intro"], [data-kind="finale"]) .ty-scrim { opacity: 1; pointer-events: auto; }

/* ── Screens ── */
.ty-legend { margin-top: 14px; color: var(--ty-ink-4); font-size: 12px; line-height: 1.5; }
.ty-badge { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 1px solid var(--ty-line-2); border-radius: 2px; color: var(--ty-ink-3);
  font-size: 11.5px; line-height: 1; white-space: nowrap; }
.ty-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ty-badge[data-tone="ok"] { border-color: rgb(var(--ok-rgb) / .4); color: var(--ok); }
.ty-badge[data-tone="warn"] { border-color: rgb(var(--warn-rgb) / .4); color: var(--warn); }
.ty-badge[data-tone="strong"] { border-color: #4a5052; color: var(--ty-ink); }
.ty-badge[data-tone="off"] { color: var(--ty-ink-4); }
.ty-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ty-line); font-size: 13px; line-height: 1.4; }
.ty-kv span { flex: none; color: var(--ty-ink-3); }
.ty-kv b { min-width: 0; color: var(--ty-ink); font-weight: 400; text-align: right; }

/* Empty states: the product's own, honest and blank until the visitor adds something. */
.ty-empty { display: grid; justify-items: center; max-width: 440px; margin: 46px auto 0; text-align: center; }
.ty-empty-i { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--ty-line-2); border-radius: 12px; background: var(--ty-panel-2); color: var(--ty-ink-3); }
.ty-empty-i .icon { width: 22px; height: 22px; stroke-width: 1.5; }
.ty-empty-t { margin-top: 16px; color: var(--ty-ink); font-size: 16px; }
.ty-empty-s { margin-top: 6px; color: var(--ty-ink-3); font-size: 13.5px; line-height: 1.5; }
.ty-empty .ty-btn { margin-top: 18px; }

/* Tables: one header row and the visitor's row. */
.ty-table { border: 1px solid var(--ty-line-2); border-radius: 6px; background: #080b0d; }
.ty-tr { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); align-items: center; gap: 14px; min-height: 52px; padding: 0 16px; }
.ty-tr + .ty-tr { border-top: 1px solid var(--ty-line); }
.ty-tr > span { min-width: 0; overflow: hidden; color: var(--ty-ink-2); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.ty-tr > span:first-child { color: var(--ty-ink); }
.ty-th { min-height: 38px; }
.ty-th > span { color: var(--ty-ink-4); font: 400 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ty-th > span:first-child { color: var(--ty-ink-4); }
.ty-tr > span:has(.ty-badge) { overflow: visible; }

/* Revenue Radar */
.ty-radar { max-width: 560px; padding: 16px 18px 6px; border: 1px solid var(--ty-line-2); border-radius: 6px; background: #080b0d; }
.ty-radar-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ty-line); }
.ty-radar-h b { min-width: 0; overflow: hidden; color: var(--ty-ink); font-size: 15.5px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.ty-radar .ty-kv:last-child { border-bottom: 0; }

/* Matches: the row, and the match opened below it. */
.ty-matches { max-width: 660px; }
.ty-match { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto 16px; align-items: center; gap: 16px; width: 100%; padding: 14px 16px; border: 1px solid var(--ty-line-2);
  border-radius: 6px; background: #080b0d; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.ty-match:hover { border-color: var(--ty-line-3); background: #0b0f11; }
.ty-match:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ty-match[aria-expanded="true"] { border-color: #3a4042; border-radius: 6px 6px 0 0; background: #0b0f11; }
.ty-match-who { display: grid; gap: 3px; min-width: 0; }
.ty-match-who b { overflow: hidden; color: var(--ty-ink); font-size: 14.5px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.ty-match-who small, .ty-match-unit { overflow: hidden; color: var(--ty-ink-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.ty-match-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ty-match > .icon { width: 16px; height: 16px; color: var(--ty-ink-3); transition: rotate var(--dur-2) var(--ease-out); }
.ty-match[aria-expanded="true"] > .icon { rotate: 180deg; }
.ty-detail { border: 1px solid #3a4042; border-top: 0; border-radius: 0 0 6px 6px; background: #080b0d; }
.ty-part { padding: 16px 18px 18px; }
.ty-part + .ty-part { border-top: 1px solid var(--ty-line); }
.ty-part-t { color: var(--ty-ink-4); font: 500 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ty-part-s { margin-top: 8px; max-width: 520px; color: var(--ty-ink-3); font-size: 13.5px; line-height: 1.5; }
.ty-part .ty-btn { margin-top: 12px; }
.ty-factors { margin-top: 8px; padding: 0; list-style: none; }
.ty-factor { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ty-line); }
.ty-factor-pts { color: var(--ty-ink-4); font: 500 12px/20px var(--mono); font-variant-numeric: tabular-nums; }
.ty-factor b { display: block; color: var(--ty-ink-3); font-size: 13px; font-weight: 500; line-height: 20px; }
.ty-factor small { display: block; color: var(--ty-ink-4); font-size: 12px; line-height: 1.45; }
.ty-factor.is-on .ty-factor-pts { color: var(--ok); }
.ty-factor.is-on b { color: var(--ty-ink); }
.ty-factor.is-on small { color: var(--ty-ink-3); }
.ty-seq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; padding: 0; list-style: none; }
.ty-seq li { padding: 10px 12px; border: 1px solid var(--ty-line-2); border-radius: 4px; }
.ty-seq li.is-on { border-color: #4a5052; background: var(--ty-panel-2); }
.ty-seq li.is-done { border-color: rgb(var(--ok-rgb) / .35); }
.ty-seq b { display: block; color: var(--ty-ink); font-size: 13px; font-weight: 500; }
.ty-seq small { display: block; margin-top: 3px; color: var(--ty-ink-4); font-size: 11.5px; line-height: 1.4; }
.ty-seq li.is-done small { color: var(--ok); }
.ty-seq-state { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; color: var(--ty-ink-3); font-size: 12.5px; line-height: 1.5; }
.ty-seq-state .ty-badge { margin-top: -2px; }
.ty-mail-h { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--ty-line); font-size: 13px; }
.ty-mail-h span { flex: none; color: var(--ty-ink-4); font: 400 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ty-mail-h b { min-width: 0; color: var(--ty-ink); font-weight: 400; }
.ty-part textarea#tyDraft { display: block; min-height: 196px; margin-top: 10px; font-size: 13.5px; field-sizing: content; }
.ty-approve { margin-top: 12px; }
.ty-consent { margin: 0; font-size: 12.5px; }
.ty-approve .ty-btn { margin-top: 12px; }
.ty-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; color: var(--ty-ink-4); font-size: 12px; line-height: 1.45; }
.ty-note .icon { flex: none; width: 13px; height: 13px; margin-top: 1px; }
.ty-quote { margin-top: 10px; padding: 10px 14px; border-left: 2px solid #3a4042; color: var(--ty-ink-2); font-size: 14px; line-height: 1.5; }
.ty-result { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 11px 13px; border: 1px solid var(--ty-line-2); border-radius: 4px; color: var(--ty-ink-2); font-size: 13px; line-height: 1.5; }
.ty-result .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--ty-ink-3); }
.ty-result b { color: var(--ty-ink); font-weight: 500; }
.ty-result[data-tone="ok"] { border-color: rgb(var(--ok-rgb) / .4); background: rgb(var(--ok-rgb) / .05); }
.ty-result[data-tone="ok"] .icon { color: var(--ok); }
.ty-result[data-tone="off"] { border-color: rgb(var(--warn-rgb) / .35); background: rgb(var(--warn-rgb) / .04); }
.ty-result[data-tone="off"] .icon { color: var(--warn); }
.ty-flabel { display: block; margin-top: 14px; margin-bottom: 7px; color: var(--ty-ink-3); font-size: 12.5px; }

/* Overview tiles */
.ty-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ty-kpi { display: grid; align-content: start; min-height: 104px; padding: 14px 16px; border: 1px solid var(--ty-line-2); border-radius: 6px; background: #0a0d0f; }
.ty-kpi span { color: var(--ty-ink-3); font-size: 12.5px; }
.ty-kpi b { margin-top: 12px; color: var(--ty-ink); font-size: 30px; font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ty-kpi small { margin-top: 7px; color: var(--ty-ink-4); font-size: 12px; }
.ty-kpi[data-ty-part="recovered"] { border-color: rgb(var(--ok-rgb) / .35); }

/* ── Forms ── */
.ty-form { max-width: 520px; padding: 20px 20px 18px; border: 1px solid var(--ty-line-2); border-radius: 6px; background: #080b0d; }
.ty-form-in { max-width: none; margin-top: 12px; padding: 0; border: 0; background: none; }
.ty-form-t { color: var(--ty-ink); font-size: 16px; }
.ty-form-s { margin-top: 4px; color: var(--ty-ink-3); font-size: 13px; }
.ty-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin-top: 16px; }
.ty-grid > :first-child, .ty-grid > :last-child:nth-child(even) { grid-column: 1 / -1; }
.ty-grid-2 > :first-child, .ty-grid-2 > :last-child:nth-child(even) { grid-column: auto; }
.ty-form-in .ty-grid { margin-top: 0; }
.ty-form > .ty-field { margin-top: 16px; }
.ty-field > label { color: var(--ty-ink-3); font-size: 12.5px; }
.ty-field .field-hint { color: var(--ty-ink-4); font-size: 12px; }
.ty :is(input:is([type="text"], [type="number"]), select) { height: 40px; font-size: 14px; }
.ty textarea { min-height: 0; font-size: 14px; }
/* datetime-local isn't in the global input rule. */
.ty input[type="datetime-local"] { width: 100%; height: 40px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--r-2); outline: none; background: var(--field); color: var(--text);
  font: inherit; font-size: 14px; color-scheme: dark; transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.ty-form-err { margin-top: 12px; color: var(--danger); font-size: 12.5px; }
.ty-form-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ty-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ty-chip { height: 30px; padding: 0 11px; border: 1px dashed #3a4042; border-radius: 2px; background: none; color: var(--ty-ink-3); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.ty-chip:hover { border-color: #5a6163; border-style: solid; color: var(--ty-ink); }
.ty-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Days slider: the filled part of the track follows the value (--p, set by try.js). */
.ty-days { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
.ty-days input[type="range"] { --p: 0%; width: 100%; height: 26px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ty-days input[type="range"]:focus { box-shadow: none; }
.ty-days input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--p), #262c2e var(--p)); }
.ty-days input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; border: 0; border-radius: 50%; background: #eef0ee; box-shadow: 0 0 0 4px rgb(182 194 178 / .16);
  -webkit-appearance: none; appearance: none; }
.ty-days input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: #262c2e; }
.ty-days input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.ty-days input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #eef0ee; box-shadow: 0 0 0 4px rgb(182 194 178 / .16); }
.ty-days input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgb(182 194 178 / .5); }
.ty-days input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgb(182 194 178 / .5); }
.ty-days output { min-width: 66px; color: var(--ty-ink); font: 500 13px/1 var(--mono); text-align: right; font-variant-numeric: tabular-nums; }

/* ── Buttons ── */
.ty-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 40px; padding: 0 16px; border: 1px solid var(--ty-line-2); border-radius: 2px; background: none; color: var(--ty-ink-2);
  font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.ty-btn:hover:not(:disabled) { border-color: var(--ty-line-3); background: rgb(255 255 255 / .025); color: var(--ty-ink); }
.ty-btn:disabled { opacity: .4; cursor: not-allowed; }
.ty-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ty-btn .icon { width: 14px; height: 14px; }
.ty-btn-go { border-color: rgb(var(--ok-rgb) / .45); color: var(--ok); }
.ty-btn-go:hover:not(:disabled) { border-color: var(--ok); background: rgb(var(--ok-rgb) / .06); color: #cfe9d6; }
.ty-btn-next { border-color: transparent; background: var(--lp-cta); color: var(--primary-ink); }
.ty-btn-next:hover:not(:disabled) { border-color: transparent; background: var(--lp-cta-hover); color: var(--primary-ink); }

.ty-noscript { padding: 0 0 72px; color: var(--lp-ink-2); font-size: 16px; line-height: 1.6; }
.ty-noscript a { color: var(--ty-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── Sticky buy bar: in the flow after the demo, so it never covers the footer; it rides the bottom edge until then ── */
.ty-bar { position: sticky; bottom: 0; z-index: 40; border-top: 1px solid #23282a; background: rgb(5 8 10 / .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: opacity var(--dur-2) var(--ease-out), visibility var(--dur-2); }
.ty-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding-top: 11px; padding-bottom: 11px; padding-left: calc(var(--mk-pad-l) + 7px); }
.ty-bar-price { display: flex; align-items: baseline; gap: 14px; min-width: 0; color: var(--ty-ink-3); font-size: 13.5px; line-height: 1.4; }
.ty-bar-price b { color: var(--ty-ink); font-size: 14px; font-weight: 500; white-space: nowrap; }
.ty-bar-price strong { color: var(--ty-ink); font-weight: 500; white-space: nowrap; }
.ty-bar-ctas { display: flex; flex: none; gap: 10px; }
.ty-bar .btn { --h: 44px; width: auto; padding: 1px 22px 0; }
.ty-bar .btn .icon { width: 13px; height: 13px; }
/* Keyboard focus scrolled into view (Tab to a button, a field) lands above the bar, never under it. */
html:has(> body.ty-body) { scroll-padding-bottom: 88px; }
/* Phones and tablets: while a field has focus (the keyboard is up), the bar steps aside. */
@media (hover: none) and (max-width: 1023px) {
  .ty-body:has(.ty-app :is(input:not([type="checkbox"], [type="range"]), select, textarea):focus) .ty-bar { visibility: hidden; opacity: 0; }
}

/* ── Responsive ── */
@media (max-width: 1199px) {
  .ty-bar-price b { display: none; }
  .ty-frame { grid-template-columns: 188px minmax(0, 1fr); }
  .ty-nav button { gap: 9px; font-size: 13px; }
}
/* Narrow: the sidebar becomes a strip of tabs, the guide is pinned above the screen (it follows as you scroll), no scrim. */
@media (max-width: 899px) {
  .ty-frame { grid-template-columns: minmax(0, 1fr); }
  .ty-side { flex-direction: row; align-items: center; padding: 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ty-line); border-radius: 8px 8px 0 0; scrollbar-width: none; }
  .ty-side::-webkit-scrollbar { display: none; }
  .ty-brand, .ty-side-note { display: none; }
  .ty-nav { display: flex; gap: 4px; }
  .ty-nav button { width: auto; height: 36px; padding: 0 11px; }
  .ty-nav button[aria-current="page"] { box-shadow: inset 0 -1.5px 0 var(--accent); }
  .ty-top { padding: 0 10px 0 16px; }
  .ty-guide { position: sticky; top: 8px; width: auto; margin: 12px 12px 0; padding: 14px 16px 15px; }
  .ty-guide:is([data-kind="intro"], [data-kind="finale"]) { position: relative; top: auto; width: auto; padding: 20px 18px 18px; }
  .ty-guide:is([data-kind="intro"], [data-kind="finale"]) .ty-guide-t { font-size: 22px; }
  .ty-scrim { display: none; }
  .ty-view { min-height: 0; padding: 18px 14px 24px; }
  .ty-tr { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 14px; }
  .ty-th { display: none; }
  .ty-tr > span { display: flex; justify-content: space-between; gap: 12px; white-space: normal; }
  .ty-tr > span::before { content: attr(data-label); flex: none; color: var(--ty-ink-4); font: 400 9.5px/20px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  .ty-tr > span:first-child { font-size: 15px; }
  .ty-tr > span:first-child::before { display: none; }
  .ty-match { grid-template-columns: minmax(0, 1fr) 16px; gap: 8px 12px; }
  .ty-match-unit { grid-column: 1; }
  .ty-match-tags { grid-column: 1; justify-content: flex-start; }
  .ty-match > .icon { grid-column: 2; grid-row: 1; }
  .ty-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .ty-head { padding: 44px 0 26px; }
  .ty-h1 { font-size: 31px; line-height: 1.1; letter-spacing: .008em; }
  .ty-lede { font-size: 16.5px; }
  .ty-app { padding-bottom: 60px; }
  .ty-app > .mk-wrap { padding-left: 12px; padding-right: 12px; }
  .ty-top-t { font-size: 17px; }
  .ty-mini span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ty .ty-top-buy { padding: 1px 12px 0; }
  .ty-guide { margin: 10px 8px 0; }
  .ty-guide-sum { grid-template-columns: minmax(0, 1fr); }
  .ty-guide-sum > div + div { border-left: 0; border-top: 1px solid #222828; }
  .ty .ty-guide-buy, .ty-guide .ty-btn-next { flex: 1 1 100%; }
  .ty-grid, .ty-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .ty-grid > *, .ty-grid-2 > * { grid-column: 1 / -1; }
  .ty-form { padding: 16px 14px 16px; }
  .ty-part { padding: 14px 14px 16px; }
  .ty-seq { grid-template-columns: minmax(0, 1fr); }
  .ty-seq li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .ty-seq small { margin-top: 0; text-align: right; }
  .ty-part textarea#tyDraft { min-height: 300px; }
  .ty-kpi { min-height: 92px; padding: 12px 13px; }
  .ty-kpi b { font-size: 25px; }
  .ty-bar-in { gap: 12px; min-height: 64px; padding-left: 16px; padding-right: 16px; }
  .ty-bar-per { display: none; }
  .ty-bar-ctas { gap: 8px; }
  .ty-bar .btn { --h: 42px; padding: 1px 13px 0; letter-spacing: .1em; }
  .ty-bar .btn .icon { display: none; }
}