/*
 * Toss Cam voxel interface layer
 *
 * The voxel language belongs to the product chrome: surfaces, icons, framing,
 * controls and decorative objects. Event covers, captured photographs, filter
 * examples and recap video remain smooth photographic media.
 */

:root {
  --voxel-ground: #0b0e11;
  --voxel-ground-deep: #07090b;
  --voxel-surface: #1b1d1d;
  --voxel-surface-high: #242626;
  --voxel-cream: #f2dfc2;
  --voxel-cream-muted: rgba(242, 223, 194, 0.7);
  --voxel-blue: #8fc7f2;
  --voxel-blue-high: #b8ddfa;
  --voxel-blue-low: #5e9dcc;
  --voxel-olive: #858759;
  --voxel-rose: #bd8e87;
  --voxel-edge: rgba(242, 223, 194, 0.22);
  --voxel-edge-soft: rgba(242, 223, 194, 0.11);
  --voxel-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  --voxel-shadow-small: 0 9px 20px rgba(0, 0, 0, 0.36);
  --voxel-radius: 20px;
  --voxel-radius-large: 28px;
  --voxel-radius-small: 13px;
}

html {
  background: var(--voxel-ground);
}

body {
  color: var(--voxel-cream-muted);
  background:
    radial-gradient(circle at 12% 7%, rgba(143, 199, 242, 0.1), transparent 24rem),
    radial-gradient(circle at 88% 96%, rgba(133, 135, 89, 0.09), transparent 28rem),
    linear-gradient(180deg, var(--voxel-ground-deep), var(--voxel-ground) 28rem);
}

body::after {
  position: fixed;
  z-index: -1;
  right: -5rem;
  bottom: -6rem;
  width: 24rem;
  height: 20rem;
  background:
    linear-gradient(90deg, transparent 25%, rgba(143, 199, 242, 0.035) 25% 50%, transparent 50% 75%, rgba(242, 223, 194, 0.025) 75%),
    linear-gradient(transparent 25%, rgba(242, 223, 194, 0.025) 25% 50%, transparent 50% 75%, rgba(143, 199, 242, 0.035) 75%);
  background-size: 4rem 4rem;
  content: "";
  opacity: 0.8;
  pointer-events: none;
  transform: rotate(-8deg);
  mask-image: radial-gradient(circle at center, #000, transparent 72%);
}

body,
button,
input,
select,
textarea {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display,
.film-heading h1,
.identity-title,
.account-title,
.album-intro h1,
.state-page h1,
.faq-sec h1,
.faq-sec h2 {
  color: var(--voxel-cream);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.34);
}

.label,
.eyebrow {
  color: var(--voxel-blue);
}

.brand img,
.ops-brand img,
.section-icon,
.film-icon img,
.state-page-mark,
.empty-roll img {
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.38));
}

.brand img,
.ops-brand img {
  width: 34px;
  height: 34px;
  mix-blend-mode: normal;
}

