/* SeerAI website styles. Uses tokens.css only; no third-party CSS. */

/* base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}
h1,
h2,
h3 {
  font-weight: 500;
}
/* line breaking: balanced headings, no widows in running text (typeset.js covers older browsers) */
h1,
h2,
h3,
h4,
.display,
.title {
  text-wrap: balance;
}
p,
small,
figcaption,
li,
.lead-title {
  text-wrap: pretty;
}
img,
svg,
video {
  max-width: 100%;
}
body {
  overflow-x: clip;
}
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
}
.section {
  padding-top: var(--section);
}

/* type */
.display {
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.title {
  font-size: var(--fs-title);
  line-height: 1.25;
}
.lead-title {
  font-size: var(--fs-lead);
  line-height: 1.4;
  font-weight: 500;
  max-width: 26ch;
}

/* icons: Phosphor SVGs used as masks so they take the text colour */
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.icon--xl {
  width: clamp(56px, 5vw, 96px);
  height: clamp(56px, 5vw, 96px);
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 52px;
  padding: 0 28px;
  border-radius: var(--r-btn);
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease),
    border-color 0.3s;
}
.btn--line {
  border: 1px solid var(--ink);
}
.btn--cream {
  background: var(--cream);
  color: var(--on-cream);
}
.btn--ink {
  background: var(--ink);
  color: var(--on-ink);
}
/* hover belongs to a mouse; a touch screen gets a press state instead, at the end of this file */
@media (hover: hover) and (pointer: fine) {
  .btn--line:hover,
  .btn--cream:hover {
    background: var(--ink);
    color: var(--on-ink);
  }
  .btn--ink:hover {
    background: var(--ink-press);
  }
}
.btn--wide {
  width: 100%;
  justify-content: space-between;
}
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* preloader: logo slides away once, on first load */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper);
  display: grid;
  place-items: center;
  transition: transform 0.6s cubic-bezier(0.9, 0.03, 1, 0.66);
}
.preloader img {
  height: 56px;
  transition: transform 0.45s cubic-bezier(0.9, 0.03, 1, 0.66);
}
.preloader.is-done {
  transform: translateY(-100%);
}
.preloader.is-done img {
  transform: translateY(-60px);
}

/* arrival at a home page section from another page (src/lib/arrive.ts): the page stays hidden until it stands at
   the section, then fades in. Reveals in view show at once, with no rise. */
html[data-arrive] .preloader {
  display: none;
}
html[data-arrive=''] .site-main,
html[data-arrive=''] .footer {
  opacity: 0;
}
/* while the page settles on the section, HomeMotion puts it back on each height change, and the browser must not
   move it too */
html[data-arrive] {
  overflow-anchor: none;
}
html[data-arrive] [data-reveal] {
  transition: none;
}
html[data-arrive='in'] .site-main,
html[data-arrive='in'] .footer {
  transition: opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  html[data-arrive='in'] .site-main,
  html[data-arrive='in'] .footer {
    transition: none;
  }
}

/* header: sits on the stone band, hides going down, returns going up */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--stone);
  transition: transform 0.45s var(--ease);
}
.header.is-hidden {
  transform: translateY(-100%);
}
.header__inner {
  height: var(--header);
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
}
.header__logo img {
  height: clamp(28px, 2.4vw, 42px);
  width: auto;
}
.header__nav {
  display: flex;
  gap: clamp(18px, 2vw, 36px);
  font-size: 17px;
  color: var(--mute);
}
@media (hover: hover) and (pointer: fine) {
  .header__nav a:hover {
    color: var(--ink);
  }
}
.header__actions {
  margin-left: auto;
  display: flex;
  gap: 12px;
}

