/* ==========================================================================
   Home refresh (owner 2026-10-18), loaded by the home page only.
   1. Less red: the accent token turns neutral here, so headline halves,
      numbers, labels, bullets and hovers stop being red. Red stays on the
      main button and the "3D" in the hero, and both are a calmer crimson.
   2. Muted colours in crimson's harmony instead: brass for credits, dusty
      rose for the odd small mark, Blender's socket colours (toned down) in
      the node graphs.
   3. Lower contrast: a near-black that is not black, a softer white.
   4. No glows, no gradient washes. (Corners stay as they were: the owner
      kept the soft look for now, 2026-10-18.)
   Remove the <link> in index.html to go back to the previous look.
   ========================================================================== */
:root {
  /* surfaces: near-black, neutral grey, no colour tint (owner 2026-10-18) */
  --ink: #0a0a0a;
  --ink-2: #0e0e0e;
  --panel: #101010; /* a little darker (owner 2026-10-18) */
  --panel-2: #151515;
  --panel-3: #1c1c1c;
  --line: #232323;
  --line-2: #313131;

  /* text: softer, lower contrast */
  --bone: #eeeae7;
  --dust: #b8b0aa;
  --dim: #948c86;

  /* the accent no longer means red on this page */
  --accent: #d2c8c2;
  --accent-glow: transparent;

  /* the one red: calmer crimson for the main button */
  --accent-fill: #b5121b;
  --accent-fill-hover: #cc1622;
  --on-accent: #f4ebe7;
  --crimson: #a30f1a;

  /* crimson's muted harmony */
  --brass: #c4a06a;      /* credits, prices */
  --rose: #b98a86;       /* small marks, sparingly */
  --sage: #7fa197;       /* mesh / geometry */

  /* Blender's socket colours, toned down */
  --sock-color: #bdb66e; /* image and colour sockets (Blender: yellow) */
  --sock-geo: #5fae99;   /* mesh (Blender: geometry teal) */
  --sock-text: #8aa3c4;  /* text (Blender: string blue) */
  --sock-proc: #9189c2;  /* processors (Blender: vector purple) */
  --steel: var(--sock-geo);
  --grey-sock: var(--sock-text);

}

body { background: var(--ink); overflow-x: clip; } /* the examples grid runs past both edges */
::selection { background: #4a2a2e; color: var(--bone); }

/* ---------- the red that stays ---------- */
.hx-title em { color: var(--accent-fill); } /* the same red as the primary button (owner 2026-10-30) */
.btn-accent { box-shadow: none; }
.btn-accent:hover { box-shadow: none; transform: none; }

/* ---------- no glows, no washes ---------- */
.final-card { background: var(--panel); }
.calc-rate { background: var(--panel); }
.plan.featured { background: var(--panel); border-color: var(--line-2); }
.card .viewer { background: none; }
.lb-viewer, .scan { background: var(--ink-2); }
.scan-line { background: #f8313c; box-shadow: 0 0 18px 2px rgba(248, 49, 60, .55); } /* the red scan line stays as it was, glow included (owner 2026-10-19) */
.socket { box-shadow: none; }

/* ---------- labels: a quiet mono tag instead of red squares ---------- */
.eyebrow::before { display: none; }
.eyebrow, .px.y, .y { color: var(--dim); }
.announce .px { color: var(--rose); }

/* ---------- credits in brass, not red ---------- */
.rate, .plan-credits .doto, .calc-eq b, #gen-out { color: var(--brass); }
.plan li::before { background: var(--dim); }
.plan-badge { background: var(--panel-3); color: var(--bone); border: 1px solid var(--line-2); }
.switch-pill { background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.st-held { background: rgba(196, 160, 106, .12); color: var(--brass); }
.q-bar span { background: repeating-linear-gradient(90deg, var(--brass) 0 6px, transparent 6px 8px); }
input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--dust) var(--fill, 50%), var(--panel-3) var(--fill, 50%)); }
input[type="range"]::-moz-range-progress { background: var(--dust); }

