/* Tracy marketing site: one stylesheet for every page.
   Paths are root-relative (/assets/…), so a page works both at the site root
   and one folder deep (/pricing/), locally and on tracy.ai. */

:root {
  color-scheme: light dark;
  --on-primary: #ffffff;
  --bg: #faf7f4;
  --panel: rgba(255, 255, 255, 0.72);
  --panel-solid: #fffdfb;
  --panel-2: rgba(255, 255, 255, 0.5);
  --text: rgba(0, 0, 0, 0.9);
  --muted: rgba(0, 0, 0, 0.6);
  --primary: #a3462a;
  --primary-hover: #8a3a22;
  --primary-fill: #bb593c;
  --primary-soft: rgba(187, 89, 60, 0.12);
  --border: rgba(0, 0, 0, 0.1);
  --border-strong: rgba(0, 0, 0, 0.2);
  --shadow: 0 24px 60px -28px rgba(38, 32, 27, 0.35);
  --chrome: rgba(238, 231, 224, 0.9);
  --veil: rgba(250, 247, 244, 0.26);

  /* Glass: one material for every card-like block on the site. Measured from the home
     cards, which stay the reference. */
  --glass-background: radial-gradient(120% 150% at 12% 0%, rgba(187, 89, 60, 0.10), rgba(187, 89, 60, 0) 60%), linear-gradient(180deg, rgba(163, 70, 42, 0.08) 0%, rgba(163, 70, 42, 0.02) 100%);
  --glass-filter: blur(18px) saturate(1.2);
  --glass-border: 1px solid rgba(255, 255, 255, 0.60);
  --glass-shadow: 0 18px 40px -30px rgba(72, 45, 30, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --glass-radius: 14px;
  --glass-fallback: #fbf4ec;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Dark is its own artwork, not the light one dimmed: bg-dark.jpg below. */
    --on-primary: #ffffff;
    --bg: #14100e;
    --panel: rgba(28, 22, 19, 0.84);
    --panel-solid: #1d1714;
    --panel-2: rgba(28, 22, 19, 0.62);
    --text: rgba(255, 255, 255, 0.9);
    --muted: rgba(255, 255, 255, 0.6);
    --primary: #cf755a;
    --primary-fill: #bb593c;
    --primary-hover: #da8f78;
    --primary-soft: rgba(207, 117, 90, 0.18);
    --border: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.2);
    --shadow: 0 26px 70px -30px rgba(0, 0, 0, 0.85);
    --chrome: rgba(36, 29, 25, 0.94);
    --veil: rgba(18, 14, 12, 0.24);

    --glass-background: rgba(20, 16, 14, 0.45);
    --glass-filter: blur(14px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 18px 40px -34px rgba(72, 45, 30, 0.32);
    --glass-fallback: #191412;
  }
}
:root[data-theme="dark"] {
  /* Keep in step with the media-query block above. */
  --on-primary: #ffffff;
  --bg: #14100e;
  --panel: rgba(28, 22, 19, 0.84);
  --panel-solid: #1d1714;
  --panel-2: rgba(28, 22, 19, 0.62);
  --text: rgba(255, 255, 255, 0.9);
  --muted: rgba(255, 255, 255, 0.6);
  --primary: #cf755a;
  --primary-fill: #bb593c;
  --primary-hover: #da8f78;
  --primary-soft: rgba(207, 117, 90, 0.18);
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);
  --shadow: 0 26px 70px -30px rgba(0, 0, 0, 0.85);
  --chrome: rgba(36, 29, 25, 0.94);
  --veil: rgba(18, 14, 12, 0.24);

    --glass-background: rgba(20, 16, 14, 0.45);
    --glass-filter: blur(14px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 18px 40px -34px rgba(72, 45, 30, 0.32);
    --glass-fallback: #191412;

}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* The background image runs behind the WHOLE page: a fixed layer, not a body
   background, so iOS Safari (which ignores background-attachment: fixed) keeps it still.
   The veil above it is what keeps body text at its contrast ratio. */
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background-image: url("/assets/bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--veil); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before { background-image: url("/assets/bg-dark.jpg"); }
}
:root[data-theme="dark"] body::before { background-image: url("/assets/bg-dark.jpg"); }