/* 1 hero */
.hero {
  background: var(--stone);
  padding-top: calc(var(--header) + clamp(16px, 2vw, 40px));
}
.hero__top {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding-bottom: clamp(40px, 5vw, 96px);
}
.hero__title {
  font-size: var(--fs-hero);
  line-height: 1;
  letter-spacing: -0.025em;
  max-width: min(19ch, 58vw);
}
.hero__sub {
  margin-left: auto;
  max-width: 26ch;
  font-size: var(--fs-lead);
  line-height: 1.3;
  font-weight: 500;
  padding-top: 0.4em;
}
.hero__media {
  position: relative;
  height: clamp(420px, 66vh, 820px);
  overflow: hidden;
}
.drift {
  position: absolute;
  left: 0;
  right: 0;
  top: -8%;
  height: 116%;
  will-change: transform;
}
.drift > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media .drift > img {
  object-position: 50% 62%;
}
.hero__down {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  height: 56px;
  padding: 0 40px;
  border-radius: var(--r-btn);
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  align-items: center;
}
.hero__down .icon {
  animation: bob 0.8s ease-in-out infinite alternate;
}
@keyframes bob {
  to {
    transform: translateY(4px);
  }
}

/* captions: every image says what it is */
.caption {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-2);
}
.caption b {
  font-weight: 500;
  color: var(--ink);
}
.hero__caption {
  position: absolute;
  left: var(--gut);
  bottom: 28px;
  max-width: calc(100% - 2 * var(--gut));
  background: color-mix(in srgb, var(--raise) 92%, transparent);
  padding: 10px 14px;
  border-radius: 12px;
}
.next__caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: color-mix(in srgb, var(--raise) 92%, transparent);
  padding: 10px 14px;
  border-radius: 12px;
  margin: 0;
}
.card__src {
  display: block;
  font-size: 12px;
  opacity: 0.8;
  margin-top: 8px;
}

/* 2 problem */
.split {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2fr;
  gap: clamp(32px, 5vw, 96px);
}
.split__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.fill p {
  position: relative;
  font-size: var(--fs-display);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.fill p + p {
  margin-top: 0.6em;
}
.fill__veil {
  position: absolute;
  inset: -3px 0;
  display: grid;
  pointer-events: none;
  overflow: hidden;
}
.fill__line {
  background: var(--veil);
}
.silos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: clamp(64px, 7vw, 128px);
  align-items: start;
}
.silo {
  background: var(--stone);
  border-radius: var(--r-sm);
  padding: 12px;
}
.silo:nth-child(2n) {
  margin-top: 40px;
}
.silo:nth-child(3n) {
  margin-top: 18px;
}
.silo__viz {
  height: 120px;
  border-radius: 10px;
  background: var(--raise);
  overflow: hidden;
  position: relative;
}
.silo__viz img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.silo__viz svg {
  width: 100%;
  height: 100%;
}
.silo__viz polyline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.silo__viz polyline.soft {
  stroke: var(--ghost);
}
.silo__bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding: 18px 12px 12px;
}
.silo__bars span {
  flex: 1;
  background: var(--ink);
  border-radius: 3px 3px 0 0;
}
.silo__rows {
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.9;
  color: var(--ink-2);
}
.silo__rows p {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--stone);
}
.silo__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
}
.silo__meta b {
  font-weight: 500;
}
.silo__meta span,
.silo__age {
  font-size: 12.5px;
  color: var(--mute);
}
.silo__age {
  margin-top: 4px;
}
.silo__age--old {
  color: var(--warn);
}

/* panels */
.panel {
  border-radius: var(--r);
  padding: var(--pad);
}
.panel--stone {
  background: var(--stone);
}
.panel--slate {
  background: var(--slate);
  color: var(--cream);
}

/* 3 how it's different */
.different {
  padding-top: var(--section);
}
.different__panel {
  padding-top: clamp(64px, 8vw, 160px);
  padding-bottom: clamp(64px, 8vw, 160px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
}
.different__lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  opacity: 0.78;
  margin-top: 28px;
  max-width: 46ch;
}
.points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.point h3 {
  font-size: 18px;
  margin-top: 20px;
}
.point p {
  font-size: 14px;
  opacity: 0.75;
  margin-top: 6px;
}

