/* ==========================================================================
   Prequis — site styles
   --------------------------------------------------------------------------
   PALETTE NOTE: --brand is the one variable to change once the real Prequis
   brand color is confirmed. It is currently set to the deep violet carried
   over from the earlier brand lineage. Everything else derives from the
   "inspection tag" palette (accept / hold / reject) and should stay put —
   those three are data colors, not decoration.
   ========================================================================== */

:root {
  /* Brand — sampled directly from the Prequis lockup gradient.
     --brand-lift / --brand are the gradient endpoints; the gradient itself is
     used only on the progress fill, where it echoes the mark without shouting. */
  --brand:        #6C21EE;
  --brand-deep:   #2D039A;
  --brand-lift:   #A971F8;
  --brand-wash:   #F2EBFE;
  --brand-grad:   linear-gradient(90deg, #A971F8 0%, #6C21EE 55%, #3B0BA8 100%);

  /* Ink + surface — cool stamped-tag stock, deliberately not cream */
  --ink:          #14181D;
  --slate:        #48535E;
  --slate-soft:   #6B7681;
  --stock:        #EBEEEC;
  --paper:        #FFFFFF;
  --rule:         #D5DAD7;
  --rule-soft:    #E4E8E5;

  /* Status — taken from physical inspection tags. Only ever used to show
     an actual conformance state. */
  --accept:       #1B6B47;
  --accept-wash:  #E4F0EA;
  --hold:         #B87514;
  --hold-wash:    #F8EEDC;
  --reject:       #A8322A;
  --reject-wash:  #F7E7E5;

  /* Type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1180px;
  --radius: 3px;
}

/* --------------------------------------------------------------------------
   Reset + base
   -------------------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--stock);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--display);
  font-stretch: 118%;
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.85rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.12rem; font-stretch: 108%; font-variation-settings: "wdth" 108; font-weight: 700; letter-spacing: -0.005em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.shell {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Eyebrow / label — the mono utility face doing signage duty */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--brand);
  flex: none;
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--slate);
  max-width: 56ch;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.82rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
}
.btn-primary:hover { background: var(--brand-deep); color: #fff; }

.btn-ghost {
  background: transparent;
  border-color: var(--rule);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--stock);
  position: sticky;
  top: 0;
  z-index: 50;
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.9rem;
}

/* ASSET SLOT: replace .brandmark contents with <img src="assets/prequis-wordmark.png">
   sized to height ~26px. The CSS wordmark below is a stand-in only. */
.brandmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-stretch: 118%;
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}
/* Lockup is ~5.17:1, so height drives the box and width follows. */
.brandmark img { height: 27px; width: auto; }
.footer .brandmark img { height: 25px; }

.nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-size: 0.9rem;
}
.nav a {
  color: var(--slate);
  text-decoration: none;
  font-weight: 500;
}
.nav a:hover { color: var(--ink); }
/* .nav a sets a slate color at higher specificity than .btn-primary, so the
   button colors have to be restated here or the label goes grey-on-purple. */
.nav a.btn { padding: 0.55rem 1.05rem; font-size: 0.87rem; }
.nav a.btn-primary,
.nav a.btn-primary:hover { color: #fff; }

.hero-caption {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--slate-soft);
  margin-top: 0.9rem;
  padding-left: 0.1rem;
}

@media (max-width: 720px) {
  .nav .nav-link { display: none; }
}

/* Wordmark is wide (5.17:1) — give it less height before it crowds the CTA. */
.cta-short { display: none; }

@media (max-width: 460px) {
  .brandmark img { height: 22px; }
  .nav a.btn { padding: 0.5rem 0.85rem; font-size: 0.82rem; white-space: nowrap; }
  .cta-long { display: none; }
  .cta-short { display: inline; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--rule);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero h1 { margin-bottom: 1.4rem; }
.hero .lede { margin-bottom: 2rem; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.store-note {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-top: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.store-note .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hold);
  flex: none;
}

/* Shipped, not pending — the dot carries that difference. */
.store-note-live { text-transform: none; letter-spacing: 0.02em; font-size: 0.76rem; }
.store-note-live .dot { background: var(--accept); }
.store-note-live a { color: var(--slate); text-decoration-color: var(--rule); }
.store-note-live a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Signature: the finding card
   -------------------------------------------------------------------------- */

.finding {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 var(--rule-soft), 0 18px 44px -28px rgba(20, 24, 29, 0.4);
  overflow: hidden;
}

.finding-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--rule-soft);
  background: #FAFBFA;
}

.finding-doc {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-soft);
}

.finding-count {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

.finding-body { padding: 1.35rem 1.15rem 1.15rem; }

.finding-clause {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.65rem;
}

.finding-text {
  font-size: 1.05rem;
  line-height: 1.45;
  margin-bottom: 1.25rem;
  color: var(--ink);
}

.tristate {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tri {
  font-family: var(--body);
  font-size: 0.83rem;
  font-weight: 600;
  padding: 0.72rem 0.4rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--slate);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 130ms ease;
}
.tri:hover { border-color: var(--slate-soft); color: var(--ink); }

.tri[aria-pressed="true"][data-state="accept"] {
  background: var(--accept-wash); border-color: var(--accept); color: var(--accept);
}
.tri[aria-pressed="true"][data-state="reject"] {
  background: var(--reject-wash); border-color: var(--reject); color: var(--reject);
}
.tri[aria-pressed="true"][data-state="na"] {
  background: var(--stock); border-color: var(--slate-soft); color: var(--slate);
}

/* Severity row — only appears when a nonconformity is recorded */
.severity {
  border-top: 1px solid var(--rule-soft);
  padding-top: 1rem;
  margin-top: 0.25rem;
}
.severity[hidden] { display: none; }

.severity-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-bottom: 0.55rem;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.chip {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: var(--paper);
  color: var(--slate);
  cursor: pointer;
  transition: all 130ms ease;
}
.chip[aria-pressed="true"] {
  background: var(--reject-wash);
  border-color: var(--reject);
  color: var(--reject);
}
.chip[data-sev="ofi"][aria-pressed="true"] {
  background: var(--hold-wash);
  border-color: var(--hold);
  color: var(--hold);
}

.finding-foot {
  border-top: 1px solid var(--rule-soft);
  padding: 0.8rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #FAFBFA;
}

.progress-track {
  flex: 1;
  height: 4px;
  background: var(--rule-soft);
  border-radius: 100px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 33%;
  background: var(--brand-grad);
  transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.finding-hint {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-soft);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  border-bottom: 1px solid var(--rule);
}
.section-light { background: var(--paper); }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head h2 { margin-bottom: 1rem; }

/* Modules */

.modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (max-width: 860px) { .modules { grid-template-columns: 1fr; } }

.module {
  background: var(--paper);
  padding: 1.85rem 1.6rem;
  display: flex;
  flex-direction: column;
}

.module-tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-bottom: 0.9rem;
}

.module h3 { margin-bottom: 0.7rem; }
.module > p { color: var(--slate); font-size: 0.95rem; margin-bottom: 1.15rem; }

.module ul {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  font-size: 0.9rem;
  color: var(--slate);
  border-top: 1px solid var(--rule-soft);
}
.module li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.module-price {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding-top: 0.4rem;
}
.module-price .free { color: var(--accept); }

/* Sequence — numbered because this genuinely is one */

.sequence {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  counter-reset: step;
}
@media (max-width: 780px) { .sequence { grid-template-columns: 1fr; } }

.step { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--brand);
  margin-bottom: 0.8rem;
}
.step h3 { margin-bottom: 0.55rem; }
.step p { color: var(--slate); font-size: 0.94rem; }

/* Pricing */

.price-table {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.05rem 1.4rem;
  border-bottom: 1px solid var(--rule-soft);
}
.price-row:last-child { border-bottom: 0; }
.price-row.is-bundle { background: var(--brand-wash); }

.price-name { font-weight: 600; font-size: 0.98rem; }
.price-name span {
  display: block;
  font-weight: 400;
  font-size: 0.87rem;
  color: var(--slate-soft);
  margin-top: 0.15rem;
}
.price-amt {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-amt.free { color: var(--accept); }

.price-foot {
  margin-top: 1.1rem;
  font-size: 0.88rem;
  color: var(--slate-soft);
}

/* Two-column prose block */

.split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.96rem;
  color: var(--slate);
}
.facts li:first-child { padding-top: 0; }
.facts strong { color: var(--ink); font-weight: 600; }
.facts .tick {
  width: 18px; height: 18px; margin-top: 3px;
  border-radius: 2px;
  background: var(--accept-wash);
  color: var(--accept);
  display: grid; place-items: center;
  font-size: 0.7rem;
  flex: none;
}

/* Signup form */

.signup {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  max-width: 440px;
}
.signup input[type="email"] {
  flex: 1 1 220px;
  font-family: var(--body);
  font-size: 0.95rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.signup input[type="email"]:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-wash); }
.signup .hp { position: absolute; left: -9999px; }

/* Disclaimer */

.disclaimer {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--hold);
  background: var(--paper);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  font-size: 0.92rem;
  color: var(--slate);
}
.disclaimer h3 {
  font-size: 0.72rem;
  font-family: var(--mono);
  font-stretch: normal;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-bottom: 0.7rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--ink);
  color: #A8B2BC;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.9rem;
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  align-items: flex-start;
}
.footer a { color: #E4E8EB; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer .brandmark { color: #fff; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer-legal {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid #2A3138;
  font-size: 0.82rem;
  color: #7C868F;
  max-width: 78ch;
}