.brand span,
.ops-brand span {
  color: var(--voxel-cream);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* Navigation becomes a restrained floating game-world HUD. */
.nav,
.account-nav,
.ops-nav {
  background: linear-gradient(180deg, rgba(11, 14, 17, 0.96), rgba(11, 14, 17, 0.8));
  border-bottom: 1px solid var(--voxel-edge-soft);
  backdrop-filter: blur(18px) saturate(1.15);
}

.nav.scrolled {
  background: rgba(11, 14, 17, 0.94);
}

.nav-inner,
.account-nav-inner,
.ops-nav-inner {
  min-height: 72px;
}

.nav-cta,
.account-nav-primary,
.primary-action,
.develop-cta,
.btn:not(.secondary):not(.ghost),
.vf-cta b {
  color: #091017;
  background:
    linear-gradient(180deg, var(--voxel-blue-high), var(--voxel-blue) 62%, #79b4df);
  border: 1px solid rgba(214, 238, 255, 0.72);
  border-radius: var(--voxel-radius-small);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -4px 0 rgba(55, 113, 158, 0.3),
    0 9px 0 rgba(4, 8, 11, 0.62),
    0 14px 26px rgba(0, 0, 0, 0.35);
  font-weight: 700;
}

.nav-cta:hover,
.account-nav-primary:hover,
.primary-action:hover,
.develop-cta:hover,
.btn:not(.secondary):not(.ghost):hover,
.vf-cta:hover b {
  color: #05090c;
  background: linear-gradient(180deg, #d0ebff, #9fd2f7 62%, #82bce7);
  border-color: rgba(231, 246, 255, 0.9);
  transform: translateY(-1px);
}

.nav-cta:active,
.account-nav-primary:active,
.primary-action:active,
.develop-cta:active,
.btn:not(.secondary):not(.ghost):active,
.vf-cta:active b {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 rgba(55, 113, 158, 0.3),
    0 4px 0 rgba(4, 8, 11, 0.68),
    0 8px 16px rgba(0, 0, 0, 0.35);
  transform: translateY(4px);
}

.secondary-action,
.account-promo-action,
.provider-button,
.btn.secondary,
.btn.ghost,
.account-nav-link,
.ops-nav-link {
  color: var(--voxel-cream);
  background: linear-gradient(180deg, var(--voxel-surface-high), var(--voxel-surface));
  border: 1px solid var(--voxel-edge);
  border-radius: var(--voxel-radius-small);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -3px 0 rgba(0, 0, 0, 0.25),
    var(--voxel-shadow-small);
}

.secondary-action:hover,
.account-promo-action:hover,
.provider-button:hover,
.btn.secondary:hover,
.btn.ghost:hover,
.account-nav-link:hover,
.ops-nav-link:hover {
  color: var(--voxel-blue-high);
  border-color: rgba(143, 199, 242, 0.55);
  background: linear-gradient(180deg, #2a2d2d, #1d2020);
}

/* Landing: retain the photographic development effect inside a voxel frame. */
.hero-wrap {
  padding: 90px 16px 24px;
  background: transparent;
}

.hero-stage {
  max-width: 1480px;
  min-height: min(780px, calc(100vh - 112px));
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--voxel-edge);
  border-radius: var(--voxel-radius-large);
  box-shadow:
    inset 0 0 0 7px rgba(6, 8, 9, 0.42),
    inset 0 -8px 0 rgba(0, 0, 0, 0.22),
    var(--voxel-shadow);
}

@media (min-width: 1100px) {
  .hero-stage {
    height: min(
      calc(100svh - 96px),
      calc((100vw - 32px) * 0.558333),
      826px
    );
    min-height: 0;
  }
}

@media (min-width: 761px) and (max-width: 1099px) {
  .hero-stage {
    height: calc(100svh - 106px);
    min-height: 620px;
  }

  .hero-copy {
    padding: 0 clamp(24px, 3.5vw, 38px) clamp(24px, 3.5vw, 36px);
  }

  .hero-copy-panel {
    width: min(100%, 520px);
    padding: clamp(22px, 2.8vw, 28px);
  }

  .hero-copy-panel h1 {
    font-size: clamp(44px, 5.5vw, 56px);
  }
}

.hero-stage::before,
.identity-visual::before,
.join-art::before {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  width: 72px;
  height: 72px;
  background:
    linear-gradient(90deg, transparent 33%, rgba(143, 199, 242, 0.88) 33% 66%, transparent 66%),
    linear-gradient(transparent 33%, rgba(143, 199, 242, 0.88) 33% 66%, transparent 66%);
  border: 1px solid rgba(184, 221, 250, 0.35);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), var(--voxel-shadow-small);
  content: "";
  opacity: 0.82;
  pointer-events: none;
  transform: rotate(8deg);
}

.hero-copy {
  z-index: 4;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(28px, 3.5vw, 54px) clamp(28px, 3.5vw, 52px);
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.hero-copy-panel {
  width: min(100%, 560px);
  padding: clamp(24px, 2.5vw, 34px);
  background: linear-gradient(135deg, rgba(11, 14, 17, 0.87), rgba(20, 22, 23, 0.62));
  border: 1px solid rgba(242, 223, 194, 0.2);
  border-radius: 26px;
  box-shadow: var(--voxel-shadow);
  backdrop-filter: blur(7px);
}

.hero-copy-panel h1 {
  color: var(--voxel-cream);
  font-size: clamp(46px, 4.6vw, 62px);
  line-height: 0.98;
}

.hero-copy-panel .lead {
  margin-top: 16px;
  color: rgba(242, 223, 194, 0.77);
}

.hero-copy-panel .hero-ctas {
  margin-top: 24px;
  gap: 20px;
}

.how {
  background: transparent;
}

.how .strip {
  padding: 13px;
  background: linear-gradient(180deg, #252728, #161819);
  border: 1px solid var(--voxel-edge);
  border-radius: var(--voxel-radius);
  box-shadow: var(--voxel-shadow);
}

.strip-frames {
  overflow: hidden;
  border-radius: 12px;
}

.strip-frames img {
  border: 1px solid rgba(242, 223, 194, 0.16);
  border-radius: 10px;
}

.steps .step {
  min-height: 178px;
  padding: 24px;
  background: linear-gradient(145deg, rgba(36, 38, 38, 0.96), rgba(22, 24, 25, 0.96));
  border: 1px solid var(--voxel-edge-soft);
  border-radius: var(--voxel-radius);
  box-shadow: var(--voxel-shadow-small);
}

.step h3 {
  color: var(--voxel-cream);
}

.home-start-inner {
  padding: clamp(28px, 5vw, 56px);
  background:
    radial-gradient(circle at 92% 24%, rgba(143, 199, 242, 0.15), transparent 13rem),
    linear-gradient(145deg, #202324, #131617);
  border: 1px solid var(--voxel-edge);
  border-radius: var(--voxel-radius-large);
  box-shadow: var(--voxel-shadow);
}

.foot {
  border-top-color: var(--voxel-edge-soft);
}

/* Auth and account surfaces */
.identity-main {
  gap: clamp(24px, 4vw, 58px);
}

.identity-visual,
.identity-panel,
.account-promo,
.film-library,
.empty-library,
.account-surface .danger-zone {
  background: linear-gradient(145deg, rgba(36, 38, 38, 0.96), rgba(20, 22, 23, 0.98));
  border: 1px solid var(--voxel-edge);
  border-radius: var(--voxel-radius-large);
  box-shadow: var(--voxel-shadow);
}

.identity-visual {
  position: relative;
  padding: 10px;
}

.identity-visual img {
  border-radius: 20px;
}

.identity-visual::after {
  border-radius: 20px;
}

.identity-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 54px);
}

.voxel-auth-camera {
  position: absolute;
  top: -42px;
  right: -36px;
  width: clamp(116px, 14vw, 184px);
  height: auto;
  opacity: 0.8;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.42));
  image-rendering: auto;
  pointer-events: none;
}

.identity-panel > :not(.voxel-auth-camera) {
  position: relative;
  z-index: 1;
}

.identity-intro,
.account-summary,
.identity-footnote {
  color: var(--voxel-cream-muted);
}

.text-field,
.create-card input[type="text"],
.create-card input[type="datetime-local"],
.create-card select,
.join-panel input[type="text"],
.danger-form input,
.cover-form input[type="file"],
.admin-surface input,
.admin-surface select,
.admin-surface textarea {
  color: var(--voxel-cream);
  background: linear-gradient(180deg, #181a1b, #121415);
  border: 1px solid var(--voxel-edge);
  border-radius: 14px;
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.35),
    inset 0 -2px 0 rgba(242, 223, 194, 0.04);
}

.text-field:focus,
.create-card input:focus,
.create-card select:focus,
.join-panel input:focus,
.danger-form input:focus {
  border-color: var(--voxel-blue);
  box-shadow:
    0 0 0 3px rgba(143, 199, 242, 0.15),
    inset 0 3px 7px rgba(0, 0, 0, 0.35);
}

.account-hero {
  align-items: end;
  padding: 0 4px;
}

.account-promo {
  background:
    radial-gradient(circle at 88% 20%, rgba(143, 199, 242, 0.16), transparent 14rem),
    linear-gradient(145deg, #222526, #151718);
}

.film-library {
  padding: clamp(24px, 4vw, 42px);
}

.film-list-item {
  overflow: hidden;
  background: linear-gradient(145deg, #222425, #17191a);
  border: 1px solid var(--voxel-edge-soft);
  border-radius: 17px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

.film-list-item + .film-list-item {
  margin-top: 12px;
}

.film-list-link:hover {
  background: linear-gradient(145deg, #2a2d2e, #1c1f20);
}

.film-status::before {
  box-shadow: 0 0 0 4px rgba(143, 199, 242, 0.08);
}

.empty-roll {
  width: 156px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(143, 199, 242, 0.12), transparent 8rem),
    #111416;
}

.empty-roll img {
  width: 144px;
  height: 144px;
  max-width: none;
  opacity: 1;
  mix-blend-mode: normal;
  object-fit: contain;
  image-rendering: auto;
}

/* Creation form: a tactile control console, still a plain usable HTML form. */
.create-page-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 230px);
  align-items: center;
  gap: 28px;
  max-width: 760px;
}

.voxel-create-camera {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.48));
  image-rendering: auto;
}

