/* ==========================================================================
   RedactIt landing page + analysis interface
   Static CSS only — no build step, no framework. Sections:
     1. tokens & reset     4. hero content       7. analysis interface
     2. base & a11y        5. hero foot          8. footer
     3. header / nav       6. mobile menu        9. motion & breakpoints
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */
:root {
  --black: #000000;
  --white: #ffffff;
  --charcoal: #565264;
  --dim-grey: #706677;
  --dusty-mauve: #a6808c;
  --almond-silk: #ccb7ae;
  --dust-grey: #d6cfcb;
  --muted: #8e8e8e;

  --font-ui: "Inter", "Segoe UI", system-ui, sans-serif;
  /* "Geist Pixel Circle" is deliberately absent from this stack: fonts/GeistPixel-Circle.woff2
     does not exist in the repository, so declaring it would only produce a failing request. */
  --font-display: "BubbledotICG-FinePos", ui-monospace, monospace;

  --shell: min(1180px, 100% - 2.5rem);
  --radius-pill: 999px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-orb: 0 10px 30px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.18) inset;
  --shadow-cta: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 14px 44px rgba(255, 255, 255, 0.14);
  --parallax: 0px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

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

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.875em;
}

/* ------------------------------------------------------------ 2. base/a11y */
/* Visible keyboard focus; light outlines on light surfaces, white on black. */
:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}
.logo-orb:focus-visible,
.nav-pill__cta:focus-visible,
.nav-pill__link:focus-visible,
.menu-orb:focus-visible,
.menu-sheet__link:focus-visible,
.cta-button--dark:focus-visible {
  outline-color: var(--black);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Authoritative: any component that hides itself with the hidden attribute must
   win over its own display rule (a flex/grid display would otherwise swallow it). */
[hidden] {
  display: none !important;
}

/* --------------------------------------------------------- 3. header / nav */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 5vh, 3rem);
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(1.25rem, 3.2vh, 2.25rem) 0 clamp(1.5rem, 4vh, 2.5rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--black);
}

/*
 * The loop is the hero's background. It is oversized so the parallax translate
 * never exposes an edge, and object-position holds the ridge above centre so the
 * dome keeps its shape on tall viewports, where cover crops most of the width.
 *
 * Neutralising is a filter, not a scrim: the raw footage is a saturated magenta
 * that fights every token in the palette, so it is pulled back towards the page's
 * own lavender-rose-grey family before anything is composited over it.
 */
.hero__video,
.hero__still {
  position: absolute;
  top: -6%;
  left: 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: 50% 42%;
  transform: translate3d(0, var(--parallax), 0);
  filter: saturate(0.9) hue-rotate(-4deg) brightness(1.04) contrast(0.99);
}

.hero__video {
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}

.hero__video.is-live {
  opacity: 1;
}

/*
 * The loop's own first frame, sitting behind the video and retired by main.js the
 * moment a real frame is playing. It is what reduced-motion, save-data,
 * no-JavaScript and unreachable-CDN visitors see, so the composition never
 * collapses to a black rectangle, and it covers the gap before the first frame
 * decodes. Same geometry and filter as the video so the handover is invisible.
 */
.hero__still {
  display: block;
  opacity: 1;
  background: url("assets/hero-loop-poster.jpg") 50% 42% / cover no-repeat;
}

/*
 * Contrast here is measured, not assumed. Text was hidden and the composited
 * backdrop screenshotted at three viewports, then the brightest pixel inside each
 * text block's own bounding box was read out. Chain:
 *
 *   loop -> neutralising filter -> scrim -> grain -> veil bands (below)
 *
 * White-on-backdrop ratios, live loop / reduced-motion poster:
 *
 *   1440x900    pill 15.0   headline 4.8 / 4.9   copy 19.2 / 20.4   footer 20.8 / 20.1
 *    834x1112   pill 16.9   headline 12.2         copy 19.2           footer 21.0
 *    390x844    pill 16.4   headline 5.4          copy 15.5           footer 18.3
 *
 * The headline is the binding constraint at both wide and narrow sizes: it sits on
 * the dome's rim, which is the brightest thing the loop shows. Only white, dust grey
 * and almond may sit over the loop, because the darker muted/charcoal tones cannot
 * clear 4.5:1 against a bright frame pixel and are reserved for the solid-black
 * sections below the fold. Re-read these after any change to the chain.
 */