/* 4 story */
.story__stage {
  position: relative;
  height: calc(100vh - 120px);
  min-height: 600px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--night);
}
.story__scene,
.story__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.story__links {
  pointer-events: none;
}
/* white in both modes: the lines sit on the dark story stage */
.story__links path {
  stroke: #fff;
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 4 5;
  vector-effect: non-scaling-stroke;
}
.chip {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--raise);
  border-radius: var(--r-btn);
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}
.chip .icon {
  width: 16px;
  height: 16px;
}
.chip--core {
  background: var(--ink);
  color: var(--on-ink);
  padding: 12px 18px;
}
.chip--core .icon {
  color: var(--amber);
}
.story__product {
  position: absolute;
  right: 4%;
  top: 50%;
  width: 60%;
  transform: translateY(-50%);
  border-radius: var(--r-sm);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  opacity: 0;
}
.story__builds {
  position: absolute;
  right: 4%;
  top: calc(50% - 22%);
  display: flex;
  gap: 8px;
  opacity: 0;
}
.story__builds span {
  background: var(--raise);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--r-btn);
}
.story__card {
  position: absolute;
  left: 24px;
  top: 24px;
  width: min(400px, calc(100% - 48px));
  background: var(--raise);
  border-radius: var(--r-sm);
  padding: 28px;
}
.story__bars {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
}
.story__bars span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--stone);
  overflow: hidden;
}
.story__bars b {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink);
}
.story__slot {
  position: relative;
  height: 150px;
}
.story__ch {
  position: absolute;
  inset: 0;
}
.story__ch:not(:first-child) {
  opacity: 0;
}
.story__n {
  font-size: 13px;
  color: var(--mute);
}
.story__ch h3 {
  font-size: var(--fs-display);
  line-height: 1.05;
  margin-top: 6px;
  letter-spacing: -0.015em;
}
.story__ch p:last-child {
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink-2);
  margin-top: 10px;
}

/* 5 examples */
.examples {
  padding-top: var(--section);
}
.examples__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(32px, 4vw, 64px);
}
.examples__logo {
  height: 30px;
  width: auto;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--stone-2);
}
.card__media::after {
  content: '';
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 12, 0.55),
    rgba(10, 10, 12, 0)
  );
  pointer-events: none;
}
.card__text {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 1;
  color: #fff;
}
.card__text p {
  font-size: 14px;
  line-height: 1.35;
  opacity: 0.92;
  max-width: 34ch;
}
.card__text h3 {
  font-size: var(--fs-title);
  margin-top: 6px;
}
.card .btn {
  margin-top: 12px;
}

/* 6 proof */
.proof__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 120px);
  align-items: center;
}
.proof__media {
  position: relative;
  aspect-ratio: 1 / 1.07;
  border-radius: var(--r);
  overflow: hidden;
  /* the same near black in both modes: it sits behind a dark video */
  background: #0d0e10;
}
.proof__play {
  position: absolute;
  left: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px;
  border-radius: var(--r-btn);
  background: var(--cream);
  color: var(--on-cream);
  font-weight: 500;
}
.proof__play .icon {
  width: 16px;
  height: 16px;
}
.proof__body {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--ink-2);
  margin: 28px 0 32px;
  max-width: 46ch;
}

