:root {
  color-scheme: dark;
  --ink: #f7f4eb;
  --ink-muted: rgba(247, 244, 235, 0.68);
  --panel: rgba(9, 12, 10, 0.48);
  --panel-strong: rgba(9, 12, 10, 0.74);
  --line: rgba(255, 255, 255, 0.24);
  --shadow: rgba(0, 0, 0, 0.34);
  --belief-bg: #f2ece0;
  --belief-ink: #22231f;
  --brand-font-size: clamp(2.5rem, 3.375vw, 3.2rem);
  --brand-ar-midpoint-shift: clamp(0.1065rem, 0.1438vw, 0.1363rem);
  --scene-vignette-bottom-alpha: 0.46;
  --scene-vignette-top-alpha: 0.18;
  --barn-viewport-height: 100vh;
  --barn-media-viewport-height: 106vh;
  --barn-edge-viewport-height: var(--barn-viewport-height);
  --barn-edge-media-viewport-height: var(--barn-media-viewport-height);
  --barn-edge-bleed-top: 0px;
  --barn-edge-bleed-bottom: 0px;
  /* Mobile Safari status-bar tint (sampled per scene by
     scripts/player/chrome-tint.mjs). Default approximates the day_clear sky. */
  --barn-chrome-top-color: #8fa2b3;
  --barn-scroll-height: calc(var(--barn-viewport-height) + var(--barn-viewport-height));
  --barn-visual-viewport-offset-top: 0px;
  --barn-active-scene-poster: url("./assets/house-base.png");
  --belief-reveal-percent: 0%;
  --belief-reveal-y: calc(100vh + var(--belief-reveal-feather));
  --belief-reveal-feather: clamp(64px, 12vh, 132px);
  --scene-media-width: max(106vw, calc(var(--barn-media-viewport-height) * 16 / 9));
  --scene-media-height: max(var(--barn-media-viewport-height), calc(106vw * 9 / 16));
  --scene-media-anchor-x: calc(50% - var(--brand-ar-midpoint-shift));
  --house-roof-tip-x-offset: -48%;
  --motion-press: 110ms;
  --motion-hover: 140ms;
  --motion-control: 220ms;
  --motion-content-out: 160ms;
  --motion-content-in: 280ms;
  --motion-readout-reveal: 650ms;
  --motion-readout-retire: 240ms;
  --motion-scene: 650ms;
  --motion-loader: 600ms;
  --motion-ease-enter: cubic-bezier(0.2, 0.92, 0.22, 1);
  --motion-ease-exit: cubic-bezier(0.4, 0, 0.7, 0.1);
  --motion-ease-fade: cubic-bezier(0.22, 1, 0.36, 1);
}

@supports (height: 100svh) {
  :root {
    --barn-viewport-height: 100svh;
    --barn-media-viewport-height: 106svh;
  }
}

@supports (height: 100lvh) {
  :root {
    --barn-scroll-height: calc(100lvh + 100lvh);
  }
}

@supports (height: 100dvh) {
  :root {
    --barn-viewport-height: 100dvh;
    --barn-media-viewport-height: 106dvh;
  }
}

:root[data-barn-visual-viewport="active"] {
  --barn-viewport-height: var(--barn-visual-viewport-height);
  --barn-media-viewport-height: var(--barn-visual-viewport-media-height);
  --barn-scroll-height: calc(var(--barn-visual-viewport-height) + var(--barn-visual-viewport-height));
}

:root[data-barn-edge-bleed="active"] {
  --barn-viewport-height: var(--barn-edge-viewport-height);
  --barn-media-viewport-height: var(--barn-edge-media-viewport-height);
  --barn-scroll-height: calc(var(--barn-edge-viewport-height) + var(--barn-edge-viewport-height));
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  overscroll-behavior: none;
  background: #101411;
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html {
  overflow-y: auto;
}

html.landing-page {
  background: var(--belief-bg);
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  min-width: 320px;
}

body.landing-body {
  background: var(--belief-bg);
}

button {
  font: inherit;
}

[hidden] {
  display: none !important;
}

.glass-backdrop-root {
  position: relative;
  min-width: 320px;
  min-height: var(--barn-scroll-height);
  isolation: isolate;
}

.experience {
  position: fixed;
  inset: 0;
  z-index: 1;
  isolation: isolate;
  min-width: 320px;
  min-height: var(--barn-viewport-height);
  height: var(--barn-viewport-height);
  overflow: hidden;
  outline: none;
  background: #101411;
}

.scroll-pages {
  position: relative;
  z-index: 6;
  min-height: var(--barn-scroll-height);
  pointer-events: none;
}

.scroll-page {
  min-height: var(--barn-viewport-height);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.scroll-page--hero {
  background: transparent;
  pointer-events: none;
}

.belief-section {
  --belief-copy-fit-font-size: 2.05rem;
  --belief-copy-fit-width: 28ch;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding:
    max(96px, calc(env(safe-area-inset-top) + 44px))
    max(24px, env(safe-area-inset-right))
    max(124px, calc(env(safe-area-inset-bottom) + 72px))
    max(24px, env(safe-area-inset-left));
  color: var(--ink);
  background: transparent;
}

.mobile-join-section {
  display: none;
}

.belief-section__blur,
.belief-section__blur-scrim,
.belief-section__blur-layer {
  position: absolute;
  pointer-events: none;
}

.belief-section__blur {
  inset: 0;
  z-index: 0;
  overflow: hidden;
  contain: paint;
  visibility: hidden;
}

.belief-section.is-blur-active .belief-section__blur {
  visibility: visible;
}

.belief-section__blur-scrim {
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(10, 13, 11, 0) 0%,
      rgba(10, 13, 11, 0.07) 18%,
      rgba(10, 13, 11, 0.21) 50%,
      rgba(10, 13, 11, 0.59) 100%
    );
  mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.36) 14%, #000 32%, #000 100%);
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.36) 14%, #000 32%, #000 100%);
}

