/* ---- Landing hero (marketing page) ----
   Loaded after styles.css. Everything here is scoped to #landingHero so it
   only refines the public hero and never reaches the app or the hero demo
   monitor, which mimics the app on purpose.

   Layout at 1200px and up: the headline holds the left column with the
   demo's live status under it, level with the call to action; the lede and
   the two actions sit beside it. The chapter rail and the demo follow. */

#landingPage #landingHero {
  isolation: isolate;
  padding-block: clamp(1.25rem, 3.5vh, 2.25rem) clamp(1.5rem, 3vh, 2.25rem);
  row-gap: 0;
}

#landingPage #landingHero .landing-hero-copy {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

/* A faint drawing-sheet grid behind the copy: 24px minor, 120px major, faded
   out toward the edges so it reads as texture, never as a pattern. */
#landingHero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2rem 0 40%;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(var(--accent-wash-rgb) / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--accent-wash-rgb) / 0.07) 1px, transparent 1px),
    linear-gradient(rgb(var(--accent-wash-rgb) / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--accent-wash-rgb) / 0.035) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 30% 20%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 90% at 30% 20%, #000 0%, transparent 72%);
}

#landingHero .landing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

/* A short rule before the eyebrow, like a leader line on a drawing. */
#landingHero .landing-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.8;
}

#landingHero h1 {
  /* Two lines at desktop widths; the rendered eval pins the line count. */
  font-size: clamp(2.25rem, 3.55vw, 3.6rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
}

#landingHero .landing-lede {
  max-width: 32rem;
  margin-bottom: 1.4rem;
  color: var(--text);
  opacity: 0.78;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.6;
  letter-spacing: 0.015em;
}

#landingHero .landing-hero-actions {
  gap: 1.5rem;
  margin-bottom: 0;
}

#landingHero .landing-hero-cta,
#landingHero .landing-hero-cta:hover {
  color: var(--on-colour-button);
  text-decoration: none;
}

#landingHero .landing-hero-cta {
  gap: 0.55rem;
  min-height: 3rem;
  padding-inline: 1.35rem 1.15rem;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

#landingHero .landing-hero-cta-icon,
#landingHero .landing-hero-steps-icon {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}

#landingHero .landing-hero-cta:hover .landing-hero-cta-icon {
  transform: translateY(2px);
}

#landingHero .landing-hero-steps {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-block: 0.6rem;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
}

#landingHero .landing-hero-steps:hover .landing-hero-steps-icon {
  transform: translateX(3px);
}

#landingHero .landing-meta {
  margin: 1rem 0 0;
  opacity: 0.85;
}

/* Entrance cadence for the two lines added after the actions. */
#landingHero .landing-hero-copy > *:nth-child(5) { animation-delay: 300ms; }

@media (min-width: 1200px) {
  #landingHero .landing-hero-copy {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }

  #landingHero .landing-hero-copy > h1 {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  /* The lede's first line sits on the headline's cap line. */
  #landingHero .landing-hero-copy > .landing-lede {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    padding-top: 0.35rem;
  }

  /* The demo's live status shares a line with the call to action, so the
     band ends on one level across both columns. */
  #landingHero .landing-hero-copy > .landing-meta {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
    margin: 0;
  }

  #landingHero .landing-hero-copy > .landing-hero-actions {
    grid-column: 2;
    grid-row: 3;
  }

}

@media (max-width: 767px) {
  #landingHero .landing-hero-actions {
    gap: 0.75rem 1.25rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  #landingHero .landing-hero-cta-icon,
  #landingHero .landing-hero-steps-icon {
    transition: none;
  }
}

/* ---- Demo title row: title, five steps, then the caption and Pause ----
   The steps sit in the middle of the row as numbered circles joined by a hairline
   (landing.js initLandingChapters). The step on screen is the app's blue button and
   a ring round it fills with the tour's clock; steps already shown keep a blue
   outline. Each circle is a button that jumps the tour there. The status word
   stays for screen readers only: the review panel below already shows it. */