h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; line-height: 1.15; margin: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 820px; }
.panel {
  background: var(--glass-background);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--glass-radius);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel { background-color: var(--glass-fallback); background-image: none; }
}

/* ── Nav ─────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; gap: 26px; padding: 13px 16px; max-width: 1120px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 26px; width: auto; display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand img { filter: invert(1) hue-rotate(180deg) brightness(1.08); } }
:root[data-theme="dark"] .brand img { filter: invert(1) hue-rotate(180deg) brightness(1.08); }
.nav-links { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav-links a { color: var(--muted); font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: var(--text); }
.nav-links a.here { color: var(--text); }
/* `.nav-links a` outranks `.btn-primary`, so the button needs its colour said here. */
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: var(--on-primary); }
@media (max-width: 1080px) { .nav-links a:not(.btn) { display: none; } }

/* Theme toggle. The page follows the system setting until someone presses this,
   and the choice is then remembered for the whole site. */
.themetoggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; flex-shrink: 0;
  border-radius: 10px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
}
.themetoggle:hover { color: var(--text); border-color: var(--border-strong); }
.themetoggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.themetoggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.themetoggle .i-sun { display: none; }
:root[data-theme="dark"] .themetoggle .i-sun { display: block; }
:root[data-theme="dark"] .themetoggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themetoggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .themetoggle .i-moon { display: none; }
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 8px;
  font-size: 15px; font-weight: 600; line-height: 1;
  border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn-ghost { border-color: var(--border-strong); color: var(--text); background: var(--panel-2); }
.btn-ghost:hover { background: var(--panel-solid); color: var(--text); }
.btn-sm { padding: 8px 15px; font-size: 14px; }

