/* ==========================================================================
   EaseTalk design system
   Ported verbatim from the Flutter app's AppDesignSystem.
   One blue, one amber accent, one page grey, Poppins only.

   Contents
   1.  Tokens
   2.  Font face (self hosted Poppins)
   3.  Reset and base
   4.  Typography scale
   5.  Layout: shell, section, prose
   6.  Components (the eleven app components)
   7.  Header and navigation
   8.  Footer
   9.  Forms and modal
   10. Utilities
   11. Motion and print
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand */
  --primary: #0048CD;
  --primary-light: #4080FF;
  --primary-dark: #003299;
  --primary-surface: #F0F7FF;
  --primary-container: #E3F2FD;
  --on-primary: #FFFFFF;
  --on-primary-container: #003299;

  /* Accent (amber) */
  --accent: #CD8500;
  --accent-light: #E6A817;
  --accent-container: #FFF3D6;
  --on-accent: #FFFFFF;

  /* Semantic */
  --success: #22C55E;
  --success-container: #DCFCE7;
  --on-success-container: #166534;
  --warning: #F59E0B;
  --warning-container: #FEF3C7;
  --on-warning-container: #92400E;
  --error: #EF4444;
  --error-container: #FEE2E2;
  --on-error-container: #DC2626;
  --info: #3B82F6;
  --info-container: #DBEAFE;
  --on-info-container: #1E40AF;

  /* Surfaces */
  --page-background: #F5F7FA;
  --surface: #FFFFFF;
  --surface-secondary: #F1F5F9;
  --surface-tertiary: #E2E8F0;
  --surface-variant: #F0F2F6;
  --surface-container: #F8F9FA;

  /* Lines */
  --border: #E6E8EE;
  --outline: #D1D5DB;
  --outline-variant: #E5E7EB;

  /* Text */
  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --text-tertiary: #94A3B8;
  --text-disabled: #D1D5DB;
  --text-inverse: #FFFFFF;

  /* Derived, not in the app. --text-body is #64748B darkened so that secondary
     toned paragraphs clear WCAG AA on the page grey as well as on white.
     #64748B on #F5F7FA is 4.43:1 and fails; #475569 is 7.06:1 and passes AAA. */
  --text-body: #475569;

  /* Gradient */
  --primary-gradient: linear-gradient(135deg, #0048CD 0%, #003299 100%);

  /* Brand orange. Reserved for one phrase: "Speak freely." in the home hero.
     The original site orange measured 2.64:1 against --primary and failed even
     the 3:1 large text threshold. This is the same hue lifted until it passes,
     at 3.22:1 on the lighter end of the gradient and 4.72:1 on the darker end.
     Full measurements in docs/DESIGN-TOKENS.md section 7. Change this one
     value to move it; nothing else references the orange. */
  --brand-orange: #FF8A5B;

  /* Spacing, strict 4px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-full: 999px;

  /* Elevation. The app leans on hairline borders, not shadows. */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(30, 41, 59, 0.04);
  --elevation-3: 0 3px 8px rgba(30, 41, 59, 0.06);
  --elevation-6: 0 6px 16px rgba(30, 41, 59, 0.08);
  --elevation-12: 0 12px 32px rgba(30, 41, 59, 0.10);
  --elevation-24: 0 24px 56px rgba(30, 41, 59, 0.14);

  /* Type */
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Measure */
  --shell-max: 1160px;
  --shell-pad: 24px;
  --reading-max: 68ch;
  --legal-max: 680px;
}

/* --------------------------------------------------------------------------
   2. Font face. Self hosted so the site behaves like the app, which bundles
   Poppins and never fetches a font at runtime. No third party request, which
   also keeps the privacy story simple.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/poppins-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/poppins-latinext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-latinext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/poppins-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/poppins-latinext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-latinext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/poppins-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/poppins-latinext-800.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   3. Reset and base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--page-background);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

img, video, svg { max-width: 100%; height: auto; }
img, video { display: block; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-primary);
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--primary-dark); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}

/* Focus. 2px primary, 2px offset, on every interactive element. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.et-on-dark :focus-visible,
.et-footer :focus-visible,
.et-hero :focus-visible {
  outline-color: var(--text-inverse);
}

.et-skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--elevation-12);
}
.et-skip-link:focus { transform: translateY(0); }

.et-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.et-sprite { display: none; }

/* --------------------------------------------------------------------------
   4. Typography scale
   Weights, line heights and tracking are the app's. Display and headline sizes
   scale up on wide screens with clamp() so the hero reads at desktop size
   while still reflowing at 400% zoom.
   -------------------------------------------------------------------------- */

.et-display {
  font-size: clamp(2.125rem, 1.35rem + 3.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.et-h1 {
  font-size: clamp(1.875rem, 1.3rem + 2.5vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.et-h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.55vw, 2.25rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.et-h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.65vw, 1.5rem);
  font-weight: 600;
  line-height: 1.33;
}

.et-h4 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
}

.et-title-lg { font-size: 1.375rem; font-weight: 500; line-height: 1.27; }
.et-title-md { font-size: 1rem; font-weight: 500; line-height: 1.5; letter-spacing: 0.15px; }

.et-lead {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-body);
  max-width: var(--reading-max);
}

.et-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-body);
  max-width: var(--reading-max);
}

.et-body-sm { font-size: 0.9375rem; line-height: 1.55; color: var(--text-body); }

/* Small supporting labels. Only ever on white or on a light container where
   the pairing has been checked. Never on --page-background. */
.et-meta {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
  letter-spacing: 0.1px;
}

.et-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.et-label {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1px;
  color: var(--text-primary);
}

.et-strong { color: var(--text-primary); font-weight: 600; }

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */

.et-shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

@media (max-width: 480px) {
  :root { --shell-pad: 16px; }
}

.et-section {
  padding-block: var(--space-16);
}
.et-section--tight { padding-block: var(--space-12); }
.et-section--loose { padding-block: var(--space-24); }

@media (max-width: 768px) {
  .et-section { padding-block: var(--space-12); }
  .et-section--loose { padding-block: var(--space-16); }
}