@media (min-width: 768px) {
  .landing-demo-monitor .landing-monitor-bar {
    min-height: 2.6rem;
    padding-block: 0.35rem;
  }

  .landing-demo-monitor .landing-monitor-title {
    color: var(--text);
    font-family: var(--font-head, inherit);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
  }

  .landing-demo-monitor .landing-demo-live,
  .landing-demo-monitor .landing-tour-toggle:not([hidden]) + .landing-demo-live {
    order: 1;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
  }

  .landing-demo-monitor .landing-tour-toggle {
    order: 2;
    margin-left: 0;
  }

  .landing-demo-monitor .landing-demo-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.landing-tour-steps {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.landing-tour-steps-list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-tour-step {
  display: flex;
  align-items: center;
}

/* The hairline into each step turns blue once the tour has passed it. */
.landing-tour-step + .landing-tour-step::before {
  content: "";
  width: 1.4rem;
  height: 1px;
  background: rgb(var(--overlay-rgb) / 0.14);
  transition: background-color 240ms ease;
}

.landing-tour-step.is-done + .landing-tour-step::before {
  background: var(--accent-strong);
}

.landing-page .landing-tour-step-button {
  --step-progress: 0deg;
  position: relative;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  color: var(--landing-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  background: transparent;
  border: 1px solid rgb(var(--overlay-rgb) / 0.16);
  border-radius: 50%;
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, transform 160ms ease;
}

.landing-page .landing-tour-step-button:hover {
  color: var(--text);
  border-color: rgb(var(--accent-rgb) / 0.6);
}

.landing-page .landing-tour-step-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);
}

.landing-page .landing-tour-step-button:active {
  transform: scale(0.94);
}

.landing-page .landing-tour-step-button.is-done {
  color: var(--accent-strong);
  border-color: rgb(var(--accent-rgb) / 0.55);
}

.landing-page .landing-tour-step-button.is-active {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, #3576d1, #225fb6);
  border-color: transparent;
  box-shadow: 0 4px 14px -6px rgb(var(--accent-rgb) / 0.8);
}

/* The ring that fills with the tour's clock, 3px outside the active circle. */
.landing-page .landing-tour-step-button.is-active::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(var(--accent-strong) var(--step-progress), rgb(var(--accent-rgb) / 0.28) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  pointer-events: none;
}

/* Below desktop the row is narrower than title, steps and caption together, so the
   steps take a row of their own, centred under the title. Phones keep the row as it
   was: title, then Pause and the caption. */
@media (max-width: 1199px) {
  .landing-tour-steps {
    position: static;
    order: 3;
    flex: 1 1 100%;
    display: flex;
    justify-content: center;
    padding-block: 0.25rem 0.1rem;
    transform: none;
  }
}

@media (max-width: 767px) {
  .landing-tour-steps {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page .landing-tour-step-button,
  .landing-tour-step + .landing-tour-step::before {
    transition: none;
  }
}

/* ==========================================================================
   Landing demo: the app's cursors for the two drawing panes (landing.js,
   bindLandingViewer). The cursor variables live in styles.css (:root, the
   site's blue SVG set). Mirrors styles.css .review-sheet-frame: the blue zoom
   cursor at 100%, the blue hand when zoomed or panning, the zoom-out cursor
   for a moment after a wheel turn out, zoom-in / zoom-out on the + / - buttons.
   Selectors start at .landing-demo-sheet so the full-screen copy (moved to
   <body>) gets them too. This file loads after styles.css, so equal weight wins.
   ========================================================================== */
.landing-demo-sheet.is-landing-fit .landing-sheet-viewport {
  cursor: var(--cursor-zoom);
}

.landing-demo-sheet:not(.is-landing-fit) .landing-sheet-viewport {
  cursor: var(--cursor-grab);
}

.landing-demo-sheet.is-landing-panning .landing-sheet-viewport {
  cursor: var(--cursor-grabbing);
}

.landing-demo-sheet.is-landing-zooming-out .landing-sheet-viewport {
  cursor: var(--cursor-zoom-out);
}

.landing-demo-sheet .landing-zoom-button[data-landing-zoom-dir="in"]:not(:disabled) {
  cursor: var(--cursor-zoom-in);
}

.landing-demo-sheet .landing-zoom-button[data-landing-zoom-dir="out"]:not(:disabled) {
  cursor: var(--cursor-zoom-out);
}

/* A phone: one finger scrolls the page past a drawing that fits (it was blocked outright), two
   fingers pinch it (landing.js). A zoomed drawing keeps the native pan from styles.css. */
@media (max-width: 767px) {
  .landing-demo-sheet.is-landing-fit .landing-sheet-viewport {
    touch-action: pan-y;
  }
}

/* ---- Tour load step: the app's Load card in each pane ----
   Copies #loadScreen's cards (review-panel-v3.css "Load cards"): blue Your file, purple Supplied
   files, an icon tile and type tags, the dark drop well with the round upload arrow, then the
   file status and Upload files. The file card falls into the well; once in, the status turns
   green with the file's name and the card gets the app's dashed outline. */
.landing-demo-monitor .landing-tour-drop {
  --load-card-rgb: var(--accent-rgb);
  --load-card-wash-rgb: var(--accent-wash-rgb);
  padding: 10px;
  background: transparent;
}

.landing-demo-monitor .landing-tour-drop.is-manufacturer {
  --load-card-rgb: var(--complete-rgb);
  --load-card-wash-rgb: var(--complete-wash-rgb);
}

.landing-demo-monitor .landing-tour-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgb(var(--load-card-rgb) / 0.16);
  background:
    radial-gradient(120% 80% at 0% 0%, rgb(var(--load-card-wash-rgb) / 0.2), transparent 60%),
    linear-gradient(160deg, rgb(var(--load-card-wash-rgb) / 0.12), rgb(var(--load-card-rgb) / 0.06) 55%, rgb(var(--load-card-rgb) / 0.09));
  outline: 1.4px dashed transparent;
  outline-offset: -1.4px;
  transition: outline-color 200ms ease;
}

.landing-demo-monitor .landing-tour-drop.is-upload .landing-tour-card {
  outline-color: rgb(var(--load-card-rgb) / 0.85);
}

.landing-demo-monitor .landing-tour-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px 0;
}