.belief-section__blur-layer {
  --belief-layer-blur: 2px;
  --belief-layer-start: 0%;
  --belief-layer-mid: 18%;
  --belief-layer-end: 36%;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  background: transparent;
  backdrop-filter: blur(var(--belief-layer-blur));
  -webkit-backdrop-filter: blur(var(--belief-layer-blur));
  mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent var(--belief-layer-start),
      rgba(0, 0, 0, 0.56) var(--belief-layer-mid),
      #000 var(--belief-layer-end),
      #000 100%
    );
  -webkit-mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent var(--belief-layer-start),
      rgba(0, 0, 0, 0.56) var(--belief-layer-mid),
      #000 var(--belief-layer-end),
      #000 100%
    );
  transform: translateZ(0);
}

.belief-section__blur-layer--1 {
  --belief-layer-blur: 1.5px;
  --belief-layer-start: 0%;
  --belief-layer-mid: 12%;
  --belief-layer-end: 30%;
}

.belief-section__blur-layer--3 {
  --belief-layer-blur: 4.5px;
  --belief-layer-start: 22%;
  --belief-layer-mid: 44%;
  --belief-layer-end: 68%;
}

.belief-section__blur-layer--6 {
  --belief-layer-blur: 10.5px;
  --belief-layer-start: 52%;
  --belief-layer-mid: 74%;
  --belief-layer-end: 96%;
}

.belief-section__copy,
.mobile-join-section__copy {
  position: relative;
  z-index: 1;
  width: min(var(--belief-copy-fit-width), 100%);
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--belief-copy-fit-font-size);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: 0;
  text-align: left;
  text-wrap: pretty;
  hyphens: none;
}

.belief-section__copy strong,
.mobile-join-section__copy strong {
  display: block;
  margin-top: 0.74em;
  font-weight: 700;
}

/* Join mode swaps the short mission statement for the longer recruiting copy.
   It keeps the intro's exact typography — same font, justified centred measure,
   colour and shading — and just renders as stacked paragraphs. The copy-fit
   script sizes it to the scene like it does the mission statement. */
.belief-section__copy .belief-para,
.mobile-join-section__copy .belief-para {
  display: block;
}

.belief-section__copy .belief-para + .belief-para,
.mobile-join-section__copy .belief-para + .belief-para {
  margin-top: 0.74em;
}

/* The join copy closes on the careers email, styled like the old "Come build
   Barn." line — bold, block, same fitted size as the body, left-aligned — but
   clickable. It inherits colour/size from .belief-section__copy strong. */
.belief-section__copy a,
.mobile-join-section__copy a {
  color: inherit;
  text-decoration: none;
  /* The copy inherits pointer-events:none from the section (so the text never
     blocks the scene behind), so re-enable it on the link itself. */
  pointer-events: auto;
  transition: opacity var(--motion-hover) ease;
}

.belief-section__copy a:hover,
.belief-section__copy a:focus-visible,
.mobile-join-section__copy a:hover,
.mobile-join-section__copy a:focus-visible {
  opacity: 0.82;
  outline: none;
}

/* Stay-in-touch email capture — sits below the belief copy. Colours key off
   currentColor so it reads on both the desktop dark scene (light ink) and the
   mobile cream paper page (dark ink). */
.belief-subscribe {
  --belief-subscribe-bottom: clamp(96px, 13vh, 140px);
  --belief-subscribe-anchor-height: 150px;
  position: absolute;
  top: calc(100% - var(--belief-subscribe-bottom) - var(--belief-subscribe-anchor-height));
  left: 0;
  right: 0;
  bottom: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: min(92vw, 30ch);
  margin-inline: auto;
  pointer-events: auto;
  transition:
    opacity var(--motion-control) var(--motion-ease-enter),
    transform var(--motion-control) var(--motion-ease-enter),
    visibility 0s linear 0s;
}

.belief-subscribe__switcher {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 44px;
  overflow: visible;
}

.belief-subscribe [data-belief-panel] {
  grid-area: 1 / 1;
  position: absolute;
  inset: 0;
  width: 100%;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  filter: blur(2px);
  pointer-events: none;
  transform: scale(0.988);
  transform-origin: center top;
  will-change: opacity, filter, transform;
}

