:root {
  --color-bg: #f7f9ff;
  --color-surface: #ffffff;
  --color-text: #181c20;
  --color-muted: #42474e;
  --color-primary: #2f628c;
  --color-primary-strong: #0e4a73;
  --color-outline: #c2c7cf;
  --shadow-sm: 0 8px 24px rgba(20, 38, 56, 0.08);
  --shadow-md: 0 18px 44px rgba(16, 35, 54, 0.14);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--color-bg);
}

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--color-text);
  background:
    radial-gradient(circle at 10% -10%, rgba(47, 98, 140, 0.16), transparent 42%),
    radial-gradient(circle at 90% 0%, rgba(104, 88, 122, 0.12), transparent 38%),
    linear-gradient(180deg, var(--color-bg) 0%, #f0f4fa 100%);
}

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

a {
  color: inherit;
}

.site-shell {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Its own layer, so sections fading in (the screenshots on first load)
     never paint over the header while scrolling in iPhone Safari. */
  transform: translateZ(0);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(114, 119, 127, 0.16);
  background: rgba(247, 249, 255, 0.84);
}

.site-header-inner {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
}

.site-header-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.brand-lockup img {
  width: 124px;
  height: auto;
}

/* The ™ hangs off the wordmark's right side (SiteLayout.astro: 14px, 16px
   on wider screens). Right-to-left pages put the wordmark at the right edge,
   so they keep that much room beside it, or the ™ would touch the edge. */
[dir="rtl"] .brand-lockup {
  margin-right: 14px;
}

@media (min-width: 861px) {
  [dir="rtl"] .brand-lockup {
    margin-right: 16px;
  }
}

.private-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.private-preview-link:hover,
.private-preview-link:focus-visible {
  color: var(--color-primary-strong);
  background: rgba(47, 98, 140, 0.08);
  outline: none;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(114, 119, 127, 0.32);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.84);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--color-text);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.top-nav a {
  text-decoration: none;
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 7px 10px;
  border-radius: 999px;
  transition: color 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}

.top-nav a:hover,
.top-nav a:focus-visible {
  color: var(--color-primary-strong);
  background: rgba(47, 98, 140, 0.1);
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.language-selector,
.region-selector {
  position: relative;
  flex-shrink: 0;
}

.language-selector-trigger,
.region-selector-trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(114, 119, 127, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--color-muted);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.language-selector-trigger::-webkit-details-marker,
.region-selector-trigger::-webkit-details-marker {
  display: none;
}

.language-selector[open] .language-selector-trigger,
.region-selector[open] .region-selector-trigger,
.language-selector-trigger:hover,
.region-selector-trigger:hover,
.language-selector-trigger:focus-visible,
.region-selector-trigger:focus-visible {
  color: var(--color-primary-strong);
  border-color: rgba(47, 98, 140, 0.32);
  background: rgba(255, 255, 255, 0.96);
  outline: none;
}

.language-selector-current,
.region-selector-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  white-space: nowrap;
}

.region-selector-flag {
  font-size: 1rem;
  line-height: 1;
}

.language-selector-chevron,
.region-selector-chevron {
  font-size: 0.8rem;
  line-height: 1;
}

.language-selector-menu,
.region-selector-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(114, 119, 127, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-md);
  z-index: 30;
}

