/* ========================================
   WEBRIFT — the v5 look (2026-10-26)
   Daylight pages with night moments: a night hero with a self-drawing line drawing beside the
   words, tinted and textured sections, outlined cards, colour that means something, and a night
   closing band. Loaded only by pages with `look: 'v5'` (src/layout.mjs adds body.v5), and every
   rule sits under .v5, so the rest of the site is unchanged. The pieces are in src/components/v5.mjs.

   Colour, and what it means (every value is an existing brand token):
     night #0A1020 / #131C31   the hero, the closing band, the footer
     line  #7EA6FF             the drawings' ink and the night's labels (the home's light blue)
     blue  #0055FF             actions, and what you can press
     green #5BE3A0 / #12B76A   live: data moving through the drawing, the Run group, Rift online
     paper #F5F7FB, wash #E8F0FF, with the blueprint grid in blue pencil
   ======================================== */

.v5 {
  --v5-night: #0A1020;
  --v5-night-2: #131C31;
  --v5-on-night: #EEF3FF;
  --v5-on-night-2: #B9C4DA;
  --v5-line: #7EA6FF;
  --v5-focus-night: #8FB2FF;
  --v5-live: #5BE3A0;
  --v5-r: 12px;
  /* Motion, one set for every page (Walid, 2026-10-27: "consistency in animations, timing and
     scroll across the whole site"). Interface: fast for colour and state, base for movement,
     both easing out (the site's expo curve for movement). Drawings: every figure starts at
     --v5-d0, spreads its strokes over --v5-span (src/components/v5.mjs sets each figure's
     --v5-step to the span shared out over its own steps), each stroke taking --v5-draw; so every
     drawing has finished at --v5-done, and only then does anything in it loop. Ambient: the beam
     drifts on one slow clock, wherever it is. */
  --v5-fast: 150ms;
  --v5-base: 300ms;
  --v5-ease: var(--ease-out-expo);
  --v5-d0: 200ms;
  --v5-span: 1500ms;
  --v5-draw: 1100ms;
  --v5-ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
  --v5-done: calc(var(--v5-d0) + var(--v5-span) + var(--v5-draw));
  --v5-fade: 600ms;
  --v5-drift: 26s;
  /* the blueprint grid: a fine 24px grid and a 96px one over it (the footer's and the home's) */
  --v5-grid-night:
    linear-gradient(rgba(126, 166, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 166, 255, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(126, 166, 255, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 166, 255, 0.13) 1px, transparent 1px);
  --v5-grid-day:
    linear-gradient(rgba(0, 85, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 255, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(0, 85, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 255, 0.08) 1px, transparent 1px);
  --v5-grid-size: 24px 24px, 24px 24px, 96px 96px, 96px 96px;
  /* a drafting ruler: a tick every 24px, a long one every 96px, in line with the grid */
  --v5-ruler:
    repeating-linear-gradient(90deg, rgba(126, 166, 255, 0.6) 0 1px, transparent 1px 96px) 0 100% / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, rgba(126, 166, 255, 0.32) 0 1px, transparent 1px 24px) 0 100% / 100% 6px no-repeat;
  --v5-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The hero sits under the bar on phones too: the Discord strip's room moves into the hero. */
@media (max-width: 1023px) { body.v5:not(.story) main { padding-top: 0; } }


/* =================== The night hero (.v5-hero) =================== */
.v5 .v5-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--nav-h, 88px) + var(--strip-h, 0px) + clamp(2.5rem, 1.5rem + 3vw, 4.5rem)) 0 clamp(3.5rem, 2rem + 5vw, 6.5rem);
  border-bottom: 0;
  background: var(--v5-night); color: var(--v5-on-night-2);
}
.v5-hero__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.v5-hero__sky > i, .cta-band__sky > i { position: absolute; display: block; }
.v5-grid {
  inset: 0; background-image: var(--v5-grid-night); background-size: var(--v5-grid-size);
  -webkit-mask-image: radial-gradient(130% 95% at 72% 38%, #000 30%, rgba(0, 0, 0, 0.35) 70%, transparent 100%);
  mask-image: radial-gradient(130% 95% at 72% 38%, #000 30%, rgba(0, 0, 0, 0.35) 70%, transparent 100%);
}
/* the rift of light: a soft beam at the logo slash's angle, drifting slowly across the night */
.v5-beam {
  top: -40%; left: 46%; width: clamp(180px, 20vw, 340px); height: 180%;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(126, 166, 255, 0.12) 50%, transparent 50.3%),
    linear-gradient(90deg, transparent, rgba(47, 107, 255, 0.07) 28%, rgba(77, 141, 255, 0.2) 50%, rgba(47, 107, 255, 0.07) 72%, transparent);
  transform: translateX(-120%) rotate(30deg);
  animation: v5-drift var(--v5-drift) ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes v5-drift { to { transform: translateX(70%) rotate(30deg); } }
.v5-glow { right: -8%; top: 4%; width: 64%; height: 96%; background: radial-gradient(closest-side, rgba(47, 107, 255, 0.3), rgba(47, 107, 255, 0.08) 62%, transparent); }
.v5-grain { inset: 0; opacity: 0.07; mix-blend-mode: overlay; background-image: var(--v5-noise); background-size: 200px 200px; }
.v5-ruler { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--v5-ruler); pointer-events: none; }

.v5-hero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
@media (min-width: 1024px) {
  .v5-hero__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; column-gap: clamp(2.5rem, 5vw, 5rem); }
}

.v5-kicker {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 1.25rem;
  font: 400 0.75rem/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--v5-line);
}
.v5-kicker::before { content: ''; flex: none; width: 28px; height: 1px; background: currentColor; }
.v5-hero__title {
  margin: 0; font: 800 min(clamp(1.375rem, 7.8vw, 2.5rem), var(--v5-fit, 100vw))/1.02 var(--font-display);
  letter-spacing: -0.02em; text-transform: uppercase; color: #FFFFFF; text-wrap: balance;
  overflow-wrap: normal; word-break: normal; hyphens: manual;
}
@media (min-width: 600px) { .v5-hero__title { font-size: min(clamp(2.25rem, 1.2rem + 3vw, 3.5rem), var(--v5-fit, 100vw)); line-height: 1; } }
@media (min-width: 1024px) { .v5-hero__title { font-size: min(clamp(2.25rem, 0.84rem + 2.88vw, 3.5rem), var(--v5-fit, 100vw)); } }
.v5-hero__title em { font-style: normal; color: var(--v5-line); }
.v5-hero__lede { margin: 1.5rem 0 0; max-width: 54ch; font-size: clamp(1rem, 0.9rem + 0.35vw, 1.1875rem); line-height: 1.6; color: var(--v5-on-night-2); }
.v5-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.v5-hero .btn--primary { box-shadow: 0 10px 40px -12px rgba(31, 102, 255, 0.85); }
.v5-hero .btn--primary:hover { box-shadow: 4px 4px 0 var(--v5-line); }
.v5-hero :focus-visible, .v5 .cta-band :focus-visible { outline-color: var(--v5-focus-night); }
@media (max-width: 599px) { .v5-hero__actions .btn { flex: 1 1 100%; justify-content: center; min-height: 52px; } }