.create-page-intro > div > p:last-child {
  max-width: 480px;
  margin-top: 16px;
  color: var(--voxel-cream-muted);
}

.create-page-main .create-card {
  max-width: 820px;
  padding: clamp(24px, 5vw, 54px);
  background:
    radial-gradient(circle at 100% 0, rgba(143, 199, 242, 0.12), transparent 16rem),
    linear-gradient(145deg, #202223, #131516);
  border: 1px solid var(--voxel-edge);
  border-radius: var(--voxel-radius-large);
  box-shadow: var(--voxel-shadow);
}

.create-progress,
.create-step-actions {
  display: none;
}

.create-step + .create-step {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--voxel-edge-soft);
}

.create-step-heading {
  margin-bottom: 26px;
}

.create-step-heading h2 {
  margin-top: 8px;
  color: var(--voxel-cream);
  font-size: clamp(32px, 5vw, 50px);
  line-height: 1;
}

.create-step-heading > p:last-child {
  max-width: 54ch;
  margin-top: 12px;
  color: var(--voxel-cream-muted);
}

.create-final-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 28px;
}

.create-final-actions .create-step-back {
  display: none;
}

.create-card.is-stepped .create-progress {
  display: block;
  margin-bottom: 34px;
}

.create-progress > p {
  margin-bottom: 12px;
}

