/* Lyra Studio — v0 landing page
   Coal ground, film grain, Satoshi throughout, gradient only in the mark. */

/* Satoshi, self-hosted (Fontshare / ITF Free Font License); five weights, woff2 only */
@font-face {
  font-family: "Satoshi";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/satoshi-300.woff2") format("woff2");
}
@font-face {
  font-family: "Satoshi";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/satoshi-400.woff2") format("woff2");
}
@font-face {
  font-family: "Satoshi";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/satoshi-500.woff2") format("woff2");
}
@font-face {
  font-family: "Satoshi";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/satoshi-700.woff2") format("woff2");
}
@font-face {
  font-family: "Satoshi";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/satoshi-900.woff2") format("woff2");
}

:root {
  --coal: #0c0c0d;
  --coal-2: #121214;
  --coal-3: #19191c;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --ink: #f4f2ef;
  --ink-2: #b9b5ae;
  --ink-3: #8a867f;          /* 5.4:1 on coal, 5.1:1 on the shorts chrome */
  --ink-hover: #ffffff;
  --device-black: #000000;
  --fuchsia: #ff4fd8;
  --violet: #a855f7;
  --blue: #3b5bff;
  --grad: linear-gradient(135deg, #ff4fd8 0%, #a855f7 50%, #3b5bff 100%);
  --radius: 14px;
  --nav-h: 76px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--coal);
  color: var(--ink);
  font-family: "Satoshi", "Satoshi-Variable", ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
::selection { background: #a855f7; color: #0c0c0d; }

/* ---- atmosphere ---------------------------------------------------- */
.vignette {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 18% -10%, rgba(168, 85, 247, 0.10), transparent 60%),
    radial-gradient(900px 600px at 100% 110%, rgba(59, 91, 255, 0.08), transparent 60%),
    radial-gradient(80% 60% at 50% 40%, rgba(255, 255, 255, 0.02), transparent 70%);
}
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

.page { position: relative; z-index: 2; }
.wrap { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }

/* ---- skip link + no-JS note ------------------------------------------ */
.skip {
  position: absolute; left: 16px; top: -56px; z-index: 100;
  padding: 10px 14px; border-radius: 999px; background: var(--ink); color: var(--coal);
  font-size: 14px; font-weight: 700; transition: top .2s var(--ease);
}
.skip:focus { top: 16px; }
.noscript { margin: 0 0 24px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink-2); }
.noscript a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---- nav ---------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  background: linear-gradient(to bottom, rgba(12, 12, 13, 0.82), rgba(12, 12, 13, 0.30));
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2); transition: color .25s; white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.cta {
  color: var(--ink); padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
  transition: border-color .25s, background .25s;
}
.nav-links a.cta:hover { border-color: var(--ink); background: rgba(255,255,255,.04); }
/* a white light that circles the Book a call pill (Anh, Oct 13 2026): a conic gradient on an oversized square that
   turns (transform, so every browser animates it; the first build animated an @property angle on ::before, which older
   Safari cannot run), seen only through a ring mask on the pill's edge; the glow is the same light, blurred on a
   wider ring; it turns under Reduce Motion too (Anh, Oct 13 2026: "make it play") */
