/* AERO MATERIALS: application pages (Actuation, Filtration, Biotemplates, Optics) and Biotemplate registration.
   Application pages (Nov 2026 redesign): one layout, each area in its signature colour (Foundation v3):
   the colour fills the hero and the closing band and marks bullets, cards and numbers; the explanatory
   section sits on its light tint. */

:root {
  --site-panel: #FAFAFA;     /* move to tokens.css: registration form panel */
  --text-muted: #605F6B;     /* move to tokens.css: form hints and notes (live #B4B3B3 fails contrast) */
  --fs-page-small: clamp(14.27px, 15.16px - 0.062vw, 14.92px);   /* move to tokens.css: captions, form hints */
  --radius-xl: 28px;         /* move to tokens.css: form panel */
}

/* Signature colour per area: --app (ground), --app-ink (text on it), --app-tint (light section),
   --app-button / --app-button-ink (primary button on the coloured band; never a second orange) */
.app { --app-ground: var(--app); }   /* ground of hero and closing band; the area colour unless set below */
.app--actuation { --app: var(--site-accent); --app-ground: var(--app-actuation-deep); --app-ink: var(--site-white); --app-tint: var(--app-actuation-tint); --app-button: var(--site-white); --app-button-ink: var(--app-actuation-deep); }
.app--filtration { --app: var(--app-filtration); --app-ink: var(--site-white); --app-tint: var(--app-filtration-tint); --app-button: var(--site-white); --app-button-ink: var(--site-navy); }
.app--biotemplate { --app: var(--app-biotemplate); --app-ink: var(--site-white); --app-tint: var(--app-biotemplate-tint); --app-button: var(--site-white); --app-button-ink: var(--site-navy); }
.app--optics { --app: var(--app-optics); --app-ink: var(--site-navy); --app-tint: var(--app-optics-tint); --app-button: var(--site-navy); --app-button-ink: var(--site-white); }

/* Text */
.app, .reg { font-size: var(--fs-text); line-height: 1.65; color: var(--site-navy); }
.app p, .reg p { margin: 0 0 16px; }
.app p:last-child, .reg p:last-child { margin-bottom: 0; }
.app strong, .reg strong { font-weight: 600; }
.app a, .reg a { color: inherit; }

/* Heading left, text right */
.app-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 9fr); column-gap: 64px; align-items: start; }
.app-split > h1, .app-split > h2 { margin: 0; }
.app-text { min-width: 0; }
.app-section { padding-block: 96px; }

/* Hero in the signature colour, ending in rounded corners like a card */
.app-hero { padding-block: 56px 80px; border-radius: 0 0 var(--radius-hero) var(--radius-hero); background: var(--app-ground); color: var(--app-ink); }
.app-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 20px; font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; }
.app-marker { width: 12px; height: 12px; background: currentColor; }
.app-hero .app-split { grid-template-columns: minmax(0, 6fr) minmax(0, 8fr); }   /* "Biotemplates" fits on one line */
.app-hero h1 { font-size: clamp(48px, 2.8vw + 24px, 72px); line-height: 1; letter-spacing: -0.03em; }
.app .app-lead { margin-bottom: 20px; font-family: var(--font-display); font-size: clamp(22px, 1.2vw + 14px, 28px); line-height: 1.25; letter-spacing: -0.01em; }
.app-lead strong { font-weight: 700; }
.app-intro { font-size: 19px; line-height: 1.55; }

/* Headline figures from the publications */
.app-figures-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; margin: 0; padding-block: 48px 0; }
.app-figure { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 4px solid var(--app); }
.app-figure-value { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.app-figure-label, .app-figure-source { margin: 0; }
.app-figure-label { font-size: 16px; line-height: 1.5; }
.app-figure-source { font-size: 14px; color: var(--ink-soft-on-white); }

/* The challenge: list with small squares in the signature colour */
.bullets { margin: 1em 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bullets li { position: relative; padding-left: 24px; }
.bullets li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; background: var(--app); }
.app .bullets li > p { margin: 0; }

/* How our aero materials help: on the tint; lists become white cards with a marker */
.app-how { background: var(--app-tint); }
.app-how .bullets { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 24px 0; line-height: 1.5; }
.app-how .bullets li { padding: 50px 24px 24px; background: var(--site-white); }
.app-how .bullets li::before { left: 24px; top: 24px; width: 14px; height: 14px; }
.app-how .bullets li > p + p { margin-top: 4px; }
/* Actuation: the first list is the three-step principle, cards in the signature colour with numbers */
.app--actuation .app-how .bullets:first-of-type { counter-reset: step; }
.app--actuation .app-how .bullets:first-of-type li { counter-increment: step; padding-top: 24px; }
.app--actuation .app-how .bullets:first-of-type li::before { content: counter(step, decimal-leading-zero); position: static; display: block; width: auto; height: auto; margin-bottom: 10px; background: none; color: var(--site-accent); font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1; }

/* Example applications: numbered rows, the number in the signature colour */
.app-example-list { margin: 0; padding: 0; list-style: none; counter-reset: example; border-bottom: 1px solid var(--rule-soft); }
.app-example-list li { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 40px; padding: 24px 0 24px 60px; border-top: 1px solid var(--rule-soft); counter-increment: example; }
.app-example-list li::before { content: counter(example, decimal-leading-zero); position: absolute; left: 0; top: 24px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--app); color: var(--app-ink); font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.app-example-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.25; }
.app-example-title strong { font-weight: inherit; }