/* --------------------------------------------------------------------------
   Long-form legal pages
   -------------------------------------------------------------------------- */

.doc { background: var(--paper); }
.doc-inner { max-width: 74ch; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.doc-inner h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 0.9rem; }
.doc-meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--slate-soft);
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.doc-inner h2 {
  font-size: 1.3rem;
  font-stretch: 108%;
  margin-top: 2.6rem;
  margin-bottom: 0.8rem;
}
.doc-inner p, .doc-inner li { color: var(--slate); }
.doc-inner ul { padding-left: 1.15rem; }
.doc-inner li { margin-bottom: 0.5rem; }


/* --------------------------------------------------------------------------
   Screenshots — horizontal scroller of real app captures
   -------------------------------------------------------------------------- */

.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 232px;
  gap: 1.25rem;
  overflow-x: auto;
  padding-block: 0.5rem 1.5rem;
  /* Bleed to the viewport edge so the strip reads as scrollable rather than
     as a row that happens to be cut off. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.shots::-webkit-scrollbar { height: 6px; }
.shots::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 100px; }

.shot { scroll-snap-align: start; }

.shot figure {
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 14px 34px -24px rgba(20, 24, 29, 0.5);
}
.shot img { width: 100%; height: auto; display: block; }

.shot figcaption {
  margin-top: 0.85rem;
  font-size: 0.87rem;
  color: var(--slate);
  line-height: 1.45;
}
.shot figcaption b {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.shots-hint {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-top: 0.25rem;
}


/* Unreleased items must not read as purchasable. */
.module-price-soon { color: var(--slate-soft); }
.price-row.is-soon .price-name,
.price-row.is-soon .price-name span { color: var(--slate-soft); }
.price-amt.soon {
  color: var(--hold);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   App Store badge
   --------------------------------------------------------------------------
   Apple's guidelines: use the preferred black badge; the grey border is part
   of the artwork and must not be modified; maintain clear space around it;
   and when other store badges appear, the App Store badge goes first and all
   badges match in size. The wrapper adds no background, border or shadow so
   the artwork stays unmodified — only scaled.

   Clear space: Apple requires a minimum margin around the badge equal to
   one-tenth of its height. At 50px tall that's 5px; the 0.75rem gap in
   .hero-actions clears it comfortably.
   -------------------------------------------------------------------------- */

.badge-link {
  display: inline-block;
  line-height: 0;
  padding: 5px;               /* clear space, not decoration */
  border-radius: 0;
  background: none;
  transition: opacity 140ms ease;
}
.badge-link:hover { opacity: 0.82; }
.badge-link img { height: 50px; width: auto; display: block; }

.badge-nav { padding: 4px; }
.badge-nav img { height: 40px; }

@media (max-width: 720px) {
  .badge-nav img { height: 34px; }
}
@media (max-width: 460px) {
  .badge-nav img { height: 30px; }
  .badge-link img { height: 44px; }
}

/* At phone width the status line wraps mid-phrase ("Live on the App / Store").
   Let each clause hold together and stack instead. */
@media (max-width: 560px) {
  .store-note-live {
    display: block;
    line-height: 1.7;
  }
  .store-note-live .dot {
    display: inline-block;
    margin-right: 0.45rem;
    vertical-align: middle;
  }
  .store-note-live > span.clause { white-space: nowrap; }
}

/* The badge is the primary CTA now, so the secondary button sits beside it
   rather than competing. Align on the badge's optical centre. */
.hero-actions { align-items: center; }


/* Advance control on the hero card. Appears once an item is graded. */
.finding-next {
  margin-top: 1rem;
  width: 100%;
  font-family: var(--body);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.7rem 1rem;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 140ms ease;
}
.finding-next:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.finding-next[hidden] { display: none; }
.tristate[hidden] { display: none; }


/* --------------------------------------------------------------------------
   Report exports — the PDF is the deliverable, so show it at page proportions
   rather than cropping it into a banner.
   -------------------------------------------------------------------------- */

.reports {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}
@media (max-width: 1000px) { .reports { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .reports { grid-template-columns: 1fr; } }

.report { margin: 0; }
.report img {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: #fff;
  /* A page casts a shadow; a screenshot doesn't. This reads as paper. */
  box-shadow: 0 2px 4px -2px rgba(20,24,29,0.18), 0 20px 44px -30px rgba(20,24,29,0.55);
}
.report figcaption {
  margin-top: 1.1rem;
  font-size: 0.9rem;
  color: var(--slate);
  line-height: 1.55;
  max-width: 46ch;
}
.report figcaption b {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 0.25rem;
}