/* ================================================================
   zappp — files that self-destruct
   A bold graphic system: two transformed panels split the composition
   into two colour fields. Flat colour, hard edges, heavy type. No glow, no gloss.
   ================================================================ */

:root {
  --ink:        #101014;
  --cream:      #F5F0E8;
  --lime:       #B6FF00;
  --coral:      #FF4D3D;

  --ink-70:     rgba(16, 16, 20, .70);
  --ink-45:     rgba(16, 16, 20, .45);
  --ink-12:     rgba(16, 16, 20, .12);
  --cream-70:   rgba(245, 240, 232, .70);
  --cream-45:   rgba(245, 240, 232, .45);
  --cream-14:   rgba(245, 240, 232, .14);

  --font: "Cabinet Grotesk", system-ui, -apple-system, sans-serif;

  --ease:  cubic-bezier(.22, .9, .24, 1);
  --snap:  cubic-bezier(.6, 0, .08, 1);

  /* Product content measures. The safe-area controller replaces the
     fallback widths with values measured from the fixed panel geometry. */
  --hero-size: clamp(52px, 6.8vw, 96px);
  --bolt-clearance-px: clamp(20px, 2.6vw, 52px);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--cream);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.modal-open,
body.menu-open { overflow: hidden; }

::selection { background: var(--lime); color: var(--ink); }

.visually-hidden {
  position: fixed !important;
  left: -10000px !important;
  top: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* ================================================================
   fixed background composition

   The composition is made from exactly two oversized rectangles. The
   full-height right panel establishes the upper diagonal. The lower left
   panel sits above it and establishes the parallel lower diagonal. Their
   relationship leaves the lightning-shaped ink space between them.
   ================================================================ */

body {
  --right-surface: var(--cream);
}

body.dragging,
body[data-state="transit"],
body[data-state="delivered"] {
  --right-surface: var(--lime);
}

.background {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: auto;
  height: auto;
  min-width: 100vw;
  min-height: 100vh;
  aspect-ratio: 1.489423;
  transform: translateX(-50%);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--ink);
}

.background-panel {
  position: absolute;
  bottom: 0;
  transform: skewX(-47.6deg);
  transform-origin: bottom left;
}

.background-panel-right {
  z-index: 1;
  left: 12.6%;
  width: 300%;
  height: 100%;
  background-color: var(--right-surface);
  transition: background-color .38s var(--ease);
}

.background-panel-left {
  z-index: 2;
  left: -300%;
  width: 326%;
  height: 40%;
  background: var(--ink);
}

/* ================================================================
   masthead
   ================================================================ */

.masthead {
  --logo-foreground: var(--cream);
  --logo-accent: var(--lime);
  --nav-foreground: var(--ink);
  --nav-border: var(--ink-45);
  --nav-surface: var(--right-surface);

  position: relative;
  z-index: 50;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(20px, 3.4vh, 34px) clamp(20px, 4vw, 48px);
}

body.menu-open .masthead {
  --logo-foreground: var(--ink);
  --logo-accent: var(--ink);
  --nav-foreground: var(--ink);
  --nav-border: var(--ink-45);
  --nav-surface: var(--lime);
}

body.doc .masthead {
  --logo-foreground: var(--cream);
  --logo-accent: var(--lime);
  --nav-foreground: var(--cream);
  --nav-border: var(--cream-45);
  --nav-surface: var(--ink);
}

body.doc.menu-open .masthead {
  --logo-foreground: var(--ink);
  --logo-accent: var(--ink);
  --nav-foreground: var(--ink);
  --nav-border: var(--ink-45);
  --nav-surface: var(--lime);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: clamp(21px, 2.4vw, 27px);
  letter-spacing: -.045em;
  color: var(--logo-foreground);
  text-decoration: none;
}

.wordmark-bolt {
  width: .82em;
  height: .82em;
  flex: none;
  display: block;
  color: var(--logo-accent);
  transform-origin: 50% 50%;
}