.belief-subscribe [data-belief-panel][data-state="active"] {
  position: relative;
  inset: auto;
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  pointer-events: auto;
  transform: scale(1);
}

.belief-subscribe [data-belief-panel][data-state="incoming"],
.belief-subscribe [data-belief-panel][data-state="outgoing"] {
  position: relative;
  inset: auto;
  visibility: visible;
}

.belief-subscribe [data-belief-panel][data-state="outgoing"] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

/* Join panel is now a single "email us" prompt in place of the old resume
   dropper — a plain mailto link that inherits the scene ink colour. */
.belief-subscribe__careers {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 44px;
}

.belief-subscribe__careers-link {
  color: currentColor;
  font-size: 1.18rem;
  font-weight: 520;
  line-height: 1.32;
  text-decoration: none;
  opacity: 0.88;
  transition: opacity var(--motion-hover) ease;
}

.belief-subscribe__careers-link:hover,
.belief-subscribe__careers-link:focus-visible {
  opacity: 1;
  outline: none;
}

/* Join mode is informational: the email lives in the copy as its closing line,
   so the subscribe form fades and drifts away rather than popping out. It stays
   absolutely positioned (out of flow), so the copy still centres like the intro;
   visibility flips off after the fade to drop it from the tab order. */
.belief-subscribe[data-mode="join"] {
  opacity: 0;
  transform: translateY(10px);
  /* Sit behind the copy so the (invisible) form can never hit-test over the
     careers link, whatever its inner panel states say. */
  z-index: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--motion-content-out) var(--motion-ease-exit),
    transform var(--motion-content-out) var(--motion-ease-exit),
    visibility 0s linear var(--motion-content-out);
}

/* The active subscribe panel re-enables pointer-events/visibility on its email
   input + label, so even faded-out in join mode those invisible controls would
   hit-test over the careers link (stealing clicks on part of the address). The
   [data-state] selector outranks the active-panel rule so this decisively wins. */
.belief-subscribe[data-mode="join"] [data-belief-panel],
.belief-subscribe[data-mode="join"] [data-belief-panel][data-state],
.belief-subscribe[data-mode="join"] .belief-subscribe__button,
.belief-subscribe[data-mode="join"] input {
  pointer-events: none;
}

.belief-subscribe .action-field--line::before {
  background: color-mix(in srgb, currentColor 30%, transparent);
}

.belief-subscribe .action-field--line::after {
  background: color-mix(in srgb, currentColor 82%, transparent);
}

.belief-subscribe .action-field--line input {
  min-height: 44px;
  padding: 8px 0 6px;
  color: currentColor;
  caret-color: currentColor;
  text-shadow: none;
  text-align: center;
}

.belief-subscribe .action-field--line input::placeholder {
  color: color-mix(in srgb, currentColor 52%, transparent);
}

.belief-subscribe__button {
  appearance: none;
  align-self: center;
  min-height: 38px;
  padding: 3px 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: currentColor;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 520;
  letter-spacing: 0.01em;
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto;
  opacity: 0.88;
  transition: opacity var(--motion-hover) ease;
}

.belief-subscribe__button:hover {
  opacity: 1;
}

.belief-subscribe__button:focus-visible {
  outline: 2px solid color-mix(in srgb, currentColor 58%, transparent);
  outline-offset: 3px;
}

.belief-subscribe__feedback {
  margin: 0;
  min-height: 1.05em;
  font-size: 0.82rem;
  line-height: 1.2;
  text-align: center;
  color: color-mix(in srgb, currentColor 72%, transparent);
}

.belief-subscribe__feedback:empty {
  min-height: 0;
}

.belief-subscribe__feedback[data-status="error"] {
  color: #e5615a;
}

.belief-subscribe__sent {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 400;
  line-height: 1.28;
  text-align: center;
  text-wrap: balance;
  color: currentColor;
  display: none;
}

.belief-subscribe[data-state="submitting"] {
  opacity: 0.7;
}

.belief-subscribe[data-state="sent"] .belief-subscribe__switcher,
.belief-subscribe[data-state="sent"] .belief-subscribe__feedback,
.belief-subscribe[data-state="sent"] .belief-subscribe__button {
  display: none;
}

.belief-subscribe[data-state="sent"] .belief-subscribe__sent {
  display: block;
}

@media (hover: none) and (pointer: coarse) {
  .belief-subscribe {
    --belief-subscribe-anchor-height: 156px;
  }

  .belief-subscribe__button {
    min-height: 50px;
    padding-inline: 18px;
  }
}

.experience::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(0 0 0 / var(--scene-vignette-top-alpha)), rgba(0, 0, 0, 0) 28%),
    linear-gradient(0deg, rgb(0 0 0 / var(--scene-vignette-bottom-alpha)), rgba(0, 0, 0, 0) 34%);
}

.loading-poster,
.loading-video,
.scene-video,
.fallback-image,
.scene-still {
  position: absolute;
  top: 50%;
  left: var(--scene-media-anchor-x);
  width: var(--scene-media-width);
  height: var(--scene-media-height);
  object-fit: cover;
  object-position: 50% 50%;
  transform: translate3d(var(--house-roof-tip-x-offset), -50%, 0);
  user-select: none;
  pointer-events: none;
}