.et-section--surface { background: var(--surface); }
.et-section--tinted { background: var(--primary-surface); }

.et-stack > * + * { margin-top: var(--space-4); }
.et-stack-2 > * + * { margin-top: var(--space-2); }
.et-stack-6 > * + * { margin-top: var(--space-6); }
.et-stack-8 > * + * { margin-top: var(--space-8); }

.et-grid {
  display: grid;
  gap: var(--space-6);
}
.et-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.et-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.et-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.et-split {
  display: grid;
  gap: var(--space-12);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .et-split { grid-template-columns: 1fr 1fr; }
  .et-split--wide-first { grid-template-columns: 1.15fr 1fr; }
  .et-split--wide-last { grid-template-columns: 1fr 1.15fr; }
}

/* Section intro block */
.et-section-intro {
  max-width: 44rem;
  margin-bottom: var(--space-12);
}
.et-section-intro > * + * { margin-top: var(--space-4); }
.et-section-intro--center {
  margin-inline: auto;
  text-align: center;
}
.et-section-intro--center .et-lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   6. Components
   -------------------------------------------------------------------------- */

/* 6.1 Gradient hero card ---------------------------------------------------
   --primary-gradient, radius 20, padding 24. White text throughout.
   Contrast: #FFFFFF on #0048CD is 7.51:1, on #003299 is 11.08:1. Body copy at
   92% white on #0048CD is 6.59:1. All AA and above. */
.et-hero-card {
  background: var(--primary-gradient);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  color: var(--text-inverse);
}
.et-hero-card__tile {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  color: var(--text-inverse);
  margin-bottom: var(--space-4);
}
.et-hero-card__tile svg { width: 26px; height: 26px; }
.et-hero-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-inverse);
  margin-bottom: var(--space-2);
}
.et-hero-card__body {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}
.et-hero-card a { color: var(--text-inverse); }

/* 6.2 Standard card --------------------------------------------------------
   White, radius 16, 1px --border, almost no shadow. The single most
   recognisable surface in the app. */
.et-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.et-card--flush { padding: var(--space-4); }
.et-card--roomy { padding: var(--space-8); }

.et-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.et-card__body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-body);
}

/* Interactive card. Link cards get a hairline lift, never a big shadow. */
a.et-card,
.et-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
a.et-card:hover,
.et-card--link:hover {
  border-color: var(--primary-light);
  box-shadow: var(--elevation-3);
}

/* 6.3 Icon tile ------------------------------------------------------------
   40 to 44px square, --primary-container, radius 12, --primary icon.
   Contrast: #0048CD on #E3F2FD is 6.58:1. */
.et-tile {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--primary-container);
  color: var(--primary);
  display: grid;
  place-items: center;
}
.et-tile svg { width: 24px; height: 24px; }
.et-tile--sm { width: 40px; height: 40px; }
.et-tile--sm svg { width: 22px; height: 22px; }
.et-tile--accent {
  background: var(--accent-container);
  color: #7A5000; /* --accent darkened for AA on --accent-container: 6.3:1 */
}
.et-tile--success { background: var(--success-container); color: var(--on-success-container); }
.et-tile--warning { background: var(--warning-container); color: var(--on-warning-container); }
.et-tile--solid { background: var(--primary); color: var(--on-primary); }

/* 6.4 Fact row -------------------------------------------------------------
   Icon tile plus title over body. The workhorse of every feature list. */
.et-fact {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.et-fact__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.et-fact__body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-body);
}
.et-fact-list {
  display: grid;
  gap: var(--space-6);
  list-style: none;
}

/* 6.5 Numbered step timeline ----------------------------------------------
   Filled --primary discs with white numerals, joined by a 2px
   --primary-container rail. */
.et-steps {
  list-style: none;
  display: grid;
  gap: 0;
}
.et-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-4);
  position: relative;
  padding-bottom: var(--space-8);
}
.et-step:last-child { padding-bottom: 0; }
.et-step::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 8px;
  width: 2px;
  background: var(--primary-container);
}
.et-step:last-child::before { display: none; }
.et-step__num {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary);
  display: grid;
  place-items: center;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
}
.et-step__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  margin-bottom: 4px;
  padding-top: 10px;
}
.et-step__body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-body);
}

/* 6.6 Section heading ------------------------------------------------------
   40px --primary rounded square with a white icon, beside title and subtitle. */
.et-section-head {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-6);
}
.et-section-head__icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--on-primary);
  display: grid;
  place-items: center;
}
.et-section-head__icon svg { width: 22px; height: 22px; }
.et-section-head__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
}
.et-section-head__sub {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-body);
  margin-top: 2px;
}

/* 6.7 Contents / jump card -------------------------------------------------
   Numbered rows with a trailing arrow. Used at the top of every legal page. */
