/* Lovault — site stylesheet. The Vault look (22 September 2026).

   Near-black ground, one curtain of light standing a little right of centre,
   a cyan line-drawn mark, uppercase spaced navigation, and outlined controls.
   The previous orange look is kept whole in _archive/2026-09-22-before-the-vault-look/.

   System fonts only and no network requests, so the site renders identically
   offline on Windows and macOS and can be served from a machine with no
   internet connection. The light is drawn with gradients rather than a
   picture, so it holds at any window size and costs no download. */

:root {
  --bg:      #05080b;
  --raise:   #0a1016;
  --raise2:  #0f171f;
  --line:    #15202b;
  --line2:   #22303d;
  --ink:     #e8eef3;
  --muted:   #93a1ad;
  --dim:     #66727d;

  --accent:   #2ee6f0;                 /* the cyan of the mark and of "next." */
  --accent-s: rgba(46, 230, 240, 0.34);
  --glow:     rgba(46, 230, 240, 0.42);
  --orange:   #ff7b3e;                 /* Windows */
  --amber:    #f0b04a;                 /* SOON, alpha, editor notes */
  --steel:    #a9bccb;                 /* macOS */

  --wrap: 1180px;
  --gut: 28px;
  --edge: clamp(20px, 3.8vw, 76px);    /* header and hero sit to the window edge */

  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
          "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; display: block; }

a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

::selection { background: rgba(46, 230, 240, 0.28); color: #fff; }

/* ------------------------------------------------------------------ type */

h1, h2, h3, h4 { margin: 0; font-weight: 620; letter-spacing: -0.022em; line-height: 1.08; }

.display {
  font-size: clamp(2.6rem, 6.2vw, 5.4rem);
  letter-spacing: -0.02em;
  line-height: 1.04;
  font-weight: 600;
}
.display .lit {
  color: var(--accent);
  text-shadow: 0 0 28px var(--glow), 0 0 2px rgba(46, 230, 240, 0.6);
}
.h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -0.03em; }
.h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); letter-spacing: -0.02em; }

.lead { font-size: clamp(1.08rem, 1.7vw, 1.3rem); color: var(--muted); line-height: 1.6; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.kicker {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.kicker.plain { color: var(--dim); }

.muted { color: var(--muted); }
.dim { color: var(--dim); }
em.ember, em.lit { color: var(--accent); font-style: normal; }

/* ------------------------------------------------------------- top bar */
/* Transparent over the light, so the curtain runs to the top of the window as
   in the design. Once the page scrolls past the hero it gains a dark glass
   backing, because white navigation over white body copy cannot be read. */

.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.top.scrolled {
  background: rgba(5, 8, 11, 0.8);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}
.top .bar {
  display: flex; align-items: center; gap: 18px;
  height: clamp(76px, 8vw, 128px);
  padding: 0 var(--edge);
  transition: height 0.25s ease;
}
.top.scrolled .bar { height: 68px; }

/* The mark alone, top left. No wordmark beside it. */
.brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-weight: 600; letter-spacing: -0.01em;
}
.brand .glyph { width: 46px; height: auto; flex: none; filter: drop-shadow(0 0 6px var(--glow)); transition: width 0.25s ease; }
.top.scrolled .brand .glyph { width: 36px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(24px, 3.4vw, 64px); }
.nav a {
  text-decoration: none; color: rgba(235, 241, 246, 0.72);
  font-size: 0.78rem; font-weight: 450; letter-spacing: 0.28em; text-transform: uppercase;
  padding: 6px 0; border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav a:hover { color: #fff; }
.nav a.on { color: #fff; }
/* Over the bright band of the curtain the white labels lose their edge; a soft
   dark halo keeps them legible without a visible backing. */
.top:not(.scrolled) .nav a { color: rgba(245, 248, 250, 0.86); text-shadow: 0 0 2px rgba(5, 8, 11, 0.55), 0 1px 12px rgba(5, 8, 11, 0.5); }
.top:not(.scrolled) .nav a.on, .top:not(.scrolled) .nav a:hover { color: #fff; }

.navtoggle {
  display: none; margin-left: auto; background: rgba(5, 8, 11, 0.4);
  border: 1px solid rgba(235, 241, 246, 0.28);
  color: var(--ink); border-radius: 999px; padding: 8px 16px; font: inherit;
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; cursor: pointer;
}

/* --------------------------------------------------------------- alpha */

.tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.15em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  border: 1px solid rgba(240, 176, 74, 0.4);
  background: rgba(20, 16, 8, 0.35);
  color: var(--amber);
  white-space: nowrap;
}
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex: none; }
.tag.soft { border-color: var(--line2); background: var(--raise2); color: var(--dim); }

/* ---------------------------------------------------------------- hero */
/* THE LIGHT. Drawn by assets/js/light.js on a canvas behind the words, one
   composition per page, named by data-light on the hero. The canvas fades to
   transparent towards the bottom (--fade), so the light dissolves into the
   page instead of ending on a line. */

.hero {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: clamp(110px, 12vw, 150px) 0 clamp(90px, 10vw, 130px);
  /* with no script the light is a still glow; the canvas replaces it */
  background:
    radial-gradient(ellipse 45% 60% at 82% 0%, rgba(170, 196, 214, 0.30), transparent 70%),
    radial-gradient(ellipse 20% 50% at 62% 0%, rgba(78, 165, 200, 0.35), transparent 75%),
    var(--bg);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.16; mix-blend-mode: overlay;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* a dark pool behind the words, so white type holds over any part of the light */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse var(--scrim-size, 40% 42%) at var(--scrim-at, 34% 54%), rgba(4, 7, 10, 0.62), transparent 72%);
}

.hero canvas.light {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  opacity: 0; transition: opacity 1.4s ease;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 var(--fade, 60%), transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 var(--fade, 60%), transparent 100%);
}
.hero canvas.light.on { opacity: 1; }
.hero.lit-on { background: var(--bg); }

.hero .stage {
  position: relative; z-index: 2; width: 100%;
  padding: 0 clamp(20px, 6vw, 120px) 0 clamp(20px, 15.5vw, 360px);
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 60px); align-items: start;
}

