/* Local variable fonts keep the record and signature consistent across devices. */
@font-face {
  font-family: "Libre Caslon Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./landing-libre-caslon.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./landing-caveat.woff2") format("woff2");
}

/* ============ Trust ============ */
.trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.trust-badges {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.badge-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.badge-item p {
  margin: 4px 0 0;
  max-width: 40ch;
  line-height: 1.55;
}
.badge-item h4 {
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 600;
  margin: 0;
}
.badge-item p {
  font-size: 13.5px;
  color: var(--ink-soft);
}
/* 记录卡上方的商标归属小字：DigiCert® 链到其官网，句子由法务定稿（2026-10-20）。 */
.trust-legal {
  margin: 22px 0 0;
  max-width: 46ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-faint);
}
.trust-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.trust-legal a:hover {
  color: var(--ink-soft);
}
.trust-grid {
  align-items: center;
}
@media (min-width: 761px) {
  #trust {
    height: 800px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  #trust > .wrap {
    width: 100%;
  }
}
.trust-grid .trust-badges {
  margin-top: 36px;
  gap: 24px;
}
.trust-visual {
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-visual {
  position: relative;
  overflow: hidden;
  display: block;
  background:
    radial-gradient(120% 90% at 85% 10%, var(--accent-soft) 0%, rgba(236, 233, 252, 0) 55%),
    var(--surface);
}
.trust-visual svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Trust: a printed creation record (design "1.4" › Monsora / Record / Record Card), two sheets stacked.
   1em = 10px of the 320px-wide design, sized so the stack fills ~88% of the panel's height. */
.trust-visual.tv-proof {
  container-type: inline-size;
}
.record-art {
  position: absolute;
  inset: 0;
}
.record-art.art-fitted {
  --art-line: 6px;
  inset: auto;
  left: 50%;
  top: 50%;
  width: 2760px;
  height: 2070px;
  transform: translate(-50%, -50%) scale(var(--art-scale));
}
.record-art.art-fitted .pf {
  font-size: 60px;
}
.record-art.art-fitted .rc-stack {
  font-size: 38.088px;
}
/* the uploaded source file, layered over the left edge of the record it produced */
.pf {
  position: absolute;
  inset: 0;
  z-index: 2;
  font-size: calc(100cqw / 46);
  pointer-events: none;
}
.pf-asset {
  position: absolute;
  left: 4.6em;
  top: 3em;
  width: 15.8em;
  box-sizing: border-box;
  padding: 1em;
  background: #fff;
  border: var(--art-line, 1px) solid var(--line);
  border-radius: 1.6em;
  box-shadow: 0 0.8em 2.4em rgba(21, 19, 15, 0.12);
}
.pf-img {
  position: relative;
  height: 11em;
  border-radius: 1em;
  overflow: hidden;
}
.pf-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
  display: block;
}
.pf-up {
  position: absolute;
  left: 0.6em;
  top: 0.6em;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 1em;
  font-weight: 700;
  color: #15130f;
  background: #e9fe8a;
  border-radius: 999px;
  padding: 0.25em 0.65em 0.25em 0.45em;
}
.pf-up svg {
  width: 1.1em;
  height: 1.1em;
  stroke-width: 2.4 !important;
}
.pf-name {
  margin: 0.8em 0 0;
  font-size: 1.35em;
  font-weight: 700;
  color: var(--ink);
}
.rc-stack {
  --serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --rc-ink: #1d1c1b;
  --rc-soft: #5c5957;
  --rc-mute: #8a8784;
  --rc-seal: #4a7c8c;
  position: absolute;
  top: 50%;
  left: 63%;
  z-index: 1;
  width: 32em;
  font-size: 1.38cqw;
  transform: translate(-50%, -50%);
}
/* the sheet underneath shows only its top edge above the front record */
.rc-back {
  position: absolute;
  inset: 0 0 2.7em;
  border: var(--art-line, 1px) solid #fff;
  border-radius: 3.2em;
  background: #fff;
  box-shadow: 0 0.4em 1.6em rgba(0, 0, 0, 0.1);
}
.rc {
  position: relative;
  margin-top: 2.7em;
  border: var(--art-line, 1px) solid #fff;
  border-radius: 3.2em;
  overflow: hidden;
}
.rc-paper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.4em;
  border-radius: 0.4em;
  background: #fff;
  box-shadow: 0 0.4em 1.6em rgba(0, 0, 0, 0.1);
  color: var(--rc-ink);
  font-family: var(--serif);
  line-height: normal;
}
.rc-logo {
  margin: 0;
  font: 600 3.06em/1.556 var(--sans);
}
.rc-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  padding-top: 2.2em;
  text-align: center;
}
.rc-meta p,
.rc-meta div {
  margin: 0;
}
.rc-kicker {
  font-size: 1.1em;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.rc-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  padding-top: 0.6em;
  font-size: 1em;
  letter-spacing: 0.03em;
  color: var(--rc-soft);
  white-space: nowrap;
}
.rc-dots {
  width: 100%;
  margin: 2em 0 0;
  font-size: 0.9em;
  letter-spacing: 0.02em;
  color: var(--rc-mute);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.rc-evidence {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  width: 100%;
  padding: 1.4em 0;
}
.rc-evidence + .rc-dots {
  margin-top: 0;
}
.rc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 1.1em;
  letter-spacing: 0.04em;
  color: var(--rc-soft);
  white-space: nowrap;
}
.rc-hash {
  font-size: 1.2em;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.rc-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  padding: 2.2em 0 0.8em;
}
.rc-foot p {
  margin: 0;
  font-size: 1.3em;
  line-height: 1.46;
  text-align: center;
}
.rc-sign {
  font-family: "Caveat", "Bradley Hand", "Segoe Script", cursive;
  font-size: 3em;
  line-height: 1.42;
  rotate: 3deg;
}
.rc-export {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  height: 3em;
  padding: 0 1.6em;
  border-radius: 999px;
  background: var(--rc-ink);
  box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.05);
  color: #fff;
  font: 500 1.3em/1.385 var(--sans);
}
.rc-export img {
  width: 1.077em;
  height: 1.077em;
}
/* "certified" seal stamped over the top-right of the record */
.rc-seal {
  position: absolute;
  left: 22.35em;
  top: 6.57em;
  width: 7.36em;
  height: 7.36em;
  rotate: 12deg;
  color: var(--rc-seal);
}
.rc-seal > img,
.rc-seal > svg {
  position: absolute;
}
.rc-ring1 {
  left: 0.016em;
  top: 0.016em;
  width: 7.328em;
  height: 7.328em;
}
.rc-ring2 {
  left: 0.296em;
  top: 0.296em;
  width: 6.768em;
  height: 6.768em;
}
.rc-ring3 {
  left: 1.488em;
  top: 1.488em;
  width: 4.384em;
  height: 4.384em;
}
/* exempt from the panel's outline-icon style (.trust-visual svg: no fill, 1.8 stroke), which smears small glyphs */
.trust-visual .rc-seal-text {
  fill: currentColor;
  stroke: none;
}
.rc-seal-text {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: var(--serif);
  font-weight: 700;
  fill: currentColor;
}
.rc-seal-mid {
  position: absolute;
  left: 1.6em;
  top: 2.4em;
  width: 4.16em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08em;
  font-family: var(--serif);
  white-space: nowrap;
}
.rc-seal-mid img {
  width: 1.12em;
  height: 1.12em;
}
.rc-seal-mid b {
  font-size: 0.6em;
  letter-spacing: 0.08em;
}
.rc-seal-mid span {
  font-size: 0.48em;
  letter-spacing: 0.08em;
}
@media (max-width: 520px) {
  .trust-visual {
    aspect-ratio: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}
@media (max-width: 760px) {
  .trust-grid {
    grid-template-columns: 1fr;
  }
}