/* ==========================================================================
   CollaborAITE homepage
   Version 2.2 modified by Jon to remove CSS dead wood after adding animations.
   Colors come from collaboraite-themes.css: five palettes, each in light and dark.
   --------------------------------------------------------------------------
   Hand-written styles for the public homepage. They mirror the React
   component in apps/web/src/components/landing/landing-page.tsx.

   Contents
     1. Colors and fonts
     2. Base elements
     3. Page layout
     4. Shared pieces
     5. Sections, top to bottom
     6. The two media queries
     7. Reduced motion

   Conventions
     - One selector per line, one declaration per line.
     - A class names a component. Inside it, element selectors style
       the parts: .frequently-asked-questions dt, .impact-dashboard dd.
     - Grids reflow by themselves with repeat(auto-fit, minmax(...)).
       Media queries are kept for the two things a grid cannot decide.
     - Colors are HSL: hue (0 to 360), saturation, lightness.
     - Components use roles (--page, --text, --link), never named colors.
       Only section 1 knows which named color a role points at.
     - Sizes are in rem. 1rem is 16px, so 0.875rem is 14px.
   ========================================================================== */


/* 1. Colors and fonts ====================================================== */

/* The colors live in collaboraite-themes.css: five palettes, each with a light and a
   dark mode, chosen by the radio inputs in the header. This file uses only the roles
   (--page, --text, --link, --brand, --accent and so on), never a palette color. */
:root {
  --snow: hsl(0 0% 100%);

  --sans-serif: 'Satoshi', system-ui, sans-serif;
  --monospace: ui-monospace, Menlo, Consolas, monospace;
}


/* 2. Base elements ========================================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans-serif);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

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

code {
  font-family: var(--monospace);
  font-size: 0.9em;
}

/* Every section heading. */
h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.375;
}

figcaption {
  margin-top: 1rem;
  color: var(--text-soft);
  font-size: 0.875rem;
}

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}


/* 3. Page layout =========================================================== */

/* The centered page column. The side margin grows with the window. */
.container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}

/* A full-width horizontal band of the page. */
.band {
  padding: 5rem 0;
  scroll-margin-top: 4rem;
  background: var(--page);
  color: var(--text);
}

/* The second band color. Cards inside it swap to the other surface so they still stand out. */
.band.alt {
  --surface: var(--surface-on-alt);
  --inset: var(--inset-on-alt);
  background: var(--band-alt);
}

/* A brand-filled band, and the closing band. The roles flip to on-brand text, the same in both modes. */
.band.lagoon,
.closing {
  --text: var(--on-brand);
  --text-muted: color-mix(in srgb, var(--on-brand) 92%, var(--brand));
  --text-soft: color-mix(in srgb, var(--on-brand) 92%, var(--brand));
  --link: var(--on-brand);
  --lime-text: var(--on-brand);
  --line: color-mix(in srgb, var(--on-brand) 24%, transparent);
  background: var(--brand);
  color: var(--text);
}

/* Panels on a brand band stay dark, so their own text keeps full contrast. */
.band.lagoon .impact-dashboard {
  --surface: var(--night-surface);
  --text: var(--night-text-bright);
  --text-muted: var(--night-text-muted);
  --text-soft: var(--night-text-muted);
  --link: var(--brand-on-dark);
  --lime-text: var(--accent-on-dark);
  --line: var(--night-line);
  background: var(--night);
  color: var(--text);
}

/* Two columns side by side, or one above the other when there is no room. */
.two-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 3.5rem;
  align-items: center;
}

/* As many cards in a row as fit, each at least 15rem wide. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 2.5rem;
}

/* Children in a column, 1rem apart. */
.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


/* 4. Shared pieces ========================================================= */

/* The logo is a background image on #logo and .footer-logo; see collaboraite-themes.css. */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 700;
}

.button:hover {
  background: color-mix(in srgb, var(--surface) 80%, var(--link));
}

/* "Try the demo course": a Google mark and a two-line label. */
.button.demo {
  padding: 0.625rem 1.25rem;
  border-color: color-mix(in srgb, var(--link) 40%, transparent);
  background: var(--brand);
  color: var(--on-brand);
  line-height: 1.25;
}