.hero .big {
  width: clamp(120px, 10.5vw, 210px); height: auto; margin-top: -0.4em;
  overflow: visible;
  filter: drop-shadow(0 0 10px rgba(46, 230, 240, 0.55))
          drop-shadow(0 0 34px rgba(46, 230, 240, 0.28));
}
/* the mark draws itself once, on load */
.hero .big path { stroke-dasharray: 520; stroke-dashoffset: 520; animation: draw 1.5s cubic-bezier(.6,.1,.2,1) forwards; }
.hero .big path:nth-child(2) { animation-delay: 0.25s; }
.hero .big path:nth-child(3) { animation-delay: 0.45s; }
.hero .big circle { opacity: 0; animation: dot 0.5s ease 1.4s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes dot { to { opacity: 1; } }

.hero .copy { text-shadow: 0 1px 2px rgba(3, 6, 9, 0.18); }
.hero .display { margin: 0; max-width: 11ch; text-shadow: 0 1px 2px rgba(5, 8, 11, 0.35), 0 2px 26px rgba(5, 8, 11, 0.4); }
.hero .sub {
  margin: clamp(22px, 2.4vw, 40px) 0 0;
  font-size: clamp(1.1rem, 1.55vw, 1.62rem); line-height: 1.5;
  letter-spacing: 0.02em; font-weight: 400;
  color: rgba(226, 233, 238, 0.78);
  max-width: 22ch;
}
.hero .btns { margin-top: clamp(36px, 3.6vw, 62px); gap: clamp(14px, 1.8vw, 34px); }

/* the sub-pages carry the same light, shorter */
.hero.page { min-height: 66vh; }
.hero.page .stage { grid-template-columns: minmax(0, 1fr); }
.hero.page .display { max-width: 14ch; }
.hero.page .sub { max-width: 44ch; font-size: clamp(1.02rem, 1.3vw, 1.3rem); }
.hero.page .label {
  display: inline-block; margin-bottom: 22px;
  font-size: 0.74rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent);
}

