@font-face { font-family: "Clarity City"; font-weight: 300; font-display: swap; src: url(../studio/fonts/ClarityCity-Light.ttf); }
@font-face { font-family: "Clarity City"; font-weight: 400; font-display: swap; src: url(../studio/fonts/ClarityCity-Regular.ttf); }
@font-face { font-family: "Clarity City"; font-weight: 500; font-display: swap; src: url(../studio/fonts/ClarityCity-Medium.ttf); }
@font-face { font-family: "Clarity City"; font-weight: 600; font-display: swap; src: url(../studio/fonts/ClarityCity-SemiBold.ttf); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(../studio/fonts/IBMPlexMono-Regular.ttf); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(../studio/fonts/IBMPlexMono-Medium.ttf); }

:root {
  --bg: #030304;
  --panel: rgba(9, 9, 12, 0.74);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --text: #f5f5f7;
  --text-2: rgba(245, 245, 247, 0.62);
  --accent: #f5a524;
  --accent-2: #ffd27a;
  --wrap: 1180px;
  --gutter: max(16px, calc((100vw - var(--wrap)) / 2));
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text); overflow-x: hidden;
  font: 17px/1.55 "Clarity City", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.035em; margin: 0; }
p { margin: 0; }
ol, ul { list-style: none; margin: 0; padding: 0; }
.muted { color: var(--text-2); }
.spark { color: var(--accent); }

/* The film-reel scene behind every page (site.js draws it) */
.reel { position: fixed; inset: 0; width: 100%; height: 100lvh; z-index: 0; pointer-events: none; }
main, .foot { position: relative; z-index: 1; }