.button.demo:hover {
  background: var(--brand-hover);
}

.button.demo svg {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.25rem;
  border-radius: 0.375rem;
  background: white;
}

.button.demo small {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.85;
}

.button.large {
  padding: 1rem 1.75rem;
  font-size: 1.0625rem;
}

.button.large svg {
  width: 1.625rem;
  height: 1.625rem;
}

/* The white version, on the closing band. */
.button.inverted {
  border-color: transparent;
  background: var(--snow);
  color: var(--light-text);
}

.button.inverted:hover {
  background: var(--light-page);
}

.button.inverted svg {
  background: transparent;
}

.button.inverted small {
  color: color-mix(in srgb, var(--light-text) 72%, white);
  opacity: 1;
}

/* A section's header: numbered eyebrow, heading, introduction. */
.section-header {
  margin-bottom: 3rem;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  color: var(--link);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow span {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--link) 14%, transparent);
  font-size: 0.75rem;
}

.introduction {
  max-width: 58ch;
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: 1.125rem;
  line-height: 1.625;
}

/* A list of features, each a heading over a paragraph. */
.features li {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.features p {
  color: var(--text-muted);
  line-height: 1.625;
}

.features.large-headings h3 {
  font-size: 1.25rem;
}

/* A list with a colored dot before each item. */
.dotted-list {
  margin-top: 1.5rem;
  color: var(--text-muted);
  line-height: 1.625;
}

.dotted-list li {
  display: flex;
  gap: 0.75rem;
}

.dotted-list li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 0.6rem;
  border-radius: 50%;
  background: var(--link);
}

/* Lime dots, for measurements. */
.dotted-list.lime li::before {
  background: var(--lime-text);
}

/* "@ai" or a bot name inside a message. */
.mention {
  color: var(--lime-text);
  font-weight: 600;
}

/* A small boxed bit of code, like "@ai". */
.chip {
  padding: 0 0.375rem;
  border: 1px solid var(--line);
  border-radius: 0.375rem;
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 600;
}

.chip.energy {
  border-color: transparent;
  background: color-mix(in srgb, var(--lime-text) 14%, transparent);
  color: var(--lime-text);
  font-weight: 400;
  white-space: nowrap;
}

/* On a brand band the chip sits on a dark fill so the accent text stays readable. */
.band.lagoon .chip.energy {
  background: var(--night);
  color: var(--accent-on-dark);
}

.link {
  color: var(--link);
}

.link:hover {
  text-decoration: underline;
}

/* A rounded label. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--inset);
  color: var(--text-muted);
  font-size: 0.6875rem;
}


/* 5. Sections ============================================================== */

/* Site header ----------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--page) 90%, transparent);
  backdrop-filter: blur(12px);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.site-navigation {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* The links show from 1024px up; see section 6. */