.loading-poster,
.experience[data-media-profile="portrait"] .loading-video,
.experience[data-media-profile="portrait"] .scene-video,
.experience[data-media-profile="portrait"] .fallback-image,
.experience[data-media-profile="portrait"] .scene-still {
  object-position: 50% 50%;
}

.experience[data-selected-media-profile="portrait"] .scene-video,
.experience[data-selected-media-profile="portrait"] .fallback-image,
.experience[data-selected-media-profile="portrait"] .scene-still,
.experience[data-loading-profile="portrait"] .loading-video,
.experience[data-loading-profile="portrait"] .loading-poster {
  left: 50%;
  width: max(106vw, calc(var(--barn-media-viewport-height) * 9 / 16));
  height: max(var(--barn-media-viewport-height), calc(106vw * 16 / 9));
  transform: translate3d(-50%, -50%, 0);
}

.experience[data-media-profile="mobile"] .loading-video,
.experience[data-media-profile="mobile"] .scene-video,
.experience[data-media-profile="mobile"] .fallback-image,
.experience[data-media-profile="mobile"] .scene-still {
  object-position: 50% 50%;
}

.experience[data-media-profile="tablet"] .loading-video,
.experience[data-media-profile="tablet"] .scene-video,
.experience[data-media-profile="tablet"] .fallback-image,
.experience[data-media-profile="tablet"] .scene-still {
  object-position: 50% 50%;
}

.experience[data-media-profile="desktop"] .loading-video,
.experience[data-media-profile="desktop"] .scene-video,
.experience[data-media-profile="desktop"] .fallback-image,
.experience[data-media-profile="desktop"] .scene-still {
  object-position: 50% 50%;
}

.loading-poster,
.loading-video {
  /* The selected scene is prepared at full opacity during the loader hold.
     Keep the pencil surface above it so this surface's fade is the visible
     handoff instead of an opaque scene appearing in a single frame. */
  z-index: 3;
  opacity: 0;
}

.loading-poster {
  background: #e9e3d4;
  filter: saturate(0.2) contrast(1.12) brightness(1.04);
}

.loading-video {
  background: #e9e3d4;
  filter: saturate(0.2) contrast(1.12) brightness(1.04);
}

.loading-poster.is-visible,
.loading-video.is-visible {
  opacity: 1;
}

.scene-stack {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  isolation: isolate;
  background: #000;
  pointer-events: none;
  mask-image:
    linear-gradient(
      180deg,
      #000 0,
      #000 calc(var(--belief-reveal-y) - var(--belief-reveal-feather)),
      rgba(0, 0, 0, 0.42) var(--belief-reveal-y),
      transparent calc(var(--belief-reveal-y) + var(--belief-reveal-feather)),
      transparent 100%
    );
  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000 0,
      #000 calc(var(--belief-reveal-y) - var(--belief-reveal-feather)),
      rgba(0, 0, 0, 0.42) var(--belief-reveal-y),
      transparent calc(var(--belief-reveal-y) + var(--belief-reveal-feather)),
      transparent 100%
    );
  will-change: mask-image;
}

.scene-video,
.fallback-image,
.scene-still {
  z-index: 0;
  opacity: 0;
  /* Additive interpolation keeps normalized multi-surface weights at full
     luminance while an interrupted crossfade is retargeted. The isolated
     scene stack provides a true-black blend backdrop, then composites the
     finished result normally over the experience. */
  mix-blend-mode: plus-lighter;
  will-change: opacity;
}

:root[data-barn-pencil-mask="disabled"] .scene-stack {
  mask-image: none;
  -webkit-mask-image: none;
}

.scene-video {
  filter: saturate(1.03) contrast(1.02);
}

.scene-video.is-visible,
.fallback-image.is-visible,
.scene-still.is-visible {
  opacity: 1;
}

.loading-video::-webkit-media-controls,
.loading-video::-webkit-media-controls-start-playback-button,
.scene-video::-webkit-media-controls,
.scene-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none;
}

.brand {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 14;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--brand-font-size);
  font-weight: 380;
  letter-spacing: 0.05em;
  transition: color var(--motion-control) ease;
}

.brand.is-on-belief {
  color: rgba(255, 255, 255, 0.9);
}

.scene-readout {
  position: fixed;
  /* Centered directly beneath the BARN wordmark (same top anchor + its font
     height + a small gap). */
  top: calc(max(18px, env(safe-area-inset-top)) + var(--brand-font-size) + 16px);
  left: 50%;
  z-index: 14;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.94);
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity var(--motion-readout-reveal) ease, transform var(--motion-readout-reveal) ease;
}