/* ── Shared bits ─────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 15px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary);
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em;
  margin-bottom: 20px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.section-head { text-align: center; max-width: 660px; margin: 0 auto 36px; }
.section-head h2 { font-size: clamp(28px, 4.2vw, 43px); letter-spacing: -0.012em; }
.section-head p { color: var(--muted); margin: 14px 0 0; }
.lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--muted); }

/* ── Hero ────────────────────────────────────────── */
.hero { padding: 90px 0 46px; text-align: center; }
.hero h1 { font-size: clamp(40px, 6.4vw, 68px); letter-spacing: -0.018em; max-width: 820px; margin: 0 auto; }
.hero p.lead { max-width: 620px; margin: 22px auto 0; }
.hero-ctas { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.page-hero { padding: 74px 0 34px; text-align: center; }
.page-hero h1 { font-size: clamp(34px, 5.2vw, 56px); letter-spacing: -0.016em; max-width: 820px; margin: 0 auto; }
.page-hero p.lead { max-width: 640px; margin: 20px auto 0; }

.tabflow { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 44px; flex-wrap: wrap; }
.tabflow .pill {
  padding: 8px 17px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.tabflow .pill.on { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.tabflow .sep { color: var(--border-strong); font-size: 14px; }
.tabflow-cap { margin-top: 13px; font-size: 14.5px; color: var(--muted); }

/* ── Stat row ────────────────────────────────────── */
.stats { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.stat { padding: 18px 26px; text-align: center; min-width: 168px; }
.stat b { display: block; font-family: "Fraunces", Georgia, serif; font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
.stat span { font-size: 14px; color: var(--muted); }

/* ── Ask strip (what you say → what happens) ─────── */
.asks { padding: 62px 0 10px; }
.asks-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .asks-grid { grid-template-columns: 1fr; } }
.ask { padding: 22px 24px; }
.ask .said {
  display: inline-block; padding: 9px 15px; border-radius: 14px 14px 14px 4px;
  background: var(--primary-soft); color: var(--text);
  font-size: 15.5px; font-weight: 500;
}
.ask .then { display: flex; gap: 9px; margin-top: 14px; color: var(--muted); font-size: 14.5px; }
.ask .then svg { flex-shrink: 0; width: 17px; height: 17px; stroke: var(--primary); margin-top: 3px; }

/* ── Design marquee ──────────────────────────────── */
.marquee {
  overflow: hidden; padding: 50px 0 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mrow { display: flex; gap: 18px; width: max-content; animation: mscroll 72s linear infinite; }
.mrow + .mrow { margin-top: 18px; animation-direction: reverse; animation-duration: 88s; }
@keyframes mscroll { to { transform: translateX(-50%); } }
.marquee:hover .mrow { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mrow { animation: none; } .marquee { overflow-x: auto; } }
.shot {
  width: 348px; flex-shrink: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border); background: var(--panel-solid);
  box-shadow: 0 14px 34px -22px rgba(38, 32, 27, 0.5);
}
.shot img { display: block; width: 100%; height: 230px; object-fit: cover; object-position: top; }
.shot .cap {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 14px; font-size: 13px; font-weight: 600; border-top: 1px solid var(--border);
}
.shot .cap span:last-child { color: var(--muted); font-weight: 500; font-size: 12px; }
@media (max-width: 640px) { .shot { width: 250px; } .shot img { height: 165px; } }

/* ── Browser frame (live embeds) ─────────────────── */
.browser { border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); background: var(--panel-solid); }
.browser-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--chrome); border-bottom: 1px solid var(--border); }
.dots { display: flex; gap: 6px; }
.dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); }
.dots span:first-child { background: #e0654f; }
.urlbox {
  flex: 1; max-width: 470px; margin: 0 auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 14px; font-size: 13px; color: var(--muted);
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.browser iframe { display: block; width: 100%; height: 690px; border: 0; background: var(--panel-solid); }
.browser.tall iframe { height: 840px; }
@media (max-width: 640px) { .browser iframe, .browser.tall iframe { height: 520px; } }
.embed-foot { text-align: center; margin-top: 18px; font-size: 15px; }
.embed-foot .muted { color: var(--muted); }

/* ── Cards, grids ────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }
.section { padding: 76px 0 20px; }
.section-tight { padding: 56px 0 20px; }

.path { padding: 32px 30px; }
.path .tag { display: inline-block; padding: 5px 13px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 13px; font-weight: 600; }
.path h3 { font-size: 23px; margin: 14px 0 8px; }
.path > p { color: var(--muted); font-size: 15.5px; margin: 0 0 18px; }
/* Added with the 2026-09-28 freeze, which puts .path-shot under two path cards on the
   home page. Taken verbatim from that freeze's assets/site.css. */
.path-shot { margin-top: 22px; }
.path-shot img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); display: block; }
.ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.ticks li { display: flex; gap: 10px; font-size: 15.5px; }
.ticks li svg { flex-shrink: 0; width: 18px; height: 18px; stroke: var(--primary); margin-top: 4px; }
.thumbstrip { display: flex; gap: 10px; margin-top: 22px; }
.thumbstrip img { width: calc(33.33% - 7px); aspect-ratio: 3 / 2; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid var(--border); display: block; }

.step { padding: 28px 26px; }
.step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--primary-soft); color: var(--primary);
  font-weight: 600; font-size: 16px; margin-bottom: 16px;
  font-family: "Fraunces", Georgia, serif;
}
.step h3 { font-size: 20px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 15.5px; margin: 0; }

