:root {
  --ink: #f5f5f2;
  --bg: #0b0b0b;
  --gutter: clamp(16px, 4vw, 56px);
  --glass: rgb(255 255 255 / 0.08);
  --glass-edge: rgb(255 255 255 / 0.16);
  --accent: #4d7dff;
  --section-gap: clamp(120px, 22vh, 280px);
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter Tight", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Landing: the video fills the whole viewport */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Portrait screens: keep the print head in frame */
@media (max-aspect-ratio: 1/1) {
  .hero__video { object-position: 62% center; }
}

/* Keeps the headline readable over bright frames */
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0) 55%),
    linear-gradient(to bottom, rgb(0 0 0 / 0.35), rgb(0 0 0 / 0) 25%);
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px var(--gutter);
  z-index: 10;
  pointer-events: none;
}

.topbar > * { pointer-events: auto; }

a { color: inherit; text-decoration: none; }

/* Glass bar: one frosted pill over the video. It holds the nav at the top of the
   page; on scroll it narrows as the nav fades, then widens back out as the ask bar.
   --w (bar width), --full (nav width), --n and --a (nav/ask opacity) come from the
   script in index.html. */
.bar {
  position: relative;
  width: var(--w, 100%);
  height: 58px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 8px 32px rgb(0 0 0 / 0.25);
}

/* The bar's blur sits on a layer behind it, not on the bar: an element with a backdrop-filter
   limits its children's blur to itself, so the phone menu and account submenu (glass panels inside
   the bar) would show the page behind them sharp instead of frosted */
.bar::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  pointer-events: none;
}

/* Clip the contents only mid-morph, so the phone menu can drop below the bar at rest */
.bar.is-morphing { overflow: hidden; }

.nav {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--full, 100%);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 22px;
  opacity: var(--n, 1);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin-right: auto;
}

.wordmark__logo { flex: none; width: auto; height: 17px; color: currentColor; }

.nav__links {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__links a {
  display: block;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: rgb(245 245 242 / 0.82);
  transition: background-color 0.2s, color 0.2s;
}

.nav__links a:hover,
.nav__links a:focus-visible {
  background: rgb(255 255 255 / 0.1);
  color: var(--ink);
}

.nav__cta {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s, background-color 0.2s;
}

.nav__cta:hover { background: #fff; transform: translateY(-1px); }

/* Signed in (js/nav-account.js): the main button becomes the account chip, a button that opens
   the account submenu. Name, then the round picture with the account type as a pill on its edge */
.nav__cta.nav__cta--account {
  gap: 10px;
  padding: 3px 3px 7px 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.nav__cta.nav__cta--account:hover,
.nav.is-account-open .nav__cta--account { background: rgb(255 255 255 / 0.08); transform: none; }
.nav__name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 600; }
.nav__pfp { position: relative; display: grid; place-items: center; flex: none; }
.nav__tier {
  position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  padding: 1px 6px; border-radius: 999px;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5;
  white-space: nowrap; color: #0b0f1a; background: #c9ced8;
  box-shadow: 0 0 0 2px #10162a;
}
.nav__tier--pro { background: #9db4ff; }
.nav__tier--pilot { background: #7fe0c2; }
.nav__tier--admin { background: #f0b46a; }
.nav__avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.25);
}
.nav__avatar--initial {
  display: grid; place-items: center;
  background: linear-gradient(140deg, #6b8dff, #3a5be0); color: #fff; font-size: 15px; font-weight: 600;
}
.nav__cta--account:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* The account submenu: a glass panel under the chip, so the bar never grows. Its items
   (Account, Download, My Printer, Dashboard) also sit at the bottom of the phone menu */
.nav__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 24px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.25);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.nav.is-account-open .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu a {
  display: block;
  padding: 12px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: rgb(245 245 242 / 0.82);
  transition: background-color 0.2s, color 0.2s;
}
.nav__menu a:hover,
.nav__menu a:focus-visible { background: rgb(255 255 255 / 0.1); color: var(--ink); }
/* The phone menu's copy of the account items: only in the phone panel */
.nav__links .nav__acct { display: none; }

/* The arrow slides in on hover */
.nav__arrow {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-4px);
  transition: max-width 0.25s ease, margin-left 0.25s ease, opacity 0.2s, transform 0.25s ease;
}

.nav__cta:hover .nav__arrow,
.nav__cta:focus-visible .nav__arrow {
  max-width: 1.2em;
  margin-left: 6px;
  opacity: 1;
  transform: none;
}

.nav a:focus-visible,
.nav__toggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.nav__toggle { display: none; }

/* Narrow screens: the three links move into a dropdown glass panel */
@media (max-width: 720px) {
  .nav { padding-left: 18px; }

  .nav__cta { padding: 9px 14px; font-size: 14px; }

  .nav__toggle {
    display: grid;
    place-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.1);
    cursor: pointer;
  }

  .nav__toggle span {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--ink);
    transition: transform 0.2s;
  }

  .nav.is-open .nav__toggle span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .nav.is-open .nav__toggle span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

  .nav__links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    padding: 8px;
    border-radius: 24px;
    background: var(--glass);
    border: 1px solid var(--glass-edge);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  }

  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; }

  .nav__links a { padding: 14px 16px; font-size: 17px; }

  /* Signed in: the account items close the phone menu, under a hairline */
  .nav__links .nav__acct { display: block; }
  .nav__links li:not(.nav__acct) + .nav__acct {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--glass-edge);
  }

  /* The account submenu spans the bar like the phone menu */
  .nav__menu { left: 0; min-width: 0; }
  .nav__menu a { padding: 14px 16px; font-size: 17px; }
  .nav__name { max-width: 9ch; }
}