/* --- Rift inline: his face, one plain sentence, and a way to ask him --- */
.v5-rift {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 16px;
  max-width: 600px; margin-top: 2.25rem; padding: 14px 16px;
  border-radius: 14px; background: rgba(19, 28, 49, 0.78); box-shadow: inset 0 0 0 1px rgba(126, 166, 255, 0.22);
}
.v5-rift__face {
  position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: rgba(0, 85, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(126, 166, 255, 0.35), 0 0 32px -6px rgba(47, 107, 255, 0.75);
}
.v5-rift__face .rift-face { border-radius: 10px; }
/* green: he's on, and answers now */
.v5-rift__on { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--v5-live); box-shadow: 0 0 0 2px var(--v5-night-2); }
.v5-rift__say { margin: 0; font-size: 0.96875rem; line-height: 1.5; color: var(--v5-on-night); }
.v5-rift__say b { display: block; margin-bottom: 3px; font: 400 0.6875rem/1.4 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--v5-line); }
.v5-rift__ask {
  grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(238, 243, 255, 0.32); font: 400 0.75rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--v5-on-night); white-space: nowrap;
  transition: border-color var(--v5-fast) ease-out, background-color var(--v5-fast) ease-out;
}
.v5-rift__ask:hover, .v5-rift__ask:focus-visible { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
.v5-rift__ask span:last-child { transition: transform var(--v5-base) var(--v5-ease); }
.v5-rift__ask:hover span:last-child { transform: translateX(3px); }
@media (min-width: 600px) {
  .v5-rift { grid-template-columns: auto minmax(0, 1fr) auto; }
  .v5-rift__ask { grid-column: auto; }
}

/* --- the drawing beside the words --- */
.v5-hero__art { position: relative; margin: 0; max-width: 620px; }
@media (min-width: 1024px) { .v5-hero__art { max-width: none; } }
.v5-motion {
  position: absolute; z-index: 2; right: calc(max(0px, (100% - var(--container-max)) / 2) + var(--container-pad)); bottom: 20px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border-radius: 50%; background: rgba(10, 16, 32, 0.7); box-shadow: inset 0 0 0 1px rgba(126, 166, 255, 0.3);
  color: var(--v5-on-night-2); cursor: pointer; transition: color var(--v5-fast) ease-out, box-shadow var(--v5-fast) ease-out;
}
.v5-motion[hidden] { display: none; }
@media (pointer: coarse) { .v5-motion { width: 44px; height: 44px; } }
.v5-motion:hover, .v5-motion:focus-visible { color: #FFFFFF; box-shadow: inset 0 0 0 1px var(--v5-line); }
.v5-motion i { position: relative; width: 10px; height: 10px; }
.v5-motion i::before, .v5-motion i::after { content: ''; position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 1px; background: currentColor; }
.v5-motion i::before { left: 1px; }
.v5-motion i::after { right: 1px; }
.v5-motion.is-paused i::before { left: 1px; width: 9px; border-radius: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.v5-motion.is-paused i::after { content: none; }


/* =================== Line drawings that draw themselves in (.v5-draw) ===================
   Every stroke has pathLength 1, so one dash of length 1 covers it; its offset runs from 1 to 0
   in the drawing's order (--i). Then the wires carry live data (green) and the status lights
   blink. Under reduced motion the drawing is simply there, finished and still. */
.v5-draw { display: block; width: 100%; height: auto; overflow: visible; color: var(--v5-line); }
.v5-draw .dr {
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: v5-draw var(--v5-draw) var(--v5-ease-draw) calc(var(--v5-d0) + var(--i, 0) * var(--v5-step, 100ms)) forwards;
}
@keyframes v5-draw { to { stroke-dashoffset: 0; } }
.dr--frame { stroke-width: 1.5; }
.dr--soft { stroke-width: 1.25; opacity: 0.55; }
.dr--bar { stroke-width: 4; opacity: 0.45; }
.dr--dim { stroke-width: 1; opacity: 0.5; }
.dr--tick { stroke-width: 1.5; }
.dr--wire { stroke-width: 1.5; opacity: 0.8; }
/* the hosting boundary is dashed, so it fades in rather than draws */
.v5-draw .dr--edge { stroke-width: 1; opacity: 0.45; stroke-dasharray: 0.006 0.006; stroke-dashoffset: 0; animation: v5-in var(--v5-fade) ease-out calc(var(--v5-d0) + var(--i, 0) * var(--v5-step, 100ms)) both; }
/* the two buttons in the drawing fill with the action blue once drawn */
.v5-draw .dr[data-fill="blue"] {
  fill: var(--blue); fill-opacity: 0;
  animation: v5-draw var(--v5-draw) var(--v5-ease-draw) calc(var(--v5-d0) + var(--i, 0) * var(--v5-step, 100ms)) forwards, v5-fill var(--v5-base) ease-out calc(var(--v5-d0) + var(--v5-span)) forwards;
}
@keyframes v5-fill { to { fill-opacity: 1; } }
.dr-label {
  font: 400 12px/1 var(--font-mono); letter-spacing: 0.16em; fill: var(--v5-on-night-2);
  animation: v5-in var(--v5-fade) ease-out calc(var(--v5-d0) + 400ms + var(--i, 0) * var(--v5-step, 100ms)) both;
}
.dr-label--in { fill: var(--v5-on-night); }
@media (max-width: 599px) { .dr-label { font-size: 17px; } }
.dr-port { fill: var(--v5-night); stroke: currentColor; stroke-width: 1.25; animation: v5-in var(--v5-fade) ease-out calc(var(--v5-d0) + var(--i, 0) * var(--v5-step, 100ms)) both; }
.dr-live {
  fill: var(--v5-live);
  animation: v5-in var(--v5-fade) ease-out calc(var(--v5-d0) + var(--i, 0) * var(--v5-step, 100ms)) both, v5-blink 2.4s ease-in-out var(--v5-done) infinite;
}
@keyframes v5-in { from { opacity: 0; } }
@keyframes v5-blink { 50% { opacity: 0.35; } }
/* live data: a short green dash runs the length of a wire, then rests */
.dr-pks { filter: drop-shadow(0 0 3px rgba(91, 227, 160, 0.85)); }
.dr-pk {
  fill: none; stroke: var(--v5-live); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 0.06 1.2; stroke-dashoffset: 0.06; opacity: 0;
  animation: v5-run var(--dur, 2.6s) linear calc(var(--v5-done) + var(--n, 0) * 0.5s) infinite;
}
@keyframes v5-run {
  0% { stroke-dashoffset: 0.06; opacity: 1; }
  70%, 100% { stroke-dashoffset: -1.08; opacity: 1; }
}
/* paused with the switch, or off screen: the loops hold still (js/v5.js) */
.is-still .dr-pk, .is-away .dr-pk, .is-still .dr-live, .is-away .dr-live,
.is-still .v5-beam, .is-away .v5-beam { animation-play-state: paused; }


/* =================== Section shells (.v5-sec) =================== */
.v5-sec { position: relative; isolation: isolate; padding-block: clamp(3.5rem, 2rem + 5vw, 7rem); }
.v5-sec::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* paper with the blueprint grid in blue pencil, strongest where it meets the night above */
.v5-sec--grid { background: var(--paper); }
.v5-sec--grid::before {
  background-image: var(--v5-grid-day); background-size: var(--v5-grid-size);
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.4) 55%, transparent 95%);
  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.4) 55%, transparent 95%);
}
/* the blue wash with a dot at every grid point */
.v5-sec--wash { background: var(--blue-wash); }
.v5-sec--wash::before {
  background: radial-gradient(circle, rgba(0, 85, 255, 0.16) 1px, transparent 1.6px) 0 0 / 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
/* a night band for a featured block (the hero's grid and glow, light words) */
.v5-sec--night { background-color: var(--v5-night); background-image: var(--v5-grid-night); background-size: var(--v5-grid-size); color: var(--v5-on-night-2); }
.v5-sec--night::before { background: radial-gradient(50% 60% at 80% 40%, rgba(47, 107, 255, 0.3), transparent 72%); }
.v5-sec--night .v5-title { color: #FFFFFF; }
.v5-sec--night .v5-text { color: var(--v5-on-night-2); }

.v5-title {
  margin: 0; font: 800 clamp(1.75rem, 1.1rem + 2vw, 2.75rem)/1.02 var(--font-display);
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink); text-wrap: balance;
}
.v5-text { margin: 1rem 0 0; max-width: 42ch; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft); }
.v5-sec .v5-kicker { color: var(--accent-text); }

/* a heading column beside the content; the heading stays in view while the content scrolls */
.v5-split { display: grid; gap: 2rem; }
@media (min-width: 1024px) {
  .v5-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .v5-split__head { position: sticky; top: calc(var(--nav-h, 88px) + 2rem); }
}


