/* camoufy.com styles. Components use only the tokens below.
   Controls are full pills, surfaces have a 14px radius. */
:root {
  --ground: #f2f4f3;
  --surface: #fbfcfb;
  --surface-2: #e7ecea;
  --ink: #101817;
  --muted: #52625f;
  --faint: #7c8c89;
  --line: rgba(16, 24, 23, .1);
  --line-2: rgba(16, 24, 23, .18);
  --accent: #0e7c86;
  --accent-ink: #0a6169;
  --accent-soft: #dbeced;
  --on-accent: #f4fbfb;
  --code: #0f1917;
  --code-ink: #d3e2df;
  --code-dim: #7d9894;
  --code-str: #a6d9b0;
  --code-key: #7fcfd6;
  --shadow: 0 1px 2px rgba(14, 60, 64, .06), 0 24px 56px -24px rgba(14, 60, 64, .28);
  --sans: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r: 14px;
  --wrap: 1200px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0b1110; --surface: #111a19; --surface-2: #182322; --ink: #e3ebe9; --muted: #8b9d9a; --faint: #5e706d;
    --line: rgba(227, 235, 233, .09); --line-2: rgba(227, 235, 233, .16);
    --accent: #3fb2bc; --accent-ink: #74cdd4; --accent-soft: #12292b; --on-accent: #041a1c;
    --code: #070d0c; --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 24px 56px -24px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0b1110; --surface: #111a19; --surface-2: #182322; --ink: #e3ebe9; --muted: #8b9d9a; --faint: #5e706d;
  --line: rgba(227, 235, 233, .09); --line-2: rgba(227, 235, 233, .16);
  --accent: #3fb2bc; --accent-ink: #74cdd4; --accent-soft: #12292b; --on-accent: #041a1c;
  --code: #070d0c; --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 24px 56px -24px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* Show the screenshot that matches the theme. */
.shot-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shot-light { display: none; } :root:not([data-theme="light"]) .shot-dark { display: block; } }
:root[data-theme="dark"] .shot-light { display: none; }
:root[data-theme="dark"] .shot-dark { display: block; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
code, .mono { font-family: var(--mono); font-size: .9em; }
h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; font-weight: 650; }
h1 { font-size: clamp(2.4rem, 4.8vw, 4rem); letter-spacing: -.045em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
h3 { font-size: 1.16rem; letter-spacing: -.015em; line-height: 1.25; font-weight: 600; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.eyebrow { font: 500 .78rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.lede { font-size: 1.15rem; line-height: 1.55; color: var(--muted); max-width: 52ch; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* buttons: full pills */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: 550 .95rem/1 var(--sans); padding: 13px 20px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease), background-color .2s ease, border-color .2s ease; }
.btn:hover { color: var(--ink); background: var(--surface-2); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.pri:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-accent); }
.btn.sm { padding: 9px 15px; font-size: .88rem; }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--ground) 84%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 1.1rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.brand svg { width: 26px; height: 26px; flex: none; }
.nav { display: flex; gap: 24px; margin-left: auto; }
.nav a { color: var(--muted); text-decoration: none; font-size: .94rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
@media (max-width: 767px) { .nav { display: none; } .top .btn { margin-left: auto; } }

/* hero */
.hero { padding-block: 56px 40px; }
.hero h1 { max-width: 20ch; }
.hero h1 span { color: var(--accent); }
.hero .lede { margin-top: 22px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .lede, .hero-cta, .window { animation: rise .9s var(--ease) both; }
  .hero .lede { animation-delay: .08s; } .hero-cta { animation-delay: .16s; } .window { animation-delay: .24s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* demo window */
.demo { padding-bottom: 96px; }
.window { border-radius: var(--r); overflow: hidden; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.titlebar { display: flex; align-items: center; gap: 10px; height: 40px; padding-inline: 16px; border-bottom: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.titlebar svg { width: 16px; height: 16px; }
.window iframe { display: block; width: 100%; height: min(720px, 80vh); border: 0; background: var(--ground); }
.demo-caption { margin-top: 16px; color: var(--muted); font-size: .92rem; max-width: 70ch; }
.demo-phone { display: none; padding: 22px; gap: 14px; }
@media (max-width: 767px) { .window iframe { display: none; } .demo-phone { display: grid; } }

/* section rhythm */
.band { padding-block: 104px; }
.band + .band { border-top: 1px solid var(--line); }
@media (max-width: 767px) { .band { padding-block: 64px; } }
.stack { display: grid; gap: 16px; max-width: 62ch; }

/* reveal on scroll */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@keyframes settle { from { opacity: .45; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* fingerprint section and seed card */
.fp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.fp-points { display: grid; gap: 18px; margin-top: 32px; }
.fp-points p { color: var(--muted); }
.fp-points b { color: var(--ink); font-weight: 600; }
@media (max-width: 1023px) { .fp { grid-template-columns: 1fr; gap: 40px; } }
.seed-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.seed-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; background: var(--accent-soft); }
.seed-card .seed { font: 500 .98rem/1 var(--mono); color: var(--accent-ink); }
.seed-card .run { font: 500 .8rem/1 var(--mono); color: var(--muted); }
.seed-card dl { margin: 0; padding: 10px 22px; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 24px; }
.seed-card dt, .seed-card dd { margin: 0; padding-block: 9px; font-size: .9rem; }
.seed-card dt { color: var(--muted); }
.seed-card dd { font: .82rem/1.5 var(--mono); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.seed-card dd.changed { animation: changed 1s var(--ease); }
@keyframes changed { from { color: var(--accent); transform: translateX(6px); } }
.seed-card footer { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 22px 20px; border-top: 1px solid var(--line); }
.seed-note { margin-top: 16px; min-height: 3em; font-size: .9rem; color: var(--muted); }

/* feature grid */
.bento-head { margin-bottom: 44px; max-width: 20ch; }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.cell { border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); padding: 28px; display: grid; gap: 12px; align-content: start; overflow: hidden; }
.cell p { color: var(--muted); font-size: .96rem; }
.cell .shot { margin-top: 10px; border-radius: 10px; border: 1px solid var(--line); overflow: hidden; background: var(--ground); }
.cell .shot img { width: 100%; transition: transform .6s var(--ease); }
.cell:hover .shot img { transform: scale(1.015); }
.c-proxy { grid-column: span 4; }
.c-tor { grid-column: span 2; background: var(--accent-soft); border-color: transparent; align-content: space-between; }
.c-tor .chips span { font-size: 1rem; padding: 10px 15px; }
.c-addons, .c-move, .c-engine { grid-column: span 2; }
.c-move { background-color: var(--surface); background-image: radial-gradient(var(--line-2) 1px, transparent 1.2px); background-size: 16px 16px; }
.c-bulk { grid-column: span 6; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 36px; align-items: center; }
.c-bulk .shot { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chips span { font: 500 .82rem/1 var(--mono); padding: 8px 12px; border-radius: 999px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.files { display: grid; gap: 10px; margin-top: 6px; }
.files span { font: 500 1.35rem/1.1 var(--mono); color: var(--ink); letter-spacing: -.02em; }
@media (max-width: 1023px) {
  .c-proxy, .c-bulk { grid-column: span 6; }
  .c-tor, .c-addons, .c-move, .c-engine { grid-column: span 3; }
  .c-bulk { grid-template-columns: 1fr; }
}
@media (max-width: 767px) { .bento { grid-template-columns: 1fr; } .bento > .cell { grid-column: auto; } }

/* two columns: folder and code */
.twin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.twin > div { display: grid; gap: 16px; align-content: start; }
.twin .lede { font-size: 1.05rem; }
@media (max-width: 1023px) { .twin { grid-template-columns: 1fr; gap: 48px; } }
.code { margin: 8px 0 0; background: var(--code); color: var(--code-ink); border-radius: var(--r); padding: 22px 24px; font: .84rem/1.75 var(--mono); overflow-x: auto; white-space: pre; tab-size: 4; }
.code .c { color: var(--code-dim); } .code .s { color: var(--code-str); } .code .k { color: var(--code-key); }

/* release strip */
.release { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 40px; align-items: start; padding: 36px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.release .ver { font: 650 clamp(3rem, 6vw, 4.6rem)/1 var(--sans); letter-spacing: -.05em; margin-top: 14px; }
.release .meta { margin-top: 12px; color: var(--muted); font-size: .92rem; }
.release ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--muted); }
.release .get { display: grid; gap: 14px; justify-items: start; }
.release .sha { font: .72rem/1.5 var(--mono); color: var(--faint); overflow-wrap: anywhere; }
.reqs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.reqs div { padding: 20px; border-radius: var(--r); background: var(--surface-2); display: grid; gap: 6px; align-content: start; }
.reqs b { font-weight: 600; font-size: .95rem; }
.reqs span { color: var(--muted); font-size: .9rem; }
@media (max-width: 1023px) { .release { grid-template-columns: 1fr; gap: 24px; } .reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .release { padding: 24px; } .reqs { grid-template-columns: 1fr; } }

/* faq accordion */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; }
@media (max-width: 1023px) { .faq-wrap { grid-template-columns: 1fr; gap: 28px; } }
.faq { display: grid; gap: 10px; }
.faq details { border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); padding: 0 22px; transition: border-color .2s ease; }
.faq details[open] { border-color: var(--line-2); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 550; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { transition: transform .3s var(--ease); color: var(--accent); }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; color: var(--muted); max-width: 64ch; }

/* text pages */
.doc { padding-block: 64px 96px; }
.doc-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 64px; }
.doc aside nav { position: sticky; top: 96px; display: grid; gap: 10px; font-size: .92rem; }
.doc aside a { color: var(--muted); text-decoration: none; }
.doc aside a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.doc article { max-width: 68ch; }
.doc article h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); }
.doc article .updated { color: var(--faint); font: .85rem/1 var(--mono); margin: 14px 0 36px; }
.doc article h2 { font-size: 1.35rem; letter-spacing: -.02em; margin: 40px 0 12px; }
.doc article p + p { margin-top: 12px; }
.doc article ul { padding-left: 20px; display: grid; gap: 6px; margin: 12px 0; }
.doc article table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.doc article th, .doc article td { text-align: left; padding: 11px 12px; vertical-align: top; }
.doc article thead th { color: var(--muted); font-weight: 500; font-size: .82rem; border-bottom: 1px solid var(--line-2); }
.doc article tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.tbl { overflow-x: auto; margin: 14px 0; border-radius: var(--r); }
@media (max-width: 1023px) { .doc-grid { grid-template-columns: 1fr; gap: 24px; } .doc aside nav { position: static; display: flex; flex-wrap: wrap; gap: 8px 18px; } }
.contact-card { margin-top: 28px; padding: 28px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line-2); display: grid; gap: 14px; }
.contact-card .addr { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-weight: 650; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.03em; }
.contact-card .addr span { user-select: all; overflow-wrap: anywhere; }

/* facts strip under the hero */
.facts { padding-block: 8px 40px; }
.facts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.facts-row div { display: grid; gap: 4px; align-content: start; }
.facts-row b { font-weight: 600; }
.facts-row span { color: var(--muted); font-size: .92rem; line-height: 1.5; }
@media (max-width: 1023px) { .facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .facts-row { grid-template-columns: 1fr; gap: 18px; } }

/* use cases: tabs */
.cases { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; }
.case-list { display: grid; gap: 6px; align-content: start; }
.case-list button { text-align: left; font: 550 1.02rem/1.3 var(--sans); color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 13px 20px; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.case-list button:hover { color: var(--ink); background: var(--surface-2); }
.case-list button[aria-selected="true"] { color: var(--ink); background: var(--surface); border-color: var(--line-2); }
.case-panel { border-radius: var(--r); background: var(--accent-soft); padding: 40px; display: grid; gap: 16px; align-content: start; min-height: 100%; }
.case-panel h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.03em; }
.case-panel p { color: var(--muted); font-size: 1.05rem; max-width: 56ch; }
@media (prefers-reduced-motion: no-preference) { .case-panel:not([hidden]) { animation: rise .5s var(--ease) both; } }
@media (max-width: 1023px) {
  .cases { grid-template-columns: 1fr; }
  .case-list { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .case-list button { white-space: nowrap; scroll-snap-align: start; flex: none; }
  .case-panel { padding: 26px; }
}

/* getting started steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps li { position: relative; padding: 28px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.steps li b { font-size: 1.1rem; font-weight: 600; letter-spacing: -.015em; }
.steps li span { color: var(--muted); }
.steps li + li::before { content: ""; position: absolute; left: -16px; top: 50%; width: 16px; height: 1px; background: var(--line-2); }
@media (max-width: 767px) { .steps { grid-template-columns: 1fr; } .steps li + li::before { display: none; } }

/* local vs cloud table */
.local { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
@media (max-width: 1023px) { .local { grid-template-columns: 1fr; gap: 32px; } }
.compare { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface); }
.compare table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .95rem; }
.compare th, .compare td { text-align: left; padding: 16px 20px; vertical-align: top; }
.compare thead th { font-weight: 600; border-bottom: 1px solid var(--line-2); }
.compare thead th:nth-child(2), .compare td:nth-child(2) { background: var(--accent-soft); }
.compare tbody th { font-weight: 500; color: var(--muted); }
.compare td:nth-child(3) { color: var(--muted); }
.compare tbody tr + tr > * { border-top: 1px solid var(--line); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* closing call */
.closing { padding-block: 0 104px; }
.closing-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 48px; border-radius: var(--r); background: var(--code); border: 1px solid var(--line-2); }
.closing-row h2 { color: #eef5f3; }
@media (max-width: 767px) { .closing-row { padding: 28px; } }

.release-entry + .release-entry { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.doc .code { margin: 12px 0; }

/* footer */
.foot { border-top: 1px solid var(--line); padding-block: 52px 56px; color: var(--muted); font-size: .92rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-brand { display: grid; gap: 10px; align-content: start; }
.foot nav { display: grid; gap: 10px; align-content: start; }
.foot nav b { color: var(--ink); font-weight: 600; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot .fine { grid-column: 1 / -1; font-size: .82rem; color: var(--faint); max-width: 90ch; padding-top: 24px; border-top: 1px solid var(--line); }
@media (max-width: 767px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }