@font-face {
  font-family: "Aileron";
  src: url("assets/Aileron-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aileron";
  src: url("assets/Aileron-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aileron";
  src: url("assets/Aileron-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Surgena";
  src: url("assets/Surgena-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Surgena";
  src: url("assets/Surgena-SemiBoldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Groningen";
  src: url("assets/Groningen-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --form-blue: #01314b;
  --form-line: rgba(217, 231, 236, .72);
}

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

html {
  margin: 0;
  scroll-behavior: smooth;
  background: #8f1735;
}

body {
  margin: 0;
  min-width: 320px;
  background: #8f1735;
  color: #fff;
  font-family: "Aileron", Arial, sans-serif;
}

.landing { width: 100%; overflow: hidden; }

.artboard {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  background: #8f1735;
}

.artwork {
  display: block;
  width: 100%;
  line-height: 0;
  font-size: 0;
}

.artwork img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
}

/* Exact high-resolution rendering of the supplied PDF product composition. */
.product-showcase {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 42.1458%;
  width: 100%;
  aspect-ratio: 1920 / 1180;
  overflow: hidden;
}

.product-showcase img {
  display: block;
  width: 100%;
  height: auto;
}

.semantic-copy { position: absolute; z-index: 2; inset: 0; pointer-events: none; }

.copy {
  position: absolute;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-family: "Aileron", Arial, sans-serif;
  font-size: min(var(--fsvw), var(--fspx));
  font-weight: 400;
  line-height: 1.12;
  color: var(--copy-color, #fff);
}

.copy strong { font-weight: 700; letter-spacing: -.02em; }
.copy span, .copy strong { display: block; }

/* These words remain semantic HTML for search engines and assistive technology.
   Their visible rendering is embedded in the supplied PDF artwork for exact fidelity. */
.pdf-embedded-copy { opacity: 0; }

.comparison-title,
.comparison h4,
.comparison-vs,
.possibilities-label,
.formulation-heading,
.benefit-list,
.ruby-powered,
.ruby-heading,
.ruby-callout,
.clinical-label,
.clinical-heading,
.territory-title,
.product-heading,
.contact-kicker,
.contact-heading,
.hero-cta,
.formulation-cta,
.ruby-cta,
.concepts-cta {
  letter-spacing: -.02em;
}

.hero-kicker { --fspx: 32.1px; --fsvw: 1.6719vw; left: 5.026%; top: 2.8481%; }
.hero-title { --fspx: 137.9px; --fsvw: 7.1823vw; left: 5.026%; top: 3.458%; font-weight: 300; line-height: .895; }
.hero-title strong { margin-top: .02em; letter-spacing: -.04em; }
.hero-description { --fspx: 29px; --fsvw: 1.5104vw; left: 5.026%; top: 7.5365%; line-height: 1.17; }

.why-title { --fspx: 43.6px; --fsvw: 2.2708vw; --copy-color: #01314b; left: 52.5521%; top: 12.4642%; font-weight: 300; line-height: .99; }
.why-title strong { margin-top: .18em; color: #aa213e; font-size: 2.326em; line-height: .90; }
.why-description { --fspx: 29px; --fsvw: 1.5104vw; --copy-color: #777; left: 52.5521%; top: 15.6774%; line-height: 1.17; }

.comparison-title { --fspx: 77.4px; --fsvw: 4.0313vw; left: 49.48%; top: 19.8752%; width: 82%; transform: translateX(-50%); text-align: center; font-weight: 700; line-height: 1.04; }
.comparison { top: 22.6435%; text-align: center; }
.comparison.conventional { left: 17.2865%; width: 23.5%; }
.comparison.beyond { left: 61.8073%; width: 25.35%; }
.comparison h3 { margin: 0; font-size: min(1.9688vw, 37.8px); font-weight: 400; }
.comparison h4 { margin: 1.9em 0 0; font-size: min(2.3854vw, 45.8px); line-height: .9; font-weight: 700; }
.comparison ul {
  position: relative;
  top: 0;
  transform: translateY(1.55em);
  margin: 1.7em 0 0;
  padding: 0;
  list-style: none;
  font-size: min(1.4583vw, 28px);
  line-height: 2.71;
  font-weight: 400;
  text-align: left;
}
.comparison.conventional ul { padding-left: 9.3%; }
.comparison.beyond h3 { width: 74%; margin-left: 11%; }
.comparison.beyond h4 { width: 74%; }
.comparison-vs {
  --fspx: 76px;
  --fsvw: 3.9583vw;
  --copy-color: #65001f;
  left: 45.94%;
  top: 25.53%;
  width: 8.12%;
  height: 1.34%;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
}
.comparison-note { --fspx: 21px; --fsvw: 1.0938vw; left: 11.3333%; top: 29.6428%; width: 78%; text-align: center; font-weight: 300; }

.possibilities-label { --fspx: 61.6px; --fsvw: 3.2083vw; --copy-color: #01314b; left: 25%; top: 32.2%; font-weight: 300; }
.formulation-title { --fspx: 78px; --fsvw: 4.0625vw; --copy-color: #01314b; left: 23%; top: 33%; font-weight: 700; line-height: 1; }
.formulation-heading { --fspx: 58px; --fsvw: 3.0208vw; --copy-color: #b21f3d; left: 5.5%; top: 35.5%; font-weight: 700; line-height: .92; }
.formulation-description { --fspx: 27px; --fsvw: 1.4063vw; --copy-color: #777; left: 5.5%; top: 38%; width: 45%; white-space: normal; line-height: 1.17; }
.benefit-list {
  --fspx: 34px;
  --fsvw: 1.7708vw;
  --copy-color: #01314b;
  left: 73.1615%;
  top: 36.10%;
  width: 20.5%;
  height: 5.28%;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
  line-height: 1;
}

.benefit-list li {
  display: flex;
  align-items: center;
  min-width: 0;
}

.ruby-powered { --fspx: 37.6px; --fsvw: 1.9583vw; left: 59.5729%; top: 53.8377%; font-weight: 700; }
.ruby-heading { --fspx: 93px; --fsvw: 4.8438vw; left: 59.0104%; top: 56.0788%; font-weight: 700; line-height: .897; }
.ruby-description { --fspx: 29px; --fsvw: 1.5104vw; left: 59.0104%; top: 58.1252%; line-height: 1.17; }
.ruby-callout { --fspx: 31px; --fsvw: 1.6146vw; left: 13.7604%; top: 59.7295%; font-weight: 700; line-height: 1.087; }

.clinical-label { --fspx: 37.6px; --fsvw: 1.9583vw; left: 41.9375%; top: 62.3293%; font-weight: 700; }
.clinical-heading { --fspx: 75px; --fsvw: 3.9063vw; left: 50%; top: 63.0575%; width: 84%; transform: translateX(-50%); text-align: center; font-weight: 700; line-height: 1.11; }
.clinical-heading span, .clinical-heading strong { display: inline; }
.clinical-heading strong { color: #01314b; }
.clinical-note { --fspx: 21px; --fsvw: 1.0938vw; left: 16.724%; top: 65.7657%; width: 66.5%; text-align: center; font-weight: 300; }

.territory-title { --fspx: 125.6px; --fsvw: 6.5417vw; --copy-color: #851b35; left: 8.5781%; top: 68.7403%; font-weight: 700; line-height: .866; }
.territory-description { --fspx: 29px; --fsvw: 1.5104vw; --copy-color: #777; left: 8.5781%; top: 73.26%; line-height: 1.17; }

.product-heading { --fspx: 58.5px; --fsvw: 3.0469vw; --copy-color: #01314b; left: 61.6979%; top: 79.5599%; font-weight: 700; line-height: 1.11; }

.contact-kicker { --fspx: 37.6px; --fsvw: 1.9583vw; left: 7.724%; top: 84.7665%; font-weight: 700; }
.contact-heading { --fspx: 94.6px; --fsvw: 4.9271vw; left: 7.724%; top: 85.1064%; font-weight: 700; line-height: .865; }
.contact-description { --fspx: 29px; --fsvw: 1.5104vw; left: 7.724%; top: 87.0919%; line-height: 1.17; }
.footer-description { --fspx: 19.9px; --fsvw: 1.0365vw; --copy-color: #00314b; left: 61.1406%; top: 96.1699%; font-weight: 300; }

.hotspot, .scroll-target, .concept-form, .art-field, .submit-hotspot {
  position: absolute;
}

.hotspot {
  z-index: 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0 .7em;
  text-align: center;
  color: inherit;
  text-decoration: none;
  border-radius: 999px;
  cursor: pointer;
}

.hotspot:focus-visible,
.art-field:focus-visible,
.submit-hotspot:focus-visible {
  outline: max(2px, .14vw) solid #fff;
  outline-offset: max(2px, .14vw);
}

.logo-link { left: 3.7%; top: .25%; width: 17%; height: .65%; font-size: 0; }
.nav-why, .nav-science, .nav-ruby, .nav-challenge {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: min(1.151vw, 22.1px);
  line-height: 1;
}
.nav-why { left: 49.7%; top: .27%; width: 9.3%; height: .54%; }
.nav-science { left: 60.7%; top: .27%; width: 9.3%; height: .54%; }
.nav-ruby { left: 71.6%; top: .27%; width: 7.6%; height: .54%; }
.nav-challenge { left: 84.95%; top: .45%; width: 9.65%; height: .52%; }
.hero-cta, .formulation-cta, .ruby-cta, .concepts-cta {
  display: grid;
  place-items: center;
  color: #01314b;
  font-size: min(1.401vw, 26.9px);
  font-weight: 700;
  line-height: 1;
}
.hero-cta { left: 4.65%; top: 9.02%; width: 17.15%; height: .67%; }
.formulation-cta { left: 4.85%; top: 40.82%; width: 21.8%; height: .68%; color: transparent; }
.ruby-cta { left: 58.95%; top: 60.64%; width: 26.3%; height: .68%; }
.concepts-cta { left: 61.85%; top: 81.27%; width: 26.2%; height: .69%; }
.pdf-embedded-hotspot { color: transparent; text-shadow: none; }
.footer-site, .footer-contact {
  display: grid;
  place-items: center;
  padding: 0;
  white-space: nowrap;
  color: #00314b;
  font-size: min(1.9271vw, 37px);
  font-weight: 300;
  line-height: 1;
}
.footer-site { left: 67.0%; top: 97.55%; width: 13.5%; height: .75%; }
.footer-contact { left: 84.7%; top: 97.55%; width: 10.7%; height: .75%; }

.scroll-target { z-index: 1; left: 0; width: 1px; height: 1px; scroll-margin-top: 0; }
.target-why { top: 11.2%; }
.target-science { top: 27.3%; }
.target-ruby { top: 64.2%; }
.target-challenge { top: 83.8%; }

.concept-form {
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.art-field, .submit-hotspot { pointer-events: auto; }

.art-field {
  display: block;
  margin: 0;
  padding: 0 0 .12em;
  border: 0;
  border-radius: 0;
  outline: 0;
  background-color: transparent;
  background-image: linear-gradient(var(--form-blue), var(--form-blue));
  background-position: 0 0;
  background-size: 100% 70%;
  background-repeat: no-repeat;
  color: rgba(255, 255, 255, .9);
  font: 400 clamp(5px, 1.29vw, 24.8px)/1.15 "Aileron", Arial, sans-serif;
  box-shadow: none;
  opacity: 0;
}

.art-field::placeholder { color: rgba(255, 255, 255, .15); opacity: 1; }
.art-field:focus,
.art-field:not(select):not(:placeholder-shown),
.field-interest:valid { opacity: 1; }

.field-name { left: 7.35%; top: 89.53%; width: 24.95%; height: .78%; }
.field-email { left: 38.85%; top: 89.53%; width: 24.95%; height: .78%; }
.field-company { left: 7.35%; top: 91.11%; width: 24.95%; height: .78%; }
.field-interest {
  left: 38.85%;
  top: 91.11%;
  width: 24.95%;
  height: .78%;
  padding-right: 8%;
  appearance: none;
  -webkit-appearance: none;
}

.field-idea {
  left: 7.35%;
  top: 92.73%;
  width: 24.95%;
  height: .86%;
  resize: none;
  overflow: hidden;
}

.submit-hotspot {
  left: 38.85%;
  top: 92.74%;
  width: 24.95%;
  height: .66%;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.submit-hotspot[disabled] { cursor: wait; }
.honeypot { position: fixed !important; left: -100vw !important; opacity: 0 !important; }

.form-status {
  position: fixed;
  z-index: 20;
  right: 1rem;
  bottom: 1rem;
  max-width: min(30rem, calc(100vw - 2rem));
  padding: .85rem 1rem;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: .65rem;
  background: #01314b;
  color: #fff;
  font: 400 1rem/1.4 "Aileron", Arial, sans-serif;
  box-shadow: 0 .7rem 2rem rgba(0,0,0,.3);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (min-width: 1921px) {
  body { background: #c7c3c5; }
}