.feat { padding: 28px 26px; display: flex; gap: 18px; align-items: flex-start; }
.feat svg { flex-shrink: 0; width: 26px; height: 26px; stroke: var(--primary); margin-top: 3px; }
.feat h3 { font-size: 19px; margin-bottom: 6px; }
.feat p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* ── Hub cards (home → the four pages) ───────────── */
.hub { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 980px) { .hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hub { grid-template-columns: 1fr; } }
.hubcard { padding: 22px 22px; display: flex; flex-direction: column; gap: 9px; color: inherit; }
.hubcard:hover { color: inherit; border-color: var(--primary); }
.hubcard svg { width: 22px; height: 22px; stroke: var(--primary); }
.hubcard h3 { font-size: 18.5px; margin: 0; display: flex; align-items: center; gap: 7px; }
.hubcard h3 .arrow { color: var(--primary); font-size: 16px; transition: transform 0.15s ease; }
.hubcard:hover h3 .arrow { transform: translateX(3px); }
.hubcard p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* ── Walkthrough (how it works) ──────────────────── */
.walk { display: flex; flex-direction: column; gap: 20px; }
.walk-item { padding: 30px 30px; display: grid; grid-template-columns: 62px 1fr; gap: 22px; align-items: start; }
@media (max-width: 640px) { .walk-item { grid-template-columns: 1fr; gap: 14px; } }
.walk-item .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--primary-soft); color: var(--primary);
  font-family: "Fraunces", Georgia, serif; font-size: 21px; font-weight: 600;
}
.walk-item h3 { font-size: 22px; margin-bottom: 9px; }
.walk-item p { color: var(--muted); margin: 0 0 14px; font-size: 16px; }
.walk-item p:last-child { margin-bottom: 0; }
.stagebar { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.stagebar span {
  font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
}
.stagebar b { font-weight: 600; color: var(--text); font-size: 13px; padding: 5px 0; margin-right: 4px; }

/* ── Compare table ───────────────────────────────── */
.cmp { border-radius: 14px; overflow: hidden; }
.cmp-head, .cmp-row { display: grid; grid-template-columns: 1fr 1fr 1.25fr; }
.cmp-head { background: var(--primary-soft); }
.cmp-head .cell { font-size: 14px; font-weight: 600; color: var(--muted); text-align: center; }
.cmp-head .cell.tracy { color: var(--primary); }
.cell { padding: 16px 22px; font-size: 15px; }
.cmp-row { border-top: 1px solid var(--border); }
.cmp-row .cell.aspect { font-weight: 600; }
.cmp-row .cell.others { color: var(--muted); }
.cmp-row .cell.tracy { background: var(--primary-soft); }
.cell .m-label { display: none; }
@media (max-width: 760px) {
  .cmp-head { display: none; }
  .cmp-head, .cmp-row { grid-template-columns: 1fr; }
  .cmp-row .cell { padding: 10px 20px; }
  .cmp-row .cell.aspect { padding-top: 18px; }
  .cmp-row .cell.tracy { padding-bottom: 18px; }
  .cell .m-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 3px; color: var(--muted); }
  .cmp-row .cell.tracy .m-label { color: var(--primary); }
}

/* ── Platforms ───────────────────────────────────── */
/* Hero row under the video: label on its own line, logos grouped in the middle; planned
   platforms greyed out with a "Soon" tag. */