.create-progress ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.create-progress ol::before {
  position: absolute;
  z-index: 0;
  top: 17px;
  right: 8%;
  left: 8%;
  height: 1px;
  background: var(--voxel-edge);
  content: "";
}

.create-progress li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: rgba(242, 223, 194, 0.42);
  font-size: 11px;
  text-align: center;
}

.create-progress li span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #242627, #151718);
  border: 1px solid var(--voxel-edge);
  border-radius: 10px;
  box-shadow: 0 6px 13px rgba(0, 0, 0, 0.32);
  font-size: 12px;
  font-weight: 700;
}

.create-progress li b {
  font-weight: 600;
}

.create-progress li.is-complete,
.create-progress li[aria-current="step"] {
  color: var(--voxel-cream);
}

.create-progress li.is-complete span {
  color: #081017;
  background: linear-gradient(180deg, #c2e3fa, #82bde7);
  border-color: rgba(211, 237, 255, 0.65);
}

.create-progress li[aria-current="step"] span {
  color: #081017;
  background: linear-gradient(180deg, var(--voxel-blue-high), var(--voxel-blue));
  border-color: rgba(221, 241, 255, 0.82);
  box-shadow:
    0 0 0 4px rgba(143, 199, 242, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.36);
}

.create-card.is-stepped .create-step[hidden] {
  display: none !important;
}

.create-card.is-stepped .create-step {
  min-height: 470px;
  margin: 0;
  padding: 0;
  border: 0;
  animation: voxel-step-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.create-card.is-stepped .create-step-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 30px;
}

.create-card.is-stepped .create-final-actions .create-step-back {
  display: inline-flex;
}

.create-step-next,
.create-step-back {
  min-height: 48px;
  padding: 11px 22px;
  border-radius: 13px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.create-step-next {
  color: #081017;
  background: linear-gradient(180deg, var(--voxel-blue-high), var(--voxel-blue) 65%, #79b4df);
  border: 1px solid rgba(214, 238, 255, 0.7);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.38),
    inset 0 -3px 0 rgba(55, 113, 158, 0.28),
    0 7px 0 rgba(4, 8, 11, 0.58);
}

.create-step-back {
  color: var(--voxel-cream);
  background: linear-gradient(180deg, var(--voxel-surface-high), var(--voxel-surface));
  border: 1px solid var(--voxel-edge);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.24), 0 7px 14px rgba(0, 0, 0, 0.28);
}

.create-step-next:hover,
.create-step-back:hover {
  border-color: var(--voxel-blue);
  transform: translateY(-1px);
}

@keyframes voxel-step-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.type-chips .chip {
  display: grid;
  min-width: 0;
  padding: 10px;
  gap: 8px;
  background: linear-gradient(180deg, #242627, #191b1c);
  border: 1px solid var(--voxel-edge-soft);
  border-radius: 18px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2), 0 6px 13px rgba(0, 0, 0, 0.22);
  text-align: left;
}

.type-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.type-chips .chip img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid rgba(242, 223, 194, 0.11);
  border-radius: 13px;
  background: #0b0e11;
  filter: none;
  image-rendering: auto;
}