.scene-readout.is-ready {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.scene-readout.is-dimmed {
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity var(--motion-readout-retire) ease, transform var(--motion-readout-retire) ease;
}

.scene-readout__row {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  /* Readable by default (mobile centres the line); wide viewports shrink it a
     touch so it fits the justified BARN-width spread. */
  font-size: 0.98rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 1200px) {
  .scene-readout__row {
    font-size: 0.86rem;
  }
}

.scene-readout__time-group {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}

.scene-readout__meridiem {
  color: rgba(255, 255, 255, 0.72);
}

.liquid-glass {
  --lg-backdrop-contrast: 1;
  --lg-backdrop-luminance: 0.5;
  --lg-pad: 44px;
  --lg-shadow-offset-y: 4px;
  --lg-shadow-opacity: 0.18;
  --lg-shadow-spread: 14px;
  --lg-text: #ffffff;
  --lg-visibility: 0;
  position: relative;
  color: var(--lg-text);
  background: transparent;
  isolation: isolate;
  overflow: visible;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.action-glass {
  display: flex;
  width: max-content;
  min-height: 48px;
  border-radius: 999px;
  contain: layout;
  transition: transform var(--motion-hover) ease;
}

.action-glass {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 13;
  max-width: calc(100vw - 96px);
  margin-inline: auto;
}

.liquid-glass__canvas {
  position: absolute;
  left: calc(var(--lg-pad) * -1);
  top: calc(var(--lg-pad) * -1);
  z-index: 0;
  display: block;
  pointer-events: none;
}

.liquid-glass[data-liquid-glass-renderer="css"] {
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.12),
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    0 var(--lg-shadow-offset-y) var(--lg-shadow-spread) rgb(0 0 0 / var(--lg-shadow-opacity)),
    0 2px 8px rgb(0 0 0 / 0.08);
}

.liquid-glass[data-liquid-glass-renderer="css"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.025) 44%, rgba(255, 255, 255, 0.08)),
    rgba(255, 255, 255, 0.05);
  backdrop-filter:
    blur(12px)
    saturate(1.12)
    contrast(1.03)
    brightness(1.02);
  -webkit-backdrop-filter:
    blur(12px)
    saturate(1.12)
    contrast(1.03)
    brightness(1.02);
}

.liquid-glass[data-liquid-glass-renderer="css"][data-glass-visibility="low"] {
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.24),
    0 var(--lg-shadow-offset-y) calc(var(--lg-shadow-spread) + 8px) rgb(0 0 0 / 0.34),
    0 3px 12px rgb(0 0 0 / 0.18);
}

.liquid-glass[data-liquid-glass-renderer="css"][data-glass-visibility="low"]::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04) 44%, rgba(255, 255, 255, 0.1)),
    rgba(18, 20, 18, 0.18);
}

.action-glass__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  pointer-events: auto;
}

.action-glass__button {
  appearance: none;
  min-height: 44px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  color: var(--lg-text);
  background: transparent;
  font-size: 0.88rem;
  font-weight: 520;
  letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  pointer-events: auto;
  text-shadow: none;
  transition:
    background-color var(--motion-hover) ease,
    box-shadow var(--motion-hover) ease;
  transform: translateZ(0);
}

.action-glass__button {
  min-width: 74px;
}

.action-glass__button:hover {
  background: rgba(255, 255, 255, 0.07);
  text-shadow: none;
}

.action-glass__button.is-active {
  background: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 14px rgba(0, 0, 0, 0.12);
  text-shadow: none;
}

.action-glass__button.is-active:hover {
  background: rgba(255, 255, 255, 0.2);
}

.liquid-glass[data-glass-visibility="low"] .action-glass__button {
  text-shadow: none;
}

.action-glass__button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(7, 10, 8, 0.34);
  text-shadow: none;
}

.action-field {
  position: relative;
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
}

.action-field--line {
  padding-bottom: 1px;
}

.action-field--line::before,
.action-field--line::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

.action-field--line::before {
  height: 1px;
  background: rgba(255, 255, 255, 0.34);
}

.action-field--line::after {
  height: 2px;
  opacity: 0;
  background: rgba(255, 255, 255, 0.86);
}

.action-field--line:focus-within::after {
  opacity: 1;
}

.action-field--line input {
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 9px 0 13px;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  caret-color: currentColor;
  font: inherit;
  font-size: 1.18rem;
  line-height: 1.35;
}

.action-field--line input::placeholder {
  color: rgba(255, 255, 255, 0.56);
  opacity: 1;
}

.action-field--line input:focus {
  outline: none;
}

.form-honeypot {
  display: none;
}

.controls {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 12;
  display: flex;
  gap: 8px;
  align-items: center;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 10px 32px var(--shadow);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.icon-button:hover {
  background: var(--panel-strong);
  border-color: rgba(255, 255, 255, 0.38);
  transform: translateY(-1px);
}

.icon-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.82);
  outline-offset: 3px;
}

.icon-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.is-active {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(28, 34, 30, 0.68);
}