.wordmark:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }

.menu-btn {
  appearance: none;
  position: relative;
  z-index: 60;
  width: 46px; height: 46px;
  display: grid;
  place-content: center;
  gap: 7px;
  padding: 0;
  background-color: var(--nav-surface);
  border: 2px solid var(--nav-border);
  border-radius: 0;
  cursor: pointer;
  transition:
    background-color .38s var(--ease),
    border-color .16s var(--ease);
}

.menu-bar {
  display: block;
  width: 18px; height: 2.5px;
  background: var(--nav-foreground);
  transition:
    background-color .16s var(--ease),
    transform .28s var(--snap),
    width .2s var(--ease);
}

/* the shorter second bar echoes the bolt's asymmetry */
.menu-bar:last-child { width: 11px; justify-self: start; }

.menu-btn:hover { border-color: var(--lime); }
.menu-btn:hover .menu-bar { background: var(--lime); }
.menu-btn:hover .menu-bar:last-child { width: 18px; }
.menu-btn:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

body.menu-open .menu-btn { border-color: var(--nav-border); }
body.menu-open .menu-bar { width: 20px; background: var(--ink); }
body.menu-open .menu-bar:first-child { transform: translateY(4.75px) rotate(45deg); }
body.menu-open .menu-bar:last-child  { transform: translateY(-4.75px) rotate(-45deg); justify-self: center; }
body.menu-open .menu-btn:hover { border-color: var(--ink); }
body.menu-open .menu-btn:hover .menu-bar { background: var(--ink); }

/* ================================================================
   stage — content follows the fixed panel geometry

   The background owns the composition. Product content spans the usable
   viewport, while layout.js measures the approved panel edges and writes
   safe inline sizes for the black and cream regions.
   ================================================================ */

.stage {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: clamp(12px, 2vh, 28px) clamp(20px, 4vw, 64px) clamp(22px, 4vh, 44px);
}

.screen {
  --act-safe-inline-size: 380px;
  width: 100%;
  max-width: none;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  align-items: center;
  gap: clamp(28px, 4vw, 76px);
}

.screen[hidden] { display: none; }

.screen > * { min-width: 0; max-width: 100%; }


/* ---- left: the type block ---- */

/* the copy column is the INK zone — its type is always cream */
.copy {
  min-width: 0;
  grid-column: 1;
  justify-self: start;
  align-self: center;
  inline-size: min(100%, calc(var(--hero-size) * 7.25));
  max-inline-size: 100%;
  color: var(--cream);
  container-type: inline-size;
}

.copy > * {
  max-inline-size: min(100%, var(--content-safe-inline-size, 100%));
}

.eyebrow {
  margin: 0 0 clamp(12px, 1.8vh, 20px);
  display: inline-block;
  padding: 5px 12px 6px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.eyebrow-coral { background: var(--coral); color: var(--cream); }

/* One headline system for every primary product state. Copy wraps from
   the available measure; state-specific typography is intentionally absent. */
.headline {
  inline-size: min(100%, var(--content-safe-inline-size, 100%));
  max-inline-size: 100%;
  margin: 0 0 clamp(16px, 2.4vh, 26px);
  font-weight: 900;
  font-size: var(--hero-size);
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--cream);
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

/* Filenames use the same typography as every other hero. Only their
   overflow behavior differs so the full original name can remain data-safe. */
.headline-file {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: nowrap;
}

.subline {
  margin: 0 0 clamp(18px, 2.6vh, 28px);
  max-inline-size: min(34ch, var(--content-safe-inline-size, 100%));
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 500;
  color: var(--cream-70);
}

.transit-file { font-weight: 700; color: var(--cream); overflow-wrap: anywhere; }

.notice {
  inline-size: min(100%, var(--content-safe-inline-size, 100%));
  margin: 0 0 clamp(16px, 2.4vh, 24px);
  padding: 11px 15px;
  max-width: 36ch;
  background: var(--coral);
  color: var(--cream);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}

.notice[hidden] { display: none; }

.mode-link {
  appearance: none;
  max-inline-size: min(100%, var(--content-safe-inline-size, 100%));
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 2px solid var(--lime);
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  color: var(--cream);
  text-align: left;
  white-space: normal;
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}

.mode-link span { display: inline-block; transition: transform .22s var(--ease); }
.mode-link:hover { color: var(--lime); }
.mode-link:hover span { transform: translateX(4px); }
.mode-link-send:hover span { transform: translateX(-4px); }
.mode-link:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }

.copy-actions {
  inline-size: min(100%, var(--content-safe-inline-size, 100%));
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

/* only the action that changes context shows */
body[data-state="idle"]    .mode-link-send    { display: none; }
body[data-state="request"] .mode-link-request { display: none; }

/* ---- right: the act ---- */

/* the act column is the CREAM zone — anything bare inside it reads ink */
.act {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-self: end;
  align-self: center;
  grid-column: 2;
  inline-size: min(100%, var(--act-safe-inline-size));
  max-inline-size: 380px;
  color: var(--ink);
}

.act .mode-link { color: var(--ink); border-bottom-color: var(--ink); }
.act .mode-link:hover { color: var(--coral); border-bottom-color: var(--coral); }

.panel > *,
.meter > * { min-width: 0; max-width: 100%; }

/* the drop target — a hard block sitting on the cream field */
.drop {
  appearance: none;
  width: 100%;
  aspect-ratio: 1 / .82;
  max-height: 46vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: var(--ink);
  border: 3px solid var(--ink);
  font-family: var(--font);
  color: var(--cream);
  cursor: pointer;
  transition:
    background-color .16s var(--ease),
    border-color .16s var(--ease),
    color .16s var(--ease),
    transform .16s var(--ease);
}

.drop-label {
  font-weight: 900;
  font-size: clamp(28px, 3.2vw, 46px);
  letter-spacing: -.045em;
  line-height: 1;
}

.drop-sub {
  font-weight: 600;
  font-size: 13px;
  color: var(--cream-45);
  transition: color .16s var(--ease);
}

.drop:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.drop:hover .drop-sub { color: var(--ink-70); }
.drop:active { transform: scale(.99); }
.drop:focus-visible { outline: 3px solid var(--lime); outline-offset: 5px; }

/* a file is over the page — both the action and right field energize. */
body.dragging .drop {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}

body.dragging .drop .drop-sub { color: var(--ink-70); }

/* a file chosen from the dialog waits here for an explicit Send */
.drop.staged {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--cream);
}

.drop.staged .drop-sub { color: var(--cream-70); }
.drop.staged:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.drop.staged:hover .drop-sub { color: var(--ink-70); }

/* ---- panels (request, links, download, expired) ---- */

.panel {
  background: var(--ink);
  border: 3px solid var(--ink);
  padding: clamp(20px, 3vh, 30px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel-label {
  margin: 0;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lime);
}

.panel-fine {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cream-45);
}

.field-label {
  font-weight: 700;
  font-size: 14px;
  color: var(--cream);
}

.field-optional {
  font-weight: 500;
  color: var(--cream-45);
  text-transform: lowercase;
}

.field-textarea {
  width: 100%;
  resize: vertical;
  min-height: 82px;
  padding: 13px 15px;
  background: transparent;
  border: 2px solid var(--cream-14);
  border-radius: 0;
  font-family: var(--font);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.45;
  color: var(--cream);
  transition: border-color .16s var(--ease);
}

.field-textarea::placeholder { color: var(--cream-45); }
.field-textarea:hover { border-color: var(--cream-45); }
.field-textarea:focus-visible { outline: none; border-color: var(--lime); }

/* ---- buttons ---- */

.btn {
  appearance: none;
  padding: 15px 26px;
  background: var(--lime);
  border: 3px solid var(--lime);
  border-radius: 0;
  font-family: var(--font);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.01em;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), transform .12s var(--ease);
}

