/* MAIA SYSTEMS: founder master prompt, 8 Nov 2026. Loads after site.css and scroll-craft.css.
   Colour stays the locked $400-card teal (#22B8C4 light, #06636C edge) on obsidian #06080B.
   html.fx-on is set by maia-fx.js. Without it the page keeps the earlier look. */
@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root { interpolate-size: allow-keywords; }
.fx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------ pearl buttons
   Pill of white-to-teal pearl, a bright specular streak on top, a sheen that sweeps across on hover. */
html.fx-on .btn, html.fx-on .btn:hover, html.fx-on .btn--line,
html.fx-on .pilot__head .btn--line, html.fx-on .o-top__acts .btn--line, html.fx-on .close__acts .btn + .btn--line {
  position: relative; isolation: isolate; overflow: hidden;
  color: #04121A; border: 0;
  background: radial-gradient(130% 160% at 28% -10%, #FFFFFF 0%, #EFFDFE 20%, #A9E8EC 50%, #3CC3CD 78%, #1C9DA7 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .95),
    inset 0 -7px 14px rgba(4, 18, 26, .3),
    inset 0 0 0 1px rgba(255, 255, 255, .4),
    0 12px 28px -12px rgba(34, 184, 196, .8),
    0 2px 5px rgba(0, 0, 0, .55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  letter-spacing: .005em;
  transition: translate 220ms var(--sc-ease, var(--ease)), box-shadow 240ms var(--ease), letter-spacing 240ms var(--ease), filter 240ms var(--ease);
}
html.fx-on .btn::before {
  content: ""; position: absolute; z-index: -1; left: 9%; right: 9%; top: 7%; height: 44%;
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
  opacity: .8;
}
html.fx-on .btn::after {
  content: ""; position: absolute; z-index: -1; inset: -20% 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .85) 46%, rgba(255, 255, 255, 0) 60%);
  transform: translateX(-130%);
  transition: transform 800ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  html.fx-on .btn:hover { letter-spacing: .03em; filter: brightness(1.05) saturate(1.1); }
  html.fx-on .btn:hover::after { transform: translateX(130%); }
}
html.fx-on .btn.sc-magnetic:is(:hover, :focus-visible) {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .95),
    inset 0 -7px 14px rgba(4, 18, 26, .3),
    inset 0 0 0 1px rgba(255, 255, 255, .5),
    0 16px 34px -10px rgba(34, 184, 196, .95),
    0 0 0 4px rgba(34, 184, 196, .16);
}
html.fx-on .btn:active { filter: brightness(.94); }
html.fx-on .btn .gh-l { text-shadow: inherit; }

/* ------------------------------------------------ thick clear acrylic glass cards
   Clear, not black. Bent backdrop where the browser can (Chromium), double bevel, an LED beam
   running round the edge while the card is on screen. The old display lines are gone. */
html.fx-on :is(.stage, .plate, .vslot, .try, .words li, .sc-stack-card, .o-covers__grid > div, .next__list li) {
  position: relative;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 28%, rgba(255, 255, 255, .012) 58%, rgba(34, 184, 196, .07) 100%),
    rgba(255, 255, 255, .015);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(12px) saturate(170%) brightness(1.1);
  backdrop-filter: blur(12px) saturate(170%) brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 1px 0 0 rgba(255, 255, 255, .12),
    inset -1px 0 0 rgba(255, 255, 255, .05),
    inset 0 -1px 0 rgba(255, 255, 255, .1),
    inset 0 -14px 28px -18px rgba(34, 184, 196, .35),
    0 30px 60px -32px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(6, 99, 108, .35);
}
html.fx-on.fx-glass :is(.plate, .vslot, .try, .words li, .o-covers__grid > div, .next__list li) {
  -webkit-backdrop-filter: blur(12px) saturate(170%) brightness(1.1);
  backdrop-filter: url(#maia-glass) blur(9px) saturate(170%) brightness(1.1);
}
/* second bevel: an inner ring 5px in, lit on its top edge (replaces the old scan lines) */
html.fx-on :is(.stage, .plate, .vslot, .try, .words li, .sc-stack-card, .o-covers__grid > div)::before {
  content: ""; position: absolute; inset: 5px; z-index: 0; pointer-events: none;
  border-radius: max(4px, calc(var(--radius, 14px) - 5px));
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 22%);
  border: 1px solid rgba(255, 255, 255, .07);
  border-top-color: rgba(255, 255, 255, .2);
}
.next__list li::before { z-index: 1; }
/* LED beam */
html.fx-on :is(.stage, .plate, .vslot, .try, .words li, .o-covers__grid > div)::after {
  content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none; border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--beam), transparent 0deg 245deg, rgba(34, 184, 196, .25) 280deg, #22B8C4 315deg, #E6FEFF 333deg, #22B8C4 346deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: .9;
}
html.fx-motion :is(.stage, .plate, .vslot, .try, .words li, .o-covers__grid > div).sc-inview::after { animation: fx-beam 7s linear infinite; }
html.fx-motion :is(.plate, .words li, .o-covers__grid > div):nth-child(2).sc-inview::after { animation-delay: -2.3s; }
html.fx-motion :is(.plate, .words li, .o-covers__grid > div):nth-child(3).sc-inview::after { animation-delay: -4.6s; }
@keyframes fx-beam { to { --beam: 360deg; } }
html.fx-on .try { border-radius: 14px; }
html.fx-on .plate--accent { background: linear-gradient(158deg, rgba(255, 255, 255, .16) 0%, rgba(34, 184, 196, .08) 40%, rgba(34, 184, 196, .14) 100%), rgba(255, 255, 255, .02); }