.debug-panel {
  position: absolute;
  left: max(18px, env(safe-area-inset-left));
  top: max(18px, env(safe-area-inset-top));
  z-index: 10;
  min-width: 280px;
  max-width: min(520px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  max-height: calc(100svh - 36px);
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(4, 6, 5, 0.64);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

@supports (height: 100dvh) {
  .experience {
    min-height: var(--barn-viewport-height);
    height: var(--barn-viewport-height);
  }

  .debug-panel {
    max-height: calc(100dvh - 36px);
  }

}

@media (hover: none) and (pointer: coarse) {
  html,
  body {
    min-height: 100%;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
  }

  /*
   * html is the ONE scroll + snap container; its overflow-x:hidden blocks
   * sideways scroll for the whole page.
   *
   * body MUST stay overflow:visible so it is not itself a scroll container.
   * A hidden overflow-x computes the other axis from visible to auto, which
   * would quietly make body a scroll container — and then body, not html,
   * becomes the scroll-snap targets' nearest scroll container, so html's
   * scroll-snap-type is ignored and paging silently dies. This is why mobile
   * free-scrolled instead of snapping.
   */
  html {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    overflow: visible;
  }

  /*
   * GIC-model paper page. The scene is an in-flow hero that fills the first
   * screen plus a small overhang and scrolls away naturally — NOT a fixed
   * edge-to-edge layer. The page behind everything is the pencil-sketch
   * paper cream, so whichever way Safari renders the strips behind its
   * chrome (compositing real pixels or flat-painting the body colour — its
   * choice is per-presentation and uncontrollable), the result reads as the
   * paper the sketch is drawn on. Dark scenes flip the paper to pencil ink
   * via data-barn-scene-theme (set by media-controller per scene).
   */
  :root,
  :root[data-barn-visual-viewport="active"],
  :root[data-barn-edge-bleed="active"] {
    --barn-page-color: var(--belief-bg);
    --barn-page-ink: var(--belief-ink);
    /*
     * GIC-style overshoot: the hero is one small viewport PLUS this overhang,
     * so it covers the screen edge-to-edge in EVERY Safari chrome state —
     * including on load with collapsed chrome, where the visible viewport
     * (lvh) is ~60px taller than 100svh. Without it the paper colour peeks
     * out from under the video. The overhang is simply extra travel on the
     * way to the intro page.
     */
    --barn-hero-overhang: 112px;
    /* The Intro sheet is deliberately shorter than the viewport. Its scroll
       margin leaves a strip of hero visible above the paper, keeping the BARN
       wordmark visually attached to the scene. */
    --barn-intro-height: clamp(400px, 70svh, 580px);
    --barn-viewport-height: 100svh;
    --barn-media-viewport-height: calc(106svh + var(--barn-hero-overhang));
    --barn-nav-reserve: max(104px, calc(env(safe-area-inset-bottom) + 84px));
  }

  :root[data-barn-scene-theme="dark"] {
    --barn-page-color: #23211c;
    --barn-page-ink: var(--ink);
  }

  /* Home, Intro, and Join are stable document sections. Mandatory snapping
     pages between their boundaries; an oversized Join section remains freely
     scrollable inside its own content before the next section boundary. */
  html.landing-page {
    scroll-snap-type: y mandatory;
    scroll-behavior: auto;
  }

  body {
    min-height: 0;
    touch-action: pan-y;
  }

  .action-glass {
    max-width: calc(100vw - 48px);
  }

  .action-glass__content {
    gap: 6px;
    padding: 4px 6px;
  }

  .action-glass__button {
    min-height: 44px;
  }

  body::after {
    display: none;
  }

  .glass-backdrop-root {
    position: relative;
    min-height: 0;
    overflow: visible;
  }

  /* The paper page shows itself around the hero; no fixed poster backdrop. */
  .glass-backdrop-root::before {
    display: none;
  }

  /*
   * The scene is a normal in-flow hero: one viewport tall plus a small
   * overhang so there is a tad of video to scroll away before the paper
   * page takes over. No fixed positioning, no edge-bleed insets — Safari's
   * chrome strips sit over whatever is naturally there, and everything
   * adjacent to them is either the scene (composited when Safari allows)
   * or the paper colour (when it flat-paints) — both intentional.
   */
  :root[data-barn-edge-bleed="active"] .experience,
  .experience {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 1;
    width: 100%;
    min-height: calc(100svh + var(--barn-hero-overhang));
    height: calc(100svh + var(--barn-hero-overhang));
    pointer-events: auto;
    background: transparent;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /*
   * iOS 26 Safari paints the status bar (always) and the strip behind its
   * bottom toolbar (whenever it declines to composite) with the page
   * background-color; theme-color is ignored. The page colour IS the design:
   * pencil paper for light scenes, pencil ink for dark ones, so Safari's
   * bars are always on-palette.
   */
  html.landing-page,
  body.landing-body {
    background-color: var(--barn-page-color);
    transition: background-color var(--motion-readout-reveal) linear;
  }

  /* The belief page sits on the paper itself: ink text, no blur stack. */
  .scroll-pages {
    min-height: 0;
  }

  /* A final Safari chrome-delta runway keeps the Join start reachable in both
     small- and large-viewport toolbar states without changing section sizes. */
  .scroll-pages::after {
    content: "";
    display: block;
    height: calc(100lvh - 100svh);
  }

  .scroll-page--hero {
    display: none;
  }

  /* Intro is a shorter-than-viewport sheet with a stable top anchor and hero
     strip above. Copy + form remain one centered column. */
  html.landing-page .belief-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(16px, 3.5vh, 34px);
    min-height: var(--barn-intro-height);
    height: auto;
    overflow: visible;
    padding-block-start: clamp(20px, 4.5vh, 44px);
    padding-block-end: var(--barn-nav-reserve);
    color: var(--barn-page-ink);
    transition: color var(--motion-readout-reveal) linear;
    /*
     * Snap anchored from the TOP in svh units so the target is immune to the
     * URL bar resizing the viewport mid-scroll (an end-aligned snap targets
     * the document bottom, which moves with the bar and lands with a visible
     * jump). The margin places the intro's bottom edge exactly at the small
     * viewport's bottom: a (100svh - intro-height) strip of hero photo stays
     * above, keeping the BARN wordmark on the image.
     */
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: calc(100svh - var(--barn-intro-height));
  }

  /* Join is a real third destination on touch devices. Its geometry never
     changes when navigation state changes, so scrolling back to Intro is one
     native movement with no document collapse or corrective snap. */
  html.landing-page .mobile-join-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100svh;
    padding:
      max(48px, calc(env(safe-area-inset-top) + 24px))
      max(30px, env(safe-area-inset-right))
      var(--barn-nav-reserve)
      max(30px, env(safe-area-inset-left));
    color: var(--barn-page-ink);
    background: var(--barn-page-color);
    pointer-events: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .mobile-join-section__copy {
    width: min(28ch, 100%);
    font-size: clamp(18.5px, 5.5vw, 24px);
  }

  /*
   * The stay-in-touch form flows directly under the copy (not absolutely
   * anchored to the section bottom as on desktop), so the gap above is just
   * the flex gap and the internal spacing is tight and predictable. It shares
   * the copy's exact fitted column width (the copy-fit script writes
   * --belief-copy-fit-width on the section) and everything inside sits
   * ragged-left so the whole page reads as one left-aligned composition.
   */
  html.landing-page .belief-subscribe {
    position: static;
    inset: auto;
    top: auto;
    width: min(var(--belief-copy-fit-width), 100%);
    margin: 0;
    gap: 2px;
    align-items: flex-start;
  }

  .belief-subscribe__switcher {
    min-height: 46px;
  }

  .belief-subscribe .action-field--line input {
    text-align: left;
  }

  .belief-subscribe__input {
    padding-block: 2px;
    line-height: 1.15;
  }

  .belief-subscribe__button {
    align-self: flex-start;
    min-height: 40px;
    padding: 4px 0;
    text-align: left;
  }

  .belief-subscribe__feedback {
    text-align: left;
  }

  .belief-subscribe__sent {
    text-align: left;
  }

  /* The careers link reads from the left like the rest of the paper column. */
  .belief-subscribe__careers {
    place-items: start;
  }

  .belief-section__blur {
    display: none;
  }

  /* Once the wordmark rides over the paper page it switches to ink. */
  .brand.is-on-belief {
    color: var(--barn-page-ink);
  }

  /*
   * The floating actions pill hovers over both the scene and the paper;
   * give it a steady dark smoke tint so its white labels stay readable on
   * cream without the WebGL glass engine.
   */
  .action-glass[data-liquid-glass-renderer="css"] {
    background-color: rgba(24, 22, 18, 0.32);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
  }

  html[data-nav-state="intro"] .action-glass[data-liquid-glass-renderer="css"],
  html[data-nav-state="join"] .action-glass[data-liquid-glass-renderer="css"] {
    background-color: rgba(24, 22, 18, 0.56);
  }

  /* On cream paper a translucent white active fill would wash the capsule
     below AA contrast. Keep its surface dark and signal selection with a
     brighter inset rim/highlight instead. */
  .action-glass[data-liquid-glass-renderer="css"] .action-glass__button.is-active {
    background: rgba(0, 0, 0, 0.08);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.36),
      inset 0 1px 0 rgba(255, 255, 255, 0.26),
      0 2px 14px rgba(0, 0, 0, 0.18);
  }

  .action-glass[data-liquid-glass-renderer="css"] .action-glass__button.is-active:hover {
    background: rgba(0, 0, 0, 0.04);
  }

  .debug-panel {
    pointer-events: auto;
  }
}

.debug-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 12px;
  line-height: 1.25;
}