@media (max-width: 360px) {
  .nav__cta { display: none; }
}

/* Ask bar: the same pill once it has widened back out */
.ask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 22px;
  opacity: var(--a, 0);
}

.ask[inert] { pointer-events: none; }

.bar:has(.ask:focus-within) {
  border-color: rgb(255 255 255 / 0.32);
  background: rgb(255 255 255 / 0.12);
}

.nav[inert] { pointer-events: none; }

.ask__input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  outline: none;
  text-overflow: ellipsis; /* the placeholder is longer than a phone's bar: it ends in … instead of a cut letter */
}

.ask__input::placeholder { color: rgb(245 245 242 / 0.6); }
@media (max-width: 420px) {
  .ask__input::placeholder { font-size: 14px; }
}

.ask__go {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}

.ask__go:hover { background: #fff; transform: translateX(2px); }

/* Add a model: the paperclip, the chip naming what's attached, and the bar lit while a file is dragged over */
.ask__attach {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin-left: -10px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgb(245 245 242 / 0.7);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.ask__attach:hover { background: rgb(255 255 255 / 0.1); color: var(--ink); }
.ask__attach:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.ask__file {
  flex: none;
  max-width: 40%;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(77 125 255 / 0.28);
  border: 1px solid rgb(77 125 255 / 0.55);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar.is-drop { border-color: var(--accent); background: rgb(77 125 255 / 0.18); }
.ask__go:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 720px) {
  .ask { padding-left: 18px; }
}

/* Browsers without blur get a more solid bar so text stays legible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bar, .nav__links, .nav__menu { background: rgb(20 20 20 / 0.85); }
}

/* Headline, buttons and (on touch screens) the Agent hint, stacked bottom-left */
.hero__content {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(32px, 8vh, 96px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 3vh, 32px);
}

.hero__title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(38px, 6.8vw, 108px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Transparent pill buttons: white outline and text over the video */
.hero__btn {
  padding: 14px 26px;
  border-radius: 999px;
  border: 1.5px solid rgb(255 255 255 / 0.75);
  background: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.hero__btn:hover { background: rgb(255 255 255 / 0.12); border-color: #fff; }
.hero__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 480px) {
  .hero__btn { padding: 12px 20px; font-size: 15px; }
}

/* Thesis: centered statement right after the hero */
.thesis {
  display: grid;
  place-items: center;
  padding: calc(var(--section-gap) * 1.4) var(--gutter) var(--section-gap);
  text-align: center;
  background: linear-gradient(to bottom, var(--bg), #0b1020 70%, var(--bg));
}

.thesis__inner { max-width: 960px; }

.thesis--page { min-height: 100vh; min-height: 100svh; }

.thesis__title {
  margin: 0 0 32px;
  font-weight: 500;
  font-size: clamp(36px, 6.4vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.thesis__body {
  max-width: 60ch;
  margin: 0 auto;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: rgb(245 245 242 / 0.7);
}

.reveal,
.reveal-group > * {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 1s ease;
}

.reveal-group > * { transition-delay: calc(var(--i, 0) * 120ms); }

.reveal.is-visible,
.reveal-group.is-visible > * { opacity: 1; transform: none; filter: none; }

/* Closing call to action after the hardware section */
.cta { padding: var(--section-gap) var(--gutter) 0; }

.cta__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 112px) clamp(24px, 6vw, 96px);
  border-radius: 32px;
  text-align: center;
  background: linear-gradient(160deg, #13204a, #0b1024 60%);
  border: 1px solid rgb(255 255 255 / 0.06);
}

/* A slow glow drifting across the card */
.cta__card::before {
  content: "";
  position: absolute;
  inset: -20% 15% 30%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(77 125 255 / 0.35), transparent);
  filter: blur(40px);
  animation: drift 18s ease-in-out infinite alternate;
}

.cta__title {
  margin: 0 0 20px;
  font-weight: 500;
  text-wrap: balance;
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.cta__body {
  max-width: 52ch;
  margin: 0 0 36px;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: rgb(245 245 242 / 0.7);
}

.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* The home card has no body text: the buttons sit right under the title */
.cta__title + .cta__actions { margin-top: 16px; }

.cta__btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s, transform 0.2s;
}

.cta__btn:hover { background: rgb(255 255 255 / 0.14); }
.cta__btn--primary { background: var(--ink); color: var(--bg); border-color: transparent; }
.cta__btn--primary:hover { background: #fff; transform: translateY(-1px); }
.cta__btn:hover .nav__arrow,
.cta__btn:focus-visible .nav__arrow { max-width: 1.2em; margin-left: 6px; opacity: 1; transform: none; }
.cta__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 480px) {
  .cta__actions { flex-direction: column; align-self: stretch; }
  .cta__btn { justify-content: center; }
}

/* Logos: press, then customers, as still rows. The .marquee styles below now only drive the customer photo gallery */
/* Right after the hero; the software panel below supplies the next gap */
.logos { padding: var(--section-gap) 0 0; }

.logos__label {
  margin: 0 0 24px;
  padding: 0 var(--gutter);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(245 245 242 / 0.5);
}

.logos .reveal + .logos__label { margin-top: clamp(56px, 9vh, 96px); }

/* Home: one short press row between the hero and Software, so it sits close to both
   instead of a full section gap on each side */
.hero + .logos { padding-top: clamp(48px, 8vh, 96px); }
.logos + .panels { padding-top: clamp(56px, 10vh, 120px); }

/* Press and customer logos: one still, centered row each (wrapping on narrow screens), every logo
   recolored to the same white. Press logos link to their story. */
.logos__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 3vw, 40px) clamp(32px, 4vw, 64px);
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  list-style: none;
}

.logos__item a { display: block; padding: 8px 0; }

.logos__item img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: opacity 0.2s;
}

.logos__item--wide img { height: 20px; max-width: 260px; }
/* University logos: wordmark-shaped, so a bit shorter and wider than the press logos */
.logos__item--org img { height: 32px; max-width: 200px; }
.logos__item a:hover img,
.logos__item a:focus-visible img { opacity: 1; }
.logos__item a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

.logos__word {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: rgb(245 245 242 / 0.85);
}
.logos__word a { padding: 0; color: inherit; transition: color 0.2s; }
.logos__word a:hover { color: var(--ink); }

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 48s linear infinite;
}

.marquee--reverse .marquee__track { animation-direction: reverse; animation-duration: 56s; }
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__list {
  display: flex;
  align-items: center;
  gap: clamp(48px, 7vw, 96px);
  margin: 0;
  padding: 0 clamp(24px, 3.5vw, 48px);
  list-style: none;
}

.marquee__item { flex: none; }
.marquee__item a { display: block; padding: 12px 0; }

.marquee__item img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  /* Recolor every logo to the same soft white */
  filter: brightness(0) invert(1);
  opacity: 0.6;
  transition: opacity 0.2s;
}