/* =================== The groups (Build, Add, Run) =================== */
.v5-group { --pt: clamp(2.5rem, 1.5rem + 3vw, 4rem); position: relative; display: grid; gap: 1.75rem; padding-block: var(--pt); scroll-margin-top: 96px; }
.v5-group:first-child { --top: 0px; padding-top: 0; }
.v5-group:last-child { padding-bottom: 0; }
.v5-group + .v5-group { border-top: 1px solid var(--line); }
.v5-group__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; }
.v5-group__mark {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card); color: var(--blue);
}
.v5-group__name { margin: 0; font: 800 clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem)/1 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink); }
.v5-group__line { grid-column: 1 / -1; margin: 0.875rem 0 0; max-width: 34ch; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-soft); }
.v5-group__name, .v5-group__line { min-width: 0; }
@media (min-width: 1024px) {
  .v5-group { grid-template-columns: minmax(0, 3.3fr) minmax(0, 8.7fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .v5-group__head { column-gap: 20px; }
  .v5-group__mark { grid-row: 1 / span 2; align-self: start; width: 64px; height: 64px; }
  .v5-group__line { grid-column: 2; margin-top: 0.625rem; }
  /* the order a project lives through: a dashed wire from each group's mark down to the next,
     in the marks' own gutter */
  .v5-group:not(:last-child)::after {
    content: ''; position: absolute; left: 32px; top: calc(var(--top, var(--pt)) + 72px); bottom: calc(-1 * var(--pt) + 8px);
    border-left: 1px dashed rgba(0, 85, 255, 0.4); pointer-events: none;
  }
}
.v5-glyph { width: 40px; height: 40px; overflow: visible; }
@media (min-width: 1024px) { .v5-glyph { width: 44px; height: 44px; } }
.v5-glyph .dr { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.v5-glyph .dr--frame { stroke-width: 1.75; }
.v5-glyph .dr--soft { stroke-width: 1.5; opacity: 0.6; }
.v5-glyph [data-fill="paper"] { fill: var(--surface); }
.v5-glyph .dr-live { fill: var(--success-fill); animation: none; }
/* where the browser can tie motion to scrolling, each mark draws itself as it comes into view */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .v5-glyph .dr { stroke-dasharray: 1; animation: v5-draw-in linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
    @keyframes v5-draw-in { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  }
}

.v5-tiles { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.v5-tiles > li { display: grid; }
@media (min-width: 600px) { .v5-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .v5-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* =================== Outlined cards (.v5-card) =================== */
.v5-card {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto 1fr; grid-template-areas: "ic . go" "body body body";
  row-gap: 1.125rem; min-height: 100%; padding: 22px;
  border-radius: var(--v5-r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink); text-decoration: none;
  transition: box-shadow var(--v5-base) var(--v5-ease), transform var(--v5-base) var(--v5-ease);
}
.v5-card__ic { grid-area: ic; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--blue-wash); color: var(--blue); transition: background-color var(--v5-fast) ease-out, color var(--v5-fast) ease-out; }
.v5-card__go { grid-area: go; align-self: start; font: 400 1.0625rem/1 var(--font-mono); color: var(--text-muted); transition: transform var(--v5-base) var(--v5-ease), color var(--v5-fast) ease-out; }
.v5-card__body { grid-area: body; display: grid; gap: 6px; align-content: start; }
.v5-card__k { font: 400 0.6875rem/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); }
.v5-card__name { font: 700 1.1875rem/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.v5-card__line { font-size: 0.9375rem; line-height: 1.45; color: var(--text-muted); }
@media (max-width: 599px) {
  .v5-card { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; grid-template-areas: "ic body go"; column-gap: 16px; align-items: center; padding: 16px 18px; }
  .v5-card--also { padding: 14.5px 16.5px; }
  .v5-card__ic { width: 40px; height: 40px; }
  .v5-card__go { align-self: center; }
  .v5-card__name { font-size: 1.0625rem; }
  .v5-card__line { font-size: 0.875rem; }
  .v5-tiles { gap: 12px; }
}
/* registration marks at the corners, as on a drawing sheet: they appear on hover and focus */
.v5-card::before {
  --c: var(--blue); --l: 10px; --w: 1.5px;
  content: ''; position: absolute; inset: -7px; pointer-events: none; opacity: 0; transform: scale(0.97);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 0 0 / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 100% 0 / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 0 100% / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 100% 100% / var(--w) var(--l);
  background-repeat: no-repeat;
  transition: opacity var(--v5-fast) ease-out, transform var(--v5-base) var(--v5-ease);
}
.v5-card:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blue), 0 22px 44px -26px rgba(0, 85, 255, 0.55); }
.v5-card:focus-visible::before { opacity: 1; transform: none; }
.v5-card:focus-visible .v5-card__go { transform: translateX(4px); color: var(--blue); }
@media (hover: hover) {
  .v5-card:hover { color: var(--ink); transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--blue), 0 22px 44px -26px rgba(0, 85, 255, 0.55); }
  .v5-card:hover::before { opacity: 1; transform: none; }
  .v5-card:hover .v5-card__ic { background: var(--blue); color: var(--on-accent); }
  .v5-card:hover .v5-card__go { transform: translateX(4px); color: var(--blue); }
}
.v5-card:active { transform: scale(0.99); transition-duration: var(--v5-fast); }
/* "Also": a dashed outline, for a link that sits beside the group rather than in it */
.v5-card--also { background: transparent; box-shadow: none; border: 1.5px dashed var(--line-heavy); padding: 20.5px; }
.v5-card--also .v5-card__ic { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (hover: hover) {
  .v5-card--also:hover { border-color: var(--blue); background: var(--surface); box-shadow: 0 22px 44px -26px rgba(0, 85, 255, 0.45); }
}
.v5-card--also:focus-visible { border-color: var(--blue); box-shadow: none; }


/* =================== The stacks: one card per layer of the system =================== */
.v5-stacks { display: grid; gap: 16px; margin: 0; }
@media (min-width: 600px) { .v5-stacks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v5-stack {
  display: grid; align-content: start; gap: 14px; padding: 20px 22px 22px;
  border-radius: var(--v5-r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card);
}
.v5-stack dt { display: flex; align-items: center; gap: 10px; font: 400 0.75rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.v5-stack dt .ic { flex: none; color: var(--blue); }
.v5-stack dd { margin: 0; }
.v5-chips li { background: var(--paper); border-color: var(--line-strong); color: var(--ink-soft); }


/* =================== The closing band at night (the shared .cta-band) =================== */
.v5 .cta-band {
  position: relative; isolation: isolate; overflow: hidden; border-top: 0;
  background-color: var(--v5-night); background-image: var(--v5-grid-night); background-size: var(--v5-grid-size);
  color: var(--v5-on-night-2);
}
/* the ruler again where the night comes back, and the light behind Rift */
.v5 .cta-band::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--v5-ruler); background-position: 0 0, 0 0; transform: scaleY(-1); pointer-events: none; }
.cta-band__sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(38% 80% at 10% 55%, rgba(47, 107, 255, 0.34), transparent 72%); }
.v5 .cta-band .v5-beam { left: 30%; }
.v5 .cta-band__inner { padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); }
@media (min-width: 900px) {
  .v5 .cta-band__inner { grid-template-columns: auto minmax(0, 1fr) minmax(260px, 320px); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .v5 .cta-band__title { max-width: 18ch; }
  /* the three ways in, stacked in their own column, so the words get the width */
  .v5 .cta-band__actions { flex-direction: column; }
  .v5 .cta-band__actions .btn { justify-content: flex-start; }
  .v5 .cta-band__actions .btn__arrow { margin-left: auto; }
}
.cta-band__rift {
  display: grid; place-items: center; width: 88px; height: 88px; border-radius: 22px;
  background: rgba(0, 85, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(126, 166, 255, 0.35), 0 0 60px -10px rgba(47, 107, 255, 0.85);
}
.cta-band__rift .rift-face { border-radius: 12px; }
@media (max-width: 899px) { .cta-band__rift { width: 72px; height: 72px; border-radius: 18px; } .cta-band__rift .rift-face { width: 44px; height: 44px; } }
.v5 .cta-band__title { color: #FFFFFF; }
.v5 .cta-band__text { color: var(--v5-on-night-2); }
.v5 .cta-band .btn--primary { box-shadow: 0 10px 40px -12px rgba(31, 102, 255, 0.85); }
.v5 .cta-band .btn--primary:hover { box-shadow: 4px 4px 0 var(--v5-line); }
.v5 .cta-band .btn--ghost { color: var(--v5-on-night); border-color: rgba(238, 243, 255, 0.34); }
.v5 .cta-band .btn--ghost:hover, .v5 .cta-band .btn--ghost:focus-visible { color: #FFFFFF; border-color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
/* one night from the closing band down through the footer, with a hairline where they meet */
.v5 .footer { margin-top: 0; border-top: 1px solid rgba(126, 166, 255, 0.16); }
@media (max-width: 599px) { .v5 .cta-band__actions .btn { flex: 1 1 100%; justify-content: center; } }


/* =================== Reduced motion: everything drawn, nothing moving =================== */
@media (prefers-reduced-motion: reduce) {
  .v5-draw .dr, .v5-draw .dr--edge { animation: none; stroke-dashoffset: 0; }
  .v5-draw .dr--edge { stroke-dasharray: 0.006 0.006; }
  .v5-draw .dr[data-fill="blue"] { animation: none; stroke-dashoffset: 0; fill-opacity: 1; }
  .dr-label, .dr-port, .dr-live { animation: none; }
  .dr-pks { display: none; }
  .v5-hero__sky > .v5-beam, .cta-band__sky > .v5-beam { animation: none; }   /* the light stays, still */
}


/* ======================================================================
   BATCH 1 (2026-10-27): Plans, How we work, About, Work, the case studies, Industries
   ====================================================================== */

/* --- more drawing parts --- */
.v5-draw .dr[data-fill="night"] { fill: var(--v5-night); }
.dr-label--dim { fill: var(--v5-line); }
.dr-label--stamp { font-size: 17px; letter-spacing: 0.26em; fill: var(--v5-on-night); }
.dr-slash { fill: none; stroke: #FFFFFF; stroke-width: 5; stroke-linecap: round; animation: v5-in var(--v5-base) ease-out calc(var(--v5-d0) + var(--v5-span)) both; }
.dr-ic { color: var(--v5-line); animation: v5-in var(--v5-fade) ease-out calc(var(--v5-d0) + var(--i, 0) * var(--v5-step, 100ms)) both; }
.dr-ic path, .dr-ic circle { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Rift on the desk's screen: his eyes blink now and then */
.dr-eye { fill: #FFFFFF; transform-box: fill-box; transform-origin: center; animation: v5-in var(--v5-fade) ease-out calc(var(--v5-d0) + var(--i, 0) * var(--v5-step, 100ms)) both, v5-eye 5.2s ease-in-out var(--v5-done) infinite; }
@keyframes v5-eye { 0%, 93%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(0.12); } }
.dr-mouth { fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: v5-in var(--v5-fade) ease-out calc(var(--v5-d0) + var(--i, 0) * var(--v5-step, 100ms)) both; }

/* a tap on the phone's button */
.dr-tap { fill: none; stroke: #FFFFFF; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: v5-tap 3.6s ease-out var(--v5-done) infinite; }
@keyframes v5-tap { 0% { transform: scale(0.4); opacity: 0.9; } 45% { transform: scale(1.9); opacity: 0; } 100% { opacity: 0; } }
.is-still .dr-eye, .is-away .dr-eye, .is-still .dr-tap, .is-away .dr-tap { animation-play-state: paused; }

/* --- a case study's hero: its own screenshots at night --- */
.v5-hero--shot .v5-hero__art { max-width: 680px; }
.v5-hero .spec__desktop { border-color: rgba(126, 166, 255, 0.35); background: var(--v5-night-2); box-shadow: 0 0 0 1px rgba(126, 166, 255, 0.12), 0 40px 90px -40px rgba(47, 107, 255, 0.75); }
.v5-hero .spec__bar { background: var(--v5-night-2); border-bottom-color: rgba(126, 166, 255, 0.2); }
.v5-hero .spec__bar i { background: rgba(126, 166, 255, 0.45); }
.v5-hero .spec__bar span { color: var(--v5-on-night-2); }
.v5-hero .spec__dim, .v5 .work-card__img--visual .spec__dim {
  border-inline-color: var(--v5-line); color: var(--v5-line);
  background:
    linear-gradient(var(--v5-line), var(--v5-line)) left center / calc(50% - 2.4em) 1px no-repeat,
    linear-gradient(var(--v5-line), var(--v5-line)) right center / calc(50% - 2.4em) 1px no-repeat;
}
.v5-hero .spec__phone { box-shadow: 0 0 0 1px rgba(126, 166, 255, 0.35), -14px 18px 44px rgba(0, 0, 0, 0.55); }
.v5-hero .spec__notes span { background: rgba(19, 28, 49, 0.85); border-color: rgba(126, 166, 255, 0.3); color: var(--v5-on-night); }
.v5-hero .spec__notes span::before { color: var(--v5-line); }

/* --- section heads, columns, outlined boxes --- */
.v5-sec--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }
.v5-head { max-width: 62ch; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.v5-split .v5-head { margin-bottom: 0; }
.v5-sec--night .v5-kicker { color: var(--v5-line); }
.v5-split--center { align-items: center; }
.v5-more { margin-top: 2rem; font-size: 1rem; color: var(--ink-soft); }
.v5-more span { margin-right: 0.35rem; color: var(--text-muted); }

.v5-cols { display: grid; gap: 16px; margin: 0; }
@media (min-width: 640px) {
  .v5-cols--2, .v5-cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v5-cols--2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) { .v5-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.v5-box {
  display: flex; flex-direction: column; gap: 10px; padding: 24px;
  border-radius: var(--v5-r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card);
}
.v5-box__ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 10px; background: var(--blue-wash); color: var(--blue); }
.v5-box__t > .v5-box__ic { margin-bottom: 16px; }
.v5-box__k { margin: 0; font: 400 0.75rem/1.45 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.v5-box__t { margin: 0; font: 700 1.1875rem/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.v5-box__d { margin: 0; font-size: 0.96875rem; line-height: 1.6; color: var(--ink-soft); }
.v5-box__price { margin: auto 0 0; padding-top: 14px; border-top: 1px dashed var(--line-strong); font: 400 0.9375rem/1.4 var(--font-mono); color: var(--ink); }
.v5-box--model .v5-box__d { margin-bottom: 6px; }

/* --- How we work: the five steps on one rail --- */
.v5-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.v5-step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; padding-bottom: 16px; }
.v5-step__node {
  position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 6px var(--paper);
}
.v5-step__n { font: 400 0.875rem/1 var(--font-mono); color: var(--accent-text); }
.v5-step:not(:last-child)::before { content: ''; position: absolute; left: 23.5px; top: 48px; bottom: 0; border-left: 1.5px dashed rgba(0, 85, 255, 0.4); }
.v5-step__card {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px;
  border-radius: var(--v5-r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card);
}
.v5-step__ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 10px; background: var(--blue-wash); color: var(--blue); }
.v5-step__t { margin: 0; font: 700 1.25rem/1.2 var(--font-display); color: var(--ink); }
.v5-step__d { margin: 0; font-size: 0.96875rem; line-height: 1.6; color: var(--ink-soft); }
.v5-step:last-child .v5-step__node { background: var(--blue); box-shadow: 0 0 0 6px var(--paper); }
.v5-step:last-child .v5-step__n { color: var(--on-accent); }
@media (min-width: 1100px) {
  .v5-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 16px; }
  .v5-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: 20px; padding-bottom: 0; }
  .v5-step:not(:last-child)::before { left: 48px; right: -16px; top: 23.5px; bottom: auto; border-left: 0; border-top: 1.5px dashed rgba(0, 85, 255, 0.4); }
}

/* --- links that leave the site, on a night band (How we work: check our work) --- */
.v5-links { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.v5-link {
  display: grid; grid-template-columns: auto minmax(0, 1fr) ; grid-template-areas: "ic k" "ic t"; align-items: center; column-gap: 16px; row-gap: 4px;
  padding: 18px 20px; border-radius: var(--v5-r); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(126, 166, 255, 0.22);
  color: var(--v5-on-night); transition: background-color var(--v5-fast) ease-out, box-shadow var(--v5-fast) ease-out, transform var(--v5-base) var(--v5-ease);
}
.v5-link__ic { grid-area: ic; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(0, 85, 255, 0.2); color: var(--v5-line); }
.v5-link__k { grid-area: k; font: 400 0.75rem/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--v5-line); }
.v5-link__t { grid-area: t; font: 700 1.125rem/1.3 var(--font-display); color: #FFFFFF; }
.v5-link:focus-visible { outline: 2px solid var(--v5-focus-night); outline-offset: 3px; }
@media (hover: hover) {
  .v5-link:hover { color: var(--v5-on-night); transform: translateY(-2px); background: rgba(47, 107, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(126, 166, 255, 0.6); }
}
.v5-sec--night .v5-split { row-gap: 2rem; }

/* --- Rift beside a section's title, on a day section --- */
.v5-rift-ask {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 1.5rem; padding: 8px 18px 8px 8px; min-height: 52px;
  border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card);
  font: 400 0.8125rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  transition: box-shadow var(--v5-fast) ease-out;
}
.v5-rift-ask .v5-rift__face { width: 38px; height: 38px; border-radius: 50%; }
.v5-rift-ask .v5-rift__on { box-shadow: 0 0 0 2px var(--surface); }
.v5-rift-ask:hover, .v5-rift-ask:focus-visible { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--blue), var(--shadow-card); }
.v5-rift-ask span:last-child { transition: transform var(--v5-base) var(--v5-ease); }
.v5-rift-ask:hover span:last-child { transform: translateX(3px); }

/* --- questions: outlined cards --- */
.v5 .faq__list { display: grid; gap: 12px; border-top: 0; }
.v5 .faq__item { border: 0; border-radius: var(--v5-r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow var(--v5-fast) ease-out; }
.v5 .faq__item[open] { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--blue), var(--shadow-card); }
.v5 .faq__item > summary { padding: 18px 22px; font-size: 1.0625rem; }
.v5 .faq__item > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--v5-r); }
.v5 .faq__answer { padding: 0 22px 22px; }
@media (min-width: 1024px) { .v5 .faq .v5-split__head { position: sticky; top: calc(var(--nav-h, 88px) + 2rem); } }

/* --- About: the founder, his photo framed like a drawing sheet, the studio's facts --- */
.v5-founder { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .v5-founder { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 5vw, 5rem); } }
.v5-photo { position: relative; max-width: 480px; margin: 10px; }
.v5-photo img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-float); }
.v5-photo::before {
  --c: var(--blue); --l: 16px; --w: 1.5px;
  content: ''; position: absolute; inset: -10px; pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 0 0 / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 100% 0 / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 0 100% / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 100% 100% / var(--w) var(--l);
  background-repeat: no-repeat;
}
.v5-founder__role { margin: 1rem 0 0.5rem; }
.v5-founder__text > p:not(.v5-kicker) { margin-top: 1.125rem; max-width: 62ch; font-size: 1.0625rem; line-height: 1.75; color: var(--ink-soft); }

