/*
 * Scientific Floor product detail — Product Passport / Material Bench
 *
 * This stylesheet is deliberately isolated from the legacy product templates.
 * Every rule is scoped by `.sfpd-page` and uses logical properties so the same
 * component tree can serve TR, EN and AR content.
 */

.sfpd-page {
  --sfpd-red: #D0364D;
  --sfpd-red-dark: #A9263C;
  --sfpd-ink: #333A40;
  --sfpd-muted: #667079;
  --sfpd-soft: #F3F7F9;
  --sfpd-cool: #F6F7FA;
  --sfpd-warm: #EEE8E2;
  --sfpd-paper: #FFFFFF;
  --sfpd-line: #D6DCE0;
  --sfpd-line-strong: #AEB7BD;
  --sfpd-shell: 1440px;
  --sfpd-edge: clamp(20px, 5vw, 64px);
  --sfpd-section-space: clamp(68px, 6vw, 96px);
  position: relative;
  z-index: 10;
  overflow: clip;
  color: var(--sfpd-ink);
  background: var(--sfpd-paper);
  font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-weight: 400;
}

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

.sfpd-page img {
  display: block;
  max-inline-size: 100%;
}

.sfpd-page h1,
.sfpd-page h2,
.sfpd-page h3,
.sfpd-page h4,
.sfpd-page p,
.sfpd-page figure,
.sfpd-page dl,
.sfpd-page dd {
  margin: 0;
}

.sfpd-page h1,
.sfpd-page h2,
.sfpd-page h3,
.sfpd-page h4 {
  color: var(--sfpd-ink);
  font-weight: 600;
  text-wrap: balance;
}

.sfpd-shell {
  inline-size: min(var(--sfpd-shell), calc(100% - (2 * var(--sfpd-edge))));
  margin-inline: auto;
}

.sfpd-eyebrow,
.sfpd-kicker,
.sfpd-section__index,
.sfpd-section-index,
.sfpd-code {
  display: block;
  color: var(--sfpd-red);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.sfpd-section-index {
  margin-block-end: 12px;
  color: var(--sfpd-ink);
  font-variant-numeric: tabular-nums;
}

.sfpd-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 9px;
  align-items: center;
  color: #747E85;
  font-size: 12px;
  line-height: 1.5;
}

.sfpd-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}

.sfpd-breadcrumb a:hover {
  color: var(--sfpd-red);
}

.sfpd-breadcrumb > * + *::before {
  content: "/";
  margin-inline-end: 9px;
  color: var(--sfpd-red);
}

.sfpd-page :where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--sfpd-red);
  outline: 3px solid color-mix(in srgb, var(--sfpd-red) 74%, white);
  outline-offset: 4px;
}

[dir="rtl"] :where(
  .sfpd-eyebrow,
  .sfpd-kicker,
  .sfpd-code,
  .sfpd-passport dt,
  .sfpd-materials__label,
  .sfpd-ledger__key,
  .sfpd-related__brand
) {
  letter-spacing: 0;
  text-transform: none;
}