.navigation-links {
  display: none;
  gap: 1.5rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.navigation-links a:hover {
  color: var(--text);
}

.sign-in-buttons {
  display: flex;
  gap: 0.75rem;
}

/* A phone has room for "Log in" only; see section 6. */
.sign-in-buttons .demo {
  display: none;
}

/* The theme picker: a button that opens a popover holding the palette and appearance radios. */
.theme-menu-button {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.theme-menu-button:hover {
  background: color-mix(in srgb, var(--surface) 80%, var(--link));
}

.theme-menu-button svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* The popover sits just under the sticky header, aligned with the page column's right edge. */
.theme-panel {
  position: fixed;
  inset: 5rem max(1rem, calc((100vw - 80rem) / 2 + 3rem)) auto auto;
  width: min(21rem, calc(100vw - 2rem));
  max-height: calc(100vh - 6rem);
  margin: 0;
  padding: 1.25rem;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: 1rem;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1rem 2.5rem var(--shadow);
}

.theme-panel fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.theme-panel fieldset + fieldset {
  margin-top: 1.25rem;
}

.theme-panel legend {
  margin-bottom: 0.5rem;
  padding: 0;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.375rem;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.theme-option:has(input:checked) {
  border-color: var(--link);
  background: color-mix(in srgb, var(--link) 12%, transparent);
}

.theme-option:has(input:focus-visible) {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.theme-option input {
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--link);
}

/* Half brand, half accent: a preview of the palette. */
.swatch {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--swatch-brand) 50%, var(--swatch-accent) 50%);
}

.swatch-aureole {
  --swatch-brand: var(--aureole-brand);
  --swatch-accent: var(--aureole-accent);
}

.swatch-thistle {
  --swatch-brand: var(--thistle-brand);
  --swatch-accent: var(--thistle-accent);
}

.swatch-verdure {
  --swatch-brand: var(--verdure-brand);
  --swatch-accent: var(--verdure-accent);
}

.swatch-iris {
  --swatch-brand: var(--iris-brand);
  --swatch-accent: var(--iris-accent);
}

.swatch-zephyr {
  --swatch-brand: var(--zephyr-brand);
  --swatch-accent: var(--zephyr-accent);
}


/* Hero ------------------------------------------------------------------ */

.hero {
  padding: clamp(4rem, 8vw, 5rem) 0 6rem;
}

.hero .two-columns {
  gap: 4rem;
}

.hero .stack {
  gap: 1.75rem;
}

.hero .pill {
  align-self: flex-start;
  padding: 0.375rem 0.875rem;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* The Lime dot before "Piloted at the University of Maine". */
.hero .pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime-text);
}

.hero h1 {
  font-size: clamp(2.5rem, 5.2vw, 3.6rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.hero p {
  max-width: 46ch;
  color: var(--text-soft);
  line-height: 1.625;
  text-wrap: pretty;
}

.hero .introduction {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.1875rem;
}

.hero .call-to-action {
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.8125rem;
}

.hero figure.stack {
  gap: 2.5rem;
}

/* The hero artwork is portrait (4:5), so it gets a narrower width and sits in the middle of its column. */
.hero figure svg {
  width: min(100%, 26rem);
  margin-inline: auto;
}

.hero figcaption {
  margin: 0;
  padding-top: 0.5rem;
  font-size: 0.8125rem;
  text-align: center;
}


/* 1 · Platform ------------------------------------------------------------ */

.platform .features {
  margin-top: 4rem;
}


/* 2 · Environmental impact: the dashboard -------------------------------- */

.impact-dashboard {
  padding: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--lime-text) 30%, transparent);
  border-radius: 1rem;
  background: var(--inset);
  font-size: 0.8125rem;
}

.impact-dashboard header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 700;
}

.impact-dashboard small,
.impact-dashboard footer {
  color: var(--text-soft);
  font-family: var(--monospace);
  font-size: 0.75rem;
  font-weight: 400;
}

.impact-dashboard footer {
  font-size: 0.6875rem;
  line-height: 1.625;
}

.impact-dashboard strong {
  font-weight: 600;
}

.impact-card {
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--lime-text) 25%, transparent);
  border-radius: 0.75rem;
  background: var(--surface);
}

/* The three totals, always side by side. */
.impact-dashboard dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem;
}

.impact-dashboard dl .impact-card {
  padding: 0.75rem;
}

.impact-dashboard dt {
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 500;
}

.impact-dashboard dd {
  margin-top: 0.25rem;
  color: var(--lime-text);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.impact-dashboard ul {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.625rem;
  color: var(--text-muted);
}

/* "Class pledges to offset" on the left, "72%" on the right. */
.impact-card p {
  display: flex;
  justify-content: space-between;
}

.impact-card p span {
  color: var(--text-muted);
}

/* A native progress bar, restyled. Each browser engine needs its own
   pseudo-element for the filled part. */
.impact-dashboard progress {
  display: block;
  width: 100%;
  height: 0.5rem;
  margin-top: 0.5rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lime-text) 18%, transparent);
  appearance: none;
  overflow: hidden;
}

.impact-dashboard progress::-webkit-progress-bar {
  background: transparent;
}

.impact-dashboard progress::-webkit-progress-value {
  background: var(--lime-text);
}

.impact-dashboard progress::-moz-progress-bar {
  background: var(--lime-text);
}


/* 3 · For the course ----------------------------------------------------- */