.et-contents {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.et-contents__head {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.et-contents__head svg { width: 20px; height: 20px; color: var(--primary); }
.et-contents__list { list-style: none; }
.et-contents__list li + li { border-top: 1px solid var(--border); }
.et-contents__link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 52px;
  padding: 12px var(--space-6);
  text-decoration: none;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 500;
  transition: background-color 140ms ease;
}
.et-contents__link:hover { background: var(--primary-surface); color: var(--primary-dark); }
.et-contents__num {
  flex: none;
  min-width: 28px;
  height: 28px;
  padding-inline: 6px;
  border-radius: var(--radius-sm);
  background: var(--primary-container);
  color: var(--on-primary-container);
  display: grid;
  place-items: center;
  font-size: 0.8125rem;
  font-weight: 700;
}
.et-contents__arrow {
  margin-left: auto;
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
}

/* 6.8 Notice card ----------------------------------------------------------
   Amber by default. Used for "not a medical device" and "AI has limits".
   Contrast: #92400E on #FEF3C7 is 6.43:1. */
.et-notice {
  background: var(--warning-container);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  color: var(--on-warning-container);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.et-notice__icon { flex: none; width: 24px; height: 24px; margin-top: 2px; }
.et-notice__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 4px;
}
.et-notice__body { font-size: 1rem; line-height: 1.6; }
.et-notice__body a { color: inherit; font-weight: 600; }

/* Blue variant, for neutral explanation rather than caution.
   #1E40AF on #DBEAFE is 7.24:1. */
.et-notice--info {
  background: var(--info-container);
  border-color: rgba(59, 130, 246, 0.35);
  color: var(--on-info-container);
}
/* Green variant, for "this is what we do keep safe".
   #166534 on #DCFCE7 is 6.49:1. */
.et-notice--good {
  background: var(--success-container);
  border-color: rgba(34, 197, 94, 0.35);
  color: var(--on-success-container);
}

/* Confirm marker. Only ever appears on the legal pages, never in marketing
   copy. Deliberately loud so it cannot ship unnoticed. */
.et-confirm {
  display: block;
  margin: var(--space-4) 0;
  padding: 12px var(--space-4);
  border-left: 4px solid var(--warning);
  background: var(--warning-container);
  color: var(--on-warning-container);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.55;
}

/* 6.9 Status disc ----------------------------------------------------------
   36px circle for included / done / accepted lists. */
.et-check-list {
  list-style: none;
  display: grid;
  gap: var(--space-4);
}
.et-check-list li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-body);
}
.et-disc {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--success-container);
  color: var(--on-success-container);
  display: grid;
  place-items: center;
}
.et-disc svg { width: 20px; height: 20px; }
/* #DC2626 on #FEE2E2 is 3.95:1. That clears the 3:1 threshold for non text
   content (WCAG 1.4.11) but not the 4.5:1 needed for text, so this pairing is
   only ever allowed to hold an icon glyph. Never put a word in it. */
.et-disc--no { background: var(--error-container); color: var(--on-error-container); }
.et-disc--neutral { background: var(--surface-secondary); color: var(--text-body); }

/* 6.10 Pill ----------------------------------------------------------------
   Radius 999, 11 to 12px 600 label. */
.et-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-full);
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--surface-secondary);
  color: var(--text-body);
  white-space: nowrap;
}
.et-pill svg { width: 14px; height: 14px; }
/* #003299 on #E3F2FD is 9.70:1 */
.et-pill--brand { background: var(--primary-container); color: var(--on-primary-container); }
.et-pill--accent { background: var(--accent-container); color: #7A5000; }
.et-pill--success { background: var(--success-container); color: var(--on-success-container); }

/* 6.11 Grouped list card ---------------------------------------------------
   One bordered card, rows separated by 1px dividers. Calmer than a stack of
   separate cards. Use for FAQs, consent lists, comparison rows. */
.et-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.et-group__head {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
  background: var(--surface-container);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.et-group__head .et-tile { width: 40px; height: 40px; }
.et-group__head-title { font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); }
.et-group__head-sub { font-size: 0.9375rem; color: var(--text-body); margin-top: 1px; }
.et-group__list { list-style: none; }
.et-group__list > li { padding: var(--space-4) var(--space-6); }
.et-group__list > li + li { border-top: 1px solid var(--border); }
.et-group__row { display: flex; gap: var(--space-4); align-items: flex-start; }
.et-group__row-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.et-group__row-body { font-size: 1rem; line-height: 1.6; color: var(--text-body); }

/* Native disclosure rows, no JavaScript */
.et-group details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 44px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
}
.et-group details > summary::-webkit-details-marker { display: none; }
.et-group details > summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  color: var(--primary);
  -webkit-mask: var(--et-chevron) center / contain no-repeat;
  mask: var(--et-chevron) center / contain no-repeat;
  transition: transform 180ms ease;
}
.et-group details[open] > summary::after { transform: rotate(180deg); }
.et-group details > div { padding-top: var(--space-4); }
:root {
  --et-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Buttons ------------------------------------------------------------------
   Radius 12, minimum 44px target height. */
.et-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.et-btn svg { width: 18px; height: 18px; flex: none; }

/* White on #0048CD is 7.51:1 */
.et-btn--primary { background: var(--primary); color: var(--on-primary); }
.et-btn--primary:hover { background: var(--primary-dark); color: var(--on-primary); }

/* #0048CD on #FFFFFF is 7.51:1 */
.et-btn--secondary {
  background: var(--surface);
  color: var(--primary);
  border-color: var(--outline);
}
.et-btn--secondary:hover { border-color: var(--primary); background: var(--primary-surface); color: var(--primary-dark); }

.et-btn--quiet { background: transparent; color: var(--primary); padding-inline: 8px; }
.et-btn--quiet:hover { color: var(--primary-dark); text-decoration: underline; }

/* For use inside a gradient hero card */
.et-btn--on-dark { background: var(--surface); color: var(--primary); }
.et-btn--on-dark:hover { background: var(--primary-surface); color: var(--primary-dark); }
.et-btn--ghost-dark {
  background: transparent;
  color: var(--text-inverse);
  border-color: rgba(255, 255, 255, 0.55);
}
.et-btn--ghost-dark:hover { background: rgba(255, 255, 255, 0.12); color: var(--text-inverse); }

.et-btn--block { width: 100%; }

.et-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Inline text link with arrow */
.et-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  min-height: 44px;
}
.et-link:hover { color: var(--primary-dark); text-decoration: underline; }
.et-link svg { width: 16px; height: 16px; }

/* Generic icon sizing */
.et-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.et-icon--sm { width: 18px; height: 18px; }
.et-icon--xs { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.et-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(10px)) {
  .et-header { background: var(--surface); }
}

.et-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 68px;
  padding-block: 10px;
}

.et-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}
.et-brand__mark { height: 34px; width: auto; }
.et-brand__type { height: 20px; width: auto; }

.et-nav { display: none; }
@media (min-width: 1024px) {
  .et-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
}
.et-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-body);
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.et-nav__link:hover { background: var(--primary-surface); color: var(--primary-dark); }
.et-nav__link[aria-current="page"] {
  color: var(--primary);
  font-weight: 600;
  background: var(--primary-container);
}

.et-header__actions { display: none; }
@media (min-width: 1024px) {
  .et-header__actions { display: flex; align-items: center; gap: var(--space-2); }
}
.et-header .et-btn { min-height: 44px; padding: 10px 18px; font-size: 0.9375rem; }