.type-chips .chip span {
  padding: 2px 4px 4px;
  color: var(--voxel-cream);
  font-weight: 650;
}

.type-chips .chip:has(input:checked),
.type-chips .chip.active {
  color: var(--voxel-blue-high);
  background: linear-gradient(180deg, rgba(64, 92, 112, 0.72), rgba(34, 49, 60, 0.76));
  border-color: var(--voxel-blue);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 0 0 3px rgba(143, 199, 242, 0.1),
    0 8px 18px rgba(0, 0, 0, 0.3);
}

.filter-picker {
  padding: clamp(20px, 4vw, 34px);
  background: linear-gradient(145deg, rgba(30, 32, 33, 0.96), rgba(16, 18, 19, 0.96));
  border: 1px solid var(--voxel-edge-soft);
  border-radius: var(--voxel-radius);
}

.filter-selected-frame,
.filter-option-image {
  overflow: hidden;
  background: #0a0c0e;
  border: 1px solid var(--voxel-edge);
  border-radius: 18px;
  box-shadow: inset 0 0 0 5px rgba(7, 9, 11, 0.34), var(--voxel-shadow-small);
}

.filter-selected-frame img,
.filter-option-image img,
.album-cover,
.cover-preview,
.gallery img,
.camera-cta img.preview,
.filmroll .frame.filled img,
.recap-video {
  image-rendering: auto;
  filter: none;
}

.filter-option {
  background: linear-gradient(145deg, #222425, #17191a);
  border: 1px solid var(--voxel-edge-soft);
  border-radius: 17px;
  box-shadow: var(--voxel-shadow-small);
}

.filter-option:has(.filter-radio:checked) {
  background: linear-gradient(145deg, rgba(49, 71, 87, 0.9), rgba(24, 36, 44, 0.94));
  border-color: var(--voxel-blue);
}

.privacy-options,
.terms-option,
.consent-row {
  background: rgba(8, 10, 12, 0.34);
  border: 1px solid var(--voxel-edge-soft);
  border-radius: 14px;
}

/* Guest/host operational pages */
.ops-page {
  background:
    radial-gradient(circle at 50% -8rem, rgba(143, 199, 242, 0.1), transparent 33rem),
    linear-gradient(180deg, var(--voxel-ground-deep), var(--voxel-ground));
}

.film-heading {
  position: relative;
}

.film-heading::before {
  display: block;
  width: 42px;
  height: 8px;
  margin-bottom: 16px;
  background:
    linear-gradient(90deg, var(--voxel-blue) 0 28%, transparent 28% 36%, var(--voxel-blue) 36% 64%, transparent 64% 72%, var(--voxel-blue) 72%);
  border-radius: 3px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.34);
  content: "";
}

.card,
.join-panel,
.camera-column,
.capture-sidebar,
.countdown {
  background:
    linear-gradient(145deg, rgba(38, 40, 40, 0.97), rgba(20, 22, 23, 0.98));
  border: 1px solid var(--voxel-edge);
  border-radius: var(--voxel-radius-large);
  box-shadow: var(--voxel-shadow);
}

.card::before {
  background:
    linear-gradient(90deg, var(--voxel-blue) 0 18px, transparent 18px 25px, var(--voxel-cream) 25px 38px);
  border-radius: 3px;
  opacity: 0.72;
}

.join-art {
  position: relative;
  padding: 9px;
  overflow: hidden;
  background: linear-gradient(145deg, #272929, #17191a);
  border: 1px solid var(--voxel-edge);
  border-radius: var(--voxel-radius-large);
  box-shadow: var(--voxel-shadow);
}

.join-art > img {
  border-radius: 20px;
}

.join-art::after {
  border-radius: 20px;
}

.join-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 5vw, 48px);
}

.voxel-panel-camera {
  position: absolute;
  top: -38px;
  right: -32px;
  width: clamp(116px, 15vw, 174px);
  height: auto;
  opacity: 0.74;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.42));
  image-rendering: auto;
  pointer-events: none;
}