.course .two-columns {
  align-items: start;
}

.course .stack>h3 {
  font-size: 1.25rem;
}

.course .features {
  gap: 2rem;
  padding-top: 0.25rem;
}

.course .features li {
  gap: 0.5rem;
}

.course h3 span {
  color: var(--text-muted);
  font-weight: 400;
}

.course .note {
  color: var(--text-soft);
  font-size: 0.875rem;
  line-height: 1.625;
}

/* A message as typed, before it is sent. */
.message-draft {
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
  font-size: 0.875rem;
}

.message-draft.code {
  color: var(--text-muted);
  font-family: var(--monospace);
  font-size: 0.8125rem;
  line-height: 1.625;
}

/* 4 · Class discussion --------------------------------------------------- */

.research-note {
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.625;
}

.research-note a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  text-underline-offset: 4px;
}


/* 5 · Privacy ---------------------------------------------------------- */

.privacy .stack {
  gap: 1.25rem;
}

.privacy .section-header {
  margin: 0;
}

.privacy .stack p {
  max-width: 52ch;
  color: var(--text-muted);
  line-height: 1.625;
}

.privacy .stack strong {
  color: var(--text);
}


/* 6 · Getting started ---------------------------------------------------- */

.steps h3 a {
  color: var(--link);
  font-size: 1.25rem;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  text-underline-offset: 4px;
}

.steps h3 a:hover {
  text-decoration-color: var(--link);
}

.steps .link {
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 600;
}

.api-key-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
}


/* 7 · Team ------------------------------------------------------------- */

.team {
  gap: 2rem;
}

