/* Autocanteen site styles. Shared by the English and Estonian pages. */

/* Fonts ------------------------------------------------------------------ */

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  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: "Manrope";
  src: url("/assets/fonts/manrope-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  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;
}

/* Tokens ----------------------------------------------------------------- */

/* Values come from the brand book's tokens/tokens.css. Keep them identical: white on
   Signal is only 4.54:1, so even a small drift fails AA. */

:root {
  --ac-ink: #0b0d10;
  --ac-ink-rgb: 11 13 16;
  --ac-white: #fff;
  --ac-mist: #f5f6f7;

  --ac-signal: #d93d0b;
  --ac-signal-400: #ff6f3c;
  --ac-signal-600: #bb3308;
  --ac-on-signal: var(--ac-white);
  --ac-signal-gradient: linear-gradient(100deg, #ff8a5e, var(--ac-signal-400) 50%, #f65f2a);

  --ac-steel-100: #e9ebee;
  --ac-steel-200: #d6d9de;
  --ac-steel-300: #b4b9c2;
  --ac-steel-600: #4f5560;
  --ac-steel-700: #383d46;
  --ac-steel-800: #24282e;

  --ac-surface: var(--ac-white);
  --ac-text: var(--ac-ink);
  --ac-text-2: var(--ac-steel-600);
  --ac-line: var(--ac-steel-200);

  --ac-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ac-weight-label: 500;
  --ac-weight-headline: 600;
  --ac-type-display: 600 clamp(2.75rem, 1.5rem + 5.2vw, 6rem)/1.02 var(--ac-font);
  --ac-tracking-display: -0.035em;
  --ac-type-h1: 600 clamp(2.25rem, 1.5rem + 3vw, 4rem)/1.06 var(--ac-font);
  --ac-tracking-h1: -0.03em;
  --ac-type-h2: 600 clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem)/1.12 var(--ac-font);
  --ac-tracking-h2: -0.025em;
  --ac-type-subhead: 600 clamp(1.4rem, 1.12rem + 1.2vw, 2rem)/1.2 var(--ac-font);
  --ac-tracking-subhead: -0.025em;
  --ac-type-h3: 600 1.25rem/1.3 var(--ac-font);
  --ac-tracking-h3: -0.015em;
  --ac-type-lede: 400 1.25rem/1.5 var(--ac-font);
  --ac-tracking-lede: -0.01em;
  --ac-type-body: 400 1.0625rem/1.6 var(--ac-font);
  --ac-type-small: 400 0.875rem/1.5 var(--ac-font);
  --ac-type-label: 500 0.875rem/1.3 var(--ac-font);

  --ac-radius-compact: 10px;
  --ac-radius-button: 12px;
  --ac-radius-card: 20px;
  --ac-radius-media: 28px;
  --ac-keyline: 1.5px;
  --ac-button-height: 56px;
  --ac-button-height-compact: 48px;

  --container: 78rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-space: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --header-height: 4.5rem;
}

/* Dark surfaces swap the role tokens, so components below work on either. */
.hero,
.site-header,
.section--ink,
.site-footer,
.document-header,
.explainer-dialog,
.cookie-notice {
  --ac-surface: var(--ac-ink);
  --ac-text: var(--ac-white);
  --ac-text-2: var(--ac-steel-300);
  --ac-line: var(--ac-steel-700);
  color: var(--ac-text);
}

/* Base ------------------------------------------------------------------- */

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

html {
  scroll-padding-top: calc(var(--header-height) + var(--cookie-notice-height, 0px) + 1rem);
  /* The scrollbar's room stays when the page is held still under the explainer
     video, so nothing moves or changes size as the video opens and closes. */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ac-surface);
  color: var(--ac-text);
  font: var(--ac-type-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
dl,
dd,
ul,
figure,
address {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

h1,
h2,
h3,
strong {
  font-weight: var(--ac-weight-headline);
}

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

img {
  height: auto;
}

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

button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--ac-signal);
  outline-offset: 3px;
}