.join-panel > :not(.voxel-panel-camera) {
  position: relative;
  z-index: 1;
}

.camera-column,
.capture-sidebar {
  padding: clamp(20px, 4vw, 34px);
}

.camera-cta {
  background:
    radial-gradient(circle at 50% 46%, rgba(143, 199, 242, 0.12), transparent 11rem),
    linear-gradient(145deg, #1c1f20, #0e1113);
  border: 1px solid var(--voxel-edge);
  border-radius: var(--voxel-radius-large);
  box-shadow:
    inset 0 0 0 8px rgba(4, 6, 8, 0.34),
    var(--voxel-shadow);
}

.camera-cta::before,
.camera-cta::after {
  border-color: var(--voxel-blue);
  border-radius: 8px;
}

.camera-cta .shutter {
  background: linear-gradient(180deg, #f8e9d2, var(--voxel-cream) 65%, #d6bd98);
  border: 7px solid #111416;
  box-shadow:
    0 0 0 2px var(--voxel-blue),
    inset 0 3px 0 rgba(255, 255, 255, 0.55),
    inset 0 -6px 0 rgba(120, 93, 59, 0.2),
    0 10px 0 #080a0b,
    0 19px 30px rgba(0, 0, 0, 0.48);
}

.camera-cta .shutter:hover {
  background: linear-gradient(180deg, #fff4e3, #f7e4c8 65%, #dfc6a0);
  transform: translateY(-2px);
}

.filmroll .frame {
  overflow: hidden;
  background: linear-gradient(145deg, #262829, #151718);
  border: 1px solid var(--voxel-edge);
  border-radius: 14px;
  box-shadow: var(--voxel-shadow-small);
}

.stat {
  background: linear-gradient(145deg, #242627, #17191a);
  border: 1px solid var(--voxel-edge-soft);
  border-radius: 16px;
  box-shadow: var(--voxel-shadow-small);
}

.stat .num {
  color: var(--voxel-cream);
}

.qr-box {
  aspect-ratio: 1;
  padding: clamp(54px, 12vw, 90px);
  background: #17191a url("/assets/voxel/qr-invitation-frame.webp") center / cover no-repeat;
  border: 1px solid var(--voxel-edge);
  border-radius: 24px;
  box-shadow:
    inset 0 0 0 7px rgba(5, 7, 9, 0.28),
    var(--voxel-shadow);
}

.qr-box img {
  width: min(100%, 238px);
  padding: 9px;
  background: #fff;
  border: 0;
  image-rendering: auto;
  filter: none;
  border-radius: 7px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  transform: none;
}

.code-pill,
.badge,
.capacity-stamp {
  color: var(--voxel-blue-high);
  background: rgba(143, 199, 242, 0.1);
  border-color: rgba(143, 199, 242, 0.43);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.purchase-option {
  background: linear-gradient(145deg, #252728, #17191a);
  border: 1px solid var(--voxel-edge-soft);
  border-radius: 16px;
  box-shadow: var(--voxel-shadow-small);
}

.purchase-option.preferred {
  border-color: var(--voxel-blue);
}

.cover-preview,
.album-cover,
.recap-video {
  padding: 7px;
  background: #17191a;
  border: 1px solid var(--voxel-edge);
  border-radius: var(--voxel-radius);
  box-shadow: var(--voxel-shadow);
}

.album-toolbar {
  padding: 20px;
  background: rgba(27, 29, 29, 0.72);
  border: 1px solid var(--voxel-edge-soft);
  border-radius: var(--voxel-radius);
}

.gallery {
  gap: 18px;
}

.gallery figure {
  overflow: hidden;
  background: linear-gradient(145deg, #252728, #17191a);
  border: 1px solid var(--voxel-edge);
  border-radius: var(--voxel-radius);
  box-shadow: var(--voxel-shadow);
}

.gallery figure > img {
  width: calc(100% - 14px);
  margin: 7px 7px 0;
  border-radius: 14px;
}

.gallery .album-photo-trigger img {
  width: 100%;
  margin: 0;
  border-radius: 0;
}

.gallery figcaption {
  color: var(--voxel-cream);
}

.album-viewer-close,
.album-viewer-nav {
  border-color: var(--voxel-edge);
  border-radius: 13px;
  box-shadow: var(--voxel-shadow-small);
}

.album-viewer-stage img {
  image-rendering: auto;
  filter: none;
}

.countdown {
  padding: clamp(30px, 6vw, 70px);
}

.countdown::before {
  background: linear-gradient(90deg, var(--voxel-rose), var(--voxel-blue), var(--voxel-olive));
}

.state-page {
  max-width: 720px;
  margin-top: 10vh;
  padding: clamp(34px, 7vw, 72px);
  background: linear-gradient(145deg, #242627, #151718);
  border: 1px solid var(--voxel-edge);
  border-radius: var(--voxel-radius-large);
  box-shadow: var(--voxel-shadow);
}

.state-page-mark {
  width: 92px;
  height: 92px;
}

/* Marketing subpages and admin inherit the same material language. */
.faq-sec,
.pricing-page,
.closing {
  position: relative;
}

.price-tile,
.add-on-strip,
.faq-item,
.admin-section {
  background: linear-gradient(145deg, rgba(36, 38, 38, 0.96), rgba(20, 22, 23, 0.98));
  border-color: var(--voxel-edge-soft);
}

.price-tile,
.add-on-strip,
.admin-section {
  border: 1px solid var(--voxel-edge);
  border-radius: var(--voxel-radius);
  box-shadow: var(--voxel-shadow-small);
}

.privacy-consent {
  background:
    radial-gradient(circle at 100% 0, rgba(143, 199, 242, 0.12), transparent 13rem),
    linear-gradient(145deg, #222425, #151718);
  border-color: var(--voxel-edge);
  border-radius: var(--voxel-radius-large);
  box-shadow: var(--voxel-shadow);
}

@media (max-width: 760px) {
  body::after {
    right: -9rem;
    bottom: -7rem;
    opacity: 0.52;
  }

  .nav-inner,
  .account-nav-inner,
  .ops-nav-inner {
    min-height: 64px;
  }

  .brand img,
  .ops-brand img {
    width: 30px;
    height: 30px;
  }

  .brand span,
  .ops-brand span {
    font-size: 14px;
    letter-spacing: 0.09em;
  }

  .hero-wrap {
    padding: 74px 9px 16px;
  }

  .hero-stage {
    height: calc(100svh - 90px);
    min-height: 575px;
    border-radius: 22px;
  }

  .hero-stage::before,
  .identity-visual::before,
  .join-art::before {
    width: 52px;
    height: 52px;
    border-radius: 13px;
  }

  .hero-copy {
    padding: 0 14px 22px;
  }

  .hero-copy-panel {
    width: min(100%, 390px);
    padding: 18px;
    background: linear-gradient(180deg, rgba(11, 14, 17, 0.42), rgba(11, 14, 17, 0.76));
    border-color: rgba(242, 223, 194, 0.16);
    border-radius: 20px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(3px);
  }

  .hero-copy-panel h1 {
    font-size: clamp(40px, 11.5vw, 48px);
    line-height: 0.96;
  }

  .hero-copy-panel .lead {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.45;
  }

  .hero-copy-panel .hero-ctas {
    margin-top: 16px;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .hero-copy-panel .vf-cta {
    padding: 5px;
  }

  .hero-copy-panel .vf-cta b {
    padding: 11px 15px;
    font-size: 13px;
    white-space: nowrap;
  }

  .hero-copy-panel .arrow-link {
    font-size: 13px;
    white-space: nowrap;
  }

  .steps .step {
    min-height: 0;
  }

  .identity-panel,
  .account-promo,
  .film-library,
  .empty-library,
  .create-page-main .create-card,
  .card,
  .join-panel,
  .camera-column,
  .capture-sidebar,
  .countdown,
  .state-page {
    border-radius: 20px;
  }

  .create-page-intro {
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 14px;
  }

  .filter-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .type-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery {
    gap: 11px;
  }
}

@media (max-width: 480px) {
  .hero-copy-panel .hero-ctas {
    align-items: flex-start;
  }

  .filter-options {
    grid-template-columns: 1fr;
  }

  .type-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qr-box {
    padding: clamp(48px, 15vw, 76px);
  }
}

@media (max-width: 340px) {
  .hero-copy-panel .hero-ctas {
    gap: 8px;
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-cta,
  .account-nav-primary,
  .primary-action,
  .develop-cta,
  .btn,
  .vf-cta b,
  .film-list-link {
    transition: none !important;
  }
}