.hero__scrim {
  position: absolute;
  inset: 0;
  display: block;
  background:
    radial-gradient(130% 92% at 50% 4%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.14) 76%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 32%, rgba(0, 0, 0, 0.4) 58%, rgba(0, 0, 0, 0.82) 100%);
}

/*
 * The footage already carries its own grain, so this is a very light dot grid over
 * the lower band only — enough to tie the loop to the flat black below it without
 * moiréing against the grain that is already there. Static on purpose: a moving dot
 * grid shimmers.
 */
.hero__grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.55) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
  opacity: 0.07;
  mix-blend-mode: overlay;
  -webkit-mask-image: linear-gradient(180deg, transparent 52%, #000 74%, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 52%, #000 74%, #000 92%, transparent 100%);
}

/*
 * Guarantees the loop lands on solid black at the seam whatever frame happens to be
 * playing, so the crossfade into the next section always starts from the same value.
 * Sits above .hero__media (same z-index, later in tree order) and below the foot,
 * which is z-index 1.
 */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: clamp(4rem, 16vh, 11rem);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--black) 72%);
}


.site-header,
.hero__content,
.hero__foot {
  position: relative;
  z-index: 1;
  width: var(--shell);
  margin-inline: auto;
}

/*
 * Soft darkening bands behind the two text blocks. They hug the text rather than
 * the flex box that centres it, so the wave's light stays visible around the copy
 * instead of being wiped out by a full-viewport panel. Uniform across the middle so
 * the ends of a line are never weaker than its centre, then feathered out
 * horizontally as well as vertically — an unfeathered band reads as a grey card
 * pasted over the ridge.
 */
.hero__stack::before,
.hero__foot::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.hero__stack::before {
  inset: 4% -34% -11%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 19%,
    rgba(0, 0, 0, 0.5) 83%,
    rgba(0, 0, 0, 0) 100%
  );
}

.hero__foot::before {
  inset: -16% -30%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 22%,
    rgba(0, 0, 0, 0.5) 78%,
    rgba(0, 0, 0, 0) 100%
  );
}

.site-header {
  display: flex;
  justify-content: center;
}

.site-header__cluster {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-orb {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1.05rem 0.4rem 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow-orb);
}

.logo-orb svg {
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
  display: block;
}

.logo-orb__name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--charcoal);
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.35rem 0.3rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  box-shadow: var(--shadow-orb);
}

.nav-pill__list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav-pill__link {
  display: block;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--dim-grey);
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.nav-pill__link[aria-current="page"] {
  color: var(--black);
  background: rgba(86, 82, 100, 0.12);
  font-weight: 600;
}

.nav-pill__link:hover {
  color: var(--black);
}

.nav-pill__cta {
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-pill);
  background: var(--charcoal);
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}

.nav-pill__cta:hover {
  background: var(--black);
  transform: translateY(-1px);
}

.menu-orb {
  display: none;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-orb);
  cursor: pointer;
}

.menu-orb__bars,
.menu-orb__bars::before,
.menu-orb__bars::after {
  display: block;
  width: 1.05rem;
  height: 1.5px;
  border-radius: 2px;
  background: var(--charcoal);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.menu-orb__bars {
  position: relative;
  margin: 0 auto;
}
.menu-orb__bars::before,
.menu-orb__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.menu-orb__bars::before {
  top: -0.35rem;
}
.menu-orb__bars::after {
  top: 0.35rem;
}

.menu-orb[aria-expanded="true"] .menu-orb__bars {
  background: transparent;
}
.menu-orb[aria-expanded="true"] .menu-orb__bars::before {
  transform: translateY(0.35rem) rotate(45deg);
}
.menu-orb[aria-expanded="true"] .menu-orb__bars::after {
  transform: translateY(-0.35rem) rotate(-45deg);
}

/* -------------------------------------------------------- 4. hero content */
.hero__content {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.hero__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.9rem, 2.2vh, 1.4rem);
  text-align: center;
}