.language-selector-option,
.region-selector-option {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.region-selector-option {
  display: flex;
  align-items: center;
  gap: 10px;
}

.language-selector-menu {
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.region-selector-option-code {
  min-width: 32px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(47, 98, 140, 0.08);
  color: var(--color-primary-strong);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.language-selector-option:hover,
.region-selector-option:hover,
.language-selector-option:focus-visible,
.region-selector-option:focus-visible {
  background: rgba(47, 98, 140, 0.08);
  color: var(--color-primary-strong);
  outline: none;
}

.language-selector-option[aria-current="page"],
.region-selector-option[aria-checked="true"] {
  background: rgba(47, 98, 140, 0.12);
  color: var(--color-primary-strong);
}

[dir="rtl"] .language-selector-menu,
[dir="rtl"] .region-selector-menu {
  right: auto;
  left: 0;
}

[dir="rtl"] .language-selector-option,
[dir="rtl"] .region-selector-option {
  text-align: right;
}

.section {
  padding: 76px 0;
}

.section[id] {
  scroll-margin-top: 98px;
}

.section:first-of-type {
  padding-top: 96px;
}

.hero-title {
  margin: 0;
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(2.5rem, 6.2vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-weight: 600;
  max-width: 14ch;
  text-wrap: balance;
}

.hero-copy {
  margin: 0;
  font-size: clamp(1.04rem, 2.1vw, 1.36rem);
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 64ch;
  text-wrap: pretty;
}

/* Interim pre-launch page */

body.prelaunch-page {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.prelaunch-main {
  min-height: 0;
  display: grid;
}

.prelaunch-shell {
  min-height: 100%;
  padding: clamp(44px, 7vw, 82px) 0;
  display: grid;
  place-items: center;
}

.company-gate-panel {
  width: min(100%, 1100px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  overflow: hidden;
  border: 1px solid rgba(114, 119, 127, 0.18);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-md);
}

.company-gate-intro {
  position: relative;
  min-height: 460px;
  padding: clamp(34px, 5vw, 58px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 76%, rgba(47, 98, 140, 0.16), transparent 42%),
    linear-gradient(145deg, rgba(231, 239, 249, 0.96), rgba(244, 247, 252, 0.96));
}

.company-gate-copy {
  position: relative;
  z-index: 1;
  max-width: 34rem;
}

.company-gate-copy h1 {
  margin: 0 0 18px;
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(2.35rem, 4.4vw, 3.75rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: balance;
}

.company-gate-description {
  margin: 0;
  max-width: 38ch;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.45vw, 1.12rem);
  line-height: 1.55;
}

.company-gate-launch {
  margin: 24px 0 0;
  padding-top: 20px;
  max-width: 38ch;
  border-top: 1px solid rgba(114, 119, 127, 0.22);
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.55;
}

.company-gate-platform {
  margin: 10px 0 0;
  max-width: 38ch;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.company-gate-mark {
  position: absolute;
  top: 8px;
  right: 30px;
  bottom: 8px;
  width: 270px;
  display: grid;
  place-items: center;
  opacity: 0.1;
  pointer-events: none;
}

.company-gate-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.preview-access {
  padding: clamp(32px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(114, 119, 127, 0.16);
  background: rgba(255, 255, 255, 0.9);
}

.preview-access h2 {
  margin: 0;
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.35rem, 1.8vw, 1.6rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 600;
}

.preview-access-helper {
  margin: 12px 0 0;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.preview-access-error {
  margin: 18px 0 0;
  color: #9d1c1c;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
}

.preview-access-form {
  margin-top: 24px;
  display: grid;
  gap: 10px;
}

.preview-access-form label {
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.preview-access-form input[type="password"] {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--color-outline);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.preview-access-form input[type="password"]:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 98, 140, 0.15);
}

.preview-access-form button {
  min-height: 48px;
  margin-top: 4px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--color-primary);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.preview-access-form button:hover {
  background: #285778;
}

.preview-access-form button:focus-visible {
  outline: 3px solid rgba(47, 98, 140, 0.3);
  outline-offset: 3px;
}

.preview-access-form button:active {
  transform: translateY(1px);
}

.store-badge-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: auto;
  block-size: var(--store-badge-height);
  min-block-size: 44px;
  padding: 0;
  border-radius: 11px;
  line-height: 0;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.store-badge {
  display: block;
  inline-size: auto;
  block-size: 100%;
  max-inline-size: none;
}

.apple-store-badge,
.google-play-badge {
  inline-size: auto;
  block-size: 100%;
}

.store-badge-link:hover,
.store-badge-link:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(14, 74, 115, 0.26);
  outline: none;
}

.panel {
  border: 1px solid rgba(114, 119, 127, 0.22);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-sm);
}

.kicker {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-strong);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.section-title {
  margin: 0;
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.section-subtitle {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.6;
  max-width: 72ch;
}

.origin-panel {
  padding: clamp(24px, 4vw, 36px);
}

.origin-quote {
  margin: 0;
  display: grid;
  gap: 14px;
}

.origin-quote p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.65;
  font-size: 1.05rem;
}

.origin-attribution {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(114, 119, 127, 0.18);
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: var(--color-primary-strong);
}

/* Pricing */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 8px;
}

.pricing-card {
  padding: clamp(20px, 3.5vw, 32px);
  display: grid;
  gap: 18px;
  align-content: start;
}

/* The featured plan sits raised off the page: a soft blue edge and a deeper,
   blue-tinted shadow. Not a solid outline, which reads as "selected". */
.pricing-card-featured {
  border-color: rgba(47, 98, 140, 0.55);
  box-shadow: 0 18px 40px rgba(47, 98, 140, 0.2), 0 2px 8px rgba(16, 35, 54, 0.08);
}

.pricing-card-header {
  display: grid;
  gap: 4px;
}

.pricing-plan-name {
  margin: 0;
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
}

.pricing-price {
  margin: 0;
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.pricing-period {
  font-size: 0.45em;
  font-weight: 500;
  color: var(--color-muted);
  letter-spacing: 0;
}

/* A word after the price ("one-time") needs a space; "/mo" does not. */
.pricing-period-word {
  margin-left: 0.35em;
}

.pricing-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.pricing-features li {
  padding-left: 22px;
  position: relative;
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.pricing-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 600;
}

/* Extra Usage sits under the plans as an add-on, not a third plan. Its two
   halves use the plan grid's columns, gap and card padding, so its name lines
   up with Explorer's and its checkmarks with Pro's. The extra 2px stands in
   for the inner borders of the two plan cards. */
.pricing-addon {
  margin-top: 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(18px + 2px);
  align-items: start;
}

.pricing-addon > * {
  padding: clamp(20px, 3.5vw, 32px);
}

.pricing-addon-intro {
  display: grid;
  gap: 12px;
}

/* Plain weight so the price stays the one bold thing in the card. */
.pricing-addon-lead {
  margin: 0;
  color: var(--color-muted);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
}

.pricing-currency-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(66, 71, 78, 0.74);
}

/* Get the app CTA */

.cta-app-icon {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(14, 74, 115, 0.14);
}

.shots-carousel {
  display: block;
}

.shots-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.shots-viewport::-webkit-scrollbar {
  display: none;
}

.shots-viewport.is-dragging,
.shots-viewport.is-programmatic {
  scroll-snap-type: none;
}

@media (hover: hover) and (pointer: fine) {
  .shots-viewport {
    cursor: grab;
  }

  .shots-viewport.is-dragging {
    cursor: grabbing;
  }
}

.shots-track {
  display: flex;
  gap: 18px;
  padding: 2px 0;
}

.shot-card {
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 12px;
  flex: 0 0 calc((100% - 36px) / 3);
  min-width: 0;
  scroll-snap-align: start;
}

.shot-frame {
  /* A button (tap to view full screen on touch screens), styled as the frame. */
  display: block;
  width: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: inherit;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(114, 119, 127, 0.22);
  background: #f2f5fa;
  aspect-ratio: 1320 / 2868;
}

.shot-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease-out;
}

.shots-carousel[data-shot-theme="light"] .shot-image-light,
.shots-carousel[data-shot-theme="dark"] .shot-image-dark {
  opacity: 1;
}

.shot-frame:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Full-screen screenshot viewer. */
html.has-shot-viewer {
  overflow: hidden;
}

.shot-viewer {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(8, 14, 22, 0.94);
  color: #fff;
  overscroll-behavior: contain;
}

.shot-viewer[open] {
  display: grid;
  place-items: center;
  animation: shot-viewer-in 0.16s ease-out;
}

.shot-viewer::backdrop {
  background: transparent;
}

@keyframes shot-viewer-in {
  from {
    opacity: 0;
  }
}

.shot-viewer-figure {
  margin: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

/* As big as the screen allows: on a phone the screenshot fills it edge to edge. */
.shot-viewer-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 14px;
  user-select: none;
  -webkit-user-drag: none;
}

.shot-viewer-close,
.shot-viewer-nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(16, 20, 24, 0.62);
  color: #fff;
  cursor: pointer;
}

.shot-viewer-close:hover,
.shot-viewer-nav:hover {
  background: rgba(16, 20, 24, 0.8);
}

.shot-viewer-close:focus-visible,
.shot-viewer-nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.shot-viewer-close {
  top: calc(14px + env(safe-area-inset-top));
  inset-inline-end: 14px;
}

.shot-viewer-nav {
  top: 50%;
  transform: translateY(-50%);
}

.shot-viewer-prev {
  inset-inline-start: 14px;
}

.shot-viewer-next {
  inset-inline-end: 14px;
}

.shot-viewer svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[dir="rtl"] .shot-viewer-nav svg {
  transform: scaleX(-1);
}

/* On touch screens the arrows would cover the picture; a swipe moves instead. */
@media (hover: none) and (pointer: coarse) {
  .shot-viewer-nav {
    display: none;
  }
}

.shot-meta {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 116px;
}

.shot-title {
  margin: 0;
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.18rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 600;
  min-height: calc(1.18rem * 1.15 * 2);
}

.shot-caption {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.55;
  font-size: 0.95rem;
}

/* Above the screenshots: choose the look first. */
.shots-theme-toggle {
  width: max-content;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(114, 119, 127, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 24px rgba(20, 38, 56, 0.08);
}

.shots-theme-button {
  min-width: 68px;
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 140ms ease-out,
    color 140ms ease-out,
    box-shadow 140ms ease-out;
}

.shots-theme-button.is-active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(14, 74, 115, 0.18);
}

.shots-theme-button:focus-visible {
  outline: 2px solid rgba(45, 108, 163, 0.42);
  outline-offset: 2px;
}

.shots-dots {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* The same dots as "Who it's for": the current one stretches into a wide
   oval, so it seems to skip along as the screenshots move. */
.shots-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  border: 0;
  background: rgba(114, 119, 127, 0.36);
  cursor: pointer;
  transition: background-color 0.3s ease, width 0.3s ease;
}

.shots-dot.is-active {
  width: 22px;
  background: var(--color-primary);
}

.site-footer {
  border-top: 1px solid rgba(114, 119, 127, 0.2);
  margin-top: 32px;
  padding: 22px 0 30px;
}

.footer-inner {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  color: var(--color-muted);
  font-size: 12px;
}

.standard-footer-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0;
}

.footer-directory {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.footer-group h2 {
  margin: 0;
  color: var(--color-text);
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.3;
}

.footer-group ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.footer-group li + li {
  margin-top: 8px;
}

.footer-group a {
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.45;
  text-decoration: none;
}

.footer-group a:hover,
.footer-group a:focus-visible {
  color: var(--color-primary-strong);
  text-decoration: underline;
}

.footer-boilerplate {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  gap: 5px;
  max-width: 46ch;
  font-size: 10px;
  opacity: 0.82;
}

.footer-boilerplate p {
  margin: 0;
  line-height: 1.45;
}

.prelaunch-footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, 0.9fr);
  align-items: flex-start;
  column-gap: 32px;
}

.footer-legal-copy {
  display: grid;
  gap: 5px;
  max-width: 72ch;
}

.footer-legal-copy p {
  white-space: normal;
  line-height: 1.45;
}

.footer-company-contact {
  display: grid;
  gap: 5px;
  justify-items: end;
  max-width: 46ch;
  justify-self: end;
  text-align: right;
  line-height: 1.45;
}

.footer-company-contact p {
  white-space: nowrap;
}

.footer-company-contact p:first-child {
  color: var(--color-text);
  font-weight: 600;
}

.footer-company-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-weight: 400;
  letter-spacing: normal;
}

.location-pin {
  width: 12px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--color-primary);
}

.footer-company-contact a {
  color: inherit;
  font: inherit;
  font-weight: 400;
  letter-spacing: normal;
  text-decoration: none;
}

.footer-company-contact a:hover,
.footer-company-contact a:focus-visible {
  color: var(--color-primary-strong);
  text-decoration: underline;
}

/* Blocks fade up as they scroll into view (site.js). Only browsers running
   script start them hidden, so the page always shows without script. */