.landing-demo-monitor .landing-tour-card-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: color-mix(in srgb, rgb(var(--load-card-rgb)) 60%, var(--text-strong));
  background: rgb(var(--load-card-rgb) / 0.18);
}

.landing-demo-monitor :is(.landing-tour-card-tile, .landing-tour-card-up) svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-demo-monitor .landing-tour-card-head b {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, rgb(var(--load-card-rgb)) 60%, var(--text-strong));
  font: 800 14px/1.1 var(--font-head);
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.landing-demo-monitor .landing-tour-card-types {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin-left: auto;
}

.landing-demo-monitor .landing-tour-card-types i {
  padding: 2px 5px;
  color: color-mix(in srgb, var(--text) 87%, var(--surface-muted));
  font: 600 8px/1.2 var(--font-mono);
  font-style: normal;
  letter-spacing: 0.06em;
  background: rgb(var(--overlay-rgb) / 0.06);
  border: 1px solid rgb(var(--overlay-rgb) / 0.14);
  border-radius: 6px;
}

.landing-demo-monitor .landing-tour-slot {
  position: relative;
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  width: auto;
  min-height: 0;
  aspect-ratio: auto;
  margin: 12px 16px 0;
  background: rgb(var(--well-rgb) / 0.2);
  border: 0;
  border-radius: 6px;
  opacity: 1;
  animation: none;
}

.landing-demo-monitor .landing-tour-drop.is-fall .landing-tour-slot {
  opacity: 1;
}

.landing-demo-monitor .landing-tour-card-prompt {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  transition: opacity 200ms ease;
}

.landing-demo-monitor .landing-tour-drop.is-fall .landing-tour-card-prompt {
  opacity: 0;
}

.landing-demo-monitor .landing-tour-card-up {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: rgb(var(--load-card-rgb));
  background: rgb(var(--load-card-rgb) / 0.18);
}

.landing-demo-monitor .landing-tour-card-up svg {
  width: 19px;
  height: 19px;
}

.landing-demo-monitor .landing-tour-card-prompt strong {
  color: color-mix(in srgb, var(--text) 87%, var(--surface-muted));
  font: 700 12px/1.2 var(--font-head);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landing-demo-monitor .landing-tour-card-prompt small {
  color: color-mix(in srgb, var(--text) 87%, var(--surface-muted));
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landing-demo-monitor .landing-tour-slot > .landing-tour-file {
  width: min(36%, 150px);
}

.landing-demo-monitor .landing-tour-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 12px 16px 14px;
}

.landing-demo-monitor .landing-tour-card-status {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--text) 87%, var(--surface-muted));
  font: 500 11px/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.landing-demo-monitor .landing-tour-card-status::before {
  content: attr(data-empty);
}

.landing-demo-monitor .landing-tour-drop.is-upload .landing-tour-card-status {
  color: var(--success-text);
}

.landing-demo-monitor .landing-tour-drop.is-upload .landing-tour-card-status::before {
  content: attr(data-loaded);
}

