/* NEXICAPTURE — public site. One file, no build step. */
@font-face { font-family: Outfit; font-weight: 400; font-display: swap; src: url(../fonts/outfit-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Outfit; font-weight: 500; font-display: swap; src: url(../fonts/outfit-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Outfit; font-weight: 600; font-display: swap; src: url(../fonts/outfit-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: Outfit; font-weight: 700; font-display: swap; src: url(../fonts/outfit-latin-700-normal.woff2) format("woff2"); }

:root {
  --bg: #07080c; --bg-2: #0a0c12; --surface: #0f121a; --surface-2: #141824;
  --line: rgba(148, 163, 184, .13); --line-2: rgba(148, 163, 184, .24);
  --text: #eef2f7; --muted: #a3acbc; --faint: #737d8f;
  --cyan: #22d3ee; --cyan-2: #67e8f9; --indigo: #818cf8;
  --grad: linear-gradient(135deg, #0e7490 0%, #4f46e5 100%);
  --grad-text: linear-gradient(100deg, #67e8f9 0%, #a5b4fc 60%, #c7d2fe 100%);
  --radius: 14px; --radius-lg: 22px;
  --wrap: 1180px; --gutter: clamp(16px, 4vw, 32px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.65 Outfit, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.12; letter-spacing: -.025em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
h4 { font-size: 1.05rem; letter-spacing: -.005em; margin-bottom: .25em; }
p { margin: 0 0 1em; }
code { font: .9em ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--surface-2); padding: .1em .4em; border-radius: 6px; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: #fff; color: #000; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 12px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap.narrow { width: min(820px, 100% - 2 * var(--gutter)); }
.wrap.wide { width: min(1240px, 100% - 2 * var(--gutter)); }
.muted { color: var(--muted); } .small { font-size: .9rem; }
.eyebrow { color: var(--cyan); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.lead { color: var(--muted); font-size: 1.1rem; }
.lead.lg { font-size: clamp(1.1rem, 1.6vw, 1.28rem); }
.lead p:last-child { margin-bottom: 0; }
.badge { font-style: normal; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan-2); border: 1px solid rgba(34, 211, 238, .35); background: rgba(34, 211, 238, .08); padding: 3px 8px; border-radius: 99px; vertical-align: middle; white-space: nowrap; }
.ico { stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 12px; font: 600 1rem/1 Outfit, system-ui, sans-serif; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, border-color .2s; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 8px 28px -10px rgba(79, 70, 229, .7), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 34px -12px rgba(79, 70, 229, .85), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn-ghost { color: var(--text); border-color: var(--line-2); background: rgba(255, 255, 255, .02); }
.btn-ghost:hover { color: #fff; border-color: rgba(148, 163, 184, .45); background: rgba(255, 255, 255, .05); }
.btn-ghost .ico { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.btn-ghost:hover .ico { transform: translateX(3px); }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: .92rem; border-radius: 10px; gap: 8px; }
.btn-sm .ico { width: 16px; height: 16px; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 1.08rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* header */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(7, 8, 12, .72); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.site-head.scrolled { border-bottom-color: var(--line); }
.head-row { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: .02em; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.brand .badge { margin-left: 2px; }
.site-nav ul { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.site-nav a:not(.btn) { color: var(--muted); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-size: .96rem; }
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"]:not(.btn) { color: var(--text); background: rgba(255, 255, 255, .04); }
.nav-cta { margin-left: 8px; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-2); border-radius: 10px; width: 44px; height: 40px; padding: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-toggle i { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s var(--ease); }
.nav-toggle[aria-expanded="true"] i:first-of-type { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }
.preview-bar { background: #f59e0b; color: #111; text-align: center; padding: 8px; font-weight: 600; font-size: .92rem; }
.preview-bar a { color: #111; }
[data-draft] { outline: 1px dashed rgba(245, 158, 11, .7); outline-offset: -1px; }

/* hero */
.hero { position: relative; padding: clamp(56px, 9vw, 112px) 0 clamp(48px, 7vw, 88px); text-align: center; overflow: hidden; }
.hero-glow { position: absolute; inset: -20% -10% auto; height: 760px; background: radial-gradient(ellipse 50% 45% at 50% 40%, rgba(8, 145, 178, .22), transparent 70%), radial-gradient(ellipse 40% 40% at 65% 55%, rgba(79, 70, 229, .18), transparent 70%); pointer-events: none; }
.hero-copy { position: relative; max-width: 880px; }
.hero h1 { background: linear-gradient(180deg, #fff 30%, #c9d3e3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { max-width: 680px; margin: 0 auto; }
.hero .actions { justify-content: center; }
.hero .note { color: var(--faint); font-size: .92rem; margin-top: 18px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 99px; font-size: .86rem; color: var(--muted); background: rgba(255, 255, 255, .03); margin-bottom: 26px; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(34, 211, 238, .15); }
.hero-shot { margin: clamp(48px, 7vw, 80px) auto 0; position: relative; }
.hero-shot::before { content: ""; position: absolute; inset: 8% 6% -4%; background: var(--grad); filter: blur(70px); opacity: .28; z-index: -1; border-radius: 40px; }

/* framed screenshots */
.shot { margin: 0; }
.shot .frame { display: block; position: relative; border-radius: var(--radius); border: 1px solid var(--line-2); background: #0b0d14; padding: 28px 0 0; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02) inset; }
.shot .frame img { width: 100%; aspect-ratio: 16 / 9; }
.shot .dots { position: absolute; top: 10px; left: 14px; display: flex; gap: 6px; }
.shot .dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(148, 163, 184, .3); }
.shot figcaption { color: var(--faint); font-size: .88rem; margin-top: 12px; }
.shot figcaption.concept { font-style: italic; }
a.frame { transition: transform .35s var(--ease), border-color .3s; }
a.frame:hover { transform: translateY(-3px); border-color: rgba(103, 232, 249, .35); }

/* page header */
.page-hero { padding: clamp(56px, 8vw, 104px) 0 clamp(24px, 4vw, 40px); position: relative; }
.page-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 360px; background: radial-gradient(ellipse 45% 70% at 20% 0, rgba(8, 145, 178, .14), transparent 70%); pointer-events: none; }
.page-hero .wrap { position: relative; }

/* sections */
section { padding: clamp(56px, 8vw, 104px) 0; }
.page-hero + section { padding-top: clamp(24px, 4vw, 48px); }
.sec-head { max-width: 640px; margin-bottom: 40px; }
.sec-head.center { text-align: center; margin-inline: auto; }

.split-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split.flip .split-grid { grid-template-columns: 7fr 5fr; }
.split.flip .split-copy { order: 2; }
.split.no-media .split-grid { grid-template-columns: minmax(0, 720px); }
.checks ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 30px; color: var(--text); }
.checks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 6px; background: rgba(34, 211, 238, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367e8f9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.split + .split { padding-top: 0; }

.feature-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.layout-columns .feature-list { grid-template-columns: repeat(3, 1fr); }
.feature-list li { display: flex; gap: 16px; padding: 24px 24px 24px 0; border-bottom: 1px solid var(--line); }
.feature-list p { color: var(--muted); margin: 0; font-size: .98rem; }
.fi { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--cyan-2); background: linear-gradient(180deg, rgba(34, 211, 238, .12), rgba(79, 70, 229, .1)); border: 1px solid rgba(103, 232, 249, .18); flex: none; }
.tag { display: inline-block; margin-top: 8px; font-size: .78rem; color: var(--indigo); border: 1px solid rgba(129, 140, 248, .3); border-radius: 99px; padding: 2px 9px; }
.group-title { color: var(--faint); font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; margin: 44px 0 0; padding-bottom: 14px; }
.group-title:first-of-type { margin-top: 0; }

.steps { background: linear-gradient(180deg, transparent, var(--bg-2) 30%, var(--bg-2) 70%, transparent); }
.step-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: s; position: relative; }
.step-list.n4 { grid-template-columns: repeat(4, 1fr); }
.step-list.n2 { grid-template-columns: repeat(2, 1fr); }
.step-list::before { content: ""; position: absolute; top: 22px; left: 22px; right: 22px; height: 1px; background: linear-gradient(90deg, var(--line-2), rgba(103, 232, 249, .35), var(--line-2)); }
.step-list li { position: relative; }
.step-list .num { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg); border: 1px solid rgba(103, 232, 249, .4); color: var(--cyan-2); font-weight: 600; margin-bottom: 18px; }
.step-list p { color: var(--muted); margin: 0; }

.specs-grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.spec-table { margin: 0; border-top: 1px solid var(--line); }
.spec-table > div { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.spec-table dt { color: var(--text); font-weight: 500; }
.spec-table dd { margin: 0; color: var(--muted); }
.spec-table.compact > div { grid-template-columns: 120px 1fr; padding: 12px 0; font-size: .95rem; }

.gallery-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.gallery-grid.c1 { grid-template-columns: 1fr; }
.gallery-grid li:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.gallery .actions { justify-content: center; margin-top: 44px; }

.faq-grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-grid > .faq-list:only-child { grid-column: 1 / -1; max-width: 820px; margin-inline: auto; width: 100%; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font-weight: 500; font-size: 1.06rem; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease); }
.faq-list details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-list details > div { color: var(--muted); padding: 0 40px 20px 0; }

.release-card { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line); position: relative; }
.release-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(103, 232, 249, .4), transparent 40%, transparent 60%, rgba(129, 140, 248, .35)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.rel-line { color: var(--muted); }
.rel-line strong { color: var(--text); }

.cta-band .cta-inner { text-align: center; padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 64px); border-radius: var(--radius-lg); background: radial-gradient(ellipse 60% 120% at 50% 0, rgba(8, 145, 178, .2), transparent 70%), var(--surface); border: 1px solid var(--line); }
.cta-band .lead { max-width: 560px; margin-inline: auto; }
.cta-band .actions { justify-content: center; }

/* download */
.dl-card { border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); background: var(--surface); }
.dl-top { display: flex; gap: 18px; align-items: center; margin-bottom: 24px; }
.dl-top img { border-radius: 14px; }
.dl-top h2 { font-size: 1.6rem; margin: 0 0 4px; }
.dl-top p { margin: 0; }
.dl-meta { margin: 28px 0 0; border-top: 1px solid var(--line); }
.dl-meta > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.dl-meta dt { color: var(--faint); } .dl-meta dd { margin: 0; color: var(--muted); }
.hash { word-break: break-all; font-size: .82rem; }
.copy { margin-left: 6px; background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2); border-radius: 6px; font: 500 .8rem Outfit, sans-serif; padding: 3px 8px; cursor: pointer; }
.callout { display: flex; gap: 14px; margin-top: 24px; padding: 16px 18px; border-radius: 12px; background: rgba(245, 158, 11, .07); border: 1px solid rgba(245, 158, 11, .25); color: #f5d9a8; }
.callout .ico { color: #f59e0b; margin-top: 3px; }
.callout p { margin: 0; }
.unavailable h2 { font-size: 1.5rem; }
.unavailable p { color: var(--muted); margin: 0; }

/* changelog / prose */
.rel { padding: 32px 0; border-bottom: 1px solid var(--line); }
.rel:first-child { padding-top: 0; }
.rel header p { margin: -4px 0 16px; }
.prose { color: #cfd6e2; }
.prose h3 { color: var(--text); font-size: 1.3rem; margin: 2em 0 .6em; }
.prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin: .35em 0; }
.prose strong { color: var(--text); }
.notice-text { white-space: pre-wrap; word-break: break-word; max-height: 70vh; overflow: auto; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; font: .82rem/1.6 ui-monospace, Consolas, monospace; color: var(--muted); }

/* contact */
.contact-grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.form { display: grid; gap: 18px; }
.form label { display: grid; gap: 6px; font-weight: 500; font-size: .95rem; }
.form .opt { color: var(--faint); font-weight: 400; }
.form input, .form select, .form textarea { width: 100%; background: var(--bg-2); color: var(--text); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; font: 400 1rem Outfit, system-ui, sans-serif; transition: border-color .2s, box-shadow .2s; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, .18); }
.form [aria-invalid="true"] { border-color: #f87171; }
.form .err { color: #fca5a5; font-weight: 400; }
.form-err { color: #fecaca; background: rgba(248, 113, 113, .08); border: 1px solid rgba(248, 113, 113, .3); padding: 12px 14px; border-radius: 10px; }
.form-ok { display: flex; gap: 14px; padding: 24px; border-radius: var(--radius); background: rgba(34, 197, 94, .07); border: 1px solid rgba(34, 197, 94, .3); }
.form-ok .ico { color: #4ade80; width: 26px; height: 26px; }
.form-ok h3 { margin-bottom: 4px; }
.form-ok p { margin: 0; color: var(--muted); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hp { position: absolute !important; left: -9999px; }
.form .btn { justify-self: start; }

/* footer */
.site-foot { border-top: 1px solid var(--line); margin-top: clamp(40px, 6vw, 80px); padding: 56px 0 28px; background: var(--bg-2); }
.foot-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 32px; }
.foot-brand p { color: var(--muted); margin: 12px 0 0; max-width: 320px; }
.foot-col h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin-bottom: 14px; }
.foot-col ul, .socials { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot-col a, .socials a { color: var(--muted); text-decoration: none; }
.foot-col a:hover, .socials a:hover { color: var(--text); }
.socials { display: flex; gap: 14px; margin-top: 14px; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--faint); font-size: .88rem; }
.foot-bottom a { color: var(--faint); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(3, 4, 7, .92); display: grid; place-items: center; padding: 24px; }
.lightbox img { max-height: 84vh; width: auto; border-radius: 10px; border: 1px solid var(--line-2); }
.lightbox p { color: var(--muted); text-align: center; margin-top: 12px; }
.lightbox button { position: absolute; top: 16px; right: 16px; background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2); border-radius: 10px; width: 44px; height: 44px; font-size: 22px; cursor: pointer; }

/* reveal on scroll (only when JS runs and motion is welcome) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .split-grid, .split.flip .split-grid, .specs-grid, .faq-grid, .contact-grid, .release-card { grid-template-columns: 1fr; }
  .split.flip .split-copy { order: 0; }
  .layout-columns .feature-list { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { position: fixed; inset: 68px 0 auto; background: rgba(7, 8, 12, .98); border-bottom: 1px solid var(--line); padding: 12px var(--gutter) 20px; display: none; }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; }
  .site-nav a:not(.btn) { display: block; padding: 12px; font-size: 1.05rem; }
  .nav-cta { margin: 8px 0 0; }
  .nav-cta .btn { width: 100%; justify-content: center; min-height: 48px; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .feature-list, .layout-columns .feature-list, .gallery-grid, .row2 { grid-template-columns: 1fr; }
  .feature-list li { padding-right: 0; }
  .step-list, .step-list.n4, .step-list.n2 { grid-template-columns: 1fr; gap: 24px; }
  .step-list::before { top: 22px; bottom: 22px; left: 22px; right: auto; width: 1px; height: auto; background: var(--line-2); }
  .step-list li { padding-left: 64px; }
  .step-list .num { position: absolute; left: 0; top: -6px; }
  .spec-table > div, .dl-meta > div { grid-template-columns: 1fr; gap: 4px; }
  .shot .frame { padding-top: 20px; border-radius: 10px; }
  .shot .dots { top: 7px; }
  .brand .badge { display: none; }
  .hero .actions .btn, .cta-band .actions .btn { width: 100%; justify-content: center; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}
@media print {
  .site-head, .site-foot, .nav-toggle, .hero-glow, .actions { display: none !important; }
  body { background: #fff; color: #000; }
  .js .reveal { opacity: 1; transform: none; }
  .lead, .prose, .muted, .feature-list p, .spec-table dd { color: #222; }
}

/* ===== Theme toggle (top-right) ===== */
.theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: 8px; border-radius: 10px; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; transition: background .2s, border-color .2s, transform .2s var(--ease); flex: none; }
.theme-toggle:hover { background: rgba(255, 255, 255, .05); transform: rotate(-12deg); }
.theme-toggle .ico { width: 19px; height: 19px; }
.theme-toggle .i-sun { display: none; }
[data-theme="light"] .theme-toggle .i-sun { display: block; }
[data-theme="light"] .theme-toggle .i-moon { display: none; }
.head-tools { display: flex; align-items: center; }
@media (max-width: 860px) { .head-tools { gap: 8px; } .theme-toggle { margin-left: 0; } }

/* ===== Light theme — the reference palette (lexiatastudio.com/lexicapture global colours) =====
   headings #13111C · text #4A4760 · muted #6B6880 · accent #7C3AED / #6D28D9 · secondary #DB2777 / #BE185D
   soft background #F7F6FC · border #E6E4F0 · lavender #D9D2F5 · gradient 135° #7C3AED → #DB2777 */
[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF; --bg-2: #F7F6FC; --surface: #FFFFFF; --surface-2: #F7F6FC;
  --line: #E6E4F0; --line-2: #D9D2F5;
  --text: #13111C; --muted: #4A4760; --faint: #6B6880;
  --cyan: #7C3AED; --cyan-2: #6D28D9; --indigo: #DB2777;
  --grad: linear-gradient(135deg, #7C3AED 0%, #DB2777 100%);
  --grad-text: linear-gradient(100deg, #7C3AED 0%, #A21CAF 55%, #DB2777 100%);
}
[data-theme="light"] body { background: #FFFFFF; }
[data-theme="light"] a:hover { color: #BE185D; }
[data-theme="light"] .badge { color: #6D28D9; border-color: #D9D2F5; background: #F7F6FC; }
[data-theme="light"] .btn-primary { box-shadow: 0 10px 26px -12px rgba(124, 58, 237, .55), inset 0 1px 0 rgba(255, 255, 255, .2); }
[data-theme="light"] .btn-primary:hover { box-shadow: 0 16px 32px -14px rgba(124, 58, 237, .65), inset 0 1px 0 rgba(255, 255, 255, .25); }
[data-theme="light"] .btn-ghost { background: #FFFFFF; color: #13111C; }
[data-theme="light"] .btn-ghost:hover { color: #13111C; border-color: #C4B5FD; background: #F7F6FC; }
[data-theme="light"] .site-head { background: rgba(255, 255, 255, .82); }
[data-theme="light"] .site-nav a:not(.btn):hover, [data-theme="light"] .site-nav a[aria-current="page"]:not(.btn) { color: #13111C; background: #F7F6FC; }
[data-theme="light"] .theme-toggle:hover { background: #F7F6FC; }
[data-theme="light"] .nav-toggle i { background: #13111C; }
[data-theme="light"] .hero-glow { background: radial-gradient(900px 380px at 15% 0%, rgba(124, 58, 237, .16), transparent 70%), radial-gradient(700px 320px at 95% 10%, rgba(219, 39, 119, .12), transparent 70%); }
[data-theme="light"] .hero h1 { background: none; color: #13111C; }
[data-theme="light"] .pill { background: #FFFFFF; color: #4A4760; }
[data-theme="light"] .pill .dot { background: #7C3AED; box-shadow: 0 0 0 4px rgba(124, 58, 237, .15); }
[data-theme="light"] .hero-shot::before { opacity: .18; }
[data-theme="light"] .shot .frame { background: #0B0A12; border-color: #E6E4F0; box-shadow: 0 30px 60px -28px rgba(19, 17, 28, .35); }
[data-theme="light"] a.frame:hover { border-color: #C4B5FD; }
[data-theme="light"] .page-hero::before { background: radial-gradient(900px 380px at 15% 0%, rgba(124, 58, 237, .12), transparent 70%), radial-gradient(700px 320px at 95% 10%, rgba(219, 39, 119, .08), transparent 70%); }
[data-theme="light"] .checks li::before { background: rgba(124, 58, 237, .10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
[data-theme="light"] .fi { color: #7C3AED; background: linear-gradient(180deg, rgba(124, 58, 237, .10), rgba(219, 39, 119, .08)); border-color: #D9D2F5; }
[data-theme="light"] .tag { color: #BE185D; border-color: rgba(219, 39, 119, .3); }
[data-theme="light"] .steps { background: linear-gradient(180deg, #FFFFFF, #F7F6FC 30%, #F7F6FC 70%, #FFFFFF); }
[data-theme="light"] .step-list::before { background: linear-gradient(90deg, #E6E4F0, #C4B5FD, #E6E4F0); }
[data-theme="light"] .step-list .num { background: #FFFFFF; border-color: #C4B5FD; color: #7C3AED; }
[data-theme="light"] .release-card { background: linear-gradient(180deg, #FFFFFF 0%, #F7F6FC 100%); }
[data-theme="light"] .release-card::before { background: linear-gradient(140deg, rgba(124, 58, 237, .45), transparent 40%, transparent 60%, rgba(219, 39, 119, .4)); }
[data-theme="light"] .cta-band .cta-inner { background: radial-gradient(900px 380px at 15% 0%, rgba(124, 58, 237, .16), transparent 70%), radial-gradient(700px 320px at 95% 10%, rgba(219, 39, 119, .12), transparent 70%), #F7F6FC; border-color: #E6E4F0; }
[data-theme="light"] .callout { background: #FFFBEB; border-color: #FCD34D; color: #78350F; }
[data-theme="light"] .callout .ico { color: #B45309; }
[data-theme="light"] .prose { color: #4A4760; }
[data-theme="light"] .form input, [data-theme="light"] .form select, [data-theme="light"] .form textarea { background: #FFFFFF; border-color: #D9D2F5; color: #13111C; }
[data-theme="light"] .form input:focus, [data-theme="light"] .form select:focus, [data-theme="light"] .form textarea:focus { border-color: #7C3AED; box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
[data-theme="light"] .form .err { color: #BE185D; }
[data-theme="light"] .form-err { color: #9F1239; background: #FFF1F2; border-color: #FECDD3; }
[data-theme="light"] .form-ok { background: #F0FDF4; border-color: #BBF7D0; }
[data-theme="light"] .form-ok .ico { color: #16A34A; }
[data-theme="light"] .copy { background: #F7F6FC; color: #13111C; }
[data-theme="light"] .notice-text { background: #F7F6FC; color: #4A4760; }
[data-theme="light"] code { background: #F7F6FC; color: #13111C; }
[data-theme="light"] .site-foot { background: #F7F6FC; }
[data-theme="light"] .lightbox { background: rgba(19, 17, 28, .9); }
@media (max-width: 860px) { [data-theme="light"] .site-nav { background: rgba(255, 255, 255, .98); } }