/* Navigation */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
}
.nav::before { content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(3, 3, 4, 0.92), rgba(3, 3, 4, 0.6) 55%, transparent); opacity: var(--navfade, 0); transition: opacity 0.3s; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 22px; letter-spacing: -0.03em; text-decoration: none; }
.mark { width: 22px; height: 22px; border-radius: 7px; flex: none;
  background: linear-gradient(var(--accent), var(--accent)) center / 3px 60% no-repeat, #0b0b0e; box-shadow: inset 0 0 0 1.5px var(--accent); }
.pill-nav {
  position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 30px;
  padding: 6px 6px 6px 28px; border-radius: 999px; background: rgba(18, 18, 22, 0.62); border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 15px; font-weight: 500; transition: opacity 0.25s;
}
/* The menu waits for its font (base.html adds .fonts), so the Log in button never shifts when the font swaps in.
   When the font is too slow base.html adds .nofont too, and the menu keeps the system font for the rest of the visit */
.js:not(.fonts) .pill-nav { opacity: 0; }
.nofont .pill-nav { font-family: system-ui, sans-serif; }
.pill-nav a:not(.btn) { white-space: nowrap; text-decoration: none; color: rgba(245, 245, 247, 0.82); transition: color 0.2s; }
.pill-nav a:not(.btn):hover { color: #fff; }

/* Buttons: pills with a round arrow, light or dark. They stay put on hover: only the light and shadow change */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 7px 7px 7px 20px; border-radius: 999px;
  border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: box-shadow 0.25s, background 0.25s;
}
.arrow { width: 30px; height: 30px; border-radius: 50%; flex: none; background: center / 14px no-repeat; }
.btn.light { background: #fff; color: #050505; }
.btn.light:hover { box-shadow: 0 8px 30px rgba(255, 255, 255, 0.18); }
.btn.light .arrow { background-color: #050505;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10l6-6M5 4h5v5'/%3E%3C/svg%3E"); }
.btn.dark { background: rgba(8, 8, 10, 0.86); color: #fff; border-color: var(--line-2); }
.btn.dark:hover { box-shadow: 0 0 0 4px rgba(245, 165, 36, 0.12); border-color: rgba(245, 165, 36, 0.5); }
.btn.dark .arrow {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10l6-6M5 4h5v5'/%3E%3C/svg%3E"); }
.btn.primary { background: #fff; color: #050505; padding: 13px 22px; }

section { padding: 120px var(--gutter); }
.head { text-align: center; margin: 0 auto 56px; max-width: 760px; }
h2 { font-size: clamp(32px, 4.6vw, 58px); line-height: 1.04; }
.head p { margin: 18px auto 0; max-width: 54ch; color: var(--text-2); font-size: 18px; }

/* Scroll reveal (only when JS runs, so the page never hides content without it) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.02em 0.1em; margin: -0.06em -0.02em -0.1em; }
.js [data-split] .w > span { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: 0 100%;
  transition: transform 1.1s var(--ease) calc(var(--d) * 55ms); }
.js [data-split].in .w > span { transform: none; }
.js h1[data-split] .w > span, .js h2[data-split] .w > span {
  background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.68)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Hero */
.hero { padding-top: 160px; padding-bottom: 40px; text-align: center; }
.badge { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: rgba(245, 245, 247, 0.86); margin-bottom: 22px; }
.badge .spark { font-size: 16px; text-shadow: 0 0 12px var(--accent); }
.hero h1 { font-size: clamp(44px, 7.4vw, 92px); line-height: 0.98; letter-spacing: -0.05em; margin-bottom: 24px; }
.lede { max-width: 62ch; margin: 0 auto 34px; color: var(--text-2); font-size: 19px; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero .reveal:nth-child(2) { transition-delay: 0.08s; }
.hero .reveal:nth-child(3) { transition-delay: 0.16s; }
.hero .reveal:nth-child(4) { transition-delay: 0.24s; }
.hero .frame.reveal { transition-delay: 0.5s; }
.hero-copy { transform: translateY(calc(var(--hp, 0) * -60px)); opacity: calc(1 - var(--hp, 0) * 0.7); will-change: transform; }
.tilt { transform: perspective(1800px) rotateX(calc((1 - var(--hp, 0)) * 18deg)) scale(calc(0.93 + var(--hp, 0) * 0.07)); transform-origin: 50% 0; }

/* The studio window in the hero */
.frame {
  max-width: 1080px; margin: 72px auto 0; padding: 10px; border-radius: 28px; text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.14); background: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 50px 140px -30px rgba(245, 165, 36, 0.32), 0 30px 80px rgba(0, 0, 0, 0.6);
}
.app { border-radius: 19px; overflow: hidden; background: rgba(7, 7, 9, 0.9); border: 1px solid var(--line); font-size: 13px; }
.app-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.app-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.app-brand .mark { width: 16px; height: 16px; border-radius: 5px; }
.app-title { color: var(--text-2); }
.tc { margin-left: 8px; font: 500 11px "IBM Plex Mono", monospace; color: var(--accent-2); }
.app-render { justify-self: end; padding: 5px 12px; border-radius: 999px; background: rgba(245, 165, 36, 0.14); color: var(--accent-2); font-weight: 500; font-size: 12px; }
.app-prompt {
  display: flex; align-items: center; gap: 12px; margin: 0 16px 16px; padding: 7px 7px 7px 16px; border-radius: 14px;
  border: 1px solid rgba(245, 165, 36, 0.5); background: rgba(245, 165, 36, 0.05);
  box-shadow: 0 0 0 4px rgba(245, 165, 36, 0.07), 0 0 34px rgba(245, 165, 36, 0.16); font-size: 14px;
}
.typed { flex: 1; min-height: 1.4em; }
.typed.typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -3px;
  background: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.typed.idle { color: var(--text-2); }
.by { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--text-2); border: 1px solid var(--line-2); }
.send { width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--accent) center / 14px no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11V3M3.5 6.5L7 3l3.5 3.5'/%3E%3C/svg%3E"); }
.sent .app-prompt .send, .chat.answered .chat-input .send { animation: press 0.7s var(--ease); }
@keyframes press { 30% { transform: scale(0.88); box-shadow: 0 0 0 7px rgba(245, 165, 36, 0.3); } }
.app-body { display: grid; grid-template-columns: 30% 1fr; gap: 14px; padding: 14px 16px; }
.app-scenes { display: grid; gap: 3px; align-content: start; }
.app-scenes li { position: relative; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 9px; color: var(--text-2);
  transition: background 0.3s, box-shadow 0.3s, color 0.3s; }
.app-scenes li.on::after { content: ""; position: absolute; left: 10px; bottom: 3px; height: 2px; border-radius: 2px; width: calc((100% - 20px) * var(--p, 0));
  background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.app-scenes li.on { color: var(--text); background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(245, 165, 36, 0.5); }
.app-scenes b { font: 500 11px "IBM Plex Mono", monospace; }
.app-scenes li.on b { color: var(--accent); }
.app-scenes em { font-style: normal; font-size: 11px; font-family: "IBM Plex Mono", monospace; }
.app-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 11px; overflow: hidden; background: #0d0d10; }
.view { position: absolute; inset: 0; opacity: 0; transition: opacity 0.55s ease; }
.view.on { opacity: 1; }
.view video, .view svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.v1.on video { animation: push 3.2s ease-out both; }
@keyframes push { from { transform: scale(1.1); } }
.v2 video { transform-origin: 77% 50%; transform: scale(1.75); filter: saturate(1.15) sepia(0.14); }
.v2.on video { animation: closer 3.4s ease-out both; }
@keyframes closer { from { transform: scale(1.5); } }
.blades { transform-origin: 150px 66px; animation: spin 2.2s linear infinite; }
.v4 .spin { transform-origin: 0 0; animation: spin 2.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.flow { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 9; animation: flow 0.8s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -12; } }
.gen { fill: var(--accent); filter: drop-shadow(0 0 4px var(--accent)); animation: hum 0.9s ease-in-out infinite alternate; }
@keyframes hum { to { opacity: 0.55; } }
.callout { opacity: 0; transform: translateY(3px); transition: opacity 0.5s ease, transform 0.5s var(--ease); }
.callout path { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.8; }
.callout text { fill: #f5f5f7; font: 500 7.5px "Clarity City", sans-serif; }
.v3.on .callout { opacity: 1; transform: none; }
.v3.on .c1 { transition-delay: 0.3s; }
.v3.on .c2 { transition-delay: 0.8s; }
.v3.on .c3 { transition-delay: 1.3s; }
.cable { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 3px var(--accent)); transition: stroke-dashoffset 0s 0.6s; }
.view.on .cable { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s var(--ease) 0.2s; }
.pulse { fill: var(--accent-2); filter: drop-shadow(0 0 4px var(--accent)); opacity: 0; transition: opacity 0.3s; }
.v4.on .pulse { opacity: 1; transition-delay: 1.4s; }
.lamp { fill: #3a3122; transition: fill 0.3s; }
.v4.on .lamp { fill: var(--accent-2); transition-delay: 1.5s; }
.win { fill: #2a2430; transition: fill 0.3s, filter 0.3s; }
.v5.on .win { fill: var(--accent-2); filter: drop-shadow(0 0 5px rgba(245, 165, 36, 0.85)); }
.v5.on .w1 { transition-delay: 0.9s; }
.v5.on .w2 { transition-delay: 1.2s; }
.v5.on .w3 { transition-delay: 1.5s; }
.v5.on .w4 { transition-delay: 1.8s; }
.view.title { display: grid; place-content: center; justify-items: center; background: radial-gradient(circle at 50% 50%, #22180b, #070708 72%); }
.title-card { font-size: clamp(20px, 3.4vw, 46px); font-weight: 600; letter-spacing: -0.045em; }
.title-card span { display: inline-block; opacity: 0; transform: translateY(40%); transition: opacity 0.5s ease, transform 0.6s var(--ease); }
.title.on .title-card span { opacity: 1; transform: none; }
.title.on .title-card span:nth-child(2) { transition-delay: 0.15s; }
.title.on .title-card span:nth-child(3) { transition-delay: 0.3s; }
.sweep { display: block; width: 0; height: 3px; margin-top: 10px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 10px var(--accent); transition: width 0.8s var(--ease) 0.5s; }
.title.on .sweep { width: 70%; }
.chip.swap { animation: chip-in 0.45s var(--ease); }
@keyframes chip-in { from { opacity: 0; transform: translateY(-5px); } }
.caption.swap { animation: cap-in 0.5s var(--ease); }
@keyframes cap-in { from { opacity: 0; transform: translate(-50%, 6px); } }
.caption:empty { display: none; }
.wd { color: rgba(255, 255, 255, 0.5); transition: color 0.15s; }
.wd.said { color: #fff; }
.wd.now { color: var(--accent-2); }
.chip { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 500;
  background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.caption { position: absolute; z-index: 1; left: 50%; bottom: 7%; transform: translateX(-50%); padding: 5px 12px; border-radius: 6px; white-space: nowrap;
  background: rgba(0, 0, 0, 0.5); font-size: clamp(10px, 1.15vw, 15px); }
.outro, .outro-frame { display: grid; place-content: center; justify-items: center; gap: 4px;
  background: radial-gradient(circle at 50% 45%, #21180a, #050506 72%); }
.outro .mark, .outro-frame .mark { width: clamp(30px, 9%, 64px); height: auto; aspect-ratio: 1; border-radius: 28%; background-size: 9% 58%;
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 50px rgba(245, 165, 36, 0.45); }
.outro strong, .outro-frame strong { font-size: clamp(16px, 2.6vw, 32px); font-weight: 600; letter-spacing: -0.04em; margin-top: 8px; }
.outro .url, .outro-frame .url { font: 500 clamp(9px, 1vw, 13px) "IBM Plex Mono", monospace; letter-spacing: 0.14em; color: var(--accent-2); }
.outro.on > * { animation: rise 0.9s var(--ease) both; }
.outro.on strong { animation-delay: 0.12s; }
.outro.on .url { animation-delay: 0.24s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
.app-scenes li.added b { color: var(--accent); }
.app-tracks { position: relative; display: grid; gap: 6px; padding: 2px 16px 16px; }
.track { display: flex; gap: 4px; height: 34px; }
.shot { border-radius: 6px; border: 1px solid var(--line); background: #15151a; filter: brightness(0.62) saturate(0.85);
  transition: filter 0.3s, border-color 0.3s, box-shadow 0.3s; }
.shot.on { filter: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 16px rgba(245, 165, 36, 0.45); }
.shot.s1 { background: url(media/turbine.jpg) 60% 40% / cover; }
.shot.s2 { background: url(media/turbine.jpg) 79% 50% / 300% auto; }
.shot.s3 { background: radial-gradient(circle at 47% 38%, var(--accent) 0 9%, transparent 10%),
  linear-gradient(90deg, transparent 47%, #c9d3dc 47% 51%, transparent 51%) 0 100% / 100% 58% no-repeat,
  linear-gradient(rgba(140, 180, 255, 0.16) 1px, transparent 1px) 0 0 / 7px 7px, linear-gradient(90deg, rgba(140, 180, 255, 0.16) 1px, transparent 1px) 0 0 / 7px 7px, #0a1220; }
.shot.s4 { background: linear-gradient(var(--accent), var(--accent)) 0 80% / 100% 2px no-repeat, linear-gradient(#0a1424, #0a1424) 88% 51% / 22% 22% no-repeat,
  linear-gradient(180deg, #101c30 0, #2a3d5a 51%, #0e2b47 51%, #040a14); }
.shot.s5 { background: linear-gradient(var(--accent-2), var(--accent-2)) 40% 66% / 10% 18% no-repeat, linear-gradient(var(--accent-2), var(--accent-2)) 60% 66% / 10% 18% no-repeat,
  linear-gradient(#1f1a22, #1f1a22) 50% 88% / 36% 62% no-repeat, linear-gradient(180deg, #0c0a14, #2a1c1a); }
.shot.s6, .shot.saas-s5, .shot.car-s4, .shot.salon-s4, .shot.law-s4, .shot.elec-s4, .shot.wood-s4 { background: linear-gradient(#f5f5f7, #f5f5f7) 50% 42% / 54% 13% no-repeat, linear-gradient(var(--accent), var(--accent)) 50% 66% / 38% 5% no-repeat,
  radial-gradient(circle at 50% 50%, #22180b, #070708 72%); }
.shot.s7 { background: radial-gradient(circle at 50% 50%, var(--accent) 0 14%, transparent 15%), #0b0b0e; }
.track.voice { position: relative; height: 30px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(245, 165, 36, 0.16) var(--played, 0px), rgba(255, 255, 255, 0.02) var(--played, 0px)); }
.track.voice svg { width: 100%; height: 100%; fill: rgba(245, 165, 36, 0.7); }
.track-label { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); padding: 2px 8px; border-radius: 5px; font-size: 11px;
  background: rgba(7, 7, 9, 0.9); color: var(--text-2); z-index: 1; }
.playhead { position: absolute; top: -2px; bottom: 12px; left: -1px; width: 2px; border-radius: 2px; background: #fff; z-index: 2;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8); transform: translateX(16px); }
.playhead::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }

/* The demo plays once: the idea is typed, then the scenes, shots and voice appear */
.js [data-demo] .app-scenes li, .js [data-demo] .shot { opacity: 0; transform: translateY(6px);
  transition: opacity 0.5s ease calc(var(--i) * 110ms), transform 0.5s var(--ease) calc(var(--i) * 110ms); }
.js [data-demo]:not(.go) .app-stage > *, .js [data-demo]:not(.go) .playhead { opacity: 0; }
.js [data-demo] .track.voice svg { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--ease) 0.8s; }
.js [data-demo].go .app-scenes li, .js [data-demo].go .shot { opacity: 1; transform: none; }
.js [data-demo].go .track.voice svg { clip-path: inset(0 0 0 0); }
.js [data-demo] .app-scenes li.added { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; transform: translateX(-10px); overflow: hidden;
  transition: opacity 0.6s ease 0.2s, transform 0.6s var(--ease) 0.2s, max-height 0.5s var(--ease), padding 0.5s var(--ease), background 0.4s, box-shadow 0.4s, color 0.4s; }
.js [data-demo].edited .app-scenes li.added { opacity: 1; max-height: 40px; padding-top: 9px; padding-bottom: 9px; transform: none; }
.shot.added { flex: var(--grow) 1 0%; }
.js [data-demo] .shot.added { flex-grow: 0; opacity: 0; transition: flex-grow 0.9s var(--ease) 0.25s, opacity 0.5s ease 0.25s; }
.js [data-demo].edited .shot.added { flex-grow: var(--grow); opacity: 1; }
.js [data-demo].edited .app-scenes li.added.on { color: var(--text); background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(245, 165, 36, 0.5); }

/* One film per industry: the tabs pick one, the studio shows only its scenes, views and shots */
.films { position: relative; display: none; gap: 4px; width: max-content; max-width: 100%; margin: 60px auto 0; padding: 5px; border-radius: 999px;
  background: rgba(18, 18, 22, 0.62); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.js .films { display: flex; }
.js .films + .tilt .frame { margin-top: 20px; }
.hero .films.reveal { transition-delay: 0.4s; }
.films button { font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; padding: 8px 16px; border: 0; border-radius: 999px;
  background: none; color: rgba(245, 245, 247, 0.72); cursor: pointer; transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.films button:hover { color: #fff; }
.films button[aria-pressed="true"] { background: #fff; color: #050505; box-shadow: 0 6px 24px rgba(255, 255, 255, 0.14); }
.films button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.films .sound { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-2); }
.films .sound[aria-pressed="true"] { background: var(--accent); color: #111; box-shadow: 0 0 18px rgba(245, 165, 36, 0.45); }
.sound svg, .sound-hint svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound svg .spk, .sound-hint svg .spk { fill: currentColor; }
.sound .waves, [aria-pressed="true"] .mute { display: none; }
.sound[aria-pressed="true"] .waves { display: inline; }
.sound-hint { position: absolute; z-index: 2; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: #111; background: var(--accent); box-shadow: 0 0 0 0 rgba(245, 165, 36, 0.6); cursor: pointer;
  animation: hint-pulse 2.2s ease-in-out infinite; transition: opacity 0.3s; }
.sound-hint .waves { display: none; }
@keyframes hint-pulse { 50% { box-shadow: 0 0 0 7px rgba(245, 165, 36, 0); } }
.sound-on .sound-hint { opacity: 0; pointer-events: none; }
.app [hidden] { display: none; }
.views { position: absolute; inset: 0; }
.js [data-demo] .app-stage > * { transition: opacity 0.4s ease; }
.app-stage text { font-family: "Clarity City", system-ui, sans-serif; fill: #f5f5f7; }
.app-stage .kicker { font: 500 5.4px "IBM Plex Mono", monospace; letter-spacing: 0.16em; fill: var(--accent-2); }

/* A view that slides in over the one before it */
.view.slide { transform: translateX(100%); transition: opacity 0.55s ease, transform 0s 0.6s; }
.view.slide.on { transform: none; transition: transform 0.8s cubic-bezier(0.65, 0, 0.25, 1); }

/* Car dealer: the car rolls out, shrinks into a spec slide, then the checklist, title and logo */
.car-2 { background: #08090c; }
.car-2 .backdrop, .car-2 .card { position: absolute; background: url(media/car-end.jpg) 50% 50% / cover; }
.car-2 .backdrop { inset: 0; transform: scale(1.15); filter: blur(14px) brightness(0.3) saturate(1.1); }
.car-2 .card { left: 4.375%; top: 21.1%; width: 57.5%; height: 57.5%; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform: translate(29.35%, 0.24%) scale(1.739); transition: transform 0s 0.6s, border-radius 0s 0.6s; }
.car-2.on .card { transform: none; border-radius: 10px; transition: transform 1.1s cubic-bezier(0.65, 0, 0.25, 1) 0.3s, border-radius 1.1s ease 0.3s; }
.car-2 svg { position: relative; }
.car-2 .model { font-size: 9px; font-weight: 600; letter-spacing: -0.02em; }
.car-2 .price { font-size: 19px; font-weight: 600; letter-spacing: -0.04em; }
.car-2 .rule { stroke: rgba(255, 255, 255, 0.18); stroke-width: 0.6; }
.car-2 .row text { font-size: 6px; fill: rgba(245, 245, 247, 0.6); }
.car-2 .row .val { fill: #f5f5f7; font-weight: 500; text-anchor: end; }
.car-2 svg > * { opacity: 0; transform: translateX(10px); transition: opacity 0.3s, transform 0.3s; }
.car-2.on svg > * { opacity: 1; transform: none; transition: opacity 0.6s ease 0.9s, transform 0.7s var(--ease) 0.9s; }
.car-2.on .model { transition-delay: 1s; }
.car-2.on .price { transition-delay: 1.1s; }
.car-2.on .rule { transition-delay: 1.2s; }
.car-2.on .row { transition-delay: calc(1.2s + var(--r) * 0.12s); }
.car-3 .check { opacity: 0; transform: translateX(-8px); transition: opacity 0.3s, transform 0.3s; }
.car-3.on .check { opacity: 1; transform: none; transition: opacity 0.5s ease calc(var(--r) * 0.35s), transform 0.6s var(--ease) calc(var(--r) * 0.35s); }
.car-3 .check circle { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.25); stroke-width: 0.8; transition: fill 0.3s, stroke 0.3s; }
.car-3.on .check circle { fill: var(--accent); stroke: var(--accent); transition-delay: calc(var(--r) * 0.35s + 0.3s); }
.car-3 .check path { fill: none; stroke: #111; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 0s 0.6s; }
.car-3.on .check path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.35s ease calc(var(--r) * 0.35s + 0.4s); }
.car-3 .check text { font-size: 8.5px; font-weight: 500; }
.car-3 .ring-track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 5; }
.car-3 .ring { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 4px rgba(245, 165, 36, 0.6)); transition: stroke-dashoffset 0s 0.6s; }
.car-3.on .ring { stroke-dashoffset: 0.28; transition: stroke-dashoffset 1.6s var(--ease) 0.4s; }
.car-3 .ring-text { opacity: 0; transition: opacity 0.3s; }
.car-3.on .ring-text { opacity: 1; transition: opacity 0.6s ease 0.8s; }
.car-3 .ring-text text { text-anchor: middle; }
.car-3 .ring-label { font: 500 5px "IBM Plex Mono", monospace; letter-spacing: 0.14em; fill: rgba(245, 245, 247, 0.6); }
.car-3 .ring-value { font-size: 19px; font-weight: 600; letter-spacing: -0.04em; }
.car-5 { background: radial-gradient(circle at 50% 45%, #2a1a0e, #050506 72%); }
.car-5 .logo { width: clamp(34px, 4.4vw, 58px); height: auto; filter: drop-shadow(0 0 18px rgba(217, 139, 79, 0.5)); }
.car-5 strong em { font-style: normal; font-weight: 300; color: rgba(245, 245, 247, 0.62); }
.car-5 .url { color: #f0b07a; }
.car-5::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.car-5.on::after { animation: to-black 1s ease 2.4s forwards; }
@keyframes to-black { to { opacity: 1; } }

/* Hair salon: the welcome at the door, then the cuts, the team, the title and the map */
.salon-2 .look { opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s; }
.salon-2.on .look { opacity: 1; transform: none;
  transition: opacity 0.6s ease calc(0.35s + var(--r) * 0.16s), transform 0.7s var(--ease) calc(0.35s + var(--r) * 0.16s); }
.salon-2 .look-card { fill: rgba(255, 255, 255, 0.045); stroke: rgba(255, 255, 255, 0.12); stroke-width: 0.7; }
.salon-2.on .look-card { animation: pick 1.1s ease calc(1.2s + var(--r) * 0.55s) both; }
@keyframes pick { 35% { stroke: var(--accent); stroke-width: 1.2; fill: rgba(245, 165, 36, 0.08); } }
.salon-2 .look-name { font-size: 7.5px; font-weight: 600; }
.salon-2 .look-price { font-size: 5.6px; fill: rgba(245, 245, 247, 0.6); }
.salon-3 .member { opacity: 0; transform: scale(0.85); transition: opacity 0.3s, transform 0.3s; }
.salon-3.on .member { opacity: 1; transform: none; transition: opacity 0.5s ease calc(var(--r) * 0.3s), transform 0.7s var(--ease) calc(var(--r) * 0.3s); }
.salon-3 .halo { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0s 0.6s; }
.salon-3.on .halo { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease) calc(0.3s + var(--r) * 0.3s); }
.salon-3 .who { font-size: 8.5px; font-weight: 600; }
.salon-3 .what { font-size: 5.8px; fill: rgba(245, 245, 247, 0.6); }
.salon-4 { background: radial-gradient(circle at 50% 50%, #2a141b, #070708 72%); }
.salon-5 .city { transform-origin: 196px 70px; transition: transform 0s 0.6s; }
.salon-5.on .city { transform: translate(-36px, 14px) scale(4.6); transition: transform 2.3s cubic-bezier(0.6, 0, 0.2, 1) 0.4s; }
.salon-5 .roads path { fill: none; stroke: #2a3241; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.salon-5 .street { fill: none; stroke: #364053; stroke-width: 1; }
.salon-5 .blocks { fill: #151a23; opacity: 0; transition: opacity 0.3s; }
.salon-5.on .blocks { opacity: 1; transition: opacity 1s ease 1.5s; }
.salon-5 .place text { font-size: 5.5px; fill: rgba(245, 245, 247, 0.45); text-anchor: middle; }
.salon-5 .place, .salon-5 .city-name { transition: opacity 0.4s; }
.salon-5.on .place, .salon-5.on .city-name { opacity: 0; transition: opacity 0.5s ease 0.7s; }
.salon-5 .street-name text { font: 500 4.6px "IBM Plex Mono", monospace; letter-spacing: 0.2em; fill: #8a94a6; }
.salon-5 .street-name, .salon-5 .address { opacity: 0; transition: opacity 0.3s; }
.salon-5.on .street-name { opacity: 1; transition: opacity 0.6s ease 2.4s; }
.salon-5 .pin { opacity: 0; transform: translateY(-14px); transition: opacity 0.2s, transform 0.2s; }
.salon-5.on .pin { opacity: 1; transform: none; transition: opacity 0.3s ease 2.5s, transform 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 2.5s; }
.salon-5 .pin path { fill: var(--accent); filter: drop-shadow(0 0 5px rgba(245, 165, 36, 0.7)); }
.salon-5 .ping { fill: none; stroke: var(--accent); stroke-width: 0.8; transform-origin: 160px 84px; opacity: 0; }
.salon-5.on .ping { animation: ping 1.6s ease-out 3s infinite; }
@keyframes ping { from { transform: scale(0.4); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.salon-5 .address { transform: translateX(-6px); }
.salon-5.on .address { opacity: 1; transform: none; transition: opacity 0.5s ease 2.9s, transform 0.6s var(--ease) 2.9s; }
.salon-5 .address rect { fill: rgba(10, 10, 14, 0.88); stroke: rgba(255, 255, 255, 0.16); stroke-width: 0.6; }
.salon-5 .a1 { font-size: 7.5px; font-weight: 600; }
.salon-5 .a2 { font-size: 6px; }
.salon-5 .a3 { font-size: 5.4px; fill: rgba(245, 245, 247, 0.6); }

/* Their shots on the timeline */
.shot.car-s1 { background: url(media/car.jpg) 50% 50% / cover; }
.shot.car-s2 { background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)) 90% 36% / 24% 10% no-repeat,
  linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.28)) 90% 64% / 24% 7% no-repeat, url(media/car-end.jpg) 8% 50% / 58% auto no-repeat, #0c0d11; }
.shot.car-s3 { background: radial-gradient(circle at 74% 50%, transparent 0 7px, var(--accent) 7.5px 10px, transparent 10.5px),
  linear-gradient(#f5f5f7, #f5f5f7) 16% 28% / 28% 8% no-repeat, linear-gradient(#f5f5f7, #f5f5f7) 16% 50% / 24% 8% no-repeat,
  linear-gradient(#f5f5f7, #f5f5f7) 16% 72% / 26% 8% no-repeat, #0b0c10; }
.shot.car-s5 { background: linear-gradient(#d98b4f, #d98b4f) 50% 50% / 12px 12px no-repeat, radial-gradient(circle at 50% 50%, #2a1a0e, #050506 72%); }
.shot.salon-s1 { background: url(media/salon.jpg) 50% 45% / cover; }
.shot.salon-s2 { background: linear-gradient(#3b2429, #3b2429) 12% 50% / 18% 66% no-repeat, linear-gradient(#3b2429, #3b2429) 37% 50% / 18% 66% no-repeat,
  linear-gradient(#3b2429, #3b2429) 63% 50% / 18% 66% no-repeat, linear-gradient(#3b2429, #3b2429) 88% 50% / 18% 66% no-repeat, #160d10; }
.shot.salon-s3 { background: radial-gradient(circle at 25% 50%, #d9ae95 0 5px, transparent 5.5px), radial-gradient(circle at 50% 50%, #d9ae95 0 5px, transparent 5.5px),
  radial-gradient(circle at 75% 50%, #d9ae95 0 5px, transparent 5.5px), #160d10; }
.shot.salon-s5 { background: radial-gradient(circle at 50% 45%, var(--accent) 0 3.5px, transparent 4px), linear-gradient(#364053, #364053) 0 50% / 100% 2px no-repeat,
  linear-gradient(#1b212b 1px, transparent 1px) 0 0 / 6px 6px, linear-gradient(90deg, #1b212b 1px, transparent 1px) 0 0 / 6px 6px, #0d1016; }

/* Before the film exists the studio is already at work: skeleton scenes and empty shot slots
   while the idea is typed, then the build steps tick, the scenes write themselves in and the
   shots and voice appear (.building), then the film plays (.go) */
.js [data-demo]:not(.go) .app-scenes li:not(.added) { opacity: 1; transform: none; }
.js [data-demo]:not(.go):not(.building) .app-scenes li:not(.added) > * { color: transparent; background: rgba(255, 255, 255, 0.055); border-radius: 5px; }
.js [data-demo] .app-scenes li:not(.added) > * { transition: color 0.35s ease calc(var(--i) * 170ms), background 0.35s ease calc(var(--i) * 170ms); }
.js [data-demo]:not(.go) .shot:not(.added) { opacity: 1; transform: none; }
.shot { position: relative; }
.js [data-demo] .shot:not(.added)::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px dashed rgba(255, 255, 255, 0.14);
  background: #0f0f12; opacity: 0; transition: opacity 0.4s ease calc(0.6s + var(--i) * 120ms); pointer-events: none; }
.js [data-demo]:not(.go):not(.building) .shot:not(.added)::after { opacity: 1; transition-delay: 0s; }
.js [data-demo]:not(.go) .shot.on { border-color: var(--line); box-shadow: none; }
.js [data-demo].building .track.voice svg { clip-path: inset(0 0 0 0); transition-delay: 1.3s; }
.build { display: grid; place-content: center; justify-items: start; gap: 12px; z-index: 1;
  background: linear-gradient(rgba(140, 180, 255, 0.05) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(140, 180, 255, 0.05) 1px, transparent 1px) 0 0 / 22px 22px, #0b0b0e; }
.js .build { position: absolute; inset: 0; }
.js [data-demo]:not(.go) .app-stage > .build { opacity: 1; }
.js [data-demo].go .app-stage > .build { opacity: 0; pointer-events: none; }
.build-kicker { font: 500 clamp(9px, 0.9vw, 11px) "IBM Plex Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); }
.build-steps { display: grid; gap: clamp(6px, 0.8vw, 10px); min-width: min(360px, 70%); }
.build-steps li { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; font-size: clamp(11px, 1.15vw, 14px); color: var(--text-2); transition: color 0.3s; }
.build-steps em { font: normal 500 clamp(9px, 0.85vw, 11px) "IBM Plex Mono", monospace; color: rgba(245, 245, 247, 0.38); }
.build-steps i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2); }
.build-steps li.run { color: var(--text); }
.build-steps li.run i { box-shadow: inset 0 0 0 2px rgba(245, 165, 36, 0.25); border: 2px solid transparent; border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
.build-steps li.done { color: var(--text); }
.build-steps li.done i { box-shadow: none; background: rgba(76, 195, 138, 0.16) center / 9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%234cc38a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5.2l2 2 4-4.4'/%3E%3C/svg%3E"); }
.build-steps li.done em { color: rgba(245, 245, 247, 0.6); }

/* Models */
.models { padding-top: 70px; padding-bottom: 70px; text-align: center; }
.models p { color: var(--text-2); font-size: 15px; margin-bottom: 30px; }
.wordmarks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 64px; color: rgba(245, 245, 247, 0.6); font-size: 27px; }
.wordmarks li { transition: color 0.3s; }
.wordmarks li:hover { color: #fff; }
.wordmarks li:nth-child(1) { font-weight: 600; letter-spacing: -0.04em; }
.wordmarks li:nth-child(2) { font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; font-size: 23px; }
.wordmarks li:nth-child(3) { font-weight: 300; font-size: 29px; letter-spacing: -0.02em; }
.wordmarks li:nth-child(4) { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 21px; }
.wordmarks li:nth-child(5) { font-weight: 500; letter-spacing: -0.03em; }

/* Law firm: welcome, practice areas, three steps, title, logo with phone */
.law-2 .area { opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s; }
.law-2.on .area { opacity: 1; transform: none; transition: opacity 0.6s ease calc(0.2s + var(--r) * 0.15s), transform 0.7s var(--ease) calc(0.2s + var(--r) * 0.15s); }
.law-2 .area-card { fill: rgba(255, 255, 255, 0.04); stroke: rgba(212, 177, 112, 0.25); stroke-width: 0.7; }
.law-2.on .area-card { animation: law-pick 1.1s ease calc(1.1s + var(--r) * 0.5s) both; }
@keyframes law-pick { 35% { stroke: #d4b170; stroke-width: 1.2; fill: rgba(212, 177, 112, 0.1); } }
.law-2 .area-icon { fill: none; stroke: #d4b170; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0s 0.6s; }
.law-2.on .area-icon { stroke-dashoffset: 0; transition: stroke-dashoffset 1s ease calc(0.5s + var(--r) * 0.15s); }
.law-2 text, .law-3 .step-t { font-size: 7.4px; font-weight: 600; }
.law-2 .kicker, .law-3 .kicker { fill: #d4b170; }
.law-3 .step-line { fill: none; stroke: rgba(212, 177, 112, 0.5); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0s 0.6s; }
.law-3.on .step-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease) 0.3s; }
.law-3 .step { opacity: 0; transform: scale(0.7); transition: opacity 0.3s, transform 0.3s; }
.law-3.on .step { opacity: 1; transform: none; transition: opacity 0.4s ease calc(var(--r) * 0.45s), transform 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--r) * 0.45s); }
.law-3 .step circle { fill: #0c1424; stroke: #d4b170; stroke-width: 1.2; }
.law-3 .step-n { font-size: 13px; font-weight: 600; fill: #d4b170; }
.law-3 .step-s { font-size: 5.6px; fill: rgba(245, 245, 247, 0.6); }
.law-4 { background: radial-gradient(circle at 50% 50%, #17233a, #06080d 72%); }
.law-4 .sweep { background: #d4b170; box-shadow: 0 0 10px rgba(212, 177, 112, 0.7); }
.law-5 { background: radial-gradient(circle at 50% 45%, #15213a, #05070c 72%); }
.law-5 .logo { width: clamp(34px, 4.4vw, 58px); height: auto; filter: drop-shadow(0 0 18px rgba(212, 177, 112, 0.35)); }
.law-5 strong { font-weight: 500; letter-spacing: -0.01em; }
.law-5 .tag { font: 500 clamp(8px, 0.9vw, 12px) "IBM Plex Mono", monospace; letter-spacing: 0.3em; color: #d4b170; }
.law-5 .url { color: rgba(245, 245, 247, 0.75); letter-spacing: 0.06em; margin-top: 6px; }
.law-5.on .tag { animation-delay: 0.2s; }

/* Personal trainer: three shots from one clip, the workout plan, then get in shape */
.fit-4 .plan-card { fill: rgba(255, 255, 255, 0.035); stroke: rgba(215, 255, 60, 0.22); stroke-width: 0.7; }
.fit-4 .fit-kicker, .fit-4 .ring-label { fill: #d7ff3c; }
.fit-4 .move { opacity: 0; transition: opacity 0.3s; }
.fit-4.on .move { opacity: 1; transition: opacity 0.5s ease calc(0.2s + var(--r) * 0.3s); }
.fit-4 .tick-box { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.3); stroke-width: 0.6; transition: fill 0.3s, stroke 0.3s; }
.fit-4.on .tick-box { fill: #d7ff3c; stroke: #d7ff3c; transition-delay: calc(0.6s + var(--r) * 0.3s); }
.fit-4 .tick { fill: none; stroke: #0a0c0b; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0s 0.6s; }
.fit-4.on .tick { stroke-dashoffset: 0; transition: stroke-dashoffset 0.3s ease calc(0.7s + var(--r) * 0.3s); }
.fit-4 .move-name { font-size: 8px; font-weight: 500; }
.fit-4 .move-dose { font: 500 7px "IBM Plex Mono", monospace; fill: rgba(245, 245, 247, 0.65); }
.fit-4 .ring-track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 5; }
.fit-4 .ring { fill: none; stroke: #d7ff3c; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 4px rgba(215, 255, 60, 0.55)); transition: stroke-dashoffset 0s 0.6s; }
.fit-4.on .ring { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s var(--ease) 0.5s; }
.fit-4 .ring-value { font-size: 22px; font-weight: 600; letter-spacing: -0.04em; }
.fit-4 .ring-label { font: 500 5.4px "IBM Plex Mono", monospace; letter-spacing: 0.2em; }
.fit-5 .cta-title { font-size: 30px; font-weight: 600; letter-spacing: -0.05em; opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s; }
.fit-5.on .cta-title { opacity: 1; transform: none; transition: opacity 0.6s ease 0.2s, transform 0.8s var(--ease) 0.2s; }
.fit-5 .cta-sweep { fill: none; stroke: #d7ff3c; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 4px rgba(215, 255, 60, 0.7)); transition: stroke-dashoffset 0s 0.6s; }
.fit-5.on .cta-sweep { stroke-dashoffset: 0; transition: stroke-dashoffset 0.8s var(--ease) 0.6s; }
.fit-5 .cta-card, .fit-5 .cta-btn { opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s; }
.fit-5.on .cta-card { opacity: 1; transform: none; transition: opacity 0.5s ease 1s, transform 0.6s var(--ease) 1s; }
.fit-5.on .cta-btn { opacity: 1; transform: none; transition: opacity 0.5s ease 1.4s, transform 0.6s var(--ease) 1.4s; }
.fit-5 .cta-card rect { fill: rgba(10, 12, 11, 0.85); stroke: rgba(255, 255, 255, 0.16); stroke-width: 0.6; }
.fit-5 .cta-pin { fill: #d7ff3c; }
.fit-5 .cta-name { font-size: 8.5px; font-weight: 600; }
.fit-5 .cta-addr { font-size: 6.4px; fill: rgba(245, 245, 247, 0.7); }
.fit-5 .cta-btn rect { fill: #d7ff3c; }
.fit-5.on .cta-btn rect { animation: cta-pulse 1.4s ease-in-out 2s infinite; }
@keyframes cta-pulse { 50% { filter: drop-shadow(0 0 7px rgba(215, 255, 60, 0.85)); } }
.fit-5 .cta-btn text { font-size: 7.4px; font-weight: 600; fill: #0a0c0b; }

/* Electrician: the crew, a circuit of services, badges, title, lights on */
.elec-2 .wire { fill: none; stroke: #2a2f3a; stroke-width: 1.4; stroke-linejoin: round; }
.elec-2 .current { fill: #ffd23f; filter: drop-shadow(0 0 4px #ffd23f); opacity: 0; transition: opacity 0.3s; }
.elec-2.on .current { opacity: 1; transition-delay: 0.4s; }
.elec-2 .node circle { fill: #11141b; stroke: #2a2f3a; stroke-width: 1; transition: stroke 0.3s, fill 0.3s, filter 0.3s; }
.elec-2.on .node circle { stroke: #ffd23f; fill: #1c1a10; filter: drop-shadow(0 0 5px rgba(255, 210, 63, 0.6)); transition-delay: calc(0.3s + var(--r) * 0.5s); }
.elec-2 .node-icon { fill: none; stroke: rgba(245, 245, 247, 0.5); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s; }
.elec-2.on .node-icon { stroke: #ffd23f; transition-delay: calc(0.3s + var(--r) * 0.5s); }
.elec-2 .node text { font-size: 6.6px; font-weight: 600; fill: rgba(245, 245, 247, 0.55); transition: fill 0.3s; }
.elec-2.on .node text { fill: #f5f5f7; transition-delay: calc(0.3s + var(--r) * 0.5s); }
.elec-3 .el-kicker { fill: #ffd23f; }
.elec-3 .badge { opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s; }
.elec-3.on .badge { opacity: 1; transform: none; transition: opacity 0.5s ease calc(var(--r) * 0.3s), transform 0.7s var(--ease) calc(var(--r) * 0.3s); }
.elec-3 .badge rect { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.1); stroke-width: 0.6; }
.elec-3 .badge-top { stroke: #ffd23f; stroke-width: 1.4; stroke-linecap: round; }
.elec-3 .badge-icon { fill: none; stroke: #ffd23f; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.elec-3 .badge-t { font-size: 7.4px; font-weight: 600; }
.elec-3 .badge-s { font-size: 5.6px; fill: rgba(245, 245, 247, 0.6); }
.elec-4 { background: radial-gradient(circle at 50% 50%, #2a2410, #070708 72%); }
.elec-4 .sweep { background: #ffd23f; box-shadow: 0 0 10px rgba(255, 210, 63, 0.8); }
.elec-5 .lit { opacity: 0; transition: opacity 0.2s; }
.elec-5.on .lit { opacity: 1; transition: opacity 0.6s ease 0.75s; }
.elec-5 .switch rect:first-child { fill: #e9e6df; }
.elec-5 .lever { fill: #cfcbc2; stroke: #b9b4aa; stroke-width: 0.6; transform-origin: 160px 80px; }
.elec-5.on .lever { animation: flick 0.25s ease 0.55s both; }
@keyframes flick { to { transform: scaleY(-1); fill: #f4f2ec; } }
.elec-5 .switch { transition: opacity 0.3s, transform 0.3s; }
.elec-5.on .switch { opacity: 0; transform: translateY(-10px) scale(0.9); transform-origin: 160px 80px; transition: opacity 0.5s ease 1.1s, transform 0.6s var(--ease) 1.1s; }
.elec-5 .brand { opacity: 0; transition: opacity 0.2s; }
.elec-5.on .brand { opacity: 1; transition: opacity 0.6s ease 1.4s; }
.elec-5 .bolt { fill: #ffd23f; filter: drop-shadow(0 0 8px rgba(255, 210, 63, 0.9)); }
.elec-5 .brand-name { font-size: 15px; font-weight: 600; letter-spacing: -0.03em; }
.elec-5 .brand-call { font: 500 6.4px "IBM Plex Mono", monospace; letter-spacing: 0.16em; fill: #ffd23f; }
.elec-5 .brand-url { font: 500 5.8px "IBM Plex Mono", monospace; letter-spacing: 0.1em; fill: rgba(245, 245, 247, 0.6); }

/* Carpenter: the workshop, drawings that draw themselves, the tape, title, logo burned in */
.wood-2 .wd-kicker { fill: #8a5a2b; }
.wood-2 .draw { opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s; }
.wood-2.on .draw { opacity: 1; transform: none; transition: opacity 0.5s ease calc(0.5s + var(--r) * 0.15s), transform 0.6s var(--ease) calc(0.5s + var(--r) * 0.15s); }
.wood-2 .draw-card { fill: #f8f1e4; stroke: rgba(91, 70, 54, 0.25); stroke-width: 0.6; }
.wood-2 .draw-line { fill: none; stroke: #5b4636; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0s 0.6s; }
.wood-2.on .draw-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s ease calc(0.8s + var(--r) * 0.35s); }
.wood-2 text { font-size: 7.6px; font-weight: 600; fill: #3d2c1f; }
.wood-3 .tape { transform: scaleX(0); transform-origin: 30px 59px; transition: transform 0s 0.6s; }
.wood-3.on .tape { transform: none; transition: transform 1.3s cubic-bezier(0.6, 0, 0.2, 1) 0.2s; }
.wood-3 .tape rect { fill: #f2c230; }
.wood-3 .tape path { stroke: #2b1d13; stroke-width: 0.5; }
.wood-3 .tape-case { fill: #d0d3d6; stroke: #8c9196; stroke-width: 0.8; }
.wood-3 .wstep { opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s; }
.wood-3.on .wstep { opacity: 1; transform: none; transition: opacity 0.5s ease calc(0.6s + var(--r) * 0.35s), transform 0.6s var(--ease) calc(0.6s + var(--r) * 0.35s); }
.wood-3 .wstep path { stroke: #f2c230; stroke-width: 0.8; stroke-dasharray: 2 2; }
.wood-3 .wstep-t { font-size: 11px; font-weight: 600; letter-spacing: -0.02em; }
.wood-3 .wstep-s { font-size: 6px; fill: rgba(245, 245, 247, 0.65); }
.wood-4 { background: radial-gradient(circle at 50% 50%, #2e1f13, #0a0705 72%); }
.wood-4 .sweep { background: #c08a52; box-shadow: 0 0 10px rgba(192, 138, 82, 0.7); }
.wood-5 .grain path, .wood-5 .grain ellipse { fill: none; stroke: rgba(92, 56, 26, 0.22); stroke-width: 0.8; }
.wood-5 .burn { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; fill: transparent; stroke: #3a1f0c; stroke-width: 0.6;
  stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 0s 0.6s, fill 0s 0.6s; }
.wood-5.on .burn { stroke-dashoffset: 0; fill: #3a1f0c; transition: stroke-dashoffset 1.4s ease 0.2s, fill 0.8s ease 1.2s; }
.wood-5 .burn-glow { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; fill: #ff8a2a; opacity: 0; }
.wood-5.on .burn-glow { animation: ember 2s ease 0.4s both; }
@keyframes ember { 30% { opacity: 0.9; } 100% { opacity: 0; } }
.wood-5 .burn-tag, .wood-5 .burn-url { font: 500 6px "IBM Plex Mono", monospace; letter-spacing: 0.2em; fill: #4a2a12; opacity: 0; transition: opacity 0.3s; }
.wood-5.on .burn-tag { opacity: 1; transition: opacity 0.6s ease 1.6s; }
.wood-5.on .burn-url { opacity: 0.8; transition: opacity 0.6s ease 1.8s; }

/* Their shots on the timeline */
.shot.law-s1 { background: url(media/lawyer.jpg) 50% 40% / cover; }
.shot.law-s2 { background: linear-gradient(rgba(212, 177, 112, 0.5), rgba(212, 177, 112, 0.5)) 12% 50% / 18% 62% no-repeat, linear-gradient(rgba(212, 177, 112, 0.35), rgba(212, 177, 112, 0.35)) 37% 50% / 18% 62% no-repeat,
  linear-gradient(rgba(212, 177, 112, 0.35), rgba(212, 177, 112, 0.35)) 63% 50% / 18% 62% no-repeat, linear-gradient(rgba(212, 177, 112, 0.35), rgba(212, 177, 112, 0.35)) 88% 50% / 18% 62% no-repeat, #0c1424; }
.shot.law-s3 { background: radial-gradient(circle at 20% 50%, #d4b170 0 4px, transparent 4.5px), radial-gradient(circle at 50% 50%, #d4b170 0 4px, transparent 4.5px),
  radial-gradient(circle at 80% 50%, #d4b170 0 4px, transparent 4.5px), linear-gradient(rgba(212, 177, 112, 0.5), rgba(212, 177, 112, 0.5)) 50% 50% / 60% 1px no-repeat, #0c1424; }
.shot.law-s5 { background: radial-gradient(circle at 50% 50%, transparent 0 6px, #d4b170 6.5px 7.5px, transparent 8px), radial-gradient(circle at 50% 50%, #15213a, #05070c 72%); }
.shot.fit-s1 { background: url(media/trainer.jpg) 50% 35% / cover; }
.shot.fit-s2 { background: url(media/trainer-2.jpg) 50% 50% / cover; }
.shot.fit-s3 { background: radial-gradient(circle at 78% 50%, transparent 0 7px, #d7ff3c 7.5px 10px, transparent 10.5px),
  linear-gradient(#f5f5f7, #f5f5f7) 16% 30% / 34% 7% no-repeat, linear-gradient(#f5f5f7, #f5f5f7) 16% 50% / 30% 7% no-repeat, linear-gradient(#f5f5f7, #f5f5f7) 16% 70% / 26% 7% no-repeat, #0a0c0b; }
.shot.fit-s4 { background: linear-gradient(#f5f5f7, #f5f5f7) 50% 34% / 50% 12% no-repeat, linear-gradient(#d7ff3c, #d7ff3c) 50% 72% / 34% 18% no-repeat, radial-gradient(circle at 50% 30%, #26300c, #060706 72%); }
.shot.elec-s1 { background: url(media/electrician.jpg) 50% 40% / cover, #1b1e24; }
.shot.elec-s2 { background: radial-gradient(circle at 18% 32%, #ffd23f 0 3px, transparent 3.5px), radial-gradient(circle at 50% 32%, #ffd23f 0 3px, transparent 3.5px), radial-gradient(circle at 82% 32%, #ffd23f 0 3px, transparent 3.5px),
  radial-gradient(circle at 18% 68%, #6b6440 0 3px, transparent 3.5px), radial-gradient(circle at 50% 68%, #6b6440 0 3px, transparent 3.5px), radial-gradient(circle at 82% 68%, #6b6440 0 3px, transparent 3.5px), #090a0d; }
.shot.elec-s3 { background: linear-gradient(#ffd23f, #ffd23f) 14% 26% / 24% 2px no-repeat, linear-gradient(#ffd23f, #ffd23f) 50% 26% / 24% 2px no-repeat, linear-gradient(#ffd23f, #ffd23f) 86% 26% / 24% 2px no-repeat,
  linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) 14% 60% / 26% 64% no-repeat, linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) 50% 60% / 26% 64% no-repeat,
  linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) 86% 60% / 26% 64% no-repeat, #090a0d; }
.shot.elec-s5 { background: radial-gradient(circle at 50% 45%, #ffd23f 0 4px, transparent 5px), radial-gradient(circle at 50% 45%, rgba(255, 210, 63, 0.35), #040405 65%); }
.shot.wood-s1 { background: url(media/carpenter.jpg) 50% 40% / cover; }
.shot.wood-s2 { background: linear-gradient(#5b4636, #5b4636) 14% 50% / 2px 50% no-repeat, linear-gradient(#5b4636, #5b4636) 40% 50% / 2px 50% no-repeat,
  linear-gradient(#5b4636, #5b4636) 64% 50% / 2px 50% no-repeat, linear-gradient(#5b4636, #5b4636) 88% 50% / 2px 50% no-repeat, #efe4d0; }
.shot.wood-s3 { background: linear-gradient(#f2c230, #f2c230) 50% 38% / 84% 18% no-repeat, linear-gradient(#2b1d13, #140d08); }
.shot.wood-s5 { background: linear-gradient(#3a1f0c, #3a1f0c) 50% 50% / 50% 14% no-repeat, linear-gradient(#c79a66, #a87443); }

/* SaaS (Passiro): the banner on a site, the editor, the scan, the analytics, the price, the logo */
.saas-1 .url-text { font-size: 4.6px; fill: #646464; }
.saas-1 .banner { transform: translateY(46px); opacity: 0; transition: transform 0s 0.6s, opacity 0s 0.6s; }
.saas-1.on .banner { animation: banner-life 4.4s both; }
@keyframes banner-life { 0%, 18% { transform: translateY(46px); opacity: 0; } 30%, 66% { transform: none; opacity: 1; } 76%, 100% { transform: translateY(46px); opacity: 0; } }
.saas-1 .b-title { font-size: 6.4px; font-weight: 600; }
.saas-1 .b-sub { font-size: 4.6px; fill: rgba(245, 245, 247, 0.6); }
.saas-1 .b-btn { font-size: 4.4px; font-weight: 600; }
.saas-1.on .accept { animation: press-accept 4.4s both; }
@keyframes press-accept { 0%, 58% { fill: #04876b; } 61% { fill: #1cd295; } 66%, 100% { fill: #04876b; } }
.saas-1 .cursor { opacity: 0; transform: translate(300px, 170px); }
.saas-1.on .cursor { animation: cursor-go 4.4s both; }
@keyframes cursor-go { 0%, 32% { opacity: 0; transform: translate(300px, 170px); } 40% { opacity: 1; } 56% { transform: translate(250px, 127px); } 60% { transform: translate(250px, 127px) scale(0.85); } 64%, 70% { transform: translate(250px, 127px); opacity: 1; } 76%, 100% { opacity: 0; transform: translate(250px, 127px); } }
.saas-1 .toast { opacity: 0; transform: translateY(6px); }
.saas-1.on .toast { animation: toast-in 4.4s both; }
@keyframes toast-in { 0%, 74% { opacity: 0; transform: translateY(6px); } 80%, 100% { opacity: 1; transform: none; } }
.saas-1 .toast text { font-size: 5.8px; font-weight: 600; }
.saas-2 .ed-title { font-size: 7px; font-weight: 600; fill: #0e151b; }
.saas-2 .ed-label { font: 500 4.6px "IBM Plex Mono", monospace; letter-spacing: 0.14em; fill: #646464; }
.saas-2 .ed-input { font-size: 4.6px; fill: #646464; }
.saas-2 .sw-ring { transition: transform 0s 0.6s; }
.saas-2.on .sw-ring { animation: ring-step 4.6s steps(1, end) both; }
@keyframes ring-step { 0% { transform: none; } 30% { transform: translateX(17px); } 55% { transform: translateX(34px); } 80% { transform: translateX(17px); } }
.saas-2 .pv-fill { fill: #0e151b; }
.saas-2.on .pv-fill { animation: banner-colour 4.6s steps(1, end) both; }
@keyframes banner-colour { 0% { fill: #0e151b; } 30% { fill: #04876b; } 55% { fill: #e8753d; } 80% { fill: #04876b; } }
.saas-2 .lay-ring { transition: transform 0s 0.6s; }
.saas-2.on .lay-ring { animation: layout-step 4.6s steps(1, end) both; }
@keyframes layout-step { 0%, 64% { transform: none; } 66% { transform: translateX(25px); } 74%, 100% { transform: none; } }
.saas-2 .pv-banner { transform-origin: 217px 119px; }
.saas-2.on .pv-banner { animation: layout-try 4.6s var(--ease) both; }
@keyframes layout-try { 0%, 64% { transform: none; } 68%, 72% { transform: scale(0.55, 1.1) translateX(-55px); } 76%, 100% { transform: none; } }
.saas-2 .saved { opacity: 0; transform: translateY(4px); }
.saas-2.on .saved { animation: toast-in 4.6s both; }
.saas-2 .saved text { font-size: 5.6px; font-weight: 600; }
.saas-3 .sc-title { font-size: 8px; font-weight: 600; }
.saas-3 .sc-pages { font: 500 6px "IBM Plex Mono", monospace; fill: #1cd295; opacity: 0; transition: opacity 0.3s; }
.saas-3.on .sc-pages { opacity: 1; transition-delay: 1.5s; }
.saas-3 .sc-bar { transform: scaleX(0); transform-origin: 34px 39px; transition: transform 0s 0.6s; }
.saas-3.on .sc-bar { transform: none; transition: transform 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; }
.saas-3 .ck { opacity: 0; transition: opacity 0.3s; }
.saas-3.on .ck { opacity: 1; transition: opacity 0.4s ease calc(0.6s + var(--r) * 0.3s); }
.saas-3 .ck-name { font: 500 6px "IBM Plex Mono", monospace; }
.saas-3 .ck-cat { font-size: 5px; font-weight: 600; }
.saas-3 .ck-st { font-size: 5.4px; fill: rgba(245, 245, 247, 0.7); }
.saas-3 .ck-state { opacity: 0; transition: opacity 0.3s; }
.saas-3.on .ck-state { opacity: 1; transition: opacity 0.4s ease calc(1.9s + var(--r) * 0.25s); }
.saas-4 .an-title { font-size: 6.4px; font-weight: 600; fill: #0e151b; }
.saas-4 .an-big { font-size: 14px; font-weight: 600; fill: #0e151b; letter-spacing: -0.03em; }
.saas-4 .an-small { font-size: 5px; fill: #646464; }
.saas-4 .donut { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0s 0.6s; }
.saas-4.on .donut { stroke-dashoffset: 0.28; transition: stroke-dashoffset 1.4s var(--ease) 0.3s; }
.saas-4 .bar { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0s 0.6s; }
.saas-4.on .bar { transform: none; transition: transform 0.7s var(--ease) calc(0.3s + var(--r) * 0.1s); }
.saas-4 .pill { opacity: 0; transition: opacity 0.3s; }
.saas-4.on .pill { opacity: 1; transition: opacity 0.5s ease calc(1.4s + var(--r) * 0.25s); }
.saas-4 .pill text { font-size: 5.6px; font-weight: 600; }
.saas-5 { background: radial-gradient(circle at 50% 50%, #0c2a22, #050807 72%); }
.saas-5 .sweep { background: #1cd295; box-shadow: 0 0 10px rgba(28, 210, 149, 0.7); }
.saas-6 { display: grid; place-content: center; background: #f6f7f8; color: #0e151b; }
.ps-wrap { display: grid; justify-items: center; gap: clamp(6px, 1.2vw, 14px); }
.saas-6 .ps-logo { width: clamp(120px, 22vw, 260px); height: auto; color: #0e151b; }
.saas-6 .ps-knob { transform-box: fill-box; transform-origin: center; }
.saas-6.on .ps-knob { animation: knob-on 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) 0.9s both; }
@keyframes knob-on { to { transform: translateX(120%); } }
.saas-6 .ps-cta { padding: 0.55em 1.3em; border-radius: 999px; background: #04876b; color: #fff; font-weight: 600; font-size: clamp(10px, 1.3vw, 16px); }
.saas-6 .ps-note { font: 500 clamp(8px, 0.9vw, 12px) "IBM Plex Mono", monospace; color: #646464; letter-spacing: 0.06em; }
.saas-6 .ps-logo, .saas-6 .ps-cta, .saas-6 .ps-note { opacity: 0; transform: translateY(8px); }
.saas-6.on .ps-logo { animation: rise-in 0.8s var(--ease) 0.15s both; }
.saas-6.on .ps-cta { animation: rise-in 0.8s var(--ease) 0.45s both; }
.saas-6.on .ps-note { animation: rise-in 0.8s var(--ease) 0.6s both; }
@keyframes rise-in { to { opacity: 1; transform: none; } }
.shot.saas-s1 { background: linear-gradient(#0e151b, #0e151b) 50% 82% / 70% 26% no-repeat, linear-gradient(#fff, #fff) 50% 50% / 78% 80% no-repeat, #e9eeee; }
.shot.saas-s2 { background: linear-gradient(#04876b, #04876b) 78% 76% / 44% 18% no-repeat, linear-gradient(#fff, #fff) 16% 50% / 26% 80% no-repeat, linear-gradient(#fff, #fff) 78% 50% / 50% 80% no-repeat, #f6f7f8; }
.shot.saas-s3 { background: linear-gradient(#1cd295, #1cd295) 50% 22% / 80% 6% no-repeat, linear-gradient(#16202a, #16202a) 50% 46% / 80% 12% no-repeat, linear-gradient(#16202a, #16202a) 50% 70% / 80% 12% no-repeat, #0e151b; }
.shot.saas-s4 { background: radial-gradient(circle at 26% 45%, transparent 0 5px, #04876b 5.5px 8px, transparent 8.5px), linear-gradient(#9fd9c5, #9fd9c5) 74% 70% / 40% 30% no-repeat, #f6f7f8; }
.shot.saas-s6 { background: linear-gradient(90deg, #058c6d, #34e7a0) 50% 50% / 30% 30% no-repeat, #f6f7f8; }

/* Showcase: a justified gallery. Every row is the same height; a shot's share of
   the row follows its aspect ratio, and it crops to fill when the row stretches. */
.show-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 920px; margin: 0 auto 30px; }
.show-filters button { font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.2; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(18, 18, 22, 0.55); color: var(--text-2); transition: background 0.25s, color 0.25s, border-color 0.25s; }
.show-filters button:hover { color: #fff; border-color: rgba(255, 255, 255, 0.32); }
.show-filters button[aria-pressed="true"] { background: #fff; border-color: #fff; color: #050505; }
.show-filters button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.show-grid { --h: 230px; display: flex; flex-wrap: wrap; gap: 10px; max-width: var(--wrap); margin: 0 auto; }
.show-grid::after { content: ""; flex-grow: 10000; }
.show-grid.justified .show-card { flex: none; }
.show-grid.clip { max-height: 760px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.show-card { position: relative; margin: 0; height: var(--h); flex: 178 1 calc(var(--h) * 1.778); border-radius: 16px; overflow: hidden;
  background: #0d0d10; border: 1px solid var(--line); transition: border-color 0.3s; }
.show-card.tall { flex: 56 1 calc(var(--h) * 0.5625); }
.show-card:hover { border-color: rgba(245, 165, 36, 0.55); }
.show-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.show-card:hover video { transform: scale(1.04); }
.show-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 42%, rgba(0, 0, 0, 0.8)); }
.show-model { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 500;
  background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.show-card figcaption { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: grid; gap: 2px; }
.show-cat { font: 500 10.5px "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); }
.show-card strong { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.show-card q { font-size: 13px; line-height: 1.4; color: rgba(245, 245, 247, 0.78); max-height: 0; opacity: 0; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: max-height 0.4s var(--ease), opacity 0.3s; }
.show-card:hover q { max-height: 2.9em; opacity: 1; }
.show-more { display: flex; justify-content: center; margin-top: 30px; }
.show-more[hidden] { display: none; }

/* Glass cards */
.card-glass {
  position: relative; padding: 30px; border-radius: 22px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), var(--panel);
}
.card-glass h3 { font-size: 25px; font-weight: 500; letter-spacing: -0.03em; margin-bottom: 10px; }
.card-glass p { color: var(--text-2); font-size: 16px; }
.lit { position: relative; }
.lit::before, .lit::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
.lit::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(245, 165, 36, 0.09), transparent 45%); }
.lit::after { padding: 1px; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 210, 122, 0.7), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.lit:hover::before, .lit:hover::after { opacity: 1; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cards .card-glass { display: flex; flex-direction: column; min-height: 330px; }
.cards .reveal:nth-child(2) { transition-delay: 0.1s; }
.cards .reveal:nth-child(3) { transition-delay: 0.2s; }
.icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: auto; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06), 0 0 40px rgba(245, 165, 36, 0.25); }
.icon svg { width: 25px; height: 25px; fill: none; stroke: #050505; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* How it works */
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.split + .split { margin-top: 130px; }
.split.flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.split.flip .split-copy { order: 2; }
.num { font: 500 13px "IBM Plex Mono", monospace; color: var(--accent); letter-spacing: 0.12em; }
.split h3 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; margin: 14px 0 18px; }
.split p { color: var(--text-2); font-size: 18px; max-width: 42ch; }
.panel { padding: 26px; min-height: 300px; border-radius: 24px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), var(--panel);
  box-shadow: 0 40px 100px -40px rgba(245, 165, 36, 0.25); }
.ask { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 18px; border-radius: 14px; font-size: 15px;
  border: 1px solid rgba(245, 165, 36, 0.5); background: rgba(245, 165, 36, 0.05); box-shadow: 0 0 34px rgba(245, 165, 36, 0.14); }
.ask .go { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--accent) center / 14px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11V3M3.5 6.5L7 3l3.5 3.5'/%3E%3C/svg%3E"); }
.script { margin-top: 18px; }
.script li { display: grid; grid-template-columns: 34px 1fr; padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
.script li:last-child { border-bottom: 0; }
.script b { font: 500 12px/1.9 "IBM Plex Mono", monospace; color: var(--accent); }
.js .split .script li { opacity: 0; transform: translateX(-10px); transition: opacity 0.6s ease, transform 0.6s var(--ease); }
.js .split.in .script li { opacity: 1; transform: none; }
.split.in .script li:nth-child(1) { transition-delay: 0.4s; }
.split.in .script li:nth-child(2) { transition-delay: 0.6s; }
.split.in .script li:nth-child(3) { transition-delay: 0.8s; }
.split.in .script li:nth-child(4) { transition-delay: 1s; }
.takes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.take { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; }
.take.t1 { background: url(media/turbine.jpg) 30% 60% / 260%; filter: saturate(0.7) brightness(0.8); }
.take.t2 { background: url(media/turbine.jpg) 70% 35% / cover; }
.take.t3 { background: url(media/turbine.jpg) 90% 80% / 220%; filter: hue-rotate(-20deg) brightness(0.75); }
.take.picked { border: 2px solid var(--accent); box-shadow: 0 0 30px rgba(245, 165, 36, 0.35); }
.take em { position: absolute; left: 8px; bottom: 7px; font: normal 500 11px "Clarity City", sans-serif; padding: 2px 7px; border-radius: 5px; background: rgba(0, 0, 0, 0.55); }
.model-row { display: flex; gap: 8px; margin: 18px 0; }
.model-row span, .formats-row span, .chips li { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; color: var(--text-2); }
.model-row .on { color: #111; background: var(--accent); border-color: var(--accent); font-weight: 600; }
.wave { position: relative; height: 54px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.wave svg { width: 100%; height: 100%; fill: rgba(245, 165, 36, 0.75); }
.wave span { position: absolute; right: 12px; top: -11px; padding: 2px 9px; border-radius: 6px; font-size: 11px; background: #0d0d10; border: 1px solid var(--line); color: var(--text-2); }
.line { font-size: clamp(20px, 2.2vw, 27px); font-weight: 500; letter-spacing: -0.02em; color: var(--text) !important; max-width: none !important; }
.line del { color: rgba(245, 245, 247, 0.35); text-decoration-color: #ff6b5a; }
.line ins { text-decoration: none; padding: 0 6px; border-radius: 6px; background: rgba(245, 165, 36, 0.18); color: var(--accent-2); }
.cues { position: relative; height: 60px; margin: 26px 0 22px; border-top: 1px dashed var(--line-2); }
.cues span { position: absolute; top: 14px; padding: 4px 10px; border-radius: 6px; font: 500 12px "IBM Plex Mono", monospace; color: var(--accent-2);
  background: rgba(245, 165, 36, 0.1); border: 1px solid rgba(245, 165, 36, 0.35); }
.cues span::before { content: ""; position: absolute; left: 10px; top: -15px; width: 1px; height: 14px; background: var(--accent); }
.formats-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Just ask */
.chat { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 22px; max-width: 1040px; margin: 0 auto; padding: 22px; }
.chat-log { display: grid; gap: 14px; align-content: start; }
.msg.you { justify-self: end; max-width: 90%; min-height: 1.5em; padding: 12px 16px; border-radius: 18px 18px 5px 18px; background: rgba(255, 255, 255, 0.08); font-size: 15px; }
.msg.claude { padding: 16px 18px; border-radius: 18px 18px 18px 5px; border: 1px solid rgba(245, 165, 36, 0.3); background: rgba(245, 165, 36, 0.04); }
.who { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.done li { position: relative; padding: 6px 0 6px 28px; font-size: 14.5px; color: var(--text-2); }
.done li::before { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(76, 195, 138, 0.6);
  background: rgba(76, 195, 138, 0.14) center / 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%234cc38a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5.2l2 2 4-4.4'/%3E%3C/svg%3E"); }
.chat-preview { display: grid; gap: 12px; align-content: center; }
.outro-frame { aspect-ratio: 16 / 9; border-radius: 14px; border: 1px solid var(--line-2); box-shadow: 0 30px 80px -30px rgba(245, 165, 36, 0.45); }
.outro-frame .mark { width: 15%; }
.chat-preview .label { font: 500 12px "IBM Plex Mono", monospace; color: var(--text-2); text-align: center; letter-spacing: 0.08em; }
.chat-input { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 8px 8px 18px; border-radius: 16px;
  border: 1px solid rgba(245, 165, 36, 0.45); background: rgba(245, 165, 36, 0.04); box-shadow: 0 0 0 4px rgba(245, 165, 36, 0.06), 0 0 40px rgba(245, 165, 36, 0.12); }
.hint { color: var(--text-2); margin-right: auto; font-size: 15px; }
.suggest { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; color: var(--text-2); }
.js .chat .msg.claude, .js .chat .done li, .js .chat .chat-preview { opacity: 0; transform: translateY(8px); transition: opacity 0.6s ease, transform 0.6s var(--ease); }
.js .chat.answered .msg.claude, .js .chat.answered .done li, .js .chat.answered .chat-preview { opacity: 1; transform: none; }
.chat.answered .done li:nth-child(1) { transition-delay: 0.35s; }
.chat.answered .done li:nth-child(2) { transition-delay: 0.7s; }
.chat.answered .done li:nth-child(3) { transition-delay: 1.05s; }
.chat.answered .done li:nth-child(4) { transition-delay: 1.4s; }
.chat.answered .chat-preview { transition-delay: 1.1s; }
.js .chat .chat-preview { transform: scale(0.96); }

/* Templates */
.templates { padding-left: 0; padding-right: 0; overflow: hidden; overflow: clip; } /* the tilted wall is wider than the page */
.templates .head { padding: 0 16px; }
.wall { transform: perspective(1400px) rotateX(16deg) rotateZ(-4deg) scale(1.06); transform-origin: 50% 0; padding-bottom: 30px; }
.marquee { overflow: hidden; padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee + .marquee { margin-top: 8px; }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: slide 70s linear infinite; }
.marquee.reverse .marquee-track { animation-direction: reverse; animation-duration: 80s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(calc(-50% - 8px)); } }
.tpl { flex: none; width: 300px; margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); transition: border-color 0.3s, transform 0.3s var(--ease); }
.tpl:hover { border-color: rgba(245, 165, 36, 0.55); transform: translateY(-3px); }
.tpl-art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.tpl-art img, .tpl-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tpl-art video { opacity: 0; transition: opacity 0.4s; }
.tpl.playing .tpl-art video { opacity: 1; }
.tpl figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 15px 14px; }
.tpl strong { font-weight: 500; font-size: 15px; }
.tpl figcaption span { color: var(--text-2); font-size: 12px; white-space: nowrap; }

/* Built for films that have to be right */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bento .wide { grid-column: span 2; }
.bento .card-glass { min-height: 250px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.facts { display: grid; gap: 8px; margin-top: 22px; font-size: 13px; }
.facts span { display: grid; grid-template-columns: 1fr auto 16px; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.facts em { font-style: normal; color: var(--text-2); font-family: "IBM Plex Mono", monospace; font-size: 11px; }
.facts i { width: 10px; height: 10px; border-radius: 50%; }
.facts .ok { background: #4cc38a; box-shadow: 0 0 10px #4cc38a; }
.facts .no { background: #ff6b5a; box-shadow: 0 0 10px #ff6b5a; }
.spark-chart { display: block; width: 100%; height: 70px; margin-top: 22px; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(245, 165, 36, 0.6)); }
.versions { display: grid; gap: 8px; margin-top: 22px; font: 400 13px "IBM Plex Mono", monospace; color: var(--text-2); }
.versions span { padding: 6px 12px; border-left: 2px solid var(--line-2); }
.versions span:first-child { border-color: var(--accent); color: var(--text); }
.bento .reveal:nth-child(2), .bento .reveal:nth-child(4) { transition-delay: 0.1s; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 40px; }
.stat { display: grid; gap: 6px; padding: 30px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); }
.stat strong { font-size: clamp(40px, 5vw, 64px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.stat span { color: var(--text-2); }
.stats .reveal:nth-child(2) { transition-delay: 0.1s; }
.stats .reveal:nth-child(3) { transition-delay: 0.2s; }

/* Closing */
.closing { min-height: 92vh; display: grid; place-content: center; justify-items: center; gap: 34px; text-align: center; }
.closing h2 { font-size: clamp(40px, 6.4vw, 84px); line-height: 1; letter-spacing: -0.05em; max-width: 13ch; text-shadow: 0 0 40px rgba(0, 0, 0, 0.8); }

.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 26px var(--gutter);
  border-top: 1px solid var(--line); font-size: 14px; background: rgba(3, 3, 4, 0.6); }

/* Login */
body.auth { min-height: 100vh; display: grid; grid-template-rows: 1fr auto; }
.login { display: grid; place-items: center; padding: 120px 16px 64px; }
.card { width: min(420px, 100%); display: grid; gap: 16px; padding: 36px; border-radius: 24px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01)), rgba(7, 7, 9, 0.8);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 40px 120px -30px rgba(245, 165, 36, 0.3); }
.card h1 { font-size: 34px; letter-spacing: -0.04em; }
.card label { display: grid; gap: 6px; font-size: 14px; color: var(--text-2); }
.card input { font: inherit; color: var(--text); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; }
.card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(245, 165, 36, 0.12); }
.card .btn { margin-top: 6px; }
.error { color: #ffb4b4; background: rgba(110, 30, 30, 0.5); border: 1px solid #6a3434; border-radius: 10px; padding: 8px 12px; font-size: 15px; }

@media (max-width: 960px) {
  .pill-nav { gap: 18px; padding-left: 20px; font-size: 14px; }
  .cards, .stats { grid-template-columns: 1fr; }
  .cards .card-glass { min-height: 0; }
  .icon { margin-bottom: 40px; }
  .split, .split.flip { grid-template-columns: 1fr; gap: 36px; }
  .split.flip .split-copy { order: 0; }
  .split + .split { margin-top: 90px; }
  .bento { grid-template-columns: 1fr; }
  .bento .wide { grid-column: auto; }
  section { padding-top: 90px; padding-bottom: 90px; }
}
@media (max-width: 760px) {
  .pill-nav { position: static; transform: none; padding: 0; gap: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .pill-nav a:not(.btn) { display: none; }
  .hero { padding-top: 120px; }
  .lede { font-size: 17px; }
  .frame { margin-top: 48px; padding: 6px; border-radius: 20px; }
  .films { margin-top: 40px; }
  .films { width: auto; max-width: none; margin-left: -16px; margin-right: -16px; padding: 5px 16px; overflow-x: auto; scrollbar-width: none;
    border-radius: 0; border-width: 1px 0; }
  .films::-webkit-scrollbar { display: none; }
  .films button { flex: none; padding: 7px 13px; font-size: 13px; }
  .show-filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -16px 22px; padding: 0 16px; scrollbar-width: none; }
  .show-filters::-webkit-scrollbar { display: none; }
  .show-filters button { flex: none; }
  .show-grid { --h: 150px; gap: 8px; }
  .show-grid.clip { max-height: 560px; }
  .show-card { border-radius: 12px; }
  .show-model, .show-card q { display: none; }
  .show-card figcaption { left: 9px; right: 9px; bottom: 7px; }
  .show-cat { font-size: 9px; }
  .show-card strong { font-size: 12.5px; }
  .app { border-radius: 15px; }
  .app-title, .app-scenes { display: none; }
  .app-bar { grid-template-columns: 1fr auto; }
  .app-body { grid-template-columns: 1fr; padding: 12px; }
  .app-prompt { margin: 12px 12px 0; font-size: 12.5px; }
  .app-tracks { padding: 2px 12px 12px; }
  .wordmarks { gap: 16px 34px; font-size: 22px; }
  .tpl { width: 240px; }
  .chat { grid-template-columns: 1fr; padding: 16px; }
  .suggest { display: none; }
  .by { display: none; }
  .wall { transform: none; }
  .panel { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { transform: none; transition: opacity 0.4s ease; }
  .marquee { overflow-x: auto; }
  .marquee-track, .playhead { animation: none; }
  .js [data-split] .w > span { transform: none; transition: none; }
  .hero-copy, .tilt { transform: none; opacity: 1; }
}