/* Paper Seal's homepage. The colours and type come from packages/ui/src/tokens.css. */

@font-face { font-family: 'Libre Caslon Display'; font-weight: 400; font-display: swap; src: url(fonts/libre-caslon-display-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Libre Caslon Text'; font-weight: 400; font-display: swap; src: url(fonts/libre-caslon-text-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Libre Caslon Text'; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/libre-caslon-text-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 400; font-display: swap; src: url(fonts/public-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 500; font-display: swap; src: url(fonts/public-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 600; font-display: swap; src: url(fonts/public-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }

:root {
  color-scheme: light;
  --paper: #f3ecdf;
  --deep: #e8dfcd;
  --field: #fbf7ee;
  --ink: #191a23;
  --soft: #544e45;
  --rule: #cbbfa8;
  --rule-strong: #85796a;
  --wax: #96191f;
  --wax-deep: #6b0e14;
  --on-wax: #fff6e8;
  --seal-ink: #8f1a1f;
  --display: 'Libre Caslon Display', 'Libre Caslon Text', 'Iowan Old Style', Georgia, serif;
  --serif: 'Libre Caslon Text', 'Iowan Old Style', Georgia, serif;
  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --settle: cubic-bezier(0.2, 0.8, 0.25, 1.1);
  --lift: 0 1px 0 #0000000d, 0 18px 40px -18px #3a2a1466;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font: 400 1.0625rem / 1.6 var(--sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }

h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -0.012em; line-height: 1.05; }
h2 { max-width: 20em; font-size: clamp(2.375rem, 1.5rem + 3.4vw, 4rem); text-wrap: balance; }
h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.25; }

a { color: inherit; text-decoration-color: var(--rule-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--seal-ink); text-decoration-color: currentcolor; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

code { font-family: var(--mono); font-size: 0.86em; overflow-wrap: anywhere; }

.wrap { width: min(100%, 1208px); margin-inline: auto; padding-inline: clamp(20px, 5vw, 44px); }

.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 8px 14px;
  color: var(--on-wax);
  background: var(--wax);
  border-radius: 6px;
  transform: translateY(-200%);
}
.skip:focus { color: var(--on-wax); transform: none; }

.tag {
  margin-bottom: 16px;
  font: 500 0.8125rem / 1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--seal-ink);
}

.lede { max-width: 38em; margin-top: 20px; font-size: 1.1875rem; line-height: 1.55; color: var(--soft); }

.sub { margin: 72px 0 24px; font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem); }

.band { padding-block: clamp(72px, 9vw, 128px); }
.band-deep { background: var(--deep); }
.band-field { background: var(--field); border-block: 1px solid var(--rule); }

/* Masthead */

.top {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(6px);
}
.top-row { display: flex; gap: 24px; align-items: center; justify-content: space-between; min-height: 64px; }
.brand { display: inline-flex; gap: 6px; align-items: center; font: 400 1.25rem / 1 var(--serif); text-decoration: none; white-space: nowrap; }
.brand img { scale: 1.3; }
.top nav { display: flex; gap: 26px; margin-inline: auto; font-size: 0.9375rem; color: var(--soft); }
.top nav a { text-decoration: none; white-space: nowrap; }
.top-verify { font-size: 0.9375rem; font-weight: 600; white-space: nowrap; }

/* Hero */

.hero {
  padding-block: clamp(52px, 8vw, 104px) clamp(64px, 9vw, 120px);
  background: repeating-linear-gradient(0deg, #0000 0 39px, #5c46260f 39px 40px);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
h1 { font-size: clamp(4rem, 2rem + 8vw, 8rem); line-height: 0.98; letter-spacing: -0.02em; }
.hero-line { max-width: 19em; margin-top: 24px; font: 400 clamp(1.5rem, 1.25rem + 1vw, 2rem) / 1.28 var(--serif); text-wrap: pretty; }
.hero-sub { max-width: 32em; margin-top: 18px; font-size: 1.125rem; color: var(--soft); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 22px;
  font: 600 1rem / 1.2 var(--sans);
  color: var(--ink);
  text-decoration: none;
  background: var(--field);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  transition: background-color 140ms, color 140ms, translate 140ms;
}
.btn:hover { color: var(--ink); background: var(--deep); }
.btn:active { translate: 0 1px; }
.btn-wax { color: var(--on-wax); background: var(--wax); border-color: var(--wax); }
.btn-wax:hover { color: var(--on-wax); background: var(--wax-deep); }
.btn-light { color: var(--wax-deep); background: var(--on-wax); border-color: var(--on-wax); }
.btn-light:hover { color: var(--wax-deep); background: #f6e7cf; }
.btn-ghost { color: var(--on-wax); background: transparent; border-color: #fff6e88c; }
.btn-ghost:hover { color: var(--on-wax); background: #fff6e81f; }

.hero-note { margin-top: 20px; font-size: 0.9375rem; color: var(--soft); }

/* The sealed packet */

.packet { --flap: 0.42; position: relative; max-width: 500px; justify-self: end; width: 100%; padding-top: 26px; }
.packet-under {
  position: absolute;
  inset: 8px 22px 12px -6px;
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: 4px;
  rotate: -3.2deg;
}
.packet-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 5 / 4.1;
  overflow: hidden;
  background: #efe3cb;
  border: 1px solid var(--rule-strong);
  border-radius: 5px;
  box-shadow: var(--lift);
  rotate: 1.2deg;
}
.packet-flap { position: absolute; inset: -1px -1px auto; width: calc(100% + 2px); height: calc(var(--flap) * 100%); filter: drop-shadow(0 3px 4px #3a2a1433); }
.packet-flap path { fill: #f6ecd8; stroke: var(--rule-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.packet-form { display: grid; gap: 0; margin: 0 7% 6.5%; }
.packet-form div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 12px; align-items: baseline; padding-block: 7px; border-bottom: 1px solid var(--rule-strong); }
.packet-form dt { font: 500 0.75rem / 1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--soft); }
.packet-form dd { font: 400 1rem / 1.35 var(--serif); }
.packet-stamp { position: absolute; top: 48%; right: 6%; }
.packet-seal {
  position: absolute;
  top: calc(26px + var(--flap) * (100% - 26px));
  left: 50%;
  width: 34%;
  height: auto;
  translate: -50% -50%;
  filter: drop-shadow(0 8px 10px #3a0a0a59);
}

.stamp {
  display: inline-block;
  padding: 3px 12px;
  font: 600 0.8125rem / 1.5 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--seal-ink);
  border: 3px double currentcolor;
  rotate: -5deg;
}
.waiting { opacity: 0; }
.pressed { animation: press 420ms var(--settle) both; }

@keyframes press {
  from { opacity: 0; scale: 1.4; }
  65% { opacity: 1; scale: 0.96; }
}

/* The problem */

.neet { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; margin-top: 48px; }

.cancelled {
  position: relative;
  max-width: 400px;
  padding: 28px 32px 40px;
  background: var(--field);
  border-radius: 3px;
  box-shadow: var(--lift);
  rotate: -1.6deg;
}
.cancelled-head { padding-bottom: 12px; font: 400 1.25rem / 1.3 var(--serif); border-bottom: 2px solid var(--ink); }
.cancelled-head span { display: block; font: 500 0.75rem / 1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.cancelled-lines { display: grid; gap: 14px; margin-top: 22px; }
.cancelled-lines i { display: block; height: 7px; background: var(--deep); border-radius: 2px; }
.cancelled-lines i:nth-child(3n) { width: 72%; }
.cancelled-lines i:nth-child(4n) { width: 88%; }
.stamp-big {
  position: absolute;
  top: 46%;
  left: 50%;
  padding: 6px 18px;
  font: 400 clamp(1.625rem, 1.2rem + 2vw, 2.5rem) / 1.2 var(--serif);
  letter-spacing: 0.1em;
  border-width: 5px;
  background: #fbf7eee0;
  translate: -50% -50%;
  rotate: -9deg;
}

.dates { display: grid; gap: 0; margin-bottom: 28px; border-top: 2px solid var(--ink); }
.dates li { display: grid; grid-template-columns: 6.25em minmax(0, 1fr); gap: 16px; align-items: baseline; padding-block: 14px; border-bottom: 1px solid var(--rule-strong); }
.dates b { font: 400 1.5rem / 1.2 var(--serif); }
.neet-text > p { max-width: 34em; font-size: 1.125rem; }

.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.sides article { padding: 24px 40px 28px 0; }
.sides article + article { padding-inline: 40px 0; border-left: 1px solid var(--rule-strong); }
.side-tag { font: 500 0.75rem / 1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--seal-ink); }
.sides h4 { margin: 4px 0 8px; font-size: 1.5rem; }

.why { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: end; }
.plain { display: grid; gap: 14px; max-width: 37em; }
.plain b { font-weight: 600; }
blockquote { padding-left: 24px; border-left: 3px solid var(--wax); }
blockquote p { font: italic 400 clamp(1.5rem, 1.25rem + 1vw, 1.875rem) / 1.3 var(--serif); }
blockquote footer { margin-top: 12px; font-size: 0.9375rem; color: var(--soft); }

/* How it works */

.steps { margin-top: 56px; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 230px minmax(0, 1fr);
  gap: 0 clamp(24px, 4vw, 48px);
  padding-bottom: 44px;
}
.step::before {
  position: absolute;
  top: 4px;
  bottom: 0;
  left: 21px;
  width: 2px;
  content: '';
  background: var(--ink);
}
.step:last-child::before { bottom: auto; height: 44px; }
.step:last-child { padding-bottom: 0; }

.step-no {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  font: 400 1.25rem / 1 var(--serif);
  color: var(--on-wax);
  background: var(--wax);
  border-radius: 54% 46% 51% 49% / 47% 54% 46% 53%;
  box-shadow: 0 0 0 6px var(--paper);
}

.art { width: 100%; height: auto; overflow: visible; }
.art .sheet, .art .sheet rect, .lock-art .sheet { fill: var(--field); stroke: var(--ink); stroke-width: 1.5; }
.art .box { fill: var(--field); stroke: var(--ink); stroke-width: 1.5; }
.art .ink { fill: var(--ink); }
.art .slot { fill: var(--paper); }
.art .wax { fill: var(--wax); }
.art .line { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.art .dash { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 4; }
.art .tick { fill: none; stroke: var(--wax); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.art .glass { fill: #fbf7ee8c; stroke: var(--ink); stroke-width: 3; }
.art .handle { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.art .pips circle { fill: #ffffff2e; }
.art .pips .pick { fill: #e0554d; }
.art .pips-light circle { fill: var(--field); stroke: var(--ink); stroke-width: 1.5; }
.art .pips-light .pick { fill: var(--wax); stroke: var(--wax); }

.who { font-size: 0.875rem; color: var(--soft); }
.who b { font-weight: 600; color: var(--ink); }
.who b::after { margin-inline: 8px; content: '/'; color: var(--rule-strong); font-weight: 400; }
.step h3 { margin: 4px 0 8px; font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem); }
.step-text > p:not(.who) { max-width: 44em; }
.watch { display: inline-block; margin-top: 8px; padding-block: 4px; font-size: 0.9375rem; font-weight: 600; color: var(--seal-ink); }

.locks {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.25fr);
  gap: 32px 24px;
  align-items: center;
  padding: clamp(24px, 4vw, 48px);
  margin-top: 88px;
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.locks figcaption { grid-column: 1 / -1; }
.locks h3 { font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.25rem); }
.locks figcaption p { margin-top: 8px; color: var(--soft); }
.lock { align-self: stretch; min-width: 0; }
.lock-tag { margin-bottom: 16px; font: 500 0.8125rem / 1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--seal-ink); }
.lock b { font-weight: 600; }
.lock-art { width: 112px; height: 112px; margin-bottom: 20px; }
.lock-art .ticks { fill: none; stroke: var(--ink); stroke-width: 2; }
.lock-art .wax-line { fill: none; stroke: var(--wax); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.plus { font: 400 3.5rem / 1 var(--display); text-align: center; color: var(--seal-ink); }

.holders { display: grid; grid-template-columns: repeat(10, minmax(0, 40px)); gap: 8px; }
.holders i { display: block; aspect-ratio: 1; background: var(--field); border: 1.5px solid var(--ink); border-radius: 50%; }
.holders i.on { background: var(--wax); border-color: var(--wax); }
.holders i.neutral { rotate: 45deg; border-radius: 3px; scale: 0.8; }
.holders-key { display: grid; grid-template-columns: repeat(10, minmax(0, 40px)); gap: 8px; margin: 10px 0 18px; font-size: 0.875rem; color: var(--soft); }
.holders-key span:first-child { grid-column: 1 / span 7; }
.holders-key span:last-child { grid-column: 8 / -1; white-space: nowrap; }

/* Demo clips */

.clips { display: grid; gap: clamp(48px, 6vw, 80px); margin-top: 56px; }
.clip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr); gap: clamp(28px, 4vw, 56px); align-items: center; scroll-margin-top: 96px; }
.clip-no { display: flex; gap: 14px; font: 500 0.8125rem / 1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--seal-ink); }
.clip-no span { color: var(--soft); }
.clip h3 { margin: 8px 0 10px; font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem); text-wrap: balance; }
.clip-text > p:last-child { color: var(--soft); }

.clip-frame { position: relative; padding: 10px; background: #fff; border-radius: 3px; box-shadow: var(--lift); }
.clip-frame::before, .clip-frame::after {
  position: absolute;
  z-index: 1;
  width: 84px;
  height: 24px;
  content: '';
  background: #e7d9b4b8;
  box-shadow: 0 1px 2px #3a2a1426;
  pointer-events: none;
}
.clip-frame::before { top: -11px; left: -22px; rotate: -38deg; }
.clip-frame::after { top: -11px; right: -22px; rotate: 38deg; }
.clip video { width: 100%; height: auto; background: var(--deep); }

/* Features */

.group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr); gap: 24px clamp(28px, 4vw, 56px); padding-top: 36px; margin-top: 64px; border-top: 2px solid var(--ink); }
.group-head { position: sticky; top: 96px; align-self: start; }
.group-head h3 { font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.125rem); text-wrap: balance; }
.group-head p { margin-top: 10px; color: var(--soft); }
.feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(28px, 4vw, 48px); }
.feats article:last-child:nth-child(odd) { grid-column: 1 / -1; }
.feats h4 { margin-bottom: 8px; font-size: 1.3125rem; text-wrap: balance; }

/* Trust */

.table-wrap { margin-top: 48px; }
.trust { width: 100%; border-collapse: collapse; }
.trust th, .trust td { padding: 16px 28px 16px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule-strong); }
.trust thead th { padding-block: 0 10px; font: 500 0.8125rem / 1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); border-bottom: 2px solid var(--ink); }
.trust tbody th { width: 19%; font: 400 1.3125rem / 1.3 var(--serif); }
.trust td { width: 40.5%; }
.trust td:last-child { padding-right: 0; }

.attacks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 48px); border-top: 2px solid var(--ink); }
.attacks div { padding-block: 14px; border-bottom: 1px solid var(--rule-strong); }
.attacks dt { font-weight: 600; }
.attacks dd { color: var(--soft); }
.fine { margin-top: 18px; font-size: 0.9375rem; color: var(--soft); }