/* SCROLL, bottom left */
.scroll {
  position: absolute; z-index: 2; left: var(--edge); bottom: clamp(24px, 4vw, 64px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-decoration: none; color: rgba(235, 241, 246, 0.82);
  font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase;
}
.scroll i {
  display: block; width: 2px; height: 32px; background: var(--accent);
  box-shadow: 0 0 8px var(--glow); position: relative;
  animation: nudge 2.4s ease-in-out infinite;
}
.scroll i::after {
  content: ""; position: absolute; left: 50%; bottom: -12px; width: 10px; height: 10px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: translateX(-50%) rotate(45deg);
}
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* -------------------------------------------------------------- buttons */

.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font: inherit; font-size: 0.97rem; font-weight: 500;
  padding: 14px 24px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line2); background: rgba(10, 16, 22, 0.55); color: var(--ink);
  cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:hover { border-color: #3a4a58; background: rgba(15, 23, 31, 0.8); }
.btn svg { width: 19px; height: 19px; flex: none; }

.btn.primary {
  background: rgba(46, 230, 240, 0.08); border-color: var(--accent-s); color: var(--accent);
}
.btn.primary:hover {
  border-color: var(--accent); box-shadow: 0 0 22px rgba(46, 230, 240, 0.22);
  background: rgba(46, 230, 240, 0.12);
}

/* A DOWNLOAD THAT DOES NOT DOWNLOAD MUST LOOK LIKE ONE. Alpha is not released;
   the buttons are shown so the shape of the page is right, and they are visibly
   inert rather than broken — a dashed pill with a SOON badge, which reads as
   "not yet" and keeps the label at full contrast. */
.btn.pending {
  cursor: not-allowed; position: relative;
  background: rgba(8, 11, 14, 0.06); border-style: dashed;
  border-color: rgba(200, 214, 225, 0.32); color: var(--steel);
  font-size: clamp(1rem, 1.25vw, 1.32rem); padding: clamp(13px, 1.1vw, 18px) clamp(18px, 1.7vw, 34px);
}
.btn.pending:hover { background: rgba(8, 11, 14, 0.06); border-color: rgba(200, 214, 225, 0.32); box-shadow: none; }
.btn.pending::after {
  content: "soon"; font-family: var(--sans); font-size: 0.62em; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; margin-left: 4px;
  border: 1px solid rgba(240, 176, 74, 0.55); color: var(--amber);
  background: rgba(20, 16, 8, 0.18);
}
.btn.pending.win { color: var(--orange); border-color: rgba(255, 123, 62, 0.6); }
.btn.pending.win:hover { border-color: rgba(255, 123, 62, 0.6); }
.btn.pending.mac { color: var(--steel); background: rgba(8, 11, 14, 0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn.pending.mac:hover { background: rgba(8, 11, 14, 0.42); }
.btn.pending svg { width: 1.2em; height: 1.2em; }

.btnnote { font-size: 0.85rem; color: var(--dim); }

/* ---------------------------------------------------------------- grids */

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: linear-gradient(180deg, rgba(15, 23, 31, 0.9), rgba(10, 16, 22, 0.9));
  border: 1px solid var(--line); border-radius: 16px;
  padding: 26px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.card:hover { border-color: rgba(46, 230, 240, 0.28); box-shadow: 0 12px 40px -18px rgba(46, 230, 240, 0.25); }
.card h3 { font-size: 1.12rem; }
.card p { font-size: 0.95rem; color: var(--muted); margin: 0; }
.card .num { font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }

.statement {
  font-size: clamp(1.4rem, 3.1vw, 2.1rem); line-height: 1.32; letter-spacing: -0.026em;
  font-weight: 560; max-width: 24ch;
}

.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 6vw, 80px); align-items: start; }

.deck { max-width: 62ch; }
.deck p { color: var(--muted); }

/* ------------------------------------------------------------ sections */

section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
section.tight { padding: clamp(44px, 6vw, 76px) 0; }
.rule { border-top: 1px solid var(--line); }

/* ----------------------------------------------------------- media slot */
/* Every picture and clip on this site is a NAMED SLOT. The file is dropped into
   assets/media/ under the name shown and the slot fills itself. Until then the
   slot draws its own brief: what the shot must contain and at what size. */

.shot { margin: 0; }
.shot .frame {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: var(--raise);
  aspect-ratio: 16 / 10;
}
.shot.wide .frame { aspect-ratio: 16 / 9; }
.shot .frame > img, .shot .frame > video { width: 100%; height: 100%; object-fit: cover; }
.shot figcaption { margin-top: 11px; font-size: 0.88rem; color: var(--dim); }

.slot {
  position: absolute; inset: 0; display: none;
  flex-direction: column; justify-content: space-between; gap: 12px;
  padding: 20px; text-align: left;
  background:
    radial-gradient(ellipse 40% 90% at 70% 0%, rgba(46, 230, 240, 0.05), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.016) 0 12px, transparent 12px 24px),
    var(--raise);
}
.shot.missing .frame > img, .shot.missing .frame > video { display: none; }
.shot.missing .slot { display: flex; }