.et-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
}
@media (min-width: 1024px) { .et-menu-toggle { display: none; } }
.et-menu-toggle:hover { background: var(--primary-surface); color: var(--primary); }
.et-menu-toggle__close { display: none; }
.et-menu-toggle[aria-expanded="true"] .et-menu-toggle__open { display: none; }
.et-menu-toggle[aria-expanded="true"] .et-menu-toggle__close { display: block; }

.et-mobile-menu {
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.et-mobile-menu[hidden] { display: none; }
.et-mobile-menu__inner { padding-block: var(--space-4) var(--space-6); }
.et-mobile-menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 52px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
}
.et-mobile-menu__link:hover { background: var(--primary-surface); color: var(--primary-dark); }
.et-mobile-menu__link[aria-current="page"] { color: var(--primary); background: var(--primary-container); font-weight: 600; }
.et-mobile-menu__link svg { width: 20px; height: 20px; color: var(--primary); flex: none; }
.et-mobile-menu .et-btn { margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   8. Footer. Structure preserved from the original site, colours moved onto
   the token set and two factual claims corrected.
   -------------------------------------------------------------------------- */

.et-footer {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: var(--text-inverse);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.et-footer__watermark {
  display: none;
  position: absolute;
  bottom: 0;
  width: 192px;
  height: 192px;
  opacity: 0.05;
  pointer-events: none;
}
@media (min-width: 768px) { .et-footer__watermark { display: block; } }
.et-footer__watermark--left { left: 0; }
.et-footer__watermark--right { right: 0; }
.et-footer__watermark img { width: 100%; height: 100%; object-fit: contain; }

.et-footer__inner { position: relative; z-index: 1; padding-block: var(--space-12); }

.et-footer__top {
  position: relative;
  min-height: 250px;
  margin-bottom: var(--space-12);
  padding-bottom: clamp(264px, 68vw, 320px);
  text-align: center;
}
.et-footer__top::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(390px, 96vw);
  aspect-ratio: 3 / 2;
  background: url("footerpic33.png") center / contain no-repeat;
  transform: translateX(-50%);
  pointer-events: none;
}
.et-footer__logo {
  display: inline-flex;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-sm);
}
.et-footer__logo img { height: 44px; width: auto; filter: brightness(0) invert(1); }
.et-footer__tagline {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  max-width: 36rem;
  margin-inline: auto;
}
.et-footer__tagline span { display: block; }
.et-footer__tagline span + span { margin-top: 4px; }

@media (min-width: 900px) {
  .et-footer__top {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-8) 460px var(--space-8) 6%;
    text-align: left;
  }
  .et-footer__top::after {
    left: auto;
    right: 2%;
    bottom: 50%;
    width: 450px;
    transform: translateY(50%);
  }
  .et-footer__tagline { margin-inline: 0; }
}

.et-footer__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-12);
}
.et-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 7px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-inverse);
}
.et-footer__badge svg { width: 15px; height: 15px; flex: none; color: rgba(255, 255, 255, 0.9); }

.et-footer__nav {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  padding-top: var(--space-12);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-align: left;
}
@media (min-width: 640px) { .et-footer__nav { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .et-footer__nav { grid-template-columns: repeat(4, 1fr); gap: var(--space-12); } }

.et-footer__heading {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-4);
}
.et-footer__list { list-style: none; display: grid; gap: 2px; }
.et-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  border-radius: var(--radius-xs);
}
.et-footer__link:hover { color: var(--text-inverse); text-decoration: underline; }
.et-footer__link svg { width: 16px; height: 16px; flex: none; opacity: 0.75; }

.et-footer__note {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: var(--space-2);
}
.et-footer__mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--text-inverse);
  font-weight: 500;
  font-size: 0.9375rem;
  word-break: break-word;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  text-underline-offset: 3px;
}
.et-footer__mail:hover { color: var(--text-inverse); text-decoration-color: var(--text-inverse); }
.et-footer__mail svg { width: 16px; height: 16px; flex: none; }

.et-footer__place { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.et-footer__place img { height: 48px; width: auto; flex: none; opacity: 0.9; }
.et-footer__place div { font-size: 0.8125rem; line-height: 1.6; color: rgba(255, 255, 255, 0.88); }
.et-footer__place strong { display: block; font-weight: 600; color: rgba(255, 255, 255, 0.95); }

.et-footer__disclaimer {
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.et-footer__disclaimer strong { color: var(--text-inverse); font-weight: 600; }

.et-footer__base {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 640px) { .et-footer__base { flex-direction: row; justify-content: center; } }
.et-footer__copyright {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
}

.et-bird {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
}
.et-bird video, .et-bird img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   9. Forms and modal
   -------------------------------------------------------------------------- */

.et-field { display: grid; gap: 6px; }
.et-field label { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.et-field__hint { font-size: 0.9375rem; color: var(--text-body); }
.et-input,
.et-select,
.et-textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
}
.et-textarea { min-height: 140px; resize: vertical; }
.et-input:hover, .et-select:hover, .et-textarea:hover { border-color: var(--primary-light); }
.et-input:focus-visible, .et-select:focus-visible, .et-textarea:focus-visible { border-color: var(--primary); }
.et-input::placeholder, .et-textarea::placeholder { color: var(--text-tertiary); }

/* Error text uses --text-primary rather than --on-error-container, because
   #DC2626 on #FEE2E2 is 3.95:1 and fails AA for text. #1E293B on #FEE2E2 is
   12.3:1. The red is kept for the icon, which only needs 3:1. */
.et-form-error {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  background: var(--error-container);
  color: var(--text-primary);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--radius-md);
  padding: 12px var(--space-4);
  font-size: 0.9375rem;
  font-weight: 500;
}
.et-form-error svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--on-error-container); }

.et-modal[hidden] { display: none; }
.et-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  overflow-y: auto;
}
.et-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 41, 59, 0.55);
}
.et-modal__panel {
  position: relative;
  width: 100%;
  max-width: 30rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--elevation-24);
  margin-block: auto;
}
.et-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
}
.et-modal__close:hover { background: var(--surface-secondary); color: var(--text-primary); }