/* Limits */

.limits {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr);
  gap: 40px clamp(28px, 4vw, 56px);
  padding: clamp(24px, 4.5vw, 56px);
  background: var(--field);
  border: 1px solid var(--rule);
  border-top: 6px solid var(--wax);
  border-radius: 4px;
  box-shadow: var(--lift);
}
.limits h2 { font-size: clamp(2.125rem, 1.5rem + 2vw, 3rem); }
.limits-head > p:not(.tag, .stamp) { margin-top: 16px; color: var(--soft); }
.limits-stamp { margin-top: 28px; }
.limit-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 40px); }
.limit-list h3 { margin-bottom: 6px; font-size: 1.1875rem; line-height: 1.3; }
.limit-list p { font-size: 1rem; color: var(--soft); }

/* Close */

.close { color: var(--on-wax); background: var(--wax); }
.close-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 36px; align-items: center; padding-block: 56px; }
.close img { filter: drop-shadow(0 6px 10px #2a050a80); }
.close h2 { font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.25rem); }
.close p { margin-top: 8px; color: #fff6e8d9; }
.close .actions { margin-top: 0; }

/* Footer */

.foot { padding-block: 44px; font-size: 0.9375rem; background: var(--deep); }
.foot-row { display: flex; flex-wrap: wrap; gap: 28px 64px; justify-content: space-between; }
.foot-brand { display: flex; gap: 10px; align-items: center; max-width: 24em; }
.foot-brand img { flex: none; scale: 1.3; }
.foot-brand b { display: block; font: 400 1.125rem / 1.3 var(--serif); }
.foot-brand p { color: var(--soft); }
.foot ul { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 44px; }
.foot li span { display: block; font: 500 0.75rem / 1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--soft); }

/* Narrower screens */

@media (max-width: 1080px) {
  .top nav { display: none; }
  .group, .limits { grid-template-columns: minmax(0, 1fr); }
  .group-head { position: static; max-width: 38em; }
  .clip { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .clip-text { max-width: 38em; }
  .close-row { grid-template-columns: auto minmax(0, 1fr); }
  .close .actions { grid-column: 2; }
}

@media (max-width: 820px) {
  .hero-grid, .neet, .why { grid-template-columns: minmax(0, 1fr); }
  .packet { justify-self: center; max-width: 440px; }
  .cancelled { justify-self: center; width: 100%; }
  .step { grid-template-columns: 44px minmax(0, 1fr); gap: 0 18px; }
  .art { grid-column: 2; max-width: 190px; margin-bottom: 16px; }
  .step-text { grid-column: 2; }
  .step-no { grid-row: 1; }
  .locks { grid-template-columns: minmax(0, 1fr); }
  .plus { text-align: left; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .sides, .feats, .attacks, .limit-list { grid-template-columns: minmax(0, 1fr); }
  .sides article { padding: 20px 0; }
  .sides article + article { padding: 20px 0; border-left: 0; border-top: 1px solid var(--rule-strong); }
  .actions .btn { flex: 1 1 100%; }
  .packet { --flap: 0.34; }
  .packet-body { aspect-ratio: 5 / 4.5; }
  .packet-seal { width: 30%; }
  .packet-form dd { font-size: 0.9375rem; }
  .holders-key { display: flex; justify-content: space-between; }
  .packet-stamp { display: none; }
  .clip-frame { padding: 6px; }
  .clip-frame::before, .clip-frame::after { width: 64px; height: 20px; }
  .clip-frame::before { top: -9px; left: -14px; }
  .clip-frame::after { top: -9px; right: -14px; }

  /* The table becomes one entry per party. */
  .trust thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .trust, .trust tbody, .trust tr, .trust th, .trust td { display: block; width: 100%; }
  .trust tr { padding-block: 18px; border-top: 1px solid var(--rule-strong); }
  .trust tbody th { width: 100%; padding: 0 0 8px; border: 0; }
  .trust td { padding: 8px 0 0; border: 0; }
  .trust td::before { display: block; font: 500 0.75rem / 1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--seal-ink); content: attr(data-label); }

  .close-row { grid-template-columns: minmax(0, 1fr); }
  .close .actions { grid-column: 1; }
  .close img { width: 96px; height: 96px; }
  .foot ul { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 400px) {
  .top-verify { font-size: 0.875rem; }
  .holders, .holders-key { gap: 4px; }
}

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

@media print {
  .top, .skip { display: none; }
}