/* Marketing-site additions on top of omarchy.css. Colours only via --t-* tokens. */
/* omarchy.css now scopes its tokyo-night fallback to html:not([data-theme]) (an earlier version put it on
   :root and shadowed every theme). The re-import below is belt and braces and costs nothing (cached),
   after omarchy.css, puts the [data-theme] rules last so they win. Remove once omarchy.css is fixed. */
@import url("themes.css");
.hero { padding: 5.5rem 0 4rem; }
.hero .logo-mark { margin-bottom: 1rem; }
.hero .logo-mark .sub { font-weight: 400; color: var(--t-text-2); }
.hero .promise { font-size: clamp(1.15rem, 2.2vw, 1.5rem); max-width: 42rem; color: var(--t-text-2); }
.hero .cta { margin-top: 1.75rem; }
.hero .hint { margin-top: 1.25rem; font-family: var(--font-mono); font-size: .8rem; color: var(--t-text-2); }
.lead { font-size: 1.15rem; max-width: 46rem; }
.tag { font-family: var(--font-mono); font-size: .8rem; color: var(--t-text-2); }
.nav .theme-hint kbd { font-size: .75em; }
.nav .wrap, .nav nav { min-width: 0; }
.nav nav .btn.sm { margin-left: .25rem; }
.nav nav select[data-theme-picker] { max-width: 9rem; }
@media (max-width: 720px) {
  .nav [data-theme-name], .nav nav select[data-theme-picker], .nav .logo .pill { display: none; }
  .nav .theme-hint { gap: .25rem; }
  .nav nav { gap: .7rem; overflow-x: auto; scrollbar-width: none; }
  .nav nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 480px) { .nav .wrap { gap: .75rem; } .nav nav a[href="/docs.html"], .nav nav a[href="/presets.html"], .nav .theme-hint { display: none; } .nav nav { gap: .55rem; } .nav nav .btn.sm { padding: .35rem .5rem; margin-left: 0; } }
@media (max-width: 400px) { .nav nav a[href="/agents.html"] { display: none; } }

.card a.stretch::after { content: ""; position: absolute; inset: 0; }
.card .icon { font-family: var(--font-mono); font-size: 1.4rem; color: var(--t-brand); margin-bottom: .5rem; display: block; }
.card .price { font-family: var(--font-mono); font-size: 2rem; font-weight: 800; color: var(--t-text); margin: .5rem 0 0; }
.card .price small { font-size: .9rem; font-weight: 500; color: var(--t-text-2); }
.card .note { font-family: var(--font-mono); font-size: .75rem; color: var(--t-text-2); min-height: 1.2em; margin-bottom: .5rem; }
.card ul.feat { list-style: none; padding: 0; margin: 1rem 0 1.25rem; }
.card ul.feat li { padding: .3rem 0; border-top: 1px solid var(--t-border); font-size: .9rem; color: var(--t-text-2); }
.card ul.feat li::before { content: "› "; color: var(--t-brand); font-family: var(--font-mono); }
.card .corner { position: absolute; top: .75rem; right: .75rem; }

.bill { font-family: var(--font-mono); font-size: .85rem; }
.bill table td, .bill table th { padding: .35rem .5rem; }
.bill td { color: var(--t-text-2); }
.bill tr.total td { font-weight: 800; color: var(--t-text); border-top: 2px solid var(--t-brand); border-bottom: 0; }
.bill td:last-child, .bill th:last-child { text-align: right; white-space: nowrap; }

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: .5rem; }
.swatch { cursor: pointer; padding: .4rem; border: 1px solid var(--t-border); font-family: var(--font-mono); font-size: .62rem; line-height: 1.2; text-align: left; color: inherit; background: none; }
.swatch:hover, .swatch[aria-pressed="true"] { outline: 2px solid var(--t-brand); outline-offset: 1px; }
.swatch .chip { display: block; height: 2rem; margin-bottom: .3rem; position: relative; }
.swatch .chip i { position: absolute; left: .3rem; bottom: .3rem; width: .6rem; height: .6rem; }
.swatch .chip b { position: absolute; right: .3rem; top: .2rem; font-size: .6rem; }

.faq details { border-top: 1px solid var(--t-border); padding: .9rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--t-border); }
.faq summary { cursor: pointer; font-family: var(--font-mono); font-weight: 700; color: var(--t-text); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--t-brand); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: .6rem 0 0; }

.toggle { display: inline-flex; border: 1px solid var(--t-border); font-family: var(--font-mono); font-size: .85rem; }
.toggle button { background: transparent; color: var(--t-text-2); border: 0; padding: .45rem .9rem; cursor: pointer; font: inherit; }
.toggle button[aria-pressed="true"] { background: var(--t-brand); color: var(--t-brand-ink); }
.matrix th:not(:first-child), .matrix td:not(:first-child) { text-align: center; }
.matrix td:first-child { color: var(--t-text); font-family: var(--font-mono); font-size: .85rem; }
.matrix td { color: var(--t-text-2); }
.matrix tr.group td { background: var(--t-surface-2); font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--t-text-2); }
td.n, th.n { text-align: right; white-space: nowrap; font-family: var(--font-mono); }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: step; position: relative; padding: 0 0 1.5rem 3rem; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: .1rem; font-family: var(--font-mono); font-weight: 800; color: var(--t-brand); }
.steps li h3 { margin-bottom: .25rem; }
.steps li p { margin: 0; }

.stat { font-family: var(--font-mono); }
.stat b { display: block; font-size: 2rem; color: var(--t-brand); line-height: 1; }
.stat span { font-size: .8rem; color: var(--t-text-2); }

.preset .who { font-family: var(--font-mono); font-size: .75rem; color: var(--t-text-2); margin-top: .75rem; }
.preset p { font-size: .92rem; }

.legal { max-width: 46rem; }
.legal h2 { font-size: 1.2rem; margin-top: 2rem; }
.legal ol, .legal ul { color: var(--t-text-2); }

.big-404 { font-family: var(--font-mono); font-size: clamp(4rem, 15vw, 10rem); font-weight: 800; color: var(--t-brand); line-height: 1; margin: 0; }
.diagram { font-family: var(--font-mono); font-size: .8rem; white-space: pre; overflow-x: auto; color: var(--t-text-2); background: var(--t-bg-deep); box-shadow: var(--ring); padding: 1rem 1.25rem; margin: 0 0 1em; }
.diagram b { color: var(--t-brand); font-weight: 700; }
.diagram i { color: var(--t-green); font-style: normal; }
.kbd-list kbd { margin-right: .35rem; }
footer.site p a { display: inline; margin: 0; }
.hero-points { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .6rem 1.5rem; max-width: 60rem; }
.hero-points li { position: relative; padding-left: 1.4rem; color: var(--t-text-2); }
.hero-points li::before { content: "▸"; position: absolute; left: 0; color: var(--t-brand); font-family: var(--font-mono); }
.hero-points b { color: var(--t-text); }
.pillar-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin: 2.5rem 0 1rem; }
.pillar-head:first-of-type { margin-top: 0; }
.pillar-head h3 { margin: 0; font-family: var(--font-mono); }
.pillar-head .small { color: var(--t-muted); }
.footnote { color: var(--t-muted); }