/* technology-page.css: component-owned rules. Shared priority order is declared in tokens.css. */
@layer presentation {
/* technology-page */
.technology-page main {
  font-size: var(--font-16);
  line-height: 2;
  letter-spacing: .015em;
}

.technology-page main img {
  height: auto;
}

.technology-page main .kicker {
  font-size: var(--font-12);
}

.technology-page main h2 {
  font-size: clamp(var(--font-27),2.5vw,var(--font-36));
  line-height: 1.65;
  letter-spacing: .025em;
}

.technology-page main h3 {
  font-size: var(--font-22);
  line-height: 1.6;
  letter-spacing: .02em;
}

.technology-page main figcaption {
  font-size: var(--font-13);
  color: var(--muted);
  margin-top: var(--space-12);
}

.tp-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 8%;
  align-items: end;
  padding: var(--space-58) 0 var(--space-54);
}

.tp-hero h1 {
  margin-top: var(--space-18);
  font-size: clamp(var(--font-38),4vw,var(--font-58));
  line-height: 1.65;
  letter-spacing: .035em;
}

.tp-intro {
  max-width: 44ch;
  padding-bottom: var(--space-8);
}

.tp-intro p+p {
  margin-top: var(--space-20);
}

.tp-hero+figure img {
  aspect-ratio: 2.18;
  object-position: center 56%;
}

.tp-index {
  display: flex;
  gap: var(--space-38);
  padding: var(--space-22) 0 var(--space-26);
  border-bottom: 1px solid var(--line);
  font-size: var(--font-14);
}

.tp-index a {
  padding: var(--space-9) 0;
  min-height: 44px;
}

.tp-index a:hover,
.tp-study .line-link:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.tp-section {
  padding: var(--space-100) 0;
  scroll-margin-top: 120px;
}

.tp-section-head h2 {
  margin: var(--space-16) 0 var(--space-26);
}

.tp-section-head>p:not(.kicker) {
  max-width: 37ch;
}

.tp-processing {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-42) 8%;
}

.tp-processing .tp-section-head {
  grid-column: 1/-1;
}

.tp-processing figure img {
  aspect-ratio: 1.13;
}

.tp-processing .tp-copy {
  padding-top: var(--space-8);
}

.tp-points {
  margin-top: var(--space-32);
  display: grid;
  gap: var(--space-28);
}

.tp-points h3 {
  margin-bottom: var(--space-10);
}

.tp-note {
  font-size: var(--font-13);
  line-height: 1.9;
  color: var(--muted);
  margin-top: var(--space-28);
}

.tp-quality {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--space-40) 8%;
  align-items: start;
}

.tp-quality figure {
  grid-column: 2;
  grid-row: 1/3;
}

.tp-quality figure img {
  aspect-ratio: 1.02;
  object-position: center;
}

.tp-quality-points {
  display: grid;
  gap: var(--space-30);
}

.tp-quality-points h3 {
  margin-bottom: var(--space-10);
}

.tp-custom {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-42) 7%;
  align-items: center;
}

.tp-custom figure img {
  aspect-ratio: 1.5;
}

.tp-custom-notes {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-36);
  align-self: start;
}

.tp-custom-notes h3 {
  margin-bottom: var(--space-12);
}

.tp-study {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 10%;
  padding: var(--space-70) 0 var(--space-85);
}

.tp-study h2 {
  margin-top: var(--space-16);
}

.tp-study .line-link {
  font-size: var(--font-15);
  min-height: 44px;
}

.tp-preparation {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 10%;
  padding: var(--space-70) 0 var(--space-85);
}

.tp-preparation h2 {
  margin: var(--space-16) 0 var(--space-26);
}

.tp-preparation>div>p:last-child {
  max-width: 37ch;
}

.tp-preparation dl {
  margin: 0;
}

.tp-preparation dl>div {
  padding: 0 0 var(--space-22);
  margin-bottom: var(--space-23);
  border-bottom: 1px solid var(--line);
}

.tp-preparation dt {
  font-family: var(--serif);
  font-size: var(--font-22);
  line-height: 1.6;
}

.tp-preparation dd {
  margin: var(--space-10) 0 0;
}

.tp-contact {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 8%;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: var(--space-64) 0 var(--space-40);
}

.tp-contact h2 {
  margin-bottom: var(--space-25);
}

.tp-contact .solid-link {
  width: 100%;
  max-width: 390px;
  min-height: 68px;
  font-size: var(--font-16);
}

.tp-contact .tp-note {
  max-width: 43ch;
  margin-top: var(--space-20);
}