/* ------------------------------------------------ glass fibre-optic tube with a comet of light */
.tube { position: absolute; display: block; pointer-events: none; z-index: 2; }
.tube__svg { display: block; overflow: visible; }
.tube__svg path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.tube__edge { stroke: rgba(34, 184, 196, .32); stroke-width: 13; }
.tube__body { stroke: rgba(8, 12, 17, .94); stroke-width: 11; }
.tube__tint { stroke: rgba(34, 184, 196, .08); stroke-width: 7; }
.tube__shine { stroke: rgba(255, 255, 255, .42); stroke-width: 1.3; }
.tube__lit { stroke: rgba(34, 184, 196, .5); stroke-width: 2; }
.tube__tail { stroke: #22B8C4; }
.tube__tails { filter: blur(.7px); transition: opacity 260ms ease; }
.tube__glow { filter: blur(3.5px); transition: opacity 260ms ease; }
.tube__core { stroke: #E6FEFF; stroke-width: 2.2; filter: blur(.4px); }
.tube__head { fill: #FFFFFF; filter: drop-shadow(0 0 3px #FFFFFF) drop-shadow(0 0 9px #22B8C4) drop-shadow(0 0 18px rgba(34, 184, 196, .6)); }
.tube--rest :is(.tube__tails, .tube__glow, .tube__core) { opacity: 0; }
.tube__node { fill: #06080B; stroke: rgba(34, 184, 196, .5); stroke-width: 2; transition: fill 200ms ease, stroke 200ms ease; transform-box: fill-box; transform-origin: center; }
.tube__node.on { fill: #22B8C4; stroke: #E6FEFF; filter: drop-shadow(0 0 6px #22B8C4); animation: fx-ding 520ms var(--ease); }
@keyframes fx-ding { 0% { scale: .6; } 45% { scale: 1.45; } 100% { scale: 1; } }

/* track: the tube sits under the heading, above the cards */
html.fx-on.sc-page .sc-laser { height: 28px; margin-top: 0; margin-bottom: 0; }
.tube--track { left: 0; right: 0; top: 0; height: 28px; }

/* "What happens next": tube down the left on phones, along the top from 900 px */
html.fx-on .next__list::before { display: none; }
.tube--next { left: -7px; top: 1.15rem; bottom: 1.15rem; width: 28px; }
@media (min-width: 900px) {
  .tube--next { left: 0; right: 0; top: calc(.6rem - 14px); bottom: auto; width: auto; height: 28px; }
}
html.fx-on .next__list li::before { background: #06080B; border: 2px solid rgba(34, 184, 196, .5); box-shadow: 0 0 0 3px var(--bg); z-index: 3; transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
html.fx-on .next__list li.is-lit::before { background: #22B8C4; border-color: #E6FEFF; box-shadow: 0 0 0 3px var(--bg), 0 0 16px 3px rgba(34, 184, 196, .9); }
html.fx-on .next__list li.is-ding::before, html.fx-on .o-steps__list li.is-ding::before { animation: fx-ding 520ms var(--ease); }

/* Offer: the step list lights each dot as it crosses the middle of the screen */
html.fx-on .o-steps__rail, html.fx-on .o-steps__fill { display: none; }
.tube--steps { left: -8px; top: .5rem; bottom: .5rem; width: 28px; }
html.fx-on .o-steps__list li::before { z-index: 3; background: #06080B; border: 2px solid rgba(34, 184, 196, .5); width: 12px; height: 12px; left: calc(-1.7rem); top: calc(1rem - 1px); transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
html.fx-on .o-steps__list li { transition: color 260ms ease; }
html.fx-on .o-steps__list li.is-lit { color: var(--ink); }
html.fx-on .o-steps__list li.is-lit::before { background: #22B8C4; border-color: #E6FEFF; box-shadow: 0 0 16px 3px rgba(34, 184, 196, .9); }

/* ------------------------------------------------ hero: isometric blueprint house, trade nodes, rising phone */
.s-grid { fill: none; stroke: rgba(34, 184, 196, .1); stroke-width: 1; }
.s-tile { fill: none; stroke: rgba(34, 184, 196, .3); stroke-width: .9; }
.scene--iso .s-fill { fill: rgba(34, 184, 196, .06); }
@media (min-width: 600px) {
  html.fx-on .scene { transform: perspective(1600px) rotateX(var(--sc-rx, 4deg)) rotateY(var(--sc-ry, 0deg)); }
  html.fx-on .scene::before { background: radial-gradient(ellipse 55% 45% at 50% 62%, rgba(34, 184, 196, .18), transparent 70%); }
}
.scene .scene__nodes li {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, calc(-100% + 6px));
  padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.node {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .15rem; background: none; border: 0; border-radius: 12px; color: var(--ink); font: inherit; cursor: pointer;
}
.node__ic, .orbit__chip {
  position: relative; display: grid; place-items: center; aspect-ratio: 1;
  border-radius: 28%;
  background: linear-gradient(150deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .06) 42%, rgba(34, 184, 196, .22) 100%), rgba(6, 8, 11, .55);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -4px 8px rgba(0, 0, 0, .4),
    0 5px 0 -1px #053F45,
    0 6px 0 -1px rgba(34, 184, 196, .35),
    0 14px 20px -8px rgba(0, 0, 0, .95),
    0 0 20px rgba(34, 184, 196, .22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: translate 260ms var(--ease), box-shadow 260ms var(--ease), border-color 200ms ease;
}
.node__ic { width: clamp(30px, 3.4vw, 44px); }
.node__ic svg, .orbit__chip svg { width: 56%; height: 56%; fill: none; stroke: #ECFEFF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(34, 184, 196, .95)); }
.node__t {
  padding: .05rem .45rem; border-radius: 999px; white-space: nowrap;
  font-size: clamp(.64rem, .82vw, .84rem); font-weight: 700; font-stretch: 94%;
  background: rgba(6, 8, 11, .8); border: 1px solid rgba(34, 184, 196, .45);
  transition: border-color 200ms ease, color 200ms ease;
}
.node:is(:hover, :focus-visible, [aria-pressed="true"]) .node__ic,
.orbit__node:is(:hover, :focus-visible, [aria-pressed="true"]) .orbit__chip {
  translate: 0 -4px; border-color: #22B8C4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -4px 8px rgba(0, 0, 0, .35), 0 9px 0 -1px #053F45, 0 10px 0 -1px rgba(34, 184, 196, .6), 0 20px 26px -8px rgba(0, 0, 0, .95), 0 0 30px rgba(34, 184, 196, .6);
}
.node:is(:hover, :focus-visible, [aria-pressed="true"]) .node__t { border-color: #22B8C4; color: #FFFFFF; }
.node:focus-visible { outline-offset: 2px; }
@media (max-width: 599px) {
  .scene .scene__labels.scene__nodes { display: block; }
  .node__t { display: none; }
  .node__ic { width: 30px; }
}
/* the phone waits off stage and rises with the card */
html.fx-on .scene .scene__phone { left: auto; right: 0; bottom: 2%; width: clamp(112px, 19%, 168px); z-index: 6; }
html.fx-on .scene__phone .phone {
  opacity: 0; transform: translateY(46px) scale(.9) rotateX(14deg); pointer-events: none;
  transition: opacity 320ms ease, transform 560ms var(--ease);
  background: linear-gradient(160deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05) 40%, rgba(34, 184, 196, .14)), rgba(6, 8, 11, .6);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .2), 0 0 0 1px rgba(34, 184, 196, .35), 0 34px 60px -22px rgba(0, 0, 0, .95), 0 0 40px rgba(34, 184, 196, .25);
}
html.fx-on .scene--open .scene__phone .phone { opacity: 1; transform: none; pointer-events: auto; }
html.fx-on .scene__phone .phone__screen { background: linear-gradient(180deg, rgba(10, 13, 18, .9), rgba(6, 8, 11, .94)); justify-content: flex-start; padding: 20% 7% 8%; }
html.fx-on .scene__phone :is(.phone__ring, .phone__state, .phone__who, .phone__note) { display: none; }
.pcard { display: none; width: 100%; text-align: left; font-size: 1em; }
html.fx-on .pcard { display: block; }
.pcard__tag { display: inline-block; padding: .1em .55em; border-radius: 999px; font-size: .78em; font-weight: 700; letter-spacing: .02em; color: #04121A; background: #22B8C4; }
.pcard__trade { margin-top: .7em; font-size: .86em; font-weight: 700; color: #22B8C4; text-transform: uppercase; letter-spacing: .06em; }
.pcard__job { margin-top: .25em; font-size: 1.2em; font-weight: 800; line-height: 1.15; color: #FFFFFF; }
.pcard__meta { margin-top: .45em; font-size: .82em; color: var(--ink-soft); }
.pcard__reply { display: flex; gap: .3em; margin-top: .8em; }
.pcard__reply span { flex: 1; padding: .3em 0; border-radius: .5em; text-align: center; font-size: .8em; font-weight: 800; border: 1px solid rgba(34, 184, 196, .55); color: #E6FEFF; }
.pcard__reply span:first-child { background: #22B8C4; color: #04121A; border-color: #22B8C4; }
@media (max-width: 959px) {
  html.fx-on .scene .scene__phone { width: clamp(104px, 24cqw, 168px); }
}

/* ------------------------------------------------ Offer: What it covers, one centred row of three */
html.fx-on .o-covers { text-align: center; }
html.fx-on .o-covers__grid { max-width: 1120px; margin-inline: auto; margin-top: 1.4rem; gap: 1rem; border-top: 0; text-align: left; }
html.fx-on .o-covers__grid > div { padding: 1.2rem 1.3rem 1.3rem; border-radius: var(--radius); }
@media (min-width: 760px) {
  html.fx-on .o-covers__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------ Offer: fine print, one open at a time, smooth */
html.fx-on .o-fine details::details-content { block-size: 0; overflow: hidden; transition: block-size 380ms var(--ease), content-visibility 380ms allow-discrete; }
html.fx-on .o-fine details[open]::details-content { block-size: auto; }

/* ------------------------------------------------ prices roll in digit by digit */
.nf { display: inline-flex; align-items: baseline; }
.nf__d { display: inline-block; height: 1em; overflow: hidden; line-height: 1; vertical-align: baseline; }
.nf__s { display: flex; flex-direction: column; transform: translateY(calc(var(--v, 0) * -1em)); transition: transform 1700ms cubic-bezier(.16, 1, .3, 1) var(--delay, 0ms); }
.nf__s > span { height: 1em; line-height: 1; text-align: center; }
.nf__s--now { transition: none; }
.nf__sym { display: inline-block; }

/* ------------------------------------------------ Made for trades: the orbit */
.trades--orbit .trades__list { display: none; }
.orbit { position: relative; width: min(100%, max(300px, min(560px, calc(100svh - 8rem)))); aspect-ratio: 1; margin: clamp(1rem, 3vw, 2rem) auto 0; }
.orbit { --orbit-r: .78; }
.orbit__ring { position: absolute; inset: calc((1 - var(--orbit-r)) * 50%); border-radius: 50%; border: 1px dashed rgba(34, 184, 196, .38); box-shadow: inset 0 0 70px rgba(34, 184, 196, .08), 0 0 50px rgba(34, 184, 196, .06); }
.orbit__ring2 { position: absolute; inset: 18%; border-radius: 50%; border: 1px solid rgba(34, 184, 196, .14); }
.orbit__core {
  position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle, rgba(34, 184, 196, .35), rgba(34, 184, 196, .06) 58%, transparent 70%);
  transition: opacity 300ms ease, scale 300ms var(--ease);
}
.orbit__core::before, .orbit__core::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px solid rgba(34, 184, 196, .55); }
html.fx-motion .orbit__core::before, html.fx-motion .orbit__core::after { animation: fx-pulse 3.2s ease-out infinite; }
html.fx-motion .orbit__core::after { animation-delay: 1.6s; }
@keyframes fx-pulse { 0% { scale: .8; opacity: .9; } 100% { scale: 1.9; opacity: 0; } }
.orbit__logo { width: 48%; height: auto; filter: drop-shadow(0 0 14px rgba(34, 184, 196, .85)); }
.orbit__panel {
  position: absolute; left: 50%; top: 50%; width: min(58%, 300px); translate: -50% -50%; z-index: 3;
  padding: 1rem 1.1rem; border-radius: 18px; text-align: center;
  background: linear-gradient(158deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 40%, rgba(34, 184, 196, .1)), rgba(6, 8, 11, .7);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px rgba(34, 184, 196, .4), 0 0 40px rgba(34, 184, 196, .25), 0 30px 50px -24px rgba(0, 0, 0, .95);
  opacity: 0; scale: .88; pointer-events: none;
  transition: opacity 260ms ease, scale 360ms var(--ease);
}
.orbit--open .orbit__panel { opacity: 1; scale: 1; pointer-events: auto; }
.orbit--open .orbit__core { opacity: 0; scale: .7; }
.orbit__t { font-size: clamp(1.1rem, 2.6vw, 1.6rem); font-weight: 800; font-stretch: 108%; letter-spacing: -.015em; line-height: 1.1; }
.orbit__e { margin-top: .3rem; font-weight: 700; color: #22B8C4; }
.orbit__d { margin-top: .35rem; font-size: .92rem; line-height: 1.4; color: var(--ink); }
.orbit__c { margin-top: .45rem; font-size: .82rem; line-height: 1.4; color: var(--ink-soft); }
.orbit__node {
  position: absolute; left: 0; top: 0; z-index: 2;
  translate: calc(var(--ox, 50%) - 50%) calc(var(--oy, 50%) - 50%); scale: var(--oz, 1);
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .2rem; background: none; border: 0; border-radius: 14px; color: var(--ink); font: inherit; cursor: pointer;
  transition: opacity 260ms ease;
}
.orbit__chip { width: clamp(40px, 9vw, 58px); }
.orbit__name { padding: .05rem .5rem; border-radius: 999px; white-space: nowrap; font-size: clamp(.72rem, 1.5vw, .92rem); font-weight: 700; background: rgba(6, 8, 11, .8); border: 1px solid rgba(34, 184, 196, .4); }
.orbit__node:is(:hover, :focus-visible, [aria-pressed="true"]) .orbit__name { border-color: #22B8C4; }
.orbit--open .orbit__node:not([aria-pressed="true"]) { opacity: .4; }
@media (max-width: 479px) {
  .orbit__c { display: none; }
  .orbit__panel { padding: .7rem .8rem; width: 60%; }
  .orbit__d { font-size: .82rem; }
  .orbit { --orbit-r: .8; }
  .orbit__name { display: none; }
  .orbit__node[aria-pressed="true"] .orbit__name { display: none; }
  .orbit__chip { width: 40px; }
}

@media (min-width: 900px) and (max-height: 640px) {
  .orbit__chip { width: 44px; }
  .orbit__name { font-size: .75rem; }
}
@media print {
  .tube, .orbit { display: none; }
  .trades--orbit .trades__list { display: block; }
  html.fx-on .scene__phone .phone { opacity: 1; transform: none; }
}

/* ------------------------------------------------ Home: parallax top section (founder, 8 Nov night)
   The founder's ute photo, split in two: sky and fence at the back, the toolbox, tools and rack traced out
   as the front layer. The headline sits between them, so it slides behind the tools as you scroll. */
/* 8 Nov (founder): show the whole photo edge to edge at every size; the section height follows the photo. */
.px { --px-img: calc(100vw / 2.3337); --px-h: min(100svh, max(480px, calc(var(--px-img) + 140px))); --focus: 50%; position: relative; height: var(--px-h); overflow: clip; isolation: isolate; background: #06080B; }
.px__visuals { position: absolute; inset: 0; }
.px__layer { will-change: translate; }
[data-px="1"] { --rate: 55; }
[data-px="2"] { --rate: 32; }
[data-px="3"] { --rate: 6; }
.px__photo {
  position: absolute; left: 50%; bottom: 0;
  width: 100%; aspect-ratio: 2000 / 857;
  translate: calc(var(--focus) * -1) calc(var(--px, 0) * var(--rate) * 1%);
}
.px__photo img { display: block; width: 100%; height: 100%; }
/* the sky's top edge melts into obsidian, so no hard line where the photo starts */
.px__photo:not(.px__photo--front) img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%); mask-image: linear-gradient(to bottom, transparent 0, #000 24%); }
.px__photo--front { clip-path: polygon(0.00% 100.00%, 0.00% 61.15%, 10.00% 60.09%, 13.10% 60.91%, 20.60% 62.31%, 23.70% 69.31%, 26.00% 71.65%, 28.10% 70.01%, 32.00% 68.73%, 36.10% 69.31%, 40.30% 69.78%, 41.70% 75.15%, 60.00% 73.51%, 76.30% 71.88%, 76.40% 66.04%, 98.10% 63.24%, 100.00% 63.01%, 100.00% 100.00%); }
.px__glow { position: absolute; left: 71.5%; top: 80.5%; width: 26%; aspect-ratio: 2.4; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(92, 230, 240, .55), rgba(34, 184, 196, .18) 55%, transparent); mix-blend-mode: screen; pointer-events: none; }
html.fx-motion .px__glow { animation: fx-ring 2.6s ease-in-out infinite; }
@keyframes fx-ring { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.px__title-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: calc(var(--bar, 60px) + 9vh) var(--gutter) 0; text-align: center;
  translate: 0 calc(var(--px, 0) * var(--rate) * 1%); }
.px__eyebrow { font-size: clamp(.75rem, 1.1vw, .95rem); font-weight: 800; letter-spacing: .32em; color: #22B8C4; }
.px__title {
  margin-top: .7rem; max-width: 15em;
  font-size: clamp(2.1rem, 5.4vw, 5.6rem); font-weight: 900; font-stretch: 112%; letter-spacing: -.035em; line-height: .98;
  color: #FFFFFF; text-shadow: 0 2px 30px rgba(0, 0, 0, .6);
}
.px__title em { font-style: normal; color: #22B8C4; }
.px__fade { position: absolute; inset: 0; pointer-events: none;
  /* soft radial vignette into obsidian, no hard edges (founder, 8 Nov final polish) */
  background: radial-gradient(ellipse 115% 90% at 50% 45%, transparent 52%, rgba(6, 8, 11, .55) 80%, rgba(6, 8, 11, .92) 100%), linear-gradient(transparent 80%, #06080B); }
.px__cue { position: absolute; left: 50%; bottom: max(1.2rem, 3vh); z-index: 3; translate: -50% 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(34, 184, 196, .5); background: rgba(6, 8, 11, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.px__cue span { width: 10px; height: 10px; border-right: 2px solid #22B8C4; border-bottom: 2px solid #22B8C4; rotate: 45deg; margin-top: -4px; }
html.fx-motion .px__cue span { animation: fx-cue 1.8s ease-in-out infinite; }
@keyframes fx-cue { 0%, 100% { translate: 0 -3px; } 50% { translate: 0 4px; } }
@media (max-width: 599px) { .px { --px-h: calc(var(--px-img) + var(--bar, 60px) + 6svh + 210px); } .px__title-wrap { padding-top: calc(var(--bar, 60px) + 6svh); } }
@media print { .px { display: none; } }

/* Founder's 3D trade icons sit inside the glass chips. */
.node__ic .ic3d, .orbit__chip .ic3d { width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .7)); }
/* Founder 8 Nov: the strip dots sit in front of the tube, like the other step lists. */
html.fx-on .next__list li { z-index: 3; }