.hero :focus-visible,
.site-header :focus-visible,
.section--ink :focus-visible,
.site-footer :focus-visible,
.document-header :focus-visible,
.explainer-dialog :focus-visible {
  outline-color: var(--ac-white);
}

/* Scroll anchor at the very top; also tells the header when to turn solid. */
#top {
  position: absolute;
  top: 0;
  width: 1px;
  height: 1rem;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

/* Font Awesome Pro Light (and Brands for logos), as filled shapes. */
.icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--ac-button-height);
  padding: 0.75rem 1.5rem;
  border-radius: var(--ac-radius-button);
  font-size: 1rem;
  font-weight: var(--ac-weight-label);
  transition: background-color 0.2s, color 0.2s;
}

.btn--primary {
  background: var(--ac-signal);
  color: var(--ac-on-signal);
}

.btn--primary:hover {
  background: var(--ac-signal-600);
}

.btn--white {
  background: var(--ac-white);
  color: var(--ac-ink);
}

.btn--white:hover {
  background: var(--ac-mist);
}

.btn--ink {
  background: var(--ac-ink);
  color: var(--ac-white);
}

.btn--ink:hover {
  background: var(--ac-steel-800);
}

.btn--outline,
.icon-btn,
.hero__toggle,
.social-link {
  box-shadow: inset 0 0 0 var(--ac-keyline) currentColor;
  color: var(--ac-text);
}

.btn--outline:hover,
.icon-btn:hover,
.hero__toggle:hover,
.social-link:hover {
  background: var(--ac-text);
  box-shadow: none;
  color: var(--ac-surface);
}

.icon-btn,
.hero__toggle,
.social-link {
  display: grid;
  place-items: center;
  width: var(--ac-button-height-compact);
  height: var(--ac-button-height-compact);
  border-radius: var(--ac-radius-compact);
  transition: background-color 0.2s, color 0.2s;
}

/* Header ----------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  background-image: linear-gradient(to bottom, rgb(var(--ac-ink-rgb) / 0.75), rgb(var(--ac-ink-rgb) / 0.5) 60%, rgb(var(--ac-ink-rgb) / 0));
  transition: background-color 0.25s, box-shadow 0.25s;
}

.site-header.is-scrolled {
  background-color: rgb(var(--ac-ink-rgb) / 0.92);
  background-image: none;
  box-shadow: 0 1px 0 var(--ac-line);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: var(--header-height);
}

.site-header__logo {
  margin-inline-end: auto;
}

.site-header__logo img {
  width: auto;
  height: 2rem;
}

.header-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  justify-content: center;
  padding-inline: 0.5rem;
  border-radius: var(--ac-radius-compact);
  font: var(--ac-type-label);
  white-space: nowrap;
  transition: background-color 0.2s;
}

.header-link:hover {
  background: rgb(255 255 255 / 0.12);
}

.header-link--home {
  display: none;
}

.header-link--contact .header-link__label,
.header-link--phone .header-link__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (min-width: 56.25rem) {
  .site-header__inner {
    gap: 0.75rem;
  }

  .header-link {
    padding-inline: 0.75rem;
  }

  .header-link--home {
    display: inline-flex;
  }

  .header-link--contact .icon {
    display: none;
  }

  .header-link--contact .header-link__label,
  .header-link--phone .header-link__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

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

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: max(38rem, 100vh);
  min-height: max(38rem, 100svh);
  overflow: hidden;
  background: var(--ac-surface);
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgb(var(--ac-ink-rgb)), rgb(var(--ac-ink-rgb) / 0.9) 12%, rgb(var(--ac-ink-rgb) / 0.62) 45%, rgb(var(--ac-ink-rgb) / 0.4)),
    linear-gradient(to right, rgb(var(--ac-ink-rgb) / 0.55), rgb(var(--ac-ink-rgb) / 0) 80%);
}

.hero__content {
  padding-block: calc(var(--header-height) + var(--cookie-notice-height, 0px) + 3rem) 5.5rem;
}

.hero h1 {
  max-width: 18ch;
  font: var(--ac-type-display);
  letter-spacing: var(--ac-tracking-display);
  text-wrap: balance;
}

/* The brand book's recognised word: its proportions at 172px, as em values. The book sets
   the line at 1.08, so the top and bottom insets are adjusted for this tighter line height.
   The radius is 20.5% of the frame's 0.964em height, the book's rule for every frame. */