/* Hero — product identity and material context share one composition. */
.sfpd-hero {
  padding-block-start: 74px;
  background:
    linear-gradient(90deg, rgba(51, 58, 64, .045) 1px, transparent 1px) 0 0 / 25% 100%,
    linear-gradient(180deg, var(--sfpd-soft), #FFFFFF 74%);
  border-block-end: 1px solid var(--sfpd-line);
}

.sfpd-hero .sfpd-breadcrumb {
  padding-block: 28px 32px;
}

.sfpd-hero__heading,
.sfpd-hero-heading {
  display: grid;
  grid-template-columns: minmax(360px, .92fr) minmax(0, 1.08fr);
  min-block-size: clamp(520px, 47vw, 680px);
  align-items: stretch;
  border-block-start: 1px solid var(--sfpd-line);
  border-inline: 1px solid var(--sfpd-line);
}

.sfpd-hero__copy,
.sfpd-hero-copy {
  display: flex;
  padding: clamp(38px, 5vw, 76px) clamp(28px, 5vw, 72px);
  flex-direction: column;
  justify-content: center;
  background: rgba(255, 255, 255, .62);
}

.sfpd-brand,
.sfpd-brand-lockup {
  display: flex;
  min-block-size: 54px;
  margin-block-end: clamp(24px, 3vw, 38px);
  align-items: center;
  color: var(--sfpd-ink);
  text-decoration: none;
}

.sfpd-brand strong,
.sfpd-brand-lockup strong {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.025em;
}

.sfpd-kicker .sfpd-code { display: inline; }

.sfpd-brand img,
.sfpd-brand-lockup img {
  inline-size: auto;
  max-inline-size: min(220px, 65vw);
  block-size: clamp(38px, 4.6vw, 62px);
  object-fit: contain;
  object-position: left center;
}

[dir="rtl"] .sfpd-brand img,
[dir="rtl"] .sfpd-brand-lockup img {
  object-position: right center;
}

.sfpd-hero__copy h1,
.sfpd-hero-copy h1 {
  max-inline-size: 14ch;
  margin-block: 17px 24px;
  font-size: clamp(42px, 4.8vw, 68px);
  font-weight: 600;
  line-height: .99;
  letter-spacing: -.055em;
}

.sfpd-hero__lead,
.sfpd-hero-lead {
  max-inline-size: 58ch;
  color: var(--sfpd-muted);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.7;
}

.sfpd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-block-start: 34px;
}

