/* Heimat · nur für about-us.html */
/* ===== Produktseite im Startseiten-Stil (Test 30.10.2026) – baut nur auf den Startseiten-Tokens auf ===== */
.pp-h3 { font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
/* Hero: Text zentriert wie auf der Startseite, darunter die Produktgrafik ganz auf hellem Verlauf */
.pp-hero .px-hero { padding-bottom: 0; }
.pp-hero-stage { justify-content: center; }
.pp-hero-fig { margin: 0; width: min(100%, 620px); flex: none; }
.pp-hero-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (min-width: 961px) {
  .px-hero-sec .pp-hero-stage { height: auto !important; padding: var(--sp-9) var(--sp-9) var(--sp-6) !important; align-items: center !important; }
}
@media (max-width: 960px) {
  .px-hero-sec .pp-hero-stage { min-height: 0; padding: var(--sp-6) !important; border-radius: 16px 16px 0 0; }
}
/* Kennzahlen: drei Spalten, nur Linien */
.pp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-kpi { display: flex; flex-direction: column; gap: var(--sp-2); padding: clamp(32px, 1rem + 1.6vw, 48px) var(--gutter); }
.pp-kpi + .pp-kpi { border-left: 1px solid var(--rule); }
/* Drei Vorteile: Spalten an den Schienen, keine Karten */
.pp-bens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-ben { display: flex; flex-direction: column; gap: var(--sp-4); padding: clamp(40px, 1rem + 2.4vw, 56px) var(--gutter); color: inherit; transition: background-color var(--dur-hover) ease; }
.pp-ben + .pp-ben { border-left: 1px solid var(--rule); }
.pp-ben .px-tile { margin-bottom: var(--sp-2); }
.pp-ben p { font-size: var(--fs-copy); line-height: 1.55; color: var(--muted); }
.pp-ben-more { margin-top: auto; padding-top: var(--sp-2); display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-copy); font-weight: 500; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .pp-ben:hover { background: var(--ground); } .pp-ben:hover .px-arr { transform: translateX(3px); } }
/* Zweispalter mit Punkteliste: etwas kompakter als die Startseite, weil hier eine Liste dazukommt */
.pp-col-txt { padding-block: clamp(56px, 1.5rem + 3.4vw, 80px); gap: var(--sp-6); }
.pp-col-txt .px-lead { max-width: 52ch; }
.pp-points { gap: var(--sp-3); }
.pp-points li { font-size: var(--fs-copy); color: var(--text); }
.pp-points .px-ico { margin-top: 3px; }
/* Rollen: Liste links, Bild rechts, an den Schienen */
.pp-roles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); border-top: 1px solid var(--rule); }
.pp-role-list { display: flex; flex-direction: column; }
.pp-role-btn { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-1); min-height: 44px;
  padding: var(--sp-6) var(--gutter); border: 0; border-radius: 0; background: transparent; text-align: left; cursor: pointer;
  transition: background-color var(--dur-hover) ease; }
.pp-role-btn + .pp-role-btn { border-top: 1px solid var(--rule); }
.pp-role-btn:hover { background: var(--bg); }
.pp-role-on, .pp-role-on:hover { background: var(--bg); }
.pp-role-name { font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--muted); }
.pp-role-on .pp-role-name { color: var(--ink); }
.pp-role-cap { font-size: var(--fs-ui); color: var(--muted); }
.pp-role-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--rule); overflow: hidden; }
.pp-role-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left center; animation: pp-fill 7s linear forwards; }
@keyframes pp-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .pp-role-bar i { animation: none; transform: scaleX(1); } }
.pp-role-panel { position: relative; overflow: hidden; min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--dark); border-left: 1px solid var(--rule); }
.pp-role-img { position: absolute; top: 0; left: 0; width: 100%; height: 82%; object-fit: cover; display: block; filter: saturate(.82) contrast(1.03) brightness(.98); }
.pp-role-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(24, 72, 101, 1) 0%, rgba(24, 72, 101, 1) 32%, rgba(24, 72, 101, .7) 46%, rgba(24, 72, 101, .2) 62%, rgba(24, 72, 101, 0) 76%); }
.pp-role-copy { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-8) var(--gutter) var(--sp-9); }
.pp-role-copy .px-eyebrow { color: var(--accent-2); }
.pp-role-copy h3 { font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1vw, 1.875rem); line-height: 1.15; letter-spacing: -.03em; color: var(--dark-fg); text-wrap: balance; }
.pp-role-copy p { font-size: var(--fs-lead); line-height: 1.55; color: var(--dark-muted); max-width: 56ch; }
/* Kundenstimmen: Navy, zwei Spalten mit feiner Linie */
.pp-quote { margin: 0; display: flex; flex-direction: column; gap: var(--sp-6); padding: clamp(48px, 1rem + 3vw, 72px) var(--gutter); }
.pp-quote .px-case-mark { width: 44px; height: auto; fill: var(--accent-2); opacity: .7; }
.pp-quote blockquote { margin: 0; }
.pp-quote blockquote p { font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif; font-weight: 500; font-size: clamp(1.0625rem, .98rem + .35vw, 1.25rem); line-height: 1.6; letter-spacing: -.01em; color: var(--dark-fg); text-wrap: pretty; }
.pp-who { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--dark-rule); }
.pp-who-p { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-small); line-height: 1.4; color: var(--dark-muted); }
.pp-who-p img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: none; }
.pp-who-p b { display: block; font-size: var(--fs-body); font-weight: 500; color: var(--dark-fg); }
.pp-who .px-logo-ds { width: 92px; height: auto; color: #FFFFFF; }
/* Bilder (keine Inline-Grafik) im Rahmen: runde Ecken und weicher Schatten wie die Startseiten-Mockups */
.pp-shot { display: block; width: 100%; height: auto; border-radius: 12px; background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(12, 38, 54, .08), 0 28px 56px -24px rgba(12, 38, 54, .35); }
/* FAQ etwas dichter */
.pp-faq.px-faq summary { padding-block: var(--sp-5); }
@media (max-width: 960px) {
  .pp-kpis, .pp-bens, .pp-roles { grid-template-columns: minmax(0, 1fr); }
  .pp-kpi + .pp-kpi, .pp-ben + .pp-ben { border-left: 0; border-top: 1px solid var(--rule); }
  .pp-role-list { flex-direction: row; overflow-x: auto; }
  .pp-role-btn { flex: 1 0 auto; padding: var(--sp-4) var(--sp-5); }
  .pp-role-btn + .pp-role-btn { border-top: 0; border-left: 1px solid var(--rule); }
  .pp-role-cap { display: none; }
  .pp-role-panel { border-left: 0; border-top: 1px solid var(--rule); min-height: 420px; }
  .px-dark .px-cols > .pp-quote + .pp-quote { border-top: 1px solid var(--dark-rule); }
}
/* ===== Leos Feedback 30.10.: Kopf wie Original-Produktseite, Vorteile kompakt, Rollen, Integrationen ===== */
/* Heller Header (gleiche Menüs wie die Startseite, lesbar auf hell) */
.px-hdr.pp-hdr-light, .px-hdr.pp-hdr-light.is-top:not(.is-mnav):not(.is-mega) { background: #FFFFFF; color: var(--ink); border-bottom-color: var(--rule); }
.pp-hdr-light .px-nav-link { color: var(--text); }
.pp-hdr-light .px-nav-link:hover, .pp-hdr-light .px-nav-link[aria-expanded="true"] { color: var(--ink); }
.pp-hdr-light .px-nav-link::after { background: var(--accent); }
.pp-hdr-light .px-burger { color: var(--ink); }
.pp-hdr-light :focus-visible { outline-color: var(--accent); }
.pp-hdr-light .px-hdr-r .px-btn { background: var(--btn); border-color: transparent; color: var(--btn-fg); }
@media (hover: hover) and (pointer: fine) { .pp-hdr-light .px-hdr-r .px-btn:hover { background: var(--btn-hover); } }
/* Kopf: Grafik links, Text rechts, feine Linie dazwischen, hellgrüner Grund */
.pp-phero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.pp-phero-fig { display: flex; align-items: center; justify-content: center; padding: clamp(40px, 1rem + 2.6vw, 64px) var(--gutter); }
.pp-phero-fig svg { display: block; width: 100%; max-width: 580px; height: auto; overflow: visible; }
.pp-phero-txt { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 1rem + 3.4vw, 72px) var(--gutter); border-left: 1px solid var(--rule); }
.pp-phero-eb { font-size: .875rem; font-weight: 500; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--btn); }
.pp-phero-h1 { margin-top: var(--sp-6); font-size: clamp(2.375rem, 1.5rem + 2.4vw, 3.625rem); line-height: 1.06; }
.pp-phero-sub { margin-top: var(--sp-6); max-width: 48ch; font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); }
.pp-phero-btns { margin-top: var(--sp-7); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.pp-phero-btns .px-btn { min-height: 48px; font-size: var(--fs-copy); }
.pp-hkpis { margin-top: var(--sp-8); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule); background: #FFFFFF; }
.pp-hkpi { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); min-width: 0; }
.pp-hkpi + .pp-hkpi { border-left: 1px solid var(--rule); }
.pp-hkpi .px-kpi-num { margin: 0; font-size: clamp(1.5rem, 1.1rem + .9vw, 1.875rem); line-height: 1; }
.pp-hkpi-l { font-size: var(--fs-ui); line-height: 1.4; color: var(--muted); }
/* Vorteile kompakt: Icon links, Titel und Text rechts */
.pp-ben { flex-direction: row; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-7) var(--sp-6); }
.pp-ben:first-child { padding-left: var(--gutter); }
.pp-ben:last-child { padding-right: var(--gutter); }
.pp-ben .px-tile { margin: 0; width: 36px; height: 36px; }
.pp-ben-t { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.pp-ben .pp-h3 { font-size: 1.0625rem; line-height: 1.3; }
.pp-ben p { font-size: var(--fs-ui); line-height: 1.5; }
/* Rollen: Liste breiter und größer, Bild kleiner; Spalten wie Überschrift / Text darüber */
#rollen .px-split-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding-inline: 0; }
#rollen .px-split-top > * { padding-inline: var(--gutter); }
.pp-roles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pp-role-btn { gap: var(--sp-2); padding: var(--sp-7) var(--gutter); }
.pp-role-name { font-size: clamp(1.375rem, 1.1rem + .7vw, 1.75rem); letter-spacing: -.03em; }
.pp-role-cap { font-size: var(--fs-lead); line-height: 1.45; }
.pp-role-panel { min-height: 400px; }
.pp-role-img { height: 78%; }
.pp-role-copy { padding: var(--sp-7) var(--gutter) var(--sp-8); }
.pp-role-copy h3 { font-size: clamp(1.375rem, 1.1rem + .7vw, 1.75rem); }
.pp-role-copy p { font-size: var(--fs-copy); }
@media (max-width: 960px) {
  .pp-phero-grid { grid-template-columns: minmax(0, 1fr); }
  .pp-phero-txt { order: -1; border-left: 0; padding-bottom: var(--sp-6); }
  .pp-phero-fig { padding-top: 0; }
  #rollen .px-split-top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .pp-roles { grid-template-columns: minmax(0, 1fr); }
  .pp-role-name { font-size: 1.125rem; }
}
@media (max-width: 560px) {
  .pp-hkpis { grid-template-columns: minmax(0, 1fr); }
  .pp-hkpi + .pp-hkpi { border-left: 0; border-top: 1px solid var(--rule); }
  .pp-ben { padding-inline: var(--gutter); }
}
/* ===== Leos Feedback Runde 2 (30.10.) ===== */
/* Hero ohne senkrechte Linie */
.pp-phero-txt { border-left: 0; }
/* „Eine Heimat für alle.“: links Überschrift + Rollen, rechts Bild; beide oben auf einer Linie */
.pp-roles2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 0; }
.pp-roles-l { display: flex; flex-direction: column; min-width: 0; }
.pp-roles-head { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-9) var(--gutter) var(--sp-8); }
.pp-roles-head .px-lead { max-width: 48ch; }
.pp-roles2 .pp-role-list { flex: 1; border-top: 1px solid var(--rule); }
.pp-roles2 .pp-role-btn { padding: var(--sp-6) var(--gutter); }
.pp-roles-r { display: flex; padding: var(--sp-9) var(--gutter); border-left: 1px solid var(--rule); }
.pp-roles2 .pp-role-panel { flex: 1; min-height: 0; border-left: 0; }
@media (max-width: 960px) {
  .pp-roles2 { grid-template-columns: minmax(0, 1fr); }
  .pp-roles-head { padding: var(--sp-8) var(--gutter) var(--sp-6); }
  .pp-roles-r { border-left: 0; border-top: 1px solid var(--rule); padding: var(--sp-6) var(--gutter); }
  .pp-roles2 .pp-role-panel { min-height: 420px; }
}
/* Hero-Kennzahlen: Zeile passt sich der Anzahl an (2 Zellen ohne leere dritte), 30.10. */
.pp-hkpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .pp-hkpis--2 { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Über uns (au-) ---------- */
.au-hero-txt { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 1rem + 3.4vw, 80px) var(--gutter); }
.au-h1 { margin-top: var(--sp-6); font-size: clamp(2.25rem, 1.4rem + 2.2vw, 3.5rem); line-height: 1.06; text-wrap: balance; }
.au-lead { margin-top: var(--sp-6); max-width: 52ch; font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); }
.au-photo { margin: 0; display: flex; flex-direction: column; }
.au-photo img { display: block; width: 100%; flex: 1; min-height: 0; object-fit: cover; }
.au-names { width: 100%; display: grid; grid-template-columns: 1fr 1fr; padding: var(--sp-3) 0; border-top: 1px solid var(--rule); }
.au-names span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .875rem; color: var(--muted); }
.au-names b { font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; color: var(--ink); }
.au-txt { padding: clamp(48px, 1rem + 3vw, 72px) var(--gutter); }
.au-h2 { font-size: clamp(1.625rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; max-width: 20ch; }
.au-copy { margin-top: var(--sp-5); max-width: 60ch; font-size: var(--fs-copy); line-height: 1.65; color: var(--muted); }
/* Formular-Block: Grundwerte wie auf der alten Seite (Tailwind-Preflight), nur hier drin */
.au-alt { font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; line-height: 1.5; color: rgb(24, 72, 101); background: #fff; padding-bottom: 4rem; }
/* Wunsch 30.10.: Block weiß und näher an die Kante darüber (nur Hintergrund + Versatz, Formular unverändert) */
.au-alt #demo { background: #fff; }
.au-alt #demo > div { top: 0; }
.au-alt *, .au-alt ::before, .au-alt ::after { box-sizing: border-box; border: 0 solid #e5e7eb; }
.au-alt h2, .au-alt p, .au-alt form { margin: 0; }
.au-alt h2 { font-size: inherit; font-weight: inherit; letter-spacing: normal; }
.au-alt input { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0; }
.au-alt input[type="submit"] { -webkit-appearance: button; background-image: none; }
.au-alt input::placeholder { opacity: 1; color: #9ca3af; }
.au-alt a { color: inherit; text-decoration: inherit; }
.au-alt label { display: inline; }
.au-alt .au-note { margin-top: 1rem; font-size: .8125rem; color: rgb(24, 72, 101); background: #fff; padding: .75rem; border: 1px solid #DFEAEE; }
.au-alt .au-note[data-show="false"] { display: none; }
@media (max-width: 960px) {
  .au-photo { border-left: 0; border-top: 1px solid var(--rule); }
}
/* Alte Tailwind-Klassen des Formular-Blocks, auf .au-alt begrenzt (build/ueber_uns_formular_tailwind.css) */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  
}
.au-alt .invisible {
  visibility: hidden
}
.au-alt .absolute {
  position: absolute
}
.au-alt .relative {
  position: relative
}
.au-alt .top-16 {
  top: 4rem
}
.au-alt .mx-auto {
  margin-left: auto;
  margin-right: auto
}
.au-alt .mb-1 {
  margin-bottom: 0.25rem
}
.au-alt .mb-10 {
  margin-bottom: 2.5rem
}
.au-alt .mb-2 {
  margin-bottom: 0.5rem
}
.au-alt .mb-4 {
  margin-bottom: 1rem
}
.au-alt .mb-6 {
  margin-bottom: 1.5rem
}
.au-alt .mr-2 {
  margin-right: 0.5rem
}
.au-alt .mt-1 {
  margin-top: 0.25rem
}
.au-alt .mt-10 {
  margin-top: 2.5rem
}
.au-alt .mt-2 {
  margin-top: 0.5rem
}
.au-alt .mt-6 {
  margin-top: 1.5rem
}
.au-alt .mt-8 {
  margin-top: 2rem
}
.au-alt .block {
  display: block
}
.au-alt .flex {
  display: flex
}
.au-alt .grid {
  display: grid
}
.au-alt .hidden {
  display: none
}
.au-alt .h-5 {
  height: 1.25rem
}
.au-alt .w-5 {
  width: 1.25rem
}
.au-alt .w-full {
  width: 100%
}
.au-alt .max-w-screen-sm {
  max-width: 640px
}
.au-alt .max-w-screen-xl {
  max-width: 1280px
}
.au-alt .cursor-pointer {
  cursor: pointer
}
.au-alt .scroll-mt-20 {
  scroll-margin-top: 5rem
}
.au-alt .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr))
}
.au-alt .items-start {
  align-items: flex-start
}
.au-alt .gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem
}
.au-alt .gap-y-8 {
  row-gap: 2rem
}
.au-alt :is(.space-x-3 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))
}
.au-alt .rounded {
  border-radius: 0.25rem
}
.au-alt .rounded-lg {
  border-radius: 0.5rem
}
.au-alt .rounded-xl {
  border-radius: 0.75rem
}
.au-alt .border-0 {
  border-width: 0px
}
.au-alt .border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1))
}
.au-alt .bg-primary-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(246 251 251 / var(--tw-bg-opacity, 1))
}
.au-alt .bg-primary-supportingBlue {
  --tw-bg-opacity: 1;
  background-color: rgb(21 132 156 / var(--tw-bg-opacity, 1))
}
.au-alt .px-4 {
  padding-left: 1rem;
  padding-right: 1rem
}
.au-alt .px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem
}
.au-alt .py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem
}
.au-alt .py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem
}
.au-alt .py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem
}
.au-alt .text-left {
  text-align: left
}
.au-alt .text-center {
  text-align: center
}
.au-alt .indent-3 {
  text-indent: 0.75rem
}
.au-alt .text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem
}
.au-alt .text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem
}
.au-alt .text-xs {
  font-size: 0.75rem;
  line-height: 1rem
}
.au-alt .font-bold {
  font-weight: 700
}
.au-alt .font-light {
  font-weight: 300
}
.au-alt .font-medium {
  font-weight: 500
}
.au-alt .leading-tight {
  line-height: 1.25
}
.au-alt .text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1))
}
.au-alt .text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1))
}
.au-alt .text-primary-100 {
  --tw-text-opacity: 1;
  color: rgb(24 72 101 / var(--tw-text-opacity, 1))
}
.au-alt .text-primary-main {
  --tw-text-opacity: 1;
  color: rgb(24 72 101 / var(--tw-text-opacity, 1))
}
.au-alt .text-primary-supportingBlue {
  --tw-text-opacity: 1;
  color: rgb(21 132 156 / var(--tw-text-opacity, 1))
}
.au-alt .text-white-main {
  --tw-text-opacity: 1;
  color: rgb(245 245 245 / var(--tw-text-opacity, 1))
}
.au-alt .shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.au-alt .ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.au-alt .ring-inset {
  --tw-ring-inset: inset
}
.au-alt .ring-gray-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1))
}
.au-alt .placeholder\:text-gray-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1))
}
.au-alt .placeholder\:text-gray-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1))
}
.au-alt .hover\:bg-primary-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(16 114 135 / var(--tw-bg-opacity, 1))
}
.au-alt .hover\:text-white-main:hover {
  --tw-text-opacity: 1;
  color: rgb(245 245 245 / var(--tw-text-opacity, 1))
}
.au-alt .hover\:underline:hover {
  text-decoration-line: underline
}
.au-alt .focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px
}
.au-alt .focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.au-alt .focus\:ring-4:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.au-alt .focus\:ring-inset:focus {
  --tw-ring-inset: inset
}
.au-alt .focus\:ring-primary-supportingBlue:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(21 132 156 / var(--tw-ring-opacity, 1))
}
.au-alt .focus\:ring-white-main:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(245 245 245 / var(--tw-ring-opacity, 1))
}
.au-alt .dark\:bg-gray-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1))
}
.au-alt .dark\:text-gray-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1))
}
.au-alt .dark\:text-white-main:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(245 245 245 / var(--tw-text-opacity, 1))
}
@media (min-width: 640px) {
  .au-alt .sm\:col-span-3 {
    grid-column: span 3 / span 3
  }

  .au-alt .sm\:mb-0 {
    margin-bottom: 0px
  }

  .au-alt .sm\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr))
  }

  .au-alt .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem
  }

  .au-alt .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem
  }

  .au-alt .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
  }

  .au-alt .sm\:leading-6 {
    line-height: 1.5rem
  }
}
@media (min-width: 768px) {
  .au-alt .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
  }
}
@media (min-width: 1024px) {
  .au-alt .lg\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
  }
}