/* NINE BEFORE motion mock: the desktop layer (2026-10-05).
   Desktop only (the page's own container query, 1000 px and up); the phone page is never touched. It loads after the
   page's styles, so equal selectors here win. index.html belongs to the phone chat; this file to the desktop chat.
   Sections 2 to 5's desktop look is worked here; the phone chat keeps the phone page. */

@container lp (min-width: 1000px) {

  /* No hairlines (Sherman: "I still see lines" between sections 1 and 2, 3 and 4, 4 and 5). The desktop view is drawn
     scaled, so two sections meeting on a fraction of a pixel let a sliver of the page's off-white through. Every join
     now overlaps by 3 px, the later piece on top, its first rows the same colour as the last rows it covers. */
  .lp .t3-fade { position: relative; z-index: 1; margin-top: -3px; }
  .lp .lp-turn::before { top: -3px; }
  .lp .lp-turn + .t3-fade-out { margin-top: -3px; }
  .lp .t3-fade-out + .lp-noise { margin-top: -3px; }
  .lp .lp-noise + .nz-fade-out { margin-top: -3px; margin-bottom: -3px; }
  .lp .lp-nine + .lp-why-line { margin-top: -3px; }
  .lp .why-fade-out { margin-top: -3px; margin-bottom: -3px; }
  .lp .det-fade { margin-top: -3px; margin-bottom: -3px; }
  .lp .foot-fade { margin-top: -3px; margin-bottom: -3px; }

  /* Section 3 lasts longer on desktop (Sherman: "I want and then the moment to have a slower scroll … so people can
     really read"): its track is a fixed 2700 px whatever the window, and the page's script spreads the thoughts over its
     first half, then holds "And then, the moment." before the fade into the befores eases in. */
  .lp .lp-noise.scrolly { height: calc(var(--stage-h, 860px) + 2700px); }

  /* Its blurred photo is darker than the fade into it ended (about 17 against 28), so its top settles on that dark from
     the first row, and its sides darken further (a bright patch sat at the far left). */
  .lp .lp-noise .nz-photo::after { background: linear-gradient(to bottom, rgb(17, 17, 18) 0%, rgba(17, 17, 18, 0.9) 12%, rgba(17, 17, 18, 0.45) 32%, rgba(24, 23, 22, 0.3) 62%, rgba(24, 23, 22, 0.94) 88%, rgb(24, 23, 22) 97%, rgb(24, 23, 22) 100%); }

  /* The pinned scenes fill the window (desktop.js sets --stage-h); they were a fixed 860 px, which left a flat band of
     the section's background under them in any taller window. */
  .lp .scrolly4 .t3-stage { height: var(--stage-h, 860px); }
  /* Section 2's scroll after the scene pins is a fixed 1740 px, as it was at 1440 x 900 (2600 less the 860 px scene),
     like sections 3 and 5: its track was a fixed 2600 px, so in a taller window the scene took more of it and the ring
     came in sooner, while the join's overlay was still across the top of the scene (2026-10-06). */
  .lp .lp-turn.scrolly4 { height: calc(var(--stage-h, 860px) + 1740px); }
  .lp .lp-noise.scrolly .nz-sticky { height: var(--stage-h, 860px); }

  /* Section 2's render fills the whole section, edge to edge (Sherman: "it should be the full width of the page"). Its
     box was placed in the stage's grid, which started it 64 px in and 40 px down, so a band of flat wall framed it; out
     of the grid, the absolute box is the whole stage. The page's canvas code carries the render's wall out to the edges. */
  .lp .lp-turn .t3-media { grid-column: auto; grid-row: auto; }

  /* Section 3, the full head: one column, like a real lock screen (Sherman: "two different rows … not realistic"), a
     touch wider and a size up from the phone-width strip, with lighter glass so dark type reads crisp. */
  .lp .lp-noise .nz-sticky { grid-template-columns: minmax(0, 640px); }
  .lp .lp-noise .nz-head { margin-bottom: 26px; }
  .lp .lp-noise.scrolly .nz-card, .lp .lp-noise .nz-card { padding: 13px 18px 14px; border-radius: 22px; background: rgba(246, 246, 244, 0.74); }
  .lp .lp-noise .nz-top b { font-size: 14.5px; }
  .lp .lp-noise .nz-top span { font-size: 13.5px; }
  .lp .lp-noise .nz-card p { font-size: 16px; line-height: 1.32; margin-top: 2px; }

  /* The blurred photo behind the cards left a bright smudge at the far left of a wide screen; the sides darken into the
     section's near-black (its foot is already solid, so the join into the befores is unchanged). */
  .lp .lp-noise .nz-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to right, rgba(17, 17, 18, 0.92) 0%, rgba(17, 17, 18, 0.5) 14%, rgba(17, 17, 18, 0) 30%, rgba(17, 17, 18, 0) 70%, rgba(17, 17, 18, 0.5) 86%, rgba(17, 17, 18, 0.92) 100%); }

  /* Section 5, why a ring, holds while you scroll (Sherman: "I want the scroll to be slower for the animations … so
     people can see the animations better while they're scrolling"): the section is the window's height plus 1000 px,
     its line stays centred on screen through that (desktop.js pins it), and the reveal follows the scroll: the screen
     line comes in and dims back, the hand line comes in, "your hand." warms into gold. Its fades in and out are
     generated below for a line centred in a window-tall stage. */
  .lp .lp-why-line.why-pin { display: block; align-content: start; height: calc(var(--stage-h, 860px) + 650px); padding: 0; }
  .lp .why-pin .lp-full { height: var(--stage-h, 860px); display: grid; align-content: center; padding: 0 64px; will-change: transform; }
  .lp .why-pin .mo-s { display: block; }

  /* The footer: the name at 520 px, about the width of the waitlist button above it, so the footer reads as one centred
     column and the name as a signature, not a banner (Sherman: "it's huge … taking up the whole width"; he picked 520
     of four previews, 2026-10-05). It was the full width. */
  .lp .lp-footer-b .lp-footer-sign .lp-wm { width: 520px; max-width: 100%; }

  /* The name at the top of the hero, a fifth bigger (Sherman, 2026-10-05: B of three previews; it was 224 px). Its strokes
     are thin, and at 224 it read faint over the bright street; at 272 it holds without competing with the headline. */
  .lp .lp-head .lp-wm { width: 272px; }

  /* Section 7, the details, on off-white with the image to the edge (Sherman, 2026-10-05: "I like how the image is to
     the edge … with the off white"; C of three previews; it was a boxed image on Stone, "kind of bland"). The four points
     and their legend are unchanged. The render runs to the page's left edge and sets the section's height (still 4:5, so
     the points stay on the ring); "The details" sits above the legend, both larger. The founder above is off-white too,
     so the two meet with no fade; the fade into the footer is generated below. */
  .lp .lp-anat { padding-top: 120px; padding-bottom: 120px; row-gap: 36px; }
  .lp .lp-anat .lp-full { grid-column: 8 / span 5; grid-row: 1; align-self: end; }
  .lp .lp-anat .lp-a { grid-column: 1 / span 6; grid-row: 1 / span 2; margin-left: -64px; align-self: center; }
  .lp .lp-anat .lp-b { grid-column: 8 / span 5; grid-row: 2; align-self: start; gap: 30px; }
  .lp .lp-anat .lp-h2 { font-size: calc(64px * var(--ds)); }
  .lp .lp-anat .ctag { background: var(--nb-ground); }
  .lp .anat-list { gap: 30px; }
  .lp .anat-list li { font-size: 18px; grid-template-columns: 40px 1fr; }
  .lp .anat-list li b { font-size: calc(25px * var(--ds)); margin-bottom: 4px; }
  .lp .anat-n { width: 30px; height: 30px; font-size: 12px; line-height: 29px; }
  .lp .det-fade { height: 0; }

  /* The waitlist bar, like the phone's (Sherman, 2026-10-05): a slim strip across the bottom of the window once the hero
     has gone, hidden while a form or a held scene is on screen, dark over the dark sections (the page's script). Placed
     by desktop.js in a dock fixed to the bottom of the window (.nb-bar-dock, below), as the scaled view stops sticky;
     it slides down out of view when hidden. */
  .lp .lp-bar { display: flex; position: absolute; left: 0; right: 0; top: auto; bottom: 0; height: 72px; margin: 0; padding: 0 64px; gap: 24px; z-index: 20; }
  .lp .lp-bar span { font-size: 15px; letter-spacing: 0.01em; }
  .lp .lp-bar-btn { height: 44px; padding: 0 22px; font-size: 15px; }

  /* The accent, Old Gold (Sherman, 2026-10-05: it replaces Bright Brick; style B). Gold goes to the line that matters,
     one phrase a section at most: the light gold as text on dark grounds (6.2:1 on Graphite); on light grounds as marks,
     and as text only in "THE FOUNDER" (the text gold, the darkest that still reads gold; anything darker turns brown, which
     he rejected). Never on buttons, the ring, the dot or the mark. Placements: the hero's sub-headline (the Drop line
     back to off-white), "the moment." in section 3's ending, the nine count dots, the befores' progress line,
     "your hand." in section 5 (on Graphite), "THE FOUNDER", the footer sign-off. */
  .lp .lp-page { --nb-gold: #CFA74E; --nb-gold-mark: #B08A32; --nb-gold-text: #A6822C; }  /* on the page, not .lp: a container query can't style its own container */
  .lp .lp-hero.over .lp-claim { color: var(--nb-gold); }
  .lp .lp-noise .nz-end .nz-moment { color: var(--nb-gold); }
  .lp .lp-why .why-hand { color: var(--nb-gold); }
  .lp .lp-founder .fd-eye { color: var(--nb-gold-text); }

  /* Section 5, why a ring, on Graphite (Sherman, 2026-10-05: "do your hand in gold, but on graphite. Let's try that
     out"), so "your hand." can be gold and read (6.2:1). Its joins, from the befores' Stone and into the founder's
     off-white, are generated below. */
  .lp .lp-why-line .lp-big { color: var(--nb-ground); }
  .lp .lp-why-line .ctag { background: var(--nb-ink); }
  .lp .scrolly4 .t3-ticks i.on { background: var(--nb-gold-mark); }
  .lp .lp-nine .nine-bar i { background: var(--nb-gold-mark); }
  .lp .lp-signoff { color: var(--nb-gold); }

  /* Two quiet entrances, played once as each section arrives (Sherman, 2026-10-05: "build both motions … as they
     are"). desktop.js adds .mo-ready only when motion is allowed, so without script or with reduced motion the lines
     simply show. Section 4: the headline's lines rise in, and "a before." lands last, after a beat. Section 5: the
     screen line comes in and dims back; the hand line comes in; "your hand." warms from off-white into gold, last. */
  .lp .mo-ready .mo-l, .lp .mo-ready .mo-s { display: block; opacity: 0; transform: translateY(16px);
    transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .lp .mo-ready.mo-in .mo-l, .lp .mo-ready.mo-in .mo-s { opacity: 1; transform: none; }
  .lp .mo-ready.mo-in .mo-l:nth-child(2) { transition-delay: 0.15s; }
  .lp .mo-ready.mo-in .mo-l.mo-last { transition-delay: 0.95s; transition-duration: 1.1s; }
  .lp .mo-ready .mo-s.mo-hand { transition-delay: 1.5s; }
  .lp .mo-ready.mo-dim .mo-s.mo-screen { opacity: 0.34; transition: opacity 1.4s ease; }
  .lp .lp-why .mo-ready .why-hand { color: var(--nb-ground); transition: color 1.6s ease 2.3s; }
  .lp .lp-why .mo-ready.mo-in .why-hand { color: var(--nb-gold); }

  /* The joins (Sherman: "I can see where it's trying to join … gray flat space and then you could see the next page
     scroll up"). Each join is one ramp from the last thing in one section to the first thing in the next: OKLab,
     smootherstep (no visible start or end), split across the section edges, the strip between them and the empty part
     of a pinned scene, so there's no flat stretch and no band. Generated by gen-joins.cjs, never hand-picked; the
     lengths come from the measured desktop layout. */
  /* joins:start */
  .t3-fade { height: 200px; background: linear-gradient(to bottom, rgb(28, 29, 30) 0.0px, rgb(28, 29, 30) 10.0px, rgb(28, 29, 30) 20.0px, rgb(29, 30, 31) 30.0px, rgb(29, 30, 31) 40.0px, rgb(30, 31, 32) 50.0px, rgb(32, 33, 34) 60.0px, rgb(34, 35, 36) 70.0px, rgb(36, 37, 38) 80.0px, rgb(40, 40, 41) 90.0px, rgb(43, 44, 45) 100.0px, rgb(48, 48, 49) 110.0px, rgb(52, 53, 53) 120.0px, rgb(58, 58, 58) 130.0px, rgb(64, 64, 64) 140.0px, rgb(70, 70, 70) 150.0px, rgb(77, 77, 77) 160.0px, rgb(84, 84, 84) 170.0px, rgb(92, 92, 91) 180.0px, rgb(100, 100, 98) 190.0px, rgb(108, 107, 106) 200.0px); }
  .lp .lp-turn::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: calc(var(--stage-h, 860px) / 2 - 127px); z-index: 4; pointer-events: none; background: linear-gradient(to bottom, rgb(105, 105, 103) 0.00%, rgb(113, 113, 111) 3.25%, rgb(121, 121, 118) 6.50%, rgb(129, 128, 126) 9.75%, rgb(137, 136, 133) 13.00%, rgb(144, 143, 140) 16.25%, rgb(152, 150, 147) 19.50%, rgb(158, 157, 153) 22.75%, rgb(165, 163, 159) 26.00%, rgb(170, 169, 165) 29.25%, rgb(176, 174, 170) 32.50%, rgb(180, 178, 174) 35.75%, rgb(184, 182, 178) 39.00%, rgb(187, 186, 181) 42.25%, rgb(190, 188, 183) 45.50%, rgb(192, 190, 185) 48.75%, rgb(193, 191, 186) 52.00%, rgb(194, 192, 187) 55.25%, rgb(195, 193, 188) 58.50%, rgb(195, 193, 188) 61.75%, rgb(195, 193, 188) 65.00%, rgba(195, 193, 188, 0.988) 68.89%, rgba(195, 193, 188, 0.924) 72.78%, rgba(195, 193, 188, 0.790) 76.67%, rgba(195, 193, 188, 0.603) 80.56%, rgba(195, 193, 188, 0.397) 84.44%, rgba(195, 193, 188, 0.210) 88.33%, rgba(195, 193, 188, 0.076) 92.22%, rgba(195, 193, 188, 0.012) 96.11%, rgba(195, 193, 188, 0.000) 100.00%); }
  .lp .lp-turn { --t3-foot-rgb: 139, 129, 121; }
  .lp .scrolly4 .t3-stage::after { display: block; left: 0; right: 0; width: auto; height: 17%; background: linear-gradient(to bottom, rgba(139, 129, 121, 0.000) 0.00%, rgba(139, 129, 121, 0.016) 4.25%, rgba(139, 129, 121, 0.104) 8.50%, rgba(139, 129, 121, 0.275) 12.75%, rgba(139, 129, 121, 0.500) 17.00%, rgba(139, 129, 121, 0.725) 21.25%, rgba(139, 129, 121, 0.896) 25.50%, rgba(139, 129, 121, 0.984) 29.75%, rgba(139, 129, 121, 1.000) 34.00%, rgb(139, 129, 121) 39.50%, rgb(139, 129, 121) 45.00%, rgb(139, 129, 121) 50.50%, rgb(138, 128, 120) 56.00%, rgb(137, 127, 119) 61.50%, rgb(136, 126, 118) 67.00%, rgb(134, 124, 117) 72.50%, rgb(132, 122, 115) 78.00%, rgb(129, 120, 113) 83.50%, rgb(126, 117, 110) 89.00%, rgb(122, 114, 107) 94.50%, rgb(118, 110, 104) 100.00%); }
  .lp .lp-turn.scrolly4 { background: linear-gradient(rgb(118, 110, 104), rgb(118, 110, 104)) bottom / 100% 120px no-repeat, var(--t3-bg); }
  .t3-fade-out { height: 160px; background: linear-gradient(to bottom, rgb(118, 110, 104) 0.0px, rgb(114, 106, 100) 10.0px, rgb(109, 102, 96) 20.0px, rgb(104, 97, 92) 30.0px, rgb(99, 92, 87) 40.0px, rgb(93, 87, 83) 50.0px, rgb(88, 82, 78) 60.0px, rgb(82, 77, 73) 70.0px, rgb(76, 72, 68) 80.0px, rgb(71, 66, 64) 90.0px, rgb(65, 61, 59) 100.0px, rgb(60, 56, 54) 110.0px, rgb(55, 52, 50) 120.0px, rgb(50, 47, 46) 130.0px, rgb(45, 43, 42) 140.0px, rgb(41, 39, 38) 150.0px, rgb(37, 35, 35) 160.0px); }
  .nz-topfade { height: calc((var(--stage-h, 860px) - 860px) / 2 + 190px); background: linear-gradient(to bottom, rgb(37, 35, 35) 0.00%, rgb(33, 32, 32) 5.23%, rgb(30, 29, 29) 10.46%, rgb(27, 26, 27) 15.69%, rgb(25, 24, 25) 20.92%, rgb(23, 22, 23) 26.15%, rgb(21, 21, 21) 31.38%, rgb(20, 19, 20) 36.62%, rgb(19, 18, 19) 41.85%, rgb(18, 18, 19) 47.08%, rgb(17, 17, 18) 52.31%, rgb(17, 17, 18) 57.54%, rgb(17, 17, 18) 62.77%, rgb(17, 17, 18) 68.00%, rgba(17, 17, 18, 0.75) 84%, rgba(17, 17, 18, 0) 100%); }
  .lp .lp-noise.scrolly .nz-sticky::after { height: 280px; background: linear-gradient(to bottom, rgba(24, 23, 22, 0.000) 0.00%, rgba(24, 23, 22, 0.035) 4.67%, rgba(24, 23, 22, 0.210) 9.33%, rgba(24, 23, 22, 0.500) 14.00%, rgba(24, 23, 22, 0.790) 18.67%, rgba(24, 23, 22, 0.965) 23.33%, rgba(24, 23, 22, 1.000) 28.00%, rgb(24, 23, 22) 31.60%, rgb(24, 23, 22) 35.20%, rgb(25, 24, 23) 38.80%, rgb(26, 25, 24) 42.40%, rgb(27, 26, 25) 46.00%, rgb(30, 29, 27) 49.60%, rgb(33, 32, 30) 53.20%, rgb(36, 35, 34) 56.80%, rgb(41, 40, 38) 60.40%, rgb(46, 45, 43) 64.00%, rgb(52, 51, 49) 67.60%, rgb(59, 58, 56) 71.20%, rgb(67, 65, 63) 74.80%, rgb(75, 73, 71) 78.40%, rgb(84, 82, 80) 82.00%, rgb(93, 91, 88) 85.60%, rgb(103, 101, 98) 89.20%, rgb(113, 111, 107) 92.80%, rgb(123, 121, 117) 96.40%, rgb(133, 130, 126) 100.00%); }
  .lp .t3-fade-out + .lp-noise.scrolly { background: linear-gradient(to bottom, rgb(45, 45, 45) 0, rgb(45, 45, 45) 4px, rgba(0, 0, 0, 0) 4px) top / 100% 4px no-repeat, linear-gradient(rgb(133, 130, 126), rgb(133, 130, 126)) bottom / 100% 120px no-repeat, rgb(17, 17, 18); }
  .nz-fade-out { height: 40px; background: linear-gradient(to bottom, rgb(133, 130, 126) 0.0px, rgb(142, 140, 136) 10.0px, rgb(152, 149, 145) 20.0px, rgb(161, 158, 153) 30.0px, rgb(169, 166, 161) 40.0px); }
  .lp .lp-nine { background: linear-gradient(to bottom, rgb(169, 166, 161) 0.0px, rgb(177, 174, 169) 10.2px, rgb(184, 181, 175) 20.4px, rgb(190, 187, 181) 30.5px, rgb(195, 192, 186) 40.7px, rgb(199, 196, 190) 50.9px, rgb(202, 199, 193) 61.1px, rgb(204, 201, 195) 71.3px, rgb(206, 203, 197) 81.5px, rgb(207, 204, 198) 91.6px, rgb(207, 204, 198) 101.8px, rgb(207, 204, 198) 112.0px) top / 100% 112px no-repeat, var(--nb-stone); }
  .lp .lp-why-line { position: relative; }
  .lp .lp-why-line::before { content: ""; position: absolute; left: 0; right: 0; top: -125px; height: calc(var(--stage-h, 860px) / 2 - 50px); pointer-events: none; background: linear-gradient(to bottom, rgb(207, 204, 198) 0.00%, rgb(207, 204, 198) 2.44%, rgb(207, 204, 198) 4.88%, rgb(206, 203, 197) 7.32%, rgb(206, 203, 197) 9.76%, rgb(204, 201, 195) 12.20%, rgb(202, 200, 194) 14.63%, rgb(200, 197, 192) 17.07%, rgb(197, 194, 189) 19.51%, rgb(194, 191, 185) 21.95%, rgb(190, 187, 182) 24.39%, rgb(185, 182, 177) 26.83%, rgb(179, 177, 172) 29.27%, rgb(174, 171, 167) 31.71%, rgb(167, 165, 161) 34.15%, rgb(161, 159, 154) 36.59%, rgb(154, 152, 148) 39.02%, rgb(147, 145, 141) 41.46%, rgb(139, 137, 134) 43.90%, rgb(132, 130, 127) 46.34%, rgb(124, 123, 120) 48.78%, rgb(117, 115, 113) 51.22%, rgb(109, 108, 106) 53.66%, rgb(102, 101, 99) 56.10%, rgb(95, 94, 92) 58.54%, rgb(88, 88, 86) 60.98%, rgb(82, 82, 80) 63.41%, rgb(76, 76, 75) 65.85%, rgb(71, 70, 70) 68.29%, rgb(66, 66, 65) 70.73%, rgb(62, 61, 61) 73.17%, rgb(58, 58, 57) 75.61%, rgb(54, 54, 54) 78.05%, rgb(52, 52, 51) 80.49%, rgb(49, 49, 49) 82.93%, rgb(47, 47, 47) 85.37%, rgb(46, 46, 46) 87.80%, rgb(45, 45, 45) 90.24%, rgb(44, 44, 44) 92.68%, rgb(44, 44, 44) 95.12%, rgb(44, 44, 44) 97.56%, rgb(44, 44, 44) 100.00%); }
  .lp .lp-why-line { background: linear-gradient(to bottom, rgb(44, 44, 44) 0.00%, rgb(44, 44, 44) 3.57%, rgb(44, 44, 44) 7.14%, rgb(44, 44, 44) 10.71%, rgb(45, 45, 45) 14.29%, rgb(45, 45, 45) 17.86%, rgb(46, 46, 46) 21.43%, rgb(47, 47, 47) 25.00%, rgb(48, 48, 48) 28.57%, rgb(49, 49, 49) 32.14%, rgb(51, 51, 51) 35.71%, rgb(53, 53, 53) 39.29%, rgb(55, 55, 55) 42.86%, rgb(58, 58, 58) 46.43%, rgb(61, 61, 61) 50.00%, rgb(64, 64, 64) 53.57%, rgb(68, 68, 68) 57.14%, rgb(72, 72, 72) 60.71%, rgb(76, 76, 76) 64.29%, rgb(81, 81, 80) 67.86%, rgb(86, 86, 85) 71.43%, rgb(91, 91, 90) 75.00%, rgb(97, 97, 96) 78.57%, rgb(103, 102, 101) 82.14%, rgb(109, 108, 107) 85.71%, rgb(115, 114, 113) 89.29%, rgb(121, 121, 120) 92.86%, rgb(128, 127, 126) 96.43%, rgb(134, 134, 133) 100.00%) bottom / 100% calc(var(--stage-h, 860px) / 2 - 175px) no-repeat, var(--nb-ink); }
  .why-fade-out { height: 160px; background: linear-gradient(to bottom, rgb(134, 134, 133) 0.0px, rgb(141, 140, 139) 10.0px, rgb(148, 147, 146) 20.0px, rgb(154, 154, 152) 30.0px, rgb(161, 160, 159) 40.0px, rgb(168, 167, 165) 50.0px, rgb(174, 174, 172) 60.0px, rgb(181, 180, 178) 70.0px, rgb(187, 186, 184) 80.0px, rgb(193, 192, 190) 90.0px, rgb(199, 198, 196) 100.0px, rgb(204, 203, 201) 110.0px, rgb(209, 209, 206) 120.0px, rgb(214, 214, 211) 130.0px, rgb(219, 218, 216) 140.0px, rgb(223, 222, 220) 150.0px, rgb(227, 226, 223) 160.0px); }
  .lp .lp-founder { background: linear-gradient(to bottom, rgb(227, 226, 223) 0.0px, rgb(231, 230, 227) 10.2px, rgb(234, 233, 230) 20.3px, rgb(237, 236, 233) 30.5px, rgb(239, 238, 235) 40.6px, rgb(241, 240, 237) 50.8px, rgb(242, 241, 239) 60.9px, rgb(244, 243, 240) 71.1px, rgb(245, 244, 241) 81.2px, rgb(245, 244, 241) 91.4px, rgb(246, 245, 242) 101.5px, rgb(246, 245, 242) 111.7px, rgb(246, 245, 242) 121.8px, rgb(246, 245, 242) 132.0px) top / 100% 132px no-repeat, var(--nb-ground); }
  .det-fade { background: var(--nb-ground); }
  .lp .lp-anat { background: linear-gradient(to bottom, rgb(246, 245, 242) 0.0px, rgb(246, 245, 242) 10.0px, rgb(246, 245, 242) 20.0px, rgb(245, 244, 241) 30.0px, rgb(244, 243, 240) 40.0px, rgb(243, 242, 239) 50.0px, rgb(241, 240, 237) 60.0px, rgb(238, 237, 234) 70.0px, rgb(234, 233, 230) 80.0px, rgb(230, 229, 226) 90.0px, rgb(225, 224, 221) 100.0px, rgb(219, 218, 216) 110.0px, rgb(213, 212, 209) 120.0px) bottom / 100% 120px no-repeat, var(--nb-ground); }
  .foot-fade { height: 180px; background: linear-gradient(to bottom, rgb(213, 212, 209) 0.0px, rgb(206, 205, 203) 10.0px, rgb(198, 197, 195) 20.0px, rgb(190, 189, 187) 30.0px, rgb(182, 181, 179) 40.0px, rgb(173, 172, 170) 50.0px, rgb(164, 163, 161) 60.0px, rgb(155, 154, 152) 70.0px, rgb(145, 145, 143) 80.0px, rgb(136, 136, 134) 90.0px, rgb(127, 127, 125) 100.0px, rgb(118, 118, 117) 110.0px, rgb(110, 109, 108) 120.0px, rgb(101, 101, 100) 130.0px, rgb(94, 93, 93) 140.0px, rgb(86, 86, 85) 150.0px, rgb(80, 79, 79) 160.0px, rgb(73, 73, 73) 170.0px, rgb(68, 68, 67) 180.0px); }
  .lp .lp-footer-b { background: linear-gradient(to bottom, rgb(68, 68, 67) 0.0px, rgb(63, 63, 63) 9.7px, rgb(59, 59, 59) 19.3px, rgb(55, 55, 55) 29.0px, rgb(52, 52, 52) 38.7px, rgb(50, 50, 50) 48.3px, rgb(48, 48, 48) 58.0px, rgb(46, 46, 46) 67.7px, rgb(45, 45, 45) 77.3px, rgb(45, 45, 45) 87.0px, rgb(44, 44, 44) 96.7px, rgb(44, 44, 44) 106.3px, rgb(44, 44, 44) 116.0px) top / 100% 116px no-repeat, var(--nb-ink); }
  /* joins:end */
}

/* The waitlist bar's dock (2026-10-08): fixed to the bottom of the window, outside the scaled page, 1440 px wide and
   scaled from its bottom-left corner like the page (desktop.js sets left and the scale). It has the class lp, so it is a
   container named lp and the desktop rules above reach the bar; this undoes the rest of .lp (the ground colour, the
   relative position). Only the bar inside it takes clicks. */
.lp.nb-bar-dock { position: fixed; left: 0; bottom: 0; width: 1440px; height: 72px; z-index: 40; background: none; transform-origin: 0 100%; pointer-events: none; }
.lp.nb-bar-dock .lp-bar { pointer-events: auto; }