/* --------------------------------------------------------------------------
   10. Utilities and page specific patterns
   -------------------------------------------------------------------------- */

.et-center { text-align: center; }
.et-mt-4 { margin-top: var(--space-4); }
.et-mt-6 { margin-top: var(--space-6); }
.et-mt-8 { margin-top: var(--space-8); }
.et-mt-12 { margin-top: var(--space-12); }
.et-mb-4 { margin-bottom: var(--space-4); }
.et-mb-6 { margin-bottom: var(--space-6); }
.et-mb-8 { margin-bottom: var(--space-8); }
.et-mb-12 { margin-bottom: var(--space-12); }
.et-measure { max-width: var(--reading-max); }
.et-measure-center { max-width: var(--reading-max); margin-inline: auto; }

/* Hero */
.et-hero {
  background: var(--primary-gradient);
  color: var(--text-inverse);
  padding-block: var(--space-16) var(--space-20);
  position: relative;
  overflow: hidden;
}
.et-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -55% auto;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
}
/* The phone fades out at the bottom on small screens, so the generous bottom
   padding is no longer doing anything except lengthening the scroll. */
@media (max-width: 1023px) {
  .et-hero { padding-block: var(--space-12); }
}

.et-hero--compact {
  padding-block: var(--space-12);
}
.et-hero--compact::after { display: none; }

.et-hero__grid {
  display: grid;
  gap: var(--space-12);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) {
  .et-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); }
  .et-hero__device { transform: translateX(-52px); }
}
.et-hero__device { min-width: 0; }
.et-hero h1 { color: var(--text-inverse); }
.et-hero__sub {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  max-width: 34rem;
}
.et-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  padding: 7px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-inverse);
  letter-spacing: 0.02em;
}
.et-hero__eyebrow svg { width: 15px; height: 15px; }
.et-hero__points {
  list-style: none;
  display: grid;
  gap: 10px;
}
.et-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}
.et-hero__points svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--text-inverse); }

.et-hero-award {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-inverse);
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.et-hero-award:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.18);
}
.et-hero-award__mark {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--surface);
}
.et-hero-award__mark img {
  width: 150%;
  max-width: none;
  height: auto;
  transform: translate(-16.67%, -16.67%);
}
.et-hero-award__copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.et-hero-award__copy strong {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
}
.et-hero-award__copy small {
  font-size: 0.6875rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
}
.et-hero-award > svg { flex: none; opacity: 0.82; }

@media (max-width: 480px) {
  .et-hero-award { padding-right: 12px; }
  .et-hero-award__mark { width: 48px; height: 48px; }
  .et-hero-award__copy strong { font-size: 0.8125rem; }
  .et-hero-award > svg { display: none; }
}

/* Phone frame for real screenshots */
.et-phone {
  width: min(280px, 76vw);
  margin-inline: auto;
  border-radius: 38px;
  padding: 10px;
  background: #10192B;
  box-shadow: var(--elevation-24);
}
/* Below the split, the screenshot's own aspect ratio would make it 600px tall
   and the hero about 1150px. Cap it and dissolve the bottom edge, so the device
   reads as continuing past the fold instead of being chopped. */
@media (max-width: 1023px) {
  .et-phone {
    width: min(264px, 66vw);
    max-height: 360px;
    overflow: hidden;
    /* Mask stencil, not a palette colour: only the alpha channel is read. */
    -webkit-mask-image: linear-gradient(to bottom, black 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 74%, transparent 100%);
    box-shadow: none;
  }
}
.et-phone img {
  width: 100%;
  border-radius: 28px;
  display: block;
  background: var(--page-background);
}
/* For assets that already carry their own device frame and a transparent
   background, such as phonemockup.png. No wrapper chrome. */
.et-device {
  width: min(300px, 78vw);
  margin-inline: auto;
}
.et-device img { width: 100%; }

/* Flat illustration, sized and centred. */
.et-art {
  width: min(320px, 70vw);
  margin-inline: auto;
}
.et-art--wide { width: min(420px, 84vw); }

/* Practice illustration with a small, app-like scenario preview beneath it. */
.et-practice-visual {
  width: min(460px, 100%);
  margin-inline: auto;
}
.et-scenario-card {
  position: relative;
  z-index: 1;
  margin: -10px auto 0;
  padding: var(--space-4) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-12);
}
.et-scenario-card__heading {
  display: flex;
  align-items: center;
  gap: 12px;
}
.et-scenario-card__icon {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--primary-container);
  color: var(--primary);
}
.et-scenario-card__label {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}
.et-scenario-card__title {
  margin-top: 2px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
}
.et-scenario-card__audio {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.et-scenario-card__wave {
  flex: 1;
  min-width: 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 1vw, 6px);
  color: var(--primary);
}
.et-scenario-card__wave i {
  width: 3px;
  height: var(--h);
  border-radius: var(--radius-full);
  background: currentColor;
}
.et-scenario-card__play {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary);
}
.et-scenario-card__play svg {
  width: 16px;
  height: 16px;
  margin-left: 2px;
}

@media (max-width: 480px) {
  .et-scenario-card { padding: var(--space-4); }
  .et-scenario-card__wave i:nth-child(even) { display: none; }
}

.et-phone-caption {
  margin-top: var(--space-4);
  text-align: center;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.88);
}

/* Trust strip */
.et-trust {
  background: var(--surface);
  border-block: 1px solid var(--border);
  padding-block: var(--space-8);
}
.et-trust__label {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-body);
  margin-bottom: var(--space-6);
}
.et-trust__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8) var(--space-12);
}

/* Two connected experiences. A single visual system joins the patient app to
   the therapist portal, with the connection hub kept central on wide screens. */