/* 7 team: a timeline that fills as you pass each person */
.team__title {
  margin-bottom: clamp(32px, 4vw, 72px);
}
.team__list {
  position: relative;
  padding-left: clamp(40px, 6vw, 110px);
}
.team__line {
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--ink);
  overflow: hidden;
}
.team__line i {
  position: absolute;
  inset: 0;
  background: var(--paper);
  opacity: 0.78;
}
.person {
  position: relative;
  display: grid;
  grid-template-columns: 1fr clamp(120px, 14vw, 220px);
  gap: 32px;
  align-items: center;
  padding: clamp(20px, 2.4vw, 40px) 0;
  border-bottom: 1px solid var(--stone);
}
.person__name span {
  display: block;
  font-size: 14px;
  color: var(--mute);
  margin-bottom: 4px;
}
.person__name b {
  font-size: var(--fs-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.person__photo {
  aspect-ratio: 855 / 960;
  border-radius: var(--r-sm);
  background: var(--stone);
  display: grid;
  place-items: center;
  font-size: 40px;
  color: var(--ghost);
}
.person__veil {
  position: absolute;
  inset: 0;
  background: var(--paper);
  opacity: 0.7;
  pointer-events: none;
  transform-origin: bottom;
}

/* 8 next step */
.next__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.next__text {
  background: var(--stone);
  border-radius: var(--r);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: clamp(420px, 40vw, 720px);
}
.next__body {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--ink-2);
  margin: 24px 0 36px;
  max-width: 40ch;
}
.next__media {
  margin: 0;
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  min-height: 420px;
}

/* footer: logo and newsletter, then three short link columns; legal line underneath */
.footer {
  padding: var(--section) 0 40px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--stone);
  align-items: start;
}
.footer__logo {
  height: 30px;
  width: auto;
}
/* the logo links home, and only the logo itself takes the click */
.footer__home {
  display: block;
  width: fit-content;
}
.footer__news {
  margin-top: 32px;
  max-width: 380px;
}
.footer__label {
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mute);
}
.footer__col {
  display: grid;
  gap: 10px;
  justify-items: start;
  font-size: 15px;
  color: var(--ink-2);
}
@media (hover: hover) and (pointer: fine) {
  .footer__col a:hover,
  .footer__linkbtn:hover {
    color: var(--ink);
  }
}
.footer__linkbtn {
  all: unset;
  cursor: pointer;
  font-size: 15px;
  color: var(--ink-2);
}
.footer__linkbtn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 64px;
  font-size: 13px;
  color: var(--mute);
}
/* the way back to the phone pages, for a phone that chose the desktop pages; never on a wide screen */
.footer__phone {
  display: none;
}
@media (max-width: 760px) {
  .footer__phone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.news {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 52px;
}
.news__field {
  flex: 1;
  /* Subscribe stays on the same row down to the footer of a 1024 px screen */
  min-width: 140px;
}
.news input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--stone-2);
  border-radius: var(--r-btn);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--field);
}
.news input:focus {
  outline: none;
  border-color: var(--ink);
}
.news .btn {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.news__error {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--warn);
}
.news__done {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* cookie notice: a small panel bottom left until the visitor chooses */
.cookies {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 60;
  width: min(400px, calc(100vw - 48px));
  padding: 20px;
  border-radius: var(--r-sm);
  background: var(--raise);
  box-shadow:
    0 0 0 1px var(--stone-2),
    0 24px 60px -20px rgba(28, 27, 29, 0.35);
  animation: cookies-in 0.18s var(--ease) both;
}
/* CookieNotice waits for this fade before it takes the notice away */
.cookies.is-leaving {
  pointer-events: none;
  animation: cookies-out 0.16s var(--ease) both;
}
@keyframes cookies-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
@keyframes cookies-out {
  to {
    opacity: 0;
    transform: translateY(12px);
  }
}
/* where the layout stacks, as on an iPad held upright, the notice sits bottom right, clear of the main heading */
@media (max-width: 1000px) {
  .cookies {
    left: auto;
    right: 16px;
    bottom: 16px;
    width: min(360px, calc(100vw - 32px));
    padding: 16px;
  }
  .cookies p {
    font-size: 13.5px;
  }
  .cookies__actions {
    margin-top: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cookies,
  .cookies.is-leaving {
    animation: none;
  }
}
.cookies p {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}
/* the Europe notice has three buttons and Privacy: if they do not fit, Privacy goes to the next line */
.cookies__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 8px;
  margin-top: 14px;
}
.cookies__actions .btn {
  height: 40px;
  padding: 0 16px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}
.cookies__actions .btn--line {
  box-shadow: inset 0 0 0 1px var(--stone-2);
  background: none;
}
.cookies__more {
  margin-left: auto;
  font-size: 13px;
  color: var(--mute);
  border-bottom: 1px solid currentColor;
}
.cookies__choose {
  all: unset;
  cursor: pointer;
  padding: 0 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
}
.cookies__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.cookies__kinds {
  list-style: none;
  margin-top: 10px;
  display: grid;
}
.cookies__kinds li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--stone);
}
.cookies__kinds li:last-child {
  border-bottom: 1px solid var(--stone);
}
.cookies__kinds b {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.cookies__kinds span {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  color: var(--mute);
}
.cookies__kinds .switch {
  flex: none;
}
/* on/off switch */
.switch {
  all: unset;
  cursor: pointer;
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: var(--stone-2);
  transition: background 0.25s;
}
.switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--knob);
  box-shadow: 0 1px 3px rgba(28, 27, 29, 0.25);
  transition: transform 0.25s var(--ease);
}
.switch.is-on {
  background: var(--ink);
}
.switch.is-on i {
  background: var(--knob-on);
  transform: translateX(16px);
}
.switch:disabled {
  cursor: default;
  opacity: 0.45;
}
.switch:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
  .footer__bottom {
    flex-direction: column;
  }
}