/*
 * Deliberately an opaque pill rather than a translucent one: it sits over the
 * brightest band of the hero, and dust grey only clears 4.5:1 against a backdrop
 * this side has already been darkened by the pill itself.
 */
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(214, 207, 203, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(6, 4, 8, 0.78);
  color: var(--dust-grey);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.trust-pill__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--dusty-mauve);
  flex: none;
}

.hero__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 8.4vw, 5.4rem);
  line-height: 1.14;
  letter-spacing: clamp(0.01em, 0.35vw, 0.045em);
  color: var(--white);
  text-align: center;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}

.hero__line {
  display: block;
}

.hero__copy {
  max-width: 34rem;
  color: var(--dust-grey);
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  font-weight: 400;
}

.hero__actions {
  margin-top: clamp(0.35rem, 1.4vh, 0.9rem);
}

.cta-button {
  display: inline-block;
  padding: 0.92rem 2.4rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-cta);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 20px 60px rgba(255, 255, 255, 0.2);
}

.cta-button:active {
  transform: translateY(0);
}

/* ------------------------------------------------------------- 5. hero foot */
.hero__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 4vw, 3rem);
  width: 100%;
  max-width: 52rem;
  padding-top: clamp(0.9rem, 2.4vh, 1.5rem);
  border-top: 1px solid rgba(214, 207, 203, 0.14);
}

.principle {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: center;
}

.principle__title {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--white);
}

.principle__note {
  font-size: 0.74rem;
  color: var(--dust-grey);
}

.hero__model {
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--almond-silk);
}

/* --------------------------------------------------------- 6. mobile menu */
.menu-sheet {
  position: fixed;
  /* Starts below the header row so the toggle stays crisp and directly clickable. */
  top: 4.9rem;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0.9rem 1.25rem 2rem;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}

.menu-sheet.is-open {
  opacity: 1;
}

/* The display above beats the UA [hidden] rule, so a closed sheet would still
   cover the viewport and swallow every click. */
.menu-sheet[hidden] {
  display: none;
}

body.menu-open {
  overflow: hidden;
}

.menu-sheet__nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(20rem, 100%);
}

.menu-sheet__link {
  display: block;
  padding: 0.85rem 1.1rem;
  border-radius: 1rem;
  background: var(--white);
  color: var(--charcoal);
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: var(--shadow-orb);
}

.menu-sheet__link[aria-current="page"] {
  color: var(--black);
  font-weight: 600;
}

.menu-sheet__link--cta {
  background: var(--dusty-mauve);
  color: var(--black);
  font-weight: 600;
}

/* --------------------------------------------------- 7. analysis interface */
/* Composition follows the supplied interface reference: dark canvas, one
   illuminated focal mark, centred prompt, translucent composer card with the
   utility controls grouped along its bottom edge, action chips underneath.
   Everything here is real HTML controls wired to the backend in main.js. */
/*
 * No border-top here. The loop ends on a black tail and this section opens on black
 * too, so a hairline rule was the only thing telling the eye that a new surface had
 * begun; the wash below carries the hero's rose falloff down into this section
 * instead, so the two read as one gradient.
 */
.reference {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.5rem, 9vh, 6rem) 0 clamp(3rem, 8vh, 5rem);
  background: var(--black);
}

/* The crossfade itself: a dim rose wash at the seam, darkening as it descends.
   Its centre sits above the section, and .reference clips overflow, so the top of
   the wash would be sliced into a hard line exactly where the hero ends. The mask
   closes the seam by fading the first quarter of the band to nothing. */