.landing-demo-monitor .landing-tour-card-button {
  flex: none;
  padding: 7px 12px;
  color: var(--on-colour-button);
  font: 700 10px/1 var(--font-head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--accent-action-gradient);
  border: 1px solid rgb(var(--accent-border-rgb) / 0.72);
  border-radius: 8px;
}

.landing-demo-monitor .landing-tour-drop.is-manufacturer .landing-tour-card-button:not(.is-clear) {
  background: var(--complete-action-gradient);
  border-color: rgb(var(--complete-rgb) / 0.62);
}

.landing-demo-monitor .landing-tour-card-button.is-clear {
  margin-left: -4px;
  background: var(--action-danger);
  border-color: var(--action-danger);
  opacity: 0.55;
}

.landing-demo-monitor .landing-tour-drop.is-upload .landing-tour-card-button.is-clear {
  opacity: 1;
}


/* ---- Tour process: the app's order (Load, Run review, Preparing review, Summary, decision) ----
   Approve and Reject are the app's fixed panel footer. They are never hidden: dimmed (disabled)
   until the review is ready. The decision dialogs cover the drawings only. */

/* Desktop: the row sits under the review panel, as the panel's footer; the drawings run the
   full height beside both. */
@media (min-width: 1200px) {
  .landing-demo-body {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .landing-demo-body > .landing-demo-sheets {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .landing-demo-body > .landing-demo-panel {
    grid-column: 2;
    grid-row: 1;
  }

  .landing-demo-body > .landing-demo-decision {
    grid-column: 2;
    grid-row: 2;
  }
}

.landing-demo-body > .landing-demo-decision {
  padding: 10px 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--bg-strong) 92%, transparent));
  border: 1px solid rgb(var(--overlay-rgb) / 0.1);
  border-radius: var(--panel-radius);
}

/* Below 1200px the monitor is tall: the row sticks to the bottom of the screen for as long as
   any of the monitor is in view, so Approve and Reject never scroll away. */
@media (max-width: 1199px) {
  .landing-demo-body > .landing-demo-decision {
    position: sticky;
    bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    background: var(--surface-raised);
    z-index: 26;
    box-shadow: 0 -10px 22px -12px rgb(var(--shadow-rgb) / 0.7), 0 10px 24px rgb(var(--shadow-rgb) / 0.35);
  }
}

.landing-demo-monitor .landing-demo-decision-actions .landing-button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* The dialogs sit in the drawings area. */
.landing-demo-sheets > .landing-decision-dialog {
  z-index: 28;
}

.landing-demo-monitor .landing-decision-receipt,
.landing-demo-monitor .landing-decision-status {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: normal;
}

.landing-demo-monitor .landing-decision-status {
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-weight: 700;
}

.landing-demo-monitor .landing-decision-receipt[hidden],
.landing-demo-monitor .landing-decision-status[hidden] {
  display: none;
}

/* A small drawings area (a phone shows one sheet) keeps the card inside it: no logo or label,
   tighter spacing, and it scrolls if it still does not fit. */
@media (max-width: 767px) {
  .landing-demo-sheets > .landing-decision-dialog {
    overflow-y: auto;
    padding: var(--space-2);
  }

  .landing-demo-sheets > .landing-decision-dialog .landing-decision-logo,
  .landing-demo-sheets > .landing-decision-dialog .landing-decision-label {
    display: none;
  }

  .landing-demo-sheets > .landing-decision-dialog .landing-decision-card {
    gap: var(--space-1);
    padding: var(--space-3);
    position: static;
  }

  .landing-demo-sheets > .landing-decision-dialog .landing-decision-card p {
    font-size: 0.68rem;
    line-height: 1.4;
  }

  .landing-demo-sheets > .landing-decision-dialog .landing-decision-actions {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .landing-demo-sheets > .landing-decision-dialog .landing-decision-actions .landing-button {
    flex: 0 0 auto;
    width: 100%;
    min-height: 2.4rem;
  }
}

/* Run review or queue: the app's three buttons, Run review first. */
.landing-run-dialog .landing-decision-actions .landing-button {
  flex-basis: 6.5rem;
}

/* Queue is purple with white text, as the app's Queue button (button-purple). */
.landing-run-dialog .landing-decision-actions .landing-button[data-landing-run="queue"] {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient);
  border-color: rgb(var(--complete-rgb) / 0.62);
}

