/* PaperSeal -- a small, calm sheet on top of Bootstrap. */

:root {
  --ps-ink: #12213a;
  --ps-line: #e3e6ea;
  --ps-wash: #f7f8fa;
}

html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--ps-wash);
  color: #1c2430;
}
main { flex: 1 0 auto; }

.ps-nav { background: var(--ps-ink); }
.ps-nav .nav-link { color: rgba(255, 255, 255, .78); }
.ps-nav .nav-link:hover,
.ps-nav .nav-link.active { color: #fff; }

/* ---- rotating hero ---------------------------------------------------------
   The artwork is semi-transparent (alpha ~0.5 over near-black), so whatever sits
   behind it decides the result. A dark band renders it as deep navy with the pale
   seal standing out, and gives white copy real contrast -- over the page's white it
   composites to a mid grey where small text would sit near 3.5:1 and fail AA. */

.ps-hero {
  position: relative;
  background: var(--ps-ink);
  border-bottom: 1px solid var(--ps-line);
  overflow: hidden;
  isolation: isolate;
}

.ps-hero-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ps-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
}
.ps-hero-img.is-active { opacity: 1; }

/* The source is a 1.87:1 composition and the band is wider than that, so `cover`
   scales to the width and crops VERTICALLY -- horizontal object-position does nothing
   here. Bias downward so the seal's sealed-document badge stays in frame; it is the
   one element in the artwork that says what the product does. */
.ps-hero-img { object-position: center 62%; }

.ps-hero-inner {
  position: relative;
  z-index: 1;
  min-height: clamp(380px, 34vw, 540px);
  display: flex;
  align-items: center;
}

.ps-hero-copy {
  max-width: 46%;
  color: #fff;
  transition: opacity 350ms ease;
}
.ps-hero-copy--left  { margin-right: auto; }
/* Positioned right, but the text itself stays left-aligned. Right-aligning a
   multi-line paragraph gives it a ragged left edge, and the eye loses the start of
   every line. Balance the composition by moving the block, not the text. */
.ps-hero-copy--right { margin-left: auto; }
.ps-hero-copy .lead { color: rgba(255, 255, 255, .82); }
.ps-hero-note { color: rgba(255, 255, 255, .62); }
.ps-hero-copy.is-swapping { opacity: 0; }

.ps-hero-dots {
  position: absolute;
  z-index: 2;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .5rem;
}
.ps-hero-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .65);
  background: transparent;
  cursor: pointer;
}
.ps-hero-dot.is-active { background: #fff; }
.ps-hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* On narrow screens the copy cannot share the band with the artwork -- cover-cropping
   a 1.87:1 image into a phone-width box leaves no empty half to sit in. So the image
   becomes its own band and the copy sits below it, centred, on the solid ground. */
@media (max-width: 767px) {
  .ps-hero-stage { position: relative; height: 46vw; min-height: 180px; }
  .ps-hero-img { object-position: center 58%; }
  .ps-hero-inner { min-height: 0; padding-top: 1.5rem; padding-bottom: 2.5rem; }
  .ps-hero-copy,
  .ps-hero-copy--right { max-width: 100%; margin: 0; text-align: center; }
  .ps-hero-dots { bottom: auto; top: calc(46vw - 1.75rem); }
}

/* Someone who has asked for less motion gets one still image and no rotation --
   the JS checks the same query before starting its timer. */
@media (prefers-reduced-motion: reduce) {
  .ps-hero-img { transition: none; }
  .ps-hero-copy { transition: none; }
}

.ps-card {
  background: #fff;
  border: 1px solid var(--ps-line);
  border-radius: 12px;
  padding: 1.5rem;
}

.ps-icon { font-size: 1.6rem; color: var(--ps-ink); }
.ps-icon-lg { font-size: 2.4rem; color: var(--ps-ink); }

.ps-quote {
  border-left: 3px solid var(--ps-line);
  padding: .5rem 0 .5rem 1rem;
  color: #4a5563;
  margin: 1.25rem 0;
}

/* Honeypot: off-screen for people, still in the DOM for bots. Not display:none,
   which the more careful bots skip. */
.ps-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The audit trail. Deliberately plain -- it is a record, not a feature tour. */
.ps-trail { list-style: none; padding: 0; margin: 0; font-size: .875rem; }
.ps-trail li {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .5rem 0;
  border-top: 1px solid var(--ps-line);
}
.ps-trail li:first-child { border-top: none; }
.ps-trail-type { font-weight: 600; text-transform: capitalize; min-width: 12rem; }
.ps-trail-when { color: #6b7484; }
.ps-trail-who { color: #4a5563; }
.ps-trail-meta { color: #8a94a2; }

.ps-viewer {
  border: 1px solid var(--ps-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  height: 72vh;
  min-height: 420px;
}
.ps-viewer iframe { width: 100%; height: 100%; border: 0; display: block; }

.ps-footer { background: #fff; border-top: 1px solid var(--ps-line); }

@media (max-width: 575px) {
  .ps-trail-type { min-width: 0; }
  .ps-viewer { height: 60vh; }
}

/* The mark. Transparent WebP, so it sits on the dark nav without a plate behind it.
   Sized by height only -- the artwork is wider than it is tall. */
.ps-mark { height: 34px; width: auto; }
.ps-mark-lg { height: 84px; width: auto; }
.ps-hero-mark { height: 132px; width: auto; }

@media (max-width: 575px) {
  .ps-hero-mark { height: 96px; }
}