.reference::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(9rem, 26vh, 18rem);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% -28%, rgba(166, 128, 140, 0.16) 0%, rgba(120, 92, 108, 0.07) 42%, transparent 72%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.28) 38%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 58%, transparent 100%);
}

.reference__atmos {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* The light shaft the reference puts behind the mark. It stays dim enough that
   every text token used below still clears AA on the composited backdrop. */
.reference__beam {
  position: absolute;
  top: -8%;
  left: 50%;
  width: clamp(8rem, 24vw, 16rem);
  height: 58%;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(214, 207, 203, 0.06) 48%,
    transparent 100%
  );
  filter: blur(26px);
  /* .reference clips overflow, so the shaft's top edge used to land on the seam as a
     hard line, and its 26px blur is far too tight to soften the sides. Intersecting a
     vertical and a horizontal feather turns the clipped rectangle into a glow that
     rises out of the boundary instead of starting at it. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 100%),
    linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 100%),
    linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.reference__glow {
  position: absolute;
  top: 2%;
  left: 50%;
  width: min(72rem, 150%);
  height: 44rem;
  transform: translateX(-50%);
  background: radial-gradient(
    50% 42% at 50% 28%,
    rgba(214, 207, 203, 0.13) 0%,
    rgba(166, 128, 140, 0.06) 40%,
    transparent 72%
  );
}

.reference__grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(214, 207, 203, 0.55) 0.5px, transparent 0.6px);
  background-size: 24px 24px;
  opacity: 0.05;
  -webkit-mask-image: radial-gradient(58% 42% at 50% 20%, #000 0%, transparent 74%);
  mask-image: radial-gradient(58% 42% at 50% 20%, #000 0%, transparent 74%);
}

.reference__inner {
  width: var(--shell);
  max-width: 54rem;
  margin-inline: auto;
}

/* Scripted focus target: no ring around the whole section. */
.reference:focus,
.reference:focus:not(:focus-visible) {
  outline: none;
}

/* main.js adds .is-armed just before observing, so hidden-until-revealed never
   applies when scripting is unavailable. */
.reference__inner.is-armed {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reference__inner.is-armed.is-revealed {
  opacity: 1;
  transform: none;
}

.reference__inner > noscript .notice {
  margin-bottom: clamp(1.5rem, 5vw, 2.5rem);
}

.composer {
  text-align: center;
}

.composer__focal {
  display: grid;
  justify-items: center;
}

.composer__mark {
  display: grid;
  place-items: center;
  width: clamp(4.1rem, 12vw, 5.2rem);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--white);
  background: radial-gradient(
    circle at 50% 45%,
    rgba(255, 255, 255, 0.13),
    rgba(255, 255, 255, 0.02) 62%,
    transparent 70%
  );
  box-shadow:
    0 0 44px rgba(214, 207, 203, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.composer__mark svg {
  width: 54%;
  height: 54%;
  filter: drop-shadow(0 0 11px rgba(255, 255, 255, 0.45));
}

.composer__title {
  margin-top: 1.35rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.55rem, 5.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--white);
}

.composer__sub {
  max-width: 34rem;
  margin-top: 0.85rem;
  font-size: 0.88rem;
  color: var(--dust-grey);
}

/* ------------------------------------------------------------- composer card */
.composer__card {
  margin-top: clamp(1.4rem, 4vw, 2.1rem);
  padding: clamp(1rem, 3.4vw, 1.4rem);
  border: 1px solid rgba(214, 207, 203, 0.14);
  border-radius: 1.4rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018));
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: left;
}

.composer__attach {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.8rem;
}

/* The real input stays focusable; the styled label is what opens the picker. */
.composer__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.composer__file-input:focus-visible + .tool-btn {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.35rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(214, 207, 203, 0.18);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.tool-btn svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.tool-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(214, 207, 203, 0.32);
  transform: translateY(-1px);
}

.tool-btn--quiet {
  color: var(--dust-grey);
}

.composer__limit {
  font-size: 0.72rem;
  color: var(--muted);
}