.frame-word {
  position: relative;
  display: inline-block;
  margin-inline-start: -0.047em;
  padding-inline: 0.14em;
}

.frame-word::before {
  content: "";
  position: absolute;
  inset: 0.051em 0 0.005em;
  border-radius: 0.198em;
  padding: 0.041em;
  background: var(--ac-signal-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.hero__lede {
  max-width: 40rem;
  margin-top: 1rem;
  font: var(--ac-type-body);
}

.flag {
  display: inline-block;
  width: 1.5em;
  height: 0.75em;
  margin-inline-end: 0.5em;
  border-radius: 2px;
  vertical-align: -0.03em;
}

.hero__proof {
  margin-top: 0.75rem;
  font-size: 1rem;
  font-weight: var(--ac-weight-headline);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.hero__actions .btn {
  flex: 1 1 9rem;
  padding-inline: 0.75rem;
}

/* Large screens show the company facts here, closing the hero, rather than in
   the next section. The end of the row stays clear for the video toggle. */
.hero__facts {
  display: none;
}

@media (min-width: 64rem) {
  .hero__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    padding-inline-end: calc(var(--ac-button-height-compact) + 1.5rem);
    border-top: 1px solid var(--ac-line);
    color: var(--ac-text-2);
  }
}

.hero__toggle {
  position: absolute;
  right: var(--gutter);
  bottom: 1.25rem;
  background: rgb(var(--ac-ink-rgb) / 0.2);
}

.hero__toggle .icon {
  width: 1.125rem;
  height: 1.125rem;
}

[data-state="playing"] > .icon--play,
[data-state="paused"] > .icon--pause {
  display: none;
}

@media (min-width: 40rem) {
  .hero__lede {
    margin-top: 1.5rem;
    font: var(--ac-type-lede);
    letter-spacing: var(--ac-tracking-lede);
  }

  .hero__proof {
    margin-top: 1rem;
    font-size: inherit;
  }

  .hero__actions {
    margin-top: 2.25rem;
  }

  .hero__actions .btn {
    flex: none;
    padding-inline: 1.5rem;
  }
}

@media (min-width: 56.25rem) {
  .hero__content {
    padding-bottom: clamp(3rem, 8vh, 6rem);
  }

  .hero::before {
    background:
      linear-gradient(to top, rgb(var(--ac-ink-rgb)), rgb(var(--ac-ink-rgb) / 0.9) 12%, rgb(var(--ac-ink-rgb) / 0.55) 45%, rgb(var(--ac-ink-rgb) / 0.3)),
      linear-gradient(to right, rgb(var(--ac-ink-rgb) / 0.55), rgb(var(--ac-ink-rgb) / 0) 80%);
  }

  .hero__toggle {
    right: max(var(--gutter), (100% - var(--container)) / 2);
    bottom: clamp(3rem, 8vh, 6rem);
  }
}

/* Sections --------------------------------------------------------------- */

.section {
  padding-block: var(--section-space);
}

.section--surface {
  background: var(--ac-mist);
}

.section--ink {
  background: var(--ac-surface);
}

.section-title {
  font: var(--ac-type-h1);
  letter-spacing: var(--ac-tracking-h1);
  text-wrap: balance;
}

.section-intro,
.benefits__intro {
  color: var(--ac-text-2);
  font: var(--ac-type-lede);
  letter-spacing: var(--ac-tracking-lede);
}

.section-intro {
  max-width: 40rem;
  margin-top: 1rem;
}

.card-title {
  font: var(--ac-type-h3);
  letter-spacing: var(--ac-tracking-h3);
}

.card-icon {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--ac-signal);
}

/* Company facts ---------------------------------------------------------- */

.proof {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.proof__title {
  font: var(--ac-type-h2);
  letter-spacing: var(--ac-tracking-h2);
  text-wrap: pretty;
}

.proof__text {
  max-width: 62rem;
  margin-top: 0.75rem;
  font: var(--ac-type-subhead);
  letter-spacing: var(--ac-tracking-subhead);
  text-wrap: pretty;
}

.proof__facts {
  display: grid;
  gap: 1.75rem;
  margin-top: clamp(2.5rem, 2rem + 2.5vw, 4rem);
}

.proof__fact {
  padding-top: 1.5rem;
  border-top: 1px solid var(--ac-line);
  color: var(--ac-text-2);
}

.proof__fact strong,
.hero__fact strong {
  display: block;
  width: fit-content;
  margin-bottom: 0.375rem;
  color: var(--ac-signal-400);
  font: var(--ac-type-h2);
  letter-spacing: var(--ac-tracking-h2);
  background: var(--ac-signal-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__fact strong {
  margin-bottom: 0.125rem;
  font: var(--ac-type-subhead);
  letter-spacing: var(--ac-tracking-subhead);
}

/* Large screens show the facts in the hero instead. */
@media (min-width: 64rem) {
  .proof__facts {
    display: none;
  }
}

/* Benefits --------------------------------------------------------------- */

.benefits__head {
  display: grid;
  gap: 1.5rem;
}

/* With the explainer video beside them, the title and intro share a column. */
.benefits__head--video {
  gap: 2rem;
}

.benefits__head--video .benefits__intro {
  max-width: 40rem;
  margin-top: 1.5rem;
}

.benefits__list {
  display: grid;
  gap: 2.5rem;
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
}

.benefit {
  padding-top: 2rem;
  border-top: 1px solid var(--ac-line);
}

.benefit .card-title {
  margin-top: 1.25rem;
}

.benefit p {
  margin-top: 0.75rem;
  color: var(--ac-text-2);
}

@media (min-width: 56.25rem) {
  .benefits__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 4rem;
    align-items: end;
  }

  .benefits__head--video {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }

  .benefits__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
  }
}

/* Explainer video -------------------------------------------------------- */

/* The poster is a link to the video file. With JavaScript it opens the player
   below instead (initExplainer in site.js). */
.explainer {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ac-radius-media);
  background: var(--ac-steel-100);
}

.explainer img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: scale 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.explainer:hover img {
  scale: 1.03;
}

.explainer__label {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding-inline: 0.75rem 0.875rem;
  border-radius: var(--ac-radius-button);
  background: var(--ac-ink);
  color: var(--ac-white);
  font-size: 0.9375rem;
  font-weight: var(--ac-weight-label);
  line-height: 1.3;
  white-space: nowrap;
  transition: background-color 0.2s;
}

.explainer:hover .explainer__label {
  background: var(--ac-steel-800);
}

.explainer__time {
  color: var(--ac-steel-300);
}

/* The player covers the page, which cannot scroll while it is open. Where the
   scrollbar takes up room, that room is left empty, in the player's colour. */
html:has(.explainer-dialog[open]) {
  background: var(--ac-ink);
  overflow: hidden;
}

.explainer-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ac-ink);
  overflow: hidden;
}