@media (scripting: enabled) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Shown at once, for content someone asked for (a search, a linked answer). */
[data-reveal].is-instant {
  transition: none;
}

/* Legal pages */
body.legal-page {
  background:
    radial-gradient(circle at 5% -10%, rgba(47, 98, 140, 0.1), transparent 38%),
    linear-gradient(180deg, var(--color-bg) 0%, #eff3f9 100%);
}

.legal-wrap {
  width: min(920px, calc(100% - 40px));
  margin: 42px auto 64px;
}

.legal-intro {
  max-width: 72ch;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.legal-intro-hero {
  margin: 0;
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.legal-intro-helper {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.6;
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  max-width: 64ch;
}

.legal-card {
  --legal-pad: clamp(24px, 4vw, 38px);
  padding: var(--legal-pad);
  padding-top: 0;
}

.legal-title {
  margin: clamp(20px, 3vw, 28px) 0 0;
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-weight: 600;
}

.legal-meta {
  margin-top: 16px;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  background: rgba(47, 98, 140, 0.04);
  border: 1px solid rgba(114, 119, 127, 0.12);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.legal-meta div {
  display: flex;
  gap: 6px;
}

.legal-meta dt {
  font-weight: 600;
  color: var(--color-text);
}

.legal-meta dt::after {
  content: ":";
}

.legal-meta dd {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
}

.legal-tabs {
  margin: 0 calc(-1 * var(--legal-pad)) 0;
  padding: 0 var(--legal-pad);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid rgba(114, 119, 127, 0.18);
}

.legal-tabs[data-tab-count="1"] {
  grid-template-columns: minmax(0, max-content);
  justify-content: start;
}

.legal-tabs[data-tab-count="2"] {
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: start;
}

.legal-tabs a {
  min-width: 0;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 500;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
  color: var(--color-muted);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.legal-tabs a.is-active {
  border-bottom-color: var(--color-primary-strong);
  color: var(--color-primary-strong);
}

.legal-tabs a:hover,
.legal-tabs a:focus-visible {
  color: var(--color-primary-strong);
  outline: none;
}

.legal-tab-label-short {
  display: none;
}

.legal-content {
  margin-top: 26px;
  color: var(--color-text);
}

.legal-content h2 {
  margin: 28px 0 10px;
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 600;
}

.legal-content h3 {
  margin: 20px 0 8px;
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 600;
}

.legal-content p,
.legal-content li {
  color: var(--color-muted);
  line-height: 1.68;
  font-size: 1rem;
}

.legal-content ul,
.legal-content ol {
  margin: 8px 0 8px 22px;
  padding: 0;
}

.legal-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: rgba(47, 98, 140, 0.08);
  border: 1px solid rgba(47, 98, 140, 0.16);
  border-radius: 6px;
  padding: 1px 6px;
  color: #154e78;
}

.legal-content a {
  color: var(--color-primary-strong);
  overflow-wrap: anywhere;
}

.legal-content strong {
  font-weight: 700;
}

/* Lettered items (a., b. ...): the letter hangs in its own column so wrapped
   lines line up with the text, as in a list. */
.legal-content .legal-lettered {
  position: relative;
  padding-inline-start: 1.75em;
}

.legal-content .legal-letter {
  position: absolute;
  inset-inline-start: 0;
}

/* Support page: same frame as Legal and Safety. The tab card holds the search
   box and topic filters; each topic follows as a large heading over its
   questions in soft filled boxes, then a short contact card. Only the
   questions show until a box is opened. */
.support-page .legal-intro-helper p {
  margin: 0;
}

.support-page .legal-intro-helper a,
.support-answer a,
.support-contact a,
.support-no-results a {
  color: var(--color-primary-strong);
  overflow-wrap: anywhere;
}

.support-tools {
  display: grid;
  gap: 14px;
  margin-bottom: 8px;
}

.support-tools[hidden] {
  display: none;
}

.support-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  min-height: 48px;
  border: 1px solid rgba(114, 119, 127, 0.3);
  border-radius: 999px;
  background: var(--color-surface, #fff);
  color: var(--color-muted);
}

.support-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(47, 98, 140, 0.15);
}

.support-search svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.support-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--color-text);
}

.support-topic-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.support-topic-filters button {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(114, 119, 127, 0.3);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.support-topic-filters button[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

/* Each topic is a heading the size of a document title, then its questions as
   soft filled boxes with no outline, so the topics stand out at a glance. */
.support-topic {
  display: grid;
  gap: 8px;
  margin-top: clamp(36px, 5vw, 48px);
}

.support-topic[hidden] {
  display: none;
}

.support-topic-title {
  margin: 0 0 8px;
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.support-question {
  border-radius: var(--radius-md);
  background: rgba(47, 98, 140, 0.07);
  transition: background-color 0.2s ease;
  /* A linked answer lands below the sticky header. */
  scroll-margin-top: 96px;
}

.support-question:hover,
.support-question[open] {
  background: rgba(47, 98, 140, 0.1);
}

/* Clips the answer while the row eases open or closed. */
.support-question.is-animating {
  overflow: hidden;
}

.support-question[hidden] {
  display: none;
}

.support-question summary {
  /* The larger gap follows the chevron, on the left in right-to-left pages. */
  padding-block: 16px;
  padding-inline: 20px 48px;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--radius-md);
}

.support-question summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.support-question summary::-webkit-details-marker {
  display: none;
}

/* A chevron that turns when the card is open. */
.support-question summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 22px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}

.support-question[open]:not(.is-closing) summary::after {
  transform: translateY(-30%) rotate(225deg);
}

.support-answer {
  padding: 0 20px 16px;
}

.support-answer p,
.support-answer li,
.support-contact p,
.support-no-results p {
  margin: 0 0 8px;
  color: var(--color-muted);
  line-height: 1.65;
}

/* Answers sit a step lighter than their question so the two never compete:
   the lightest grey that still reads easily on the open box (contrast 4.7:1). */
.support-answer p,
.support-answer li {
  color: #5f666e;
}

.support-answer ul {
  margin: 0 0 8px;
  padding-inline-start: 22px;
}

.support-no-results {
  margin-top: 26px;
}

.support-no-results[hidden] {
  display: none;
}

.support-contact {
  margin-top: clamp(36px, 5vw, 48px);
  padding: 20px;
  text-align: center;
}

.support-card .support-tools {
  margin-top: 22px;
}

.support-contact-page {
  margin-top: 22px;
}

.support-contact-page > p:first-child {
  margin-top: 0;
}

.legal-address-line {
  display: block;
  white-space: pre;
}

/* A Latin postal address keeps its own order on right-to-left pages. */
[dir="rtl"] .legal-address-line {
  direction: ltr;
  text-align: right;
}

.support-contact h2 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  font-weight: 600;
}

.support-contact p {
  margin: 0;
}

/* On phones the topic buttons sit in one row that swipes sideways. */
@media (max-width: 720px) {
  .support-topic-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--legal-pad));
    padding-inline: var(--legal-pad);
    scrollbar-width: none;
  }

  .support-topic-filters::-webkit-scrollbar {
    display: none;
  }
}

/* Underlined passages keep the text colour so they never read as links. */
.legal-content u {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* The rest of the document after a mid-document counts box. */
.legal-content-continued {
  margin-top: 16px;
}

.safety-intervention-metrics {
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(47, 98, 140, 0.16);
  border-radius: var(--radius-md);
  background: rgba(47, 98, 140, 0.04);
}

.safety-intervention-metrics-list {
  margin: 0;
  display: grid;
  gap: 10px;
}

.safety-intervention-metrics-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(114, 119, 127, 0.14);
}

.safety-intervention-metrics-list > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.safety-intervention-metrics-list dt {
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 600;
}

.safety-intervention-metrics-list dt span {
  color: var(--color-muted);
  font-size: 0.84rem;
  font-weight: 400;
}

.safety-intervention-metrics-list dd {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
  text-align: end;
}

.safety-intervention-metrics-list dd strong {
  color: var(--color-primary-strong);
  font-size: 1.15rem;
  font-weight: 600;
}