.file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: 100%;
}

.file-list:empty {
  display: none;
}

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.3rem 0.35rem 0.3rem 0.7rem;
  border: 1px solid rgba(214, 207, 203, 0.16);
  border-radius: 0.7rem;
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.75rem;
  color: var(--dust-grey);
}

.file-chip__name {
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-chip__size {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.file-chip__x {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--muted);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.file-chip__x:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--white);
}

.file-chip--bad {
  border-color: rgba(166, 128, 140, 0.6);
  background: rgba(166, 128, 140, 0.1);
  color: #f0dfe3;
}

.composer__label {
  display: block;
  margin-top: 1.15rem;
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

.composer__label-note {
  margin-top: 0.15rem;
  font-size: 0.74rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dust-grey);
}

.composer__input {
  display: block;
  width: 100%;
  min-height: 5.2rem;
  margin-top: 0.5rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(214, 207, 203, 0.16);
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.45);
  color: var(--white);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  resize: vertical;
}

.composer__input::placeholder {
  color: #9a94a0;
}

.composer__input:focus {
  outline: none;
  border-color: rgba(214, 207, 203, 0.45);
  box-shadow: 0 0 0 3px rgba(214, 207, 203, 0.12);
}

.composer__input[aria-invalid="true"] {
  border-color: rgba(166, 128, 140, 0.75);
}

.composer__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(214, 207, 203, 0.1);
}

.composer__spacer {
  flex: 1 1 auto;
}

.mode-select {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0.5rem 0.32rem 0.8rem;
  border: 1px solid rgba(214, 207, 203, 0.16);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
}

.mode-select__label {
  font-size: 0.72rem;
  color: var(--muted);
}

.mode-select__field {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.15rem;
  border: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23d6cfcb' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 0.7rem;
  color: var(--white);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.mode-select__field option {
  background: var(--white);
  color: var(--black);
}

.send-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  flex: none;
  border: 0;
  border-radius: 1rem;
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow-cta);
  cursor: pointer;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.send-btn:hover {
  transform: translateY(-1px);
}

.send-btn__icon {
  width: 1.35rem;
  height: 1.35rem;
}

.send-btn__spinner {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid rgba(0, 0, 0, 0.22);
  border-top-color: var(--black);
  border-radius: 50%;
  animation: rd-spin 0.8s linear infinite;
}

.send-btn.is-busy .send-btn__icon {
  opacity: 0;
}

.send-btn.is-busy .send-btn__spinner {
  display: block;
}

.send-btn[disabled] {
  opacity: 0.55;
  cursor: progress;
  transform: none;
}

/* ------------------------------------------------------------------- chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.15rem;
}

.chip {
  padding: 0.42rem 0.85rem;
  border: 1px solid rgba(214, 207, 203, 0.18);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.03);
  color: var(--dust-grey);
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
    background-color 0.25s var(--ease);
}

.chip:hover {
  color: var(--white);
  border-color: rgba(214, 207, 203, 0.4);
  background: rgba(255, 255, 255, 0.07);
}

/* ----------------------------------------------------- messages and notices */
.field-error {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--almond-silk);
}

.field-error[hidden] {
  display: none;
}

.notices {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}

.notices:empty {
  display: none;
}

.notice {
  padding: 0.75rem 0.95rem;
  border: 1px solid rgba(214, 207, 203, 0.14);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.82rem;
  color: var(--dust-grey);
}

.notice--warn {
  border-color: rgba(204, 183, 174, 0.34);
  background: rgba(204, 183, 174, 0.07);
  color: #e8dcd7;
}

.notice--bad {
  border-color: rgba(166, 128, 140, 0.55);
  background: rgba(166, 128, 140, 0.09);
  color: #f2e2e6;
}

.notice__code {
  display: inline-block;
  margin-right: 0.45rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--almond-silk);
}

.ghost-btn {
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(214, 207, 203, 0.2);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--dust-grey);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.ghost-btn:hover {
  color: var(--white);
  border-color: rgba(214, 207, 203, 0.45);
}