.explainer-dialog[open] {
  display: grid;
  place-items: center;
}

.explainer-dialog::backdrop {
  background: none;
}

/* As large as fits, leaving room above for the close button. */
.explainer-dialog video {
  width: min(100% - 2 * var(--gutter), (100vh - 9rem) * 16 / 9, 120rem);
  width: min(100% - 2 * var(--gutter), (100dvh - 9rem) * 16 / 9, 120rem);
  aspect-ratio: 16 / 9;
  border-radius: var(--ac-radius-card);
  background: var(--ac-ink);
}

.explainer-dialog__close {
  position: absolute;
  top: 0.75rem;
  right: var(--gutter);
}

/* Installation gallery --------------------------------------------------- */

.gallery {
  --slide: min(86vw, 60rem);
}

.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.gallery__heading {
  flex: 1 1 24rem;
  max-width: 44rem;
}

.gallery__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gallery__track {
  position: relative;
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  padding-inline: calc((100% - var(--slide)) / 2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.gallery__track::-webkit-scrollbar {
  display: none;
}

.gallery__track:focus-visible {
  outline-offset: -2px;
}

.gallery__slide {
  flex: none;
  width: var(--slide);
  overflow: hidden;
  border-radius: var(--ac-radius-media);
  background: var(--ac-steel-100);
  scroll-snap-align: center;
  transition: opacity 0.35s;
}

.gallery__track.is-ready .gallery__slide:not(.is-current) {
  opacity: 0.45;
}

.gallery__track.is-jumping .gallery__slide {
  transition: none;
}

.gallery__slide img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Data management -------------------------------------------------------- */

.data__grid {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 5rem);
}

.data__stage {
  position: relative;
  width: min(100%, 34rem);
  aspect-ratio: 1;
  margin: 2rem auto 0;
}

.data__stage img,
.data__stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.data__stage video {
  opacity: 0;
}

.data__stage.is-ready video {
  opacity: 1;
}

.feature-list {
  display: grid;
  gap: 2.5rem;
}

.feature p {
  margin-top: 0.5rem;
  color: var(--ac-text-2);
}

.feature .card-title {
  margin-top: 1rem;
}

.feature .card-icon {
  width: 2rem;
  height: 2rem;
}

@media (min-width: 40rem) {
  .feature-list {
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 3rem 2.5rem;
  }
}

@media (min-width: 64rem) {
  .data__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

/* Technology ------------------------------------------------------------- */

.tech__grid {
  display: grid;
  gap: 3rem;
}

.spec-list {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.spec {
  display: grid;
  gap: 0.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--ac-line);
}

.spec dt {
  font: var(--ac-type-h3);
  letter-spacing: var(--ac-tracking-h3);
}

.spec dd {
  color: var(--ac-text-2);
}

.depth-viewer {
  width: min(100%, 38rem);
  margin-inline: auto;
}

.depth-viewer__stage {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.depth-viewer img,
.depth-viewer canvas {
  position: absolute;
  transition: opacity 0.8s;
}

/* Inset to match FLAT_FILL in depth-viewer.js, so the photo and the flat point cloud line up. */
.depth-viewer img {
  inset: 6%;
  width: 88%;
  height: 88%;
  object-fit: contain;
  border-radius: var(--ac-radius-media);
}

.depth-viewer canvas {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: grab;
  touch-action: pan-y;
}

.depth-viewer canvas:active {
  cursor: grabbing;
}

.depth-viewer.is-ready img {
  opacity: 0;
}

.depth-viewer.is-ready canvas {
  opacity: 1;
}

/* Between trays the view fades out and back in quickly. */
.depth-viewer.is-cycling canvas,
.depth-viewer.is-cycling .depth-viewer__labels {
  transition: opacity 0.3s;
}

.depth-viewer.is-switching canvas,
.depth-viewer.is-switching .depth-viewer__labels {
  opacity: 0;
}

.depth-viewer__labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.depth-viewer__labels li {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.25rem 0.625rem;
  border-radius: var(--ac-radius-compact);
  background: var(--ac-signal);
  color: var(--ac-on-signal);
  font-size: 0.875rem;
  font-weight: var(--ac-weight-label);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.35s;
}

.depth-viewer__labels.is-on li {
  opacity: 1;
}

.depth-viewer__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.depth-viewer__controls[hidden] {
  display: none;
}

.depth-viewer__controls .icon-btn {
  flex: none;
}

.depth-viewer__stage-btn {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--ac-button-height-compact);
  padding: 0.25rem 0.25rem 0.5rem;
  border-top: 2px solid var(--ac-line);
  color: var(--ac-text-2);
  font-size: 0.875rem;
  font-weight: var(--ac-weight-label);
  text-align: left;
  transition: color 0.2s;
}

.depth-viewer__stage-btn:hover,
.depth-viewer__stage-btn[aria-pressed="true"] {
  color: var(--ac-text);
}

/* The rule above each stage name fills while that stage plays. */
.depth-viewer__stage-btn::before {
  content: "";
  position: absolute;
  inset: -2px 0 auto;
  height: 2px;
  background: var(--ac-signal-gradient);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}

.depth-viewer__controls:not(.is-playing) .depth-viewer__stage-btn[aria-pressed="true"]::before {
  transform: none;
}

@media (min-width: 40rem) {
  .spec {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 64rem) {
  .tech__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
    align-items: center;
  }
}

/* Partners --------------------------------------------------------------- */

.partners__grid {
  display: grid;
  gap: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ac-line);
  border-left: 1px solid var(--ac-line);
}

.logo-grid li {
  display: grid;
  place-items: center;
  min-height: clamp(5.5rem, 4rem + 7vw, 9.5rem);
  padding: clamp(0.75rem, 0.25rem + 2vw, 2rem);
  border-right: 1px solid var(--ac-line);
  border-bottom: 1px solid var(--ac-line);
}

@media (min-width: 64rem) {
  .partners__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 4rem;
  }
}

