/* MARK: Fonts */
@font-face {
  font-family: "Outfit";
  src: url("/assets/outfit.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/instrument-sans.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* MARK: Tokens */
/* Colors come from theme.css (charcoal). */
:root {
  --white: #ffffff;
  --screen: #f6f2e9; /* the app's own canvas, behind screenshots while they load */
  --line: color-mix(in srgb, var(--ink) 16%, transparent);

  --accent: var(--link);
  --on-accent: var(--white);

  --font-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --shadow-card: 0 1px 2px rgb(10 14 28 / 6%), 0 12px 32px -16px rgb(10 14 28 / 24%);
  --shadow-device: 0 2px 4px rgb(6 10 24 / 14%), 0 28px 56px -18px rgb(6 10 24 / 45%),
    0 70px 100px -50px rgb(6 10 24 / 40%);
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 68px;
}

/* Dark-green surfaces: links and focus rings switch to the sun's warm white. */
.site-header,
.hero,
.closing,
.site-footer {
  --accent: var(--sun);
  --on-accent: var(--brand);
}

/* MARK: Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  /* Moss shows through overscroll at both ends, matching the header and footer. */
  background-color: var(--brand);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-synthesis: none;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
p {
  margin: 0;
  text-wrap: pretty;
}
figure {
  margin: 0;
}
.wrap {
  width: min(1200px, 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 200;
  padding: 10px 14px;
  background: var(--white);
  color: var(--brand);
  border-radius: 8px;
}
.skip-link:focus {
  top: 12px;
}

/* MARK: Dot texture
   The only texture on the site: a dot grid that fades out from one corner. Surfaces opt in with
   .dotted and choose the corner, reach and color through custom properties. */
.dotted {
  position: relative;
  isolation: isolate;
}
/* Keep the dots on the side of a surface that has no copy; never run them under text. */
.dotted::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    var(--dot, var(--dot-color)) 0 1.2px,
    transparent 1.6px
  );
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(
    circle at var(--dot-at, 100% 0),
    #000 0,
    transparent var(--dot-reach, 55%)
  );
  mask-image: radial-gradient(
    circle at var(--dot-at, 100% 0),
    #000 0,
    transparent var(--dot-reach, 55%)
  );
}

/* MARK: Navigation
   Safari 26+ ignores theme-color. It extends the background-color of a fixed or sticky element at
   the top edge into its toolbar, but only when that element is the topmost thing there and its own
   background is solid. So the header stays opaque and carries no backdrop-filter. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 150;
  background-color: var(--brand);
  color: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.site-header.is-scrolled {
  border-bottom-color: rgb(255 255 255 / 14%);
}
.nav {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-synthesis: none;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
}
/* The official app icon (apps/ios/IconSources/Charcoal), a full-bleed square rounded here. */
.mark {
  display: block;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 22.4%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 14%);
}
.mark img {
  width: 100%;
  height: 100%;
}
.nav-links {
  display: flex;
  gap: 28px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  font-size: 15px;
}
.nav-links a {
  text-decoration: none;
  color: rgb(255 255 255 / 82%);
  transition: color 150ms ease;
}
.nav-links a:hover {
  color: var(--white);
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px 9px 13px;
  border-radius: 999px;
  background: var(--white);
  color: var(--brand);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition:
    transform 200ms var(--ease-out),
    background-color 200ms ease;
}
.nav-cta svg {
  width: 15px;
  height: 15px;
  margin-top: -2px;
}
.nav-cta:hover {
  background: var(--sun);
  transform: translateY(-1px);
}

/* MARK: Buttons */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 22px 0 18px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px #a6a6a6;
  transition:
    transform 220ms var(--ease-out),
    box-shadow 220ms ease;
}
.store-badge svg {
  width: 26px;
  height: 26px;
  margin-top: -3px;
}
.store-badge span {
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", var(--font-body);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}
.store-badge small {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 3px;
}
.store-badge:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px #a6a6a6,
    0 10px 24px -10px rgb(0 0 0 / 45%);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 2px;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
}
.text-link::after {
  content: "↓";
  transition: transform 220ms var(--ease-out);
}
.text-link:hover::after {
  transform: translateY(3px);
}