.landing-run-dialog .landing-decision-actions .landing-button[data-landing-run="queue"]:hover,
.landing-run-dialog .landing-decision-actions .landing-button[data-landing-run="queue"].is-tour-press {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient-hover);
  border-color: rgb(var(--complete-rgb) / 0.78);
}

/* The shelf-height card carries the app's Accept and Reject under its text, in the same border. */
.landing-demo-monitor .landing-demo-findings > li:has(.landing-demo-finding-actions) {
  display: grid;
  align-content: start;
}

.landing-demo-monitor .landing-demo-finding-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 8px 8px;
  background: rgb(var(--surface-card-rgb) / 0.92);
  border: 1px solid rgb(var(--text-rgb) / 0.28);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.landing-demo-monitor .landing-demo-finding-actions .landing-oa-action[hidden] {
  display: none;
}

.landing-demo-monitor .landing-demo-finding-actions .landing-oa-action[data-landing-finding-action="restore"] {
  grid-column: 1 / -1;
}

.landing-demo-monitor .landing-demo-finding:has(+ .landing-demo-finding-actions) {
  border-bottom-width: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.landing-demo-monitor .landing-demo-finding[aria-pressed="true"]:has(+ .landing-demo-finding-actions) + .landing-demo-finding-actions {
  border-color: rgb(var(--accent-rgb) / 0.72);
  box-shadow: inset 0 -1.5px 0 0 rgb(var(--accent-rgb) / 0.85), inset 1.5px 0 0 rgb(var(--accent-rgb) / 0.85), inset -1.5px 0 0 rgb(var(--accent-rgb) / 0.85);
}

.landing-demo-monitor .landing-demo-finding[data-finding-decision="accepted"] {
  opacity: 0.72;
}

.landing-demo-monitor .landing-demo-finding[data-finding-decision="rejected"] .landing-demo-finding-tag {
  color: var(--danger);
}

.landing-demo-monitor .landing-demo-finding[data-finding-decision="accepted"] .landing-demo-finding-tag {
  color: var(--success);
}

/* The summary line the tour points at. */
.landing-demo-monitor .landing-summary-lead.is-tour-look {
  color: var(--accent-strong);
}

/* "Preparing review": the app's three lines over the drawings while the compare runs. */
.landing-demo-monitor .landing-tour-chip {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-lg);
}

.landing-demo-monitor .landing-tour-chip-head {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.landing-demo-monitor .landing-tour-chip-head b {
  font-weight: 700;
}

.landing-demo-monitor .landing-tour-chip-steps {
  display: grid;
  gap: 0.28rem;
}

.landing-demo-monitor .landing-tour-chip-steps > span {
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}

.landing-demo-monitor .landing-tour-chip-steps > span.is-now {
  color: var(--accent-strong);
}

.landing-demo-monitor .landing-tour-chip-steps > span.is-done {
  color: var(--text);
}

.landing-demo-monitor .landing-tour-chip-steps > span.is-done::before {
  content: "\2713\00a0";
}

/* Export now, then EXPORT PDF: demo stand-ins in a row under the drawings (in the flow, so it
   never covers a zoom, rotate or full screen control). */
.landing-demo-sheets > .landing-demo-export {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.landing-demo-sheets > .landing-demo-export[hidden] {
  display: none;
}

.landing-demo-export-label {
  flex: 1 1 12rem;
  min-width: 0;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

.landing-demo-export .landing-button {
  min-height: 2.4rem;
  font-size: 0.72rem;
}

.landing-demo-export .landing-button[hidden] {
  display: none;
}

/* One corner for the whole landing page: the app's 8px (--radius-md). Round icon buttons
   stay circles; controls nested inside an 8px box use 6px so the gap reads even. The top
   bar and the drawing zoom pill keep the app's own shapes, because they copy the app's. */
#landingPage {
  --panel-radius: 8px;
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 8px;
}

#landingPage .landing-nav-links > a,
#landingPage .landing-tour-toggle,
#landingPage .landing-demo-panel,
#landingPage .landing-demo-decision,
#landingPage .landing-tabbar,
#landingPage .landing-ai-signals > li,
#landingPage .landing-po-workspace,
#landingPage .landing-po-upload-card,
#landingPage .landing-capability-panel,
#landingPage .landing-outcome-panel,
#landingPage .landing-panel-card {
  border-radius: 8px;
}

#landingPage .landing-tabbar .landing-tab,
#landingPage .landing-po-drawing-preview,
#landingPage .landing-po-sheet-preview {
  border-radius: 6px;
}