/* ============================================================
   VOXEL — landing page
   ------------------------------------------------------------
   One idea drives every choice here: things are made layer by
   layer, bottom-up. The boot counts layers. The headline wipes
   upward. The work rail advances like a bed traversing. Nothing
   fades in from nowhere.

   Loads after main.css and only adds; the nav, footer, spec
   table, theme and type system all come from there.
   ============================================================ */

.lp { --lp-edge: clamp(1.25rem, 3.5vw, 3.5rem); }

/* ============================================================
   BOOT
   A real count of the 190 layers the mark is sliced into, not a
   decorative spinner. Removes itself and is inert to input.
   ============================================================ */
.boot {
  position: fixed; inset: 0; z-index: 999;
  background: var(--bg);
  display: grid; align-content: end; gap: 1.1rem;
  padding: var(--lp-edge);
  transition: opacity .5s var(--ease), visibility .5s;
}
.boot.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot__grid {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
}
.boot__id { color: var(--text); }
.boot__count b { color: var(--text); font-variant-numeric: tabular-nums; }
.boot__bar { height: 2px; background: var(--line-dark); overflow: hidden; }
.boot__bar i {
  display: block; height: 100%; width: 0%;
  background: var(--blue);
  transform-origin: left;
}

/* ============================================================
   CURSOR
   Fine pointers only. Never replaces a real affordance — the
   underlying elements keep their own hover states.
   ============================================================ */
.cursor { display: none; }
@media (pointer: fine) {
  .cursor {
    display: block; position: fixed; inset-block-start: 0; inset-inline-start: 0;
    z-index: 900; pointer-events: none;
    mix-blend-mode: difference;
  }
  .cursor__dot, .cursor__ring {
    position: absolute; border-radius: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
  }
  .cursor__dot { width: 6px; height: 6px; background: #fff; }
  .cursor__ring {
    width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.55);
    transition: width .22s var(--ease), height .22s var(--ease), opacity .22s;
  }
  .cursor.is-hot .cursor__ring { width: 62px; height: 62px; }
  .cursor.is-hot .cursor__dot { opacity: 0; }
}

/* ============================================================
   HERO
   Full bleed, type as the image. No boxed stage, no centred
   column — the words run edge to edge.
   ============================================================ */
.hero2 {
  position: relative;
  min-height: 100svh;
  padding: clamp(6rem, 12vh, 8rem) var(--lp-edge) var(--lp-edge);
  /* Flex column with auto margins on the type, not a 3-row grid: with
     `auto 1fr auto` the free space landed on the auto foot row instead
     of the fr, stretching the button to twice its height. Auto margins
     centre the headline and leave every other box at its own size. */
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4vh, 3rem);
  overflow: hidden;
}
.hero2__meta {
  position: absolute; inset-block-start: clamp(5rem, 10vh, 6.5rem);
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
  margin: 0;
}
.hero2__meta--tl { inset-inline-start: var(--lp-edge); }
.hero2__meta--tr { inset-inline-end: var(--lp-edge); }

.hero2__type {
  margin: auto 0;   /* centres in whatever height is left over */
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  /* Fills the measure: the headline is the layout, not a label on it. */
  font-size: clamp(3.4rem, 19vw, 17rem);
  /* The mask box needs the full glyph height or overflow:hidden shears
     the caps and the outlined line's stroke. Optical tightening is done
     with a negative margin instead, giving an effective 0.82 leading. */
  line-height: 1.1;
}
.hero2__type .ln { display: block; overflow: hidden; }
.hero2__type .ln + .ln { margin-block-start: -0.28em; }
.hero2__type .ln i {
  display: block; font-style: normal;
  /* Wipes up from the baseline — the machine's own direction. */
  transform: translateY(102%);
}
.lp.is-ready .hero2__type .ln i {
  transform: translateY(0);
  transition: transform 1s cubic-bezier(.16,1,.3,1);
}
.lp.is-ready .hero2__type .ln:nth-child(2) i { transition-delay: .08s; }
.lp.is-ready .hero2__type .ln:nth-child(3) i { transition-delay: .16s; }
/* The last line is outlined: Anton has no second weight to contrast with. */
.hero2__type .ln:last-child i {
  color: transparent;
  -webkit-text-stroke: 2px var(--text);
}
@supports not (-webkit-text-stroke: 1px black) {
  .hero2__type .ln:last-child i { color: var(--text); }
}