.sfpd-button,
.sfpd-btn {
  display: inline-flex;
  min-block-size: 52px;
  padding: 13px 20px;
  border: 1px solid var(--sfpd-red);
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: #FFFFFF;
  background: var(--sfpd-red);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.sfpd-button::after,
.sfpd-btn::after {
  content: "\2192";
  font-size: 17px;
  transition: transform .25s ease;
}

.sfpd-button:hover,
.sfpd-btn:hover {
  border-color: var(--sfpd-red-dark);
  background: var(--sfpd-red-dark);
}

.sfpd-button:hover::after,
.sfpd-btn:hover::after {
  transform: translateX(4px);
}

.sfpd-button--quiet,
.sfpd-btn--quiet {
  border-width: 0 0 1px;
  border-color: var(--sfpd-line-strong);
  color: var(--sfpd-ink);
  background: transparent;
}

.sfpd-button--quiet:hover,
.sfpd-btn--quiet:hover {
  border-color: var(--sfpd-red);
  color: var(--sfpd-red);
  background: transparent;
}

[dir="rtl"] .sfpd-button::after,
[dir="rtl"] .sfpd-btn::after {
  content: "\2190";
}

[dir="rtl"] .sfpd-button:hover::after,
[dir="rtl"] .sfpd-btn:hover::after {
  transform: translateX(-4px);
}

/* Horizontal product passport under the hero composition. */
.sfpd-passport {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
  border-block: 1px solid var(--sfpd-line-strong);
  border-inline: 1px solid var(--sfpd-line);
  background: #FFFFFF;
}

/* Keep the passport balanced when an optional editor-owned value is blank. */
.sfpd-passport--1 { grid-template-columns: minmax(0, 1fr); }
.sfpd-passport--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sfpd-passport--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sfpd-passport__item,
.sfpd-passport > div {
  display: block;
  min-block-size: 148px;
  padding: 28px clamp(20px, 2.7vw, 38px);
  border-inline-end: 1px solid var(--sfpd-line);
}

.sfpd-passport__item:last-child,
.sfpd-passport > div:last-child {
  border-inline-end: 0;
}

.sfpd-passport dt,
.sfpd-passport__label {
  color: #778188;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sfpd-passport dd,
.sfpd-passport__value {
  margin-block-start: 14px;
  overflow-wrap: anywhere;
  color: var(--sfpd-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.48;
}

/* Product specimen. */
.sfpd-specimen {
  position: relative;
  min-block-size: 100%;
  overflow: hidden;
  background: #E7EAEC;
  isolation: isolate;
}

.sfpd-specimen img,
.sfpd-specimen__image {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: inherit;
  object-fit: cover;
  object-position: center;
}

/* Product photography is composed asymmetrically; retain its subject on narrow screens. */
.sfpd-group-cleaning-maintenance .sfpd-specimen img { object-position: 68% center; }
.sfpd-group-mineral-dry-shake-hardener .sfpd-specimen img,
.sfpd-group-wet-on-wet-surface-hardener .sfpd-specimen img,
.sfpd-group-metallic-surface-hardener .sfpd-specimen img { object-position: 62% center; }

.sfpd-specimen::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 28%, rgba(22, 30, 35, .06));
}

.sfpd-specimen figcaption,
.sfpd-specimen__caption {
  position: absolute;
  z-index: 4;
  inset-inline-end: 20px;
  inset-block-end: 18px;
  max-inline-size: min(42ch, calc(100% - 40px));
  padding: 8px 10px;
  color: #FFFFFF;
  background: rgba(27, 34, 39, .78);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .07em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Compact fact bench immediately below the specimen. */
.sfpd-facts,
.sfpd-brief-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block-end: 1px solid var(--sfpd-line);
  background: #FFFFFF;
}

.sfpd-fact,
.sfpd-brief-strip > * {
  min-block-size: 150px;
  padding: 28px clamp(20px, 3vw, 42px);
  border-inline-end: 1px solid var(--sfpd-line);
}

.sfpd-fact:last-child,
.sfpd-brief-strip > *:last-child {
  border-inline-end: 0;
}

.sfpd-fact span,
.sfpd-fact dt,
.sfpd-brief-strip dt {
  display: block;
  margin-block-end: 12px;
  color: #778188;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.sfpd-fact strong,
.sfpd-fact dd,
.sfpd-brief-strip dd {
  display: block;
  color: var(--sfpd-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}

.sfpd-fact a,
.sfpd-brief-strip a {
  display: inline-flex;
  margin-block-start: 14px;
  align-items: center;
  gap: 9px;
  color: var(--sfpd-red);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

/* Shared section grammar. */
.sfpd-section {
  padding-block: var(--sfpd-section-space);
  border-block-end: 1px solid var(--sfpd-line);
  background: var(--sfpd-paper);
}

.sfpd-section--soft { background: var(--sfpd-soft); }
.sfpd-section--cool { background: var(--sfpd-cool); }
.sfpd-section--warm { background: var(--sfpd-warm); }

.sfpd-section__header,
.sfpd-section-head {
  display: grid;
  grid-template-columns: minmax(150px, .45fr) minmax(0, 1.55fr);
  gap: clamp(30px, 6vw, 96px);
  margin-block-end: clamp(38px, 5vw, 72px);
  align-items: start;
}

.sfpd-section__title,
.sfpd-section-head h2,
.sfpd-section h2 {
  max-inline-size: 22ch;
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.045em;
}

.sfpd-section__intro,
.sfpd-section-head p {
  max-inline-size: 64ch;
  margin-block-start: 20px;
  color: var(--sfpd-muted);
  font-size: 16px;
  line-height: 1.72;
}

.sfpd-rich {
  color: var(--sfpd-muted);
  font-size: 16px;
  line-height: 1.75;
}

.sfpd-rich > * + * { margin-block-start: 1em; }
.sfpd-rich :where(ul, ol) { padding-inline-start: 1.25em; }
.sfpd-rich li + li { margin-block-start: .48em; }
.sfpd-rich a { color: var(--sfpd-red); text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Asymmetric product role / overview. */
.sfpd-overview {
  padding-block: 0;
}

.sfpd-overview__grid,
.sfpd-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  min-block-size: clamp(480px, 44vw, 620px);
}

.sfpd-overview__grid--copy-only {
  grid-template-columns: minmax(0, 1fr);
  min-block-size: 0;
}

.sfpd-overview__grid--copy-only .sfpd-overview__copy {
  padding-inline: max(var(--sfpd-edge), calc((100vw - var(--sfpd-shell)) / 2 + var(--sfpd-edge)));
}

.sfpd-overview__media,
.sfpd-overview-media {
  min-block-size: 100%;
  overflow: hidden;
  background: #E6EAEC;
}

.sfpd-overview__media img,
.sfpd-overview-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.sfpd-overview__copy,
.sfpd-overview-copy {
  display: flex;
  padding: clamp(42px, 5vw, 72px);
  flex-direction: column;
  justify-content: center;
  background: var(--sfpd-warm);
}

.sfpd-overview__copy h2,
.sfpd-overview-copy h2 {
  margin-block: 16px 24px;
}

.sfpd-materials {
  margin-block-start: 34px;
  padding-block-start: 22px;
  border-block-start: 1px solid var(--sfpd-line-strong);
}

.sfpd-materials__label {
  display: block;
  margin-block-end: 11px;
  color: #778188;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.sfpd-materials ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sfpd-materials li {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .03em;
}

/* Selection framework — a technical ledger, not a card grid. */
.sfpd-selection__grid,
.sfpd-selection-grid {
  display: grid;
  grid-template-columns: minmax(420px, .92fr) minmax(0, 1.08fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: stretch;
}

.sfpd-selection__grid--text-only {
  grid-template-columns: minmax(0, 1fr);
}

.sfpd-selection__grid--text-only .sfpd-selection__copy {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: clamp(36px, 6vw, 90px);
}

.sfpd-selection .sfpd-section-head {
  display: block;
  margin-block-end: 32px;
}

.sfpd-ledger {
  border-block-start: 1px solid var(--sfpd-line-strong);
}

.sfpd-ledger__row,
.sfpd-ledger-row {
  display: grid;
  grid-template-columns: 42px minmax(120px, .78fr) minmax(0, 1.22fr);
  gap: 18px;
  min-block-size: 76px;
  padding-block: 18px;
  align-items: center;
  border-block-end: 1px solid var(--sfpd-line);
}

.sfpd-ledger__icon,
.sfpd-ledger-icon {
  display: grid;
  inline-size: 30px;
  block-size: 30px;
  place-items: center;
  color: var(--sfpd-red);
}

.sfpd-ledger__icon i,
.sfpd-ledger-icon i {
  display: block;
  inline-size: 20px;
  block-size: 2px;
  background: currentColor;
}

.sfpd-ledger__icon svg,
.sfpd-ledger-icon svg {
  inline-size: 25px;
  block-size: 25px;
  stroke: currentColor;
  stroke-width: 1.45;
  fill: none;
}

.sfpd-ledger__key,
.sfpd-ledger-row dt {
  color: var(--sfpd-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.sfpd-ledger__value,
.sfpd-ledger-row dd {
  color: var(--sfpd-muted);
  font-size: 13px;
  line-height: 1.55;
}

.sfpd-selection__media,
.sfpd-selection-media {
  position: relative;
  min-block-size: clamp(390px, 34vw, 520px);
  overflow: hidden;
  background: #E8ECEF;
}

.sfpd-selection__media img,
.sfpd-selection-media img {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: inherit;
  object-fit: cover;
  object-position: center;
}

.sfpd-group-armoured-joint .sfpd-selection__media img {
  object-position: 72% center;
}

.sfpd-selection__media figcaption,
.sfpd-selection-media figcaption {
  position: absolute;
  inset-inline-start: 18px;
  inset-block-end: 16px;
  padding: 7px 9px;
  color: var(--sfpd-ink);
  background: rgba(255, 255, 255, .9);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Application photo mosaic. */
.sfpd-applications__layout,
.sfpd-applications-layout {
  display: grid;
  grid-template-columns: minmax(220px, .42fr) minmax(0, 1.58fr);
  gap: clamp(34px, 6vw, 84px);
  align-items: start;
}

.sfpd-applications__intro,
.sfpd-applications-intro {
  position: sticky;
  inset-block-start: 112px;
}

.sfpd-applications__intro h2,
.sfpd-applications-intro h2 {
  margin-block: 16px 28px;
}

.sfpd-text-link {
  display: inline-flex;
  padding-block-end: 7px;
  border-block-end: 1px solid var(--sfpd-line-strong);
  align-items: center;
  gap: 20px;
  color: var(--sfpd-ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}

.sfpd-text-link::after { content: "\2192"; color: var(--sfpd-red); }
.sfpd-text-link:hover { color: var(--sfpd-red); border-color: var(--sfpd-red); }
[dir="rtl"] .sfpd-text-link::after { content: "\2190"; }

.sfpd-applications__grid,
.sfpd-application-mosaic {
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  grid-template-rows: repeat(2, minmax(190px, 1fr));
  gap: 8px;
  min-block-size: 420px;
}

.sfpd-application,
.sfpd-application-card {
  position: relative;
  min-block-size: 190px;
  overflow: hidden;
  color: #FFFFFF;
  background: #879198;
  isolation: isolate;
}

.sfpd-application:first-child,
.sfpd-application-card:first-child {
  grid-row: 1 / -1;
}

.sfpd-applications__grid--count-1 {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(360px, 1fr);
  min-block-size: 360px;
}

.sfpd-applications__grid--count-1 .sfpd-application:first-child {
  grid-row: auto;
}

.sfpd-applications__grid--count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(360px, 1fr);
  min-block-size: 360px;
}

.sfpd-applications__grid--count-2 .sfpd-application:first-child,
.sfpd-applications__grid--count-4 .sfpd-application:first-child {
  grid-row: auto;
}

.sfpd-applications__grid--count-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(220px, 1fr));
}

.sfpd-application img,
.sfpd-application-card img {
  position: absolute;
  z-index: -2;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.sfpd-application::after,
.sfpd-application-card::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(20, 27, 31, .04) 30%, rgba(20, 27, 31, .82));
}

.sfpd-application__label,
.sfpd-application-card__label {
  position: absolute;
  inset-inline: 22px;
  inset-block-end: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  color: #FFFFFF;
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 500;
  line-height: 1.25;
}

.sfpd-application__label strong,
.sfpd-application-card__label strong {
  display: block;
  color: inherit;
  font-size: inherit;
  font-weight: 500;
}

.sfpd-application__label small,
.sfpd-application-card__label small {
  display: -webkit-box;
  max-inline-size: 44ch;
  margin-block-start: 7px;
  overflow: hidden;
  color: rgba(255, 255, 255, .8);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sfpd-application__label b,
.sfpd-application-card__label b {
  flex: none;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 500;
}

.sfpd-application:hover img,
.sfpd-application-card:hover img { transform: scale(1.035); }

/* Document request remains visible; verified records stay optional. */
.sfpd-proof__lead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .82fr);
  gap: clamp(38px, 6vw, 92px);
  align-items: center;
}

.sfpd-proof__intro h2 {
  max-inline-size: 18ch;
  margin-block: 12px 18px;
}

.sfpd-proof__intro > p:last-child {
  max-inline-size: 62ch;
  color: var(--sfpd-muted);
  font-size: 15px;
  line-height: 1.65;
}

.sfpd-proof__records-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 6vw, 84px);
  margin-block-start: clamp(48px, 6vw, 80px);
  padding-block-start: 36px;
  border-block-start: 1px solid var(--sfpd-line-strong);
}

.sfpd-proof__records-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.sfpd-proof__subhead {
  margin-block-end: 22px;
}

.sfpd-proof__subhead h3 {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.1;
}

.sfpd-proof__subhead p {
  max-inline-size: 58ch;
  margin-block-start: 10px;
  color: var(--sfpd-muted);
  font-size: 13px;
  line-height: 1.6;
}

.sfpd-packaging,
.sfpd-evidence {
  border-block-start: 1px solid var(--sfpd-line-strong);
}

.sfpd-packaging__item,
.sfpd-evidence__item {
  display: grid;
  grid-template-columns: minmax(95px, .45fr) minmax(0, 1.55fr);
  gap: 22px;
  padding-block: 19px;
  border-block-end: 1px solid var(--sfpd-line);
}

.sfpd-packaging__item strong,
.sfpd-evidence__item strong {
  color: var(--sfpd-ink);
  font-size: 14px;
  font-weight: 600;
}

.sfpd-packaging__item span,
.sfpd-evidence__item span,
.sfpd-evidence__item p {
  color: var(--sfpd-muted);
  font-size: 13px;
  line-height: 1.55;
}

.sfpd-evidence__item a {
  display: inline-flex;
  margin-block-start: 10px;
  color: var(--sfpd-red);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.sfpd-proof-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 26px;
  padding: clamp(26px, 3vw, 42px);
  border: 1px solid var(--sfpd-line);
  background: rgba(255, 255, 255, .74);
}

.sfpd-proof-card__icon {
  display: grid;
  inline-size: 52px;
  block-size: 64px;
  place-items: center;
  border: 1px solid var(--sfpd-line-strong);
  color: var(--sfpd-muted);
}

.sfpd-proof-card__icon svg {
  inline-size: 30px;
  block-size: 38px;
  stroke: currentColor;
  fill: none;
}

.sfpd-proof-card h3 {
  margin-block-end: 9px;
  font-size: 18px;
}

.sfpd-proof-card p {
  color: var(--sfpd-muted);
  font-size: 13px;
  line-height: 1.6;
}

.sfpd-proof-card a {
  display: inline-flex;
  margin-block-start: 15px;
  color: var(--sfpd-red);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

/* Related products: intentionally a ledger, capped at four entries. */
.sfpd-related .sfpd-section-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.sfpd-related .sfpd-section-head h2 {
  max-inline-size: none;
  font-size: clamp(32px, 3.5vw, 46px);
}

.sfpd-related__grid,
.sfpd-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block-start: 1px solid var(--sfpd-line);
  border-inline-start: 1px solid var(--sfpd-line);
}

.sfpd-related__item,
.sfpd-related-item {
  display: flex;
  min-block-size: 330px;
  padding: 18px;
  border-inline-end: 1px solid var(--sfpd-line);
  border-block-end: 1px solid var(--sfpd-line);
  flex-direction: column;
  color: var(--sfpd-ink);
  background: rgba(255, 255, 255, .42);
  text-decoration: none;
  transition: background-color .25s ease;
}

.sfpd-related__item:nth-child(n + 5),
.sfpd-related-item:nth-child(n + 5) {
  display: none;
}

.sfpd-related__item:hover,
.sfpd-related-item:hover { background: #FFFFFF; }

.sfpd-related__visual,
.sfpd-related-visual {
  display: grid;
  block-size: 150px;
  margin-block-end: 20px;
  place-items: center;
  overflow: hidden;
}

.sfpd-related__visual img,
.sfpd-related-visual img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.sfpd-related__brand,
.sfpd-related-brand {
  display: block;
  min-block-size: 18px;
  margin-block-end: 8px;
  color: var(--sfpd-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sfpd-related__item h3,
.sfpd-related-item h3 {
  font-size: 16px;
  line-height: 1.25;
}

.sfpd-related__item p,
.sfpd-related-item p {
  margin-block-start: 8px;
  color: var(--sfpd-muted);
  font-size: 12px;
  line-height: 1.5;
}

.sfpd-related__arrow,
.sfpd-related-arrow {
  margin-block-start: auto;
  padding-block-start: 18px;
  color: var(--sfpd-red);
  font-size: 18px;
  transition: transform .25s ease;
}

.sfpd-related__item:hover .sfpd-related__arrow,
.sfpd-related-item:hover .sfpd-related-arrow {
  transform: translateX(4px);
}

[dir="rtl"] .sfpd-related__item:hover .sfpd-related__arrow,
[dir="rtl"] .sfpd-related-item:hover .sfpd-related-arrow {
  transform: translateX(-4px);
}

/* Final action: the only large uninterrupted red plane on the page. */
.sfpd-cta {
  color: #FFFFFF;
  background: var(--sfpd-red);
}

.sfpd-cta .sfpd-shell,
.sfpd-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(38px, 7vw, 110px);
  min-block-size: 154px;
  padding-block: clamp(34px, 4vw, 50px);
  align-items: center;
}

.sfpd-cta__copy {
  display: grid;
  grid-template-columns: minmax(120px, .3fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
}

.sfpd-cta__mark {
  position: relative;
  display: block;
  inline-size: min(135px, 18vw);
  block-size: 72px;
  opacity: .78;
}

.sfpd-cta__mark::before,
.sfpd-cta__mark::after {
  position: absolute;
  content: "";
  border: 1px solid currentColor;
}

.sfpd-cta__mark::before {
  inset: 8px 10% 8px 0;
  transform: skewY(-8deg);
}

.sfpd-cta__mark::after {
  inset: 22px 0 22px 24%;
}

.sfpd-cta h2 {
  max-inline-size: 780px;
  color: #FFFFFF;
  font-size: clamp(30px, 3.5vw, 50px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.04em;
}

.sfpd-cta p {
  max-inline-size: 64ch;
  margin-block-start: 14px;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 1.65;
}

.sfpd-cta .sfpd-button,
.sfpd-cta .sfpd-btn {
  min-inline-size: 220px;
  border-color: rgba(255, 255, 255, .78);
  background: transparent;
}

.sfpd-cta .sfpd-button:hover,
.sfpd-cta .sfpd-btn:hover {
  color: var(--sfpd-red);
  background: #FFFFFF;
}

/* Medium screens. */
@media (max-width: 1100px) {
  .sfpd-hero__heading,
  .sfpd-hero-heading { grid-template-columns: minmax(340px, .9fr) minmax(0, 1.1fr); }

  .sfpd-passport { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sfpd-passport > div:nth-child(2n) { border-inline-end: 0; }
  .sfpd-passport > div:nth-child(-n + 2) { border-block-end: 1px solid var(--sfpd-line); }

  .sfpd-facts,
  .sfpd-brief-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sfpd-fact:nth-child(2),
  .sfpd-brief-strip > *:nth-child(2) { border-inline-end: 0; }
  .sfpd-fact:nth-child(-n + 2),
  .sfpd-brief-strip > *:nth-child(-n + 2) { border-block-end: 1px solid var(--sfpd-line); }

  .sfpd-overview__grid,
  .sfpd-overview-grid { grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); }

  .sfpd-selection__grid,
  .sfpd-selection-grid { grid-template-columns: 1fr; }

  .sfpd-selection__grid--text-only .sfpd-selection__copy {
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  }

  .sfpd-selection__media,
  .sfpd-selection-media { min-block-size: 420px; }

  .sfpd-applications__layout,
  .sfpd-applications-layout { grid-template-columns: 1fr; }

  .sfpd-applications__intro,
  .sfpd-applications-intro { position: static; }

  .sfpd-related__grid,
  .sfpd-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sfpd-proof__lead-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); }
}

/* Phone and narrow tablet. */
@media (max-width: 760px) {
  .sfpd-page {
    --sfpd-edge: 18px;
    --sfpd-section-space: 70px;
  }

  .sfpd-hero { padding-block-start: 74px; }
  .sfpd-hero .sfpd-breadcrumb { padding-block: 22px 18px; }

  .sfpd-hero__heading,
  .sfpd-hero-heading {
    grid-template-columns: 1fr;
    gap: 0;
    min-block-size: 0;
  }

  .sfpd-hero__copy,
  .sfpd-hero-copy { padding: 34px 22px 42px; }

  .sfpd-brand,
  .sfpd-brand-lockup {
    min-block-size: 42px;
    margin-block-end: 28px;
  }

  .sfpd-brand img,
  .sfpd-brand-lockup img { block-size: 42px; }

  .sfpd-hero__copy h1,
  .sfpd-hero-copy h1 {
    max-inline-size: 100%;
    font-size: clamp(38px, 12.2vw, 52px);
    line-height: 1.01;
  }

  .sfpd-actions { display: grid; }
  .sfpd-button,
  .sfpd-btn { inline-size: 100%; }

  .sfpd-passport {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sfpd-passport > div {
    min-block-size: 118px;
    padding: 22px 18px;
    border-inline-end: 1px solid var(--sfpd-line);
  }

  .sfpd-passport > div:nth-child(even) { border-inline-end: 0; }
  .sfpd-passport > div:nth-child(-n + 2) { border-block-end: 1px solid var(--sfpd-line); }

  .sfpd-specimen { min-block-size: 310px; }

  .sfpd-specimen figcaption,
  .sfpd-specimen__caption {
    inset-inline: 12px;
    inset-block-end: 12px;
    max-inline-size: none;
  }

  .sfpd-facts,
  .sfpd-brief-strip { grid-template-columns: 1fr; }

  .sfpd-fact,
  .sfpd-brief-strip > *,
  .sfpd-fact:nth-child(2),
  .sfpd-brief-strip > *:nth-child(2) {
    min-block-size: 0;
    border-inline-end: 0;
    border-block-end: 1px solid var(--sfpd-line);
  }

  .sfpd-section__header,
  .sfpd-section-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .sfpd-related .sfpd-section-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .sfpd-section__title,
  .sfpd-section-head h2,
  .sfpd-section h2 { font-size: clamp(31px, 9.8vw, 42px); }

  .sfpd-overview__grid,
  .sfpd-overview-grid { grid-template-columns: 1fr; }

  .sfpd-overview__media,
  .sfpd-overview-media { min-block-size: 340px; }

  .sfpd-overview__copy,
  .sfpd-overview-copy { padding: 46px 22px; }

  .sfpd-ledger__row,
  .sfpd-ledger-row {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px 14px;
  }

  .sfpd-ledger__value,
  .sfpd-ledger-row dd { grid-column: 2; }

  .sfpd-selection__media,
  .sfpd-selection-media { min-block-size: 290px; }

  .sfpd-selection__grid--text-only .sfpd-selection__copy { display: block; }

  .sfpd-applications__grid,
  .sfpd-application-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-block-size: 0;
  }

  .sfpd-application,
  .sfpd-application-card,
  .sfpd-application:first-child,
  .sfpd-application-card:first-child {
    grid-row: auto;
    min-block-size: 245px;
  }

  .sfpd-proof__lead-grid,
  .sfpd-proof__records-grid { grid-template-columns: 1fr; }

  .sfpd-packaging__item,
  .sfpd-evidence__item { grid-template-columns: 1fr; gap: 6px; }

  .sfpd-proof-card { grid-template-columns: 46px minmax(0, 1fr); gap: 17px; padding: 22px 18px; }
  .sfpd-proof-card__icon { inline-size: 44px; block-size: 54px; }

  .sfpd-related__grid,
  .sfpd-related-grid { grid-template-columns: 1fr; }

  .sfpd-related__item,
  .sfpd-related-item {
    display: grid;
    grid-template-columns: 106px minmax(0, 1fr) 24px;
    grid-template-rows: auto 1fr;
    gap: 7px 18px;
    min-block-size: 150px;
    align-items: center;
  }

  .sfpd-related__item--text {
    grid-template-columns: minmax(0, 1fr) 24px;
  }

  .sfpd-related__item--text .sfpd-related__brand,
  .sfpd-related__item--text h3,
  .sfpd-related__item--text p { grid-column: 1; }

  .sfpd-related__item--text .sfpd-related__arrow { grid-column: 2; }

  .sfpd-related__item:nth-child(n + 5),
  .sfpd-related-item:nth-child(n + 5) { display: none; }

  .sfpd-related__visual,
  .sfpd-related-visual {
    grid-row: 1 / -1;
    block-size: 90px;
    margin: 0;
  }

  .sfpd-related__brand,
  .sfpd-related-brand { margin: 0; align-self: end; }

  .sfpd-related__item h3,
  .sfpd-related-item h3 { align-self: start; }

  .sfpd-related__item p,
  .sfpd-related-item p { display: none; }

  .sfpd-related__arrow,
  .sfpd-related-arrow {
    grid-column: 3;
    grid-row: 1 / -1;
    margin: 0;
    padding: 0;
  }

  .sfpd-cta .sfpd-shell,
  .sfpd-cta__inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .sfpd-cta__copy { grid-template-columns: 1fr; }
  .sfpd-cta__mark { display: none; }
  .sfpd-cta .sfpd-button,
  .sfpd-cta .sfpd-btn { min-inline-size: 0; }
}

@media (max-width: 420px) {
  .sfpd-specimen { min-block-size: 280px; }

  .sfpd-passport__item,
  .sfpd-passport > div { grid-template-columns: 1fr; gap: 6px; }

  .sfpd-passport { grid-template-columns: 1fr; }

  .sfpd-passport > div,
  .sfpd-passport > div:nth-child(even) {
    min-block-size: 0;
    border-inline-end: 0;
    border-block-end: 1px solid var(--sfpd-line);
  }

  .sfpd-passport > div:last-child { border-block-end: 0; }

  .sfpd-related__item,
  .sfpd-related-item {
    grid-template-columns: 84px minmax(0, 1fr) 20px;
    gap: 6px 12px;
    padding: 16px;
  }

  .sfpd-related__item--text { grid-template-columns: minmax(0, 1fr) 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .sfpd-page,
  .sfpd-page *,
  .sfpd-page *::before,
  .sfpd-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .sfpd-cta { forced-color-adjust: auto; }

  .sfpd-button,
  .sfpd-btn,
  .sfpd-proof-card,
  .sfpd-related__item,
  .sfpd-related-item { border: 1px solid CanvasText; }
}