.btn:hover { background: var(--coral); border-color: var(--coral); color: var(--cream); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }

.btn:disabled {
  background: transparent;
  border-color: var(--cream-14);
  color: var(--cream-45);
  cursor: default;
  transform: none;
}

.btn-block { width: 100%; }
.btn-lg { padding: 18px 26px; font-size: 18px; }

.btn-copy { flex: none; }

.btn-copy.copied { background: var(--coral); border-color: var(--coral); color: var(--cream); }

.linkbtn {
  appearance: none;
  align-self: flex-start;
  padding: 4px 0;
  background: none;
  border: 0;
  border-bottom: 2px solid var(--cream-14);
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  color: var(--cream-70);
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}

.linkbtn:hover { color: var(--cream); border-color: var(--lime); }
.linkbtn:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

/* ---- link row ---- */

.linkrow { display: flex; gap: 10px; }

.linkrow-input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  background: transparent;
  border: 2px solid var(--cream-14);
  border-radius: 0;
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  color: var(--cream);
  transition: border-color .16s var(--ease);
}

.linkrow-input:hover { border-color: var(--cream-45); }
.linkrow-input:focus-visible { outline: none; border-color: var(--lime); }

/* ---- transfer meter ---- */

.meter[hidden] { display: none; }

.meter {
  background: var(--ink);
  border: 3px solid var(--ink);
  padding: clamp(20px, 3vh, 30px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.meter-pct {
  margin: 0;
  font-weight: 900;
  font-size: clamp(42px, 4.4vw, 64px);
  line-height: .85;
  letter-spacing: -.05em;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

.meter-track {
  width: 100%;
  height: 12px;
  background: var(--cream-14);
}

.meter-fill {
  height: 100%;
  width: 0%;
  background: var(--lime);
  transition: width .2s linear;
}

.meter-row {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--cream-45);
  font-variant-numeric: tabular-nums;
}

.trouble-head {
  margin: 0;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 38px);
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--coral);
}

.trouble-sub {
  margin: 0;
  font-size: 15px;
  color: var(--cream-70);
}

.trouble-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 4px;
}


.act[data-safe-band="compact"] .panel,
.act[data-safe-band="compact"] .meter {
  padding: 14px;
  gap: 9px;
}

.act[data-safe-band="tight"] .panel,
.act[data-safe-band="tight"] .meter {
  padding: 10px;
  gap: 6px;
}

.act[data-safe-band="tight"] .field-label {
  font-size: 12px;
  line-height: 1.25;
}

.act[data-safe-band="tight"] .field-textarea {
  min-height: 44px;
  padding: 7px 8px;
  resize: none;
  font-size: 13px;
  line-height: 1.25;
}

.act[data-safe-band="tight"] .btn {
  padding: 8px 9px;
  font-size: 13px;
  line-height: 1.2;
}

.act[data-safe-band="tight"] .panel-fine {
  font-size: 11px;
  line-height: 1.3;
}

.act[data-safe-band="tight"] .linkrow { gap: 6px; }
.act[data-safe-band="tight"] .linkrow-input { height: 40px; padding-inline: 8px; font-size: 12px; }

/* ================================================================
   full-screen menu
   ================================================================ */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  background: var(--lime);
  color: var(--ink);
  opacity: 1;
}

.menu-overlay[hidden] { display: none; }

.menu-inner {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(92px, 13vh, 132px) clamp(20px, 4vw, 48px) clamp(26px, 5vh, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}


.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 6vw, 84px);
  align-items: start;
}

.menu-label {
  margin: 0 0 20px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.menu-steps {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}

.menu-steps li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  border-top: 2px solid var(--ink-12);
  font-weight: 800;
  font-size: clamp(21px, 2.6vw, 32px);
  letter-spacing: -.035em;
  color: var(--ink);
}