.tp-disclaimer {
  font-size: var(--font-13);
  color: var(--muted);
  max-width: 90ch;
  padding: 0 0 var(--space-50);
}

.technology-page main a:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: var(--space-5);
}

/* technology-page */
@media(max-width:1024px) {
.tp-hero {
  gap: 5%;
}

.tp-hero h1 {
  font-size: var(--font-42);
}

.tp-processing,
.tp-quality,
.tp-custom {
  column-gap: 5%;
}

.tp-custom-notes {
  gap: var(--space-24);
}

.tp-section {
  padding: var(--space-75) 0;
}

.tp-quality figure img {
  aspect-ratio: .85;
}

.tp-index {
  gap: var(--space-26);
}

.tp-contact {
  grid-template-columns: 1.2fr 1fr;
  gap: 5%;
}
}

/* technology-page */
@media(max-width:700px) {
.technology-page main {
  font-size: var(--font-15_5);
  line-height: 1.95;
}

.technology-page main h2 {
  font-size: var(--font-27);
  line-height: 1.65;
}

.technology-page main h3 {
  font-size: var(--font-21);
}

.tp-hero {
  display: block;
  padding: var(--space-35) 0 var(--space-35);
}

.tp-hero h1 {
  font-size: var(--font-34);
  margin: var(--space-18) 0 var(--space-26);
  letter-spacing: .02em;
}

.tp-intro {
  max-width: none;
  padding: 0;
}

.tp-intro br,
.tp-contact p br {
  display: none;
}

.tp-hero+figure img {
  aspect-ratio: 1.18;
  object-position: 48% center;
}

.tp-index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-26);
  padding: var(--space-15) 0 var(--space-20);
}

.tp-section {
  display: block;
  padding: var(--space-58) 0;
  scroll-margin-top: 100px;
}

.tp-section-head h2 {
  margin: var(--space-14) 0 var(--space-23);
}

.tp-processing figure {
  margin: var(--space-27) 0 var(--space-25);
}

.tp-processing figure img {
  aspect-ratio: 1.16;
}

.tp-processing .tp-copy {
  padding: 0;
}

.tp-points {
  gap: var(--space-25);
  margin-top: var(--space-28);
}

.tp-note {
  margin-top: var(--space-22);
}

.tp-quality figure {
  margin: var(--space-28) 0;
}

.tp-quality figure img {
  aspect-ratio: 1.2;
}

.tp-quality-points {
  gap: var(--space-27);
}

.tp-custom {
  padding-bottom: var(--space-48);
}

.tp-custom figure {
  margin: var(--space-28) 0;
}

.tp-custom figure img {
  aspect-ratio: 1.2;
  object-position: 60% center;
}

.tp-custom-notes {
  display: block;
}

.tp-custom-notes>div+div {
  margin-top: var(--space-27);
}

.tp-study {
  padding: var(--space-42) 0 var(--space-50);
}

.tp-study h2 {
  margin: var(--space-14) 0 var(--space-25);
}

.tp-preparation {
  padding: var(--space-45) 0 var(--space-40);
}

.tp-preparation h2 {
  margin: var(--space-14) 0 var(--space-23);
}

.tp-preparation dl {
  margin-top: var(--space-30);
}

.tp-preparation dt {
  font-size: var(--font-21);
}

.tp-preparation dd {
  margin-top: var(--space-8);
}

.tp-contact {
  display: block;
  padding: var(--space-45) 0 var(--space-30);
}

.tp-contact .solid-link {
  margin-top: var(--space-28);
  max-width: none;
  min-height: 68px;
}

.tp-disclaimer {
  padding-bottom: var(--space-38);
  line-height: 1.9;
}

.tp-contact .tp-note {
  max-width: none;
}

.technology-page main figcaption {
  font-size: var(--font-13);
  margin-top: var(--space-9);
}
}

/* technology-page */
@media(max-width:360px) {
.tp-hero h1 {
  font-size: var(--font-29);
}

.technology-page main h2 {
  font-size: var(--font-24);
}
}

/* technology-page */
@media(max-width:700px) {
.tp-contact h2 {
  max-width: 18em;
  text-wrap: balance;
}

.tp-contact h2 br {
  display: none;
}
}

/* technology-page */
.technology-page main {
  font-size: var(--font-16);
  line-height: 1.9;
  letter-spacing: .01em;
  font-weight: 500;
}

.technology-page main p {
  line-height: 1.9;
}

.technology-page main .kicker {
  font-size: var(--font-13);
}

.technology-page main figcaption,
.tp-note,
.tp-disclaimer {
  font-size: var(--font-14);
}