.hero-platforms { margin-top: 30px; text-align: center; }
.hero-platforms + .hero-ctas { margin-top: 30px; }
.hp-label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hp-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 30px; margin: 0; padding: 0; list-style: none; }
.pf { display: flex; align-items: center; gap: 7px; height: 32px; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.pf .pf-ico { flex: none; width: 17px; height: 17px; }
.pf.is-soon { opacity: .5; filter: grayscale(1); }
.pf-soon { padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--border); color: var(--muted); }
@media (max-width: 900px) { .hp-list { gap: 4px 22px; } .pf { height: 30px; font-size: 13px; } }
.platrow { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.plat { padding: 13px 28px; border-radius: 10px; font-weight: 600; font-size: 16px; }
.note { color: var(--muted); font-size: 14.5px; margin-top: 18px; text-align: center; }

/* ── Pricing ─────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 860px; margin: 0 auto; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }
.plan { padding: 34px 32px; position: relative; display: flex; flex-direction: column; }
.plan.lead-plan { border-color: var(--primary); box-shadow: var(--shadow); }
.plan .kicker { font-size: 13.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--primary); }
/* The two pricing cards head with h2, so the h2 rule has to stand beside the h3 one:
   without it the title took no spacing and the line under it sat against it. */
.plan h2, .plan h3 { font-size: 26px; margin: 12px 0 4px; }
.plan .price { font-family: "Fraunces", Georgia, serif; font-size: 44px; font-weight: 600; letter-spacing: -0.02em; margin: 14px 0 2px; }
.plan .price small { font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan .sub { color: var(--muted); font-size: 15px; margin: 0 0 20px; }
.plan .btn { width: 100%; justify-content: center; margin-top: auto; }
/* The list keeps its distance from the button, and the button is pushed to the foot of
   the card, so the two cards' buttons sit on one line whatever the copy above them. */
.plan .ticks { margin-bottom: 22px; }
.plan .price .tbd { font-size: 25px; padding: 6px 14px; }
.tbd {
  display: inline-block; padding: 2px 9px; border-radius: 7px;
  border: 1px dashed var(--border-strong); color: var(--muted);
  font-size: 0.86em; font-weight: 600; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq details { padding: 20px 24px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--primary); font-size: 21px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { color: var(--muted); margin: 12px 0 0; font-size: 15.5px; }

/* ── CTA + footer ────────────────────────────────── */
.cta-band { padding: 64px 0 72px; }
.cta-card { background: var(--primary); border-radius: 14px; text-align: center; padding: 46px 24px; color: var(--on-primary); box-shadow: var(--shadow); }
.cta-card h2 { font-size: clamp(27px, 4vw, 39px); color: var(--on-primary); }
.cta-card p { max-width: 540px; margin: 12px auto 24px; color: var(--on-primary); opacity: 0.82; }
.cta-card .btn { background: var(--panel-solid); color: var(--primary); }
.cta-card .btn:hover { background: var(--bg); color: var(--primary-hover); }

footer { border-top: 1px solid var(--border); padding: 34px 0 48px; background: var(--panel-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.foot .muted { color: var(--muted); font-size: 14px; }
.foot .links { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.foot .links a { color: var(--muted); font-size: 14px; }
.foot .links a:hover { color: var(--text); }

/* ── Tab demo: the four tabs of a site, as real buttons ──────────── */
.demo { padding: 8px 0 10px; }
.demo-tabs { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.demo-tab {
  font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1;
  padding: 10px 19px; border-radius: 999px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.demo-tab:hover { color: var(--text); border-color: var(--border-strong); }
.demo-tab[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.demo-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.demo-sep { color: var(--border-strong); font-size: 14px; }
.demo-cap { text-align: center; margin: 14px 0 0; font-size: 14.5px; color: var(--muted); min-height: 22px; }

.demo-stage { margin-top: 22px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--panel-solid); box-shadow: var(--shadow); }
.demo-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--chrome); border-bottom: 1px solid var(--border); }
.demo-head .dots { display: flex; gap: 6px; }
.demo-head .dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); }
.demo-head .dots span:first-child { background: #e0654f; }
.demo-head .where { font-size: 13px; color: var(--muted); font-weight: 600; }
.demo-body { padding: 26px 28px; min-height: 340px; text-align: left; }
@media (max-width: 640px) { .demo-body { padding: 20px 18px; min-height: 300px; } }
.demo-panel { display: none; }
.demo-panel.on { display: block; animation: fadein 0.22s ease-out; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .demo-panel.on { animation: none; } }

/* chat */
.chat { display: flex; flex-direction: column; gap: 13px; }
.chat .said {
  align-self: flex-end; max-width: 74%;
  background: var(--primary); color: var(--on-primary);
  padding: 12px 17px; border-radius: 14px 16px 5px 16px; font-size: 15.5px;
}
.chat .reply { align-self: flex-start; max-width: 82%; display: flex; flex-direction: column; gap: 9px; }
.chat .reply .line { font-size: 15.5px; }
.chat .tools { display: flex; gap: 7px; flex-wrap: wrap; }
.tool {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 5px 11px; border-radius: 8px;
  background: var(--primary-soft); color: var(--primary);
}
.tool svg { width: 13px; height: 13px; stroke: currentColor; }
.chat .done { color: var(--muted); font-size: 14.5px; }

/* change list */
.rows { display: flex; flex-direction: column; }
.row-item { display: flex; align-items: center; gap: 14px; padding: 15px 4px; border-bottom: 1px solid var(--border); }
.row-item:last-child { border-bottom: 0; }
.row-item .what { flex: 1; min-width: 0; }
.row-item .what b { display: block; font-size: 15.5px; font-weight: 600; }
.row-item .what span { font-size: 13.5px; color: var(--muted); }
.who { font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.who.agent { background: var(--primary-soft); color: var(--primary); }
.who.outside { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); }
.row-item .when { font-size: 13px; color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) { .row-item .when { display: none; } }

/* diff */
.difffile { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.diffbox { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; }
.diffbox div { padding: 7px 14px; white-space: pre-wrap; word-break: break-word; }
.diffbox .ctx { color: var(--muted); }
.diffbox .del { background: rgba(200, 60, 40, 0.1); color: #a33b28; }
.diffbox .add { background: rgba(60, 150, 90, 0.12); color: #2f7a4d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .diffbox .del { background: rgba(230, 90, 70, 0.16); color: #f0a08e; }
  :root:not([data-theme="light"]) .diffbox .add { background: rgba(80, 190, 120, 0.16); color: #8fdcab; }
}
:root[data-theme="dark"] .diffbox .del { background: rgba(230, 90, 70, 0.16); color: #f0a08e; }
:root[data-theme="dark"] .diffbox .add { background: rgba(80, 190, 120, 0.16); color: #8fdcab; }

/* releases */
.rel { display: flex; align-items: flex-start; gap: 14px; padding: 16px 4px; border-bottom: 1px solid var(--border); }
.rel:last-child { border-bottom: 0; }
.rel .vnum {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px;
  background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 15px;
}
.rel .meta { flex: 1; min-width: 0; }
.rel .meta b { display: block; font-size: 15.5px; }
.rel .meta span { font-size: 13.5px; color: var(--muted); }
.rel .btn { flex-shrink: 0; }
@media (max-width: 560px) { .rel .btn { display: none; } }

/* ── Step blocks: one picture, one explanation, alternating ──────── */
.stepblock { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; margin-bottom: 30px; }
.stepblock.flip .media { order: 2; }
@media (max-width: 900px) { .stepblock { grid-template-columns: 1fr; gap: 24px; } .stepblock.flip .media { order: 0; } }
.stepblock .media { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); background: var(--panel-solid); }
.stepblock .media img { width: 100%; display: block; }
.stepblock .media .inner { padding: 22px 24px; min-height: 250px; }
.stepblock .say .tag {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.stepblock .say h3 { font-size: 26px; margin: 13px 0 10px; }
/* Added with the 2026-09-28 freeze: two of the nine stepblocks lead with h2 rather
   than h3. Taken verbatim from that freeze's assets/site.css. */
.stepblock .say h2 { font-size: 26px; margin: 13px 0 10px; }
.stepblock .say p { color: var(--muted); margin: 0 0 12px; font-size: 16px; }
.stepblock .say p:last-child { margin-bottom: 0; }
.stepblock .say .ticks { margin-top: 14px; }
.stepblock .say .ticks li { font-size: 15px; }

/* Small stand-ins for product UI, built from the same tokens as the rest. */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); font-size: 13.5px; font-weight: 600; color: var(--muted); background: var(--panel-2); }
.chip.on { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.field { border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; font-size: 14.5px; color: var(--muted); background: var(--panel-2); display: flex; justify-content: space-between; gap: 10px; }
.field b { color: var(--text); font-weight: 600; }
.flabel { font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 14px 0 6px; }
.tplcard { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.tplcard img { width: 100%; height: 132px; object-fit: cover; object-position: top; display: block; }
.tplcard .t { padding: 9px 13px; font-size: 13.5px; }
.tplcard .t span { color: var(--muted); font-size: 12.5px; }
.stagelist { display: flex; flex-direction: column; gap: 10px; }
.stage { display: flex; align-items: center; gap: 11px; font-size: 14.5px; }
.stage .mark { width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stage.done .mark { background: var(--primary); border-color: var(--primary); }
.stage.done .mark svg { width: 10px; height: 10px; stroke: var(--on-primary); stroke-width: 3; fill: none; }
.stage.now .mark { border-color: var(--primary); }
.stage.now .mark::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.stage.todo { color: var(--muted); }
.stage .t2 { margin-left: auto; font-size: 12.5px; color: var(--muted); }

/* ── "What Tracy is not": a list, not a fifth grid of cards ──────── */
.nots { border-radius: 14px; overflow: hidden; }
.not-row { display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding: 17px 26px; border-top: 1px solid var(--border); align-items: baseline; }
.not-row:first-child { border-top: 0; }
.not-row b { font-weight: 600; font-size: 16px; }
.not-row span { color: var(--muted); font-size: 15.5px; }
@media (max-width: 700px) {
  .not-row { grid-template-columns: 1fr; gap: 5px; padding: 15px 20px; }
}

/* Two moving layers, both animated with `transform` only. Each is its own
   composited layer, so the GPU shifts an existing texture and nothing repaints.
   Delete this block for a still background. */
:root { --glow: rgba(255, 226, 205, 0.62); --glow2: rgba(255, 206, 178, 0.45); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --glow: rgba(235, 140, 100, 0.20); --glow2: rgba(255, 180, 130, 0.13); }
}
:root[data-theme="dark"] { --glow: rgba(235, 140, 100, 0.20); --glow2: rgba(255, 180, 130, 0.13); }

@keyframes bgdrift {
  from { transform: scale(1.12) translate3d(-1.8%, -1.2%, 0); }
  to   { transform: scale(1.12) translate3d(1.8%, 1.2%, 0); }
}
@keyframes glowdrift {
  0%   { transform: translate3d(-8%, -6%, 0) scale(1); }
  50%  { transform: translate3d(9%, 5%, 0) scale(1.18); }
  100% { transform: translate3d(-8%, -6%, 0) scale(1); }
}
body::before {
  will-change: transform;
  animation: bgdrift 48s ease-in-out infinite alternate;
}
html::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -2;
  pointer-events: none;
  will-change: transform;
  background:
    radial-gradient(38% 46% at 28% 32%, var(--glow), transparent 68%),
    radial-gradient(34% 40% at 74% 70%, var(--glow2), transparent 70%);
  animation: glowdrift 38s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  body::before, html::before { animation: none; }
  body::before { transform: none; }
}

/* Gallery facade. The live gallery is a whole app with 150+ running previews,
   so the page shows a still of it and only mounts the iframe when asked. */
.facade { position: relative; cursor: pointer; border: 0; padding: 0; display: block; width: 100%; background: none; }
.facade img { display: block; width: 100%; height: auto; }
.facade .veilx { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20,16,13,0) 45%, rgba(20,16,13,0.55)); }
.facade .play {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 999px;
  background: var(--primary); color: var(--on-primary);
  font-size: 15px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.5);
}
.facade:hover .play { background: var(--primary-hover); }
.facade:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.facade .play svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; }


/* ── Mobile menu ─────────────────────────────────────────────────── */
.navtoggle {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; flex-shrink: 0; margin-left: 10px;
  border-radius: 10px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
}
.navtoggle svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.navtoggle:hover { color: var(--text); border-color: var(--border-strong); }
.navtoggle:focus-visible, .themetoggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.themetoggle { margin-left: 12px; }

@media (max-width: 1080px) {
  .nav-inner { position: relative; }
  .navtoggle { display: inline-flex; }
  .themetoggle { margin-left: auto; }
  .nav-links {
    position: absolute; top: calc(100% + 13px); left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--panel-solid); border-bottom: 1px solid var(--border);
    padding: 6px 16px 16px;
    box-shadow: var(--shadow);
  }
  nav.open .nav-links { display: flex; }
  /* The desktop rule hides these; inside the open menu they are the menu. */
  nav.open .nav-links a:not(.btn) {
    display: block; padding: 14px 2px; font-size: 16px;
    border-bottom: 1px solid var(--border); color: var(--text);
  }
  .nav-links .btn { margin-top: 14px; justify-content: center; padding: 13px 20px; }
}

/* A step whose picture is a wide screenshot: full width, text underneath, so the
   text inside the image is not squeezed into a half column. */
.stepblock .say p { margin-bottom: 11px; }

/* ── Language switcher ───────────────────────────── */
/* Added with the 2026-09-28 freeze, whose assets/site.css carries these rules verbatim.
   The switcher markup lives in parts/header-marketing.html and only shows on the
   marketing template, which is the template this stylesheet is loaded for. */
.langswitch { position: relative; display: inline-flex; align-items: center; margin-left: 12px; }
.langtoggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; min-width: 50px; padding: 0 10px; flex-shrink: 0;
  border-radius: 10px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1;
}
.langtoggle:hover { color: var(--text); border-color: var(--border-strong); }
.langtoggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.langtoggle svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.langmenu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 50;
  display: none; min-width: 190px; padding: 7px;
  background: var(--panel-solid); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow);
}
.langswitch.open .langmenu { display: block; }
.langmenu a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--text); font-size: 14px; font-weight: 500;
}
.langmenu a:hover { background: var(--primary-soft); color: var(--text); }
.langmenu a.active { color: var(--primary); background: var(--primary-soft); }
.langmenu a b { font-size: 12px; color: var(--muted); }
.langmenu a.active b { color: var(--primary); }