.menu-steps li:last-child { border-bottom: 2px solid var(--ink-12); }

.menu-step-no {
  flex: none;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink-45);
}

.menu-plus {
  appearance: none;
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 20px;
  background: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: background-color .16s var(--ease);
}

.menu-plus:hover { background: var(--cream); border-color: var(--ink); }
.menu-plus:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.menu-plus-tag {
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lime);
  transition: color .16s var(--ease);
}

.menu-plus:hover .menu-plus-tag { color: var(--ink); }
.menu-plus:hover .menu-plus-line { color: var(--ink); }

.menu-plus-line {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.03em;
  color: var(--cream);
}

.menu-plus-line span { display: inline-block; transition: transform .22s var(--ease); }
.menu-plus:hover .menu-plus-line span { transform: translateX(4px); }

.menu-legal { display: flex; flex-direction: column; }

.menu-link {
  padding: 11px 0;
  border-top: 2px solid var(--ink-12);
  font-weight: 800;
  font-size: clamp(18px, 2.1vw, 25px);
  letter-spacing: -.035em;
  color: var(--ink);
  text-decoration: none;
  transition: padding-left .2s var(--ease);
}

.menu-link:last-child { border-bottom: 2px solid var(--ink-12); }
.menu-link:hover { padding-left: 10px; }
.menu-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.menu-foot {
  margin: clamp(26px, 4vh, 44px) 0 0;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-45);
}


/* ================================================================
   modal
   ================================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal[hidden] { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 20, .82);
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--cream);
  border: 3px solid var(--ink);
  outline: none;
}

.modal-body {
  padding: clamp(24px, 4vh, 34px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-eyebrow {
  margin: 0;
  align-self: flex-start;
  padding: 5px 12px 6px;
  background: var(--coral);
  color: var(--cream);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.modal-title {
  margin: 0;
  font-weight: 900;
  font-size: clamp(28px, 4.4vw, 40px);
  line-height: .94;
  letter-spacing: -.045em;
  color: var(--ink);
}

.perks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.perks li {
  padding: 11px 0;
  border-top: 2px solid var(--ink-12);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

.perks li:last-child { border-bottom: 2px solid var(--ink-12); }

.modal-body .btn { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.modal-body .btn:hover { background: var(--coral); border-color: var(--coral); }

.modal-body .linkbtn {
  align-self: center;
  color: var(--ink-45);
  border-bottom-color: var(--ink-12);
}
.modal-body .linkbtn:hover { color: var(--ink); border-color: var(--ink); }

/* ================================================================
   drop veil
   ================================================================ */

/* No scrim. The bolt field flooding lime is the drag feedback itself;
   an overlay on top only dulls the accent into olive. */
.drop-veil { display: none; }

/* ================================================================
   secondary pages — documents, so they scroll
   ================================================================ */

/* Every heading selector is scoped through `.legal` so it outranks the
   generic `.legal p` rule. The flat `.legal-eyebrow` lost that
   specificity fight and rendered ink-on-ink — invisible until selected. */

body.doc {
  height: auto;
  min-height: 100dvh;
  overflow-y: auto;
  background: var(--cream);
  color: var(--ink);
}

body.doc .background { display: none; }
body.doc .masthead { background: var(--ink); }

.legal-stage {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  justify-content: center;
  padding: clamp(34px, 6vh, 66px) clamp(20px, 4vw, 48px) clamp(40px, 6vh, 70px);
}

.legal { width: 100%; max-width: 700px; }

.legal p.legal-eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 13px 7px;
  background: var(--ink);
  color: var(--lime);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.legal h1.legal-title {
  margin: 0 0 12px;
  font-weight: 900;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: .88;
  letter-spacing: -.055em;
  color: var(--ink);
}

.legal p.legal-updated {
  margin: 0 0 26px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink-45);
}

.legal-tear {
  border: 0;
  height: 4px;
  margin: 0 0 34px;
  background: var(--lime);
}