/* Grid, not wrapped flex: a wrapped flex container stretches its lines
   to fill the grid row it sits in, which opened ~200px of dead space
   between the lede and the button. Grid columns collapse predictably. */
.hero2__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(1.5rem, 5vw, 4rem);
  border-block-start: 1px solid var(--line-dark);
  padding-block-start: 1.4rem;
}
.hero2__lede {
  max-width: 44ch; color: var(--dim);
  font-size: clamp(0.95rem, 1.1vw, 1.08rem); line-height: 1.5;
}

.cta {
  display: inline-flex; align-items: center; gap: 0.9rem;
  padding: 1.05rem 1.7rem;
  background: var(--blue); color: #fff;
  font-family: var(--font-mono); font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
  transition: background .18s linear;
  will-change: transform;
}
.cta:hover { background: var(--blue-bright); }
.cta svg { width: 20px; height: 20px; flex: none; }
html[dir='rtl'] .cta svg { transform: scaleX(-1); }

.hero2__scroll {
  position: absolute; inset-block-end: var(--lp-edge);
  inset-inline-end: var(--lp-edge);
  font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim);
  margin: 0;
}
.hero2__scroll span { display: inline-block; animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

@media (max-width: 860px) {
  .hero2__foot { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cta { justify-content: center; }
}
@media (max-width: 720px) {
  .hero2__meta--tr { display: none; }
  .hero2__scroll { display: none; }
}

/* ============================================================
   TICKER
   Set at display scale it reads as a headline that happens to
   move, rather than a strip of adjectives.
   ============================================================ */
.tick {
  border-block: 1px solid var(--line-dark);
  overflow: hidden;
  padding-block: clamp(0.6rem, 1.6vw, 1.1rem);
}
.tick__row {
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.2rem);
  width: max-content;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 5rem); line-height: 1;
  letter-spacing: 0.01em;
  animation: rail 38s linear infinite;
  will-change: transform;
}
.tick__row em { font-style: normal; color: var(--blue); }
@keyframes rail { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tick__row { animation: none; } }

/* ============================================================
   WORK RAIL
   Pinned while the work traverses sideways — the scroll drives a
   bed, not a fade.
   ============================================================ */
.rail { position: relative; background: var(--bg); }
.rail__sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  gap: clamp(1rem, 3vh, 2rem);
  padding: clamp(5.5rem, 11vh, 7rem) 0 var(--lp-edge);
  overflow: hidden;
}
.rail__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding-inline: var(--lp-edge);
}
.rail__count {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.12em; color: var(--dim); margin: 0;
}
.rail__count b { color: var(--text); font-variant-numeric: tabular-nums; }

.rail__track {
  display: flex; align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  padding-inline: var(--lp-edge);
  width: max-content;
  will-change: transform;
}
.card2 {
  position: relative;
  width: clamp(230px, 27vw, 400px);
  flex: none;
  text-align: start;
  display: grid; gap: 0.9rem;
}
.card2__media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--bg-alt);
}
.card2__media img { width: 100%; height: 100%; object-fit: cover; }
.card2__idx {
  position: absolute; inset-block-start: 12px; inset-inline-start: 12px;
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--text);
  background: rgb(var(--deep-rgb) / .78); padding: 0.25rem 0.5rem;
}
.card2__title {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1rem, 1.3vw, 1.2rem); letter-spacing: -0.015em;
}
.card2__meta {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--dim);
}
.rail__progress { height: 2px; background: var(--line-dark); margin-inline: var(--lp-edge); }
.rail__progress i { display: block; height: 100%; width: 0%; background: var(--blue); }

/* Without pinning the rail becomes an ordinary horizontal scroller,
   which is the right fallback rather than a broken tall section. */
@media (prefers-reduced-motion: reduce) {
  .rail { height: auto !important; }
  .rail__sticky { position: relative; height: auto; }
  .rail__track { width: auto; overflow-x: auto; transform: none !important; }
}