.nav-links a.cta { position: relative; }
.nav-links a.cta .orbit {
  position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.nav-links a.cta .orbit.glow { inset: -4px; padding: 4px; filter: blur(3px); opacity: .55; }
.nav-links a.cta .orbit i {
  position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px;
  background: conic-gradient(transparent 0 58%, rgba(255,255,255,.3) 78%, #fff 95%, transparent 100%);
  animation: cta-orbit 3.6s linear infinite;
}
@keyframes cta-orbit { to { transform: rotate(1turn); } }
.sound-toggle {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  font: inherit; color: var(--ink-2); background: transparent; border: 1px solid var(--line-strong); padding: 0;
  transition: color .25s, border-color .25s, background .25s, transform .15s var(--ease);
}
.sound-toggle:hover { color: var(--ink); border-color: var(--ink); background: rgba(255,255,255,.04); }
.sound-toggle:active { transform: scale(.94); }
.sound-toggle svg { display: block; }
.sound-toggle .wave { transition: opacity .2s; }
.sound-toggle .slash { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .25s var(--ease); }
.sound-toggle[aria-pressed="true"] .wave { opacity: 0; }
.sound-toggle[aria-pressed="true"] .slash { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .sound-toggle { display: none; } }
.logo { display: block; height: 30px; box-sizing: content-box; padding: 4px 0; margin: -4px 0; }   /* content-box: the padding grows the hit box (38px) while the lockup keeps its height */
.logo img { height: 100%; width: auto; }

/* ---- hero --------------------------------------------------------- */
.hero {
  min-height: 100svh;
  display: grid; align-content: end;
  padding: calc(var(--nav-h) + 60px) 0 72px;
  position: relative;
}
.hero h1 {
  margin: 0;
  font-weight: 900;
  font-size: clamp(44px, 7.2vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  max-width: 14ch;
}
.hero h1 .thin { font-weight: 300; letter-spacing: -0.03em; }
/* cycling second line: all phrases share one grid cell, so the block is as wide and as tall as the
   longest phrase at every viewport and nothing below it moves; one phrase is visible at a time */
.hero h1 .cycle { display: inline-grid; vertical-align: top; white-space: nowrap; }
.hero h1 .cycle > span {
  grid-area: 1 / 1; opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.hero h1 .cycle > span.is-in { opacity: 1; transform: none; }
.hero h1 .cycle > span.is-out { opacity: 0; transform: translateY(-6px); }
.hero-row {
  display: grid; grid-template-columns: 1fr; gap: 48px; align-items: end;
  margin-top: 44px;
}
.hero p.lede {
  margin: 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 300; color: var(--ink-2); max-width: 48ch; line-height: 1.45;
  text-wrap: balance;   /* even lines, like the share image, so the lede never ends on a lone word */
}
.hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  border: 1px solid var(--line-strong);
  transition: transform .35s var(--ease), background .25s, border-color .25s, color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translate(1px, -1px); }
.btn.solid { background: var(--ink); color: var(--coal); border-color: var(--ink); }
.btn.solid:hover { background: var(--ink-hover); }
.btn.ghost:hover { border-color: var(--ink); }

/* ---- filmed-with logo wall (a wall of logos, shown a few at a time) ------ */
.filmed { padding: 34px 0 30px; }
.logo-wall { --slots: 6; --slot-h: 76px; display: grid; grid-template-columns: repeat(var(--slots), 1fr); gap: 12px; }
.logo-wall .slot {
  position: relative; height: var(--slot-h); display: grid; place-items: center;
}
.logo-wall .lg {
  position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--ink); opacity: 0.72;
  transition: opacity .35s var(--ease), transform .7s var(--ease);
}
.logo-wall .lg img { height: var(--h, 38px); width: auto; max-width: calc(100% - 16px); object-fit: contain; display: block; } /* never wider than the slot: Fastlane, Anthropic and Spaceflow wordmarks exceed 197px at their h */
.logo-wall .lg .wm { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; white-space: nowrap; line-height: 1; }
.logo-wall .lg:hover { opacity: 1; }
/* the swap: outgoing lifts away and blurs, incoming rises into its place */
.logo-wall .lg.is-in  { animation: lg-in  .75s var(--ease) both; will-change: transform, opacity, filter; }
.logo-wall .lg.is-out { animation: lg-out .55s var(--ease) both; pointer-events: none; will-change: transform, opacity, filter; }
@keyframes lg-in  { from { opacity: 0; transform: translateY(16px) scale(.96); filter: blur(6px); } to { opacity: .72; transform: none; filter: blur(0); } }
@keyframes lg-out { from { opacity: .72; transform: none; filter: blur(0); } to { opacity: 0; transform: translateY(-16px) scale(.96); filter: blur(6px); } }
/* reduced motion or no JS: the whole wall, no cycling */
.logo-wall.is-static { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); row-gap: 18px; }
.logo-wall.is-static .lg { position: static; inset: auto; animation: none; }
@media (max-width: 1024px) {
  .logo-wall { --slots: 4; }
}
@media (max-width: 680px) {
  .filmed { padding: 28px 0 24px; }
  .logo-wall { --slots: 3; gap: 8px; }
  .logo-wall .lg img { max-width: 110px; }
  .logo-wall .lg .wm { font-size: 17px; }
}

/* ---- section chrome ---------------------------------------------- */
.section { padding: 110px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.section-head h2 { margin: 0; font-size: clamp(34px, 4.6vw, 64px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font: inherit; cursor: pointer;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px;
  transition: color .2s, border-color .2s, background .2s;
}
.chip:hover { color: var(--ink); border-color: var(--line-strong); }
.chip.is-active { color: var(--coal); background: var(--ink); border-color: var(--ink); }

/* ---- work grid ----------------------------------------------------- */
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  grid-auto-flow: dense; align-items: start;   /* cards keep their own height, so the hover area ends at the caption */
}
.card {
  position: relative; cursor: pointer;
  border-radius: var(--radius); overflow: visible;
  transition: transform .5s var(--ease), opacity .4s var(--ease);
  transform-origin: center;
}
.card.is-wide { grid-column: span 2; }
/* collections (a film plus its shorts, days or episodes) carry two cards fanned behind the cover, their top edges
   showing above the frame like a deck (Anh, Oct 12 2026, after an Odyssey case-study card); isolation keeps the
   layers behind this card's frame without dropping them behind the section */
.card.is-stack { isolation: isolate; }
.card.is-stack::before, .card.is-stack::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  height: 48px; border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid rgba(255,255,255,.2); border-bottom: 0;
  transition: transform .5s var(--ease);
}
.card.is-stack::before { top: -9px; left: 14px; right: 14px; background: #1d1d21; }
.card.is-stack::after { top: -18px; left: 30px; right: 30px; background: #151518; border-color: rgba(255,255,255,.13); z-index: -2; }   /* behind the front card: painted later in source order, it covered the middle of ::before and read as a raised tab (Anh, Oct 12 2026) */
.card.is-stack:hover::before, .card.is-stack:focus-visible::before { transform: translateY(-2px); }
.card.is-stack:hover::after, .card.is-stack:focus-visible::after { transform: translateY(-4px); }
/* at three columns the wide card also takes two rows, so the next card stacks under the one beside it */
@media (min-width: 1025px) {
  .card.is-wide { grid-row: span 2; align-self: stretch; display: flex; flex-direction: column; }
  .card.is-wide .frame { flex: 1 1 auto; }   /* keeps its 16:9 as a floor: with a filter that empties the second row the card is sized by its own frame, not cropped to one row (Anh, Oct 9 2026); beside two stacked cards it still grows to fill both rows */
  .card.is-wide .meta { flex: none; }
  /* that frame runs taller than 16:9 beside the two stacked cards, so cover cropped the film's sides on hover (names and
     logos cut off, Anh Oct 13 2026): the preview plays whole and the still stays behind it, blurred, to fill the bands */
  .card.is-wide video { object-fit: contain; }
  .card.is-wide .poster { transition: transform .9s var(--ease), opacity .5s var(--ease), filter .6s var(--ease); }
  .card.is-wide.is-playing .poster { opacity: 1; filter: blur(26px) brightness(.42) saturate(1.15); transform: scale(1.2); transition-delay: 0s; }
  .logo-wall.is-static { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 18px; }  /* 4 per row, partial last row centred (Anh, Oct 9 2026) */
  .logo-wall.is-static .slot { flex: 0 0 calc(25% - 9px); }
}
.card .frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  background: var(--coal-3);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px -30px rgba(0,0,0,.9);
  transition: box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.card .poster, .card video, .card iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0;
}
.card .poster { transition: transform .9s var(--ease), opacity .5s var(--ease); }
.card .poster.ph {
  display: grid; align-items: end; justify-items: start; padding: 18px;
  background:
    radial-gradient(60% 80% at 20% 10%, rgba(168,85,247,.28), transparent 60%),
    radial-gradient(50% 60% at 90% 100%, rgba(59,91,255,.25), transparent 60%),
    var(--coal-3);
}
.card .poster.ph span {
  font-weight: 900; font-size: clamp(34px, 4.6vw, 64px); letter-spacing: -0.04em; color: rgba(255,255,255,.18);
  text-transform: uppercase;
}
.card video, .card iframe { opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
/* YouTube draws its own buttons (copy link, logo, title bar) inside the iframe; oversize the
   player vertically so those bars fall outside the clipped frame while the video still fills it. */
.card iframe, .slide iframe { top: -72px; bottom: auto; height: calc(100% + 144px); }
/* the YouTube maxres stills carry 7 to 10px black bands top and bottom (1 to 1.4% of 720); scaling every frame
   medium by 1.035 crops ~1.7% at each edge so the bands fall outside the frame on the still, the hover preview
   and the self-hosted clips alike (Anh, Oct 10 2026). The iframe offsets are symmetric, so the centred scale
   keeps YouTube's chrome outside too. */
.card .poster, .card video, .card iframe { transform: scale(1.035); transform-origin: center; }
.card.is-playing video, .card.is-playing iframe { opacity: 1; }
.card.is-playing .poster { opacity: 0; transform: scale(1.075); transition-delay: .35s, 0s; }
.card .rim {
  position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  padding: 1px; background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .5s var(--ease);
}
.card .tag {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); background: rgba(12,12,13,.55); border: 1px solid rgba(255,255,255,.14);   /* back to the plain coal chip (Anh, Oct 10 2026), the frosted version lives on the modal pills */
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 7px 10px; border-radius: 999px;
}
.card .play {
  display: none;  /* Anh, Oct 9 2026: no play button on the work cards; hover starts the preview, click opens the player */
  position: absolute; inset: 0; z-index: 2; place-items: center; pointer-events: none;
  opacity: 1; transition: opacity .3s;
}
.card .play span {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(12,12,13,.5); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.card .play svg { width: 20px; height: 20px; margin-left: 2px; fill: var(--ink); stroke: var(--ink); stroke-width: 1.5; }
.card.is-playing .play { opacity: 0; }
/* shorts badge: bottom right of the frame, opens the package modal */
.card .shorts-badge {
  position: absolute; right: 12px; bottom: 12px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px; font: inherit; cursor: pointer;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);   /* 11px floor for functional text; the pill stays small through padding and icon */
  background: linear-gradient(to bottom, rgba(255,255,255,.09), rgba(12,12,13,.55)); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 4px 8px 4px 7px;
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: background .2s, border-color .2s, transform .3s var(--ease);
}
.card .shorts-badge svg { width: 11px; height: 11px; color: #d9b3ff; }
/* the pill glows violet so the shorts package is noticed; stronger while the card is hovered */
.card .shorts-badge {
  background: rgba(168,85,247,.4); border-color: rgba(255,255,255,.55);   /* always the purple fill, not only on hover (Anh, Oct 10 2026) */
  box-shadow: 0 0 0 1px rgba(168,85,247,.25), 0 0 22px -4px rgba(168,85,247,.8);
  animation: badge-glow 2.8s ease-in-out infinite;
}
@keyframes badge-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(168,85,247,.2), 0 0 16px -6px rgba(168,85,247,.6); }
  50%      { box-shadow: 0 0 0 1px rgba(168,85,247,.55), 0 0 32px -2px rgba(168,85,247,1); }
}
.card:hover .shorts-badge, .card .shorts-badge:hover {
  background: rgba(168,85,247,.55); border-color: rgba(255,255,255,.7);
  box-shadow: 0 0 0 1px rgba(168,85,247,.7), 0 0 40px 0 rgba(168,85,247,1); animation: none;
}
.card .shorts-badge:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .card .shorts-badge { animation: none; } }
.card .meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 4px 0; }
.card .title { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.card .sub { font-size: 13px; color: var(--ink-3); margin-top: 3px; font-weight: 400; }
.card .views { font-size: 13px; color: var(--ink-2); white-space: nowrap; font-weight: 500; }
.card .views b { color: var(--ink); font-weight: 700; }
.card .brand { flex: none; align-self: flex-start; margin-left: auto; margin-top: 1px; }
.card .brand img { height: var(--h, 18px); width: auto; max-width: 120px; object-fit: contain; opacity: .85; }

/* the pop-out */
.card:hover, .card:focus-visible { transform: translateY(-10px) scale(1.045); z-index: 10; outline: none; }
.card:hover .frame, .card:focus-visible .frame {
  border-color: transparent;
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,.95),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 90px -20px rgba(168,85,247,.45);
}
.card:hover .rim, .card:focus-visible .rim { opacity: 1; }
.grid:has(.card:hover) .card:not(:hover) { opacity: .5; }
.card.is-hidden { display: none; }
/* the grid shows its first four rows (four films on phones); the rest wait behind See more (Anh, Oct 13 2026) */
.card.is-folded { display: none; }
.grid-more { display: flex; justify-content: center; margin-top: 44px; }
.grid-more[hidden] { display: none; }
.grid-more .btn { background: none; color: var(--ink); font-family: inherit; cursor: pointer; }   /* a <button>, so drop the UA fill the link buttons never had */