.legal p.legal-intro {
  margin: 0 0 12px;
  font-size: clamp(17px, 1.6vw, 19px);
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink);
}

.legal section { margin-top: 40px; }

.legal h2 {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--ink);
  font-weight: 800;
  font-size: clamp(21px, 2.5vw, 28px);
  letter-spacing: -.04em;
  color: var(--ink);
}

.legal p {
  margin: 0 0 13px;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.62;
  color: var(--ink-70);
}

.legal p strong,
.legal li strong { color: var(--ink); font-weight: 700; }

.legal ul { margin: 0 0 13px; padding-left: 22px; }

.legal li {
  margin: 8px 0;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-70);
}

.legal li::marker { color: var(--coral); }

.legal a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--lime);
  transition: background-color .16s var(--ease);
}

.legal a:hover { background: var(--lime); }
.legal a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.legal-callout {
  margin: 22px 0 0;
  padding: 19px 23px;
  background: var(--ink);
  border-left: 5px solid var(--coral);
}

.legal .legal-callout p { margin: 0; font-size: 15.5px; color: var(--cream-70); }
.legal .legal-callout strong { color: var(--lime); }

.legal-home {
  display: inline-block;
  margin-top: 46px;
  padding-bottom: 4px;
  border-bottom: 3px solid var(--lime);
  font-weight: 800;
  font-size: 16.5px;
  color: var(--ink);
  text-decoration: none;
}

.legal-home:hover { background: var(--lime); }
.legal-home:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.foot {
  position: relative;
  z-index: 2;
  flex: none;
  padding: 26px clamp(20px, 4vw, 48px) calc(30px + env(safe-area-inset-bottom));
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.foot-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.foot-row span, .foot-sep {
  font-weight: 600;
  font-size: 13px;
  color: var(--cream-45);
}

.foot-links { display: flex; gap: 8px 20px; flex-wrap: wrap; justify-content: center; }

.foot-link {
  font-weight: 700;
  font-size: 13px;
  color: var(--cream-70);
  text-decoration: none;
  transition: color .16s var(--ease);
}

.foot-link:hover { color: var(--lime); }
.foot-link[aria-current="page"] { color: var(--lime); }
.foot-link:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

/* ================================================================
   responsive
   ================================================================ */

@media (max-width: 1100px) {
  body:not(.doc):not(.menu-open) .masthead {
    --nav-foreground: var(--cream);
    --nav-border: var(--cream-45);
    --nav-surface: var(--ink);
  }

  /* Portrait and taller compact screens use two vertical surface zones.
     Their widths still come from the measured panel boundary. */
  .stage {
    align-items: stretch;
    justify-items: stretch;
    padding-top: 0;
    padding-bottom: clamp(16px, 3vh, 28px);
  }

  .screen {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 46fr) minmax(0, 54fr);
    height: 100%;
    gap: 0;
  }

  .copy {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    padding-bottom: clamp(14px, 3vh, 26px);
  }

  .act {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    padding-top: clamp(14px, 3vh, 26px);
  }

  .headline { font-size: clamp(48px, 10.5vw, 72px); }
  .subline { max-inline-size: min(34ch, var(--content-safe-inline-size, 100%)); }

  .drop { aspect-ratio: auto; min-height: 150px; max-height: none; }

  .menu-grid { grid-template-columns: 1fr; gap: 28px; }
  .menu-inner { justify-content: flex-start; padding-top: clamp(72px, 12vh, 100px); }
}

