/* civoxel.com v2 (2026-10-05, the customer redesign, direction B "drawing sheet"). Light theme locked,
   one accent (the logo blue), radius rule: 2 px for sheet-like frames, 6 px for controls.
   Motion is for every visitor and gentle: crossfades and slow zooms only (README, "Motion").
   docs/legal/site/legal.css builds on these tokens: --nav-h --surface --line --line-soft --r --r-lg
   --font-display --font-mono --muted --accent-tint --accent-ink - rename one only together with it. */

@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --canvas: #f6f8fa;
  --surface: #ffffff;
  --ink: #24292f;
  --muted: #57606a;
  --faint: #8a949e;
  --line: #d0d7de;
  --line-soft: #e8ebef;
  --accent: #1b6ac9;
  --accent-hover: #1559a8;
  --accent-ink: #0f4c8f;
  --accent-tint: #dbe9f8;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --r: 6px;
  --r-lg: 12px;
  --nav-h: 60px;
  --wrap: 1200px;
  --ease-out: cubic-bezier(0, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.55 var(--font-body); color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, ol, ul, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 50; padding: 8px 12px; background: var(--ink); color: #fff; border-radius: var(--r); text-decoration: none; font-size: 14px; }
.skip:focus { top: 12px; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--line-soft); }
.nav__in { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 600 18px/1 var(--font-display); letter-spacing: -0.01em; }
.brand__mark { width: 26px; height: 26px; }
.nav__right { display: flex; align-items: center; gap: 12px; }
.nav__link, .nav__cta { padding: 8px 12px; border: 1px solid transparent; border-radius: var(--r); font-size: 14px; font-weight: 500; text-decoration: none; line-height: 1.4; }
.nav__link { color: var(--muted); }
.nav__link:hover { color: var(--ink); background: var(--line-soft); }
.nav__cta { background: var(--accent); color: #fff; font-weight: 600; }
.nav__cta:hover { background: var(--accent-hover); }

/* ---------- buttons ---------- */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--r); font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--quiet { color: var(--ink); background: var(--surface); border-color: var(--line); }
.btn--quiet:hover { border-color: var(--faint); background: var(--canvas); }

/* ---------- type ---------- */
.hero__title { font: 600 clamp(2rem, 1.3rem + 2.4vw, 2.75rem)/1.08 var(--font-display); letter-spacing: -0.025em; text-wrap: balance; max-width: 22ch; }
.hero__sub { margin-top: 18px; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--muted); max-width: 46ch; text-wrap: pretty; }
.h2 { font: 600 clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem)/1.12 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; align-self: start;
  /* a drawing's view-title underline */
  padding-bottom: 12px; background: linear-gradient(var(--ink), var(--ink)) left bottom / 64px 3px no-repeat, linear-gradient(var(--line), var(--line)) left calc(100% - 1px) / 100% 1px no-repeat; }
h3 { font: 600 1.05rem/1.3 var(--font-display); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 56px 0 64px; border-bottom: 1px solid var(--line); }
.hero__grid { position: relative; display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) {
  .hero { padding: 72px 0 88px; }
  .hero__grid { grid-template-columns: 5fr 7fr; gap: 48px; }
  .hero__title { font-size: 2.55rem; text-wrap: wrap; max-width: none; }
}
/* the founder's own A101 linework (E1-A101.pdf), faint, after load; masked off behind the copy */
.hero__tex { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s; }
/* painted in ink THROUGH the linework as a mask (not as a background image): the same look, and a
   mask is never the page's largest contentful paint - the still of the loop is */