/* ----------------------------------------------------------------- results */
.results {
  margin-top: clamp(2rem, 6vw, 3rem);
  padding-top: clamp(1.5rem, 4vw, 2.25rem);
  border-top: 1px solid rgba(214, 207, 203, 0.1);
}

.results[hidden] {
  display: none;
}

.results__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
}

.results__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 3vw, 1.45rem);
  letter-spacing: 0.02em;
  color: var(--white);
}

.results__meta {
  flex: 1 1 12rem;
  font-size: 0.76rem;
  color: var(--muted);
}

.progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--dust-grey);
}

.progress[hidden] {
  display: none;
}

.progress__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--almond-silk);
  animation: rd-pulse 1.3s ease-in-out infinite;
}

/* ------------------------------------------------------------ interpretation */
.plan {
  margin-top: 1.1rem;
  border: 1px solid rgba(214, 207, 203, 0.12);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.02);
}

.plan[hidden] {
  display: none;
}

.plan summary {
  padding: 0.7rem 1rem;
  font-size: 0.82rem;
  color: var(--dust-grey);
  cursor: pointer;
  list-style: none;
}

.plan summary::-webkit-details-marker {
  display: none;
}

.plan summary::before {
  content: "+ ";
  color: var(--almond-silk);
}

.plan[open] summary::before {
  content: "\2013  ";
}

.plan__body {
  display: grid;
  gap: 0.5rem;
  padding: 0 1rem 1rem;
  font-size: 0.8rem;
  color: var(--dust-grey);
}

.plan__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
}

.plan__key {
  flex: none;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------------------------------------------- documents & detections */
.docs {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.docs:empty {
  display: none;
}

.doc {
  overflow: hidden;
  border: 1px solid rgba(214, 207, 203, 0.12);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.025);
}

.doc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.8rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(214, 207, 203, 0.1);
  background: rgba(0, 0, 0, 0.3);
}

.doc__name {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--white);
  word-break: break-all;
}

.doc__meta {
  font-size: 0.72rem;
  color: var(--muted);
}

.doc__bulk {
  display: flex;
  gap: 0.35rem;
  margin-left: auto;
}

.dets {
  display: grid;
}

.doc__empty,
.doc__note {
  padding: 0.7rem 1rem;
  font-size: 0.74rem;
  color: var(--muted);
}

.doc__note {
  padding-top: 0;
}

.ghost-btn:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

.det {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(214, 207, 203, 0.06);
  box-shadow: inset 3px 0 0 transparent;
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.det:last-child {
  border-bottom: 0;
}

.det--redact {
  background: rgba(204, 183, 174, 0.055);
  box-shadow: inset 3px 0 0 var(--almond-silk);
}

.det__body {
  flex: 1 1 14rem;
  min-width: 0;
}

.det__text {
  font-size: 0.88rem;
  color: var(--white);
  word-break: break-word;
}

.det__ctx {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.74rem;
  color: var(--muted);
  word-break: break-word;
}

.det__ctx mark {
  background: transparent;
  color: var(--almond-silk);
}

.det__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.tag {
  padding: 0.14rem 0.45rem;
  border: 1px solid rgba(214, 207, 203, 0.18);
  border-radius: 0.4rem;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dust-grey);
}

.tag--model {
  border-color: rgba(204, 183, 174, 0.42);
  color: var(--almond-silk);
}

.tag--flag {
  border-color: rgba(166, 128, 140, 0.5);
  color: #e3c3cd;
}

.det__choice {
  position: relative;
  display: inline-flex;
  border: 1px solid rgba(214, 207, 203, 0.18);
  border-radius: 0.7rem;
  overflow: hidden;
}