@media (max-width: 560px) {
  .masthead { padding-top: 16px; padding-bottom: 16px; }
  .screen { grid-template-rows: minmax(0, 48fr) minmax(0, 52fr); }
  .copy { padding-bottom: 10px; }
  .act { padding-top: 10px; }
  .eyebrow { margin-bottom: 10px; }
  .headline {
    font-size: clamp(44px, 12.3vw, 54px);
    margin-bottom: 12px;
  }
  .subline { margin-bottom: 14px; font-size: 15px; }
  .linkrow { flex-direction: column; gap: 8px; }
  .btn-copy { width: 100%; }
  .copy-actions { flex-direction: column; gap: 8px; }
  .panel, .meter { padding: 16px; gap: 10px; }
  .field-textarea { min-height: 58px; padding: 9px 11px; }
  .btn { padding: 12px 16px; }
  .btn-lg { padding: 14px 18px; font-size: 17px; }
  .drop { min-height: 128px; padding: 18px; }
  .drop-label { font-size: clamp(26px, 8vw, 34px); }
  .panel-fine { font-size: 12.5px; }
}

/* Short landscape devices cannot afford a stacked flow. Content returns to
   two measured surface columns while the background remains untouched. */
@media (max-width: 1100px) and (orientation: landscape) and (max-height: 700px),
       (max-width: 900px) and (max-height: 560px) {
  .stage {
    align-items: center;
    padding-top: clamp(4px, 1vh, 10px);
    padding-bottom: clamp(8px, 2vh, 16px);
  }

  .screen {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
    grid-template-rows: minmax(0, 1fr);
    height: auto;
    gap: clamp(20px, 4vw, 48px);
    align-items: center;
  }

  .copy {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    padding: 0;
  }

  .act {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    padding: 0;
  }

  .headline {
    font-size: clamp(42px, 7.4vw, 68px);
    margin-bottom: clamp(10px, 2vh, 18px);
  }

  .eyebrow { margin-bottom: clamp(8px, 1.5vh, 12px); }
  .subline { margin-bottom: clamp(10px, 2vh, 18px); }
  .drop { min-height: 132px; max-height: 56vh; }
  .panel, .meter { padding: clamp(16px, 3vh, 22px); gap: 10px; }
  .field-textarea { min-height: 64px; }
}

/* Short desktop and laptop screens compress space before type. */
@media (max-height: 700px) and (min-width: 901px) {
  .stage {
    padding-top: clamp(4px, 1vh, 10px);
    padding-bottom: clamp(10px, 2vh, 18px);
  }
  .eyebrow { margin-bottom: clamp(8px, 1.4vh, 12px); }
  .headline {
    font-size: clamp(48px, 6.4vw, 84px);
    margin-bottom: clamp(10px, 1.8vh, 16px);
  }
  .subline { margin-bottom: clamp(12px, 2vh, 18px); }
  .drop { max-height: 38vh; }
}

/* ================================================================
   reduced motion
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* The request form follows the cream-side safe area as individual controls
   on narrow portrait screens. The approved background remains untouched. */
@media (max-width: 560px) and (orientation: portrait) {
  .screen-request .act[data-safe-mode="flow"] {
    inline-size: min(100%, var(--act-safe-inline-size));
    max-inline-size: 100%;
  }

  .screen-request .panel-form {
    width: 100%;
    max-width: 100%;
    padding: 0;
    gap: 7px;
    align-items: flex-end;
    background: transparent;
    border: 0;
  }

  .screen-request .panel-form > * {
    inline-size: min(100%, var(--content-safe-inline-size, 100%));
    max-inline-size: min(100%, var(--content-safe-inline-size, 100%));
    align-self: flex-end;
  }

  .screen-request .field-label { color: var(--ink); }
  .screen-request .field-optional { color: var(--ink-45); }

  .screen-request .field-textarea {
    min-height: 50px;
    padding: 8px 10px;
    resize: none;
    background: rgba(245, 240, 232, .76);
    border-color: var(--ink-12);
    color: var(--ink);
  }

  .screen-request .field-textarea::placeholder { color: var(--ink-45); }
  .screen-request .field-textarea:hover { border-color: var(--ink-45); }
  .screen-request .field-textarea:focus-visible { border-color: var(--ink); }

  .screen-request .panel-form .btn {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--cream);
  }

  .screen-request .panel-form .panel-fine {
    color: var(--ink-70);
    text-align: right;
  }
}