@media (max-width: 1080px) {
  .langswitch { margin-left: auto; }
  .themetoggle { margin-left: 8px; }
  .langmenu { right: -44px; }
}

.langmenu[hidden] { display: none !important; }
.langtoggle svg, .langtoggle svg * { fill: none; }

@media (max-width: 1151px) { .section.wrap, .section-tight.wrap, .page-hero.wrap, .cta-band.wrap, .hero.wrap, .demo.wrap { padding-left: 16px; padding-right: 16px; } }

/* Hybrid system (approved 30/09/2026): primary fills use the product terracotta; links and accents use the darker step for contrast. */
.btn-primary, .cta-card { background: var(--primary-fill); }
.btn-primary:hover { background: var(--primary); }
body { font-size: 16px; }
.btn { font-weight: 500; }
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.foot-tagline{font-size:13px;color:var(--muted);line-height:1.3}
.cta-card h2{text-wrap:balance}
.plan .plan-alt{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--border);font-size:14.5px;color:var(--muted);text-align:center}.plan .plan-alt a{font-weight:600}
@media (max-width:560px){.plan .price{line-height:1.05;margin-bottom:12px}.plan .price small{display:block;margin-top:8px;line-height:1.4}}


/* Footer, second row: copyright, Privacy, Terms of Use and Discord (2026-10-06). The Discord
   link shows on English pages only; tracy_marketing_shell_language() drops it on translations. */