.marquee__item--wide img { height: 22px; max-width: 280px; }
/* University logos: wordmark-shaped, so a bit shorter and wider than the press logos */
.marquee__item--org img { height: 34px; max-width: 220px; }
.marquee__item a:hover img,
.marquee__item a:focus-visible img { opacity: 1; }

.marquee__word {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: rgb(245 245 242 / 0.6);
}

@keyframes marquee { to { transform: translateX(-50%); } }

/* Customers: a headline over two rows of square printer photos, sliding opposite ways.
   They reuse the logo carousel, so the photo rows undo its white recolor and logo sizing. */
.gallery { --tile: clamp(180px, 18vw, 320px); padding: clamp(56px, 10vh, 120px) 0 0; }

/* The photo rows, with the headline laid over their middle */
.gallery__stage { position: relative; }

/* Over the photos: a dark fade, strongest in the middle, keeps the words readable while the
   photos still show toward the edges. Clicks and swipes pass through to the rows. */
.gallery__head {
  position: absolute;
  inset: 0;
  z-index: 2;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vh, 36px);
  pointer-events: none;
  background: radial-gradient(ellipse 62% 75% at 50% 50%, rgb(11 11 11 / 0.88) 35%, rgb(11 11 11 / 0.4) 100%);
}

/* Big and full width in balanced lines, with the footer wordmark's look brightened for the photos:
   gradient words that rise in one by one, a soft blue glow drifting behind, and a light band
   sweeping across. Words, not letters, so the lines can wrap. The sweep is a second copy
   (.gallery__shine) laid on top, so the two must stay identical in markup and type settings. */
