/* Static-first: the full statement and both cards remain readable without JS. */
html[data-concept="stoic"] main > #trust.trust,
#trust.trust {
  display: block;
  position: relative;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: #f7f5fa;
  color: #28222f;
}
#trust .trust-stage { position: relative; isolation: isolate; padding-bottom: 64px; }
#trust .trust-stage::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3CfeFuncA type='linear' slope='.16'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23grain)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 120% 100% at 0% 0%, #fff 0%, rgb(255 255 255 / 94%) 25%, rgb(255 255 255 / 65%) 48%, transparent 100%),
    linear-gradient(90deg, #dfd0fc, #b99af4);
  background-size: 180px 180px, 100% 100%, 100% 100%;
  pointer-events: none;
}
#trust .trust-intro {
  min-height: 85svh;
  display: grid;
  place-items: center;
  padding: 100px 24px 48px;
  text-align: center;
}
html[data-concept="stoic"] main > #trust h2,
#trust h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 26px);
  margin: 0;
  font-size: clamp(26px, 6.3vw, 84px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.055em;
}
#trust .trust-wordmark { font-family: var(--round); font-weight: 700; letter-spacing: -.065em; }
#trust .trust-statement { display: inline-block; }
#trust .trust-intro-cat { display: inline-flex; width: 112px; flex: 0 0 112px; margin-top: -20px; }
#trust .trust-intro-cat svg { width: 100%; height: auto; }
#trust .trust-content { width: min(1100px, calc(100% - 80px)); margin-inline: auto; }
#trust .trust-mark { position: absolute; top: 24px; right: 28px; width: 108px; display: flex; margin: 0; pointer-events: none; }
#trust .trust-mark > svg { width: 100%; height: auto; overflow: visible; }
#trust .trust-science-accessories { transform-origin: 300px 160px; }
#trust .trust-lock-original { opacity: 0; }
#trust .trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
#trust .trust-card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: 36px;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#trust .trust-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid rgb(255 255 255 / 80%);
  border-radius: 28px;
  background: linear-gradient(135deg, rgb(255 255 255 / 40%), rgb(255 255 255 / 14%));
  box-shadow: inset 0 2px 1px rgb(255 255 255 / 65%), inset 0 -1px 1px rgb(255 255 255 / 25%), 0 12px 36px rgb(69 41 104 / 5%);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
#trust .trust-card .trust-label { margin: 0 0 12px; color: #6f588c; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
#trust .trust-card h3 { padding-right: 100px; min-height: 2.8em; margin-bottom: 26px; font-size: 29px; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; }
#trust .trust-card p { color: #43364e; font-size: 17px; line-height: 1.85; letter-spacing: .01em; text-wrap: pretty; }
#trust .trust-card p + p { margin-top: 22px; }
#trust .trust-card .trust-lead { color: #302337; font-size: 19px; font-weight: 500; line-height: 1.7; letter-spacing: 0; }
#trust .trust-card strong { display: inline-block; color: inherit; font-weight: 600; }
/* A single viewport holds the scene while the document provides the timeline. */
html[data-concept="stoic"] main > #trust[data-motion="true"],
#trust[data-motion="true"] { height: 240svh; }
#trust[data-motion="true"] .trust-stage { position: sticky; top: 0; height: 100svh; padding: 0; }
#trust[data-motion="true"] .trust-intro {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding-block: 0;
  pointer-events: none;
}
#trust[data-motion="true"] .trust-wordmark,
#trust[data-motion="true"] .trust-statement {
  opacity: var(--trust-title-opacity, 1);
  transform: translateY(var(--trust-title-y, 0px));
}
#trust[data-motion="true"] .trust-intro-cat svg { visibility: hidden; }
#trust[data-motion="true"] .trust-content { position: absolute; top: calc(50% + 24px); left: 50%; margin: 0; transform: translate(-50%, -50%); }
#trust[data-motion="true"] .trust-mark { opacity: var(--trust-icon-opacity, 0); }
#trust[data-motion="true"] .trust-mark-science {
  transform: translate(var(--trust-science-x, 0px), var(--trust-science-y, 0px));
}
#trust[data-motion="true"] .trust-mark-lock {
  opacity: calc(var(--trust-icon-opacity, 0) * var(--trust-twin-opacity, 0));
  transform: translate(var(--trust-lock-x, 0px), var(--trust-lock-y, 0px));
}
#trust[data-motion="true"] .trust-science-accessories {
  opacity: var(--trust-accessories-opacity, 0);
  transform: translateY(var(--trust-accessory-y, 12px));
}
#trust[data-motion="true"] .trust-lock-original { opacity: calc(1 - var(--trust-lock-artwork, 1)); }
#trust[data-motion="true"] .trust-lock-morph { opacity: var(--trust-lock-artwork, 1); }
#trust[data-motion="true"] .trust-research::before,
#trust[data-motion="true"] .trust-research .trust-card-copy { opacity: var(--trust-card-a-opacity, 0); transform: translateY(var(--trust-card-a-y, 60px)); }
#trust[data-motion="true"] .trust-privacy::before,
#trust[data-motion="true"] .trust-privacy .trust-card-copy { opacity: var(--trust-card-b-opacity, 0); transform: translateY(var(--trust-card-b-y, 60px)); }
html[data-concept="stoic"].trust-scroll-active { scroll-snap-type: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #trust .trust-card::before { background: #f4effa; }
}
@media (max-width: 760px) {
  #trust .trust-intro { min-height: 90svh; }
  #trust .trust-intro-cat { width: 58px; flex-basis: 58px; margin-top: -10px; }
  #trust .trust-content { width: calc(100% - 40px); }
  #trust .trust-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  #trust .trust-card { padding: 24px; }
  #trust .trust-card::before { border-radius: 24px; }
  #trust .trust-card h3 { min-height: 3em; padding-right: 76px; font-size: 24px; }
  #trust .trust-card .trust-lead { font-size: 18px; }
  #trust .trust-mark { top: 22px; right: 18px; width: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  #trust .trust-intro { min-height: 50svh; }
}