.foot-legal { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.foot-legal .muted, .foot-legal a { color: var(--muted); font-size: 13px; }
.foot-legal a:hover { color: var(--text); }
.foot-legal .foot-discord { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; }
.foot-legal .foot-discord svg { width: 18px; height: 18px; display: block; }
.foot-legal .foot-discord:hover { color: #5865F2; background: var(--panel-2); }
@media (max-width: 600px) { .foot-legal .foot-discord { margin-left: -10px; } }

/* The hero video (home, 2026-10-12): a poster with our own play button, and YouTube's player only
   once it is pressed, so its title bar, channel badge and "Watch on YouTube" never sit on the page.
   The click is handled at the end of marketing.js; without JavaScript the link opens YouTube. */
/* Same player size as the YouTube watch page: ~69% of the viewport (996px at 1440, 1344px at 1920), allowed to break out of the 1120px hero column; full column width on narrow screens like YouTube without its sidebar. */
.hero-video { width: min(69vw, 1344px); margin: 30px 0 4px 50%; transform: translateX(-50%); }
@media (max-width: 900px) { .hero-video { width: 100%; margin-left: 0; transform: none; } }
.hero-video .hv-poster, .hero-video iframe { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #111; box-shadow: var(--shadow); }
.hero-video iframe { height: auto; }
.hv-poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.hv-play { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--primary); box-shadow: 0 12px 34px rgba(0, 0, 0, .35); transition: transform .2s ease; }
.hv-play svg { width: 30px; height: 30px; margin-left: 4px; fill: #fff; }
.hv-poster:hover img { transform: scale(1.015); }
.hv-poster:hover .hv-play { transform: scale(1.08); }
.hv-poster:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
@media (max-width: 560px) { .hero-video { margin-top: 22px; } .hv-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; } .hv-play svg { width: 24px; height: 24px; } }

/* WordPress pushes the page down for its admin bar by setting a margin on the root
   element. When the bar is not shown that margin is still the space above the menu, so
   the offset is tied to the bar itself: none without it, exactly its height with it. */
html:has(body:not(.admin-bar)) { margin-top: 0 !important; }
body.admin-bar nav { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 782px) {
  body.admin-bar nav { top: var(--wp-admin--admin-bar--height, 46px); }
}