.safety-intervention-metrics-note {
  margin: 14px 0 0;
  color: var(--color-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.legal-contact-block {
  margin-top: 12px;
  padding: 18px 20px;
  background: rgba(47, 98, 140, 0.04);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  display: grid;
  gap: 16px;
}

/* Labels in one column, emails and numbers in the other; on phones each
   label sits above its value. An email never breaks inside the address. */
.legal-contact-list {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(min-content, 2fr);
  gap: 8px 20px;
  align-items: baseline;
}

.legal-contact-list div {
  display: contents;
}

.legal-content .legal-contact-list a {
  overflow-wrap: normal;
}

.legal-contact-list dt {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-text);
}

.legal-contact-list dt::after {
  content: ":";
}

.legal-contact-list dd {
  margin: 0;
  font-size: 0.92rem;
}

.legal-address {
  font-style: normal;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-muted);
  padding-top: 12px;
  border-top: 1px solid rgba(114, 119, 127, 0.12);
}

/* When the address comes first, the divider moves below it. */
.legal-address:first-child {
  padding-top: 0;
  border-top: 0;
}

.legal-address + .legal-contact-list {
  padding-top: 12px;
  border-top: 1px solid rgba(114, 119, 127, 0.12);
}

@media (min-width: 861px) and (max-width: 1140px) {
  .prelaunch-shell {
    padding: 30px 0 36px;
  }

  .company-gate-panel {
    grid-template-columns: 1fr;
    gap: 16px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .company-gate-intro {
    min-height: 0;
    padding: clamp(34px, 5vw, 52px);
    border: 1px solid rgba(114, 119, 127, 0.18);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
  }

  .company-gate-mark {
    top: 24px;
    right: 28px;
    bottom: 24px;
    width: 200px;
    opacity: 0.05;
  }

  .preview-access {
    padding: clamp(32px, 5vw, 44px);
    border: 1px solid rgba(114, 119, 127, 0.18);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
  }
}

@media (max-width: 1120px) {
  body.menu-open {
    overflow: hidden;
  }

  .menu-toggle {
    display: none;
  }

  .js .menu-toggle {
    display: inline-flex;
  }

  .js .top-nav {
    display: none;
  }

  body.menu-open > .top-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 19;
    padding: 80px 32px 48px;
    gap: 8px;
    background: var(--color-bg);
  }

  body.menu-open > .top-nav a {
    font-size: clamp(1.3rem, 5vw, 1.6rem);
    font-weight: 600;
    padding: 16px 24px;
    border-radius: 14px;
    color: var(--color-text);
    text-align: center;
    width: auto;
    letter-spacing: -0.01em;
  }

  body.menu-open > .top-nav a:hover,
  body.menu-open > .top-nav a:focus-visible {
    background: rgba(47, 98, 140, 0.08);
    color: var(--color-primary-strong);
  }
}

@media (max-width: 860px) {
  .site-header {
    background: var(--color-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-shell,
  .site-header-inner,
  .footer-inner {
    width: min(1200px, calc(100% - 28px));
  }

  .site-header-inner {
    min-height: 68px;
    gap: 12px;
  }

  /* The menu button keeps its size and the logo gives way first, down to
     88px. Past that the language name truncates instead of covering the
     logo. */
  .site-header-controls {
    gap: 8px;
    flex-shrink: 0;
    max-width: calc(100% - 100px);
  }

  .menu-toggle {
    flex-shrink: 0;
  }

  .language-selector {
    flex-shrink: 1;
    min-width: 0;
  }

  .language-selector-trigger {
    max-width: 100%;
  }

  .language-selector-current {
    display: block;
    min-width: 0;
    padding-block: 0.15em;
    margin-block: -0.15em;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand-lockup img {
    width: 102px;
  }

  .private-preview-link {
    padding-inline: 8px;
    font-size: 0.76rem;
  }

  .language-selector-trigger,
  .region-selector-trigger {
    padding: 8px 11px;
    font-size: 0.82rem;
  }

  .language-selector-menu,
  .region-selector-menu {
    min-width: 200px;
  }

  .section {
    padding: 40px 0;
  }

  .section:first-of-type {
    padding-top: 46px;
  }

  .prelaunch-shell {
    padding: 30px 0 36px;
  }

  .company-gate-panel {
    grid-template-columns: 1fr;
    gap: 16px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .company-gate-intro {
    min-height: 0;
    padding: clamp(28px, 8vw, 44px);
    border: 1px solid rgba(114, 119, 127, 0.18);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
  }

  .company-gate-mark {
    top: 20px;
    right: auto;
    bottom: 20px;
    left: 50%;
    width: clamp(200px, 62vw, 230px);
    opacity: 0.065;
    transform: translateX(-50%);
  }

  .preview-access {
    padding: clamp(28px, 8vw, 44px);
    border: 1px solid rgba(114, 119, 127, 0.18);
    border-radius: 20px;
    background:
      linear-gradient(145deg, rgba(235, 241, 248, 0.94), rgba(242, 246, 250, 0.94));
    box-shadow: var(--shadow-sm);
  }

  .store-badge-link {
    inline-size: auto;
    block-size: var(--store-badge-height);
    padding: 0;
    min-block-size: 44px;
    overflow: hidden;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .pricing-addon {
    grid-template-columns: 1fr;
    margin-top: 14px;
  }

  .pricing-addon > .pricing-features {
    padding-top: 0;
  }

  .origin-panel {
    padding: 18px;
  }

  .shots-viewport {
    scroll-snap-type: x mandatory;
  }

  .shots-carousel {
    display: block;
  }

  .shot-card {
    flex-basis: 100%;
    padding: 0 2px;
    gap: 14px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .shot-frame {
    width: min(100%, clamp(210px, 56vw, 280px));
    margin-inline: auto;
    border: 1px solid rgba(114, 119, 127, 0.24);
    background: rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(20, 38, 56, 0.12);
    overflow: hidden;
  }

  .shot-meta {
    text-align: center;
    justify-items: center;
    padding: 2px 10px 0;
    gap: 8px;
    min-height: 0;
  }

  .shot-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .shot-title {
    font-size: 1.12rem;
    line-height: 1.2;
    min-height: 0;
  }

  .shot-caption {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.96rem;
    line-height: 1.48;
    max-width: 34ch;
    display: block;
    overflow: visible;
  }

  .shots-dots {
    margin-top: 16px;
  }

  .site-footer {
    margin-top: 16px;
    padding: 16px 0 22px;
  }

  .footer-inner {
    font-size: 11px;
  }

  .standard-footer-inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .footer-directory {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 22px;
  }

  .footer-group h2 {
    font-size: 13px;
  }

  .footer-group ul {
    margin-top: 9px;
  }

  .footer-group li + li {
    margin-top: 7px;
  }

  .footer-group a {
    font-size: 11px;
  }

  .footer-boilerplate {
    grid-column: 1;
    grid-row: 2;
    gap: 5px;
    padding-top: 16px;
    font-size: 10px;
    border-top: 1px solid rgba(114, 119, 127, 0.16);
  }

  .prelaunch-footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .footer-company-contact {
    justify-items: start;
    justify-self: start;
    text-align: left;
  }

  .footer-company-contact p {
    white-space: normal;
  }

  #inside-the-app.section {
    padding-top: 30px;
  }

  .legal-wrap {
    margin: 24px auto 48px;
  }

  .legal-tabs[data-tab-count="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .legal-tabs[data-tab-count="1"] a,
  .legal-tabs[data-tab-count="2"] a {
    min-height: 0;
    padding: 10px 16px;
    font-size: 0.88rem;
  }

  .legal-tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    margin-bottom: -1px;
    padding: 8px 2px;
    font-size: clamp(0.72rem, 3vw, 0.78rem);
    line-height: 1.2;
    white-space: normal;
  }

  .legal-tab-label-full {
    display: none;
  }

  .legal-tab-label-short {
    display: inline;
  }

  .section[id] {
    scroll-margin-top: 84px;
  }
}

@media (min-width: 721px) and (max-width: 860px) {
  .shot-card {
    flex-basis: calc((100% - 18px) / 2);
  }
}

@media (min-width: 861px) and (max-width: 1080px) {
  .shot-card {
    flex-basis: calc((100% - 18px) / 2);
  }
}

@media (min-width: 861px) and (max-width: 920px) {
  .section {
    padding: 64px 0;
  }

  .section:first-of-type {
    padding-top: 84px;
  }
}

@media (max-width: 720px) {
  .section[id] {
    scroll-margin-top: 84px;
  }

  /* Long documents get more of the screen: 16px page margins and a
     slimmer card padding. */
  .legal-wrap {
    width: calc(100% - 32px);
  }

  .legal-card {
    --legal-pad: 18px;
  }

  .legal-contact-list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }

  .legal-contact-list div:not(:last-child) dd {
    margin-bottom: 10px;
  }
}

/* Narrow phones (360px wide) fit the language name beside the logo. */
@media (max-width: 380px) {
  .language-selector-trigger,
  .region-selector-trigger {
    gap: 6px;
    padding-inline: 8px;
  }
}

/* ===========================================================================
   Home page refresh, "your story takes shape" (Blair, Oct 2026).
   Photo bands at the top, middle and bottom, calm alternating bands between
   them, soft filled boxes, and the app's Life Graph cards floating beside Jen.
   Blocks fade up every time they come into view, and over the photos the words
   drift a little faster than the picture as you scroll (site.js).
   =========================================================================== */
.home {
  --band-tint: #edf3fa;
  --soft-box: rgba(47, 98, 140, 0.07);
  /* Our deep logo blue (#0e4a73), for fades over photos. */
  --fade-blue: 14, 74, 115;
  /* The sticky header's height (smaller from 860px down): where pinned parts sit. */
  --header-h: 79px;
}

@media (max-width: 860px) {
  .home {
    --header-h: 69px;
  }
}

.home .band {
  padding: clamp(56px, 6.5vw, 88px) 0;
}

.home .band-tint {
  background: var(--band-tint);
}

.home .section-head {
  gap: 12px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.home .section-title {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.home .section-subtitle {
  font-size: clamp(1rem, 1.6vw, 1.12rem);
}

.home .kicker {
  margin: 0;
}

/* Soft filled boxes: tinted on white bands, white on tinted bands. */
.home .panel {
  border: 0;
  box-shadow: none;
  background: var(--soft-box);
}

.home .band-tint .panel {
  background: #fff;
}

.home .pricing-card-featured {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* Pricing fills the screen like the sections around it (so the next one
   never peeks in on a laptop), its plans centred with room to breathe. */
@media (min-width: 721px) {
  .home #pricing {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - var(--header-h));
    box-sizing: border-box;
  }

  .home #pricing .section-head {
    margin-bottom: clamp(36px, 5vw, 60px);
  }

  .home #pricing .pricing-grid {
    gap: 24px;
  }

  .home #pricing .pricing-addon {
    margin-top: 24px;
    column-gap: calc(24px + 2px);
  }

  .home #pricing .pricing-currency-note {
    margin-top: 24px;
  }
}

@media (scripting: enabled) {
  .home #pricing .panel[data-reveal] {
    transform: translateY(44px) scale(0.97);
    transition-delay: calc(var(--i, 0) * 140ms);
  }
}

.home #pricing .panel[data-reveal].is-visible {
  transform: none;
}