.team li {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* A photo, or a dashed circle until there is one. */
.team .photo {
  display: grid;
  place-items: center;
  width: 6rem;
  height: 6rem;
  border: 1px dashed var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 0.75rem;
  font-weight: 600;
  object-fit: cover;
}

.team img.photo {
  border-style: solid;
}

.team p strong,
.team p span {
  display: block;
}

.team p span {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
}


/* Values: the Deep Lagoon panel ---------------------------------------------- */

.values {
  padding: clamp(2.5rem, 6vw, 3.5rem);
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.625;
}

.values blockquote {
  max-width: 40ch;
  margin-bottom: 2.5rem;
  color: var(--text);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.values .two-columns {
  gap: 3rem;
  align-items: start;
}

.values h3 {
  color: var(--text);
  font-size: 1.25rem;
}


/* 8 · Frequently asked questions ------------------------------------------ */

.frequently-asked-questions {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 2.5rem 4rem;
}

.frequently-asked-questions div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.frequently-asked-questions dt {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.375;
}

.frequently-asked-questions dd {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.625;
}


/* Closing call to action (always Lagoon; the roles are set with the bands in section 3) ----- */

.closing {
  padding: 6rem 0;
}

.closing .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  text-align: center;
}

.closing blockquote {
  max-width: 24ch;
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.closing p {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.closing p a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* 9 · Pilots ------------------------------------------------------------- */

.pilots .features p {
  font-size: 0.9375rem;
}


/* Site footer (always dark) ---------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--night-line);
  background: var(--night);
  color: var(--night-text-muted);
  font-size: 0.8125rem;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.site-footer .footer-logo {
  width: 11rem;
}

.site-footer nav {
  display: flex;
  gap: 1rem;
}

.site-footer nav a:hover {
  color: var(--night-text-bright);
}


/* Illustrations (animated) ================================================
   Nothing here runs unless the illustration may animate: with prefers-reduced-motion, or without the
   script, every illustration shows its final frame. The per-element values (--start, --duration, --t0 and so on)
   stay in each SVG's markup. */

/* Sizing: an inline SVG fills its container and keeps its proportions. */
.hero-animation,
.section-animation {
  display: block;
  width: 100%;
  height: auto;
}

/* Class discussion and Privacy: the illustration moves below the text. Put illustration-below on the container and text-column on the text wrapper. */
.illustration-below {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.text-column {
  max-width: 52rem;
}


/* Hero (A9): plays once on load. No script needed. */
@media (prefers-reduced-motion: no-preference) {
  .hero-animation {
    --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1.0);
  }

  .hero-animation .bubble { animation: illustration-bubble-in 1.04s var(--motion-ease) var(--start) both; }
  .hero-animation .avatar { animation: illustration-fade-in 0.7s var(--motion-ease) calc(var(--start) + 0.36s) both; }
  .hero-animation .badge { animation: illustration-badge-in 0.7s var(--motion-ease) calc(var(--start) + 0.36s) both; transform-box: fill-box; transform-origin: center; }
  .hero-animation .line { animation: illustration-line-in 0.72s var(--motion-ease) calc(var(--start) + 0.56s + var(--line-index) * 0.18s) both; transform-box: fill-box; transform-origin: left center; }
  .hero-animation .baseline { animation: illustration-fade-in 1.0s var(--motion-ease) 0.0s both; }
  .hero-animation .dash { animation: illustration-dash-in 0.4s var(--motion-ease) calc(var(--start) + var(--dash-index) * var(--dash-step)) both; }
  .hero-animation .tree-wrap { animation: illustration-tree-in 1.2s var(--motion-ease) var(--start) both; transform-box: fill-box; transform-origin: center bottom; }

  @keyframes illustration-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes illustration-bubble-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes illustration-badge-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
  @keyframes illustration-line-in { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
  @keyframes illustration-dash-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes illustration-tree-in { from { opacity: 0; transform: scaleY(0.92); } to { opacity: 1; transform: none; } }
}


/* Section illustrations (B3, C4, D3, E2): hidden until the script adds has-motion, played once when is-playing is added. */

/* D3's name tokens and E2's cursor only exist while animating. */
.section-animation .token {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .section-animation {
    --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .section-animation.has-motion .token {
    display: inline;
  }

  /* Every animated element reads its own --start and --duration, and waits (paused) until the section is on screen. */
  .section-animation.has-motion :is(.m-rise, .m-fade, .m-fade-out, .m-word, .m-pop, .m-tick, .m-appear, .m-settle, .m-slide, .m-lean, .m-travel, .m-move, .m-press, .m-flip-out, .m-flip-in, .m-draw) {
    animation-duration: var(--duration);
    animation-delay: var(--start);
    animation-timing-function: var(--motion-ease);
    animation-fill-mode: both;
    animation-play-state: paused;
  }

  .section-animation.has-motion.is-playing :is(.m-rise, .m-fade, .m-fade-out, .m-word, .m-pop, .m-tick, .m-appear, .m-settle, .m-slide, .m-lean, .m-travel, .m-move, .m-press, .m-flip-out, .m-flip-in, .m-draw) {
    animation-play-state: running;
  }

  .section-animation.has-motion .m-rise { animation-name: motion-rise; }
  .section-animation.has-motion .m-fade { animation-name: motion-fade; }
  .section-animation.has-motion .m-fade-out { animation-name: motion-fade-out; }
  .section-animation.has-motion .m-word { animation-name: motion-word; }
  .section-animation.has-motion .m-pop { animation-name: motion-pop; transform-box: fill-box; transform-origin: center; }
  .section-animation.has-motion .m-tick { animation-name: motion-tick; transform-box: fill-box; transform-origin: center bottom; }
  .section-animation.has-motion .m-appear { animation-name: motion-appear; transform-box: fill-box; transform-origin: center; }
  .section-animation.has-motion .m-settle { animation-name: motion-settle; }
  .section-animation.has-motion .m-slide { animation-name: motion-slide; }
  .section-animation.has-motion .m-lean { animation-name: motion-lean; transform-box: fill-box; transform-origin: right center; }
  .section-animation.has-motion .m-travel { animation-name: motion-travel; }
  .section-animation.has-motion .m-move { animation-name: motion-move; }
  .section-animation.has-motion .m-press { animation-name: motion-press; transform-box: fill-box; transform-origin: center; }
  .section-animation.has-motion .m-flip-out { animation-name: motion-flip-out; transform-box: fill-box; transform-origin: center; }
  .section-animation.has-motion .m-flip-in { animation-name: motion-flip-in; transform-box: fill-box; transform-origin: center; }
  .section-animation.has-motion .m-draw { animation-name: motion-draw; stroke-dasharray: 1; stroke-linecap: butt; }

  @keyframes motion-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  @keyframes motion-fade { from { opacity: 0; } to { opacity: 1; } }

  @keyframes motion-fade-out { from { opacity: 1; } to { opacity: 0; } }

  @keyframes motion-word { from { fill-opacity: 0; } to { fill-opacity: 1; } }

  @keyframes motion-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }

  @keyframes motion-tick { from { opacity: 0; transform: scaleY(0.2); } to { opacity: 1; transform: none; } }

  @keyframes motion-appear { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

  @keyframes motion-slide { from { transform: translateX(var(--offset)); } to { transform: none; } }

  @keyframes motion-lean { from { transform: scaleX(0); } to { transform: none; } }

  @keyframes motion-travel { from { transform: translateX(var(--from)); } to { transform: translateX(var(--to)); } }

  @keyframes motion-move { from { transform: translate(var(--from-x), var(--from-y)); } to { transform: translate(var(--to-x), var(--to-y)); } }

  @keyframes motion-press { 0% { transform: none; } 45% { transform: scale(0.95); } 100% { transform: none; } }

  @keyframes motion-flip-out { from { transform: scaleX(1); } to { transform: scaleX(0); } }

  @keyframes motion-flip-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  @keyframes motion-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

  @keyframes motion-settle {
    0.000% { transform: var(--t0); animation-timing-function: linear; }
    2.903% { transform: var(--t1); animation-timing-function: linear; }
    5.806% { transform: var(--t2); animation-timing-function: linear; }
    8.710% { transform: var(--t3); animation-timing-function: linear; }
    11.613% { transform: var(--t4); animation-timing-function: linear; }
    14.516% { transform: var(--t5); animation-timing-function: linear; }
    17.419% { transform: var(--t6); animation-timing-function: linear; }
    20.323% { transform: var(--t7); animation-timing-function: linear; }
    23.226% { transform: var(--t8); animation-timing-function: linear; }
    26.129% { transform: var(--t9); animation-timing-function: linear; }
    29.032% { transform: var(--t10); animation-timing-function: linear; }
    35.484% { transform: var(--t10); animation-timing-function: linear; }
    38.387% { transform: var(--t11); animation-timing-function: linear; }
    41.290% { transform: var(--t12); animation-timing-function: linear; }
    44.194% { transform: var(--t13); animation-timing-function: linear; }
    47.097% { transform: var(--t14); animation-timing-function: linear; }
    50.000% { transform: var(--t15); animation-timing-function: linear; }
    52.903% { transform: var(--t16); animation-timing-function: linear; }
    55.806% { transform: var(--t17); animation-timing-function: linear; }
    58.710% { transform: var(--t18); animation-timing-function: linear; }
    61.613% { transform: var(--t19); animation-timing-function: linear; }
    64.516% { transform: var(--t20); animation-timing-function: linear; }
    70.968% { transform: var(--t20); animation-timing-function: linear; }
    73.871% { transform: var(--t21); animation-timing-function: linear; }
    76.774% { transform: var(--t22); animation-timing-function: linear; }
    79.677% { transform: var(--t23); animation-timing-function: linear; }
    82.581% { transform: var(--t24); animation-timing-function: linear; }
    85.484% { transform: var(--t25); animation-timing-function: linear; }
    88.387% { transform: var(--t26); animation-timing-function: linear; }
    91.290% { transform: var(--t27); animation-timing-function: linear; }
    94.194% { transform: var(--t28); animation-timing-function: linear; }
    97.097% { transform: var(--t29); animation-timing-function: linear; }
    100.000% { transform: var(--t30); animation-timing-function: linear; }
  }
}


/* 6. The two media queries =================================================
   Each one shows or hides a whole piece, which a grid cannot decide. */

/* 640px and up: room for the demo button in the header. */
@media (min-width: 40rem) {
  .sign-in-buttons .demo {
    display: inline-flex;
  }
}

/* 1024px and up: room for the navigation links. */
@media (min-width: 64rem) {
  .navigation-links {
    display: flex;
  }
}


/* 7. Reduced motion ======================================================== */

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