/* Odincode.ai marketing pages (src/web/landing.ts) */

/* ---------- header: the section links of the marketing pages (visitors who are not signed in) ---------- */
@media (min-width: 1024px) {
  body.l-marketing .top-nav .nav-main:has(> a[href^="/#"]) { position: absolute; left: 50%; transform: translateX(-50%); gap: 0.25rem 1.75rem; }
}
@media (max-width: 1023.98px) { body.l-marketing .nav-main > a[href^="/#"] { display: none; } }

/* ---------- section heads: the eyebrow keeps its own size and colour (not the intro's) ---------- */
.section-head p.eyebrow { margin: 0 0 1rem; color: var(--link); font-size: 0.75rem; line-height: 1.4; }
.card.featured .tile + h3 { margin-top: 0; }

/* ---------- hero ---------- */
.landing-hero { padding-bottom: 0; }
.landing-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask: radial-gradient(60rem 34rem at 50% 0%, #000 30%, transparent 75%); mask: radial-gradient(60rem 34rem at 50% 0%, #000 30%, transparent 75%); }
.landing-hero::after { display: none; }
.landing-hero .eyebrow { padding: 0.375rem 0.875rem; border: 1px solid var(--primary-line); border-radius: var(--r-full); background: var(--primary-tint); letter-spacing: 0.16em; }
.landing-hero .below { margin-top: 2.75rem; }
.hero-note { margin: 0.875rem 0 0; color: var(--muted); font-size: 0.8125rem; }
.hero-note a { color: var(--fg-2); }
.landing-hero .tags { margin-top: 2.25rem; }
.page-hero { padding: clamp(3.5rem, 9vh, 5.5rem) 0 clamp(3rem, 8vh, 4.5rem); }
.page-hero h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 3.75rem); }
.page-hero .lead { margin-bottom: 1.5rem; }
.version-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3125rem 0.875rem; border: 1px solid var(--card-line); border-radius: var(--r-full); background: var(--surface); color: var(--fg-2); font: 500 0.8125rem/1.4 var(--font-mono); text-align: left; }
@media (min-width: 640px) { .version-badge { white-space: nowrap; } }
@media (max-width: 479.98px) { .version-badge { font-size: 0.75rem; border-radius: var(--r-md); } }
.version-badge .i { color: var(--link); }
.section-head .version-badge { display: flex; width: fit-content; max-width: 100%; margin: 1.25rem auto 0; }
.page-hero .version-badge { margin: 0 0 2.25rem; background: var(--glass); }