.home .pricing-card-featured.is-visible {
  animation: pricing-arrive-glow 1.1s ease-in-out both;
  animation-delay: calc(var(--i, 0) * 140ms + 0.35s);
}

@keyframes pricing-arrive-glow {
  50% {
    box-shadow:
      inset 0 0 0 2px var(--color-primary),
      0 0 26px 1px rgba(47, 98, 140, 0.3),
      0 0 49px 4px rgba(47, 98, 140, 0.18);
  }
}

/* Blocks rise a little further, and cards in a row arrive one after another. */
@media (scripting: enabled) {
  .home [data-reveal] {
    transform: translateY(24px);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
}

.home [data-reveal].is-visible {
  transform: none;
}

.store-row {
  --store-badge-height: clamp(44px, 4.2vw, 54px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Photo bands take the photo's own shape (16:9) on computers, never taller
   than the screen below the header, so heads and cards are never cut off. */
.photo-band {
  position: relative;
  overflow: hidden;
  background: rgb(var(--fade-blue));
  color: #fff;
}

@media (min-width: 721px) {
  .photo-band {
    display: flex;
    align-items: center;
    /* 16:9 of the window width, between 520px and the screen height. */
    height: clamp(520px, 56.25vw, calc(100vh - 72px));
  }
}

.photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(var(--fade-blue), 0.9) 0%,
    rgba(var(--fade-blue), 0.68) 32%,
    rgba(var(--fade-blue), 0.16) 54%,
    rgba(var(--fade-blue), 0) 64%
  );
  pointer-events: none;
}

/* Hero: Jen's photo with the words over the fade on the left. The stage covers
   the band like object-fit: cover, anchored top right where Jen is, so the
   floating cards keep their place beside her at any window size. */
.hero-stage {
  position: absolute;
  top: 0;
  right: 0;
  /* Always the photo's 16:9 shape and at least as big as the band (16:9 of
     the window width, capped at the screen height, never under 520px tall),
     so it covers the band and the cards stay on the photo. */
  width: max(100vw, 924px);
  aspect-ratio: 16 / 9;
  /* The lines' width and flare in screen pixels, as the app's Life map group
     lines (locked Oct 22: Taper, 1.6 wide, flare 1; site.js draws them):
     flare is the extra width where a line meets the logo or a card. */
  --hero-line-width: 1.6;
  --hero-line-flare: 1;
}

/* The hero's fade lives inside the photo's stage, under the lines, logo and
   cards (z-index 2), so the cards stay as white as in the app. */
.hero-band::before {
  content: none;
}

.hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(var(--fade-blue), 0.9) 0%,
    rgba(var(--fade-blue), 0.68) 32%,
    rgba(var(--fade-blue), 0.16) 54%,
    rgba(var(--fade-blue), 0) 64%
  );
  pointer-events: none;
}

.hero-lines,
.hero-node,
.hero-cards {
  z-index: 2;
}

.hero-stage picture,
.hero-photo {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-photo {
  object-fit: cover;
}

.hero-inner,
.closing-inner {
  position: relative;
  z-index: 2;
}

/* The words sit over the photo (and over the logo on tablets), so taps go
   through them to the logo; only the store buttons take them. */
.hero-inner {
  pointer-events: none;
}

.hero-store {
  pointer-events: auto;
}

.hero-text {
  max-width: 540px;
  padding: clamp(48px, 8vh, 96px) 0;
}

.home .hero-title {
  margin: 0 0 18px;
  max-width: 13ch;
  color: #fff;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.home .hero-copy {
  margin: 0 0 28px;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.6;
}

.hero-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Lines as the app's Life map group lines: an even band that flares a little
   where it meets the logo and each card, running on under both to their
   centres so it always meets them flush. A quiet white on the photo (the
   app's faint blue is made for its pale background), so the Trace's light
   is the brightest thing on it, as in the app. */
.hero-line {
  fill: rgba(255, 255, 255, 0.6);
}

/* The app's Trace: as a card glows, a soft wash of light runs once along its
   line from the logo, brightest mid-line: a blurred glow 1.6 times the
   line's width plus three line widths, with a paler light 0.75 of the line
   inside it. Its colours are the app's light-over-dark ones made whiter, to
   show over the photo. site.js moves the wash (the gradients' stops) and
   sets --u, the drawing's units per screen pixel. */
.hero-trace {
  fill: none;
}

.hero-trace-glow {
  stroke-width: calc(4.6px * var(--hero-line-width) * var(--u, 1));
}

.hero-trace-core {
  stroke-width: calc(0.75px * var(--hero-line-width) * var(--u, 1));
}

.hero-trace-wash-glow stop {
  stop-color: #e3f1ff;
}

.hero-trace-wash-core stop {
  stop-color: #fff;
}

.hero-lines-phone {
  display: none;
}

/* Our logo on Jen's phone, where the Life Graph lines start, with the halo the
   app puts round you at the centre of your Life map. */
.hero-node {
  --x: 61%;
  --y: 44%;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: #fff url("/assets/branding/mark_hero_tight.svg") center / auto 62% no-repeat;
  box-shadow:
    0 0 0 1px rgba(194, 199, 207, 0.38),
    0 0 22px 1px rgba(47, 98, 140, 0.35);
  translate: -50% -50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* A bigger target than the logo itself, for fingers. */
.hero-node::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 999px;
}

.hero-cards {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Covers the photo, so taps pass through to the logo. */
  pointer-events: none;
}

/* Life Graph cards copied from the app's Life map group tiles (Oct 2026 tile
   look in Adopl blue): icon top left, count top right, name bottom left, white
   to pale blue with a soft blue lift. Restyle here if the app's tile changes. */
.hero-card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  min-width: 80px;
  max-width: 200px;
  min-height: 88px;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #f4f9ff 100%);
  color: #181c20;
  box-shadow:
    0 8px 26px -2px rgba(47, 98, 140, 0.1),
    0 1px 4.5px rgba(0, 0, 0, 0.05);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  letter-spacing: -0.2px;
  line-height: 1.2;
  /* As wide as its name up to 200px, then the name wraps (never "..."). */
  width: max-content;
  translate: -50% -50%;
}

.hero-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 30px;
}