/* ---- how ---------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; }
/* each step is a photo card with its copy set inside the frame: bottom, top, bottom, top; four across so the frames share the strip's columns */
.step {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden;
  background: var(--coal-3); border: 1px solid var(--line);
}
.step .shot { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; border: 0; border-radius: 0; }
.step .step-copy { position: absolute; left: 0; right: 0; z-index: 2; padding: 22px 20px; }
.step.is-bottom .step-copy { bottom: 0; padding-top: 56px; background: linear-gradient(to top, rgba(12,12,13,.94) 0, rgba(12,12,13,.88) calc(100% - 56px), transparent 100%); }
.step.is-top .step-copy { top: 0; padding-bottom: 56px; background: linear-gradient(to bottom, rgba(12,12,13,.94) 0, rgba(12,12,13,.88) calc(100% - 56px), transparent 100%); }
/* the Amplify step links its network to lyracap.vc/network (Anh, Oct 13 2026): underlined so it reads as a link over the photo */
.step-copy p a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(244,242,239,.45); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color .25s; }   /* white and bold so the network stands out in the grey step copy (Anh, Oct 13 2026) */
.step-copy p a:hover, .step-copy p a:focus-visible { text-decoration-color: currentColor; }
.step .n { font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.step h3 { margin: 8px 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.025em; color: #fff; }
.step p { margin: 0; color: var(--ink-2); font-weight: 400; font-size: 14px; line-height: 1.4; max-width: 34ch; }

/* ---- footer / cta ------------------------------------------------- */
.cta-band { padding: 120px 0 100px; text-align: left; border-top: 1px solid var(--line); }
.cta-band h2 { margin: 0 0 24px; font-size: clamp(44px, 7.2vw, 104px); font-weight: 900; letter-spacing: -0.045em; line-height: .95; max-width: 14ch; }
.cta-band p { margin: 0 0 32px; color: var(--ink-2); font-weight: 300; font-size: clamp(18px, 1.6vw, 22px); max-width: 46ch; }
footer { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding: 88px 0 96px; color: var(--ink-3); font-size: 13px; }   /* taller so the watermark sits under the copy line, not only below it */
footer .wrap { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
/* faded cursive wordmark behind the footer copy (Anh, Oct 9 2026): the orb-less PNG, not the 247KB brand SVG;
   .11 is the faintest the buried-raster rule still counts as visible, and the copy stays --ink-3 (ground lightens ~6% where they cross) */
.footer-mark { position: absolute; right: -2%; bottom: -12%; width: min(38vw, 540px); height: auto; opacity: .11; pointer-events: none; user-select: none; }   /* the PNG is 2.4:1, so 540px wide is 227px tall: at this size ~90% of the wordmark shows inside the footer instead of a clipped lower band */
@media (max-width: 680px) { .footer-mark { width: 90vw; right: -8%; bottom: -10%; } }
footer .brand { display: flex; align-items: center; gap: 12px; color: var(--ink-2); }
footer .brand img { width: 22px; height: 22px; }
footer nav { display: flex; gap: 22px; }
footer nav a, footer .brand a { display: inline-block; padding: 4px 0; margin: -4px 0; }   /* 28px tap target on a 20px line (WCAG 2.5.8), layout unchanged */
footer nav a:hover { color: var(--ink); }
footer .brand a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }
footer .brand a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ---- lightbox ----------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none; place-items: center;
  background: rgba(8,8,9,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.lightbox.is-open { display: grid; }
.lightbox .box {
  position: relative; width: min(1100px, 92vw); aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: var(--device-black); border: 1px solid var(--line-strong);
  box-shadow: 0 60px 120px -40px rgba(0,0,0,1), 0 0 120px -30px rgba(168,85,247,.5);
}
.lightbox .box.is-vertical { width: auto; height: min(88vh, 900px); aspect-ratio: 9 / 16; }
/* package modal: main film left, its shorts right */
.lightbox .box.is-package {
  width: min(1280px, 94vw); aspect-ratio: auto; max-height: 92vh; overflow: hidden;
  background: var(--coal-2); padding: 18px;
}
.pk { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; height: 100%; min-height: 0; }
.pk-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pk-stage { height: min(64vh, 640px); display: grid; place-items: center; background: #000; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
/* the player box must stay exactly 16:9 (or 9:16) inside the stage, so size it from the width
   and cap the height; a height-driven box with max-width ends up off-ratio and the embed crops */
.pk-player { width: min(100%, calc(min(64vh, 640px) * 16 / 9)); height: auto; aspect-ratio: 16 / 9; max-height: 100%; background: #000; }
.pk-player.is-short { width: auto; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; }
.pk-player iframe, .pk-player video { width: 100%; height: 100%; border: 0; display: block; background: #000; }
/* the player box owns the size; the media fills it absolutely, which Safari honours even when the box height comes from
   aspect-ratio (a percentage height or min-height does not resolve there and the iframe collapsed to 1px on iPhone, Oct 9 2026) */
.pk-player { position: relative; }
.pk-player iframe, .pk-player video { position: absolute; inset: 0; width: 100%; height: 100%; }
.pk-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 4px; }
.pk-title { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.pk-sub { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.pk-back {
  flex: none; display: inline-flex; align-items: center; gap: 8px; font: inherit; cursor: pointer;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 9px 13px;
  background: linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,.04));
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(0,0,0,.3);
  transition: border-color .2s, background .2s;
}
.pk-back:hover { border-color: rgba(255,255,255,.34); background: linear-gradient(to bottom, rgba(255,255,255,.2), rgba(255,255,255,.08)); }
.pk-back[hidden] { display: none; }
.pk-back svg { width: 14px; height: 14px; }
.pk-side { display: flex; flex-direction: column; min-height: 0; max-height: calc(92vh - 36px); border-left: 1px solid var(--line); padding-left: 18px; }   /* the box has only a max-height, so the column caps itself and the list scrolls inside it (7 Software Sauce episodes ran 1250px and were clipped, Oct 12 2026) */
.pk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 0 12px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.pk-head b { color: var(--ink); font-weight: 700; letter-spacing: 0; font-size: 13px; }
.pk-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-content: start; overflow-y: auto; min-height: 0; padding-right: 4px; scrollbar-width: thin; }
.pk-short { font: inherit; text-align: left; cursor: pointer; background: transparent; border: 0; padding: 0; color: var(--ink); display: grid; gap: 8px; align-content: start; border-radius: 10px; }
.pk-thumb { position: relative; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: var(--coal-3); border: 1px solid var(--line); transition: border-color .25s, transform .35s var(--ease); }
.pk-thumb.is-landscape { aspect-ratio: 16 / 9; }
.pk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.pk-play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .25s; }
.pk-play span, .pk-play svg { width: 34px; height: 34px; }
.pk-play svg { fill: var(--ink); stroke: var(--ink); filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
.pk-short:hover .pk-thumb, .pk-short.is-active .pk-thumb { border-color: rgba(168,85,247,.7); }
.pk-short:hover .pk-thumb img { transform: scale(1.04); }
.pk-short:hover .pk-play { opacity: 1; }
.pk-short.is-active .pk-thumb { box-shadow: 0 0 0 1px rgba(168,85,247,.7); }
/* pull quote above the shorts rail: an oversized opening mark in the label grey, the line itself in ink, no heading and
   no container (Anh, Oct 9 2026); a hairline under the block separates it from the rail head */
.pk-quote { position: relative; margin: 0 0 18px; padding: 22px 0 18px; border-bottom: 1px solid var(--line); }
.pk-quote::before { content: "\201C"; position: absolute; left: -2px; top: -6px; font-size: 44px; line-height: 1; font-weight: 700; color: var(--ink-3); }
.pk-quote blockquote { margin: 0; }
.pk-quote blockquote p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); font-weight: 400; }
.pk-who { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.pk-who img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--line-strong); }
.pk-who span { display: grid; gap: 1px; min-width: 0; }
.pk-who b { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.pk-who small { font-size: 12px; color: var(--ink-3); line-height: 1.2; }
.pk-text { display: grid; gap: 2px; }
.pk-t { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pk-v { font-size: 12px; color: var(--ink-3); }
@media (max-width: 900px) {
  /* phones and tablets: the whole modal scrolls as one sheet (quote, rail and all), the stage is the player's own
     16:9 box so nothing stretches, and a vertical short gets a tall stage instead (Anh, iPhone, Oct 9 2026) */
  /* the sheet hangs from the top, under the close pill, and is sized by the small viewport (svh, vh fallback): the
     centred 92vh sheet measured iOS's tall viewport, so its top slid under the address bar (Anh, iPhone, Oct 10 2026) */
  /* the overlay itself can scroll as a fallback: if the sheet ever ends up taller than the viewport (an old
     stylesheet, an odd in-app browser), the page is still reachable instead of stuck (Anh, iPhone, Oct 10 2026) */
  .lightbox.is-open { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .lightbox .box.is-package {
    width: 94vw; padding: 14px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    align-self: start; margin-top: calc(64px + env(safe-area-inset-top, 0px));
    max-height: calc(100vh - 80px); max-height: calc(100svh - 80px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  .pk { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; }
  .pk-stage { height: auto; aspect-ratio: 16 / 9; }
  .pk-stage:has(.pk-player.is-short) { aspect-ratio: auto; height: min(64vh, 560px); }
  .pk-player { width: 100%; }
  .pk-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; overflow: visible; max-height: none; }
  .pk-list { grid-template-columns: repeat(4, 1fr); overflow: visible; }
}
@media (max-width: 560px) {
  .pk-list { grid-template-columns: repeat(2, 1fr); }
  .pk-caption { flex-direction: column; align-items: flex-start; }
}
.lightbox .box iframe, .lightbox .box video { width: 100%; height: 100%; border: 0; display: block; }
.lightbox .box > iframe, .lightbox .box > video { position: absolute; inset: 0; width: 100%; height: 100%; }   /* same absolute fill for the plain player */
.lightbox .close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; }
/* frosted pill (Anh, Oct 9 2026): translucent fill over a backdrop blur, a lighter top edge and a soft drop so it
   reads as glass against both the player and the dimmed page behind it */
.lightbox .close {
  position: absolute; top: 22px; right: 26px; z-index: 3; font: inherit; color: var(--ink);   /* always above the sheet, whatever overlaps */
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(to bottom, rgba(255,255,255,.16), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.24); border-radius: 999px; padding: 10px 14px; cursor: pointer;
  -webkit-backdrop-filter: blur(24px) saturate(170%) brightness(1.1); backdrop-filter: blur(24px) saturate(170%) brightness(1.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.35), 0 12px 32px -14px rgba(0,0,0,.8);
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.lightbox .close:hover { background: linear-gradient(to bottom, rgba(255,255,255,.24), rgba(255,255,255,.1)); border-color: rgba(255,255,255,.36); }

/* ---- reveal ------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.hero .reveal:nth-child(1) { transition-delay: .05s; }
.hero .reveal:nth-child(2) { transition-delay: .15s; }
.hero .reveal:nth-child(3) { transition-delay: .3s; }

/* ---- responsive --------------------------------------------------- */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .section-note { text-align: left; }
  .hero { align-content: center; }
  .reels { grid-template-columns: 1fr; gap: 36px; justify-items: center; }
  .playlist { width: 100%; }
}
@media (max-width: 900px) {
  .nav-links { gap: 18px; }
  .nav-links a[href="#how"] { display: none; }
  .hero-row { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .wrap { width: calc(100% - 32px); }
  .hero h1 .cycle { white-space: normal; }
  .nav-links { gap: 12px; }
  .nav-links a { letter-spacing: 0.12em; }
  .nav-links a.cta { padding: 9px 12px; letter-spacing: 0.12em; }
  .logo { height: 22px; }
  .grid { grid-template-columns: 1fr; }
  .card.is-wide { grid-column: auto; }
  .grid-more { margin-top: 32px; }
  .phone { width: min(340px, calc(100vw - 110px)); }
  .phone-wrap { gap: 12px; }
  .steps { grid-template-columns: 1fr; }
  .step { aspect-ratio: 4 / 3; }
  .section { padding: 72px 0; }
  .section-head { flex-direction: column; align-items: start; }
  .grid:has(.card:hover) .card:not(:hover) { opacity: 1; }
  .card:hover { transform: none; }
}


/* ---- browser surfaces: focus, touch, reduced motion ------------------- */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible, .chip:focus-visible, .nav-links a.cta:focus-visible, .sound-toggle:focus-visible, .pn:focus-visible, .lightbox .close:focus-visible, .slide .cap .handle .follow:focus-visible { border-radius: 999px; }
.playlist li:focus-visible { outline-offset: -2px; }
.feed:focus-visible { outline: none; }
@media (max-width: 480px) {
  .nav-links a[href="#pricing"] { display: none; } /* the hero's Pricing button and the CTA cover it */
}
@media (hover: none) {
  .chip { padding: 13px 16px; }
  .nav-links a.cta { padding: 13px 14px; }
  .sound-toggle { width: 44px; height: 44px; }
  .slide .cap .handle .follow { padding: 8px 11px; }
  .slide .rail { gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card:hover, .card:focus-visible, .btn:hover, .btn:hover svg, .pn:hover, .sound-toggle:active { transform: none; }
  .card.is-playing .poster { transform: scale(1.035); }
  .card .poster { transition: opacity .5s var(--ease); }
  .logo-wall .lg.is-in, .logo-wall .lg.is-out { animation: none; }
  .slide .rail .disc { animation: none; }
  .slide.is-playing .progress i { animation: none; width: 100%; }
  .playlist li:hover > *, .playlist li:hover::before, .playlist li.is-active > *, .playlist li.is-active::before { transform: none; }
}

/* ---- how it works: photo spots + merged pricing call ---------------- */
.shot {
  position: relative; margin: 0 0 22px; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  background: var(--coal-3); border: 1px solid var(--line);
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.step:hover .shot img, .bts .shot:hover img { transform: scale(1.04); }
.shot figcaption { display: none; }
.shot.is-empty img { display: none; }
.shot.is-empty figcaption {
  position: absolute; inset: 10px; display: grid; place-content: center; gap: 8px; text-align: center;
  border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--ink-3);
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
}
.shot.is-empty figcaption code { font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--ink-3); opacity: .8; }
.bts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }   /* three shots (Anh, Oct 9 2026), four before */
.bts .shot { margin: 0; aspect-ratio: 3 / 2; }
.bts .shot:nth-child(2n) { aspect-ratio: 3 / 2; }
@media (max-width: 680px) { .bts { grid-template-columns: 1fr; gap: 12px; } }

/* ---- hero: floating video stream ----------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero .wrap { position: relative; z-index: 2; }
.hero-float {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; padding: 0 24px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 86%, transparent 100%);
}
.hero-float::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to right, rgba(12,12,13,.90) 0%, rgba(12,12,13,.80) 34%, rgba(12,12,13,.58) 64%, rgba(12,12,13,.48) 100%),
    linear-gradient(to top, rgba(12,12,13,.85) 0%, transparent 38%);
}
.fcol { position: relative; overflow: visible; }
.ftile {
  position: absolute; left: 0; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: var(--coal-3); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 40px 70px -40px rgba(0,0,0,.95);
  will-change: transform; transform: translate3d(0, 0, 0);
}
.ftile > img, .ftile > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the still sits above the player: visible until the video is actually playing, and again while it rewinds */
.ftile > img { z-index: 1; opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s linear 0s; }
.ftile.is-live:not(.is-seam) > img { opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s linear .45s; }
.ftile iframe { position: absolute; left: 0; width: 100%; top: -22%; height: 144%; border: 0; pointer-events: none; }
.ftile .badge {
  position: absolute; left: 12px; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 8px;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.75));
}
.ftile .badge img { height: var(--h, 16px); width: auto; max-width: 120px; object-fit: contain; }
.ftile .badge .wm { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.ftile .badge .yc { flex: none; width: 15px; height: 15px; display: block; border-radius: 2px; }   /* YC companies: the orange square beside the logo (Anh, Oct 14 2026) */
.ftile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 45%); pointer-events: none; }
/* the stream also runs on tablets and phones: three lanes, then two, with a flatter and darker wash because the
   copy spans the full width there and sits over more of the stream (the hero is align-content: center under 1024px) */
@media (max-width: 1024px) {
  .hero-float { grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 16px; }
  .hero-float .fcol:nth-child(n+4) { display: none; }
  .hero-float::after { background: linear-gradient(to bottom, rgba(12,12,13,.80) 0%, rgba(12,12,13,.74) 45%, rgba(12,12,13,.90) 100%); }
}
@media (max-width: 680px) {
  /* phones: the stream runs the full hero height again and keeps drifting behind everything (Anh, Oct 10 2026:
     "moves up and down and stretches vertically like before"), two lanes with 22px gaps; the copy sits at the
     bottom of the first screen under a wash that is light over the top half and near-solid from the headline down,
     so the tiles flow through the whole screen but never read behind the words (his earlier note) */
  .hero { align-content: end; padding-top: calc(var(--nav-h) + 16px); padding-bottom: 44px; }
  .hero-float { grid-template-columns: repeat(2, 1fr); gap: 22px; padding: 0 22px; }
  .hero-float::after { background: linear-gradient(to bottom, rgba(12,12,13,.5) 0%, rgba(12,12,13,.3) 24%, rgba(12,12,13,.9) 42%, rgba(12,12,13,.97) 100%); }
  .hero-float .fcol:nth-child(n+3) { display: none; }
  .ftile { border-radius: 10px; }
  .ftile .badge { left: 9px; bottom: 7px; gap: 6px; }
  .ftile .badge img { max-width: 84px; }
  .ftile .badge .yc { width: 13px; height: 13px; }
}
/* the still sits exactly in its tile: no zoom (a GPU-scaled raster went soft at the edge) and no oversize pan
   (the picture then read bigger than its frame and shifted, Anh Oct 10 2026, "fits the container"). The lanes
   themselves drift, so the stream still moves. */
.ftile.is-still > img { inset: 0; width: 100%; height: 100%; animation: none; }

/* ---- how it works: one connected mosaic ----------------------------- */
/* the four step frames and the three-shot strip read as one picture with 3px coal seams */
.mosaic { display: grid; gap: 3px; border-radius: var(--radius); overflow: hidden; background: var(--coal); }
.mosaic .steps { gap: 3px; }
.mosaic .bts { gap: 3px; margin-top: 0; }
.mosaic .step, .mosaic .bts .shot { border-radius: 0; border: 0; }
.mosaic .step .shot { border-radius: 0; }
@media (max-width: 680px) and (max-height: 700px) {
  /* a 568px-tall phone puts the headline in the top fifth, so the stream is a faint texture there, not a backdrop */
  .hero-float::after { background: linear-gradient(to bottom, rgba(12,12,13,.6) 0%, rgba(12,12,13,.9) 20%, rgba(12,12,13,.97) 100%); }
}
@media (max-width: 680px) { .mosaic .bts { display: none; } }   /* phones: the three-shot strip after step 4 is hidden (Anh, Oct 10 2026) */
@media (max-width: 1024px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .step { aspect-ratio: 4 / 3; } }   /* wash stays near-solid under the copy and fades only over its last 56px, so the frame keeps its photo */

/* ---- "Filmed with": YC tag beside Y Combinator companies -------------- */
/* YC's own mark (orange square, white Y) beside each YC company: Anh wanted it orange (Oct 9 2026), and a logo
   glyph is exempt from the text-contrast floor that an orange text pill would fail. The only non-brand hue on the page. */
.logo-wall .lg .yc { flex: none; width: 14px; height: 14px; display: block; border-radius: 2px; }   /* .lg already spaces children with gap: 10px */
.logo-wall .lg.has-yc img { max-width: calc(100% - 24px); }   /* leave room for the mark and its gap */
@media (max-width: 680px) {
  .logo-wall .lg .yc { width: 12px; height: 12px; }
  /* phone slots are ~175px: the row never wraps, so the YC mark always sits to the right of the logo (Anh, Oct 9 2026);
     a wide wordmark shrinks to leave it room and a two-word name breaks onto two lines inside the row */
  .logo-wall.is-static .slot { height: auto; min-height: var(--slot-h); }
  .logo-wall.is-static .lg { width: 100%; flex-wrap: nowrap; }
  .logo-wall .lg img { max-width: 100%; }
  .logo-wall .lg.has-yc img { max-width: calc(100% - 22px); }   /* 12px mark + 10px gap */
  /* a two-line name shrink-wraps to its longest word (min-content) instead of keeping a max-content box with slack on
     both sides, and the mark beside it drops to the text's height with a tighter gap: Shepherd Robotics looked spread
     across the slot on phones (Anh, Oct 10 2026) */
  .logo-wall .lg .wm { font-size: 15px; white-space: normal; text-align: center; line-height: 1.1; min-width: 0; width: min-content; }
  .logo-wall .lg:has(.wm) { gap: 8px; }
  .logo-wall .lg:has(.wm) img { height: 30px; }
}

/* the smallest phones (320 to 360): a shorter lockup and a tighter pill so the nav never touches (site audit, Oct 10 2026) */
@media (max-width: 360px) {
  .logo { height: 18px; }
  .nav-links a.cta { padding: 8px 10px; letter-spacing: 0.08em; }
  .nav .wrap { gap: 10px; }
}

/* ---- the craft: two film panels, tilted and staggered, each labelled on its open side (Anh, Oct 13 2026) ----
   35mm-style cells: black film, light sprocket holes spaced to whole holes across the width, faint edge numbers and a
   rounded 16:9 frame playing three client clips joined into one loop; hover straightens a panel, click holds it */
.craft { overflow-x: clip; }   /* a tilted panel's corners must never widen the page */
.craft-stack { display: grid; }
.craft-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 22px; align-items: center; }
.craft-row .filmstrip { grid-column: 1 / span 7; grid-row: 1; transform: rotate(-2deg); }
.craft-row .craft-side { grid-column: 8 / span 5; grid-row: 1; justify-self: center; }   /* centred in the open space beside its panel, both labels alike */
.craft-row + .craft-row { position: relative; z-index: 1; margin-top: -56px; }   /* each panel tucks under the one above's lower edge */
.craft-row + .craft-row + .craft-row { z-index: 2; }
.craft-row.is-flip .filmstrip { grid-column: 6 / span 7; transform: rotate(1.6deg); }
.craft-row.is-flip .craft-side { grid-column: 1 / span 5; }
.craft-row:nth-child(3) .filmstrip { transform: rotate(-1.3deg); }   /* back on the left, but not the first panel's exact tilt */
.filmstrip {
  position: relative; background: #000; border-radius: 3px; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 44px 80px -36px rgba(0,0,0,.95);
  transition: transform .6s var(--ease);
}
.craft-row .filmstrip:hover, .craft-row .filmstrip:focus-visible { transform: rotate(0deg) scale(1.01); }
.filmstrip:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.craft-side .n { display: block; margin-bottom: 14px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.18em; color: var(--ink-3); }
.craft-side h3 { margin: 0; font-size: clamp(28px, 3.1vw, 46px); font-weight: 900; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
.cell {
  position: relative; padding: 40px 10px 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16'%3E%3Crect x='7' y='1.5' width='10' height='13' rx='2.5' fill='%23e9e6e1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16'%3E%3Crect x='7' y='1.5' width='10' height='13' rx='2.5' fill='%23e9e6e1'/%3E%3C/svg%3E");
  background-repeat: space no-repeat; background-size: 24px 16px; background-position: 0 8px, 0 calc(100% - 8px);   /* space: whole holes only, spread to the panel width */
}
.cell .edge {
  position: absolute; top: 26px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; line-height: 1; font-weight: 500; letter-spacing: .08em; color: rgba(233,230,225,.42); pointer-events: none;
}
.cell .edge i { width: 0; height: 0; border-left: 5px solid rgba(233,230,225,.42); border-top: 3px solid transparent; border-bottom: 3px solid transparent; margin-left: 10px; margin-right: auto; }
.cell .frame { position: relative; min-width: 0; aspect-ratio: 16 / 9; border-radius: 7px; overflow: hidden; background: #161616; }
.cell .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1024px) {
  .craft-row .filmstrip { grid-column: 1 / span 8; }
  .craft-row .craft-side { grid-column: 9 / span 4; }
  .craft-row.is-flip .filmstrip { grid-column: 5 / span 8; }
  .craft-row.is-flip .craft-side { grid-column: 1 / span 4; }
  .craft-row + .craft-row { margin-top: -36px; }
}
@media (max-width: 680px) {
  .craft-row { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .craft-side .n { margin-bottom: 8px; }
  .craft-row .craft-side, .craft-row.is-flip .craft-side { grid-column: 1; grid-row: 2; justify-self: start; }
  .craft-side h3 br { display: none; }   /* one line under the panel */   /* phones: the label sits under its panel (Anh) */
  .craft-row .filmstrip { grid-column: 1; grid-row: 1; transform: rotate(-1.2deg); }
  .craft-row.is-flip .filmstrip { grid-column: 1; grid-row: 1; transform: rotate(1.2deg); }
  .craft-row + .craft-row { margin-top: 56px; }
  .craft-row:nth-child(3) .filmstrip { transform: rotate(-1.2deg); }
  .cell { padding: 38px 8px 30px; }
}
@media (prefers-reduced-motion: reduce) { .filmstrip { transition: none; } }