.et-connected {
  position: relative;
  overflow: hidden;
  padding: var(--space-8) clamp(var(--space-6), 4vw, var(--space-12)) var(--space-6);
  border: 1px solid rgba(0, 72, 205, 0.12);
  border-radius: var(--radius-3xl);
  background:
    radial-gradient(circle at 50% 70%, rgba(255, 255, 255, 0.94) 0 13%, transparent 34%),
    linear-gradient(135deg, #F4F8FF 0%, var(--primary-surface) 52%, #EAF3FF 100%);
}
.et-connected::before,
.et-connected::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: var(--radius-full);
  background: rgba(64, 128, 255, 0.07);
  pointer-events: none;
}
.et-connected::before { top: -96px; left: -72px; }
.et-connected::after { right: -84px; bottom: -112px; }
.et-connected__intro {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.et-connected__intro .et-h2 { margin-top: var(--space-2); }
.et-connected__intro p {
  max-width: 610px;
  margin: var(--space-2) auto 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-body);
}
.et-connected__map {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.et-connected__map::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 31%;
  right: 31%;
  border-top: 2px dashed rgba(0, 72, 205, 0.4);
}
.et-connected__side {
  display: grid;
  align-items: center;
  min-width: 0;
}
.et-connected__side--patient { grid-template-columns: minmax(150px, 1fr) minmax(150px, 190px); }
.et-connected__side--therapist { grid-template-columns: minmax(150px, 190px) minmax(170px, 1fr); }
.et-connected__copy { min-width: 0; }
.et-connected__copy h3 {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--primary-dark);
}
.et-connected__copy ul {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  list-style: none;
}
.et-connected__copy li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-primary);
}
.et-connected__copy li svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--primary);
  stroke-width: 2.5;
}
.et-connected__copy > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-4);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary-dark);
  text-decoration: none;
}
.et-connected__copy > a:hover { text-decoration: underline; }
.et-connected__portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.et-connected__portrait::before {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(0, 72, 205, 0.14);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--elevation-3);
}
.et-connected__portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.et-connected__portrait--wide::before {
  inset: 14% 0;
  border-radius: var(--radius-2xl);
}
.et-connected__portrait--wide img {
  width: 126%;
  max-width: none;
}
.et-connected__hub {
  position: relative;
  z-index: 2;
  min-height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  border: 1px solid rgba(0, 72, 205, 0.12);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--elevation-6);
  text-align: center;
}
.et-connected__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.et-connected__brand-mark { width: 28px; height: auto; }
.et-connected__brand-type { width: 76px; height: auto; }
.et-connected__hub > span {
  margin-top: 8px;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-body);
}

@media (max-width: 1023px) {
  .et-connected__map {
    grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
    align-items: start;
  }
  .et-connected__map::before { display: none; }
  .et-connected__side { grid-template-columns: 1fr; }
  .et-connected__side--patient .et-connected__portrait { grid-row: 1; }
  .et-connected__portrait { width: min(210px, 100%); margin-inline: auto; }
  .et-connected__copy { margin-top: var(--space-4); }
}

@media (max-width: 700px) {
  .et-connected { padding: var(--space-8) var(--space-4) var(--space-6); }
  .et-connected__map { grid-template-columns: 1fr; gap: var(--space-6); }
  .et-connected__side {
    width: min(360px, 100%);
    margin-inline: auto;
    padding: var(--space-4);
    border: 1px solid rgba(0, 72, 205, 0.1);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.7);
  }
  .et-connected__portrait { width: min(220px, 76vw); }
  .et-connected__hub {
    grid-row: 2;
    width: min(220px, 100%);
    min-height: 96px;
    margin-inline: auto;
  }
  .et-connected__side--therapist { grid-row: 3; }
  .et-connected__copy > a { font-size: 0.875rem; }
}
/* Infinite logo marquee on the homepage trust strip. */
.et-trust__marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.et-trust__track {
  display: flex;
  width: max-content;
  animation: et-trust-marquee 32s linear infinite;
}
.et-trust__marquee:hover .et-trust__track,
.et-trust__marquee:focus-within .et-trust__track {
  animation-play-state: paused;
}
.et-trust__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  padding-inline: var(--space-8);
}
/* One line of third party validation under the logo row. --text-body on
   --surface is 7.58:1. */
.et-trust__note {
  margin-top: var(--space-6);
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 44rem;
  margin-inline: auto;
}
.et-trust__note a { font-weight: 600; }
.et-trust__row img,
.et-trust__group img {
  height: 40px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 200ms ease, opacity 200ms ease;
}
.et-trust__row a:hover img,
.et-trust__row img:hover,
.et-trust__group a:hover img,
.et-trust__group img:hover { filter: grayscale(0); opacity: 1; }
@media (min-width: 768px) {
  .et-trust__row img,
  .et-trust__group img { height: 48px; max-width: 170px; }
}
@keyframes et-trust-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------------------------------------
   Hero art.

   The shape vocabulary comes from the bird mark rather than from generic
   Bauhaus primitives: the head is a circle, the wing is a quarter disc, the eye
   is a rounded pill, and the icon has carried radiating sound lines from the
   start. Four shapes, nothing else, arranged on the same 60px grid.

   Corner clusters frame the content and leave the middle clear, which is the
   whole trick in the reference. Everything is decorative, hidden from assistive
   technology, and inert to the pointer.

   Motion budget: the typewriter headline is the hero's one animated element,
   and the sound lines are the second. Nothing else here moves.
   -------------------------------------------------------------------------- */

.et-hero__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.et-hero__celebration {
  position: absolute;
  top: 4%;
  right: max(18px, calc((100vw - var(--shell-max)) / 2 - 92px));
  width: clamp(220px, 22vw, 340px);
  height: auto;
  filter: drop-shadow(0 18px 24px rgba(0, 35, 110, 0.18));
}

@media (max-width: 1023px) {
  .et-hero__celebration {
    top: auto;
    right: 3%;
    bottom: 4%;
    width: clamp(170px, 27vw, 240px);
  }
}

@media (max-width: 560px) {
  .et-hero__celebration {
    right: -5%;
    bottom: 2%;
    width: min(42vw, 180px);
    opacity: 0.78;
  }
}

/* The brand swoop, dropping in from the top left corner and rising, inverted,
   from the bottom left. One motif used twice, mirrored, rather than a set of
   unrelated shapes. It sits behind the copy as texture, so the opacity matters
   more than the placement: anything above about 0.3 starts competing with the
   eyebrow it passes behind. */
