/* Hathigen: the sheet system (2026-11, "Working shown").
   Loaded after main.css and demos.css on every page.

   PART 1 (this part): tokens, the light, the margin scale and the home page's components. Classes start with v-
   and custom properties with --v-, so nothing here collides with main.css or the product demos.
   The page is a calculation sheet drawn as a blueprint: deep navy ground, a two-colour grid, and two pens.
   Cyan (Hi) is the pen that plots: the trace, the flow, the underlines. Violet (Ha) is the pen that checks:
   the ticks, the highlighter, the verdicts. Names such as --v-red and --v-hi are kept from the first concept:
   red is the plotting pen, hi is the highlighter.

   PART 2 (further down): the same system applied to the rest of the site. */

:root {
  --v-paper: #0b1130;                       /* Night */
  --v-deep: #080d24;
  --v-paper-lift: #161f4a;
  --v-grid: rgba(131, 102, 255, .10);      /* minor squares, violet */
  --v-grid-major: rgba(34, 211, 238, .14); /* every fifth line, cyan */
  --v-ink: #eef1ff;                         /* lettering on dark */
  --v-ink-2: #c3c9e8;
  --v-ink-3: #9aa3cf;
  --v-line: rgba(190, 200, 255, .26);                        /* structural rules */
  --v-red: #22d3ee; --v-red-ink: #22d3ee;     /* Hi cyan: the plotting pen (variable names kept from the first version) */
  --v-chk: #8366ff;                         /* Ha violet: the checking pen */
  --v-hi: #8366ff; --v-on-hi: #070b1a; --v-hi-text: #5b3ff0;
  --v-hole: transparent;
  --v-stage: rgba(18, 26, 62, .74);
  --v-margin-rule: rgba(34, 211, 238, .5);
  --v-inv-bg: rgba(18, 26, 62, .7); --v-inv-fg: #eef1ff; --v-inv-fg2: #c3c9e8;
  --v-inv-grid: rgba(34, 211, 238, .10); --v-inv-grid2: rgba(131, 102, 255, .075); --v-inv-rule: rgba(163, 171, 209, .36);
  --v-inv-accent: #22d3ee; --v-inv-pen: #8366ff;
  --v-cta-bg: #8366ff; --v-cta-fg: #070b1a; --v-chip-bg: #22d3ee; --v-chip-fg: #070b1a;
  --v-h-violet: #8366ff; --v-h-cyan: #22d3ee;
  --v-blue: #5b8cff;
  --v-node: #141c47;
  --v-fade: linear-gradient(90deg, #8366ff, #5b8cff 52%, #22d3ee);  /* the logo's strands: violet into cyan */
  --v-rule: 1.5px;
  --v-margin: 0px;
  --v-pad: 20px;
  --v-display: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  --v-text: 'Inter', 'Segoe UI', Arial, sans-serif;
  --v-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --v-serif: 'STIX Two Text', 'Cambria', 'Times New Roman', serif;  /* the one extra face: formulas and pitches */
  --v-hand: var(--v-mono);
}
@media (min-width: 760px) { :root { --v-pad: 40px; } }
@media (min-width: 1180px) { :root { --v-margin: 76px; --v-pad: 48px; } }

:where(.v-sheets) *, :where(.v-sheets) *::before, :where(.v-sheets) *::after { box-sizing: border-box; }

:where(.v-sheets) img, :where(.v-sheets) svg, :where(.v-sheets) canvas { display: block; max-width: 100%; }
:where(.v-sheets) h1, :where(.v-sheets) h2, :where(.v-sheets) h3, :where(.v-sheets) p, :where(.v-sheets) ul, :where(.v-sheets) ol { margin: 0; padding: 0; }
:where(.v-sheets) ul, :where(.v-sheets) ol { list-style: none; }
:where(.v-sheets) a { color: inherit; }
:where(.v-sheets) button { font: inherit; color: inherit; }
:where(.v-sheets) :focus-visible { outline: 3px solid var(--v-red); outline-offset: 3px; }
.v-sheet--pine :focus-visible, .v-sheet--red :focus-visible { outline-color: var(--v-inv-accent); }

/* ---------- type ---------- */
:where(.v-sheets) h1, :where(.v-sheets) h2 {
  font-family: var(--v-display);
  font-weight: 800;
  font-stretch: 86%;
  letter-spacing: -.035em;
  line-height: .92;
  text-wrap: balance;
}
:where(.v-sheets) h1 { font-size: clamp(2.9rem, 13.2vw, 4.4rem); }
:where(.v-sheets) h2 { font-size: clamp(2.5rem, 10vw, 4.6rem); }
:where(.v-sheets) h3 { font-family: var(--v-display); font-weight: 750; font-stretch: 90%; letter-spacing: -.02em; line-height: 1.02; }
.v-pitch { font: italic 400 1.2rem/1.3 var(--v-serif); color: var(--v-ink); }
.v-hand { font: 400 1.25rem/1.1 var(--v-hand); color: var(--v-red-ink); }
.v-hand svg { display: inline-block; width: 46px; height: 23px; vertical-align: -6px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v-fine { font: 400 .8rem/1.55 var(--v-mono); color: var(--v-ink-2); max-width: 78ch; margin-top: 36px; }

/* ---------- left margin of the pad ---------- */
.v-margin { display: none; }
@media (min-width: 1180px) {
  .v-margin {
    display: block; position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; width: var(--v-margin);
    border-right: 2px solid var(--v-margin-rule);
    background:
      repeating-linear-gradient(to bottom, var(--v-ink-3) 0 1px, transparent 1px 100px) right 0 top 0 / 16px 100% no-repeat,
      repeating-linear-gradient(to bottom, var(--v-ink-3) 0 1px, transparent 1px 20px) right 0 top 0 / 7px 100% no-repeat,
      var(--v-paper);
  }
  .v-hole {
    position: absolute; left: 22px; width: 24px; height: 24px; border-radius: 50%;
    background: var(--v-hole); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .28);
  }
  .v-hole:nth-child(1) { top: 16%; } .v-hole:nth-child(2) { top: calc(50% - 12px); } .v-hole:nth-child(3) { top: 84%; }
  .v-margin__cursor {
    position: absolute; right: -2px; top: 0; width: 26px; height: 2px; background: var(--v-red);
    will-change: transform;
  }
  .v-margin__cursor::before {
    content: ''; position: absolute; left: -9px; top: -6px; border: 7px solid transparent; border-right-color: var(--v-red); border-left-width: 0;
  }
  .v-margin__cursor span {
    position: absolute; right: 3px; bottom: 5px; white-space: nowrap; background: var(--v-paper); padding: 1px 2px;
    font: 500 .6rem/1 var(--v-mono); letter-spacing: .04em; color: var(--v-red-ink);
  }
  .v-margin__cursor b { font-weight: 500; }
}

/* ---------- header strip (the pad's heading boxes) ---------- */

/* ---------- sheets ---------- */

.v-sheet { position: relative; padding: 0 var(--v-pad) clamp(64px, 9vw, 120px); border-bottom: 2px solid var(--v-line); }
.v-tb {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin: 0 calc(var(--v-pad) * -1) clamp(40px, 6vw, 80px);
  border-bottom: var(--v-rule) solid currentColor;
  font: 500 .8rem/1.2 var(--v-mono);
}
.v-tb span { padding: 9px var(--v-pad) 10px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.v-tb span:nth-child(2n) { border-right: 0; }
.v-tb span:nth-child(n+3) { border-bottom: 0; }
.v-tb i { display: block; font-style: normal; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; opacity: .68; margin-bottom: 2px; }
@media (min-width: 760px) {
  .v-tb { grid-template-columns: 1fr 2fr 1.4fr 1fr; }
  .v-tb span { border-bottom: 0; }
  .v-tb span:nth-child(2n) { border-right: 1px solid currentColor; }
  .v-tb span:last-child { border-right: 0; }
}
.v-sheet__head { display: grid; gap: 22px; margin-bottom: clamp(36px, 5vw, 64px); }
.v-sheet__head p { max-width: 46ch; font-size: 1.12rem; color: var(--v-ink-2); }
@media (min-width: 900px) {
  .v-sheet__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 56px; }
}

/* ---------- SHEET 1: hero ---------- */
.v-hero { padding-top: clamp(22px, 3.4vw, 40px); padding-bottom: clamp(40px, 5vw, 64px); display: grid; gap: 22px; }
.v-kicker { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 500 .7rem/1.4 var(--v-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--v-ink-2); margin-bottom: 16px; }
.v-kicker span:first-child { color: var(--v-red-ink); }
@media (max-width: 619px) { .v-kicker { margin-bottom: 12px; } .v-kicker span:nth-child(2) { display: none; } }
.v-hl { position: relative; white-space: nowrap; z-index: 0; }
.v-hl::before {
  content: ''; position: absolute; z-index: -1; left: -.08em; right: -.1em; top: .12em; bottom: .02em;
  background: var(--v-hi); transform: skewX(-8deg) scaleX(1); transform-origin: left;
}
.js .v-hl::before { animation: swipe .7s .45s cubic-bezier(.3, .7, .2, 1) both; }
@keyframes swipe { from { transform: skewX(-8deg) scaleX(0); } }
.v-lede { font-size: 1.2rem; line-height: 1.42; max-width: 34em; }
.v-lede--small { font-size: 1rem; color: var(--v-ink-2); margin-top: 14px; }
.v-hero__go { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 26px; }
.v-btn {
  display: inline-flex; align-items: center; gap: 14px; padding: 15px 20px 15px 22px;
  background: var(--v-ink); color: var(--v-paper); text-decoration: none;
  font: 500 .82rem var(--v-mono); letter-spacing: .08em; text-transform: uppercase;
  transition: background .2s;
}
.v-btn svg { width: 28px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.v-btn:hover { background: var(--v-red-ink); }
.v-btn:hover svg { transform: translateX(6px); }
.v-lnk { font-weight: 600; text-decoration: underline; text-decoration-color: var(--v-red); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.v-lnk:hover { background: var(--v-hi); }
.v-hero__hand { margin-top: 26px; transform: rotate(-3deg); transform-origin: left; display: none; }

.v-stage { border: 2px solid var(--v-line); background: var(--v-stage); min-width: 0; }
.v-stage__bar { display: flex; border-bottom: var(--v-rule) solid var(--v-line); min-height: 38px; }
.v-figtabs { display: flex; flex: 1; min-width: 0; }
.v-figtabs button, .v-stage__skip {
  flex: 1 1 0; min-width: 0; border: 0; border-right: 1px solid var(--v-line); background: none; cursor: pointer;
  padding: 8px 4px; font: 500 .72rem/1 var(--v-mono); display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .15s, color .15s;
}
.v-figtabs i { font-style: normal; color: var(--v-red-ink); }
.v-figtabs span { display: none; }
.v-figtabs button:hover { background: var(--v-hi); }
.v-figtabs button[aria-pressed="true"] { background: var(--v-ink); color: var(--v-paper); }
.v-figtabs button[aria-pressed="true"] i { color: var(--v-hi-text); }
.v-stage__skip { flex: 0 0 auto; padding: 8px 14px; border-right: 0; letter-spacing: .08em; text-transform: uppercase; color: var(--v-red-ink); }
.v-stage__skip:hover { background: var(--v-red); color: var(--v-paper); }
.v-stage__skip[hidden], .v-working__ans a[hidden] { display: none; }
@media (min-width: 620px) { .v-figtabs span { display: inline; } }

.v-stage__plot { position: relative; }
#fig { width: 100%; aspect-ratio: 3 / 2.05; max-height: min(calc(100svh - 318px), 470px); min-height: 230px; }
.v-stage__still { position: absolute; inset: 0; margin: auto; width: 46%; max-height: 80%; object-fit: contain; }
.js .v-stage__still { display: none; }

.v-working { display: grid; border-top: var(--v-rule) solid var(--v-line); }
.v-working > * { padding: 12px 14px 13px; min-width: 0; }
.v-working__id { border-bottom: 1px solid var(--v-line); }
.v-figno { font: 500 .66rem var(--v-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--v-red-ink); }
.v-working__name { font: 800 1.45rem/1.05 var(--v-display); font-stretch: 88%; letter-spacing: -.02em; margin-top: 3px; }
.v-working__pitch { font: italic 400 .98rem/1.25 var(--v-serif); margin-top: 4px; color: var(--v-ink-2); }
.v-working__steps { font: 400 .8rem/1.5 var(--v-mono); display: grid; align-content: center; gap: 1px; min-height: 5.9em; }
.v-working__steps li { transition: opacity .3s, transform .3s; }
.v-working__ans { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; border-top: 1px solid var(--v-line); }
.v-ans { font: 700 1.02rem/1.2 var(--v-text); }
.v-ans span { position: relative; z-index: 0; display: inline-block; padding: 3px 8px; border: 2px solid var(--v-line); }
.v-ans span::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--v-hi); transform-origin: left; transition: transform .45s .35s cubic-bezier(.3, .7, .2, 1); }
.v-working__ans a { font: 500 .72rem var(--v-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--v-red); text-decoration-thickness: 2px; text-underline-offset: 4px; white-space: nowrap; }
.v-working__ans a:hover { background: var(--v-hi); }
.v-working.swap .v-working__steps li { opacity: 0; transform: translateX(-8px); transition: none; }
.v-working.swap .v-ans span::before { transform: scaleX(0); transition: none; }
.v-working__steps li:nth-child(2) { transition-delay: .13s; }
.v-working__steps li:nth-child(3) { transition-delay: .26s; }

@media (min-width: 620px) {
  .v-working { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .v-working__id { border-bottom: 0; border-right: 1px solid var(--v-line); }
  .v-working__ans { grid-column: 1 / -1; }
}

@media (min-width: 1040px) {
  .v-hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 4vw, 60px); row-gap: 26px;
    min-height: calc(100svh - 56px);
    align-content: start;
  }
  .v-hero__head { grid-column: 1; grid-row: 1; }
  .v-hero__body { grid-column: 1; grid-row: 2; }
  .v-stage { grid-column: 2; grid-row: 1 / 3; align-self: start; }
  :where(.v-sheets) h1 { font-size: clamp(3.6rem, 6.3vw, 6rem); }
  .v-hero__hand { display: block; }
  .v-working { grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr) minmax(0, .9fr); min-height: 132px; }
  .v-working__steps { font-size: .76rem; }
  .v-working__ans { grid-column: auto; border-top: 0; border-left: 1px solid var(--v-line); flex-direction: column; align-items: flex-start; justify-content: center; }
}
@media (min-width: 1040px) and (max-height: 720px) { :where(.v-sheets) h1 { font-size: clamp(3.2rem, 5.2vw, 4.6rem); } }