.v5-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0; }
.v5-facts:first-child { margin-top: 0; }
@media (min-width: 900px) { .v5-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v5-facts > div { display: grid; align-content: start; gap: 6px; padding: 18px 20px; border-radius: var(--v5-r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.v5-facts dt { font: 400 0.75rem/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.v5-facts dd { margin: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.35; color: var(--ink); }

/* --- a case study: its sections as an editorial spread, its numbers at night --- */
.v5-case { display: grid; margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.v5-case__block { display: grid; gap: 1rem; padding-block: clamp(1.75rem, 1.25rem + 2vw, 3rem); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .v5-case__block { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(2rem, 5vw, 5rem); } }
.v5-case__h { margin: 0; font: 800 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.1 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink); }
.v5-case__h::before { content: ''; display: block; width: 28px; height: 2px; margin-bottom: 14px; background: var(--blue); }
.v5-case__body p { max-width: 66ch; font-size: 1.0625rem; line-height: 1.75; color: var(--ink-soft); }
.v5-case__body p + p { margin-top: 1rem; }

.v5-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .v5-numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v5-numbers__item { display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(126, 166, 255, 0.22); }
.v5-numbers__n { font: 800 clamp(2.25rem, 1.5rem + 3vw, 3.75rem)/1 var(--font-display); letter-spacing: -0.02em; color: #FFFFFF; }
.v5-numbers__l { font-size: 0.9375rem; line-height: 1.45; color: var(--v5-on-night-2); }
.v5-stackline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 1.75rem; }
.v5-stackline__k { font: 400 0.75rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--v5-line); }
.v5-sec--night .v5-chips li { background: rgba(255, 255, 255, 0.04); border-color: rgba(126, 166, 255, 0.3); color: var(--v5-on-night); }

/* --- Industries: the jump list and one outlined card per industry --- */
.v5-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.v5-jump a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 12px; border-radius: 999px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 0.9375rem; color: var(--ink-soft);
  transition: box-shadow var(--v5-fast) ease-out, color var(--v5-fast) ease-out;
}
.v5-jump a .ic { flex: none; color: var(--blue); }
.v5-jump a:hover, .v5-jump a:focus-visible { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--blue); }
.v5-inds { display: grid; gap: 16px; }
@media (min-width: 900px) {
  .v5-inds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v5-inds > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.v5-ind {
  display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 2vw, 30px); scroll-margin-top: 96px;
  border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card);
}
.v5-ind:target { box-shadow: inset 0 0 0 2px var(--blue), var(--shadow-float); }
.v5-ind__head { display: flex; align-items: center; gap: 14px; }
.v5-ind__ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--blue-wash); color: var(--blue); }
.v5-ind__name { margin: 0; font: 800 clamp(1.1875rem, 1rem + 0.7vw, 1.4375rem)/1.15 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink); }
.v5-ind__problem { font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }
.v5-ind .ticks { margin-bottom: auto; }
.v5-ind__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.v5-ind__links > span { margin-right: 4px; font: 400 0.75rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.v5-ind__links a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 0.875rem; color: var(--accent-text);
  transition: box-shadow var(--v5-fast) ease-out, background-color var(--v5-fast) ease-out;
}
.v5-ind__links a:hover, .v5-ind__links a:focus-visible { background: var(--blue-wash); box-shadow: inset 0 0 0 1px var(--blue); }
@media (pointer: coarse) { .v5-ind__links a { min-height: 40px; } }