.et-hero__swoop {
  position: absolute;
  left: -96px;
  width: 280px;
  opacity: 0.24;
}
.et-hero__swoop img { width: 100%; height: auto; }
.et-hero__swoop--tl { top: -128px; }
.et-hero__swoop--bl { bottom: -128px; transform: rotate(180deg); }

@media (min-width: 768px) {
  .et-hero__swoop { width: 380px; left: -132px; }
  .et-hero__swoop--tl { top: -176px; }
  .et-hero__swoop--bl { bottom: -176px; }
}
@media (min-width: 1280px) {
  .et-hero__swoop { width: 420px; left: -146px; }
  .et-hero__swoop--tl { top: -196px; }
  .et-hero__swoop--bl { bottom: -196px; }
}

/* Sound lines, radiating from behind the phone. The phone sits on the grid
   layer above, so the arcs read as coming out of the device. */
.et-hero__waves {
  position: absolute;
  display: none;
  top: 50%;
  right: -6%;
  width: min(560px, 42vw);
  transform: translateY(-50%);
}
@media (min-width: 1024px) {
  .et-hero__waves { display: block; }
}
.et-wave {
  transform-origin: 300px 150px;
  animation: et-sound 5200ms ease-in-out infinite;
  animation-delay: calc(var(--i) * 420ms);
}
@keyframes et-sound {
  0%, 100% { opacity: 0.55; transform: scale(0.985); }
  45%      { opacity: 1;    transform: scale(1.015); }
}

/* Typewriter hero headline.
   The <h1> carries the full sentence as an aria-label and the animated spans
   are aria-hidden, so a screen reader hears the line once, in full, instantly.
   With JavaScript off, or under reduced motion, the text is simply there. */
.et-type__line { display: block; }
.et-js .et-type__line { visibility: hidden; }
.et-js .et-type__line.is-typing,
.et-js .et-type__line.is-done { visibility: visible; }
/* The span the script types into. No styling of its own; it exists so the
   script has something to fill without disturbing the caret beside it. */
.et-type__text { }
.et-type__accent { color: var(--brand-orange); }
.et-type__caret {
  display: none;
  width: 3px;
  height: 0.82em;
  margin-left: 6px;
  vertical-align: -0.08em;
  background: currentColor;
  border-radius: 2px;
}
.et-js .et-type__line.is-typing .et-type__caret { display: inline-block; animation: et-blink 1s steps(1) infinite; }
@keyframes et-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Scroll reveal. Scoped to .et-js so that with JavaScript off nothing is ever
   hidden. Stagger with style="--d: 90ms". */
.et-js .et-reveal {
  opacity: 0;
  transform: translateY(18px);
}
.et-js .et-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--d, 0ms);
}

/* Comparison column */
.et-compare__col { display: grid; gap: var(--space-4); }
.et-compare__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-body);
}

/* Legal page ---------------------------------------------------------------
   Narrower measure and larger body text than the marketing pages. */
.et-legal { max-width: var(--legal-max); margin-inline: auto; }
.et-legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  font-size: 0.9375rem;
  color: var(--text-body);
}
.et-legal__meta span { display: inline-flex; align-items: center; gap: 6px; }
.et-legal__meta svg { width: 16px; height: 16px; color: var(--primary); }

.et-prose { font-size: 1.0625rem; line-height: 1.7; color: var(--text-body); }
/* Legal sections are the direct children of .et-prose, so their own contents
   need the same rhythm or every paragraph inside a section collapses together. */
.et-prose > * + *,
.et-legal__section > * + * { margin-top: var(--space-4); }
.et-prose h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  margin-top: var(--space-12);
  scroll-margin-top: 96px;
}
.et-prose h2:first-child { margin-top: 0; }
.et-prose h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  margin-top: var(--space-8);
}
.et-prose strong { color: var(--text-primary); font-weight: 600; }

/* Standalone bulleted list for use outside .et-prose, for example inside a
   card. The base reset strips list padding, so markers need it back. */
.et-list {
  padding-left: 1.35em;
  display: grid;
  gap: 8px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-body);
}
.et-list li::marker { color: var(--primary); }
.et-prose ul, .et-prose ol { padding-left: 1.35em; display: grid; gap: 10px; }
.et-prose li { line-height: 1.7; }
.et-prose li::marker { color: var(--primary); }
.et-prose a { font-weight: 500; }
.et-prose .et-card,
.et-prose .et-notice,
.et-prose .et-group,
.et-prose .et-table-wrap { margin-block: var(--space-6); }

.et-legal__section {
  scroll-margin-top: 96px;
}
.et-legal__section + .et-legal__section { margin-top: var(--space-16); }
.et-legal__section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding-inline: 8px;
  border-radius: var(--radius-sm);
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-size: 0.875rem;
  font-weight: 700;
  margin-right: 10px;
  vertical-align: 3px;
}

/* Tables inside legal pages must scroll horizontally, never the page. */
.et-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.et-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  text-align: left;
}
.et-table th, .et-table td {
  padding: 12px var(--space-4);
  vertical-align: top;
  line-height: 1.55;
}
.et-table thead th {
  background: var(--surface-container);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.et-table tbody tr + tr td { border-top: 1px solid var(--border); }
.et-table td { color: var(--text-body); }
.et-table td strong { color: var(--text-primary); }

/* Quote */
.et-quote {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.et-quote p { font-size: 1.0625rem; line-height: 1.65; color: var(--text-primary); }
.et-quote footer { margin-top: var(--space-4); font-size: 0.9375rem; color: var(--text-body); }

/* Timeline for the About page */
.et-timeline { list-style: none; display: grid; gap: 0; }
.et-timeline li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-4);
  position: relative;
  padding-bottom: var(--space-8);
}
.et-timeline li:last-child { padding-bottom: 0; }
.et-timeline li::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 8px;
  width: 2px;
  background: var(--primary-container);
}
.et-timeline li:last-child::before { display: none; }
.et-timeline__dot {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--primary-container);
  color: var(--on-primary-container);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}
.et-timeline__dot svg { width: 22px; height: 22px; }

