:root {
  --bg: #FAF8F3;
  --navy: #0F1535;
  --green: #007F59;
  --bright: #00A876;
  --soft: #4A5168;
  --dim: #666D80;
  --line: rgba(15, 21, 53, .14);
  --gutter: clamp(1.25rem, 4vw, 3rem);
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 700; font-display: swap;
  src: url(fraunces-your-brand.woff2) format('woff2');
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--navy);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
a { color: var(--navy); text-underline-offset: .2em; }
a:hover { color: var(--green); }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ---- the bar ---- */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.bar__logo { display: block; }
.bar__logo img { display: block; height: 40px; width: auto; }
.bar a.bar__link { font-size: .9375rem; font-weight: 600; text-decoration: none; }

/* ---- the page ---- */
main { flex: 1; display: grid; place-items: center; padding: clamp(3rem, 10vh, 6rem) var(--gutter); }
.hero { width: min(100%, 40rem); text-align: center; }
h1 em { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 700; letter-spacing: -.01em; color: var(--bright); }
h1 { margin: 0 0 1.5rem; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.08; letter-spacing: -.025em; font-weight: 700; }
.hero p { margin: 0 0 1.25rem; font-size: 1.125rem; line-height: 1.55; color: var(--soft); }
.hero p.status {
  display: inline-flex; align-items: center; gap: .6em;
  margin: 2rem 0 0; padding: .45em 1em;
  border: 1px solid var(--line); border-radius: 99px; background: var(--bg);
  font-size: .875rem; font-weight: 600; color: var(--navy);
}
.hero p.status::before {
  content: ""; width: .5em; height: .5em; border-radius: 50%;
  background: var(--bright); animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 .4em rgba(0, 168, 118, .16); } }

/* Every assistant in turn, stacked in one grid cell so the sentence never jumps. No script. */
.hero p.ask { margin: 1.5rem 0 0; color: var(--navy); font-weight: 500; }
.names { display: grid; justify-items: center; margin-top: .35rem; font-size: 1.625rem; letter-spacing: -.015em; color: var(--green); font-weight: 700; }
.names span {
  grid-area: 1 / 1; opacity: 0;
  animation: name 20s linear infinite;
}
.names span:nth-child(2) { animation-delay: 2.5s; }
.names span:nth-child(3) { animation-delay: 5.0s; }
.names span:nth-child(4) { animation-delay: 7.5s; }
.names span:nth-child(5) { animation-delay: 10.0s; }
.names span:nth-child(6) { animation-delay: 12.5s; }
.names span:nth-child(7) { animation-delay: 15.0s; }
.names span:nth-child(8) { animation-delay: 17.5s; }
@keyframes name {
  0% { opacity: 0; transform: translateY(.35em); }
  1.5%, 12.5% { opacity: 1; transform: none; }
  14%, 100% { opacity: 0; transform: translateY(-.35em); }
}
@media (prefers-reduced-motion: reduce) {
  .hero p.status::before { animation: none; }
  .names span { animation: none; }
  .names span:first-child { opacity: 1; }
}
.hero a.mail { font-size: 1.375rem; font-weight: 600; }

.doc { width: min(100%, 44rem); align-self: start; padding: 1.5rem; background: var(--bg); }
.doc h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: .75rem; }
.doc h2 { margin: 2.5rem 0 .75rem; font-size: 1.25rem; letter-spacing: -.01em; scroll-margin-top: 1rem; }
.doc p, .doc li { font-size: 1rem; line-height: 1.6; color: var(--soft); }
.doc p { margin: 0 0 1rem; }
.doc ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.doc .updated { font-size: .875rem; color: var(--dim); }

/* ---- the footer: one short row ---- */
.foot { border-top: 1px solid var(--line); padding: .7rem var(--gutter); background: var(--bg); }
.foot__row { width: min(100%, 52rem); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; }
.foot__logo img { display: block; height: 30px; width: auto; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.foot li a { color: var(--soft); text-decoration: none; font-size: .8125rem; }
.foot li a:hover { color: var(--navy); text-decoration: underline; }