/* MARK: Devices */
.phone,
.ipad {
  container-type: inline-size;
}
.phone-body,
.ipad-body {
  position: relative;
  background: #121512;
  box-shadow:
    var(--shadow-device),
    inset 0 0 0 1.5px #4b524a,
    inset 0 0 0 3px #080a08;
}
.phone-body {
  padding: 3.6cqw;
  border-radius: 16cqw;
}
.phone-body::before {
  /* Dynamic Island */
  content: "";
  position: absolute;
  z-index: 2;
  top: 6.4cqw;
  left: 50%;
  width: 29cqw;
  height: 8.6cqw;
  translate: -50% 0;
  border-radius: 99px;
  background: #050505;
}
.phone-body img {
  width: 100%;
  height: auto;
  aspect-ratio: 1206 / 2622;
  object-fit: cover;
  object-position: top;
  border-radius: 12.6cqw;
  background: var(--screen);
}
.ipad-body {
  padding: 2.6cqw;
  border-radius: 4.6cqw;
}
.ipad-screen {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2.2cqw;
  background: var(--screen);
}

/* MARK: Hero */
.hero {
  position: relative;
  background: var(--brand);
  color: var(--white);
  padding-top: clamp(40px, 7vh, 88px);
}
.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero h1 {
  max-width: 13ch;
  font-size: clamp(46px, 6.4vw, 92px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.hero h1 em {
  font-style: normal;
  color: var(--sun);
}
.lede {
  margin-top: 26px;
  max-width: 36em;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: rgb(255 255 255 / 84%);
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 28px;
  margin-top: 34px;
}
.fine {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgb(255 255 255 / 70%);
}
.hero-stage {
  position: relative;
  z-index: 3;
  margin-top: clamp(40px, 6vw, 72px);
  /* The iPad straddles the hero's edge and the section below. */
  margin-bottom: calc(-1 * clamp(70px, 10vw, 150px));
}
.hero-device {
  position: relative;
  width: min(100%, 980px);
  margin-inline: auto;
}
.video-toggle {
  position: absolute;
  right: 5%;
  bottom: 6%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 999px;
  background: rgb(18 21 18 / 72%);
  backdrop-filter: blur(8px);
  color: var(--white);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.video-toggle::before {
  content: "";
  width: 8px;
  height: 9px;
  border-inline: 3px solid currentColor;
}
.video-toggle[data-state="paused"]::before {
  width: 0;
  height: 0;
  border-inline: 0;
  border-block: 5px solid transparent;
  border-left: 8px solid currentColor;
}
.video-toggle:hover {
  background: rgb(18 21 18 / 88%);
}

/* MARK: Ideas ticker */
.ideas {
  position: relative;
  z-index: 1;
  padding-block: clamp(100px, 13vw, 190px) 36px;
  background: var(--bg);
}
.ticker {
  overflow: hidden;
}
.ticker-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
  margin: 0;
  padding: 4px var(--gutter);
  list-style: none;
}
.ticker.is-looping {
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker.is-looping .ticker-track {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  padding-inline: 0;
  animation: ticker 70s linear infinite;
}
.ticker.is-looping:hover .ticker-track {
  animation-play-state: paused;
}
.ticker-track li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-family: var(--font-display);
  font-synthesis: none;
  font-weight: 500;
  font-size: 18px;
  white-space: nowrap;
}
.ticker-track li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--link);
}
@keyframes ticker {
  to {
    transform: translateX(calc(-50% - 7px));
  }
}