/* People ------------------------------------------------------------------
   A team card. There are no photographs yet, so each person carries a
   monogram in a brand circle with a small badge naming what they look after.
   To add a photograph later, drop an <img> inside .et-person__avatar: it
   covers the circle and the initials sit behind it, so nothing else changes.
   Contrast: #FFFFFF on the primary gradient is 7.51:1 at the light end. */
.et-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: var(--space-8);
}

.et-person__avatar {
  position: relative;
  flex: none;
  width: 96px;
  height: 96px;
  margin-bottom: var(--space-6);
  border-radius: 50%;
  background: var(--primary-gradient);
  color: var(--text-inverse);
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  /* A flat ring rather than a shadow, so it holds the app's hairline look. */
  box-shadow: 0 0 0 6px var(--primary-surface);
}
.et-person__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Sits on the circle's lower right, at 45 degrees from the centre. */
.et-person__badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
}
.et-person__badge svg { width: 17px; height: 17px; }

.et-person__name {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
}
/* #0048CD on #FFFFFF is 7.51:1. Left in sentence case, not uppercased, so
   the page keeps its indoor voice. */
.et-person__role {
  margin-top: var(--space-1);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--primary);
}
.et-person__body {
  margin-top: var(--space-4);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-body);
}

/* Advisors ----------------------------------------------------------------
   Below the core team, behind a hairline. Deliberately lighter than
   .et-person: a smaller monogram in the pale container rather than the solid
   gradient, no biography, and a row rather than a column, because these
   people advise the work rather than build it.
   Contrast: #003299 on #E3F2FD is 9.70:1. */
.et-advisors {
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--border);
}
/* Cap the track and centre the row, so the panel reads the same whether it
   holds two advisors or four. Left on 1fr, a pair would stretch to half the
   shell each and dwarf the team cards above them. */
.et-advisors .et-grid {
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 340px));
}

/* Top aligned, not centred: the cards stretch to a shared height and a
   centred row would drop the short entries below the taller ones, leaving the
   monograms out of line across the row. */
.et-advisor {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.et-advisor__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--on-primary-container);
  display: grid;
  place-items: center;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.et-advisor__name {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
}
.et-advisor__org {
  margin-top: 2px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-body);
}

/* Waitlist panel -----------------------------------------------------------
   Opens the visitor's own mail app. There is no form and no server, so no
   address is collected here and there is nothing to secure. */
.et-waitlist {
  padding: var(--space-12) var(--space-8);
  background: var(--primary-surface);
  border: 1px solid var(--primary-container);
  border-radius: var(--radius-2xl);
  text-align: center;
}
.et-waitlist__tile {
  margin-inline: auto;
  margin-bottom: var(--space-4);
}
.et-waitlist__title {
  font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.et-waitlist__body {
  max-width: 34rem;
  margin: var(--space-4) auto 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-body);
}
.et-waitlist .et-btn-row {
  justify-content: center;
  margin-top: var(--space-8);
}
.et-waitlist__note {
  max-width: 34rem;
  margin: var(--space-6) auto 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-body);
}

@media (max-width: 768px) {
  .et-advisors { margin-top: var(--space-12); padding-top: var(--space-12); }
}

@media (max-width: 640px) {
  .et-waitlist { padding: var(--space-8) var(--space-6); }
}

/* CTA band */
.et-cta {
  background: var(--primary-gradient);
  border-radius: var(--radius-2xl);
  padding: var(--space-12);
  color: var(--text-inverse);
  text-align: center;
}
.et-cta h2 { color: var(--text-inverse); }
.et-cta p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 40rem;
  margin-inline: auto;
}
.et-cta .et-btn-row { justify-content: center; }
@media (max-width: 640px) { .et-cta { padding: var(--space-8) var(--space-6); } }

/* --------------------------------------------------------------------------
   11. Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Nothing may depend on an animation having run. Everything is simply there. */
  .et-js .et-reveal,
  .et-js .et-type__line {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .et-js .et-type__caret { display: none !important; }
  /* The sound lines hold their resting state instead of pulsing. */
  .et-wave { animation: none !important; opacity: 1; transform: none; }
  /* Trust marquee becomes a static wrapped row so logos stay visible. */
  .et-trust__marquee {
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .et-trust__track {
    animation: none !important;
    transform: none !important;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .et-trust__group {
    flex-wrap: wrap;
    justify-content: center;
    padding-inline: 0;
  }
  .et-trust__group[aria-hidden="true"] { display: none; }
}

@media print {
  .et-header, .et-footer__watermark, .et-menu-toggle, .et-mobile-menu, .et-modal { display: none !important; }
  body { background: var(--surface); }
  .et-card, .et-group, .et-contents, .et-table-wrap { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: var(--text-secondary); }
}

/* --------------------------------------------------------------------------
   12. Status page

   One illustration across the top, the state of things stated in words
   underneath it. Two crops of the same drawing, swapped at 720px so neither
   is ever letterboxed.
   -------------------------------------------------------------------------- */

.et-status-banner {
  background: var(--page-background);
  overflow: hidden;
}
.et-status-banner__art { display: block; width: 100%; height: auto; }
.et-status-banner__art--tall { display: none; }

@media (max-width: 719px) {
  .et-status-banner__art--wide { display: none; }
  .et-status-banner__art--tall { display: block; }
}

/* The badge lifts into the foot of the drawing, so the section it sits in
   gives up its own top padding entirely. */
.et-status-section { padding-top: 0; }

.et-status-badge {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  margin-top: clamp(-72px, -6vw, -32px);
  padding: var(--space-6) var(--space-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--elevation-12);
}

.et-status-headline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-align: center;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--on-success-container);
}

/* The dot decorates a label that already says the state in words. */
.et-status-dot {
  flex: none;
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--success);
}
.et-status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--success);
  animation: et-status-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes et-status-ping {
  0% { transform: scale(1); opacity: 0.55; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}
.et-status-dot--sm { width: 10px; height: 10px; }

.et-status-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.et-status-row__label { flex: 1 1 220px; }
.et-status-row__name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
}
.et-status-row__body {
  margin-top: 2px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-body);
}

@media (prefers-reduced-motion: reduce) {
  .et-status-dot::after { animation: none; opacity: 0; }
}