.tex .hero__tex {
  opacity: .085;
  background: var(--ink);
  -webkit-mask-image: url("assets/screens/texture-a101-1400.webp"), radial-gradient(ellipse 46% 60% at 24% 40%, transparent 55%, #000 85%);
  mask-image: url("assets/screens/texture-a101-1400.webp"), radial-gradient(ellipse 46% 60% at 24% 40%, transparent 55%, #000 85%);
  -webkit-mask-size: 1400px auto, 100% 100%;
  mask-size: 1400px auto, 100% 100%;
  -webkit-mask-position: right 0 bottom -260px, 0 0;
  mask-position: right 0 bottom -260px, 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (max-width: 1023.98px) {
  .tex .hero__tex {
    opacity: .06;
    -webkit-mask-image: url("assets/screens/texture-a101-1000.webp");
    mask-image: url("assets/screens/texture-a101-1000.webp");
    -webkit-mask-size: 1000px auto;
    mask-size: 1000px auto;
    -webkit-mask-position: center top;
    mask-position: center top;
  }
}

/* the loop: the still first; the states only under html.motion, after load (script.js) */
.clip { background: #fff; border: 1px solid var(--ink); border-radius: 2px; overflow: hidden; }
.clip__bar { display: flex; align-items: center; gap: 8px; height: 38px; padding-right: 6px; border-bottom: 1px solid var(--ink); background: #fff; font-size: 13px; color: var(--muted); }
.clip__labels { position: relative; flex: 1; min-width: 0; height: 38px; }
.clip__label { position: absolute; left: 12px; right: 4px; top: 0; line-height: 38px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .9s var(--ease-out); }
.clip__label b { font-family: var(--font-mono); color: var(--ink); margin-right: 6px; }
.clip[data-seg="0"] .clip__label[data-seg="0"], .clip[data-seg="1"] .clip__label[data-seg="1"],
.clip[data-seg="2"] .clip__label[data-seg="2"], .clip[data-seg="3"] .clip__label[data-seg="3"] { opacity: 1; }
.clip__pause { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; font: 600 13px/1 var(--font-body); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.clip__pause:hover { border-color: var(--faint); background: var(--canvas); }
.clip__pause svg { width: 12px; height: 12px; }
.clip__pause .i-play, .clip__pause[aria-pressed="true"] .i-pause { display: none; }
.clip__pause[aria-pressed="true"] .i-play { display: block; }
.clip__pause[hidden] { display: none; }
.clip__stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.clip__poster, .clip__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip__video { opacity: 0; transition: opacity .9s var(--ease-out); }
.clip.playing .clip__video { opacity: 1; }
.clip.paused .clip__video { opacity: 0; transition: none; }

.hero__below { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 14px; }
.hero__trust { font-weight: 600; font-size: 15px; }
.watch { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; font: 600 14px/1 var(--font-body); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.watch svg { width: 14px; height: 14px; color: var(--accent); }
.watch:hover { border-color: var(--faint); }
.watch[hidden] { display: none; }
/* the 60-second video: a sheet-like frame (2 px, ink border) like the loop's, over a dimmed page */
.demo { width: min(1120px, 94vw); max-width: none; padding: 0; border: 1px solid var(--ink); border-radius: 2px; background: #000; color: var(--ink); overflow: hidden; }
.demo::backdrop { background: rgba(36, 41, 47, .72); }
.demo__bar { display: flex; justify-content: flex-end; height: 44px; padding: 6px; background: #fff; border-bottom: 1px solid var(--ink); }
.demo__close { height: 32px; padding: 0 14px; font: 600 14px/1 var(--font-body); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.demo__close:hover { border-color: var(--faint); background: var(--canvas); }
.demo__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }

/* ---------- the scroll story ---------- */
section.story { padding: 88px 0 72px; background: var(--canvas); border-bottom: 1px solid var(--line-soft); }
.story__grid { margin-top: 40px; }
.story__steps { position: relative; display: grid; gap: 48px; }
.sstep__img img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 2px; background: #fff; }
.sstep__text h3 { font-size: 1.2rem; margin-top: 16px; }
.sstep__text p { margin-top: 6px; color: var(--muted); max-width: 48ch; }
.story__screen { display: none; }
@media (min-width: 768px) {
  .sstep { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }
  .sstep__img { order: 2; }
  .sstep__text h3 { margin-top: 0; }
  .sstep__img img[height="1170"], .sstep__img img[height="1747"] { max-height: 560px; width: auto; margin-inline: auto; }
}
@media (max-width: 767.98px) {
  .sstep__img--fade img { -webkit-mask-image: linear-gradient(to right, #000 78%, transparent); mask-image: linear-gradient(to right, #000 78%, transparent); }
  .sstep__img img[height="1747"], .sstep__img img[height="1170"] { max-height: 70vh; width: auto; max-width: 100%; margin-inline: auto; }
}
/* the reading pace on phones and tablets: one step, at least 80 % of the viewport */
@media (max-width: 1023.98px) {
  .motion .sstep { min-height: 80vh; min-height: 80svh; display: flex; flex-direction: column; justify-content: center; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .motion .sstep { display: grid; align-content: center; }
}
/* desktop: ONE pinned screen; a screen changes only when its step crosses the middle line,
   one 700 ms ease-out crossfade; steps 85 vh; a rail down the steps' left side */
@media (min-width: 1024px) {
  .motion .story__grid { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; }
  .motion .story__steps { display: block; padding-left: 28px; }
  .motion .story__steps::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: var(--line); }
  .motion .story__steps::after { content: ""; position: absolute; left: 4px; top: 0; width: 2px; height: 100%; background: var(--accent); transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform .7s var(--ease-out); }
  .motion .sstep { display: flex; flex-direction: column; justify-content: center; min-height: 85vh; position: relative; }
  .motion .sstep::before { content: ""; position: absolute; left: -29px; top: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--canvas); border: 2px solid var(--line); z-index: 1; transition: background .3s, border-color .3s; }
  .motion .sstep.seen::before { background: var(--accent); border-color: var(--accent); }
  .motion .sstep__img { display: none; }
  .motion .sstep__text { opacity: .45; transition: opacity .7s var(--ease-out); }
  .motion .sstep.on .sstep__text { opacity: 1; }
  .motion .story__screen { display: block; position: sticky; align-self: start; top: calc(50vh - (min(100vw - 32px, 1200px) - 48px) * 8 / 12 * 10 / 16 / 2 + var(--nav-h) / 2); }
  .frame { position: relative; aspect-ratio: 16 / 10; background: #fff; border: 1px solid var(--ink); border-radius: 2px; overflow: hidden; }
  .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .7s var(--ease-out); }
  .frame img.on { opacity: 1; }
}

/* ---------- measured numbers ---------- */
.facts { padding: 40px 0; border-bottom: 1px solid var(--line-soft); }
.facts__in { display: grid; gap: 20px; }
@media (min-width: 768px) { .facts__in { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.facts p { color: var(--muted); font-size: 15px; }
.facts b { display: block; font: 600 1.35rem/1.2 var(--font-display); color: var(--ink); margin-bottom: 4px; }

/* ---------- trust: where your drawings go ---------- */
section.trust { padding: 88px 0; }
.trust__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .trust__grid { grid-template-columns: 5fr 7fr; gap: 56px; } }
.trust__lead { margin-top: 14px; color: var(--muted); max-width: 46ch; }
.flow { width: 100%; max-width: 640px; }
.flow__box rect { fill: var(--surface); stroke: var(--line); }
.flow__box--main rect { stroke: var(--accent); stroke-width: 1.5; }
.flow__box--soft rect { stroke-dasharray: 4 3; }
.flow text { font: 600 14px var(--font-body); fill: var(--ink); text-anchor: middle; }
.flow text.s { font-weight: 400; font-size: 11.5px; fill: var(--muted); }
.flow text.flow__note { font: 400 10.5px var(--font-body); fill: var(--muted); }
.flow__l { fill: none; stroke: var(--faint); stroke-width: 1.5; }
.flow__l--dash { stroke-dasharray: 4 4; }
.flow__dot { fill: var(--accent); }
.flow__halo { fill: var(--accent); opacity: .2; }
.trust__list { display: grid; gap: 0 48px; margin-top: 56px; }
@media (min-width: 768px) { .trust__list { grid-template-columns: 1fr 1fr; } }
.trust__item { padding: 20px 0; border-top: 1px solid var(--line-soft); }
.trust__item b { display: block; font: 600 1.05rem/1.3 var(--font-display); }
.trust__item p { margin-top: 6px; color: var(--muted); max-width: 60ch; }

/* ---------- FAQ ---------- */
section.faq { padding: 88px 0; background: var(--canvas); border-top: 1px solid var(--line-soft); }
.faq__grid { display: grid; gap: 32px; }
@media (min-width: 1024px) { .faq__grid { grid-template-columns: 4fr 8fr; gap: 48px; } }
.faq__item { padding: 22px 0; border-top: 1px solid var(--line); }
.faq__item:first-child { border-top: 0; padding-top: 0; }
.faq__item dt { font: 600 1.15rem/1.3 var(--font-display); }
.faq__item dd { margin-top: 8px; color: var(--muted); max-width: 64ch; }

/* ---------- footer (the legal pages copy it; their links go before .footer__copy) ---------- */
.footer { border-top: 1px solid var(--line-soft); padding: 28px 0; font-size: 14px; color: var(--muted); }
.footer__in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.footer .brand { font-size: 15px; }
.footer__legal { color: var(--muted); }
.footer__copy { margin-left: auto; }
.footer__signin { display: none; font-weight: 500; text-decoration: none; }
@media (max-width: 339.98px) {
  .nav__link { display: none; }
  .footer__signin { display: inline; }
}
@media (max-width: 380px) { .nav__link { padding: 8px 6px; } .nav__cta { padding: 8px 10px; } .brand__name { font-size: 16px; } }

/* ---------- reveals: once, 500 ms, 12 px ---------- */
.motion [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.motion [data-reveal].in { opacity: 1; transform: none; }