/* ---------- node graphs speak Blender ---------- */
.s-img, .dot-y, .socket, .g-sock.y { background: var(--sock-color); fill: var(--sock-color); color: var(--sock-color); }
.s-text, .g-sock.s { background: var(--sock-text); fill: var(--sock-text); }
.s-proc { background: var(--sock-proc); }
.g-sock.t { fill: var(--sock-geo); }
.node-rows dd.y { color: var(--sock-color); }
.wire { stroke: #8d8790; opacity: .75; }
.panel .g-wire, .tile-graph .g-wire { stroke: var(--sock-color); opacity: .8; }
.panel .g-wire:nth-child(n+2), .tile-graph .g-wire.t { stroke: var(--sock-geo); }
.collab.c1 path { fill: #f8313c; } .collab.c1 b { background: var(--accent-fill); } /* one cursor only, in red (owner 2026-10-19) */
.buckets.cover i { border-color: var(--line-2); }
.topo-mesh { background-image: linear-gradient(rgba(210, 200, 194, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(210, 200, 194, .2) 1px, transparent 1px); }
.tile-topo:hover .topo-mesh, .tile-topo:focus-within .topo-mesh {
  background-image:
    linear-gradient(rgba(95, 174, 153, .5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 174, 153, .5) 1px, transparent 1px),
    linear-gradient(45deg, transparent calc(50% - .7px), rgba(95, 174, 153, .5) calc(50% - .7px), rgba(95, 174, 153, .5) calc(50% + .7px), transparent calc(50% + .7px));
}
.regen-badge { color: var(--dust); }
.topo-switch .on { background: var(--panel-3); color: var(--bone); box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- workflow panels: the open panel's number warms slowly to red (owner 2026-10-18) ---------- */
.panel-num { transition: color .9s var(--ease), font-size .55s cubic-bezier(.22,1,.36,1); }
.panel.is-open .panel-num { color: #dd3a46; }

/* ---------- examples: two drifting brick rows (owner 2026-10-18) ----------
   Square model tiles with a small gap (no plain tiles). The middle row
   is set half a tile over, so no tile sits under another, and runs the other
   way. Everything stops while the cursor (or keyboard focus) is on the wall,
   and while it is off screen; nothing moves for reduced motion. A tile is a
   still picture: hovering shows its short name and an open icon, a click
   opens the viewer.
   Ideas: 21st.dev "Marquee" (pause on hover/focus/off-screen) and "Diagonal
   Marquee" (alternating directions, soft edges). Built by js/main.js. */
.wall {
  --t: clamp(150px, 14vw, 230px); --g: 12px;
  display: grid; grid-template-columns: 100%; gap: var(--g); width: 100vw; margin-inline: calc(50% - 50vw); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.wall-row { overflow: hidden; }
.wall-row:nth-child(2) .wall-track { margin-left: calc((var(--t) + var(--g)) * -.5); }
.wall-track { display: flex; width: max-content; will-change: transform; animation: wall-left 80s linear infinite; }
.wall-row[data-dir="right"] .wall-track { animation-name: wall-right; animation-duration: 92s; }
.wall-run { display: flex; }
@keyframes wall-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wall-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.wall:hover .wall-track, .wall:focus-within .wall-track, .wall.is-off .wall-track { animation-play-state: paused; }

.wall-tile { flex: none; width: var(--t); height: var(--t); margin-right: var(--g); border-radius: var(--r-lg); } /* the gap sits inside each run, so -50% still loops without a seam */
.wall-tile:nth-child(even) { background: #171717; }
.wall-row:nth-child(2) .wall-tile:nth-child(odd) { background: #171717; }
.wall-row:nth-child(2) .wall-tile:nth-child(even) { background: #141414; }
.wall-tile {
  position: relative; display: block; padding: 0; border: 0; overflow: hidden; cursor: pointer;
  background: #141414; color: var(--bone); font: inherit;
}
.wall-tile img { width: 100%; height: 100%; object-fit: contain; padding: 9%; transition: transform .5s var(--ease); }
.wall-tile:hover img, .wall-tile:focus-visible img { transform: scale(1.04); }
.wall-tile:focus-visible { outline: 2px solid var(--bone); outline-offset: -2px; }
.wall-hint {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; text-align: left;
  font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--bone);
  background: linear-gradient(to top, rgba(10, 10, 10, .9), transparent);
  opacity: 0; transform: translateY(100%); transition: opacity .25s, transform .35s var(--ease);
}
.wall-hint { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wall-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wall-open { flex: none; color: var(--dust); }
.wall-tile:hover .wall-open { color: var(--bone); }
.wall-tile:hover .wall-hint, .wall-tile:focus-visible .wall-hint { opacity: 1; transform: none; }

@media (max-width: 719px) { .wall { --t: 36vw; --g: 8px; } }

/* Opening, the first time the wall comes into view (js adds .is-in): the two
   rows slide in from opposite sides and the tiles rise in one after another. */
.wall-row { transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
.wall-row:nth-child(1) { opacity: 0; transform: translateX(10%); }
.wall-row:nth-child(2) { opacity: 0; transform: translateX(-10%); }
.wall.is-in .wall-row { opacity: 1; transform: none; }
.wall-tile { opacity: 0; transform: translateY(18px) scale(.94); transition: opacity .6s var(--ease), transform .8s var(--ease), background-color .2s; transition-delay: calc(var(--i, 0) * 55ms + 150ms); }
.wall.is-in .wall-tile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wall-track { animation: none; }
  .wall-row, .wall-tile { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- headings in one colour ---------- */
.display em, .lead em, .display em.r { color: inherit; }

/* ---------- pricing, FAQ, footer: no red hovers ---------- */
.faq summary:hover, .footer nav a:hover, .link-arrow:hover, .lb-close:hover { color: var(--bone); }
.faq summary:hover::after { border-color: var(--bone); }
.link-arrow:hover, .lb-close:hover { border-color: var(--bone); }
.soon em { color: var(--rose); border-color: rgba(185, 138, 134, .4); }
.footer-mark { color: #151515; }
/* the hero's ground: the same node-editor dot grid as the node canvas (owner 2026-10-18),
   in a vignette (a little lighter in the middle, dark at the edges); the dots around
   the cursor still light up (the glow window from hero.js) */
.hx .hx-bg { background: radial-gradient(ellipse 58% 55% at 50% 46%, #151515 0%, #0e0e0e 55%, #0a0a0a 100%); }
[data-bg="dots"] .hx-l1, [data-bg="dots"] .hx-g1 { background-size: 24px 24px, 120px 120px; background-position: 12px 12px, 12px 12px; }
[data-bg="dots"] .hx-l1 { background-image: radial-gradient(circle, #1f1f1f 1px, transparent 1.4px), radial-gradient(circle, #383838 1.5px, transparent 1.9px); } /* small dots fainter at rest (owner 2026-10-18) */
[data-bg="dots"] .hx-g1 { background-image: radial-gradient(circle, #828282 1.1px, transparent 1.6px), radial-gradient(circle, #a6a6a6 1.6px, transparent 2px); } /* and about 18% brighter under the cursor */
.hx .hx-vignette { background: radial-gradient(ellipse 70% 66% at 50% 48%, transparent 30%, rgba(10, 10, 10, .75) 72%, var(--ink) 100%); }

/* ---------- shared pieces that still carried the wine tint, made neutral ---------- */
.nav { background: color-mix(in srgb, var(--ink) 74%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav.scrolled { background: rgba(10, 10, 10, .88); }
.buckets i { background: #151515; }
.views .regen .v-img { background: repeating-linear-gradient(45deg, #151515 0 6px, #1b1b1b 6px 12px); border-color: var(--line-2); }
.editor-canvas { background: conic-gradient(#1b1b1b 25%, #141414 0 50%, #1b1b1b 0 75%, #141414 0) 0 0 / 16px 16px; }
.scan-tag, .lb-close { background: rgba(10, 10, 10, .8); }
.hero-meta { background: linear-gradient(to top, rgba(10, 10, 10, .9), rgba(10, 10, 10, 0)); }
.card-tag span { background: rgba(10, 10, 10, .75); }

/* ==========================================================================
   NODE CANVAS (owner 2026-10-18): "Everything happens in Blender."
   A Blender node editor, simplified: real HTML nodes on a dotted canvas,
   wires drawn by js/main.js from the sockets. No box around it: the canvas
   fades out at the top and bottom. The dots light up around the cursor and
   the nodes drift a little with it (like flora.ai). On a desktop the board
   is laid out on a 1600 x 760 grid: from 1700px wide it stretches across
   the page (nodes keep their size, .is-fluid), between 1024 and 1700 it is
   scaled to fit (--k, set by main.js), and below 1024 the nodes stack.
   ========================================================================== */
.ncanvas { position: relative; isolation: isolate; margin-top: clamp(48px, 7vw, 112px); }
.nc-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; background: #0f0f0f;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}
/* Blender's node editor ground: a fine dot grid with a heavier dot every fifth */
.nc-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, #1d1d1d 1px, transparent 1.4px), radial-gradient(circle, #343434 1.5px, transparent 1.9px); /* small dots fainter at rest */
  background-size: 24px 24px, 120px 120px; background-position: 12px 12px, 12px 12px;
}
.nc-dots-hi { background-image: radial-gradient(circle, #828282 1.1px, transparent 1.6px), radial-gradient(circle, #a6a6a6 1.6px, transparent 2px); } /* about 18% brighter under the cursor */
.nc-glow {
  position: absolute; left: 0; top: 0; width: 440px; height: 440px; overflow: hidden;
  opacity: var(--on, 0); transition: opacity .4s; will-change: transform, opacity;
  -webkit-mask-image: radial-gradient(circle 220px at 50% 50%, #000, transparent 72%);
  mask-image: radial-gradient(circle 220px at 50% 50%, #000, transparent 72%);
}
.nc-glow-in { position: absolute; left: 0; top: 0; will-change: transform; }

.nc-board {
  position: relative; z-index: 1; width: 1600px; height: 760px; left: 50%; margin: 0 0 calc(760px * (var(--k, 1) - 1)) -800px; /* centred even when wider than the page */
  transform: scale(var(--k, 1)); transform-origin: top center;
}
/* Wide screens: the board takes the page width (up to 1840px) and the nodes spread across it
   (x in 1600-wide units becomes a share of the width); nodes and text keep their size. */
.nc-board.is-fluid { width: min(100% - 96px, 1840px); left: auto; transform: none; margin: 0 auto; }
.nc-board.is-fluid .nd { left: calc(var(--x) / 1600 * 100%); }
.nc-head { position: absolute; left: 7%; top: 30px; width: 600px; } /* a little in from the edge (owner 2026-10-18) */
/* Blender's mark in front of the word "Blender" (owner 2026-10-18) */
.nc-bl { white-space: nowrap; }
.nc-blender { display: inline-block; width: .82em; height: .82em; margin: 0 .2em 0 .04em; vertical-align: -.06em; } /* Blender's own colours, drawn in code: orange body, white ring, blue eye */
.nc-head h2 { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 46px; letter-spacing: -.035em; line-height: 1.05; color: var(--bone); }
.nc-head p { margin: 16px 0 0; max-width: 44ch; font-size: 18px; line-height: 1.55; color: var(--dust); }

.nc-wires { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.nc-wires .w { fill: none; stroke-width: 2.2; stroke-linecap: round; opacity: .85; }
.nc-wires .w-flow { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1 22; animation: nc-flow 1.6s linear infinite; }
@keyframes nc-flow { to { stroke-dashoffset: -23; } }

/* ---------- nodes ---------- */
.nd {
  --hd: #222; --x: 0; --y: 0; --w: 240;
  position: absolute; z-index: 2; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); width: calc(var(--w) * 1px);
  background: #161616; border: 1px solid #2a2a2a; border-radius: 12px; color: var(--bone); font-size: 12.5px;
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .85); transition: border-color .2s; will-change: transform;
}
.nd:hover { border-color: #3b3b3b; }
/* nodes can be dragged (main.js) and grow a touch under the cursor; the wires follow both */
.nd { cursor: grab; transition: border-color .2s, box-shadow .2s; } /* the growth itself is set by main.js, so the wires stay on the sockets */
.nd:hover { box-shadow: 0 28px 54px -22px rgba(0, 0, 0, .9); }
.nd.is-dragging { cursor: grabbing; z-index: 5; }
.nd-h { touch-action: none; }
.nd-viewer { cursor: grab; }
.nd-text { --hd: #241f20; }
.nd-gen, .nd-image { --hd: #1b2722; }
.nd-3d { --hd: #241f2e; }
.nd-view { --hd: #1a242b; }
.nd-h {
  display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 12px;
  background: var(--hd); border-radius: 11px 11px 0 0; border-bottom: 1px solid rgba(255, 255, 255, .04);
  font-weight: 600; font-size: 12.5px; letter-spacing: -.005em;
}
.nd-ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: rgba(255, 255, 255, .06); color: var(--dust); }
.nd-b { padding: 6px 0 12px; }
.nd-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; padding: 0 14px; color: var(--dust); }
.nd-out { justify-content: flex-end; color: var(--bone); }
.nd-in { justify-content: flex-start; color: var(--bone); }
.nd-val { padding: 2px 8px; border: 1px solid #2a2a2a; border-radius: 6px; background: #1e1e1e; color: var(--bone); font-size: 12px; white-space: nowrap; }
.nd-field { margin: 4px 12px 6px; padding: 9px 11px; border: 1px solid #2a2a2a; border-radius: 8px; background: #1c1c1c; color: var(--bone); font-size: 12.5px; line-height: 1.5; }
.nd-pic { margin: 4px 12px 6px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #f3f1ee; }
.nd-pic img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 10%; }
.nd-steps { list-style: none; display: grid; gap: 7px; margin: 4px 12px 6px; padding: 10px 11px; border: 1px solid #262626; border-radius: 8px; background: #1b1b1b; }
.nd-steps li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--bone); }
.nd-steps svg, .nd-done svg { flex: none; color: #63bf9c; }
.nd-done { display: flex; align-items: center; gap: 7px; margin: 8px 12px 0; padding: 6px 10px; border-radius: 7px; background: rgba(99, 191, 156, .08); color: #93cfb6; font-size: 12px; }
/* sockets, in NexNode's colours: text, image, 3D model */
.sk { position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--c); border: 2px solid #161616; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.nd-out .sk { right: -7px; }
.nd-in .sk { left: -7px; }
.sk-text { --c: #cf7b7b; }
.sk-img { --c: #63bf9c; }
.sk-3d { --c: #7fb3d9; }
/* the viewport: a dark well with a faint floor grid, the model turning in it */
.nd-viewer { margin: 4px 12px 6px; aspect-ratio: 1 / .9; border-radius: 8px; overflow: hidden; background: radial-gradient(ellipse at 50% 72%, #222 0%, #141414 68%); }
.nd-viewer::before {
  content: ''; position: absolute; left: -40%; right: -40%; bottom: -6%; height: 58%; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 26px 26px; transform: perspective(260px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 20%, transparent); mask-image: linear-gradient(to top, #000 20%, transparent);
}
.nd-viewer .ov-object { transform: scale(1); }

/* Below 1024px the nodes stack in a zigzag and shrink with the screen (owner 2026-10-18):
   width, type, padding, the picture and the viewport all follow the width. */
@media (max-width: 1023px) {
  .nc-board { width: auto; max-width: 680px; height: auto; left: auto; margin: 0 auto; padding: 0 var(--gutter); transform: none; display: flex; flex-direction: column; gap: clamp(22px, 4vw, 40px); }
  .nc-head { position: static; width: auto; max-width: 560px; margin-bottom: 8px; }
  .nc-head h2 { font-size: clamp(30px, 6vw, 44px); }
  .nc-head p { font-size: clamp(15px, 2vw, 18px); }
  .nd { position: relative; left: auto; top: auto; width: clamp(210px, 36vw, 280px); font-size: clamp(11px, .5vw + 7px, 12px); }
  .nd:nth-of-type(even) { align-self: flex-end; }
}
@media (max-width: 599px) {
  .ncanvas { margin-top: 40px; }
  .nc-board { gap: 26px; }
  .nd { width: 76%; border-radius: 10px; margin-left: 10px; }
  .nd:nth-of-type(even) { margin: 0 12px 0 0; }
  .nd-h { height: 30px; padding: 0 10px; gap: 7px; font-size: 12px; border-radius: 9px 9px 0 0; }
  .nd-ic { width: 18px; height: 18px; }
  .nd-b { padding: 4px 0 10px; }
  .nd-row { min-height: 25px; padding: 0 11px; }
  .nd-field, .nd-steps { margin: 4px 10px 5px; padding: 8px 9px; }
  .nd-pic, .nd-viewer { margin: 4px 10px 5px; }
  .nd-pic img { padding: 12%; }
  .nd-steps { gap: 5px; }
  .nd-done { margin: 6px 10px 0; padding: 5px 9px; font-size: 11.5px; }
  .sk { width: 11px; height: 11px; margin-top: -5.5px; }
}
@media (prefers-reduced-motion: reduce) { .nc-wires .w-flow { animation: none; display: none; } .nd { transform: none !important; } }

/* ==========================================================================
   EASY (owner 2026-10-18): the same message, without the big panel. The
   NexNode mark in voxels floats where the grandma was, over a dithered pixel
   shadow, with pixel sparkles; the three reasons are open columns split by
   pixel-dashed rules (no decorative squares above them, owner 2026-10-18).
   Every mark turns toward the cursor (data-vox-look on the section).
   ========================================================================== */
.easy3-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(24px, 5vw, 72px); }
.easy3-copy .display { margin: 0 0 16px; font-size: clamp(34px, 4.2vw, 58px); }
.easy3-copy .lead { margin: 0 0 28px; max-width: 40ch; }
.easy3-art { position: relative; justify-self: center; width: min(400px, 100%); aspect-ratio: 1; }
.easy3-art .vox { position: relative; z-index: 1; width: 100%; height: 100%; }
/* until the voxel mark is drawn (or where WebGL is off), the flat NexNode mark stands in */
.easy3-art .vox[data-voxel="nexnode"]:not([data-vox-on]) { background: url(/assets/brand/nexnode-mark.svg) center / 70% no-repeat; }
.easy3-floor {
  position: absolute; left: 24%; right: 24%; bottom: 3%; height: 22px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .9), transparent);
  -webkit-mask-image: conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0); -webkit-mask-size: 6px 6px;
  mask-image: conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0); mask-size: 6px 6px;
}
.px-spark { --c: var(--bone); position: absolute; z-index: 2; width: 6px; height: 6px; background: var(--c); box-shadow: 6px 0 0 var(--c), -6px 0 0 var(--c), 0 6px 0 var(--c), 0 -6px 0 var(--c); opacity: 0; animation: px-spark 2.8s steps(1, end) infinite; }
.px-spark.s1 { left: 10%; top: 16%; --c: #c9a24a; }
.px-spark.s2 { right: 8%; top: 30%; --c: #d07b7b; animation-delay: -.9s; }
.px-spark.s3 { left: 4%; bottom: 30%; --c: #7fb3d9; animation-delay: -1.7s; }
.px-spark.s4 { right: 16%; bottom: 14%; --c: var(--bone); animation-delay: -2.3s; }
@keyframes px-spark { 0% { opacity: 0; } 30% { opacity: .9; } 60% { opacity: .35; } 80% { opacity: 0; } }

.easy3-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; }
.easy3-item { --tone: #c9a24a; position: relative; padding: 6px 28px 6px; }
.easy3-item[data-tone="red"] { --tone: #b5121b; }
.easy3-item[data-tone="brown"] { --tone: #9a6a45; }
.easy3-item:first-child { padding-left: 0; }
.easy3-item + .easy3-item::after { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: repeating-linear-gradient(to bottom, var(--line-2) 0 6px, transparent 6px 12px); }
.easy3-item .vox { width: 92px; height: 92px; margin: 0 0 8px -12px; }
.easy3-item h3 { margin: 0 0 8px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 650; letter-spacing: -.015em; color: var(--bone); }
.easy3-item p { margin: 0; max-width: 36ch; font-size: 15.5px; line-height: 1.6; color: var(--dust); }
@media (max-width: 860px) {
  .easy3-top { grid-template-columns: 1fr; }
  .easy3-art { order: -1; width: min(240px, 64%); justify-self: start; margin-bottom: -8px; } /* the mark sits above the heading on phones */
  .easy3-list { grid-template-columns: 1fr; gap: 28px; }
  .easy3-item, .easy3-item:first-child { padding: 6px 0; }
  .easy3-item + .easy3-item::after { left: 0; right: 0; top: -14px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(to right, var(--line-2) 0 6px, transparent 6px 12px); }
}
@media (prefers-reduced-motion: reduce) { .px-spark { animation: none; opacity: .6; } }

/* ---------- heading over the three workflow panels (owner 2026-10-18, after flora.ai) ---------- */
.flow-head { margin: 0 0 clamp(24px, 3vw, 36px); }
.flow-head h2 { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.03em; line-height: 1.15; color: var(--bone); }
.flow-head p { margin: 10px 0 0; max-width: 62ch; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.55; color: var(--dim); }

/* ==========================================================================
   THE NODE STORY (owner 2026-10-18): when the canvas comes into view the
   graph runs: the prompt types, Generate Image fills its bar, the picture
   lands in pixels, Generate 3D ticks its stations, the model drops into the
   viewport. Each wire draws itself from one node to the next when the first
   finishes, then a light runs along it (after flora.ai). On a desktop the
   section holds still while the story plays with the scroll (.is-pinned);
   elsewhere it plays by itself. Replay runs it again. Without JS, or with
   reduced motion, the finished graph is simply there (no .nc-anim).
   ========================================================================== */
.ncanvas { overflow: clip; padding: 0; }
.nc-stick { position: relative; padding: clamp(72px, 8vw, 120px) 0; }
/* desktop: exactly one screen tall, the board centred under the header, so the snap shows only this section */
@media (min-width: 1024px) {
  .nc-stick { box-sizing: border-box; min-height: 100vh; min-height: 100svh; padding: var(--navh, 64px) 0 16px; display: flex; flex-direction: column; justify-content: center; }
}
.ncanvas.is-pinned { height: calc(100vh + var(--pin, 1100px)); }
.ncanvas.is-pinned .nc-stick { position: sticky; top: 0; height: 100vh; padding: 0; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 599px) { .ncanvas { padding: 0; } .nc-stick { padding: 64px 0; } }

/* wires: a dim track, the coloured line drawing itself, a running light */
.nc-wires .w { opacity: .22; }
.nc-wires .w-draw { fill: none; stroke-width: 2.4; stroke-linecap: round; }
/* the light: soft-edged (blurred, round caps), white with a glow; it leads the line while it draws, then keeps running */
.nc-wires .w-glint { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; opacity: 0; transition: opacity .35s; filter: blur(1.4px) drop-shadow(0 0 5px rgba(255, 255, 255, .7)); }
.nc-wires .is-drawing .w-glint { opacity: .95; animation: none; }
.nc-wires .is-live .w-glint { opacity: .7; animation: nc-glint 1.8s linear infinite; }
.nc-wires .w-draw { stroke-width: 2.6; }
@keyframes nc-glint { from { stroke-dashoffset: 0; } to { stroke-dashoffset: calc(var(--len, 400px) * -1 - 30px); } }

/* node states (only while the story is on) */
.nd-wait, .nd-run, .nd-caret, .nd-empty { display: none; }
.nc-anim .nd.is-wait .nd-wait { display: block; }
.nc-anim .nd.is-wait .nd-done, .nc-anim .nd.is-run .nd-done { display: none; }
.nc-anim .nd.is-run .nd-run { display: grid; }
.nc-anim .nd.is-run { border-color: #3f3f3f; box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 22px 44px -22px rgba(0, 0, 0, .85); }
.nd-wait { margin: 8px 12px 0; padding: 6px 10px; border-radius: 7px; background: #1b1b1b; color: var(--dim); font-size: 12px; }
.nd-run { grid-template-columns: 1fr auto; row-gap: 6px; margin: 8px 12px 0; padding: 7px 10px 8px; border-radius: 7px; background: rgba(255, 255, 255, .04); color: var(--bone); font-size: 12px; }
.nd-run-p { color: var(--dust); font-variant-numeric: tabular-nums; }
.nd-bar { grid-column: 1 / -1; height: 4px; border-radius: 3px; background: #262626; overflow: hidden; }
.nd-bar i { display: block; width: 0; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #4fa886, #8fd8bb); }
.nd-3d .nd-bar i { background: linear-gradient(90deg, #7d74b6, #b7b0e6); }
/* the prompt types with a caret */
.nc-anim .nd-text.is-run .nd-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--bone); animation: blink 1s steps(2) infinite; }
/* the picture waits as an empty checker, then lands in pixels */
.nc-anim .nd-image:not(.is-done) .nd-pic { background: conic-gradient(#1e1e1e 25%, #181818 0 50%, #1e1e1e 0 75%, #181818 0) 0 0 / 16px 16px; }
.nc-anim .nd-image:not(.is-done) .nd-pic img { opacity: 0; }
.nd-pic { transition: background-color .3s; }
/* stations: an empty ring until ticked, the current one in the node's colour */
.nd-steps li { position: relative; }
.nc-anim .nd-steps li:not(.is-on) { color: var(--dim); }
.nc-anim .nd-steps li:not(.is-on) svg { opacity: 0; }
.nc-anim .nd-steps li:not(.is-on)::before { content: ''; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -6px; border: 1.5px solid #3a3a3a; border-radius: 50%; }
.nc-anim .nd-steps li.is-cur::before { border-color: #9189c2; border-right-color: transparent; animation: nc-spin .8s linear infinite; }
@keyframes nc-spin { to { transform: rotate(360deg); } }
/* the viewport is empty until the model lands */
.nd-view .nd-b { position: relative; }
.nd-empty { position: absolute; left: 12px; right: 12px; top: 10px; aspect-ratio: 1 / .9; place-items: center; text-align: center; color: var(--dim); font-size: 12px; pointer-events: none; }
.nc-anim .nd-view:not(.is-done) .nd-empty { display: grid; }
.nd-viewer .ov-object, .nd-viewer .ov-shadow { transition: opacity .6s var(--ease), scale .7s var(--ease); }
.nc-anim .nd-view:not(.is-done) .nd-viewer .ov-object, .nc-anim .nd-view:not(.is-done) .nd-viewer .ov-shadow { opacity: 0; scale: .7; }

/* replay */
.nc-replay {
  position: absolute; right: 24px; top: 30px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(20, 20, 20, .85); color: var(--bone); font: 600 13px/1 var(--f-body);
  cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s, border-color .2s;
}
.nc-replay.is-shown { opacity: 1; pointer-events: auto; }
.nc-replay:hover { border-color: #5a5a5a; }
@media (max-width: 1023px) { .nc-replay { top: 0; right: var(--gutter); } }

/* ---------- story v2 (owner 2026-10-18): plays by itself, waiting nodes dimmed ---------- */
.nd { transition: border-color .2s, box-shadow .3s, opacity .6s var(--ease), filter .6s var(--ease); }
.nc-anim .nd.is-wait { filter: brightness(.5) saturate(.45); } /* dimmed, but still solid: nothing behind shows through */
.nc-anim .nd.is-done { filter: saturate(1.12); }
.nd-3d { --hd: #2a2342; }
.nc-anim .nd-3d.is-run { border-color: rgba(145, 137, 194, .55); box-shadow: 0 0 0 1px rgba(145, 137, 194, .22), 0 22px 44px -22px rgba(0, 0, 0, .85); }
.nd-pic { position: relative; }
.nd-pix { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; pointer-events: none; }
.nc-anim .nd-image.is-run .nd-pic { background: #f3f1ee; }
.nc-anim .nd-image.is-done .nd-pic img { animation: none; }

/* ==========================================================================
   PRICING (owner 2026-10-18): plans with a Monthly / Yearly switch and a
   comparison, then credit packs: a slider picks an amount, the panel on the
   right recommends the pack that covers it (after higgsfield.ai/pricing).
   ========================================================================== */
.price-part + .price-part { margin-top: clamp(64px, 8vw, 104px); }
.price-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-bottom: 24px; }
.price-head h2 { margin: 0; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.03em; line-height: 1.05; }
.price-head p { margin: 8px 0 0; color: var(--dust); font-size: 16px; max-width: 52ch; }

.bill-switch { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.bill-switch button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--dust); font: 600 14px/1 var(--f-body); cursor: pointer; transition: background-color .25s, color .25s; }
.bill-switch button[aria-selected="true"] { background: var(--panel-3); color: var(--bone); box-shadow: inset 0 0 0 1px var(--line-2); }
.bill-switch button[aria-disabled="true"] { cursor: default; }
.bill-switch button:not([aria-selected="true"]):not([aria-disabled="true"]):hover { color: var(--bone); }
.bill-soon { padding: 3px 7px; border-radius: 6px; background: rgba(255, 255, 255, .06); color: var(--dim); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.bill-note { margin: 14px 0 0; color: var(--dust); font-size: 14px; }
.plan-bill { margin: -8px 0 0; color: var(--dim); font-size: 13px; }

/* the popular plan's ring should not push the card off the grid */
.plans .plan.has-sale { border-color: transparent; }

/* compare */
.compare-wrap { margin-top: 28px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14.5px; }
.compare caption { padding: 18px 22px 6px; text-align: left; color: var(--bone); font-weight: 650; font-size: 16px; caption-side: top; }
.compare th, .compare td { padding: 13px 22px; text-align: left; border-top: 1px solid var(--line); font-weight: 400; }
.compare thead th { border-top: 0; color: var(--dust); font-size: 13px; font-weight: 600; }
.compare tbody th { color: var(--dust); white-space: nowrap; }
.compare td { color: var(--bone); font-variant-numeric: tabular-nums; }
.compare .is-pop { background: rgba(255, 255, 255, .025); }
.compare thead .is-pop { color: var(--bone); }

/* credit packs */
.packs-panel { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; }
.pk-pick, .pk-rec { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: clamp(22px, 3vw, 34px); }
.pk-pick { display: flex; flex-direction: column; gap: 22px; }
.pk-pick #pk-range { margin-top: auto; } /* the slider and its pack marks sit together at the bottom */
.pk-top { display: grid; grid-template-columns: minmax(0, 1fr) 210px; align-items: center; gap: 20px; }
.pk-top > div:last-child { order: -1; }
.pk-stage { position: relative; height: 190px; display: grid; place-items: end center; }
.pk-stage .pk-coins { width: 160px; height: auto; image-rendering: pixelated; }
.pk-stage.has-coins .pk-coins { display: none; }
.pk-stage .coin-stage { position: absolute; left: -110px; right: -30px; top: -300px; bottom: -4px; width: auto; height: auto; z-index: 3; }
/* the coin canvas reaches well above the panel and past its sides: coins fall in from
   above the panel and land on it, nothing is cut off (owner 2026-10-18); the wider left
   side moves the pile's centre a little to the left, where it sits better */
.pk-label { display: block; color: var(--dust); font-size: 14px; }
.pk-num { display: block; margin: 8px 0 10px; font-family: var(--f-display); font-weight: 650; letter-spacing: -.035em; font-size: clamp(48px, 6vw, 76px); line-height: 1; color: var(--bone); font-variant-numeric: tabular-nums; }
.pk-eq { margin: 0; color: var(--dust); font-size: 15px; }
.pk-eq b { color: var(--bone); font-weight: 600; }
#pk-gens { color: var(--brass); }
.pk-ticks { position: relative; height: 44px; margin-top: -10px; }
.pk-tick { position: absolute; top: 0; left: calc(11px + (100% - 22px) * var(--at)); transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; padding: 12px 6px 0; border: 0; background: none; color: var(--dim); font: 500 12px/1.2 var(--f-body); cursor: pointer; transition: color .2s; }
.pk-tick::before { content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 8px; background: var(--line-2); }
.pk-tick b { font-weight: 600; color: var(--dust); font-variant-numeric: tabular-nums; }
.pk-tick:hover, .pk-tick.is-rec { color: var(--bone); }
.pk-tick.is-rec b { color: var(--brass); }
.pk-tick.is-rec::before { background: var(--brass); }

/* the recommended pack, shown as a pack (after higgsfield.ai): fixed size, only its contents change */
.pk-rec { position: relative; display: grid; grid-template-rows: auto auto auto 2.9em 1fr 2.9em; gap: 10px; min-height: 500px; }
.pk-pack { position: relative; display: grid; gap: 4px; min-height: 168px; padding: 18px 150px 18px 18px; border-radius: 14px; border: 1px solid var(--line-2);
  background: radial-gradient(120% 90% at 100% 100%, rgba(212, 167, 92, .1), transparent 60%), linear-gradient(180deg, #171717, #111); overflow: hidden; }
.pk-pack-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pk-rec-tag { padding: 4px 9px; border-radius: 6px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); color: var(--bone); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pk-dots { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pk-dots li { width: 14px; height: 4px; border-radius: 2px; background: #2c2c2c; transition: background-color .3s; }
.pk-dots li.is-on { background: var(--brass); }
.pk-pack-art { position: absolute; right: 12px; bottom: 6px; width: 124px; height: 148px; image-rendering: pixelated; pointer-events: none; }
.pk-rec h3 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-rec p { margin: 0; }
.pk-rec-credits { color: var(--dust); font-size: 15px; white-space: nowrap; }
.pk-rec-credits b { color: var(--brass); font-family: var(--f-display); font-size: 30px; font-weight: 650; letter-spacing: -.02em; margin-right: 4px; font-variant-numeric: tabular-nums; }
.pk-rec-price { display: flex; align-items: baseline; gap: 10px; margin-top: 6px !important; }
#pk-rec-price { font-family: var(--f-display); font-weight: 650; font-size: 46px; letter-spacing: -.04em; line-height: 1; color: var(--bone); font-variant-numeric: tabular-nums; }
.pk-rec-once { color: var(--dust); font-size: 14px; }
.pk-rec-rate { color: var(--bone); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-rec-line { color: var(--dust); font-size: 14px; line-height: 1.45; }
.pk-buy { align-self: end; width: 100%; }
.pk-plan-hint { padding-top: 12px; border-top: 1px solid var(--line); color: var(--dust); font-size: 13.5px; line-height: 1.45; }
.pk-plan-hint.is-empty { visibility: hidden; }
/* pack swap: the contents slide, the card stays put */
.pk-pack > *, #pk-rec-price, .pk-rec-rate { transition: opacity .14s ease, transform .14s ease; }
.pk-rec:not(.is-out) .pk-pack > *, .pk-rec:not(.is-out) #pk-rec-price, .pk-rec:not(.is-out) .pk-rec-rate { transition-duration: .32s; transition-timing-function: cubic-bezier(.22, 1, .36, 1); }
.pk-rec.is-out .pk-pack > *, .pk-rec.is-out #pk-rec-price, .pk-rec.is-out .pk-rec-rate { opacity: 0; transform: translateY(6px); }
.pk-rec.is-out .pk-pack-art { transform: translateY(14px) scale(.92); }
/* the left side never changes size either */
.pk-num { min-width: 6.4ch; }
.pk-eq { min-height: 2.9em; }
.packs-panel { align-items: stretch; }

@media (max-width: 900px) {
  .packs-panel { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .price-head { align-items: flex-start; }
  .pk-top { grid-template-columns: 1fr; }
  .pk-top > div:last-child { order: 0; }
  .pk-stage { height: 170px; }
  .pk-tick { font-size: 11px; }
}

/* Inside the add-on (owner 2026-11-01): no panels. The tiles are open blocks on the page,
   separated by space only; the small UI pictures inside keep their own frames. */
.bento { gap: clamp(44px, 5vw, 72px) clamp(32px, 4vw, 64px); }
.bento .tile { border: 0; border-radius: 0; background: none; padding: 0; overflow: visible; min-height: 0; }

/* "One image, a finished model" (owner 2026-11-01: show what NexNode does that others do not,
   in place of the cost quote). The PBR Model workflow as a short run of stages. */
.pbr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.pbr-steps li { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0 11px 26px; border-bottom: 1px solid var(--line); counter-increment: s; }
.pbr-steps li::before { content: ''; position: absolute; left: 4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--line-2); }
.pbr-steps li::after { content: ''; position: absolute; left: 7.5px; top: calc(50% + 6px); height: calc(100% - 12px); width: 1px; background: var(--line); }
.pbr-steps li:last-child { border-bottom: 0; }
.pbr-steps li:last-child::after { display: none; }
.pbr-steps span { font-weight: 600; font-size: 15px; }
.pbr-steps small { color: var(--dim); font-size: 13px; text-align: right; }
.pbr-steps li.out::before { background: var(--sock-geo, #5fbf9a); }
.pbr-steps li.out span { color: var(--bone); }