/* ============================================================
   END CTA
   The largest type on the page, because it is the only thing
   the page actually wants you to do.
   ============================================================ */
.end {
  border-block-start: 1px solid var(--line-dark);
  padding: clamp(4rem, 10vw, 8rem) var(--lp-edge) var(--lp-edge);
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
}
.end__link {
  display: grid;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(3rem, 16vw, 14rem); line-height: 0.84;
  letter-spacing: 0.005em;
}
.end__word { display: block; transition: transform .5s var(--ease), color .3s linear; }
.end__link:hover .end__word:first-child { transform: translateX(clamp(0.5rem, 2vw, 2.5rem)); }
.end__link:hover .end__word:last-child { color: var(--blue); }
.end__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.5rem; flex-wrap: wrap;
  border-block-start: 1px solid var(--line-dark); padding-block-start: 1.3rem;
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--dim);
}
.end__wa { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   CONTACT
   Same rules as the landing: full-bleed head, hairline rows,
   mono for anything that is data.
   ============================================================ */
.ct-head {
  padding: clamp(7rem, 14vh, 10rem) var(--lp-edge) clamp(2rem, 5vw, 3.5rem);
  display: grid; gap: 1.2rem;
}
.ct-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.005em;
  font-size: clamp(3rem, 15vw, 12rem);
  line-height: 1.02;
}
.ct-title span { display: block; }
.ct-title__out {
  color: transparent;
  -webkit-text-stroke: 2px var(--text);
}
@supports not (-webkit-text-stroke: 1px black) {
  .ct-title__out { color: var(--dim); }
}
.ct-lede { max-width: 50ch; color: var(--dim); font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.5; }

/* ---------- channel rows ---------- */
.chan { border-block-start: 1px solid var(--line-dark); }
.chan__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.4rem, 3vw, 2.2rem) var(--lp-edge);
  border-block-end: 1px solid var(--line-dark);
  transition: background .18s linear, color .18s linear;
  will-change: transform;
}
.chan__row:hover { background: var(--text); color: var(--bg); }
.chan__no {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--dim);
}
.chan__row:hover .chan__no,
.chan__row:hover .chan__sub,
.chan__row:hover .chan__val { color: inherit; opacity: .72; }
.chan__body { display: grid; gap: 0.25rem; }
.chan__name {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.6rem, 4.5vw, 3rem); line-height: 1;
}
.chan__sub { color: var(--dim); font-size: 0.92rem; }
.chan__val {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--dim);
  white-space: nowrap;
}
.chan__arw { width: 26px; height: 26px; flex: none; transition: transform .18s var(--ease); }
.chan__row:hover .chan__arw { transform: translateX(6px); }
html[dir='rtl'] .chan__arw { transform: scaleX(-1); }
html[dir='rtl'] .chan__row:hover .chan__arw { transform: scaleX(-1) translateX(6px); }

@media (max-width: 760px) {
  .chan__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .chan__val { display: none; }   /* the name already says where it goes */
}

/* ---------- details + form ---------- */
.ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(3rem, 7vw, 5.5rem) var(--lp-edge) clamp(4rem, 8vw, 7rem);
}
@media (max-width: 900px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } }

.ct-side { display: grid; gap: 2rem; align-content: start; }
.ct-spec { margin: 0; display: grid; gap: 0; }
.ct-spec div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: 0.85rem;
  border-block-end: 1px solid var(--line-dark);
}
.ct-spec dt {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
}
.ct-spec dd { margin: 0; font-size: 0.92rem; text-align: end; }

.ct-bulk { border-block-start: 1px solid var(--text); padding-block-start: 1.3rem; display: grid; gap: 0.6rem; }
.ct-bulk h2 {
  font-family: var(--font-body); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -0.015em; line-height: 1.2;
}
.ct-bulk p { color: var(--dim); font-size: 0.92rem; }

.ct-form__h {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1; margin-block-end: 0.6rem;
}
.ct-form__sub { color: var(--dim); font-size: 0.95rem; margin-block-end: 1.8rem; max-width: 46ch; }
.ct-form form { display: grid; gap: 1.2rem; }
.ct-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 560px) { .ct-form__row { grid-template-columns: 1fr; } }
.ct-form .cta { justify-self: start; }
@media (max-width: 560px) { .ct-form .cta { justify-self: stretch; justify-content: center; } }
.ct-form__err {
  font-family: var(--font-mono); font-size: 0.78rem;
  color: #fff; background: var(--danger);
  padding: 0.7rem 0.9rem;
}