.hero-card svg {
  width: 30px;
  height: 30px;
  fill: #2f628c;
}

.hero-card-count {
  color: #42474e;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hero-card-label {
  font-size: 18px;
  font-weight: 600;
}

.hero-card-family {
  --x: 54%;
  --y: 16%;
}

.hero-card-friends {
  --x: 90%;
  --y: 46%;
}

.hero-card-memories {
  --x: 51%;
  --y: 63%;
}

/* Each time the photo comes into view (site.js sets is-live), in the app's own
   motion: the logo appears, then each card unfolds from it along its line (the
   app's Unfold, 480 ms with a small overshoot) as the line stretches with it.
   On landing the card gets the app's highlight: a spark runs along its line
   while the card glows and pulses once (800 ms), and its name and count fade
   in (150 ms after landing, over 700 ms). site.js measures --from-x and
   --from-y, the way from the card to the logo. --lead is the wait for the
   logo before the first card leaves it. */
@media (scripting: enabled) {
  .hero-card,
  .hero-node,
  .hero-card-count,
  .hero-card-label {
    opacity: 0;
  }

  /* Each line stretches out from the logo along its own direction (--a). */
  .hero-line {
    transform: rotate(var(--a)) scaleX(0) rotate(calc(-1 * var(--a)));
  }
}

.hero-band {
  --lead: 0.35s;
}

.hero-band.is-live .hero-node {
  animation: hero-node-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.hero-band.is-live .hero-line {
  animation: hero-line-unfold 0.48s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation-delay: calc(var(--lead) + var(--i) * 0.14s);
}


.hero-band.is-live .hero-card {
  animation:
    hero-card-unfold 0.48s cubic-bezier(0.175, 0.885, 0.32, 1.275) both,
    hero-card-show 0.16s linear both,
    hero-card-glow 0.8s ease-in-out both,
    hero-card-pulse 0.38s cubic-bezier(0.645, 0.045, 0.355, 1) both;
  animation-delay:
    calc(var(--lead) + var(--i) * 0.14s),
    calc(var(--lead) + var(--i) * 0.14s),
    calc(var(--lead) + 0.85s + var(--i) * 0.14s),
    calc(var(--lead) + 1.05s + var(--i) * 0.14s);
}

.hero-band.is-live .hero-card-count,
.hero-band.is-live .hero-card-label {
  animation: hero-card-show 0.7s cubic-bezier(0.333, 0, 0.667, 1) both;
  animation-delay: calc(var(--lead) + 0.63s + var(--i) * 0.14s);
}

/* A tap on the logo plays it again (site.js): the logo dips like a pressed
   button while the cards slide back into it and the lines draw in, then the
   cards unfold again, straight away this time. */
@media (hover: hover) {
  .hero-node:hover {
    box-shadow:
      0 0 0 1px rgba(194, 199, 207, 0.38),
      0 0 28px 3px rgba(47, 98, 140, 0.45);
  }
}

.hero-band.is-gathering .hero-node {
  animation: hero-node-press 0.36s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.hero-band.is-gathering .hero-card {
  animation: hero-card-gather 0.3s cubic-bezier(0.55, 0, 0.9, 0.5) both;
}

.hero-band.is-gathering .hero-line {
  animation: hero-line-gather 0.3s cubic-bezier(0.55, 0, 0.9, 0.5) both;
}

.hero-band.is-gathering .hero-card-count,
.hero-band.is-gathering .hero-card-label {
  animation: hero-card-hide 0.12s linear both;
}

.hero-band.is-replay {
  --lead: 0.05s;
}

.hero-band.is-replay .hero-node {
  animation: none;
  opacity: 1;
}

@keyframes hero-node-pop {
  from {
    opacity: 0;
    scale: 0.2;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes hero-node-press {
  from {
    opacity: 1;
  }

  35% {
    scale: 0.9;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes hero-line-unfold {
  from {
    transform: rotate(var(--a)) scaleX(0) rotate(calc(-1 * var(--a)));
  }

  to {
    transform: rotate(var(--a)) scaleX(1) rotate(calc(-1 * var(--a)));
  }
}

@keyframes hero-line-gather {
  from {
    transform: rotate(var(--a)) scaleX(1) rotate(calc(-1 * var(--a)));
  }

  to {
    transform: rotate(var(--a)) scaleX(0) rotate(calc(-1 * var(--a)));
  }
}

@keyframes hero-card-gather {
  from {
    opacity: 1;
    transform: none;
  }

  70% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate(var(--from-x, 0px), var(--from-y, 0px)) scale(0.6);
  }
}

@keyframes hero-card-hide {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes hero-card-unfold {
  from {
    transform: translate(var(--from-x, 0px), var(--from-y, 0px));
  }

  to {
    transform: none;
  }
}

@keyframes hero-card-show {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* The app's tap glow: primary at 0.30 (blur 22, spread 1) with a pulse of
   0.18 more growing to blur 42, spread 4 (Flutter blur r is about 1.15r + 1 px). */
@keyframes hero-card-glow {
  50% {
    box-shadow:
      0 8px 26px -2px rgba(47, 98, 140, 0.1),
      0 1px 4.5px rgba(0, 0, 0, 0.05),
      0 0 26px 1px rgba(47, 98, 140, 0.3),
      0 0 49px 4px rgba(47, 98, 140, 0.18);
  }
}

@keyframes hero-card-pulse {
  50% {
    scale: 1.035;
  }
}

/* Right-to-left pages mirror the photos so the words sit over the open side. */
[dir="rtl"] .hero-stage {
  right: auto;
  left: 0;
}

[dir="rtl"] .hero-photo,
[dir="rtl"] .hero-stage::before,
[dir="rtl"] .hero-lines,
[dir="rtl"] .closing-photo,
[dir="rtl"] .photo-band::before {
  transform: scaleX(-1);
}

[dir="rtl"] .hero-card,
[dir="rtl"] .hero-node {
  left: calc(100% - var(--x));
}

/* "Who is Adopl for?": one story, no boxes or tabs. The photo stays in place
   while each group's words scroll past it; the group crossing the middle of
   the screen lights up and its photo fades in (site.js), so everyone who
   scrolls by meets all four. */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 80px);
}

.story-media {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: var(--header-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: calc(100vh - var(--header-h));
}

.story-photos {
  position: relative;
  /* Room below for the dots. */
  width: min(100%, calc((100vh - var(--header-h) - 120px) * 0.8));
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 22px;
  background: var(--soft-box);
}

.story-photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.story-photo.is-active {
  opacity: 1;
}

.story-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Computers and tablets: the heading never leaves. It stops near the top of
   the screen and stays while the photo slides up under it and the groups'
   words scroll past, then leaves with the photo. site.js sets
   --head-release, the bottom margin that makes it leave then (the story
   below takes the same amount back, so nothing moves). Framed photos keep
   it beside them, over the words' column. Screens too short to leave room
   under it for the words (a phone held sideways) let it scroll away. */
@media (min-width: 721px) and (min-height: 560px) {
  .home #built-for .section-head {
    position: sticky;
    top: calc(var(--header-h) + clamp(20px, 4vh, 40px));
    z-index: 3;
    max-width: calc((100% - clamp(32px, 5vw, 80px)) / 2);
    margin-bottom: var(--head-release, clamp(28px, 4vw, 44px));
  }

  .home #built-for .story {
    margin-top: calc(clamp(28px, 4vw, 44px) - var(--head-release, clamp(28px, 4vw, 44px)));
  }
}

.story-dots {
  display: flex;
  gap: 8px;
}

.story-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(114, 119, 127, 0.36);
  transition: background-color 0.3s ease, width 0.3s ease;
}

.story-dot.is-active {
  width: 22px;
  background: var(--color-primary);
}

.story-steps {
  grid-column: 1;
  grid-row: 1;
  /* The first and last groups line up with the middle of the photo. */
  padding-block: max(0px, calc(22vh - var(--header-h) / 2));
}

.story-step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56vh;
}

@media (scripting: enabled) {
  .story-step:not(.is-active) {
    opacity: 0.2;
  }
}

.story-title {
  margin: 0 0 14px;
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.story-copy {
  margin: 0;
  max-width: 44ch;
  color: var(--color-muted);
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  line-height: 1.65;
}

/* Wide windows: the group's whole wide photo fills the window at full height,
   with the words over its open left side on the same soft blue fade as the top
   photo. Narrower or taller windows keep the framed tall photo (matches the
   <picture> sources). */
@media (min-width: 981px) and (min-aspect-ratio: 8/5) {
  #built-for {
    overflow-x: clip;
  }

  .story {
    grid-template-columns: minmax(0, 1fr);
  }

  .story-media {
    grid-column: 1;
    margin-inline: calc(50% - 50vw);
  }

  .story-photos {
    position: absolute;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
    border-radius: 0;
    background: none;
  }

  .story-photos::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(var(--fade-blue), 0.9) 0%,
      rgba(var(--fade-blue), 0.68) 32%,
      rgba(var(--fade-blue), 0.16) 54%,
      rgba(var(--fade-blue), 0) 64%
    );
  }

  /* Anchored where the people are (the right), so a narrower window trims
     the open room on the left, never a person. */
  .story-photo img {
    object-position: 100% 30%;
  }

  .story-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    translate: -50% 0;
  }

  /* The heading sits over the photo's blue fade, and turns from dark to
     white as the photo slides under it (site.js sets --on-photo, 0 to 1). */
  .home #built-for .section-head {
    max-width: 40rem;
  }

  .home #built-for .section-head .kicker {
    color: color-mix(in srgb, rgb(255 255 255 / 0.82) calc(var(--on-photo, 0) * 100%), var(--color-primary-strong));
  }

  .home #built-for .section-head .section-title {
    color: color-mix(in srgb, #fff calc(var(--on-photo, 0) * 100%), var(--color-text));
  }

  .home #built-for .section-head .section-subtitle {
    color: color-mix(in srgb, rgb(255 255 255 / 0.9) calc(var(--on-photo, 0) * 100%), var(--color-muted));
  }

  .story-dot {
    background: rgba(255, 255, 255, 0.5);
  }

  .story-dot.is-active {
    background: #fff;
  }

  .story-steps {
    position: relative;
    z-index: 1;
    max-width: 400px;
  }

  .story-title {
    color: #fff;
  }

  .story-copy {
    color: rgba(255, 255, 255, 0.9);
  }

  [dir="rtl"] .story-photos::after,
  [dir="rtl"] .story-photo img {
    transform: scaleX(-1);
  }
}