/* MARK: Sections */
.section-head {
  max-width: 760px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.section-head h2 {
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.08;
}
.section-lede {
  margin-top: 20px;
  max-width: 38em;
  font-size: 19px;
  color: var(--ink-soft);
}

/* MARK: How it works */
.how {
  padding-block: clamp(56px, 8vw, 100px) clamp(64px, 9vw, 120px);
}
.steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  --dot-at: 50% 100%; /* behind the phone, away from the copy at the top */
  --dot-reach: 55%;
  --tint: var(--tint-1);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(28px, 3.6vw, 48px) clamp(28px, 3.6vw, 48px) 0;
  border-radius: 28px;
  background: var(--tint);
}
.step:nth-child(2) {
  --tint: var(--tint-2);
}
.step:nth-child(3) {
  --tint: var(--brand);
  --dot: color-mix(in srgb, var(--sun) 20%, transparent);
  --dot-at: 100% 100%;
  --dot-reach: 42%;
  color: var(--white);
}
.step:nth-child(4) {
  --tint: var(--tint-3);
  --dot-at: 100% 0;
  --dot-reach: 40%;
}
.step-copy {
  max-width: 440px;
}
.step-num {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-display);
  font-synthesis: none;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
}
.step h3 {
  margin-top: 20px;
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1.1;
}
.step-copy p {
  margin-top: 12px;
  font-size: 17px;
  color: var(--ink-soft);
}
.step:nth-child(3) .step-copy p {
  color: rgb(255 255 255 / 84%);
}
/* Phones rise out of the card's bottom edge; the card crops them. */
.step-media {
  display: flex;
  justify-content: center;
  height: clamp(320px, 32vw, 420px);
  margin-top: auto;
  padding-top: 40px;
}
.step-media .phone {
  flex: none;
  width: min(78%, 290px);
}
.step-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding-bottom: clamp(28px, 3.6vw, 48px);
}
.step-wide .step-media {
  height: auto;
  margin: 0;
  padding: 0;
}
.step-wide .step-media .ipad {
  width: 100%;
}
.step-share {
  align-items: start;
  padding-bottom: 0;
}
.step-share .step-copy {
  align-self: center;
  padding-bottom: clamp(28px, 3.6vw, 48px);
}
.step-share .step-media {
  height: clamp(340px, 34vw, 440px);
  padding-top: clamp(28px, 3.6vw, 48px);
}
.step-copy .free-callout {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-family: var(--font-display);
  font-synthesis: none;
  font-weight: 500;
  font-size: 21px;
  color: var(--link);
}
.free-callout::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.surfaces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.surfaces li {
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.tap-ring {
  /* Lands on the selected text in the preview of the capture. */
  position: absolute;
  left: 74.4cqw;
  top: 24.6cqw;
  width: 7cqw;
  height: 7cqw;
  translate: -50% -50%;
  border-radius: 50%;
  background: rgb(10 132 255 / 22%);
  box-shadow: 0 0 0 1.5px rgb(10 132 255 / 70%);
  animation: tap 2.6s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes tap {
  0%,
  100% {
    scale: 0.6;
    opacity: 0;
  }
  12% {
    scale: 1;
    opacity: 1;
  }
  40% {
    scale: 1.7;
    opacity: 0;
  }
}

/* MARK: Made with Juno */
.made {
  --dot-at: 100% 0; /* empty space beside the heading and behind the iPad */
  --dot-reach: 36%;
  padding-block: clamp(80px, 11vw, 140px);
  background: var(--tint-1);
}
.showcase-devices {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-right: clamp(40px, 12%, 150px);
}
.showcase-devices .ipad {
  width: 100%;
}
.showcase-devices .phone {
  position: absolute;
  right: 0;
  bottom: -6%;
  width: clamp(130px, 25%, 290px);
}
.showcase-spacer {
  height: 128px;
}
.capabilities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: clamp(40px, 6vw, 64px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.capabilities li {
  padding: 28px 28px 8px 0;
}
.capabilities li + li {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}
.capabilities svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--link);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.capabilities h3 {
  margin-top: 18px;
  font-size: 24px;
}
.capabilities p {
  margin-top: 8px;
  font-size: 16px;
  color: var(--ink-soft);
}

/* MARK: Modes */
.modes {
  padding-block: clamp(80px, 11vw, 140px);
}
.mode-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 24px;
}
.mode {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 28px;
}
.mode h3 {
  font-size: clamp(28px, 2.8vw, 36px);
  line-height: 1.1;
}
.mode > p {
  margin-top: 14px;
  max-width: 34em;
}
.mode-talk {
  background: var(--surface);
  box-shadow:
    inset 0 0 0 1px var(--rule),
    var(--shadow-card);
}
.mode-talk > p {
  color: var(--ink-soft);
}
.chat {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: 36px;
}
.bubble {
  max-width: 88%;
  padding: 12px 16px;
  border-radius: 20px;
  font-size: 16px;
  line-height: 1.45;
}
.bubble-you {
  justify-self: end;
  background: var(--brand);
  color: var(--white);
  border-bottom-right-radius: 6px;
}
.bubble-juno {
  background: var(--tint-1);
  border-bottom-left-radius: 6px;
}
.mode-code {
  --accent: var(--brand-soft);
  background: var(--night);
  color: var(--night-text);
}
.mode-code > p {
  color: var(--night-faint);
}
.code {
  margin: 32px 0 0;
  padding: 22px 24px;
  overflow-x: auto;
  border-radius: 16px;
  background: var(--code-bg);
  box-shadow: inset 0 0 0 1px var(--code-rule);
  font: 13.5px/1.7 var(--font-mono);
  color: var(--night-text);
  tab-size: 2;
}
/* Syntax colors reuse the app's dark palette. */
.code .k {
  color: #e0b15c;
}
.code .s {
  color: #acc59a;
}
.code .f {
  color: #fff3d4;
}
.code .t {
  color: #9bc5dc;
}
.code .a {
  color: #dba4ae;
}
.code .n {
  color: #e0b15c;
}

/* MARK: FAQ */
.faq {
  padding-block: clamp(64px, 9vw, 120px);
  border-top: 1px solid var(--rule);
}
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.faq-head {
  position: sticky;
  top: 108px;
}
.faq-head h2 {
  margin-top: 14px;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.08;
}
.faq-head p:last-child {
  margin-top: 18px;
  color: var(--ink-soft);
}
.faq-list {
  border-top: 1px solid var(--rule);
}
details {
  border-bottom: 1px solid var(--rule);
  interpolate-size: allow-keywords;
}
summary {
  position: relative;
  display: block;
  padding: 22px 48px 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-synthesis: none;
  font-weight: 600;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.3;
  transition: color 150ms ease;
}
summary::-webkit-details-marker {
  display: none;
}
summary::before,
summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transition: rotate 260ms var(--ease-out);
}
summary::after {
  rotate: 90deg;
}
details[open] summary::after {
  rotate: 0deg;
}
summary:hover {
  color: var(--link);
}
details::details-content {
  block-size: 0;
  overflow: clip;
  transition:
    block-size 320ms var(--ease-out),
    content-visibility 320ms allow-discrete;
}
details[open]::details-content {
  block-size: auto;
}
.answer {
  padding-bottom: 24px;
}
.answer p {
  max-width: 40em;
  color: var(--ink-soft);
}
.faq-head a,
.answer a {
  color: var(--link);
}