/* ---------- SHEET 2: product schedule ---------- */
.v-sched { border-top: 2px solid var(--v-line); }
.v-sched__cols { display: none; }
.v-row {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 16px;
  padding: 26px 0 28px; border-bottom: var(--v-rule) solid var(--v-line);
}
.v-row::before { /* highlighter pass on hover */
  content: ''; position: absolute; inset: 0 calc(var(--v-pad) * -1); z-index: 0; background: var(--v-paper-lift);
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.3, .7, .2, 1);
}
.v-row:hover::before, .v-row:focus-within::before { transform: scaleX(1); }
.v-row > * { position: relative; z-index: 1; }
.v-row__no { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font: 500 .78rem var(--v-mono); color: var(--v-ink-2); }
.v-tick { width: 20px; height: 20px; fill: none; stroke: var(--v-red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.v-tick path { stroke-dasharray: 34; stroke-dashoffset: 0; }
.js .v-ink .v-tick path { stroke-dashoffset: 34; transition: stroke-dashoffset .5s .25s cubic-bezier(.5, 0, .2, 1); }
.js .v-ink.on .v-tick path { stroke-dashoffset: 0; }
.v-row__icon { width: 56px; height: 56px; border-radius: 13px; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.v-row:hover .v-row__icon { transform: rotate(-5deg) scale(1.06); }
.v-row h3 { font-size: clamp(1.7rem, 6.4vw, 2.5rem); }
.v-row h3 a { text-decoration: none; }
.v-row h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.v-row h3 a:hover { text-decoration: underline; text-decoration-color: var(--v-red); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.v-row .v-pitch { margin-top: 6px; }
.v-row__does, .v-row__price, .v-row__try { grid-column: 2; }
.v-row__does { font-size: .98rem; margin-top: 8px; }
.v-meta { display: grid; gap: 2px; margin-top: 8px; font: 400 .74rem/1.4 var(--v-mono); color: var(--v-ink-2); }
.v-meta span:first-child { color: var(--v-red-ink); text-transform: uppercase; letter-spacing: .07em; font-size: .66rem; }
.v-row__price { margin-top: 12px; }
.v-rm { font: 500 1.5rem/1 var(--v-mono); letter-spacing: -.03em; }
.v-unit { font: 500 .74rem/1.4 var(--v-mono); margin-top: 5px; }
.v-vs { font: italic 400 .92rem/1.3 var(--v-serif); color: var(--v-ink-2); margin-top: 6px; max-width: 30ch; }
.v-row__try { margin-top: 12px; font-size: .86rem; line-height: 1.4; color: var(--v-ink-2); }
.v-row__try a { position: relative; z-index: 2; display: inline-block; margin-bottom: 4px; color: var(--v-ink); font: 500 .76rem var(--v-mono); letter-spacing: .05em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--v-red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.v-row__try a:hover { background: var(--v-hi); }

@media (min-width: 1000px) {
  .v-sched__cols, .v-row { grid-template-columns: 62px 56px minmax(0, 1.55fr) minmax(0, 1.05fr) minmax(0, .95fr) minmax(0, .95fr); column-gap: 22px; }
  .v-sched__cols { display: grid; padding: 8px 0; border-bottom: var(--v-rule) solid var(--v-line); font: 500 .64rem var(--v-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--v-ink-2); }
  .v-row { align-items: start; row-gap: 0; }
  .v-row__no { grid-column: auto; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 8px; }
  .v-row__does, .v-row__price, .v-row__try { grid-column: auto; margin-top: 6px; }
}

/* ---------- SHEET 3: rules (the back of the pad) ---------- */
.v-sheet--pine {
  color: var(--v-inv-fg); background-color: var(--v-inv-bg);
  background-image:
    linear-gradient(var(--v-inv-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--v-inv-grid) 1px, transparent 1px),
    linear-gradient(var(--v-inv-grid2) 1px, transparent 1px),
    linear-gradient(90deg, var(--v-inv-grid2) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
.v-rules { display: grid; gap: 48px; }
.v-rules__list li { position: relative; padding: 26px 0 30px; border-top: var(--v-rule) solid var(--v-inv-rule); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 20px; }
.v-rules__list li:last-child { border-bottom: var(--v-rule) solid var(--v-inv-rule); }
.v-rules__n { grid-row: 1 / 3; font: 500 .8rem var(--v-mono); color: var(--v-inv-accent); padding-top: .5em; }
.v-rules__list h3 { font-size: clamp(2rem, 7.4vw, 3.5rem); font-weight: 800; font-stretch: 86%; letter-spacing: -.03em; }
.v-rules__list p { font-size: 1.08rem; max-width: 36ch; color: var(--v-inv-fg2); margin-top: 8px; }
.v-rules__list li::after { /* the rule gets underlined in red pencil once it is on screen */
  content: ''; position: absolute; left: 0; top: -2px; height: 3px; width: 100%; background: var(--v-inv-pen);
  transform: scaleX(1); transform-origin: left;
}
.js .v-rules__list li::after { transform: scaleX(0); transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.js .v-rules__list li.on::after { transform: scaleX(.22); }

.v-trace {
  margin-top: 40px; max-width: 560px; color: var(--v-ink); background: var(--v-paper);
  background-image: linear-gradient(var(--v-grid) 1px, transparent 1px), linear-gradient(90deg, var(--v-grid) 1px, transparent 1px);
  background-size: 20px 20px;
  padding: 18px 20px 20px; border-left: 6px solid var(--v-red);
  transform: rotate(-1.2deg);
  box-shadow: 10px 12px 0 rgba(0, 0, 0, .28);
}
.v-trace__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font: 500 .66rem var(--v-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--v-ink-2); border-bottom: 1px solid var(--v-line); padding-bottom: 8px; margin-bottom: 12px; }
.v-trace__line { font: 400 1.12rem/1.9 var(--v-serif); }
.v-trace__line--top { font-size: 1.55rem; line-height: 1.5; }
.v-trace .v-v { font-style: italic; }
.v-num {
  font: 600 1em var(--v-serif); cursor: pointer; padding: 0 .28em; border: 0; border-bottom: 2px dashed var(--v-red);
  background: linear-gradient(var(--v-hi), var(--v-hi)) left / 0% 100% no-repeat; transition: background-size .3s;
}
.v-num:hover, .v-num[aria-expanded="true"] { background-size: 100% 100%; }
.v-num[aria-expanded="true"] { border-bottom-style: solid; }
.v-trace__hint { margin-left: 10px; font-size: 1.05rem; white-space: nowrap; }
.v-trace__hint svg { width: 40px; height: 20px; }
.v-trace__more { margin: 6px 0 8px; padding-left: 14px; border-left: 2px solid var(--v-line); animation: unfold .35s cubic-bezier(.3, .7, .2, 1); }
@keyframes unfold { from { opacity: 0; transform: translateY(-6px); } }
.v-trace__src { font: 400 .74rem/1.5 var(--v-mono); color: var(--v-ink-2); margin-top: 2px; }
.v-trace__foot { font: 400 .74rem/1.5 var(--v-mono); color: var(--v-ink-2); margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--v-grid-major); }

@media (min-width: 1000px) {
  .v-rules { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 72px; align-items: start; }
  .v-rules__left { position: sticky; top: 96px; }
}

/* ---------- SHEET 4: services, drawn as a process line ---------- */
.v-pid { position: relative; padding-left: 62px; }
.v-pid::before { /* the pipe, with flow */
  content: ''; position: absolute; left: 22px; top: 0; bottom: 0; width: 4px;
  background: repeating-linear-gradient(to bottom, var(--v-ink) 0 14px, transparent 14px 22px);
  animation: flow 1.1s linear infinite;
}
@keyframes flow { to { background-position: 0 22px; } }
.v-svc { position: relative; padding: 0 0 44px; display: grid; gap: 12px; }
.v-svc:last-child { padding-bottom: 8px; }
.v-svc__tag {
  position: absolute; left: -62px; top: -2px; width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid var(--v-line); background: var(--v-paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), background .3s;
}
.v-svc__tag b { font: 500 .56rem var(--v-mono); letter-spacing: .04em; padding-bottom: 3px; border-bottom: 1.5px solid var(--v-line); width: 100%; text-align: center; }
.v-svc__tag i { font: 500 .66rem var(--v-mono); font-style: normal; padding-top: 3px; }
.js .v-svc.v-ink .v-svc__tag { transform: scale(.3); }
.js .v-svc.v-ink.on .v-svc__tag { transform: none; }
.v-svc:hover .v-svc__tag { background: var(--v-hi); }
.v-svc h3 { font-size: clamp(1.55rem, 5.6vw, 2.3rem); }
.v-svc h3 a { text-decoration: none; }
.v-svc h3 a:hover { text-decoration: underline; text-decoration-color: var(--v-red); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.v-svc .v-pitch { margin-top: 6px; }
.v-svc__main > p:not(.v-pitch):not(.v-hand) { margin-top: 10px; max-width: 58ch; color: var(--v-ink-2); }
.v-svc__hand { margin-top: 10px; transform: rotate(-2deg); transform-origin: left; }
.v-svc__price { font: 400 .78rem/1.5 var(--v-mono); color: var(--v-ink-2); }
.v-svc__price b { display: block; font: 500 1.25rem/1.2 var(--v-mono); letter-spacing: -.02em; color: var(--v-ink); }
.v-svc__price span { display: block; }
@media (min-width: 900px) {
  .v-pid { padding-left: 96px; }
  .v-pid::before { left: 34px; }
  .v-svc { grid-template-columns: minmax(0, 1fr) 250px; gap: 40px; padding-bottom: 56px; }
  .v-svc__tag { left: -96px; width: 72px; height: 72px; }
  .v-svc__tag b { font-size: .72rem; padding-bottom: 5px; }
  .v-svc__tag i { font-size: .8rem; padding-top: 5px; }
  .v-svc__price { padding-top: 6px; border-top: var(--v-rule) solid var(--v-line); align-self: start; }
}

/* ---------- SHEET 5: buying, drawn as a dimension line ---------- */
.v-dim { position: relative; display: grid; gap: 34px; padding-left: 34px; }
.v-dim::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--v-ink); transform-origin: top; }
.js .v-dim.v-ink::before { transform: scaleY(0); transition: transform 1.2s cubic-bezier(.4, 0, .2, 1); }
.js .v-dim.v-ink.on::before { transform: none; }
.v-dim li { position: relative; }
.v-dim__n {
  position: absolute; left: -34px; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--v-ink); color: var(--v-paper);
  font: 500 .68rem/20px var(--v-mono); text-align: center;
}
.v-dim h3 { font-size: 1.9rem; }
.v-dim__k { font: 500 .72rem var(--v-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--v-red-ink); margin: 6px 0 8px; }
.v-dim li > p:last-child { color: var(--v-ink-2); max-width: 44ch; }
@media (min-width: 900px) {
  .v-dim { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 46px 0 0; }
  .v-dim::before { left: 0; right: 0; top: 10px; bottom: auto; width: auto; height: 2px; transform-origin: left; }
  .js .v-dim.v-ink::before { transform: scaleX(0); }
  .v-dim::after { /* arrowhead at the far end of the dimension line */
    content: ''; position: absolute; right: -1px; top: 4px; border: 7px solid transparent; border-left: 13px solid var(--v-line); border-right: 0;
  }
  .v-dim li { padding: 0 26px 0 0; }
  .v-dim li + li { padding-left: 22px; border-left: 1px solid var(--v-grid-major); }
  .v-dim__n { left: -10px; top: -46px; }
  .v-dim li + li .v-dim__n { left: -11px; }
  .v-dim h3 { font-size: 2.1rem; }
}

.v-legend { display: grid; gap: 34px; margin-top: clamp(48px, 7vw, 88px); }
.v-legend__k { font: 500 .7rem var(--v-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--v-ink-2); margin-bottom: 14px; }
.v-stamps { display: flex; flex-wrap: wrap; gap: 10px 10px; }
.v-stamps li { font: 750 1.05rem/1 var(--v-display); font-stretch: 88%; padding: 10px 13px 9px; border: 2px solid var(--v-line); background: var(--v-paper); }
.v-stamps li:nth-child(3n+1) { transform: rotate(-1.4deg); }
.v-stamps li:nth-child(3n+2) { transform: rotate(.9deg); }
.v-stamps--plain li { font: 500 .8rem var(--v-mono); border: 0; border-bottom: 2px solid var(--v-red); background: none; padding: 4px 0 4px; margin-right: 12px; transform: none !important; }
@media (min-width: 900px) { .v-legend { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }

/* ---------- SHEET 6: FAQ ---------- */
.v-faq { display: grid; gap: 34px; }
.v-faq__list { border-top: 2px solid var(--v-line); }
.v-faq details { border-bottom: var(--v-rule) solid var(--v-line); }
.v-faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 42px minmax(0, 1fr) 22px; gap: 4px; align-items: baseline;
  padding: 18px 0; font: 700 1.2rem/1.2 var(--v-display); font-stretch: 92%;
}
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary i { font: 500 .72rem var(--v-mono); font-style: normal; color: var(--v-red-ink); }
.v-faq summary::after { content: '+'; font: 400 1.4rem/1 var(--v-mono); text-align: right; transition: transform .25s; }
.v-faq details[open] summary::after { transform: rotate(45deg); }
.v-faq summary:hover { background: var(--v-paper-lift); }
.v-faq details p { font: 400 1.08rem/1.55 var(--v-serif); padding: 0 22px 24px 46px; max-width: 70ch; }
.v-faq details[open] p { animation: unfold .35s cubic-bezier(.3, .7, .2, 1); }
.v-faq details a { text-decoration-color: var(--v-red); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.v-faq details a:hover { background: var(--v-hi); }
@media (min-width: 1000px) {
  .v-faq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; }
  .v-faq h2 { position: sticky; top: 96px; align-self: start; }
}

/* ---------- SHEET 7: contact ---------- */
.v-sheet--red { background: var(--v-cta-bg); color: var(--v-cta-fg); border-bottom-color: var(--v-ink); }
.v-sheet--red {
  background-image:
    linear-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .13) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
.v-contact { display: grid; gap: 30px; }
.v-contact h2 { font-size: clamp(3rem, 13vw, 8rem); }
.v-contact__body > p:first-child { font-size: 1.25rem; line-height: 1.4; max-width: 30em; }
.v-contact__mail {
  display: inline-block; margin: 26px 0 22px; font: 800 clamp(1.5rem, 7vw, 3rem)/1.1 var(--v-display); font-stretch: 86%; letter-spacing: -.03em;
  text-decoration: none; color: var(--v-chip-fg); background: var(--v-chip-bg); padding: .18em .34em .2em; transform: rotate(-1.5deg);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.v-contact__mail:hover { transform: rotate(0deg) scale(1.03); }
.v-contact__links { display: flex; flex-wrap: wrap; gap: 10px 26px; font: 500 .8rem var(--v-mono); letter-spacing: .05em; text-transform: uppercase; }
.v-contact__links a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.v-contact__links a:hover { background: var(--v-chip-fg); }
.v-contact__where { margin-top: 26px; font: 400 .8rem/1.55 var(--v-mono); max-width: 60ch; opacity: .92; }
@media (min-width: 1000px) {
  .v-contact { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; }
  .v-contact__mail { font-size: clamp(1.5rem, 3.1vw, 2.9rem); }
}

/* ---------- title block (footer) ---------- */

/* ---------- still version: reduced motion, or ?still ---------- */
@media (prefers-reduced-motion: reduce) {

  :where(.v-sheets) *, :where(.v-sheets) *::before, :where(.v-sheets) *::after { animation: none !important; transition: none !important; }
  .js .v-ink .v-tick path { stroke-dashoffset: 0; }
  .js .v-rules__list li::after { transform: scaleX(.22); }
  .js .v-dim.v-ink::before { transform: none; }
  .js .v-svc.v-ink .v-svc__tag { transform: none; }
}
html.reduce-motion { scroll-behavior: auto; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; }
.reduce-motion .v-ink .v-tick path { stroke-dashoffset: 0; }
.reduce-motion .v-hl, .reduce-motion .v-ans span { --v-wipe: 100%; }
.reduce-motion .v-rules__list li::after { transform: scaleX(.22); }
.reduce-motion .v-dim.v-ink::before { transform: none; }
.reduce-motion .v-svc.v-ink .v-svc__tag { transform: none; }

/* ---------- brand layer: what changes when the sheet is drawn on the Hathigen night ---------- */
:where(.v-sheets) h1, :where(.v-sheets) h2 { font-weight: 700; letter-spacing: -.045em; line-height: .94; }
:where(.v-sheets) h3 { font-weight: 700; letter-spacing: -.03em; }

.v-stage { border-color: #7f88b3; }
.v-tb, .v-tb span { border-color: var(--v-line); }
.v-sheet--red .v-tb, .v-sheet--red .v-tb span { border-color: currentColor; }

/* The violet highlighter carries night lettering. Where it wipes in, the letters change colour exactly at the
   wipe's edge (one custom property drives both layers), so the words are readable at every moment. */
@property --v-wipe { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
.v-hl, .v-ans span, .v-num {
  --v-wipe: 100%;
  color: var(--v-ink);
  background:
    linear-gradient(90deg, var(--v-on-hi) var(--v-wipe), var(--v-ink) var(--v-wipe)),
    linear-gradient(90deg, var(--v-hi) var(--v-wipe), transparent var(--v-wipe));
  -webkit-background-clip: text, padding-box; background-clip: text, padding-box;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .v-hl, .v-ans span, .v-num { -webkit-text-fill-color: currentColor; background: none; }
}
.v-hl::before, .v-ans span::before { content: none; }
.v-hl { display: inline-block; line-height: 1; padding: .03em .13em .1em; margin: -.03em -.13em -.1em; }
.js .v-hl { animation: wipe .75s .45s cubic-bezier(.3, .7, .2, 1) both; }
@keyframes wipe { from { --v-wipe: 0%; } to { --v-wipe: 100%; } }
.v-ans span { border-color: var(--v-hi); transition: --v-wipe .5s .3s cubic-bezier(.3, .7, .2, 1); }
.v-working.swap .v-ans span { --v-wipe: 0%; transition: none; }
.v-num { --v-wipe: 0%; border-bottom-color: var(--v-chk); transition: --v-wipe .3s; }
.v-num:hover, .v-num[aria-expanded="true"] { --v-wipe: 100%; background-size: auto; }
.v-figtabs button:hover, .v-figtabs button:hover i, .v-lnk:hover, .v-row__try a:hover, .v-working__ans a:hover, .v-faq details a:hover { color: var(--v-on-hi); }
.v-svc__tag { transition: transform .5s cubic-bezier(.2, .7, .2, 1), background .2s, color .2s; }
.v-svc:hover .v-svc__tag { color: var(--v-on-hi); }
.v-svc:hover .v-svc__tag b { border-color: var(--v-on-hi); }
.v-btn:hover { background: var(--v-red); color: var(--v-paper); }

/* the checking pen is violet */
.v-tick { stroke: var(--v-chk); }
.v-hand { font: italic 400 .8rem/1.3 var(--v-mono); color: #a493ff; letter-spacing: 0; }
.v-hand::before { content: '// '; opacity: .7; }
.v-hand svg { stroke-width: 1.6; }
.v-trace__hint::before { content: none; }
.v-dim__k { color: #a493ff; }
.v-faq summary i, .v-figno { color: var(--v-red-ink); }

/* no binder holes on a blueprint; the margin keeps its scale */
.v-hole { display: none; }

/* product accents, used once per row */
.v-row::after {
  content: ''; position: absolute; left: calc(var(--v-pad) * -1); top: -1px; bottom: -1px; width: 4px; z-index: 1;
  background: var(--v-acc, var(--v-red)); transform: scaleY(0); transform-origin: top; transition: transform .35s cubic-bezier(.3, .7, .2, 1);
}
.v-row:hover::after, .v-row:focus-within::after { transform: scaleY(1); }
.v-row .v-meta span:first-child { color: var(--v-acc, var(--v-red-ink)); }
.v-row__icon { box-shadow: 0 0 0 1px rgba(163, 171, 209, .22); }

/* rules: a lifted panel */
.v-trace { background-color: var(--v-deep); border-left-color: var(--v-chk); box-shadow: 10px 12px 0 rgba(0, 0, 0, .35); }
.v-trace__head { border-bottom-color: var(--v-line); }
.v-trace__more { border-left-color: var(--v-red); }

/* the process line flows in cyan; the dimension line is cyan too */
.v-pid::before { background: repeating-linear-gradient(to bottom, var(--v-red) 0 14px, transparent 14px 22px); }
.v-svc__tag { border-color: var(--v-red); }
.v-svc__tag b { border-bottom-color: var(--v-red); }
.v-dim::before { background: var(--v-red); }
@media (min-width: 900px) { .v-dim::after { border-left-color: var(--v-red); } }
.v-stamps li { border-color: #7f88b3; }

/* contact: one full sheet of Ha violet, with Hi cyan for the address */
.v-sheet--red { border-bottom-color: var(--v-line); }
.v-sheet--red :focus-visible { outline-color: var(--v-paper); }
.v-contact__links a:hover { background: var(--v-paper); color: var(--v-ink); }
.v-contact__where { opacity: 1; }

/* the brand line, above the title block */
.v-helix { margin-left: var(--v-margin); padding: 26px var(--v-pad) 22px; border-bottom: 1px solid var(--v-line); background: var(--v-deep); }
.v-helix img { width: 100%; height: clamp(18px, 3vw, 34px); object-fit: cover; }

/* Space Grotesk runs wider than the first version's display face: sizes that keep each line whole */
.v-contact h2 { font-size: clamp(2.7rem, 11.5vw, 5.6rem); }
.v-rules__list h3 { font-size: clamp(1.7rem, 6.4vw, 2.5rem); letter-spacing: -.035em; }

.v-row h3 { font-size: clamp(1.6rem, 6vw, 2.3rem); }

/* ---------- round 3: the same sheet, lit like hathigen.com ---------- */
/* Ground: deep navy that rises toward the top of the sheet, not flat near-black. */

:where(.v-sheets) ::selection { background: rgba(124, 92, 255, .45); }

/* Light on the drawing table: three large, soft, slow pools (violet, cyan, blue). The sheet scrolls under them. */
.v-lamp { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.v-lamp i { position: absolute; border-radius: 50%; will-change: transform; }
.v-lamp i:nth-child(1) {
  width: 84vmax; height: 84vmax; left: -26vmax; top: -34vmax;
  background: radial-gradient(closest-side, rgba(124, 92, 255, .46), rgba(124, 92, 255, .16) 55%, transparent);
  animation: drift1 44s ease-in-out infinite alternate;
}
.v-lamp i:nth-child(2) {
  width: 70vmax; height: 70vmax; right: -24vmax; top: -16vmax;
  background: radial-gradient(closest-side, rgba(34, 211, 238, .27), rgba(34, 211, 238, .09) 55%, transparent);
  animation: drift2 57s ease-in-out infinite alternate;
}
.v-lamp i:nth-child(3) {
  width: 76vmax; height: 76vmax; left: 18vw; bottom: -46vmax;
  background: radial-gradient(closest-side, rgba(91, 140, 255, .32), rgba(91, 140, 255, .1) 55%, transparent);
  animation: drift3 51s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate(8vw, 6vh) scale(1.1); } }
@keyframes drift2 { to { transform: translate(-7vw, 9vh) scale(1.08); } }
@keyframes drift3 { to { transform: translate(-9vw, -7vh) scale(1.12); } }
.v-lamp::after { /* fine grain, as on the live site */
  content: ''; position: absolute; inset: 0; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* rails and strips let the light through */
.v-margin { background-color: rgba(11, 17, 48, .4); }

.v-helix { background: rgba(8, 13, 36, .7); }

/* lifted panels with a fine light border */
.v-stage { border: 1.5px solid rgba(190, 200, 255, .5); box-shadow: 0 28px 70px rgba(4, 7, 24, .5); }
.v-stage__bar, .v-working { border-color: rgba(190, 200, 255, .3); }
.v-sched { background: rgba(18, 26, 62, .5); margin: 0 -18px; padding: 0 18px; border: 1px solid var(--v-line); border-top: 2px solid rgba(190, 200, 255, .5); }
.v-row::before { inset: 0 -18px; }
.v-row::after { left: -18px; }
.v-row:last-child { border-bottom: 0; }
.v-faq__list { border-top: 0; display: grid; gap: 8px; }
.v-faq details { background: rgba(18, 26, 62, .55); border: 1px solid var(--v-line); padding: 0 16px; }
.v-faq details[open] { background: rgba(22, 31, 74, .8); border-color: rgba(190, 200, 255, .45); }
.v-faq summary:hover { background: none; }
.v-faq details:hover { border-color: rgba(190, 200, 255, .45); }
.v-stamps li { background: rgba(22, 31, 74, .8); border: 1.5px solid rgba(190, 200, 255, .5); }
.v-trace { background-color: #18225a; border: 1px solid rgba(190, 200, 255, .35); border-left: 6px solid var(--v-chk); box-shadow: 12px 14px 0 rgba(4, 7, 24, .4); }
.v-fine { color: var(--v-ink-2); }

/* light behind the key sections */
.v-hero::before, .v-sheet--pine::before, #buying::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.v-hero::before { background: radial-gradient(52% 60% at 74% 44%, rgba(91, 140, 255, .2), transparent 72%); }
.v-sheet--pine { isolation: isolate; }
.v-sheet--pine::before {
  background:
    radial-gradient(46% 70% at 8% 0%, rgba(131, 102, 255, .34), transparent 70%),
    radial-gradient(40% 60% at 100% 100%, rgba(34, 211, 238, .2), transparent 70%);
}
#buying { isolation: isolate; }
#buying::before { background: radial-gradient(60% 55% at 50% 30%, rgba(91, 140, 255, .16), transparent 72%); }

/* The logo's fade, used twice: the headline highlight here, and the plotted line in the figure. */
/* The highlight stretches in from the left as one piece of the fade; the letters turn at its edge. */
.v-hl {
  background:
    linear-gradient(90deg, var(--v-on-hi) var(--v-wipe), var(--v-ink) var(--v-wipe)),
    var(--v-fade);
  background-size: auto, var(--v-wipe) 100%;
  background-repeat: repeat, no-repeat;
  -webkit-background-clip: text, padding-box; background-clip: text, padding-box;
}
.v-ans { font-size: .96rem; }

/* product accents, a little more present */
.v-figtabs i { color: var(--v-acc, var(--v-red-ink)); }
.v-figtabs button { position: relative; }
.v-figtabs button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--v-acc, var(--v-red)); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.3, .7, .2, 1); }
.v-figtabs button[aria-pressed="true"]::after { transform: scaleX(1); }
.v-figno { color: var(--v-acc, var(--v-red-ink)); }
.v-working__id { box-shadow: inset 4px 0 0 var(--v-acc, transparent); transition: box-shadow .3s; }
.v-row::after { transform: scaleY(1); width: 3px; transition: width .25s cubic-bezier(.3, .7, .2, 1); }
.v-row:hover::after, .v-row:focus-within::after { width: 7px; }
.v-row::before { background: rgba(190, 200, 255, .07); }
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .v-row::before { background: color-mix(in srgb, var(--v-acc) 13%, transparent); }
  .v-row__icon { box-shadow: 0 0 0 1px color-mix(in srgb, var(--v-acc) 60%, transparent), 0 10px 26px color-mix(in srgb, var(--v-acc) 22%, transparent); }
  .v-svc__tag { background: color-mix(in srgb, var(--v-acc) 16%, #0f1638); }
}
.v-row__no { color: var(--v-acc, var(--v-ink-2)); }
.v-row .v-tick { stroke: var(--v-acc, var(--v-chk)); }
.v-svc__tag { border-color: var(--v-acc, var(--v-red)); color: var(--v-acc, var(--v-ink)); }
.v-svc__tag b { border-bottom-color: var(--v-acc, var(--v-red)); }
.v-svc:hover .v-svc__tag { background: var(--v-acc, var(--v-hi)); color: var(--v-on-hi); }
.v-svc__price b { color: var(--v-ink); }
.v-svc__price { border-top-color: var(--v-acc, var(--v-line)) !important; }
.v-dim li:nth-child(1) .v-dim__n { background: #8366ff; }
.v-dim li:nth-child(2) .v-dim__n { background: #5b8cff; }
.v-dim li:nth-child(3) .v-dim__n { background: #22d3ee; }
.v-dim li:nth-child(4) .v-dim__n { background: #34d399; }
.v-dim__n { color: #070b1a; font-weight: 600; }
.v-dim__k { color: #b9acff; }
.v-hand { color: #b9acff; }

.reduce-motion .v-lamp i { animation: none; }
@media (prefers-reduced-motion: reduce) { .v-lamp i { animation: none; } }

/* =====================================================================================================
   PART 2: THE SAME SHEET OVER THE WHOLE SITE
   main.css still lays out the inner pages (product, service, compare, stories, about, contact, 404).
   This part re-dresses them in the sheet system: deep navy ground with light, the grid, square panels
   with fine light borders, the two pens (cyan plots, violet checks), the strip header and the title
   block footer. Nothing here hides content: reveal effects only draw lines.
   ===================================================================================================== */

/* ---------- tokens main.css reads ---------- */
:root {
  --bg-0: #080d24; --bg-1: #0b1130; --bg-2: #0f1638;
  --glass: rgba(18, 26, 62, .6); --glass-2: rgba(26, 36, 84, .82);
  --line: rgba(190, 200, 255, .2); --line-2: rgba(190, 200, 255, .45);
  --text: #eef1ff; --muted: #c3c9e8; --dim: #9aa3cf;
  --violet: #8366ff;
  --r-lg: 0px; --r-md: 0px; --r-sm: 0px; --blur: 0px;
}
html { scroll-padding-top: 76px; }

/* ---------- ground: navy that rises, the grid, the light ---------- */
body {
  padding-left: var(--v-margin);
  background-color: var(--v-paper);
  background-image:
    linear-gradient(var(--v-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--v-grid-major) 1px, transparent 1px),
    linear-gradient(var(--v-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--v-grid) 1px, transparent 1px),
    linear-gradient(180deg, #151d48 0, #0f1638 900px, #0b1130 2100px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px, 100% 2100px;
  background-position: var(--v-margin) 0, var(--v-margin) 0, var(--v-margin) 0, var(--v-margin) 0, 0 0;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat;
  background-attachment: scroll;
}
::selection { background: rgba(131, 102, 255, .45); }
.v-lamp::after { content: none; }            /* the grain already comes from body::before */
.orb, .rail { display: none !important; }    /* replaced by the light and the margin scale */
html.tx-in::after { background: #0b1130; }
.v-margin { z-index: 61; }

/* full-width bands and page headers run from the margin scale to the right edge of the window, no further */
.band::before { inset: 0 calc(50% - 50vw + var(--v-margin) / 2); }
.band-dark::after, .hero::before, .p-hero::before, .about-hero::before, .prod-band::after, .svc-band::after {
  left: calc(50% - 50vw + var(--v-margin) / 2); right: calc(50% - 50vw + var(--v-margin) / 2);
}

/* the old drafting-grid headers and bands: the page has its own grid now, so they only carry light */
.hero::before, .p-hero::before, .about-hero::before, .page-hero::before {
  background-image: none; -webkit-mask-image: none; mask-image: none;
  background: radial-gradient(52% 62% at 68% 42%, rgba(91, 140, 255, .2), transparent 72%);
}
.band-grid::before { background: rgba(18, 26, 62, .38); background-image: none; -webkit-mask-image: none; mask-image: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-dark::before { background: rgba(8, 13, 36, .5); }
.band-glow::before { background: radial-gradient(60% 70% at 50% 55%, rgba(131, 102, 255, .22), transparent 70%), radial-gradient(40% 50% at 82% 40%, rgba(34, 211, 238, .12), transparent 70%); }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--display); }
h1, .p-hero h1 { font-size: clamp(42px, 5.6vw, 78px); line-height: .98; font-weight: 700; letter-spacing: -.045em; }
h2 { font-size: clamp(32px, 3.8vw, 54px); line-height: 1.03; font-weight: 700; letter-spacing: -.04em; }
h3 { font-weight: 700; letter-spacing: -.025em; }
.lead, .muted { color: var(--muted); }
.p-hero .pitch { font: italic 400 clamp(1.15rem, 1.9vw, 1.45rem)/1.35 var(--v-serif); }

/* The logo's fade once per page, on the page heading. Section headings get the plotting pen: a cyan rule. */
.p-hero h1 .grad, .page-hero h1 .grad, .about-hero h1 .grad, .hero h1 .grad {
  background: var(--v-fade); -webkit-background-clip: border-box; background-clip: border-box;
  color: #070b1a; -webkit-text-fill-color: #070b1a;
  padding: 0 .14em .05em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.section h2 .grad, .section-head .grad, h2 .grad {
  background: linear-gradient(var(--cyan), var(--cyan)) 0 96% / 100% 3px no-repeat;
  -webkit-background-clip: border-box; background-clip: border-box; color: inherit; -webkit-text-fill-color: currentColor; padding-bottom: .04em;
}
.nf .code.grad { background: var(--v-fade); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ---------- nothing is ever hidden waiting for a script ---------- */
.js .reveal, .js .reveal .checks li, .js .step, html.hm-instant .reveal { opacity: 1 !important; transform: none !important; }
/* what animates instead: a violet check rule draws over each section heading as it comes into view */
.section-head { position: relative; padding-top: 20px; }
.section-head::after { content: ''; position: absolute; left: 0; top: 0; width: 72px; height: 3px; background: var(--v-chk); transform-origin: left; }
.section-head.center::after { left: calc(50% - 36px); transform-origin: center; }
.js .section-head.reveal::after { transform: scaleX(0); transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.js .section-head.reveal.in::after { transform: none; }

/* ---------- panels: square, lifted navy, fine light border ---------- */
.glass {
  background: var(--glass); border: 1px solid var(--line); border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
/* Panels used to blur what is behind them, which also made each one the frame for anything positioned inside it
   (the screen-reader labels in the compare tables, for one). Without the blur they need to be a frame by name,
   or those labels escape the table's own scroller and widen the page on a phone. */
:where(.glass) { position: relative; }
.glow-border::after { display: none !important; }
.price-vs { border-radius: 0; }
@media (hover: hover) {
  .glass:not(.nav):not(.menu):not(.mobile-menu):hover { background: var(--glass-2); }
}
.tile, .feature, .step, .more a, .use, .svc, .story, .price-card, .price-try { background: var(--glass); border-radius: 0; }
.prod, .story-why, .stage, .window, .ico, .chip, .input, .dl-side .sha, .trial-dialog, .dlg-x, .dlg-os, .trial-badge, .motion-toggle { border-radius: 0; }
.story-why { background: var(--glass); border-left-color: var(--v-chk); }
.feature:hover, .more a:hover, .tile:hover { border-color: var(--line-2); }
.ico { background: rgba(190, 200, 255, .06); }
.chip { font-family: var(--mono); font-size: .8rem; }
.compare td.us, .compare th.us { background: rgba(131, 102, 255, .14); }
.price b, .from-line b { font-family: var(--mono); letter-spacing: -.03em; }
.price b { font-weight: 500; }
.demo-note { color: var(--muted); }

/* ---------- buttons and links ---------- */
.btn {
  border-radius: 0; min-height: 46px; padding: 14px 20px; -webkit-backdrop-filter: none; backdrop-filter: none;
  font: 500 .78rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  white-space: normal; text-align: center; max-width: 100%;   /* long labels wrap instead of widening the page */
}
.btn-primary, .btn-primary:hover { background: var(--text); color: #0b1130; box-shadow: none; border-color: transparent; transform: none; }
.btn-primary:hover { background: var(--cyan); }
.btn-ghost { background: transparent; border: 1.5px solid var(--line-2); color: var(--text); }
.btn-ghost:hover { background: rgba(190, 200, 255, .08); border-color: var(--cyan); }
.btn-sm { min-height: 40px; padding: 11px 16px; font-size: .72rem; }
.link-arrow { text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: 5px; }
:focus-visible { border-radius: 0; }

/* ---------- header: the sheet's heading strip ---------- */
.nav, .nav.scrolled {
  position: fixed; top: 0; left: var(--v-margin); right: 0; transform: none; width: auto; height: 56px;
  padding: 0; gap: 0; border: 0; border-bottom: 1.5px solid var(--line-2); border-radius: 0;
  background: rgba(13, 19, 52, .96); display: flex; align-items: stretch; z-index: 60;
}
.nav .logo { padding: 0 clamp(16px, 2.6vw, 44px); border-right: 1.5px solid var(--line); }
.nav .logo-word { height: 27px; }
.nav-links { margin-left: 0; gap: 0; flex: 1; align-items: stretch; }
.nav-links > li { display: flex; border-right: 1px solid var(--line); }
.nav-links > li > a, .nav-links > li > button {
  position: relative; height: 100%; padding: 0 clamp(12px, 1.5vw, 22px); border-radius: 0;
  color: var(--text); font: 500 .93rem/1 var(--font);
}
.nav-links > li > a:hover, .nav-links > li > button:hover, .nav-links > li > a[aria-current="page"] { background: none; color: var(--text); }
.nav-links > li > a::after, .nav-links > li > button::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--cyan);
  transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.nav-links > li > a:hover::after, .nav-links > li > button:hover::after, .nav-links > li > a[aria-current="page"]::after,
.nav-links > li > button[aria-current="page"]::after, .has-menu.open > button::after { transform: scaleX(1); }
.nav-cell { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 18px; border-left: 1.5px solid var(--line); text-decoration: none; white-space: nowrap; }
.nav-cell i { font: 500 .6rem/1.2 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.nav-cell b { font: 500 .8rem/1.2 var(--mono); color: var(--text); }
a.nav-cell:hover b { color: var(--cyan); }
.nav .nav-cta { margin: 0 10px 0 12px; align-self: center; }
.burger { width: 58px; height: auto; margin-left: auto; border: 0; border-left: 1.5px solid var(--line); border-radius: 0; background: none; }
.menu {
  top: 100%; left: -1px; transform: translateY(6px); width: 600px; padding: 8px; border-radius: 0;
  background: #0f1640; border: 1.5px solid var(--line-2);
}
.has-menu:hover .menu, .has-menu:focus-within .menu, .has-menu.open .menu { transform: none; }
.menu a { border-radius: 0; }
.menu a:hover { background: rgba(190, 200, 255, .08); }
@media (max-width: 1080px) {
  .nav-cell { display: none; }
  .nav-cell.nav-sheet { display: flex; margin-left: auto; border-left: 1.5px solid var(--line); padding: 0 14px; }
  .nav-sheet + .burger, .nav-sheet ~ .burger { margin-left: 0; }
  .mobile-menu {
    inset: 56px 0 auto; padding: 6px 20px 18px; border: 0; border-bottom: 1.5px solid var(--line-2); border-radius: 0;
    background: #0d1334; max-height: calc(100dvh - 56px);
  }
  .mobile-menu a { padding: 13px 0; border-radius: 0; border-bottom: 1px solid var(--line); font: 600 1.15rem/1.2 var(--display); }
  .mobile-menu a:hover { background: none; color: var(--cyan); }
  .mobile-menu .sub { padding: 9px 0 9px 18px; border-bottom: 0; font: 400 .95rem/1.3 var(--font); }
  .mobile-menu .btn { border-bottom: 0; padding: 14px 20px; font: 500 .78rem/1 var(--mono); }
}

/* ---------- the closing sheet on every page: one sheet of Ha violet, with the form on night ---------- */
#contact { position: relative; margin: 0; padding: clamp(56px, 8vw, 110px) 0; background: var(--v-cta-bg); color: #070b1a; border-top: 1.5px solid var(--line-2); }
#contact::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .13) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
#contact .wrap { position: relative; }
#contact .cta { padding: 0; background: none; border: 0; overflow: visible; }
#contact .cta::before { content: none; }
#contact .eyebrow { color: #070b1a; }
#contact .eyebrow::before { color: #070b1a; background-image: linear-gradient(90deg, #070b1a, transparent); }
#contact h2 { font-size: clamp(2.5rem, 6vw, 4.9rem); line-height: .95; color: #070b1a; margin: 14px 0 18px; }
#contact h2 .grad { background: none; color: inherit; -webkit-text-fill-color: currentColor; box-shadow: inset 0 -.1em 0 #22d3ee; }
#contact .lead { color: #0f1638; font-weight: 500; }
#contact .contact-points li, #contact .contact-points a { color: #070b1a; font-weight: 500; }
#contact .contact-points svg { color: #070b1a; }
#contact .form { padding: clamp(18px, 3vw, 30px); background: #0b1130; color: var(--text); border: 1.5px solid #070b1a; box-shadow: 12px 14px 0 rgba(7, 11, 26, .32); }
#contact :focus-visible { outline-color: #070b1a; }
#contact .form :focus-visible { outline-color: var(--cyan); }
.input { background: #131b45; border: 1px solid var(--line-2); }
.input:focus { background: #18225a; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(34, 211, 238, .3); }
.input::placeholder { color: #8089b5; }
.field label { font-weight: 500; color: var(--dim); }
.trial-dialog { background: #0f1640; border: 1.5px solid var(--line-2); }
.dlg-x { background: none; }

/* ---------- questions ---------- */
.faq { display: grid; gap: 8px; }
.faq details { padding: 0 18px; background: rgba(18, 26, 62, .55); border: 1px solid var(--line); }
.faq details[open] { background: rgba(22, 31, 74, .82); border-color: var(--line-2); }
.faq details:hover { border-color: var(--line-2); }
.faq summary { padding: 20px 0; font-family: var(--display); font-weight: 600; }
.faq .ans { padding: 0 0 22px; color: var(--muted); }

/* ---------- footer: the drawing's title block ---------- */
.v-helix { margin: 0; }
.tblock { display: grid; grid-template-columns: 1fr 1fr; background: rgba(13, 19, 52, .88); border-top: 1.5px solid var(--line-2); font-size: .92rem; }
.tblock__cell { min-width: 0; padding: 22px clamp(16px, 2.6vw, 44px) 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tblock__cell:nth-child(2n+1) { border-right: 0; }
.tblock__cell > i { display: block; margin-bottom: 9px; font: 500 .62rem var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.tblock__cell b { display: block; margin-bottom: 13px; font: 500 .82rem/1.35 var(--mono); }
.tblock__cell a:not(.logo) { display: block; color: var(--muted); text-decoration: none; line-height: 1.75; }
.tblock__cell a:not(.logo):hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tblock__logo { grid-column: 1 / -1; border-right: 0; }
.tblock__logo .logo-word { height: 32px; }
.tblock__logo span { display: block; margin-top: 12px; font: 500 .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.tblock__logo p { margin-top: 10px; max-width: 40ch; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.tblock__base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 14px clamp(16px, 2.6vw, 44px); color: var(--dim); font: 400 .76rem var(--mono); }
@media (min-width: 1000px) {
  .tblock { grid-template-columns: 1.7fr 1.05fr 1.25fr 1fr .9fr; }
  .tblock__cell, .tblock__cell:nth-child(2n+1) { border-right: 1px solid var(--line); border-bottom: 0; }
  .tblock__logo { grid-column: auto; border-right: 1px solid var(--line); }
  .tblock__cell:nth-child(5) { border-right: 0; }
  .tblock__base { border-top: 1px solid var(--line); }
}

/* ---------- the home sheet inside the real site ---------- */
.v-hero { padding-top: calc(56px + clamp(22px, 3.4vw, 40px)); }
@media (min-width: 1040px) { .v-hero { min-height: min(100svh, 900px); } }
.v-sheet { scroll-margin-top: 56px; }
.v-more { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: clamp(36px, 5vw, 56px); }
.v-more a { font: 500 .8rem var(--mono); letter-spacing: .05em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--v-red); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.v-more a:hover { background: var(--v-hi); color: var(--v-on-hi); }
.v-faq__list details .v-ans { font: 400 1.08rem/1.55 var(--v-serif); padding: 0 22px 24px 46px; max-width: 70ch; }
.v-faq__list details[open] .v-ans { animation: v-unfold .35s cubic-bezier(.3, .7, .2, 1); }
@keyframes v-unfold { from { opacity: 0; transform: translateY(-6px); } }

/* the page transition copies the light, but holds it still while the two halves move */
.hm-copy .v-lamp { position: absolute; }
.hm-copy .v-lamp i { animation: none; }


/* ---------- guided run on a product demo ("Show me"; see HD.tour in js/demos/core.js) ---------- */
.tour { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: rgba(11, 17, 48, .92); }
.tour-go, .tour-stop, .tour-full {
  display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 9px 14px; border: 1.5px solid transparent; border-radius: 0; cursor: pointer;
  font: 500 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.tour-go { background: var(--text); color: #0b1130; }
.tour-go::before { content: ''; border: 5px solid transparent; border-left: 8px solid currentColor; border-right: 0; }
.tour-go:hover { background: var(--cyan); }
.tour-go small { font-size: .9em; opacity: .65; }
.tour-stop, .tour-full { background: none; border-color: var(--line-2); color: var(--text); }
.tour-stop:hover, .tour-full:hover { border-color: var(--cyan); }
.tour [hidden] { display: none; }
.tour-say { flex: 1 1 240px; margin: 0; min-height: 2.7em; display: flex; align-items: center; font: 500 .98rem/1.35 var(--font); color: var(--text); }
.is-touring .tour-say { font-family: var(--display); font-weight: 600; font-size: 1.08rem; letter-spacing: -.01em; }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 20px; height: 3px; background: var(--line-2); transition: background .3s; }
.tour-dots i.on { background: var(--cyan); }
/* the element the run is about to press */
.tour-hit { outline: 3px solid var(--cyan) !important; outline-offset: 3px; box-shadow: 0 0 0 9px rgba(34, 211, 238, .18); }

/* On a phone the demo sits in a short frame while the run plays; touching it, or the button, opens it in full. */
.demo.is-short .demo-body { max-height: 500px; overflow: hidden; }
.demo.is-short::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; pointer-events: none; background: linear-gradient(180deg, transparent, #0b1130); }
.demo.is-short.is-touring .sgx-top, .demo.is-short.is-touring .sgx-foot, .demo.is-short.is-touring .sgx-body > .d-row,
.demo.is-short.is-touring .sgx-opt small { display: none; }
.demo.is-short.is-touring .sgx-opts { grid-template-columns: 1fr 1fr; }
.demo.is-short .tour-dots { order: 5; width: 100%; }
.demo.is-short .tour-dots i { flex: 1; }

/* while a run plays, the demo's own messages appear near the top, under the caption */
.demo.is-touring .d-toast { bottom: auto; top: 118px; }
.demo.is-short.is-touring .d-toast { top: auto; bottom: 14px; left: 12px; right: 12px; } /* on a phone: at the foot of the short frame */

/* "Why it is free" / "Why it costs so little" (product hero or pricing head) and the free-app licence terms */
.why-block { margin: 18px 0 4px; padding: 12px 16px; max-width: 62ch; border-left: 3px solid var(--c, var(--cyan)); background: rgba(255,255,255,.035); border-radius: 0 10px 10px 0; text-align: left; }
.why-block b { display: block; font: 600 .78rem/1.4 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--c, var(--cyan)); margin-bottom: 4px; }
.why-block p { margin: 0; color: var(--muted); }
.section-head .why-block { margin-left: auto; margin-right: auto; }
.free-terms { margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; max-width: 70ch; }
.free-terms h3 { margin: 0 0 6px; font-size: .95rem; }
.free-terms p { margin: 0; color: var(--dim); font-size: .86rem; }