/* Closing call to action -------------------------------------------------- */

.cta {
  --ac-surface: var(--ac-mist);
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  background: var(--ac-surface);
}

.cta__inner {
  display: grid;
  gap: 2rem;
}

.cta__text {
  margin-top: 0.75rem;
  font: var(--ac-type-lede);
  letter-spacing: var(--ac-tracking-lede);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (min-width: 64rem) {
  .cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4rem;
    align-items: center;
  }
}

/* Footer ----------------------------------------------------------------- */

.site-footer {
  background: var(--ac-surface);
  color: var(--ac-text-2);
}

/* Top View drawings in the side margins, only on screens wide enough for at
   least one column clear of the text. They fade towards the text. Made with
   pattern() in the brand kit's tools/topview.py: 12 by 6 cells of 100 px,
   Steel 800, 1.5 px lines. */
.footer-art {
  display: none;
}

@media (min-width: 95rem) {
  .site-footer {
    position: relative;
    isolation: isolate;
  }

  .footer-art {
    display: block;
    position: absolute;
    inset-block: 0;
    z-index: -1;
    width: calc((100% - var(--container)) / 2 - 2rem);
    background: url("/assets/images/top-view/pattern.svg") repeat-y;
    background-size: 1200px 600px;
    pointer-events: none;
  }

  .footer-art--left {
    left: 0;
    background-position: right top;
    -webkit-mask-image: linear-gradient(to left, rgb(0 0 0 / 0.35), #000 12rem);
    mask-image: linear-gradient(to left, rgb(0 0 0 / 0.35), #000 12rem);
  }

  /* Three rows down, so the two sides don't mirror each other. */
  .footer-art--right {
    right: 0;
    background-position: left top -300px;
    -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 0.35), #000 12rem);
    mask-image: linear-gradient(to right, rgb(0 0 0 / 0.35), #000 12rem);
  }
}

.site-footer__grid {
  display: grid;
  gap: 3rem;
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.site-footer__logo img {
  width: auto;
  height: 2.25rem;
}

.site-footer__about {
  max-width: 28rem;
  margin-top: 1.5rem;
}

.site-footer h2 {
  margin-bottom: 1.25rem;
  color: var(--ac-text);
  font: var(--ac-type-h3);
  letter-spacing: var(--ac-tracking-h3);
}

.contact-row {
  display: flex;
  gap: 0.75rem;
}

.contact-row + .contact-row {
  margin-top: 0.875rem;
}

.contact-row .icon {
  margin-top: 0.2rem;
  color: var(--ac-signal-400);
}

.site-footer a:not(.social-link, .site-footer__logo) {
  transition: color 0.2s;
}

.site-footer a:not(.social-link, .site-footer__logo):hover {
  color: var(--ac-text);
}

.social {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.social-link .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--ac-line);
  font: var(--ac-type-small);
}

.site-footer__legal a,
.site-footer__legal button {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.2s;
}

.site-footer__legal button:hover {
  color: var(--ac-text);
}

@media (min-width: 40rem) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__grid > :first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
    gap: 4rem;
  }

  .site-footer__grid > :first-child {
    grid-column: auto;
  }
}

