/* Audience pages (/for/designers/ and friends), rebuilt 21 Oct 2026 around the product (Robert: "it's a platform, so
   show the interface in context", in the spirit of linear.app and x.ai/bot).
   The hero is the real app in a big window, tilted and settling flat as you scroll; each feature is a clip of the real
   interface being used, cropped and bleeding off the page. Loaded after brand.css and blog.css. */

.lp { padding-top: 0; overflow-x: clip; }
.lp .wrap.narrow { max-width: calc(820px + var(--gutter) * 2); }
/* Section labels in the normal font (no spaced capitals on this site) */
.lp .label { font: 600 15px/1.3 var(--sys); letter-spacing: 0; text-transform: none; color: var(--secondary); }
.lp h1 strong, .lp h2 strong { font-weight: 600; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* MARK: Hero: the words, centred, then the app */
.lp-hero { position: relative; overflow: hidden; padding: calc(58px + clamp(56px, 7vw, 100px)) 0 0; isolation: isolate; }
.lp-hero-copy { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: 22px; max-width: 980px; }
.lp-hero h1 { font-size: clamp(44px, 6.4vw, 88px); line-height: 1.01; letter-spacing: -.048em; max-width: 13em; }
.lp-hero .lede { max-width: 40em; margin: 0 auto; font-size: clamp(17px, 1.5vw, 20px); text-wrap: pretty; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: 999px; font-size: 14px; color: var(--secondary); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--hair); }
.dotlive { width: 7px; height: 7px; border-radius: 50%; background: #86e3bb; animation: live 2.4s infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(134,227,187,.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(134,227,187,0); } }
.lp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.lp-actions .btn.quiet .arr { transition: transform .3s var(--spring); }
.lp-actions .btn.quiet:hover .arr { transform: translateX(3px); }
.lp-hero .fine { margin-top: -6px; }

/* The stage: a window with the real app, tilted back, flattening as it scrolls into view (--t from 1 to 0) */
.lp-stage { --t: 1; position: relative; z-index: 1; width: min(1240px, calc(100% - var(--gutter) * 2)); margin: clamp(48px, 6vw, 80px) auto 0; perspective: 2200px; }
.lp-glow { position: absolute; left: 50%; top: -12%; width: 130%; height: 80%; translate: -50% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(129,140,248,.32), rgba(255,143,192,.10) 45%, transparent 75%); filter: blur(20px); opacity: calc(.55 + .45 * (1 - var(--t))); }
.lp-win { position: relative; border-radius: 18px; overflow: hidden; background: #0b0d14;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.18) inset, 0 50px 140px -30px rgba(0,0,0,.9), 0 0 120px -40px rgba(129,140,248,.45); }
.lp-win::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(179,188,255,.9), rgba(255,143,192,.8), transparent); }
.lp-win-bar { position: relative; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: #12141c; box-shadow: inset 0 -1px 0 rgba(255,255,255,.06); }
.lp-win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.lp-win-bar i:nth-child(2) { background: #febc2e; } .lp-win-bar i:nth-child(3) { background: #28c840; }
.lp-win-bar span { position: absolute; left: 50%; translate: -50% 0; padding: 4px 14px; border-radius: 8px; font-size: 12.5px; color: var(--tertiary); background: rgba(255,255,255,.05); }
.lp-hero-win { transform: rotateX(calc(var(--t) * 16deg)) scale(calc(1 - var(--t) * .06)); transform-origin: 50% 0; will-change: transform; }
.lp-hero-screen { position: relative; aspect-ratio: 1280 / 860; background: #0b0d14; }
.clip { display: block; width: 100%; height: 100%; object-fit: cover; background: #0b0d14; }
.lp-hero-screen .clip { position: absolute; inset: 0; }
/* The page fades out over the bottom of the window, so it reads as a glimpse, not a screenshot */
.lp-stage::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -2px; height: 34%; z-index: 2; pointer-events: none; background: linear-gradient(transparent, var(--night) 92%); }
.lp-perch { position: absolute; z-index: 3; width: clamp(96px, 12vw, 160px); height: auto; right: 5%; top: 0; translate: 0 -78%; filter: drop-shadow(0 20px 30px rgba(0,0,0,.6));
  transform: rotateX(calc(var(--t) * 16deg)); transform-origin: 50% 100%; }

/* MARK: Sections */
.lp-sec { position: relative; padding: clamp(90px, 11vw, 150px) 0 0; }
.lp-head { display: grid; justify-items: center; text-align: center; gap: 16px; max-width: 860px; margin: 0 auto clamp(40px, 5vw, 64px); }
.lp-head h2 { font-size: clamp(34px, 4.8vw, 60px); }
.lp-head .lede { margin: 0 auto; }

/* Their real problems: four short columns, quiet */
.sec-pains { padding-top: clamp(40px, 5vw, 70px); }
.pains { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: 1200px; margin: 0 auto; }
.pain { display: grid; gap: 10px; align-content: start; padding: 6px 26px 6px; box-shadow: inset 1px 0 0 var(--hair); }
.pain:first-child { box-shadow: none; padding-left: 0; }
.pain b { font-size: 19px; letter-spacing: -.02em; line-height: 1.25; }
.pain p { margin: 0; color: var(--secondary); font-size: 15.5px; line-height: 1.55; }

/* MARK: Features: words on one side, the real interface on the other, running off the page */
.lp-feat { position: relative; padding: clamp(110px, 13vw, 180px) 0 0; }
.lp-feat-in { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: center; max-width: 1320px; }
.ui-left .lp-feat-in { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
.ui-left .lp-feat-text { order: 2; }
.lp-feat-text { display: grid; gap: 18px; justify-items: start; }
.lp-feat-text h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -.04em; }
.lp-feat-text .lede { margin: 0; font-size: 17.5px; line-height: 1.55; color: var(--secondary); text-wrap: pretty; }
.lp-who { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--text);
  background: rgba(var(--c), .08); box-shadow: inset 0 0 0 1px rgba(var(--c), .25); }
.lp-who img { width: 30px; height: 30px; border-radius: 50%; background: #11131b; }
.lp-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.lp-points li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.45; color: var(--text); }
.lp-points li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 10px; height: 5.5px; border-left: 2px solid rgb(var(--c)); border-bottom: 2px solid rgb(var(--c)); transform: rotate(-45deg); }
/* The interface piece: bigger than its column, so it runs past the page edge and fades there */
.lp-ui { position: relative; margin: 0; min-width: 0; }
.lp-ui::before { content: ""; position: absolute; inset: -14% -10%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--c), .20), transparent 70%); filter: blur(10px); }
.lp-ui-frame { position: relative; width: 125%; border-radius: 20px; overflow: hidden; background: #0b0d14;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.16) inset, 0 40px 100px -30px rgba(0,0,0,.9);
  -webkit-mask: linear-gradient(90deg, #000 72%, transparent 99%); mask: linear-gradient(90deg, #000 72%, transparent 99%); }
.ui-left .lp-ui-frame { margin-left: -25%; -webkit-mask: linear-gradient(270deg, #000 72%, transparent 99%); mask: linear-gradient(270deg, #000 72%, transparent 99%); }
.lp-ui-frame::before { content: ""; position: absolute; left: 8%; right: 30%; top: 0; height: 1px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(var(--c), .9), transparent); }
.ui-left .lp-ui-frame::before { left: 30%; right: 8%; }
.lp-ui .clip { height: auto; }

/* MARK: The moments Monty looks for, as the posts he spots */
.signals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1200px; margin: 0 auto; }
.signal { --c: 179,188,255; display: grid; gap: 12px; align-content: start; }
.sig-post { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 16px 18px; border-radius: 18px; background: #000; box-shadow: inset 0 0 0 1px #2f3336; transition: box-shadow .3s, transform .4s var(--spring); }
.signal:hover .sig-post { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(var(--c), .7), 0 0 40px -12px rgba(var(--c), .6); }
.sig-av { width: 40px; height: 40px; border-radius: 50%; background: #1d1f23 center / cover; }
.sig-post b { display: inline; font-size: 15px; color: #e7e9ea; }
.sig-post small { margin-left: 6px; font-size: 14px; color: #71767b; }
.sig-post p { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: #e7e9ea; }
.sig-tag { position: absolute; right: 12px; top: -11px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #0b0c10; background: rgb(var(--c)); box-shadow: 0 6px 20px -6px rgba(var(--c), .8); }
.sig-tag i { width: 6px; height: 6px; border-radius: 50%; background: #0b0c10; }
.sig-why { margin: 0; padding: 0 6px; font-size: 15px; line-height: 1.5; color: var(--secondary); }

/* Why it works for them: a quiet grid */
.matters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 40px; max-width: 1200px; margin: 0 auto; }
.matter { --c: 179,188,255; display: grid; gap: 10px; align-content: start; padding-top: 22px; box-shadow: inset 0 1px 0 var(--hair); }
.matter i { width: 22px; height: 3px; border-radius: 3px; background: rgb(var(--c)); box-shadow: 0 0 12px rgba(var(--c), .8); }
.matter b { font-size: 18.5px; letter-spacing: -.018em; }
.matter p { margin: 0; color: var(--secondary); font-size: 15.5px; line-height: 1.55; }

/* MARK: The live demo */
.lp-demo { position: relative; max-width: 1200px; margin: 0 auto; isolation: isolate; }
.lp-demo::before { content: ""; position: absolute; inset: -8% -6%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(129,140,248,.18), transparent 70%); }
.lp-demo-frame { position: relative; height: min(780px, 82vh); }
.lp-demo-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #07080a; }
.lp-demo-veil { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 14px; border: 0; cursor: pointer; color: var(--secondary); font: inherit;
  background: radial-gradient(closest-side, rgba(7,8,10,.62), rgba(7,8,10,.82)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity .4s; }
.lp-demo-veil small { font-size: 14px; padding: 4px 12px; border-radius: 999px; background: rgba(7,8,10,.7); color: var(--secondary); }
.lp-demo-btn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 28px 12px 12px; border-radius: 999px; font: 600 19px/1 var(--sys); color: #0b0c10; background: #fff;
  box-shadow: 0 20px 50px -14px rgba(129,140,248,.7); transition: transform .4s var(--spring), box-shadow .3s; }
.lp-demo-btn > span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #0b0c10; }
.lp-demo-veil:hover .lp-demo-btn { transform: translateY(-2px) scale(1.03); box-shadow: 0 26px 60px -14px rgba(129,140,248,.9); }
.lp-demo.live .lp-demo-veil { opacity: 0; pointer-events: none; }

/* MARK: Pricing */
.lp-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1040px; margin: 0 auto; }
.lp-plan { position: relative; display: grid; gap: 12px; align-content: start; padding: 28px 26px 30px; border-radius: 26px; background: var(--graphite); box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .3s, transform .4s var(--spring); }
.lp-plan:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.lp-plan.best { background: linear-gradient(180deg, rgba(179,188,255,.08), rgba(179,188,255,.02)), var(--graphite); box-shadow: inset 0 0 0 1px rgba(179,188,255,.35); }
.best-tag { position: absolute; top: 18px; right: 18px; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #0b0c10; background: #b3bcff; }
.lp-plan-n { font-size: 19px; }
.lp-price { display: flex; align-items: baseline; gap: 6px; }
.lp-price small { font-size: 15px; color: var(--secondary); }
.lp-price b { font-size: 46px; font-weight: 600; letter-spacing: -.045em; }
.lp-price span { color: var(--tertiary); font-size: 14.5px; }
.lp-reads { margin: 0; font-size: 15px; color: var(--text); }
.lp-plan ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.lp-plan li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.45; color: var(--secondary); }
.lp-plan li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 9px; height: 5px; border-left: 1.8px solid #86e3bb; border-bottom: 1.8px solid #86e3bb; transform: rotate(-45deg); }
.lp-founding { max-width: 1040px; margin: 22px auto 0; padding: 14px 18px; border-radius: 16px; text-align: center; font-size: 15.5px; color: var(--secondary); background: rgba(255,179,107,.07); box-shadow: inset 0 0 0 1px rgba(255,179,107,.22); }
.lp-founding b { color: #ffb36b; }
.lp-fine { text-align: center; margin: 18px 0 0; font-size: 14px; color: var(--tertiary); }
.lp-fine a { color: var(--secondary); text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px; cursor: pointer; transition: color .2s, text-decoration-color .2s; }
.lp-fine a:hover { color: var(--text); text-decoration-color: #fff; }

/* Questions */
.sec-faq .faq { max-width: 820px; margin: 0 auto; }

/* The last screen */
.lp-final { position: relative; overflow: hidden; text-align: center; padding: clamp(110px, 13vw, 170px) 0 clamp(90px, 11vw, 140px); isolation: isolate; }
.lp-final::before { content: ""; position: absolute; inset: 20% -10% 0; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(120,132,230,.14), transparent); }
.lp-final .wrap { position: relative; z-index: 1; display: grid; justify-items: center; gap: 20px; }
.lp-final-crew { width: min(620px, 92vw); height: auto; margin-bottom: 6px; }
.lp-final h2 { font-size: clamp(36px, 5vw, 64px); max-width: 15em; }
.lp-final .lede { margin: 0 auto; }

/* Sources and links inside section text */
.pain p a, .sig-why a, .matter p a, .lp-head .lede a, .lp-feat-text .lede a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255,255,255,.28); text-underline-offset: 3px; cursor: pointer; transition: text-decoration-color .2s; }
.pain p a:hover, .sig-why a:hover, .matter p a:hover, .lp-head .lede a:hover, .lp-feat-text .lede a:hover { text-decoration-color: #fff; }

/* MARK: Smaller screens */
@media (max-width: 1080px) {
  .pains { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 0; }
  .pain:nth-child(3) { box-shadow: none; padding-left: 0; }
  .signals, .matters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .lp-feat-in, .ui-left .lp-feat-in { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .ui-left .lp-feat-text { order: 0; }
  .lp-ui-frame, .ui-left .lp-ui-frame { width: 112%; margin-left: 0; -webkit-mask: linear-gradient(90deg, #000 80%, transparent 99%); mask: linear-gradient(90deg, #000 80%, transparent 99%); }
  .lp-plans { grid-template-columns: 1fr; max-width: 520px; }
  .lp-demo-frame { height: min(640px, 76vh); }
}
@media (max-width: 640px) {
  .lp-hero h1 { font-size: clamp(40px, 11vw, 52px); }
  .lp-actions { width: 100%; } .lp-actions .btn { width: 100%; }
  .lp-stage { width: calc(100% + 24px); margin: 40px 0 0 -12px; perspective: none; }
  .lp-hero-win { transform: none; }
  .lp-hero-screen { aspect-ratio: 1 / 1.05; }
  .lp-hero-screen .clip { object-position: 50% 30%; }
  .lp-perch { display: none; }
  .lp-stage::after { height: 22%; }
  .lp-ui-frame, .ui-left .lp-ui-frame { width: 150%; }
  .lp-win, .lp-ui-frame { border-radius: 14px; }
  .lp-win-bar { height: 32px; } .lp-win-bar span { display: none; }
  .pains, .signals, .matters { grid-template-columns: minmax(0, 1fr); }
  .pain, .pain:first-child { box-shadow: inset 0 1px 0 var(--hair); padding: 18px 0 0; }
  .lp-feat { padding-top: 90px; }
  .lp-final .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .lp-hero-win, .lp-perch { transform: none; } .sig-post, .lp-plan { transition: none; } }

/* MARK: The tech look (front matter `look: tech`; Robert, 21 Oct 2026, for /freelancers/ and /agencies/):
   Monty's dot language instead of the felt crew. A field of dots behind the hero, Monty's head made of dots on the
   window, the horizon arc rising behind it, and the dot-cat gap with amber eyes behind the last words. */
.lp-hero.tech { padding-bottom: 0; }
.lp-hero canvas.lp-hero-field { position: absolute; left: 0; top: 0; width: 100%; height: 70%; z-index: -1; opacity: .9;
  /* quiet behind the words, so the headline and the lede stay readable */
  -webkit-mask-image: radial-gradient(48% 40% at 50% 34%, rgba(0,0,0,.08), #000 92%); mask-image: radial-gradient(48% 40% at 50% 34%, rgba(0,0,0,.08), #000 92%); }
.lp-hero.tech .lp-glow { background: radial-gradient(closest-side, rgba(129,140,248,.26), rgba(134,227,187,.06) 50%, transparent 75%); }
.lp-stage canvas.lp-dothead { position: absolute; z-index: 3; right: 6%; top: 0; width: clamp(130px, 14vw, 200px); height: clamp(130px, 14vw, 200px); translate: 0 -80%;
  transform: rotateX(calc(var(--t) * 16deg)); transform-origin: 50% 100%; }
.lp-stage canvas.lp-hz { position: absolute; z-index: -1; left: -22%; width: 144%; top: -16%; height: 70%;
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 26%, #000 74%, transparent 96%); mask-image: linear-gradient(90deg, transparent 4%, #000 26%, #000 74%, transparent 96%); }
.who-dot { width: 22px; height: 22px; border-radius: 6px; flex: none; margin-left: 3px;
  background-image: radial-gradient(circle at center, rgb(var(--c)) 1.3px, transparent 1.9px); background-size: 5.5px 5.5px; box-shadow: inset 0 0 0 1px rgba(var(--c), .35); }
.lp-hero.tech ~ .lp-feat .lp-who { padding-left: 8px; }

/* The rest of the crew: three cards */
.lp-crew { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1100px; margin: 0 auto; }
.lp-mate { --c: 179,188,255; position: relative; overflow: hidden; display: grid; gap: 14px; align-content: start; padding: 24px 24px 26px; border-radius: 22px; background: var(--graphite); box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .3s, transform .4s var(--spring); }
.lp-mate::before { content: ""; position: absolute; inset: 0 0 50% 40%; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle at center, rgba(var(--c), .8) 1px, transparent 1.6px); background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(70% 80% at 100% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 80% at 100% 0%, #000, transparent 75%); }
.lp-mate:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(var(--c), .5), 0 0 50px -16px rgba(var(--c), .6); }
.mate-who { position: relative; display: inline-flex; align-items: center; gap: 12px; }
.mate-who img { width: 44px; height: 44px; border-radius: 50%; background: #11131b; box-shadow: 0 0 0 2px rgba(var(--c), .55); }
.mate-who b { font-size: 19px; letter-spacing: -.02em; color: rgb(var(--c)); }
.lp-mate p { position: relative; margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--secondary); }
.lp-mate p b { color: var(--text); font-weight: 600; }

/* One statement on a band of dots */
.lp-band { position: relative; margin-top: clamp(100px, 12vw, 160px); padding: clamp(80px, 10vw, 130px) 0; text-align: center; isolation: isolate; overflow: hidden;
  box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); }
.lp-band canvas { position: absolute; inset: 0; z-index: -1; }
.lp-band h2 { font-size: clamp(32px, 4.4vw, 56px); max-width: 16em; margin: 0 auto; }
.lp-band .lede { margin: 20px auto 0; max-width: 40em; }

/* Keep going / Not you? */
.lp-links { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 30px; padding-top: 30px; box-shadow: inset 0 1px 0 var(--hair); }
.lp-links h2 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.03em; }
.lp-links ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 30px; }
.lp-links li { font-size: 16px; line-height: 1.5; color: var(--tertiary); }
.lp-links a { display: inline-flex; padding: 8px 0; color: var(--text); text-decoration: none; cursor: pointer; transition: color .2s; }
.lp-links a:hover { color: #b3bcff; }
.sec-links + .sec-links { padding-top: 40px; }

/* The last screen, with Monty's dot head */
.lp-final.tech { padding-top: clamp(120px, 14vw, 190px); }
.lp-final canvas.lp-final-field { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; opacity: .8; }
.lp-final canvas.lp-final-head { width: 150px; height: 150px; margin-bottom: 6px; }
.lp-final.tech::before { display: none; }

@media (max-width: 900px) {
  .lp-crew { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .lp-links { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .lp-stage canvas.lp-dothead { display: none; }
  .lp-links ul { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .lp-stage canvas.lp-dothead { transform: none; } .lp-mate { transition: none; } }
.lp-hero.tech .lp-stage { margin-top: clamp(110px, 11vw, 160px); }
.lp-final canvas.lp-final-head { width: 190px; height: 190px; }