.slot .sname { font-family: var(--mono); font-size: 0.76rem; color: var(--accent); word-break: break-all; }
.slot .sbrief { font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.slot .sspec { font-family: var(--mono); font-size: 0.7rem; color: var(--dim); letter-spacing: 0.04em; }

/* ------------------------------------------------------------- roadmap */

.road { display: grid; gap: 0; margin-top: 12px; }
.road .stop {
  display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 24px;
  padding: 26px 0; border-top: 1px solid var(--line);
}
.road .stop:last-child { border-bottom: 1px solid var(--line); }
.road .when { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); padding-top: 4px; }
.road .stop.now .when { color: var(--accent); }
.road .what h3 { font-size: 1.1rem; margin-bottom: 8px; }
.road .what p { font-size: 0.95rem; color: var(--muted); margin: 0; }
.road .what .tag { margin-bottom: 10px; }

/* ---------------------------------------------------------------- facts */

.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.fact { background: var(--raise); padding: 26px; }
.fact b { display: block; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.03em; font-weight: 620; color: #fff; }
.fact span { font-size: 0.88rem; color: var(--dim); }

/* ----------------------------------------------------------------- list */

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
/* BLOCK, NOT GRID. As a grid, the bold name and every loose run of text in an
   item became separate cells in a 20px column, one word per line. */
.ticks li { position: relative; padding-left: 32px; font-size: 0.97rem; color: var(--muted); }
.ticks li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--accent); font-family: var(--mono); }
.ticks li b { color: var(--ink); font-weight: 580; }

/* ---------------------------------------------------------------- quote */

.pull {
  border-left: 2px solid var(--accent); padding: 4px 0 4px 24px; margin: 0;
  font-size: clamp(1.15rem, 2.3vw, 1.5rem); line-height: 1.45;
  letter-spacing: -0.02em; color: var(--ink); font-weight: 500;
}
.pull cite { display: block; margin-top: 14px; font-size: 0.85rem; font-style: normal; color: var(--dim); letter-spacing: 0; font-weight: 400; }

/* ----------------------------------------------------------- editor note */

.note {
  display: block; margin: 14px 0; padding: 12px 15px; border-radius: 12px;
  border: 1px dashed rgba(240, 176, 74, 0.45); background: rgba(240, 176, 74, 0.06);
  color: var(--amber); font-size: 0.86rem; line-height: 1.5;
}
.note b { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.15em; display: block; margin-bottom: 4px; }
body.hidenotes .note { display: none; }