/* How it works and Our story: the heading on the left and the words on the
   right on wide screens, stacked below that. No boxes. */
@media (min-width: 981px) {
  .split-layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }

  .home .split-layout > .section-head {
    position: sticky;
    top: 127px;
    margin-bottom: 0;
  }
}

/* How it works: numbered steps joined by a line that fills in as you read,
   like a branch of the Life Graph (site.js sets each step's --fill and lights
   each number as the line reaches it). */
.steps-path {
  --step-gap: clamp(32px, 4vw, 44px);
  display: grid;
  gap: var(--step-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.path-step {
  position: relative;
  padding-inline-start: 64px;
}

/* The faint line down to the next number, and the blue fill over it. */
.path-step:not(:last-child)::before,
.path-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 19px;
  top: 34px;
  width: 2px;
  height: calc(100% + var(--step-gap) - 40px);
  background: rgba(47, 98, 140, 0.16);
}

.path-step:not(:last-child)::after {
  background: var(--color-primary);
  transform-origin: top;
  transform: scaleY(var(--fill, 1));
}

@media (scripting: enabled) {
  .path-step {
    --fill: 0;
  }
}

.path-number {
  position: absolute;
  inset-inline-start: 0;
  top: -6px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(47, 98, 140, 0.28);
  border-radius: 999px;
  color: var(--color-primary-strong);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.path-step.is-reached .path-number {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.path-title {
  margin: 0 0 10px;
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.path-copy {
  margin: 0;
  max-width: 60ch;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.3vw, 1.08rem);
  line-height: 1.65;
}

/* Screenshots stand on the tinted band without boxes, with room above and
   below for their shadows. */
.home .shots-track {
  padding: 22px 0 28px;
}

.home .shot-card {
  padding: 0;
}

.home .shot-frame {
  box-shadow: 0 18px 30px -16px rgba(20, 38, 56, 0.38);
}

/* Screenshots one at a time (site.js adds is-story when motion is allowed):
   the strip pins under the header for a runway of scrolling, a step per
   screenshot plus a pause on the last, and slides along as the page scrolls.
   The middle screenshot shows its caption; its neighbours fade at the sides. */
.shots-runway.is-story {
  --shot-step: 46vh;
  height: calc(100vh - var(--header-h) + (var(--shot-steps) + 0.35) * var(--shot-step));
}

.shots-runway.is-story .shots-frame {
  position: sticky;
  top: var(--header-h);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h));
}

/* Centred by the margins while everything fits; on short windows it runs
   off the bottom, never up under the pinned heading. */
.shots-runway.is-story .shots-theme-toggle {
  margin-top: auto;
}

.shots-runway.is-story .shots-dots {
  margin-bottom: auto;
}

.shots-runway.is-story .shots-viewport {
  overflow: hidden;
  /* No snapping: the script places the strip. */
  scroll-snap-type: none;
  position: relative;
  padding-block: 16px 6px;
  cursor: auto;
}

/* The sides fade into the band. Painted over the strip in the band's colour,
   not a mask: Safari on Mac, scrolling with the trackpad, could leave the
   moving strip behind inside a mask, frozen while its captions moved on. */
.shots-runway.is-story .shots-viewport::before,
.shots-runway.is-story .shots-viewport::after {
  content: "";
  position: absolute;
  inset-block: 0;
  z-index: 1;
  width: 14%;
  pointer-events: none;
}

.shots-runway.is-story .shots-viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--band-tint), rgb(237 243 250 / 0));
}

.shots-runway.is-story .shots-viewport::after {
  right: 0;
  background: linear-gradient(270deg, var(--band-tint), rgb(237 243 250 / 0));
}

.shots-runway.is-story .shots-track {
  gap: clamp(20px, 3vw, 44px);
  padding: 0;
  will-change: transform;
}

.shots-runway.is-story .shot-card {
  --shot-h: clamp(280px, calc(100vh - var(--header-h) - 300px), 620px);
  flex: 0 0 calc(var(--shot-h) * 1320 / 2868);
  /* The caption may be wider than its screenshot; the screenshot keeps the
     card's width. */
  grid-template-columns: 100%;
}

.shots-runway.is-story .shot-meta {
  width: min(88vw, 460px);
  min-height: 0;
  /* Centred under its screenshot, and wider than it, in either direction. */
  margin-inline: calc(50% - min(44vw, 230px));
  justify-items: center;
  text-align: center;
}

.shots-runway.is-story .shot-title {
  min-height: 0;
}

/* Computers: three screenshots with their captions per step, so the strip
   takes about a third of the scrolling (site.js adds is-trio, and has-trio
   on the section). The heading stays pinned above them like How it works:
   the runway starts under it (--pinned-head, its height, set on the
   section) and the frame keeps that much room at its top. The screenshots
   fill the rest of the screen, across the full window width. The heading
   lets go when the screenshots do, so they never slide up under it: its
   bottom margin is the frame's height less its own, and the runway takes
   that back. */