.debug-controls label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.debug-controls span {
  color: rgba(255, 255, 255, 0.62);
}

.debug-toggle-field {
  grid-column: 1 / -1;
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: rgba(9, 12, 10, 0.42);
  cursor: pointer;
}

.debug-toggle-field span {
  color: rgba(255, 255, 255, 0.78);
}

.debug-controls .debug-toggle-field input {
  appearance: auto;
  width: 15px;
  min-width: 15px;
  height: 15px;
  min-height: 15px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: #f7f4eb;
  cursor: pointer;
}

.debug-controls select,
.debug-controls input {
  width: 100%;
  min-height: 32px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: var(--ink);
  background: rgba(9, 12, 10, 0.76);
  font: inherit;
}

.debug-controls select:focus,
.debug-controls input:focus {
  outline: 2px solid rgba(255, 255, 255, 0.82);
  outline-offset: 1px;
}

.debug-actions {
  display: flex;
  gap: 8px;
  align-items: end;
  grid-column: 1 / -1;
}

.debug-actions button {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  color: var(--ink);
  background: rgba(20, 25, 22, 0.88);
  cursor: pointer;
}

.debug-actions button:hover {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(35, 43, 38, 0.92);
}

.debug-output {
  margin: 0;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 960px) {
  .belief-section {
    padding:
      max(92px, calc(env(safe-area-inset-top) + 42px))
      max(64px, env(safe-area-inset-right))
      max(124px, calc(env(safe-area-inset-bottom) + 74px))
      max(64px, env(safe-area-inset-left));
  }

  .belief-section__copy {
    line-height: 1.24;
    text-align: left;
    text-wrap: pretty;
  }
}