/* Compact portrait error treatment uses the same measured cream-side flow
   as the request form. No background geometry is changed or covered. */
@media (max-width: 560px) and (orientation: portrait) {
  .screen-transit .act[data-safe-mode="flow"] {
    inline-size: min(100%, var(--act-safe-inline-size));
    max-inline-size: 100%;
  }

  .surface-flow-mobile {
    width: 100%;
    max-width: 100%;
    padding: 0;
    gap: 8px;
    align-items: flex-end;
    background: transparent;
    border: 0;
  }

  .surface-flow-mobile > * {
    inline-size: min(100%, var(--content-safe-inline-size, 100%));
    max-inline-size: min(100%, var(--content-safe-inline-size, 100%));
    align-self: flex-end;
  }

  .surface-flow-mobile .trouble-head { color: var(--coral); text-align: right; }
  .surface-flow-mobile .trouble-sub { color: var(--ink-70); text-align: right; }
  .surface-flow-mobile .trouble-actions { align-items: stretch; }
  .surface-flow-mobile .btn { width: 100%; background: var(--ink); border-color: var(--ink); color: var(--cream); }
  .surface-flow-mobile .linkbtn { align-self: flex-end; color: var(--ink-70); border-color: var(--ink-12); }
}

/* Fixed overlays own the viewport; remove the underlying product stage from
   layout so short screens never inherit hidden page overflow. */
body.menu-open .stage,
body.modal-open .stage { display: none; }

@media (max-height: 560px) and (orientation: landscape) {
  .modal { padding: 10px; overflow-y: auto; }
  .modal-card { max-width: 400px; }
  .modal-body { padding: 14px 16px; gap: 9px; }
  .modal-title { font-size: clamp(25px, 5.5vw, 32px); }
  .perks li { padding: 6px 0; font-size: 14px; }
  .modal-body .btn { padding: 10px 16px; font-size: 15px; }
  .modal-body .linkbtn { font-size: 13px; }
}

@media (max-width: 380px) and (orientation: portrait) {
  .surface-flow-mobile .trouble-head { font-size: 22px; }
}

@media (max-width: 380px) and (orientation: portrait) {
  .surface-flow-mobile .trouble-sub {
    font-size: 14px;
    line-height: 1.4;
  }

  .surface-flow-mobile .trouble-actions {
    gap: 6px;
    margin-top: 0;
  }

  .surface-flow-mobile .trouble-actions .btn { padding-block: 10px; }
}

/* At the smallest supported portrait width the measured black safe band is
   narrower than a single desktop-sized navigation word. The container has
   already reached its geometric minimum here, so supporting copy controls
   take the final scaling step instead of crossing the bolt. */
@media (max-width: 340px) and (orientation: portrait) {
  .mode-link {
    font-size: 13px;
    line-height: 1.35;
  }

  .copy-actions .mode-link { inline-size: 100%; }
}

@media (max-width: 340px) and (orientation: portrait) {
  /* On very narrow portrait screens, place secondary navigation while the
     black safe band is still broad instead of asking it to wrap inside the
     bolt's narrow waist. */
  .screen-idle .copy,
  .screen-request .copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .screen-idle .eyebrow,
  .screen-request .eyebrow { order: 0; }

  .screen-idle .mode-link,
  .screen-request .mode-link {
    order: 1;
    margin-bottom: 8px;
  }

  .screen-idle .headline,
  .screen-request .headline { order: 2; }

  .screen-idle .subline,
  .screen-request .subline { order: 3; }

  .surface-flow-mobile .trouble-head {
    font-size: 13px;
    line-height: 1.3;
  }
}

@media (max-width: 340px) and (orientation: portrait) {
  .screen-idle .copy {
    display: block;
    position: relative;
  }

  .screen-idle .mode-link {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 140px;
    margin: 0;
    text-align: right;
  }
}