/* MARK: Closing */
.closing {
  position: relative;
  overflow: hidden;
  padding-block: clamp(88px, 12vw, 160px);
  background: var(--brand);
  color: var(--white);
  text-align: center;
}
.closing-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.closing-mark {
  width: clamp(110px, 13vw, 160px);
  height: clamp(110px, 13vw, 160px);
  margin-bottom: 28px;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 14%),
    0 24px 48px -20px rgb(0 0 0 / 55%);
}
.closing-mark.is-shader {
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  /* Rapid taps disturb the dots; don't let them double-tap zoom. */
  touch-action: manipulation;
}
/* Sized by shader-icon.js to overflow the mark; only the mark's box takes taps. */
.shader-mark {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.closing h2 {
  max-width: 14ch;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.closing p {
  margin: 22px 0 36px;
  font-size: 19px;
  color: rgb(255 255 255 / 80%);
}

/* MARK: Footer */
.site-footer {
  background: var(--brand);
  color: rgb(255 255 255 / 78%);
  font-size: 14px;
}
.footer-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-block: 28px 36px;
  border-top: 1px solid rgb(255 255 255 / 18%);
}
.site-footer .brand {
  color: var(--white);
  font-size: 22px;
}
.site-footer .mark {
  width: 32px;
  height: 32px;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-left: auto;
}
.site-footer a {
  text-decoration: none;
}
.site-footer nav a:hover {
  color: var(--white);
}

/* MARK: Entrance motion (once, on load; never tied to scroll) */
.rise {
  animation: rise 900ms var(--ease-out) both;
  animation-delay: calc(var(--d, 0) * 90ms + 60ms);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* MARK: Responsive */
@media (max-width: 1060px) {
  .capabilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .capabilities li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .capabilities li:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 860px) {
  .made {
    --dot-reach: 0%;
  }
  .step:nth-child(3),
  .step:nth-child(4) {
    --dot-at: 50% 100%;
    --dot-reach: 50%;
  }
  .nav-links {
    display: none;
  }
  .nav-cta {
    margin-left: auto;
  }
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .step-wide {
    grid-template-columns: minmax(0, 1fr);
  }
  .step-share {
    padding-bottom: 0;
  }
  .step-share .step-copy {
    padding-bottom: 0;
  }
  .mode-grid,
  .faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .faq-head {
    position: static;
  }
}
@media (max-width: 640px) {
  body {
    font-size: 16px;
  }
  .video-toggle {
    right: 4%;
    bottom: 5%;
  }
  .step {
    border-radius: 22px;
    padding-inline: 22px;
  }
  .step-wide {
    padding-bottom: 22px;
  }
  .step-share {
    padding-bottom: 0;
  }
  .step-media,
  .step-share .step-media {
    height: 340px;
  }
  .step-media .phone {
    width: min(80%, 270px);
  }
  .showcase-devices {
    padding-right: 18%;
  }
  .showcase-devices .phone {
    width: 34%;
  }
  .capabilities {
    grid-template-columns: minmax(0, 1fr);
  }
  .capabilities li,
  .capabilities li + li {
    padding: 22px 0 6px;
    border-left: 0;
  }
  .capabilities li + li {
    border-top: 1px solid var(--line);
  }
  .mode {
    border-radius: 22px;
  }
  .code {
    margin-inline: -8px;
    padding: 18px 16px;
    font-size: 12px;
  }
  .footer-inner {
    flex-wrap: wrap;
    gap: 18px 24px;
  }
  .site-footer nav {
    order: 3;
    width: 100%;
    margin-left: 0;
  }
  .site-footer p {
    margin-left: auto;
  }
}
@media (max-width: 380px) {
  .brand span:not(.mark) {
    display: none;
  }
  .store-badge {
    height: 52px;
  }
}

/* MARK: Dark mode adjustments (palette lives in theme.css) */
@media (prefers-color-scheme: dark) {
  .bubble-you {
    background: var(--brand-soft);
    color: var(--brand-deep);
  }
  .bubble-juno {
    background: var(--tint-3);
  }
  /* The accent card lifts off the dark page instead of sinking into it. */
  .step:nth-child(3) {
    --tint: #3a3c41;
  }
}

/* MARK: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .ticker.is-looping {
    mask-image: none;
  }
  .ticker.is-looping .ticker-track {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    padding-inline: var(--gutter);
  }
  .ticker-track li[aria-hidden="true"] {
    display: none;
  }
  .tap-ring {
    opacity: 1;
  }
}