.tp-section-head>p:not(.kicker) {
  max-width: 44ch;
}

.tp-points h3,
.tp-quality-points h3,
.tp-custom-notes h3 {
  margin-bottom: var(--space-14);
}

.tp-points {
  gap: var(--space-34);
}

.tp-quality {
  display: block;
  border-top: 0;
  padding-top: var(--space-78);
  padding-bottom: var(--space-90);
}

.tp-quality .tp-section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 8%;
  align-items: end;
}

.tp-quality .tp-section-head .kicker {
  grid-column: 1/-1;
}

.tp-quality .tp-section-head h2 {
  margin-bottom: 0;
}

.tp-quality .tp-section-head>p:not(.kicker) {
  padding-bottom: var(--space-4);
}

.tp-quality figure {
  width: 88%;
  margin: var(--space-38) 0 var(--space-34) auto;
}

.tp-quality figure img {
  aspect-ratio: 1.5;
  object-position: center 57%;
}

.tp-quality-points {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1.1fr;
  gap: 5%;
  padding-right: 2%;
}

.tp-quality-points h3 {
  font-size: var(--font-23);
}

.tp-custom {
  border-top: 0;
  padding-top: var(--space-68);
  padding-bottom: var(--space-80);
}

.tp-study {
  padding: var(--space-60) 0 var(--space-65);
}

.tp-preparation {
  border-top: 0;
  padding-top: var(--space-45);
  padding-bottom: var(--space-65);
}

.tp-preparation dl>div:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.tp-study>div:last-child,
.tp-copy {
  max-width: 56ch;
}

.tp-contact {
  padding-top: var(--space-55);
}

.tp-note,
.tp-disclaimer {
  font-weight: 500;
}

/* technology-page */
@media(max-width:1024px) and (min-width:701px) {
.tp-quality figure {
  width: 100%;
  aspect-ratio: auto;
}

.tp-quality-points {
  gap: 4%;
}

.tp-quality-points h3 {
  font-size: var(--font-21);
}
}

/* technology-page */
@media(max-width:700px) {
.technology-page main {
  font-size: var(--font-16);
  line-height: 1.9;
}

.tp-points {
  gap: var(--space-32);
  margin-top: var(--space-30);
}

.tp-processing {
  padding-bottom: var(--space-40);
}

.tp-quality {
  padding-top: var(--space-38);
  padding-bottom: var(--space-48);
}

.tp-quality .tp-section-head {
  display: block;
}

.tp-quality .tp-section-head h2 {
  margin-bottom: var(--space-24);
}

.tp-quality figure {
  width: 100%;
  margin: var(--space-26) 0 var(--space-31);
}

.tp-quality figure img {
  aspect-ratio: 1.5;
  object-position: center;
}

.tp-quality-points {
  display: block;
  padding: 0;
}

.tp-quality-points>div+div {
  margin-top: var(--space-30);
}

.tp-quality-points h3 {
  font-size: var(--font-21);
}

.tp-custom {
  padding: var(--space-38) 0 var(--space-46);
}

.tp-custom figure {
  margin: var(--space-25) 0 var(--space-28);
}

.tp-custom-notes>div+div {
  margin-top: var(--space-30);
}

.tp-study {
  padding: var(--space-40) 0 var(--space-42);
}

.tp-study h2 {
  margin-bottom: var(--space-25);
}

.tp-preparation {
  padding: var(--space-30) 0 var(--space-42);
}

.tp-preparation dl {
  margin-top: var(--space-28);
}

.tp-preparation dl>div {
  padding-bottom: var(--space-18);
  margin-bottom: var(--space-20);
}

.tp-contact {
  padding: var(--space-40) 0 var(--space-27);
}

.tp-note {
  margin-top: var(--space-25);
}

.technology-page main figcaption {
  font-size: var(--font-14);
}

.tp-disclaimer {
  font-size: var(--font-14);
  line-height: 1.9;
}

.tp-contact h2 br {
  display: block;
}
}
}

@layer constraints {
/* technology-page */
@media(max-width:700px) {
.tp-contact h2 {
  font-size: var(--font-25);
}
}

/* technology-page */
@media(max-width:360px) {
.tp-contact h2 {
  font-size: var(--font-22);
}
}

/* technology-page */
@media(prefers-reduced-motion:reduce) {
.technology-page main * {
  animation: none;
  transition: none;
}
}

/* technology-page */
@media(max-width:700px) {
.tp-contact h2 {
  font-size: var(--font-22);
}
}

/* technology-page */
@media(max-width:360px) {
.tp-contact h2 {
  font-size: var(--font-19);
}
}
}