/* ============================================================
   PAGE HEAD — shared
   Every inner page opens the way the landing does: full bleed,
   monumental, second clause outlined. One component so the
   pages cannot drift apart again.
   ============================================================ */
.phead {
  padding: clamp(7rem, 13vh, 9.5rem) var(--lp-edge) clamp(2rem, 5vw, 3.5rem);
  display: grid; gap: 1.2rem;
}
.phead__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.005em;
  font-size: clamp(3rem, 14vw, 11rem);
  line-height: 1.02;
}
.phead__title span { display: block; }
.phead__title .out {
  color: transparent;
  -webkit-text-stroke: 2px var(--text);
}
@supports not (-webkit-text-stroke: 1px black) {
  .phead__title .out { color: var(--dim); }
}
.phead__lede { max-width: 50ch; color: var(--dim); font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.5; }

/* A tool page needs its controls above the fold, so its head is the
   same component dialled down rather than a different one. */
.phead--sm { padding-block: clamp(6rem, 11vh, 7.5rem) clamp(1.2rem, 3vw, 2rem); }
.phead--sm .phead__title { font-size: clamp(2.2rem, 6vw, 4.5rem); }

/* ============================================================
   FAQ
   Objection handling, set as an index rather than a widget.
   ============================================================ */
.faq2 {
  padding: clamp(3rem, 7vw, 5.5rem) var(--lp-edge) clamp(4rem, 8vw, 7rem);
  border-block-start: 1px solid var(--line-dark);
}
.faq2__h {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.8rem, 5vw, 3.4rem); line-height: 1;
  margin-block-end: clamp(1.5rem, 4vw, 2.5rem);
}
.faq2__list { border-block-start: 1px solid var(--text); }
.faq2__q {
  width: 100%; text-align: start;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline; gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.1rem, 2.5vw, 1.6rem);
  border-block-end: 1px solid var(--line-dark);
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.02rem, 1.7vw, 1.35rem); letter-spacing: -0.015em;
  transition: color .16s linear;
}
.faq2__q:hover { color: var(--accent-on-bg); }
.faq2__no { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 400; color: var(--dim); }
.faq2__sign {
  font-family: var(--font-mono); font-weight: 400; font-size: 1.1rem; color: var(--dim);
  transition: transform .24s var(--ease);
}
.faq2__q[aria-expanded='true'] .faq2__sign { transform: rotate(45deg); }
.faq2__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
  border-block-end: 1px solid var(--line-dark);
}
.faq2__a[data-open='true'] { grid-template-rows: 1fr; }
.faq2__a > div { overflow: hidden; }
.faq2__a p {
  color: var(--dim); max-width: 62ch;
  padding-block: 0 clamp(1.1rem, 2.5vw, 1.6rem);
  /* line up with the question text, past the index column */
  padding-inline-start: calc(clamp(1rem, 3vw, 2.5rem) + 2.2rem);
}
@media (max-width: 620px) {
  .faq2__a p { padding-inline-start: 0; }
}

/* ============================================================
   Inner pages adopting the landing system
   ============================================================ */
.lp .studio { padding-block-start: 0; }
.lp .studio > .wrap,
.lp main > .section > .wrap { width: 100%; max-width: none; padding-inline: var(--lp-edge); }
.lp .gal { padding-inline: 0; }

/* A rendered object is a transparent PNG of a single form — it wants
   air around it, unlike a photo which should fill the frame. */
.gal__media img.is-render,
.card2__media img.is-render {
  object-fit: contain;
  padding: 8%;
  background: rgb(var(--text-rgb) / .03);
}

/* Attribution. CC BY and CC BY-SA make this mandatory wherever the
   image appears, so it is styled to be read, not hidden. */
.credit {
  display: block;
  font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.02em; color: var(--dim);
  margin-block-start: 0.15rem;
}
.credit a { text-decoration: underline; text-underline-offset: 2px; }
.credit a:hover { color: var(--text); }