/* reveal on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* mockup font switcher (remove before launch) */
.fontsw {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(28, 27, 29, 0.92);
  font:
    500 12px/1 system-ui,
    sans-serif;
}
.fontsw span {
  color: #999;
  padding: 8px 8px 8px 12px;
}
.fontsw button {
  all: unset;
  cursor: pointer;
  color: #ddd;
  padding: 8px 12px;
  border-radius: 999px;
}
.fontsw button.on {
  background: #fff;
  color: var(--ink);
}

/* tablet and phone */
/* the header links show down to 720 px, so an iPad keeps them; between 720 and 1100 px the header is tighter */
@media (max-width: 1100px) {
  .header__inner {
    gap: 20px;
  }
  .header__nav {
    gap: 20px;
    font-size: 16px;
  }
  .header__actions .btn {
    padding: 0 20px;
  }
}
/* an iPad mini is 744 px wide and keeps the links */
@media (max-width: 720px) {
  .header__nav {
    display: none;
  }
}
@media (max-width: 1100px) {
  .different__panel,
  .proof__grid,
  .next__grid,
  .split {
    grid-template-columns: 1fr;
  }
  .silos {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 720px) {
  :root {
    --fs-hero: clamp(30px, 8.6vw, 40px);
    --t-hero: clamp(30px, 8.6vw, 40px);
  }
  .hero__title {
    max-width: none;
  }
  .fontsw {
    display: none;
  }
  .header__actions .btn--line {
    display: none;
  }
  .hero__top {
    flex-direction: column;
    gap: 20px;
  }
  .hero__sub {
    margin-left: 0;
  }
  .hero__down {
    display: none;
  }
  .hero__caption {
    bottom: 16px;
  }
  .silos {
    grid-template-columns: repeat(2, 1fr);
  }
  .silo {
    margin-top: 0 !important;
  }
  .points,
  .cards {
    grid-template-columns: 1fr;
  }
  .person {
    grid-template-columns: 1fr;
  }
  .person__photo {
    display: none;
  }
  .story__card {
    padding: 20px;
  }
  .story__slot {
    height: 130px;
  }
  .footer__top,
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .footer__nav {
    flex-wrap: wrap;
    gap: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero__down .icon {
    animation: none;
  }
}

/* announcements, set up in the editor: a bar inside the header, or a pop-up */
.site-main {
  padding-top: var(--announce, 0px);
}
.annbar {
  order: -1;
  background: var(--bar);
  color: var(--on-bar);
}
.annbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
.annbar__link {
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}
.annbar__close {
  all: unset;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-left: 4px;
  opacity: 0.7;
}
@media (hover: hover) and (pointer: fine) {
  .annbar__close:hover {
    opacity: 1;
    background: color-mix(in srgb, currentColor 12%, transparent);
  }
}
.annbar__close .icon,
.annpop__close .icon {
  width: 14px;
  height: 14px;
}
.annpop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(28, 27, 29, 0.32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: annpop-in 0.35s var(--ease);
}
.annpop__card {
  position: relative;
  width: min(440px, 100%);
  overflow: hidden;
  border-radius: var(--r);
  background: var(--raise);
  box-shadow: 0 40px 100px -30px rgba(28, 27, 29, 0.5);
  animation: annpop-up 0.45s var(--ease);
}
.annpop__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.annpop__body {
  padding: 28px;
  display: grid;
  gap: 12px;
  justify-items: start;
}
.annpop__body h2 {
  font-size: var(--t-h4);
  line-height: 1.15;
}
.annpop__body p {
  font-size: var(--t-body2);
  line-height: 1.5;
  color: var(--ink-2);
}
.annpop__body .btn {
  margin-top: 8px;
}
.annpop__close {
  all: unset;
  cursor: pointer;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--raise) 90%, transparent);
  box-shadow: 0 0 0 1px var(--stone-2);
}
@keyframes annpop-in {
  from {
    opacity: 0;
  }
}
@keyframes annpop-up {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}
@media (prefers-reduced-motion: reduce) {
  .annpop,
  .annpop__card {
    animation: none;
  }
}