/* --- Work: the project cards keep their stack; their drawings sit at night --- */
.v5 .work-card { border: 0; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card); }
.v5 .work-card:hover, .v5 .work-card.is-active { box-shadow: inset 0 0 0 1.5px var(--blue), var(--shadow-float); }
.v5 .work-card__img--visual {
  background-color: var(--v5-night);
  background-image: radial-gradient(90% 80% at 20% 0%, rgba(47, 107, 255, 0.3), transparent 65%), var(--v5-grid-night);
  background-size: 100% 100%, var(--v5-grid-size);
}
.v5 .work-card__img--visual .spec__desktop { border-color: rgba(126, 166, 255, 0.3); box-shadow: 0 30px 70px -36px rgba(47, 107, 255, 0.8); }
.v5 .work-card__img--visual .spec__phone { box-shadow: 0 0 0 1px rgba(126, 166, 255, 0.35), -14px 18px 40px rgba(0, 0, 0, 0.5); }
.v5 .work-card__badge { background: rgba(10, 16, 32, 0.88); border-color: rgba(126, 166, 255, 0.35); color: var(--v5-on-night); }
.v5 .work-card__badge b { color: var(--v5-line); }

/* --- Plans: the promise at night, Rift by the picker, the cards and tables restyled --- */
.v5 .plans__intro { gap: 16px; }
.v5 .plans__promise {
  align-items: center; gap: 0.5rem 1.25rem; padding: clamp(20px, 2.5vw, 28px) clamp(20px, 3vw, 32px); border: 0; border-radius: 14px;
  background-color: var(--v5-night); background-image: radial-gradient(60% 120% at 100% 50%, rgba(47, 107, 255, 0.35), transparent 70%), var(--v5-grid-night);
  background-size: 100% 100%, var(--v5-grid-size);
  font: 700 clamp(1.25rem, 1rem + 1.1vw, 1.875rem)/1.25 var(--font-display); letter-spacing: -0.01em; color: #FFFFFF;
}
.v5 .plans__promise span { color: var(--v5-line); }
.v5 .fit { position: relative; border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card); }
.v5-fit__rift {
  position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--blue-wash); box-shadow: inset 0 0 0 1px rgba(0, 85, 255, 0.25);
}
.v5-fit__rift .rift-face { border-radius: 9px; }
.v5-fit__rift .v5-rift__on { box-shadow: 0 0 0 2px var(--surface); }
@media (min-width: 640px) {
  .v5 .fit { grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; }
  .v5 .fit > :not(.v5-fit__rift) { grid-column: 2; }
  .v5-fit__rift { grid-row: 1 / span 2; }
}
.v5 .chip span { border-radius: 999px; }
.v5 .plans__note { border: 0; border-radius: var(--v5-r); box-shadow: inset 3px 0 0 var(--warn); }
.v5 .plans { gap: 16px; }
.v5 .plan { border: 0; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card); }
.v5 .plan--free { box-shadow: inset 0 0 0 2px var(--blue), 0 24px 50px -28px rgba(0, 85, 255, 0.5); }
.v5 .plan.is-pick { box-shadow: inset 0 0 0 2px var(--blue), var(--shadow-float); }
.v5 .plan.is-pick::before { top: 0; right: 0; border-bottom-left-radius: 10px; }
.v5 .plan__more { border-top: 1px dashed var(--line-strong); }
.v5 .compare { border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.v5 .compare table { border-collapse: separate; border-spacing: 0; }

/* the general comparison is the page's night moment: the table at night, WebRift's column lit */
.v5-compare .compare { background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(126, 166, 255, 0.25); }
.v5-compare .compare th, .v5-compare .compare td { border-bottom-color: rgba(255, 255, 255, 0.08); color: var(--v5-on-night-2); }
.v5-compare .compare thead th { background: var(--v5-night-2); color: var(--v5-on-night-2); }
.v5-compare .compare tbody th { color: #FFFFFF; }
.v5-compare .compare thead th:first-child, .v5-compare .compare tbody th { background: var(--v5-night-2); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.08); }
.v5-compare .compare .compare__us { background: rgba(0, 85, 255, 0.2); color: #FFFFFF; }
.v5-compare .compare thead .compare__us { color: var(--v5-line); }
.v5-compare .compare:focus-visible { outline-color: var(--v5-focus-night); }
.v5-compare .compare__note { color: var(--v5-on-night-2); }

/* --- the services overview: each group's head travels with its cards (2026-10-27) --- */
@media (min-width: 1024px) { .v5-group__head { position: sticky; top: calc(var(--nav-h, 88px) + 1.5rem); } }

@media (prefers-reduced-motion: reduce) {
  .dr-ic, .dr-slash, .dr-eye, .dr-mouth, .dr-mark { animation: none; }
  .dr-tap { display: none; }
}

/* --- refinements after the first look (2026-10-27) --- */
/* a long headline a step smaller (nightHero marks it), within about five lines at every size */
@media (max-width: 599px) { .v5-hero__title--long { font-size: min(clamp(1.25rem, 6.8vw, 2rem), var(--v5-fit, 100vw)); } }
@media (min-width: 600px) and (max-width: 1023px) { .v5-hero__title--long { font-size: min(clamp(2rem, 0.8rem + 3vw, 2.75rem), var(--v5-fit, 100vw)); } }
@media (min-width: 1024px) { .v5-hero__title--long { font-size: min(clamp(2rem, 0.6rem + 2.3vw, 2.875rem), var(--v5-fit, 100vw)); } }
/* a section title never splits a word; beside its content it is set a step smaller */
.v5-title { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.v5-split__head .v5-title, .v5-split > .v5-head .v5-title { font-size: clamp(1.625rem, 1rem + 1.5vw, 2.25rem); }

.v5-hero .spec__phone .spec__dim { text-shadow: 0 0 4px var(--v5-night), 0 0 10px var(--v5-night); }
/* the way on from a case study: one dashed card */
.v5-next { max-width: 420px; }
/* the plans' steps sit closer together: the page is long */
.v5 .plans__group { padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
/* on tablets the drawing stays a supporting picture under the words, not a second screen */
@media (min-width: 600px) and (max-width: 1023px) { .v5-hero__art { max-width: 500px; } }
/* in a case-study hero the notes wrap before the phone, which overlaps the bottom right */
.v5-hero .spec__notes { margin-right: 27%; }


/* ======================================================================
   BATCH 2 (2026-10-27): the service pages, Insights, Contact, Start, Events, the client pages,
   Links, the policies and the 404
   ====================================================================== */

/* --- drawing parts the new figures use --- */
.dr-mark { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: v5-in var(--v5-fade) ease-out calc(var(--v5-d0) + var(--v5-span)) both; }
.dr--col { stroke-width: 10; opacity: 0.5; }

/* --- hero variants --- */
/* a compact band where the page itself is the tool (Start): the words only, closer to the form */
.v5 .v5-hero--compact { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.v5-hero--compact .v5-hero__copy { max-width: 760px; }
/* the 404 fills the first screen: there is nothing below it but the way out */
.v5 .v5-hero--tall { min-height: min(100svh, 900px); display: grid; align-content: center; }
/* a ghost button at night (the 404's second way out) */
.v5-hero .btn--ghost { color: var(--v5-on-night); border-color: rgba(238, 243, 255, 0.34); }
.v5-hero .btn--ghost:hover, .v5-hero .btn--ghost:focus-visible { color: #FFFFFF; border-color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
@media (max-width: 599px) { .v5-hero__actions .btn--ghost { flex: 1 1 100%; justify-content: center; min-height: 52px; } }

/* a page's sections as a card of links, at night (the checklist, the policies) */
.v5-toc {
  padding: clamp(20px, 2.5vw, 28px); border-radius: 14px;
  background: rgba(19, 28, 49, 0.78); box-shadow: inset 0 0 0 1px rgba(126, 166, 255, 0.22), 0 40px 90px -50px rgba(47, 107, 255, 0.8);
}
.v5-toc__k { margin: 0 0 12px; font: 400 0.75rem/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--v5-line); }
.v5-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; }
.v5-toc__list li { counter-increment: toc; }
.v5-toc__list a {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: baseline; min-height: 44px; padding: 10px 4px;
  border-top: 1px solid rgba(126, 166, 255, 0.14); color: var(--v5-on-night); font-size: 1rem; line-height: 1.4;
  transition: color var(--v5-fast) ease-out, padding-left var(--v5-base) var(--v5-ease);
}
.v5-toc__list li:first-child a { border-top: 0; }
.v5-toc__list a::before { content: counter(toc, decimal-leading-zero); font: 400 0.75rem/1 var(--font-mono); color: var(--v5-line); }
.v5-toc__list a:hover, .v5-toc__list a:focus-visible { color: #FFFFFF; }
.v5-toc__list a:focus-visible { outline: 2px solid var(--v5-focus-night); outline-offset: 2px; border-radius: 6px; }

/* a form in the hero, at night (Track): the field and its note keep their day size and states */
.v5-panel--night { padding: clamp(20px, 2.5vw, 28px); border-radius: 14px; background: rgba(19, 28, 49, 0.85); box-shadow: inset 0 0 0 1px rgba(126, 166, 255, 0.25), 0 40px 90px -50px rgba(47, 107, 255, 0.8); }
.v5-panel--night .track__label { color: var(--v5-line); }
.v5-panel--night .track__note { color: var(--v5-on-night-2); }
.v5-panel--night .track__input { border-radius: 10px; }
.v5-hero--form .v5-hero__art { align-self: center; }

/* an outlined panel on a day section (the clients' forms) */
.v5-panel { min-width: 0; padding: clamp(20px, 2.5vw, 32px); border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card); }

/* --- three columns of boxes (a service's deliverables) --- */
@media (min-width: 640px) { .v5-cols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .v5-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v5-facts--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .v5-facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- a service page --- */
.v5-split--you { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.v5-ticks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.v5-ticks li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 20px;
  border-radius: var(--v5-r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 1.0625rem; line-height: 1.55; color: var(--ink);
}
.v5-ticks .ic { margin-top: 2px; color: var(--success); }

.v5-fixes { display: grid; gap: 16px; }
@media (min-width: 640px) { .v5-fixes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .v5-fixes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v5-fix {
  display: flex; flex-direction: column; gap: 12px; padding: 22px;
  border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card); color: var(--ink);
  transition: box-shadow var(--v5-fast) ease-out, transform var(--v5-base) var(--v5-ease);
}
.v5-fix__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.v5-fix__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--blue-wash); color: var(--blue); }
.v5-fix__ind { font: 400 0.75rem/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.v5-fix__go { font-family: var(--font-mono); color: var(--text-muted); transition: transform var(--v5-base) var(--v5-ease), color var(--v5-fast) ease-out; }
.v5-fix__problem { padding-bottom: 12px; border-bottom: 1px dashed var(--line-strong); font-size: 0.9375rem; line-height: 1.5; color: var(--text-muted); }
.v5-fix__fix { font-size: 1.0625rem; line-height: 1.55; color: var(--ink); }
.v5-fix:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (hover: hover) {
  .v5-fix:hover { color: var(--ink); transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--blue), 0 22px 44px -26px rgba(0, 85, 255, 0.55); }
  .v5-fix:hover .v5-fix__go { transform: translateX(4px); color: var(--blue); }
}

/* what moves the price, at night: the things that shape it, the starting price, the stack */
.v5-moves__list { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: mv; }
.v5-moves__list li {
  counter-increment: mv; display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: baseline; padding: 18px 0;
  border-top: 1px solid rgba(126, 166, 255, 0.18); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.45; color: var(--v5-on-night);
}
.v5-moves__list li:last-child { border-bottom: 1px solid rgba(126, 166, 255, 0.18); }
.v5-moves__list li::before { content: counter(mv, decimal-leading-zero); font: 400 0.8125rem/1 var(--font-mono); color: var(--v5-line); }
.v5-moves .price {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 1.75rem; padding: 14px 20px;
  border-radius: var(--v5-r); background: rgba(0, 85, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(126, 166, 255, 0.4);
}
.v5-moves .price__label { font: 400 0.75rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--v5-line); }
.v5-moves .price__value { font: 800 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1 var(--font-display); color: #FFFFFF; }

@media (min-width: 640px) { .v5-tiles--work { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v5-also { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.v5-also .v5-kicker { margin: 0; }
.v5-also__list { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.v5-also__list .v5-card { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; grid-template-areas: "ic body go"; column-gap: 14px; align-items: center; padding: 10px 16px 10px 10px; }
.v5-also__list .v5-card__ic { width: 36px; height: 36px; }
.v5-also__list .v5-card__go { align-self: center; }
.v5-also__list .v5-card__name { font-size: 1rem; }

/* the hardware examples: outlined cards with their four steps */
.v5 .hw-card { border: 0; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card); }

/* --- Insights: the one note, as a featured card --- */
.v5 .note-card {
  position: relative; overflow: hidden; margin-bottom: 0; border: 0; border-radius: 16px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card);
  padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) clamp(32px, 4vw, 56px);
  transition: box-shadow var(--v5-fast) ease-out, transform var(--v5-base) var(--v5-ease);
}
.v5 .note-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--blue); }
.v5 .note-card__title { font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.v5 .note-card__link { display: inline-flex; align-items: center; min-height: 44px; }
.v5 .note-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (hover: hover) { .v5 .note-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--blue), 0 30px 60px -32px rgba(0, 85, 255, 0.55); } }

/* the checklist article: each part a spread (its name and why on the left, the checks on the right) */
.v5 .article__inner { max-width: var(--container-max); }
.v5 .article__by { margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.v5 .article__part { margin: 0; padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.v5 .article__part .v5-split__head { top: calc(var(--nav-h, 88px) + 1.5rem); }
.v5 .article__n { margin: 0 0 10px; font: 400 0.8125rem/1 var(--font-mono); letter-spacing: 0.14em; color: var(--accent-text); }
.v5 .article__h { margin-bottom: 0.75rem; overflow-wrap: normal; }
.v5 .article__intro { max-width: 40ch; margin-bottom: 0; }
.v5 .checks { gap: 12px; }
.v5 .checks li { border: 0; border-radius: var(--v5-r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); padding: 18px 20px 18px 3.5rem; font-size: 1rem; }
.v5 .checks li::before { left: 18px; top: 18px; border-radius: 6px; }
.v5 .article__close { max-width: 62ch; margin: 2.5rem 0 0; padding: 20px 24px; border-radius: var(--v5-r); background: var(--blue-wash); box-shadow: inset 3px 0 0 var(--blue); }

/* --- the policies: one readable column of day text --- */
.v5 .doc { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }
.v5 .doc__inner { max-width: 760px; }
.v5 .doc__part { padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.v5 .doc__part:first-child { padding-top: 0; border-top: 0; }
.v5 .doc__h { margin: 0 0 0.875rem; font: 800 clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem)/1.15 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink); }
.v5 .doc__h::before { content: ''; display: block; width: 28px; height: 2px; margin-bottom: 12px; background: var(--blue); }
.v5 .doc__inner p, .v5 .doc__list li { max-width: 68ch; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); }
.v5-hero--doc .v5-hero__title { font-size: min(clamp(2.5rem, 1.5rem + 5vw, 4.5rem), var(--v5-fit, 100vw)); }

/* --- Contact: the cards outlined, the accent card stays the action blue --- */
.v5 .contact-hub__h { margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 1rem; color: var(--accent-text); }
.v5 .contact-hub__head { margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 1rem; }
.v5 .contact-cards { gap: 16px; }
@media (min-width: 860px) { .v5 .contact-cards:not(.contact-cards--four):not(.contact-cards--two) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v5 .contact-card {
  position: relative; border: 0; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card);
  transition: box-shadow var(--v5-fast) ease-out, transform var(--v5-base) var(--v5-ease);
}
.v5 .contact-card--accent { background: var(--blue); box-shadow: 0 24px 50px -28px rgba(0, 85, 255, 0.7); }
@media (hover: hover) {
  .v5 a.contact-card:hover, .v5 button.contact-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--blue), 0 22px 44px -26px rgba(0, 85, 255, 0.55); }
  .v5 .contact-card--accent:hover { box-shadow: 4px 4px 0 var(--ink), 0 24px 50px -28px rgba(0, 85, 255, 0.7); }
}
.v5 .contact-card .copy-btn { border-radius: 8px; }
.v5 .contact-facts { gap: 12px; margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-top: 0; border-top: 0; }
@media (min-width: 900px) { .v5 .contact-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v5 .contact-facts p { margin: 0; padding: 16px 20px; border-radius: var(--v5-r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* --- Start: the planner on a white card, what happens next at night beside it --- */
.v5 .start__grid { gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.v5 .inquiry { min-width: 0; padding: clamp(20px, 3vw, 40px); border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card); }
.v5 .start__aside {
  border: 0; border-radius: 16px; color: var(--v5-on-night-2);
  background-color: var(--v5-night); background-image: radial-gradient(70% 60% at 100% 0%, rgba(47, 107, 255, 0.32), transparent 70%), var(--v5-grid-night);
  background-size: 100% 100%, var(--v5-grid-size);
}
@media (min-width: 1024px) { .v5 .start__aside { position: sticky; top: calc(var(--nav-h, 88px) + 1.5rem); } }
.v5 .start__aside-title { color: var(--v5-line); }
.v5 .start__steps li { color: var(--v5-on-night-2); }
.v5 .start__steps strong { color: #FFFFFF; }
.v5 .start__steps li::before { border-color: var(--v5-line); border-radius: 50%; color: var(--v5-line); }
.v5 .start__direct { border-top-color: rgba(126, 166, 255, 0.18); }
.v5 .start__direct-label { color: var(--v5-on-night-2); }
.v5 .start__direct-link { color: #FFFFFF; }
.v5 .start__direct-link:hover, .v5 .start__direct-link:focus-visible { color: var(--v5-line); }
.v5 .start__aside :focus-visible { outline-color: var(--v5-focus-night); }
.v5 .chip span { border-radius: 999px; }
.v5 .starter { border-radius: 999px; }
.v5 .field__input { border-radius: 10px; }

/* --- Events: the session's hero as a full night band; registration is the night moment --- */
.v5 .ev-hero__inner { overflow: visible; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.v5 .ev-hero__inner::before { content: none; }
.v5 .ev-hero .ev-hero__title { max-width: 20ch; }
.v5 .ev-count__cells li { border-radius: 10px; }
.v5 .ev-step, .v5 .ev-fit__col, .v5 .ev-host__grid { border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card); }
.v5 .ev-host__grid { background: var(--surface); }
.v5 .ev-host__photo { box-shadow: 0 0 0 4px var(--surface), 0 0 0 5.5px var(--blue); }
.v5 .section__title { font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
.v5 .ev-reg { background-color: var(--v5-night); }
.v5 .ev-reg__title { color: #FFFFFF; }
.v5 .ev-reg__lede, .v5 .ev-reg .ev-details dd { color: var(--v5-on-night); }
.v5 .ev-reg .ev-details dt { color: var(--v5-line); }
.v5 .ev-reg .ev-details > div { border-color: rgba(126, 166, 255, 0.18); }
.v5 .ev-reg__box { padding: clamp(20px, 3vw, 32px); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 40px 90px -40px rgba(47, 107, 255, 0.8); }
.v5 .ev-form input, .v5 .ev-form textarea { border-radius: 10px; }
.v5 .ev-sticky { border-top: 1px solid rgba(126, 166, 255, 0.2); background: rgba(10, 16, 32, 0.94); color: var(--v5-on-night); }

/* --- Links: the night of the heroes behind the column, at every size --- */
.v5.bare { min-height: 100vh; background-color: var(--v5-night); }
.v5.bare main > .v5-hero__sky { position: fixed; z-index: 0; overflow: hidden; }
.v5.bare .lk { position: relative; z-index: 1; }
@media (max-width: 759px) {
  .v5 .lk__name { color: #FFFFFF; }
  .v5 .lk__line, .v5 .lk__k, .v5 .lk__foot { color: var(--v5-on-night-2); }
  .v5 .lk__social a, .v5 .lk__foot a { color: var(--v5-on-night); }
  .v5 .lk__social a:hover, .v5 .lk__foot a:hover { color: var(--v5-line); }
  .v5 .lk__btn:not(.lk__btn--primary) { border-color: rgba(126, 166, 255, 0.28); background: rgba(19, 28, 49, 0.85); color: #FFFFFF; }
  .v5 .lk__btn:not(.lk__btn--primary) .lk__ic { color: var(--v5-line); }
  .v5 .lk__btn:not(.lk__btn--primary):hover { border-color: var(--v5-line); }
  .v5 .lk__btn:focus-visible, .v5 .lk-event:focus-visible { outline-color: var(--v5-focus-night); }
  .v5 .lk__avatar { border-color: var(--v5-night); box-shadow: 0 0 0 1.5px var(--v5-line), 0 0 40px -6px rgba(47, 107, 255, 0.8); }
}
.v5 .lk-event { background: rgba(0, 85, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(126, 166, 255, 0.45), 0 30px 60px -30px rgba(47, 107, 255, 0.8); }
@media (min-width: 760px) { .v5 .lk-event { background: var(--v5-night); } }

/* --- refinements after the first look at batch 2 --- */
/* a card without a mark: its words and its arrow on one row */
.v5-card--plain { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; grid-template-areas: "body go"; align-items: center; }
.v5-card--plain .v5-card__go { align-self: center; }
/* the events host card sits on the content's edges, like every other card */
.v5 .ev-host__grid { width: calc(100% - 2 * var(--container-pad)); max-width: calc(var(--container-max) - 2 * var(--container-pad)); }
/* the hero's form panel stays at night (it comes after .v5-panel in nothing but intent) */
.v5-panel.v5-panel--night { background: rgba(19, 28, 49, 0.85); box-shadow: inset 0 0 0 1px rgba(126, 166, 255, 0.25), 0 40px 90px -50px rgba(47, 107, 255, 0.8); }
.v5 .track__input { border-radius: 10px; }
.v5 .track__view { border: 0; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card); }
/* the events section titles (sectionHead) wrap on a phone instead of running off it */
.v5 .section__header { flex-wrap: wrap; }
.v5 .section__title { min-width: 0; overflow-wrap: normal; font-size: clamp(1.625rem, 1rem + 2vw, 2.75rem); text-wrap: balance; }
@media (max-width: 599px) { .v5 .section__line { display: none; } }
/* Pause motion sits in the hero's bottom right on every page; the hero keeps room for it under its content */
@media (max-width: 1023px) { .v5 .v5-hero { padding-bottom: calc(clamp(3.5rem, 2rem + 5vw, 6.5rem) + 24px); } }
@media (max-width: 599px) { .v5 .track__input { font-size: 0.875rem; letter-spacing: 0.04em; } }
/* A headline never runs out of its column (found by the overlap check, 2026-10-27: "SPREADSHEET."
   ran under the drawing at 1440). Its longest word (--lw, set by the page) fits the copy column:
   Syne’s capitals at weight 800 run up to about 1.2em a letter. */
.v5-hero__copy { container-type: inline-size; }
.v5-hero__title { --v5-fit: calc(100cqi / (var(--lw, 8) * 1.2)); }

/* Reduced motion, for the parts defined after the first such block: drawn at once, nothing moving */
@media (prefers-reduced-motion: reduce) {
  .dr-mark { animation: none; }
}

/* the chosen package in the short form (?offer=) matches the cards */
.v5 .pin { border-radius: 12px; }

/* the hardware examples: separate outlined cards, like every other grid of cards */
.v5 .hw-grid { gap: 16px; padding: 0; background: none; }

/* --- Campaigns (2026-10-27): each campaign's own look, the other campaigns, a promotion's
       package, and the "next event" band (src/pages/events.mjs; spec: the Studio's
       docs/plan/decisions/2026-10-26-events-campaigns.md) --- */
.v5 .ev-hero__copy { display: grid; justify-items: center; gap: 20px; min-width: 0; }
/* the accent: blue keeps the site's; violet and amber pass contrast on the night (green is "live") */
.v5 .ev-hero[data-accent="violet"] { --ev-accent: #C4B5FF; }
.v5 .ev-hero[data-accent="amber"] { --ev-accent: #FFC76E; }
.v5 .ev-hero[data-accent="violet"] .ev-hero__accent, .v5 .ev-hero[data-accent="violet"] .ev-hero__kicker,
.v5 .ev-hero[data-accent="amber"] .ev-hero__accent, .v5 .ev-hero[data-accent="amber"] .ev-hero__kicker { color: var(--ev-accent); }
/* its drawing, with Nox or Rift standing beside it: wide screens only, so a phone's first screen
   (the one its ads film) is the promise, the date and the button */
.v5 .ev-hero__art { display: none; }
@media (min-width: 1024px) {
  .v5 .ev-hero__inner--art { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; justify-items: stretch; column-gap: clamp(2.5rem, 5vw, 5rem); text-align: left; }
  .v5 .ev-hero__inner--art .ev-hero__copy { justify-items: start; }
  .v5 .ev-hero__inner--art .ev-facts, .v5 .ev-hero__inner--art .ev-pill { justify-content: flex-start; }
  .v5 .ev-hero__inner--art .ev-count { justify-items: start; }
  .v5 .ev-hero__art { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin: 0; }
  .v5 .ev-hero__art .v5-draw { width: 100%; height: auto; }
  .v5 .ev-hero__nox { width: clamp(96px, 9vw, 140px); height: auto; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.45)); }
  .v5 .ev-hero__rift { display: block; filter: drop-shadow(0 0 30px rgba(47, 107, 255, 0.55)); }
}

/* the other campaigns: what's coming, and what has passed */
.v5 .ev-cards { display: grid; gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .v5 .ev-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .v5 .ev-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v5 .ev-card {
  display: grid; align-content: start; gap: 10px; height: 100%; padding: 22px;
  border-radius: var(--v5-r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); text-decoration: none;
  transition: box-shadow var(--v5-base) var(--v5-ease), transform var(--v5-base) var(--v5-ease);
}
.v5 .ev-card:hover, .v5 .ev-card:focus-visible { box-shadow: inset 0 0 0 1.5px var(--blue), var(--shadow-card); transform: translateY(-2px); }
.v5 .ev-card__k { font: 400 0.6875rem/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.v5 .ev-card__t { font: 700 1.1875rem/1.25 var(--font-display); letter-spacing: -0.01em; }
.v5 .ev-card__go { font: 400 0.8125rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }

/* a promotion's package, at night: as Plans shows it, with one button */
.v5 .ev-offer__grid { display: grid; gap: 32px; }
@media (min-width: 1024px) { .v5 .ev-offer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; column-gap: clamp(2.5rem, 5vw, 5rem); } }
.v5 .ev-offer__k { margin: 0; font: 400 var(--text-xs) var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--v5-line); }
.v5 .ev-offer__title { margin: 12px 0 0; font: 800 clamp(2rem, 1.4rem + 2.4vw, 3rem)/1.05 var(--font-display); text-transform: uppercase; color: #FFFFFF; }
.v5 .ev-offer__line { max-width: 52ch; margin: 16px 0 0; font-size: var(--text-lg); line-height: 1.55; color: var(--v5-on-night-2); }
.v5 .ev-offer__box { display: grid; gap: 20px; padding: clamp(20px, 3vw, 32px); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 40px 90px -40px rgba(47, 107, 255, 0.8); }
.v5 .ev-offer__price { margin: 0; font: 700 clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem)/1.1 var(--font-display); }
.v5 .ev-offer__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.v5 .ev-offer__list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.v5 .ev-offer__list svg { margin-top: 3px; color: var(--success, #12B76A); }
.v5 .ev-offer__over { margin: 0; font: 700 var(--text-sm) var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }

/* the "next event" band, before the footer on the pages campaigns.json names */
.v5 .ev-band { position: relative; padding: 28px 0; background: var(--v5-night-2, #131C31); background-image: var(--v5-grid-night); background-size: var(--v5-grid-size); color: var(--v5-on-night, #EEF3FF); border-top: 1px solid rgba(126, 166, 255, 0.2); }
.v5 .ev-band__in { display: grid; gap: 12px; align-items: center; }
@media (min-width: 900px) { .v5 .ev-band__in { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 32px; } }
.v5 .ev-band__k { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 700 var(--text-xs) var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.v5 .ev-band__t { margin: 0; font: 700 var(--text-lg)/1.3 var(--font-display); color: #FFFFFF; }
.v5 .ev-band .btn { justify-self: start; }
.v5 .ev-band :focus-visible { outline-color: var(--v5-focus-night, #8FB2FF); }
@media (prefers-reduced-motion: reduce) { .v5 .ev-card { transition: none; } .v5 .ev-card:hover, .v5 .ev-card:focus-visible { transform: none; } }