.gallery__words { position: relative; width: 100%; }

.gallery__glow {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 15%;
  bottom: 15%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(77 125 255 / 0.22), transparent);
  filter: blur(40px);
  animation: drift 18s ease-in-out infinite alternate;
}

.gallery__title,
.gallery__shine {
  margin: 0;
  padding: 0 var(--gutter);
  text-align: center;
  text-wrap: balance;
  font-size: clamp(28px, 4.6vw, 96px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}

.gallery__title span,
.gallery__shine span {
  display: inline-block;
  /* Room for the descenders (y) inside the clipped background */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gallery__title span {
  background-image: linear-gradient(to bottom, rgb(245 245 242) 30%, rgb(170 190 250 / 0.8));
  opacity: 0;
  transform: translateY(35%);
  filter: blur(8px);
  transition: opacity 1.2s ease, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1), filter 1.2s ease;
  transition-delay: calc(var(--i) * 90ms);
}

.gallery__title.is-visible span { opacity: 1; transform: none; filter: none; }

.gallery__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.gallery__shine span {
  background: linear-gradient(100deg, transparent 42%, rgb(255 255 255 / 0.28) 50%, transparent 58%) no-repeat;
  background-size: 300% 100%;
  background-position: 120% 0;
  background-attachment: fixed;
  -webkit-background-clip: text;
  background-clip: text;
}

.gallery__title.is-visible + .gallery__shine { opacity: 1; transition: opacity 0.6s ease 1.6s; }
.gallery__title.is-visible + .gallery__shine span { animation: sweep 9s ease-in-out 1.6s infinite; }

/* Each half of the loop holds the six photos twice, so it is wider than even very wide screens */
.marquee--photos .marquee__track { animation-duration: 128s; }
.marquee--photos.marquee--reverse .marquee__track { animation-duration: 144s; }
.marquee--photos + .marquee--photos { margin-top: 16px; }
/* Half the gap on each side, so the seam between the two copies matches the gap */
.marquee--photos .marquee__list { gap: 16px; padding: 0 8px; }

.marquee--photos .marquee__item img {
  width: var(--tile);
  height: var(--tile);
  max-width: none;
  border-radius: 20px;
  border: 1px solid rgb(255 255 255 / 0.08);
  object-fit: cover;
  filter: none;
  opacity: 1;
}

/* It follows the photos closely rather than a full section gap below them */
.gallery + .cta { padding-top: clamp(56px, 10vh, 120px); }

/* Mid-site panels: rounded gradient cards with space between them */
/* The Software card and the Hardware section share one width (capped and centered the same way), and
   the Hardware copy starts where the card's copy does: --panel-pad is the card's inner padding */
:root { --panel-pad: clamp(32px, 6vw, 96px); }

.panels {
  display: grid;
  gap: var(--section-gap);
  max-width: calc(1680px + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--section-gap) var(--gutter) 0;
}

.panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  min-height: min(82vh, 820px);
  padding: var(--panel-pad);
  border-radius: 32px;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translateY(48px) scale(0.98);
  transition: opacity 1.2s ease, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.panel.is-visible { opacity: 1; transform: none; }

.panel--software { background: linear-gradient(135deg, #0f1a3d, #0a0f1f 60%); }

.panel__eyebrow {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: #9db4ff;
}

.panel__title {
  margin: 0 0 20px;
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.panel__body {
  max-width: 46ch;
  margin: 0 0 28px;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: rgb(245 245 242 / 0.7);
}

.panel__link {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.2s;
}

.panel__link:hover { background: rgb(255 255 255 / 0.14); }
.panel__link:hover .nav__arrow,
.panel__link:focus-visible .nav__arrow { max-width: 1.2em; margin-left: 6px; opacity: 1; transform: none; }
.panel__link:focus-visible, .footer a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.panel__link--primary { background: var(--ink); color: var(--bg); border-color: transparent; }
.panel__link--primary:hover { background: #fff; }

/* Software panel: the Agent line under the title, the two buttons, and the free / pricing note */
.panel__kicker {
  margin: -8px 0 20px;
  font-size: clamp(22px, 2.5vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #8fb0ff;
}
.panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.panel__pro { margin: 20px 0 0; font-size: 14px; color: rgb(245 245 242 / 0.6); }
.panel__pro a { color: var(--ink); font-weight: 600; white-space: nowrap; }
.panel__pro a:hover { text-decoration: underline; text-underline-offset: 3px; }

.panel__points {
  display: grid;
  gap: 10px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.panel__points li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: rgb(245 245 242 / 0.8);
}

.panel__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* Software: one big stage (Philips-branch's Agent section layout). The slicing propeller fills it,
   a shade keeps the copy readable bottom-left, and the Agent's example asks play top-right. */
.sw { display: grid; gap: 0; }

.sw__stage {
  position: relative;
  isolation: isolate;
  min-height: min(82vh, 760px);
  display: grid;
  align-items: end;
  padding: var(--panel-pad);
  border-radius: 32px;
  border: 1px solid var(--glass-edge);
  background: radial-gradient(ellipse 60% 70% at 72% 40%, rgb(40 80 200 / 0.35), transparent 70%), linear-gradient(135deg, #0f1a3d, #0a0f1f 60%);
  overflow: hidden;
}

.sw__view {
  position: absolute;
  inset: 0 0 0 34%;
  z-index: -2;
  /* The plate fades in from the left, so it never meets the copy with a hard edge */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30%);
  mask-image: linear-gradient(to right, transparent, #000 30%);
}
.sw__view canvas { display: block; width: 100%; height: 100%; }

/* Darker toward the bottom-left, where the copy sits */
.sw__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to top right, rgb(10 15 31 / 0.92) 18%, rgb(10 15 31 / 0.35) 50%, transparent 70%);
}

.sw__copy { max-width: 720px; }
.sw__eyebrow { margin: 0 0 14px; font-size: clamp(14px, 1vw, 16px); font-weight: 600; color: #9db4ff; }
.sw__title {
  margin: 0 0 16px;
  font-size: clamp(32px, 3.6vw, 54px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
}
.sw__title span { color: #a9bcff; }
.sw__lead { margin: 0 0 28px; font-size: clamp(17px, 1.4vw, 21px); color: rgb(245 245 242 / 0.8); }
.sw__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sw__note { margin: 18px 0 0; font-size: 14px; color: rgb(245 245 242 / 0.6); }
.sw__note a { color: var(--ink); font-weight: 600; }
.sw__note a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The example asks: not buttons, a picture of the Agent at work. They change on their own. */
.sw__asks {
  position: absolute;
  top: var(--panel-pad);
  right: var(--panel-pad);
  width: min(320px, 36%);
  margin: 0;
  /* A soft, borderless backing so the chat stands apart from whatever plays behind it (the 3D
     view now, B-roll later): a dark frosted pane, no outline */
  padding: 18px 20px 16px;
  border-radius: 22px;
  background: rgb(8 11 22 / 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.28);
}
/* Each new ask comes in like a chat: the request slides up as a bubble, then the changes it made
   appear one by one under it. Nothing fades out first. */
.sw__asks.is-entering .sw__ask { animation: sw-bubble 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.sw__asks.is-entering .sw__changes li { animation: sw-row 0.35s ease both; animation-delay: calc(380ms + var(--k, 0) * 140ms); }
@keyframes sw-bubble { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
@keyframes sw-row { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .sw__asks.is-entering .sw__ask, .sw__asks.is-entering .sw__changes li { animation: none; }
}

.sw__ask {
  margin: 0 0 14px 28px;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  background: rgb(255 255 255 / 0.1);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}

.sw__changes { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.sw__changes li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: rgb(245 245 242 / 0.7); }
.sw__changes li span:first-of-type { flex: 1; }
.sw__changes s { color: rgb(245 245 242 / 0.4); text-decoration-color: rgb(245 245 242 / 0.4); }
.sw__changes b { color: var(--ink); font-weight: 600; }

.sw__who { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: rgb(245 245 242 / 0.55); }
.sw__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.sw__pips { position: absolute; right: 20px; bottom: 18px; display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.sw__pips li { width: 5px; height: 5px; border-radius: 50%; background: rgb(255 255 255 / 0.25); transition: background-color 0.3s; }
.sw__pips li.is-on { background: var(--ink); }

/* Compatibility: one line under the stage, Philips-branch style */
.sw__compat {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  padding: 22px var(--panel-pad) 0;
  font-size: 15px;
  color: rgb(245 245 242 / 0.65);
}
.sw__compat p { margin: 0; }
.sw__compat__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.sw__compat a { color: var(--ink); font-weight: 600; white-space: nowrap; }
.sw__compat a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 860px) {
  .sw__stage { min-height: 0; display: block; padding: 0; border-radius: 24px; }
  .sw__view { position: relative; inset: auto; height: 46svh; z-index: 0; -webkit-mask-image: none; mask-image: none; }
  .sw__shade { display: none; }
  .sw__asks { position: relative; top: auto; right: auto; width: auto; margin: -56px 16px 0; }
  .sw__copy { padding: 28px 24px 28px; }
  .sw__compat { padding-inline: 4px; }
}

/* Hardware: copy scrolls on the left, the printer stays pinned on the right
   and turns once over the whole section (js/hardware.js) */
/* Capped and centered like the Software card, so the printer stays close to the copy on wide screens */
.hardware {
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 48px);
  max-width: calc(1680px + 2 * var(--gutter));
  margin-inline: auto;
  padding: calc(var(--section-gap) * 0.4) calc(var(--gutter) + var(--panel-pad)) 0;
}

.hardware__stage {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.hardware__stage::before {
  content: "";
  position: absolute;
  inset: 15% 5%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(77 125 255 / 0.22), transparent);
  filter: blur(30px);
}

/* Fills the screen between the fixed top bar and the "Drag to explore" hint, and reaches into the right
   margin so the printer can be bigger */
.hardware__view { width: calc(100% + var(--panel-pad)); height: calc(100% - 96px - 56px); margin-top: 96px; margin-bottom: 56px; justify-self: start; }

/* Horizontal drags spin the printer; vertical swipes still scroll the page */
.hardware__stage { cursor: grab; touch-action: pan-y; user-select: none; }
.hardware__stage.is-dragging { cursor: grabbing; }

.hardware__hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 12px;
  color: rgb(245 245 242 / 0.45);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.3s;
}

.hardware__stage.is-dragging .hardware__hint { opacity: 0; }

@media (hover: none) {
  .hardware__hint { opacity: 1; }
}
.hardware__view canvas { display: block; width: 100%; height: 100%; }

.hardware__steps { grid-column: 1; grid-row: 1; }

/* Each step is plain text over the background, close together: the printer beside them still makes
   its full turn over the section's scroll, just in less of it. The first sits level with the printer. */
.hardware__step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 500px;
  margin: 0 0 12vh;
  scroll-margin-top: 120px;
}
.hardware__step:first-child { margin-top: 14vh; }
.hardware__step:last-child { margin-bottom: 14vh; }
.hardware__step .panel__body:last-child { margin-bottom: 0; }

/* Printer features: the number that sets each axis apart, then what it does for the print */
.hardware__specs {
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hardware__spec {
  display: grid;
  grid-template-columns: clamp(72px, 7vw, 96px) 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid rgb(255 255 255 / 0.1);
}

.hardware__spec:last-child { border-bottom: 1px solid rgb(255 255 255 / 0.1); }

.hardware__value {
  font-size: clamp(26px, 2.4vw, 40px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #8fb0ff;
}

.hardware__spec h3 { margin: 0 0 4px; font-size: clamp(17px, 1.25vw, 20px); font-weight: 600; }
.hardware__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-self: stretch;
  margin: 0 0 24px;
}
.hardware__fact {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(255 255 255 / 0.03);
}
.hardware__fact--wide { grid-column: 1 / -1; }
.hardware__fact dt { margin: 0 0 6px; font-size: 13px; color: rgb(245 245 242 / 0.55); }
.hardware__fact dd { margin: 0; font-size: clamp(24px, 2.2vw, 36px); font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: #8fb0ff; }

.hardware__materials { margin: 0 0 28px; }
.hardware__materials:last-child { margin-bottom: 0; }
.hardware__materials p { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: rgb(245 245 242 / 0.55); }
.hardware__materials ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hardware__materials li { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--glass-edge); font-size: 14px; font-weight: 600; }

.hardware__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hardware__spec p { margin: 0; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; color: rgb(245 245 242 / 0.7); }

@media (max-width: 860px) {
  .hardware { grid-template-columns: 1fr; padding-inline: var(--gutter); }
  .hardware__stage { grid-column: 1; height: 62svh; top: 0; }
  .hardware__view { width: 100%; }
  .hardware__steps { grid-column: 1; grid-row: 2; position: relative; z-index: 1; margin-top: -10svh; }
  .hardware__step,
  .hardware__step:first-child,
  .hardware__step:last-child {
    min-height: 0;
    margin-top: 0;
    margin-bottom: 20svh;
    padding: 24px;
    border-radius: 24px;
    background: rgb(11 14 24 / 0.72);
    border: 1px solid var(--glass-edge);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
}

/* Visual placeholder: soft glows drifting slowly */
.panel__visual {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 520px;
  justify-self: center;
  border-radius: 28px;
  background: rgb(255 255 255 / 0.03);
  border: 1px solid rgb(255 255 255 / 0.06);
  overflow: hidden;
}

.panel__visual span {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  animation: drift 16s ease-in-out infinite alternate;
}

.panel__visual span:nth-child(1) { width: 60%; height: 60%; left: 10%; top: 15%; background: rgb(77 125 255 / 0.55); }
.panel__visual span:nth-child(2) { width: 45%; height: 45%; right: 8%; bottom: 10%; background: rgb(120 90 255 / 0.4); animation-duration: 20s; animation-delay: -6s; }
.panel__visual span:nth-child(3) { width: 35%; height: 35%; right: 25%; top: 8%; background: rgb(90 200 255 / 0.3); animation-duration: 24s; animation-delay: -12s; }

@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8%, -6%) scale(1.1); }
  100% { transform: translate(-6%, 8%) scale(0.95); }
}

@media (max-width: 860px) {
  .panel { grid-template-columns: 1fr; border-radius: 24px; min-height: 0; }
  .panel__visual { max-width: 360px; }
}

/* Footer */
.footer {
  margin-top: var(--section-gap);
  padding: clamp(56px, 8vw, 96px) var(--gutter) 28px;
  border-top: 1px solid rgb(255 255 255 / 0.08);
  overflow: hidden;
}

/* Home: the closing card sits close to the footer instead of a full section gap above it */
main:has(> #get-started:last-child) + .footer { margin-top: clamp(56px, 8vh, 96px); }

.footer__top {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
  gap: 48px;
}

.footer__home { display: inline-block; color: inherit; }
.footer__logo { display: block; width: 64px; height: auto; color: var(--ink); }

.footer__brand p {
  max-width: 28ch;
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgb(245 245 242 / 0.55);
}

.footer__map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.footer__map h2 {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: rgb(245 245 242 / 0.5);
}

.footer__map ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.footer a { color: rgb(245 245 242 / 0.8); transition: color 0.2s; }
.footer a:hover { color: var(--ink); }

/* Social links under the tagline (icons from Bootstrap Icons, MIT) */
.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 20px 0 0 -9px;
  padding: 0;
  list-style: none;
}

.footer__social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: rgb(245 245 242 / 0.55);
  transition: color 0.2s, background-color 0.2s;
}

.footer__social a:hover { color: var(--ink); background: rgb(255 255 255 / 0.1); }
.footer__social svg { display: block; width: 18px; height: 18px; }

/* The big wordmark at the very bottom */
/* The big wordmark at the very bottom: muted letters that rise in one by one,
   a slow light sweep across them, and a soft glow drifting behind */
.footer__brandmark {
  position: relative;
  margin: clamp(64px, 10vw, 140px) 0 0;
  isolation: isolate;
}

.footer__glow {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 10%;
  bottom: 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(77 125 255 / 0.22), transparent);
  filter: blur(40px);
  animation: drift 18s ease-in-out infinite alternate;
}

.footer__mark {
  position: relative;
  margin: 0;
  font-weight: 600;
  font-size: clamp(56px, 15.5vw, 280px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  white-space: pre;
  text-align: center;
  /* Letters are separate boxes, so kerning is off; the sweep copy matches that */
  font-kerning: none;
}

.footer__mark span {
  display: inline-block;
  /* Room for the descender of the "y" inside the clipped background */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  background: linear-gradient(to bottom, rgb(245 245 242 / 0.4) 25%, rgb(120 150 230 / 0.12));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(35%);
  filter: blur(8px);
  transition: opacity 1.2s ease, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1), filter 1.2s ease;
  transition-delay: calc(var(--i) * 70ms);
}

.footer__mark.is-visible span { opacity: 1; transform: none; filter: none; }

/* Light sweep: the same letters laid out again on top, each lit by one moving
   bright band; background-attachment keeps the band continuous across letters */
.footer__shine {
  position: absolute;
  inset: 0;
  margin: 0;
  font-weight: 600;
  font-size: clamp(56px, 15.5vw, 280px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  white-space: pre;
  text-align: center;
  font-kerning: none;
  pointer-events: none;
  opacity: 0;
}

.footer__shine span {
  display: inline-block;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  color: transparent;
  background: linear-gradient(100deg, transparent 42%, rgb(255 255 255 / 0.28) 50%, transparent 58%) no-repeat;
  background-size: 300% 100%;
  background-position: 120% 0;
  background-attachment: fixed;
  -webkit-background-clip: text;
  background-clip: text;
}

.footer__mark.is-visible + .footer__shine {
  opacity: 1;
  transition: opacity 0.6s ease 1.6s;
}

.footer__mark.is-visible + .footer__shine span { animation: sweep 9s ease-in-out 1.6s infinite; }

@keyframes sweep {
  0% { background-position: 120% 0; }
  45%, 100% { background-position: -20% 0; }
}

.footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 0.08);
  font-size: 13px;
  color: rgb(245 245 242 / 0.5);
}

@media (max-width: 1100px) {
  .footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .footer__map { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero { background: url("videos/mainvid-poster.jpg") center / cover no-repeat; }
  .reveal, .reveal-group > *, .panel { opacity: 1; transform: none; filter: none; transition: none; }
  .marquee__track, .panel__visual span, .footer__glow, .cta__card::before { animation: none; }
  .footer__mark span { opacity: 1; transform: none; filter: none; transition: none; }
  .footer__shine { display: none; }
  .gallery__title span { opacity: 1; transform: none; filter: none; transition: none; }
  .gallery__shine { display: none; }
  .gallery__glow { animation: none; }
  .marquee__track { flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee__list[aria-hidden="true"] { display: none; }
  .marquee__list { flex-wrap: wrap; justify-content: center; row-gap: 24px; }
  /* Photo rows stay one row each, swiped or scrolled sideways, rather than wrapping into a tall stack */
  .marquee--photos { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: none; }
  .marquee--photos .marquee__track { width: max-content; flex-wrap: nowrap; }
  .marquee--photos .marquee__list { flex-wrap: nowrap; padding: 0 var(--gutter); }
}

/* The call-booking (Calendly) links are for signed-in visitors only (Alex 10/28). Hidden until
   js/nav-account.js marks <html class="is-signed-in">; any calendly.com link is covered as well. */
html:not(.is-signed-in) .if-signed-in,
html:not(.is-signed-in) a[href*="calendly.com"] { display: none !important; }

/* New Unlayered Slicer version notice, top right under the bar (js/nav-account.js) */
.update-note {
  position: fixed; top: 84px; right: max(16px, var(--gutter)); z-index: 60;
  width: min(340px, calc(100% - 32px)); padding: 18px 18px 16px;
  border-radius: 20px; border: 1px solid rgb(255 255 255 / 0.14);
  background: linear-gradient(160deg, rgb(24 32 58 / 0.96), rgb(12 16 30 / 0.97));
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.5); color: #f5f5f2; font-family: inherit;
  animation: update-note-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes update-note-in { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .update-note { animation: none; } }
.update-note h2 { margin: 0 28px 6px 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.update-note p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.45; color: rgb(245 245 242 / 0.7); }
.update-note__x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.06); color: rgb(245 245 242 / 0.7); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.update-note__x:hover { background: rgb(255 255 255 / 0.14); color: #fff; }
.update-note__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.update-note__btn { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.16); background: rgb(255 255 255 / 0.06); color: #f5f5f2; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.update-note__btn:hover { background: rgb(255 255 255 / 0.14); }
.update-note__btn--primary { background: #f5f5f2; color: #0b0f1a; border-color: transparent; }
.update-note__btn--primary:hover { background: #fff; }
.update-note__btn:focus-visible, .update-note__x:focus-visible { outline: 2px solid #f5f5f2; outline-offset: 2px; }
/* Just a line and the close button (js/account-deleted.js) */
.update-note--plain { padding: 16px 48px 16px 18px; }
.update-note--plain p { margin: 0; font-size: 14px; color: #f5f5f2; }

/* ---------- Cookie consent (js/cookie-consent.js) ----------
   The old app's banner in its new look (feat/admin-new-look 3421efc): a dark glass card floating at
   the bottom, pill buttons. Under the pop-ups (css/overlay.css, z-index 100) so a sheet is never covered. */
.cookie-consent {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 90;
  transform: translateX(-50%);
  width: min(980px, calc(100% - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px 16px 22px;
  border-radius: 22px;
  border: 1px solid rgb(255 255 255 / 0.14);
  background: linear-gradient(160deg, rgb(24 32 58 / 0.94), rgb(12 16 30 / 0.96));
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 24px 70px rgb(0 0 0 / 0.5);
  color: var(--ink);
  font-family: "Inter Tight", system-ui, -apple-system, sans-serif;
  animation: cookie-consent-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes cookie-consent-in { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (prefers-reduced-motion: reduce) { .cookie-consent { animation: none; } }
.cookie-consent__text { margin: 0; max-width: 680px; color: rgb(245 245 242 / 0.68); font-size: 13px; line-height: 1.55; }
.cookie-consent__text a { color: #9db4ff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cookie-consent__actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-consent__btn {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.16);
  background: rgb(255 255 255 / 0.07);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.cookie-consent__btn:hover { background: rgb(255 255 255 / 0.14); }
.cookie-consent__btn--primary { background: var(--ink); border-color: transparent; color: #0b0f1a; }
.cookie-consent__btn--primary:hover { background: #fff; }
.cookie-consent__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 720px) {
  .cookie-consent { flex-direction: column; align-items: stretch; gap: 12px; }
  .cookie-consent__btn { flex: 1; }
}
@media print { .cookie-consent { display: none; } }