/* an image for one mode only, like the logo: --show-light and --show-dusk in tokens.css pick it */
.for-light {
  display: var(--show-light);
}
.for-dusk {
  display: var(--show-dusk);
}

/* Dusk: the browser grey of a placeholder is too dark on a Dusk field, so placeholders take the mute colour */
:root[data-theme='dusk'] ::placeholder {
  color: var(--mute);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) ::placeholder {
    color: var(--mute);
  }
}

/* the colour switch in the footer: Auto, Light and Dusk as three quiet icons */
.theme {
  display: inline-flex;
  flex: none;
  /* in the stacked footer the switch keeps its own width */
  align-self: flex-start;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 1px var(--stone-2);
}
.theme button {
  all: unset;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 32px;
  height: 26px;
  border-radius: var(--r-btn);
  color: var(--mute);
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .theme button:hover {
    color: var(--ink);
  }
}
.theme button[aria-pressed='true'] {
  background: var(--switch-on);
  color: var(--ink);
}
.theme button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.theme .icon {
  width: 15px;
  height: 15px;
}

/* a change of colour mode: no transitions for one frame, so every colour changes at once (applyTheme in theme.ts) */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
}

/* Touch screens, such as an iPad, have no hover. They get a short press state in place of the grey tap flash. Tap
   areas are 44 px and fields are 16 px, so Safari does not zoom in. The look of each control stays the same. A larger
   tap area comes from padding with a negative margin, or from an empty ::after. The footer links are the exception:
   they sit 44 px apart in place of 31 px. */
@media (hover: none) and (pointer: coarse) {
  a,
  button {
    -webkit-tap-highlight-color: transparent;
  }
  .btn {
    transition:
      background 0.3s var(--ease),
      color 0.3s var(--ease),
      border-color 0.3s,
      opacity 0.2s var(--ease);
  }
  .btn:active,
  .header__nav a:active,
  .footer__col a:active,
  .footer__linkbtn:active,
  .cookies__choose:active,
  .cookies__more:active,
  .theme button:active,
  .annbar__close:active {
    opacity: 0.6;
    transition-duration: 0s;
  }
  .header__logo,
  .header__nav a {
    padding-block: 12px;
    margin-block: -12px;
  }
  /* the nav gap is 20 px, so two tap areas do not meet */
  .header__nav a {
    padding-inline: 8px;
    margin-inline: -8px;
  }
  .footer__home {
    padding-block: 7px;
    margin-block: -7px;
  }
  /* Each link of a column gets a 44 px row. The label and the last link keep their place in the column. */
  .footer__col {
    gap: 0;
    margin-bottom: -11.5px;
  }
  .footer__col .footer__label {
    margin-bottom: 12.5px;
  }
  .footer__col a,
  .footer__col .footer__linkbtn {
    padding: 11.5px 6px;
    margin-inline: -6px;
  }
  .footer__bottom .footer__linkbtn {
    padding-block: 11.5px;
    margin-block: -11.5px;
  }
  .theme button {
    position: relative;
    width: 44px;
  }
  .theme button::after {
    content: '';
    position: absolute;
    inset: -9px 0;
  }
  .cookies__actions .btn,
  .cookies__choose,
  .cookies__more {
    position: relative;
  }
  .cookies__actions .btn::after,
  .cookies__choose::after,
  .cookies__more::after {
    content: '';
    position: absolute;
    inset: -2px 0;
  }
  .cookies__choose::after,
  .cookies__more::after {
    inset: -12px -4px;
  }
  .cookies__more::after {
    bottom: -13px;
  }
  .switch::after {
    content: '';
    position: absolute;
    inset: -10px -2px;
  }
  .annbar__close::after {
    content: '';
    position: absolute;
    inset: -8px;
  }
  .annbar__close {
    position: relative;
  }
  .news input {
    font-size: 16px;
  }
  /* the 16 px email fits beside Subscribe in the footer of a 1024 px iPad */
  .news .btn {
    padding: 0 22px;
  }
}