/* Closing question in the signature colour */
.app-cta { padding-block: 96px; background: var(--app-ground); color: var(--app-ink); }
.app-cta h2 { max-width: 960px; margin: 0 0 40px; font-size: clamp(32px, 2.4vw + 22px, 56px); line-height: 1.08; hyphens: auto; overflow-wrap: break-word; }   /* long German compounds on phones */
.app-cta-buttons { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.app-cta .button:not(.button--secondary) { background: var(--app-button); color: var(--app-button-ink); }
.app-cta .button:not(.button--secondary):hover { color: var(--app-button-ink); }
.app-cta .button:focus-visible { outline-color: currentColor; }

/* Research and publications */
.app-research h2 { font-size: var(--fs-h3); }
.app-pubs { margin-top: 24px; }
.app .app-pub { position: relative; margin: 0; padding: 24px 0 24px 24px; border-top: 1px solid var(--rule-soft); }
.app-pub::before { content: ""; position: absolute; left: 0; top: calc(24px + 0.65em); width: 8px; height: 8px; background: var(--app); }

/* Links to the other application areas */
.app-others { padding-block: 56px 72px; border-top: 1px solid var(--rule-soft); }
.app-others-heading { margin: 0 0 20px; font-size: 13px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft-on-white); }
.app-others-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.app-others-list a { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 0 20px; background: var(--mist); font-family: var(--font-display); font-weight: 700; font-size: 20px; text-decoration: none; transition: background-color 0.15s ease; }
.app-others-list a:hover { background: color-mix(in srgb, var(--mist), var(--site-navy) 6%); }
.app-others-list .marker { width: 14px; height: 14px; margin-top: 0; }
.app-others-list .app-chevron { width: 16px; height: 16px; margin-left: auto; transition: transform 0.2s ease; }
.app-others-list a:hover .app-chevron { transform: translateX(4px); }

/* Biotemplate registration */
.reg { padding-block: 47px 48px; }
.reg h1 { margin-bottom: 36px; }
.reg-intro { display: grid; grid-template-columns: 657fr 490fr; column-gap: 13.36%; align-items: start; }   /* live: 657px text, 490px image at 1440px */
.reg-intro figure { margin: 0; }
.reg-intro img { width: 100%; }
.reg-intro figcaption { margin-top: 11px; font-size: var(--fs-page-small); line-height: 1.8; text-align: right; }
.reg-panel { margin-top: 79px; padding: 79px 111px 96px; border-radius: var(--radius-xl); background: var(--site-panel); }
.reg-panel h2 { margin-bottom: 17px; }

.reg-form { margin: 0; font-size: var(--fs-nav); }
.reg-form fieldset { min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
.reg-form legend { padding: 0; }
.reg-field { margin-bottom: 20px; }
.reg-field > label, .reg-form legend { display: block; line-height: 1.8; padding-bottom: 4px; }
.reg-name { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
.reg-name label { display: block; font-size: 12px; line-height: 32px; }
.reg-req { margin-left: 0.4em; color: var(--text-muted); font-size: 12px; }
.reg .reg-hint { margin: 0 0 4px; padding-block: 7px; color: var(--text-muted); font-size: var(--fs-page-small); line-height: 1.8; }
.reg-form input[type="text"], .reg-form input[type="email"], .reg-form input[type="tel"] {
  display: block; width: 100%; height: 43px; padding: 5px 0; border: 0; border-bottom: 1px solid var(--site-navy); border-radius: 0;
  background: transparent; color: var(--site-black); font: inherit; }
.reg-form input:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }
.reg-section { margin: 32px 0 20px; }
.reg .reg-section p { margin: 0; }
/* Follow-up questions (reg-followups.js): set off by a line on the left */
.reg-followups { margin: 0 0 20px; padding-left: 20px; border-left: 1px solid var(--site-navy); }
.reg-followups > fieldset:last-child { margin-bottom: 0; }
.reg-specify { margin: 15px 0 0; }
.reg-rule { height: 0; margin: 32px 0; border: 0; border-bottom: 1px solid var(--site-black); }

/* Choice chips: the native control is hidden, the label text carries border and state */
.reg-choices { display: flex; flex-wrap: wrap; gap: 15px 10px; }
.reg-chip { position: relative; display: inline-block; font-size: var(--fs-page-small); line-height: 1.8; cursor: pointer; }
.reg-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.reg-chip span { display: block; padding: 1px 7px; border: 1px solid var(--site-navy); }
.reg-chip input:checked + span { background: var(--site-navy); color: var(--site-white); }
.reg-chip input:focus-visible + span { outline: 2px solid var(--site-accent); outline-offset: 2px; }

.reg-submit-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 48px; }
.reg-submit { min-height: 59px; padding: 0 32px; border: 0; background: var(--site-navy); color: var(--site-white); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-button); letter-spacing: -0.01em; }
.reg-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.reg-logo { width: 323px; }
.reg .reg-status { margin: 16px 0 0; font-size: var(--fs-page-small); line-height: 1.8; }
.reg-note { margin-top: 24px; color: var(--text-muted); font-size: var(--fs-page-small); line-height: 1.8; }
.reg .reg-note p { margin: 0 0 16px; }

/* Mobile (Squarespace switches at 767px) */
@media (max-width: 767px) {
  .app-split, .app-hero .app-split, .reg-intro { grid-template-columns: 1fr; row-gap: 16px; }
  .reg-intro figure { margin-top: 11px; }
  .app-hero { padding-block: 32px 56px; }
  .app-section { padding-block: 56px; }
  .app-figure-value { font-size: 44px; }
  .app-cta { padding-block: 64px; }
  .app-cta .button { width: 100%; }
  .reg { padding-block: 35px 48px; }
  .reg h1 { margin-bottom: 45px; }
  .reg-panel { margin-top: 11px; padding: 35px 45px 34px; }
  .reg-name { grid-template-columns: 1fr; }
  .reg-submit-row { flex-direction: column; align-items: flex-start; }
}