/* the product illustration (a decorative app window; its figcaption describes it) */
.app-shot { position: relative; max-width: 62rem; margin: 4.5rem auto 0; text-align: left; }
@media (min-width: 1140px) { .app-shot { margin-left: -3rem; margin-right: -3rem; max-width: none; } }
.app-shot::before { content: ""; position: absolute; inset: -12% -8% 0; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, hsl(192 85% 55% / 0.18), transparent); }
.app-window { position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(240, 242, 245, 0.1); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; background: linear-gradient(180deg, #151a21, #10141a 60%); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.4); font-size: 0.875rem; line-height: 1.5; color: var(--fg); }
.app-bar { position: relative; display: flex; align-items: center; gap: 1rem; height: 2.625rem; padding: 0 1rem; border-bottom: 1px solid rgba(240, 242, 245, 0.07); background: rgba(255, 255, 255, 0.02); }
.app-dots { display: flex; gap: 0.5rem; }
.app-dots span { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #ff5f57; }
.app-dots span:nth-child(2) { background: #febc2e; } .app-dots span:nth-child(3) { background: #28c840; }
.app-title { position: absolute; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
.app-model { display: inline-flex; align-items: center; gap: 0.375rem; margin-left: auto; padding: 0.125rem 0.625rem; border: 1px solid var(--primary-line); border-radius: var(--r-full); background: var(--primary-tint); color: var(--link); font-size: 0.6875rem; font-weight: 600; }
.app-body { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); min-height: 25rem; }
.app-side { padding: 1rem 0.75rem; border-right: 1px solid rgba(240, 242, 245, 0.07); background: rgba(0, 0, 0, 0.12); }
.app-side-title { margin: 0 0 0.625rem 0.5rem; color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.app-side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.app-side li { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.4375rem 0.625rem; border-radius: 9px; color: var(--muted); font-size: 0.8125rem; white-space: nowrap; overflow: hidden; }
.app-side li span:last-child { overflow: hidden; text-overflow: ellipsis; }
.app-side li.on { background: var(--primary-tint); color: var(--fg); }
.app-side li.on .i { color: var(--link); }
.app-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; padding: 1.5rem 1.75rem 1.25rem; }
.app-msg { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; }
.app-msg p { margin: 0; }
.app-avatar { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #272b35; color: var(--fg-2); }
.brand-avatar { background: #0b0e12 url("/static/brand/mark-on-dark.svg?v=9bc3de45a497") center / 1.125rem no-repeat; box-shadow: inset 0 0 0 1px var(--primary-line); }
.app-msg.user p { padding: 0.625rem 0.875rem; border: 1px solid rgba(240, 242, 245, 0.08); border-radius: 4px var(--r-md) var(--r-md) var(--r-md); background: rgba(255, 255, 255, 0.04); }
.app-agent { flex: 1; min-width: 0; }
.app-agent > p { color: var(--fg-2); }
.app-tools { display: grid; gap: 0.375rem; margin: 0.125rem 0 0.75rem; padding: 0; list-style: none; }
.app-tools li { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--muted); font-size: 0.8125rem; white-space: nowrap; }
.app-tools .i { color: var(--link); }
.app-tools code { padding: 0.0625rem 0.4375rem; border: 1px solid rgba(240, 242, 245, 0.07); border-radius: 6px; background: rgba(255, 255, 255, 0.04); color: var(--fg-2); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; }
.app-stat { font: 600 0.75rem/1 var(--font-mono); }
.app-stat .add, .app-ok { color: #4ade80; } .app-stat .del { color: #f87171; }
.app-ok { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600; }
pre.app-diff { font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0; margin: 0 0 0.875rem; padding: 0.75rem 0; overflow: hidden; border: 1px solid rgba(240, 242, 245, 0.07); border-radius: var(--r-md); background: #0b0e12; font-size: 0.75rem; line-height: 1.7; }
.app-diff .ctx, .app-diff .add { display: block; padding: 0 1rem 0 0.75rem; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.app-diff .ctx::before, .app-diff .add::before { display: inline-block; width: 1.25rem; color: var(--code-muted); }
.app-diff .ctx::before { content: " "; }
.app-diff .add { background: rgba(74, 222, 128, 0.08); box-shadow: inset 2px 0 0 rgba(74, 222, 128, 0.6); }
.app-diff .add::before { content: "+"; color: #4ade80; }
.app-diff .tok-k { color: var(--code-key); } .app-diff .tok-s { color: var(--code-str); }
.app-input { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; padding: 0.5rem 0.5rem 0.5rem 1rem; border: 1px solid rgba(240, 242, 245, 0.1); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.03); box-shadow: 0 0 24px hsl(192 85% 55% / 0.08); }
.app-placeholder { flex: 1; min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-meter { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.6875rem; white-space: nowrap; }
.app-meter-bar { display: block; width: 3rem; height: 0.3125rem; border-radius: 3px; background: #272b35; overflow: hidden; }
.app-meter-bar span { display: block; width: 12%; height: 100%; border-radius: 3px; background: var(--primary); }
.app-send { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 9px; background: var(--primary); color: var(--on-primary); }
@media (max-width: 767.98px) {
  .app-shot { margin-top: 3.5rem; }
  .app-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .app-side { display: none; }
  .app-main { padding: 1.125rem 1rem 1rem; gap: 1rem; }
  .app-title { display: none; }
  pre.app-diff { font-size: 0.6875rem; }
  .app-meter { display: none; }
}
@media (max-width: 479.98px) { .app-tools li:nth-child(2) code { max-width: 7.5rem; } .app-msg.user p { font-size: 0.8125rem; } }

/* ---------- stat strip under the hero ---------- */
.band.stats-band { padding: 0; }
.stats-band .stat-strip { padding: 3rem 0; }
.stats-band .stat-strip dd { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.5rem); }
@media (min-width: 768px) { .stats-band .stat-strip > div + div { border-left: 1px solid var(--line); } .stats-band .stat-strip > div { padding: 0 1rem; } }

/* ---------- how it works: three steps in a row ---------- */
.getting-started { margin-top: 5rem; text-align: center; }
.getting-started h3 { margin: 0 0 2.25rem; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); }
.steps-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; max-width: var(--w-feature); margin: 0 auto; padding: 0; list-style: none; counter-reset: step; text-align: left; }
.steps-row > li { position: relative; margin: 0; padding: 0 0 0 3.75rem; counter-increment: step; }
.steps-row > li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--surface); border: 1px solid var(--primary-line); box-shadow: 0 0 0 4px var(--bg-band), 0 0 24px var(--glow); color: var(--link); font: 700 1.125rem/1 var(--font-display); }
.steps-row h4 { margin: 0.25rem 0 0.375rem; font-size: 1.0625rem; }
.steps-row p { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }
@media (min-width: 768px) {
  .steps-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; text-align: center; }
  .steps-row::before { content: ""; position: absolute; top: 1.375rem; left: 16.67%; right: 16.67%; height: 1px; background: linear-gradient(90deg, var(--primary-line), var(--line), var(--primary-line)); }
  .steps-row > li { padding: 4rem 0.5rem 0; }
  .steps-row > li::before { left: 50%; transform: translateX(-50%); }
}
.tree-row .pill { margin-left: 0.25rem; font-family: var(--font-sans); font-size: 0.6875rem; vertical-align: 0.125rem; }

/* ---------- security (a dark band in both themes) ---------- */
.security-band { background: radial-gradient(54rem 26rem at 50% 0%, hsl(192 85% 55% / 0.09), transparent 70%), var(--bg); }
.sec-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 640px) { .sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sec-item { display: flex; align-items: flex-start; gap: 1rem; margin: 0; padding: 1.5rem; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
@media (hover: hover) { .sec-item:hover { border-color: var(--primary-line); box-shadow: 0 8px 32px var(--glow); } }
.sec-item h3 { margin: 0.125rem 0 0.375rem; font-size: 1.0625rem; }
.sec-item p { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }
.sec-note { margin: 2.5rem 0 0; color: var(--muted); font-size: 0.875rem; text-align: center; }
.sec-note .i { color: var(--link); }

/* ---------- plans ---------- */
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; max-width: var(--w-feature); margin: 0 auto; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.plan { display: flex; flex-direction: column; margin: 0; padding: 2rem; }
.plan h3 { margin: 0; font-size: 1.25rem; }
.price { display: flex; align-items: baseline; gap: 0.375rem; margin: 1rem 0 0.25rem; }
.price .amount { font: 700 3rem/1 var(--font-display); letter-spacing: -0.035em; color: var(--fg); font-variant-numeric: tabular-nums; }
.price .unit { color: var(--fg-2); font-weight: 600; }
.price .from { color: var(--muted); font-size: 0.9375rem; font-weight: 500; }
.price-sub { min-height: 1.5em; margin: 0 0 1.5rem; color: var(--muted); font-size: 0.875rem; }
.checks { display: grid; gap: 0.75rem; margin: 0 0 2rem; padding: 1.5rem 0 0; border-top: 1px solid var(--line-soft); list-style: none; }
.checks li { display: flex; align-items: flex-start; gap: 0.625rem; margin: 0; color: var(--fg-2); font-size: 0.9375rem; line-height: 1.5; }
.checks li::before { content: ""; flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; background-color: var(--link); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.plan-foot { margin-top: auto; }
.plan.featured-plan { border-color: var(--primary-line); background: linear-gradient(180deg, var(--primary-tint), transparent 45%), var(--surface); box-shadow: var(--shadow-card), 0 0 0 1px var(--primary-line), 0 24px 60px var(--glow); }
@media (min-width: 900px) { .plan.featured-plan { transform: translateY(-0.75rem); } }
.plans-note { margin: 2.5rem 0 0; color: var(--muted); font-size: 0.875rem; text-align: center; }
.plans-note .i { color: var(--link); }

/* ---------- downloads ---------- */
.dl-card .dl-signed { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.25rem; color: var(--ok); font-weight: 600; }
.dl-card .dl-note code.dl-cmd { display: block; width: fit-content; max-width: 100%; margin-top: 0.375rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; overflow-wrap: anywhere; }
.dl-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 1.5rem 0 0; padding: 1rem 1.25rem; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.dl-soon p { flex: 1 1 14rem; margin: 0; color: var(--muted); font-size: 0.9375rem; }
.dl-soon strong { margin-right: 0.25rem; color: var(--fg); font-family: var(--font-display); font-size: 1.0625rem; }
.dl-soon .pill { gap: 0.375rem; }
#download .alert + .dl-soon, #desktop .alert + .dl-soon { margin-top: 0; }
.install-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin: 1.5rem 0 0; padding: 2rem; }
@media (min-width: 900px) { .install-card { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: 3rem; padding: 2.5rem; } }
.install-text h3 { margin: 1.25rem 0 0.5rem; font-size: 1.375rem; }
.install-text p { color: var(--muted); }
.install-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1rem 0 0; font-size: 0.9375rem; }
.install-links a { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 500; }
.install-code .codeblock { margin: 0; }
.install-code p { margin: 1.25rem 0 0.625rem; color: var(--muted); font-size: 0.9375rem; }
.cli-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 3rem; }
@media (min-width: 900px) { .cli-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; } }
.cli-split .section-head { margin-bottom: 0; }
.cli-split .codeblock + p { margin: 1.25rem 0 0.625rem; }
.cli-split .codeblock { margin: 0; }
.manual-title { margin: 4rem 0 0.5rem; font-size: 1.375rem; }
.manual-title + .muted { margin-bottom: 1.25rem; }
code.sha { font-size: 0.75rem; word-break: break-all; }
#install table.data.stack td::before { flex: none; white-space: nowrap; }
.target { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.target .i { color: var(--link); }
.how-card { margin: 0; }
.how-card h3 { margin: 1rem 0 0; }
.num-steps { display: grid; gap: 0.75rem; margin: 1rem 0 0; padding-left: 1.25rem; color: var(--fg-2); font-size: 0.9375rem; line-height: 1.55; }
.num-steps li { margin: 0; padding-left: 0.25rem; }
.num-steps li::marker { color: var(--link); font-weight: 700; }
.num-steps .codeblock { margin: 0.5rem 0 0; font-size: 0.8125rem; }
.verify-card .codeblock { margin: 0.5rem 0 1rem; }
.verify-card p, .signin-card p { color: var(--fg-2); }
.sums-link { margin: 0; font-size: 0.875rem; }

/* ---------- FAQ (no script: <details>) ---------- */
.faq { display: grid; gap: 0.75rem; }
.faq > details.faq-item { margin: 0; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); transition: border-color 0.2s, box-shadow 0.2s; }
.faq > details.faq-item[open] { border-color: var(--primary-line); }
.faq > details.faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.125rem 1.25rem; border-radius: var(--r-lg); color: var(--fg); font-size: 1rem; font-weight: 600; line-height: 1.45; list-style: none; }
.faq > details.faq-item > summary::-webkit-details-marker { display: none; }
.faq > details.faq-item > summary:hover { color: var(--link); }
.faq > details.faq-item > summary::after { content: ""; flex: none; width: 1.25rem; height: 1.25rem; background-color: var(--muted); transition: transform 0.2s var(--ease); -webkit-mask: var(--i-chevron-down) center / contain no-repeat; mask: var(--i-chevron-down) center / contain no-repeat; }
.faq > details.faq-item[open] > summary::after { transform: rotate(180deg); background-color: var(--link); }
.faq > details.faq-item > p { margin: 0; padding: 0 1.25rem 1.25rem; color: var(--muted); font-size: 0.9375rem; line-height: 1.65; }

/* ---------- closing call to action ---------- */
.cta-band { overflow: hidden; background: radial-gradient(44rem 22rem at 50% 115%, hsl(192 85% 55% / 0.22), transparent 70%), radial-gradient(30rem 16rem at 50% -10%, hsl(192 85% 55% / 0.07), transparent 70%), var(--bg); }

/* ---------- forced colours, print ---------- */
@media (forced-colors: active) {
  .checks li::before, .faq > details.faq-item > summary::after { forced-color-adjust: none; background-color: CanvasText; }
  .landing-hero::before, .app-shot::before { display: none; }
}
@media print { .app-shot, .landing-hero::before { display: none !important; } }