@media (max-width: 720px) {
  :root {
    --brand-font-size: 2.4rem;
    --brand-ar-midpoint-shift: 0.1022rem;
  }

  .belief-section {
    padding-inline:
      max(34px, env(safe-area-inset-left))
      max(34px, env(safe-area-inset-right));
  }

  .belief-section__copy {
    text-align: left;
  }

  .icon-button {
    width: 40px;
    height: 40px;
  }

  .debug-controls {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 380px) {
  .belief-section {
    padding-inline:
      max(30px, env(safe-area-inset-left))
      max(30px, env(safe-area-inset-right));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.landing-page,
  body.landing-body {
    scroll-behavior: auto;
  }

  .loading-video,
  .scene-video {
    opacity: 0;
    transition: none;
  }

  .fallback-image {
    z-index: 1;
  }

  .icon-button {
    transition: none;
  }

  .action-glass,
  .action-glass__button,
  .action-field--line::after,
  .belief-subscribe__button,
  .belief-subscribe__sent,
  .belief-subscribe,
  .belief-section,
  .belief-section__copy,
  .brand,
  html.landing-page,
  body.landing-body {
    transition: none !important;
    animation: none !important;
  }

  .scene-readout,
  .scene-readout.is-ready,
  .scene-readout.is-dimmed {
    transition: opacity 160ms ease;
    transform: translateX(-50%);
  }
}

.review-body {
  min-width: 320px;
  min-height: 100%;
  height: auto;
  overflow: auto;
  background: #101411;
}

.review-shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 22px;
}

.review-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding-bottom: 18px;
}

.review-header h1 {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.15;
  letter-spacing: 0;
}

.review-summary {
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: 0.92rem;
}

.review-actions,
.review-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.review-attempt-picker {
  display: grid;
  gap: 6px;
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.review-attempt-picker select {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ink);
  background: #101411;
  font: inherit;
  text-transform: none;
}

.review-link,
.review-button {
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
  font-size: 0.86rem;
  cursor: pointer;
}

.review-link:hover,
.review-button:hover {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.1);
}

.review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.54fr);
  gap: 18px;
  align-items: start;
}

.review-matrix-wrap {
  overflow: auto;
  padding-bottom: 4px;
}

.review-matrix {
  display: grid;
  grid-template-columns: minmax(104px, 0.7fr) repeat(var(--weather-count), minmax(118px, 1fr));
  min-width: 840px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  overflow: hidden;
}

.matrix-header,
.matrix-cell {
  min-height: 68px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.matrix-header {
  display: grid;
  align-items: center;
  padding: 10px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.matrix-header.is-row {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
}

.matrix-cell {
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
  cursor: pointer;
}

.matrix-cell:hover,
.matrix-cell.is-selected {
  background: rgba(255, 255, 255, 0.1);
}

.matrix-cell.is-selected {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.56);
}

.matrix-cell-label {
  display: block;
  font-size: 0.9rem;
  line-height: 1.2;
}

.matrix-cell-status,
.review-status {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.matrix-cell-status,
.review-status.is-pending {
  color: #d8d4c9;
  background: rgba(255, 255, 255, 0.12);
}

.matrix-cell.is-ready .matrix-cell-status,
.review-status.is-ready {
  color: #101411;
  background: #95d7a6;
}

.matrix-cell.is-rejected .matrix-cell-status,
.review-status.is-rejected {
  color: #2b160c;
  background: #f0a36d;
}

.review-inspector {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 14px;
}

.preview-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: #050706;
  aspect-ratio: 16 / 9;
}

.review-video,
.review-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-detail {
  display: grid;
  gap: 13px;
}

.review-status {
  margin: 0 0 8px;
}

.review-detail h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.22;
  letter-spacing: 0;
}

.review-meta {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 6px 10px;
  margin: 0;
  font-size: 0.86rem;
}

.review-meta dt {
  color: var(--ink-muted);
}

.review-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.review-prompt {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 10px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(0, 0, 0, 0.24);
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .review-layout {
    grid-template-columns: 1fr;
  }

  .review-inspector {
    position: static;
  }
}

@media (max-width: 640px) {
  .review-shell {
    padding: 14px;
  }

  .review-header {
    display: grid;
  }
}