.notebtn {
  position: fixed; right: 16px; bottom: 16px; z-index: 80;
  font: inherit; font-size: 0.78rem; padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--line2); background: rgba(10, 16, 22, 0.92); color: var(--muted);
  cursor: pointer; backdrop-filter: blur(8px);
}
.notebtn:hover { color: var(--ink); border-color: #3a4a58; }
@media (max-width: 700px) {
  .notebtn { right: 10px; bottom: 10px; font-size: 0.72rem; padding: 7px 11px; }
}

/* --------------------------------------------------------------- footer */

footer { border-top: 1px solid var(--line); padding: 44px 0 56px; color: var(--dim); font-size: 0.89rem; }
footer .row { display: flex; flex-wrap: wrap; gap: 18px 34px; align-items: center; }
footer a { color: var(--muted); text-decoration: none; font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; }
footer a:hover { color: var(--ink); }
footer .grow { flex: 1 1 auto; }
footer .brand .glyph { width: 26px; filter: drop-shadow(0 0 4px var(--glow)); }


/* ------------------------------------------------------ one design per page */
/* Each page places its words where its light leaves room.
   Product   words left of centre, the arc falling on the right   (data-light="arc")
   Features  words centred high, strands meeting below them       (data-light="converge")
   About     words low on the left, the bundle rising on the right (data-light="rise")
   Roadmap   words high on the left, the horizon underneath        (data-light="horizon") */

.hero[data-light="converge"] { --scrim-at: 50% 40%; --scrim-size: 46% 40%; min-height: 84vh; align-items: flex-start; }
.hero[data-light="converge"] .stage { padding: clamp(40px, 9vh, 120px) var(--edge) 0; text-align: center; }
.hero[data-light="converge"] .copy { margin: 0 auto; }
.hero[data-light="converge"] .display { max-width: 13ch; margin: 0 auto; }
.hero[data-light="converge"] .sub { max-width: 40ch; margin-left: auto; margin-right: auto; }

.hero[data-light="rise"] { --scrim-at: 26% 70%; --scrim-size: 44% 50%; min-height: 80vh; align-items: flex-end; }
.hero[data-light="rise"] .stage { padding-bottom: clamp(20px, 5vh, 70px); }

.hero[data-light="horizon"] { --scrim-at: 30% 40%; --scrim-size: 44% 40%; min-height: 100vh; min-height: 100svh; align-items: flex-start; }
.hero[data-light="horizon"] .stage { padding-top: clamp(30px, 6vh, 90px); }

/* the first band after a hero carries no rule: the light dissolves into it */
.hero + section, .hero + section.rule { border-top-color: transparent; }

/* ------------------------------------------------ home: the six, in a line */
.six {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.six li { border-bottom: 1px solid var(--line); }
.six a {
  display: flex; gap: 18px; align-items: baseline; padding: 22px 18px 22px 0;
  color: var(--ink); text-decoration: none; font-size: 1.08rem; font-weight: 520;
  transition: color 0.2s ease;
}
.six a span { font-size: 0.72rem; letter-spacing: 0.24em; color: var(--accent); }
.six a:hover { color: var(--accent); }

/* ------------------------------------------- features: one row per thing */
.feat { margin-top: 12px; border-top: 1px solid var(--line); }
.feat article {
  display: grid; grid-template-columns: clamp(90px, 14vw, 200px) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(20px, 4vw, 60px); align-items: start;
  padding: clamp(30px, 4vw, 52px) 0; border-bottom: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.feat .n {
  font-size: clamp(3rem, 7vw, 6rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.2px rgba(46, 230, 240, 0.75);
  text-shadow: 0 0 24px rgba(46, 230, 240, 0.18);
  transition: color 0.3s ease;
}
.feat article:hover .n { color: rgba(46, 230, 240, 0.12); }
.feat h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); letter-spacing: -0.02em; padding-top: 0.3em; }
.feat p { color: var(--muted); margin: 0; padding-top: 0.45em; }

/* ------------------------------------------- roadmap: a rail of light */
.road { position: relative; padding-left: 38px; }
.road::before {
  content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(46, 230, 240, 0.35) 24%, rgba(169, 188, 203, 0.14) 70%, transparent 100%);
  box-shadow: 0 0 14px rgba(46, 230, 240, 0.35);
}
.road .stop { position: relative; }
.road .stop::before {
  content: ""; position: absolute; left: -37px; top: 31px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(169, 188, 203, 0.45); background: var(--bg);
}
.road .stop.now::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 14px var(--glow); }

/* ----------------------------------------------------------- responsive */