.det__choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.det__choice__opt {
  display: block;
  min-width: 4.1rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.74rem;
  text-align: center;
  color: var(--dust-grey);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.det__choice__opt--last {
  border-left: 1px solid rgba(214, 207, 203, 0.14);
}

.det__choice input:checked + .det__choice__opt {
  background: var(--white);
  color: var(--black);
  font-weight: 600;
}

.det__choice input:focus-visible + .det__choice__opt {
  outline: 2px solid var(--white);
  outline-offset: -3px;
}

.det__choice input:disabled + .det__choice__opt {
  opacity: 0.45;
  cursor: default;
}

.det__choice input:disabled:checked + .det__choice__opt {
  opacity: 0.85;
}

/* ------------------------------------------------------------- action bar */
.action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(214, 207, 203, 0.12);
}

.action-bar[hidden] {
  display: none;
}

.action-bar__tally {
  flex: 1 1 12rem;
  font-size: 0.8rem;
  color: var(--dust-grey);
}

.cta-button--dark {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
  border: 0;
  cursor: pointer;
}

.cta-button--dark:hover {
  background: var(--dust-grey);
}

.cta-button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ------------------------------------------------- outputs & verification */
.outputs {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.4rem;
}

.outputs:empty {
  display: none;
}

.output {
  padding: 1rem;
  border: 1px solid rgba(204, 183, 174, 0.26);
  border-radius: 1.1rem;
  background: linear-gradient(180deg, rgba(204, 183, 174, 0.07), rgba(255, 255, 255, 0.02));
}

.output--bad {
  border-color: rgba(166, 128, 140, 0.6);
  background: linear-gradient(180deg, rgba(166, 128, 140, 0.12), rgba(255, 255, 255, 0.02));
}

.output__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.8rem;
}

.output__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--white);
  word-break: break-all;
}

.output__meta {
  font-size: 0.72rem;
  color: var(--muted);
}

.output__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  padding: 0.5rem 1.05rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: var(--shadow-orb);
  transition: transform 0.25s var(--ease);
}

.output__link:hover {
  transform: translateY(-1px);
}

.output__link svg {
  width: 0.95rem;
  height: 0.95rem;
}

.verify {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(214, 207, 203, 0.14);
}

.verify__title {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.verify__list {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.verify__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.76rem;
  color: var(--dust-grey);
}

.verify__text {
  word-break: break-word;
  color: var(--white);
}

.verify__status {
  flex: none;
  padding: 0.1rem 0.4rem;
  border: 1px solid rgba(214, 207, 203, 0.2);
  border-radius: 0.35rem;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dust-grey);
}

.verify__status--removed {
  border-color: rgba(204, 183, 174, 0.5);
  color: var(--almond-silk);
}

.verify__status--failed {
  border-color: rgba(166, 128, 140, 0.7);
  color: #f2e2e6;
  background: rgba(166, 128, 140, 0.16);
}

.verify__detail {
  flex: 1 1 100%;
  color: var(--muted);
}

@keyframes rd-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes rd-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------------------------------------------------------------- 8. footer */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: var(--shell);
  margin-inline: auto;
  padding: 2.25rem 0 calc(env(safe-area-inset-bottom, 0px) + 2.25rem);
  border-top: 1px solid rgba(214, 207, 203, 0.1);
  font-size: 0.74rem;
  color: var(--muted);
}

.site-footer p {
  max-width: 44rem;
}

.site-footer__credit {
  flex: none;
}