/* Cookie notice ---------------------------------------------------------- */

/* A band fixed under the header, over the empty top of the hero. While it is
   open, initCookieNotice sets --cookie-notice-height, and the hero and scroll
   offsets make room for it, so it never sits on top of page text. */
.cookie-notice {
  position: fixed;
  inset: var(--header-height) 0 auto;
  z-index: 20;
  border-block: 1px solid var(--ac-line);
  background: rgb(var(--ac-ink-rgb) / 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  font: var(--ac-type-small);
}

.cookie-notice__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block: 0.75rem;
}

.cookie-notice p {
  flex: 999 1 18rem;
  color: var(--ac-text-2);
}

.cookie-notice p a {
  color: var(--ac-text);
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Accepting and rejecting are equally easy: the same size, look and place. */
.cookie-notice__actions {
  display: grid;
  flex: 1 0 12rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.cookie-notice .btn {
  min-height: 2.5rem;
  padding: 0.375rem 1.25rem;
  border-radius: var(--ac-radius-compact);
  font-size: 0.875rem;
}

/* Legal document page ---------------------------------------------------- */

.document-header {
  background: var(--ac-surface);
}

.document-header .container {
  padding-block: 1.25rem;
}

.document-header a {
  display: inline-block;
}

.document-header img {
  width: auto;
  height: 2rem;
}

.document {
  max-width: 46rem;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.document h1 {
  margin-bottom: 1.5rem;
  font: var(--ac-type-h2);
  letter-spacing: var(--ac-tracking-h2);
}

.document pre {
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Motion ----------------------------------------------------------------- */

/* initReveal in site.js adds these classes, so without JavaScript nothing is hidden. */
.will-reveal {
  opacity: 0;
  translate: 0 2.75rem;
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), translate 1.1s cubic-bezier(0.16, 1, 0.3, 1), scale 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.will-reveal--fade {
  translate: none;
}

.will-reveal--zoom {
  translate: 0 1.5rem;
  scale: 0.9;
}

.will-reveal.is-revealed {
  opacity: 1;
  translate: none;
  scale: 1;
}

@media print {
  .will-reveal {
    opacity: 1;
    translate: none;
    scale: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Where the browser can tie animation to the scrollbar, the hero recedes and
     large product images grow as you scroll. Elsewhere the images use the
     zoom reveal above. */
  @supports (animation-timeline: view()) {
    .hero__content {
      animation: hero-recede linear both;
      animation-timeline: scroll(root);
      animation-range: 0 80vh;
    }

    .hero__video {
      animation: hero-zoom linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }

    .depth-viewer {
      animation: grow-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }

    @keyframes hero-recede {
      to {
        opacity: 0;
        translate: 0 -4rem;
      }
    }

    @keyframes hero-zoom {
      to {
        scale: 1.08;
      }
    }

    @keyframes grow-in {
      from {
        opacity: 0;
        scale: 0.8;
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}