@media (max-width: 960px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .cols { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .hero .stage { grid-template-columns: 1fr; row-gap: 34px; padding-left: clamp(20px, 7vw, 80px); }
  .hero .big { width: 110px; margin-top: 0; }
  .six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat article { grid-template-columns: 90px minmax(0, 1fr); }
  .feat article p { grid-column: 2; }
}

@media (max-width: 700px) {
  :root { --gut: 20px; }
  body { font-size: 16px; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(5, 8, 11, 0.96); border-bottom: 1px solid var(--line); padding: 8px var(--edge);
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; }
  .navtoggle { display: block; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .road .stop { grid-template-columns: 1fr; gap: 10px; }
  .six { grid-template-columns: 1fr; }
  .feat article { grid-template-columns: 1fr; gap: 10px; }
  .feat article p { grid-column: auto; }
  .hero[data-light="converge"] .stage { text-align: left; }
  .hero[data-light="converge"] .display, .hero[data-light="converge"] .sub { margin-left: 0; }
  .btns .btn { width: 100%; justify-content: center; }
  .btnnote { width: 100%; }
  .scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .big path { animation: none; stroke-dashoffset: 0; }
  .hero .big circle { animation: none; opacity: 1; }
  .scroll i { animation: none; }
}

/* =========================================== 23 September 2026 — launch copy
   The wordmark replaces the mark top left, the hero states what Lovault is,
   the download buttons become the launch date, editor notes are gone, and the
   light carries on down the page as a few faint strands (assets/js/light.js,
   "the trail"). */
.brand.word {
  font-size: 1.28rem; font-weight: 650; letter-spacing: 0.02em; color: #fff;
  text-shadow: 0 0 14px rgba(46, 230, 240, 0.35);
}
.top.scrolled .brand.word { font-size: 1.12rem; }
.hero .display.os { max-width: 17ch; font-size: clamp(2.4rem, 5.4vw, 5.2rem); line-height: 1.02; }
.launch {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 24px; border-radius: 999px;
  border: 1px solid var(--accent-s); background: rgba(8, 12, 16, 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: clamp(0.9rem, 1.05vw, 1.05rem); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(235, 241, 246, 0.86);
}
.launch b { color: var(--accent); font-weight: 600; }
.launch i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px var(--glow); animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }
.slot { justify-content: center; align-items: center; }
.slot > span {
  font-size: 0.74rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim);
}
.prerelease { text-align: center; padding: clamp(70px, 9vw, 120px) 0; }
.prerelease .h2 { margin: 0 auto; max-width: 22ch; }
.prerelease .kicker { justify-content: center; }

/* THE TRAIL. A fixed canvas behind the page, drawn for the part of the document
   in view, so a long page costs no more than a short one. Everything after the
   hero is lifted above it; the hero keeps its own light. */
canvas.trail { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
section, footer, .hero { position: relative; z-index: 1; }

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


/* ================================================ 23 September 2026 — 3D mark
   The LT mark is the front face of a box (assets/js/mark3d.js). The front
   stays lit; the five receding edges are grey wires that light up from the
   point the cursor touches and go out over 4 s after it leaves. The glow sits
   on the lit parts only (an SVG filter set by the script), so the mark's own
   drop-shadow is removed once the script has run. */
svg.mark3d { filter: none; overflow: visible; }
.hero .big[data-mark3d] {
  --mw: clamp(133px, 11.6vw, 233px);
  width: var(--mw);
  margin-top: calc(-0.4em - var(--mw) * 0.344);   /* the box rises above the old mark's top */
  cursor: crosshair; touch-action: none;
}
.hero .big[data-mark3d] path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.5s cubic-bezier(.6,.1,.2,1) forwards; }
.hero .big[data-mark3d] .front path:nth-child(2) { animation-delay: 0.25s; }
.hero .big[data-mark3d] .front path:nth-child(3) { animation-delay: 0.45s; }
.hero .big[data-mark3d] .wires path { animation-duration: 0.9s; animation-delay: 1.2s; }
.hero .big[data-mark3d] .wires path:nth-child(2) { animation-delay: 1.45s; }
.hero .big[data-mark3d] .wires path:nth-child(3) { animation-delay: 1.35s; }
.hero .big[data-mark3d] .wires path:nth-child(4) { animation-delay: 1.6s; }
.hero .big[data-mark3d] .wires path:nth-child(5) { animation-delay: 1.75s; }
.hero .big[data-mark3d] .lit path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
footer .brand .glyph[data-mark3d] { width: 29px; }
@media (max-width: 960px) {
  .hero .big[data-mark3d] { --mw: 122px; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .big[data-mark3d] path { animation: none; stroke-dashoffset: 0; }
}