.home #inside-the-app.has-trio {
  overflow-x: clip;
}

.home #inside-the-app.has-trio > .site-shell > .section-head {
  position: sticky;
  top: var(--header-h);
  z-index: 2;
  margin-bottom: calc(100vh - var(--header-h) - var(--pinned-head, 130px));
  padding-block: 18px 10px;
  background: var(--band-tint);
}

.shots-runway.is-trio {
  --shot-step: 70vh;
  margin-top: calc(var(--header-h) - 100vh);
}

.shots-runway.is-trio .shots-frame {
  padding-top: var(--pinned-head, 130px);
}

.shots-runway.is-trio .shots-viewport {
  margin-inline: calc(50% - 50vw);
}

.shots-runway.is-trio .shot-card {
  --shot-h: clamp(200px, calc(100vh - var(--header-h) - var(--pinned-head, 130px) - 330px), 900px);
}

.shots-runway.is-trio .shot-meta {
  width: calc(100% + 36px);
  margin-inline: -18px;
}

/* Our story: Blair's words as an open quote beside a blue line that fills in
   as you read (site.js sets --fill), no box. */
.home .origin-panel {
  position: relative;
  padding: 0;
  padding-inline-start: clamp(20px, 3vw, 32px);
}

.home .origin-panel::before,
.home .origin-panel::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 3px;
  background: rgba(47, 98, 140, 0.16);
}

.home .origin-panel::after {
  background: var(--color-primary);
  transform-origin: top;
  transform: scaleY(var(--fill, 1));
}

@media (scripting: enabled) {
  .home .origin-panel {
    --fill: 0;
  }

  .home #our-story .origin-panel [data-reveal] {
    transition-delay: calc(0.45s + var(--i, 0) * 120ms);
  }
}

/* The title is seen first: Blair's words wait for it, then follow. Once the
   title has gone up off the screen (site.js adds is-past) they no longer
   wait, so someone reading, or coming back up from below, always sees them. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .home #our-story .section-head:not(.is-visible):not(.is-past) + .origin-panel [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
  }
}

/* Our logo under the title, exactly as it is, fading in as it rises into
   place (site.js sets its opacity; it starts hidden only where script runs
   and motion is welcome). */
.origin-mark {
  display: block;
  align-self: flex-start;
  width: auto;
  height: clamp(120px, 22vh, 210px);
  margin-top: clamp(16px, 3vh, 32px);
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .origin-mark {
    opacity: 0;
  }
}

/* Where the title sits above Blair's words (phones and tablets), the logo is
   a pause between them, centred; beside them (computers) it lines up under
   the title. */
@media (max-width: 980px) {
  .origin-mark {
    align-self: center;
  }
}

.home .origin-quote p {
  color: var(--color-text);
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  line-height: 1.7;
}

.home .origin-attribution {
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}

/* Closing band: Jen and Theo on the trail, the call to action over the sky.
   The photo has a margin above and below so it can drift without gaps. */
.closing-picture {
  position: absolute;
  inset: -70px 0;
}

.closing-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 22%;
}

.closing-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 520px;
  padding: 72px 0;
}

.closing-band .kicker {
  color: #fff;
}

.closing-band .section-title {
  margin: 0 0 8px;
  color: #fff;
}

.closing-band .cta-app-icon {
  width: 64px;
  height: 64px;
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Phones: photos run the full width with the words below them on the light
   page, the groups' photo stays pinned above their words, and the closing is
   centred. */
@media (max-width: 720px) {
  .photo-band {
    background: transparent;
    color: inherit;
  }

  .photo-band::before,
  .hero-stage::before {
    display: none;
  }

  .hero-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
  }

  .hero-lines-wide {
    display: none;
  }

  .hero-lines-phone {
    display: block;
  }

  .hero-node {
    --x: 27%;
    width: 40px;
    height: 40px;
  }

  /* The same tile at about three quarters size, as the photo is smaller. */
  .hero-card {
    gap: 8px;
    min-width: 62px;
    min-height: 68px;
    padding: 9px;
    border-radius: 14px;
  }

  .hero-card-top {
    gap: 8px;
    height: 23px;
  }

  .hero-card svg {
    width: 23px;
    height: 23px;
  }

  .hero-card-label {
    font-size: 14px;
  }

  .hero-card-count {
    font-size: 13px;
  }

  /* The app's line at the same three-quarter scale as the tiles. */
  .hero-stage {
    --hero-line-width: 1.3;
    --hero-line-flare: 0.8;
  }

  .hero-card-family {
    --x: 20%;
    --y: 14%;
  }

  .hero-card-friends {
    --x: 84%;
    --y: 44%;
  }

  .hero-card-memories {
    --x: 72%;
    --y: 70%;
  }

  .hero-text {
    max-width: none;
    padding: 28px 0 44px;
  }

  .home .hero-title {
    color: var(--color-text);
  }

  .home .hero-copy {
    color: var(--color-muted);
  }

  .shots-runway.is-story {
    --shot-step: 40svh;
    height: calc(100svh - var(--header-h) + (var(--shot-steps) + 0.35) * var(--shot-step));
  }

  .shots-runway.is-story .shots-frame {
    height: calc(100svh - var(--header-h));
  }

  .shots-runway.is-story .shots-viewport {
    margin-inline: -14px;
  }

  .shots-runway.is-story .shot-card {
    --shot-h: clamp(250px, calc(100svh - var(--header-h) - 300px), 560px);
  }

  /* The title "Made for people like you." stays pinned under the header on
     the page's own background, with the photo pinned right below it; the
     words scroll up beneath the photo, slipping under its lower edge through
     a short fade. site.js sets --story-title-h (the pinned title's height)
     and --title-release (the margin that makes the title leave with the
     photo; the line below takes it back, so nothing moves). */
  .home #built-for .section-head {
    display: contents;
  }

  .home #built-for .section-head .kicker {
    margin-bottom: 0;
  }

  .home #built-for .section-head .section-title {
    position: sticky;
    top: var(--header-h);
    z-index: 2;
    margin: 0 -14px var(--title-release, 0px);
    padding: 14px;
    background: #f3f6fc;
  }

  .home #built-for .section-head .section-subtitle {
    margin: calc(0px - var(--title-release, 0px)) 0 clamp(28px, 4vw, 44px);
  }

  .story {
    display: block;
  }

  /* Full width: out through the page's 14px side margins. */
  .story-media {
    z-index: 1;
    top: calc(var(--header-h) + var(--story-title-h, 0px));
    gap: 0;
    height: auto;
    margin-inline: -14px;
  }

  .story-media::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 28px;
    background: linear-gradient(#f3f6fc, rgba(243, 246, 252, 0));
    pointer-events: none;
  }

  .story-photos {
    width: 100%;
    height: max(220px, min(46svh, 100vw));
    aspect-ratio: auto;
    border-radius: 0;
  }

  .story-photo img {
    object-position: var(--focus, 50% 25%);
  }

  .story-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    translate: -50% 0;
  }

  .story-dot {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  }

  .story-dot.is-active {
    background: #fff;
  }

  .story-steps {
    padding-block: 0;
  }

  .story-step {
    min-height: 40svh;
    padding-block: 20px;
    transition: opacity 0.5s ease;
  }

  .closing-picture {
    position: relative;
    inset: auto;
    display: block;
  }

  .closing-photo {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .closing-text {
    align-items: center;
    max-width: none;
    padding: 32px 0 56px;
    text-align: center;
  }

  .closing-band .kicker {
    color: var(--color-primary-strong);
  }

  .closing-band .section-title {
    color: var(--color-text);
  }

  .store-row {
    justify-content: flex-start;
  }

  .closing-band .store-row {
    justify-content: center;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .hero-band.is-live .hero-node,
  .hero-band.is-live .hero-line,
  .hero-band.is-live .hero-card,
  .hero-band.is-live .hero-card-count,
  .hero-band.is-live .hero-card-label {
    animation-delay: 0s;
  }
}