.site-footer__link {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------- 9. motion, responsive, reduced */
@keyframes rd-slide-down {
  from {
    opacity: 0;
    transform: translate3d(0, -1.1rem, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rd-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 1.1rem, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rd-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Entrance choreography is pure CSS, so it also runs when JavaScript is unavailable. */
.site-header,
.trust-pill,
.hero__line,
.hero__copy,
.hero__actions,
.hero__foot {
  animation: rd-rise 0.9s var(--ease) both;
}
.site-header {
  animation-name: rd-slide-down;
  animation-duration: 0.7s;
}
.trust-pill {
  animation-delay: 0.18s;
}
.hero__line:nth-child(1) {
  animation-delay: 0.3s;
}
.hero__line:nth-child(2) {
  animation-delay: 0.46s;
}
.hero__copy {
  animation-delay: 0.62s;
}
.hero__actions {
  animation-delay: 0.74s;
}
.hero__foot {
  animation-name: rd-fade;
  animation-delay: 0.95s;
  animation-duration: 1.1s;
}

@media (max-width: 860px) {
  .hero__heading {
    letter-spacing: 0.02em;
  }
}

@media (max-width: 719px) {
  .nav-pill {
    display: none;
  }
  .menu-orb {
    display: block;
  }
  .logo-orb__name {
    display: none;
  }
  .logo-orb {
    padding: 0.4rem;
  }
  .principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
    max-width: 26rem;
  }
  .principle:nth-child(3) {
    grid-column: 1 / -1;
  }
  /* Cover on a narrow viewport shows only a central strip of the loop, which is the
     dome's own shadowed interior, so the mobile band can sit closer to the desktop
     alpha without the crest landing on the copy. */
  .hero__stack::before {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.54) 16%,
      rgba(0, 0, 0, 0.54) 86%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}

@media (max-width: 400px) {
  .principles {
    grid-template-columns: 1fr;
    max-width: 18rem;
  }
  .principle:nth-child(3) {
    grid-column: auto;
  }
}

/* Short viewports: the composition must compress by height as well as by width —
   a landscape phone or a half-height window has to keep Get Started on screen. */
@media (max-height: 760px) {
  .hero {
    gap: clamp(0.9rem, 3vh, 2rem);
    padding-block: clamp(0.85rem, 2.4vh, 1.5rem);
  }
  .hero__stack {
    gap: clamp(0.55rem, 1.9vh, 1.1rem);
  }
  .hero__heading {
    font-size: min(clamp(1.8rem, 8.4vw, 5.4rem), 13.5vh);
  }
  .hero__copy {
    font-size: 0.9rem;
  }
  .cta-button {
    padding: 0.74rem 2rem;
  }
  .site-header__cluster {
    gap: 0.5rem;
  }
}

@media (max-height: 600px) {
  .hero__foot {
    display: none;
  }
  .hero__heading {
    font-size: min(clamp(1.8rem, 8.4vw, 5.4rem), 12.5vh);
  }
}

@media (max-height: 470px) {
  .trust-pill {
    display: none;
  }
  .hero__copy {
    max-width: 27rem;
    font-size: 0.82rem;
  }
  .cta-button {
    padding: 0.6rem 1.6rem;
    font-size: 0.88rem;
  }
}

/* Touch sizes: the composer keeps its shape, but the grouped controls and every
   detection row reflow into a single column so nothing needs pinching. */
@media (max-width: 719px) {
  .reference {
    padding-top: clamp(2.5rem, 8vh, 4rem);
  }
  .composer__bar {
    flex-wrap: wrap;
  }
  .composer__spacer {
    display: none;
  }
  .send-btn {
    margin-left: auto;
  }
  .file-chip__name {
    max-width: 10.5rem;
  }
  .doc__bulk {
    margin-left: 0;
  }
  .det {
    align-items: flex-start;
  }
  .det__choice {
    width: 100%;
  }
  .det__choice__opt {
    flex: 1 1 0;
    min-width: 0;
    padding-block: 0.55rem;
  }
  .cta-button--dark {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  /*
   * The loop is never even fetched here, so the still frame is the whole
   * composition. It is the same image the loop opens on, which is why the scrim and
   * the veil bands are left exactly as they are: reduced-motion visitors get a
   * frozen frame of the design, not a different design.
   */
  .hero__video {
    display: none;
  }
  .cta-button:hover {
    transform: none;
  }
  /* The busy indicators report real state, so they stay visible: the spinner keeps
     turning slowly and the progress dot holds a steady colour instead of pulsing. */
  .send-btn__spinner {
    animation-duration: 1.1s !important;
  }
  .progress__dot {
    animation: none !important;
    opacity: 1;
  }
}