/* ==========================================================================
   Adease landing page
   Single stylesheet, no build step. Design tokens first, then page sections,
   then the app-window mockups ("shots"), then responsive rules.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Ink */
  --ink: #0f1b3d;
  --ink-2: #55618a;
  --muted: #8b95b2;
  --faint: #b4bcd1;

  /* Lines & surfaces */
  --line: #e4e8f2;
  --line-2: #d7dde9;
  --bg: #f6f7fb;
  --panel: #fbfcfe;
  --wash: #f1f3f9;
  --white: #fff;

  /* Brand */
  --blue: #2b5ef6;
  --blue-dark: #1f4ad1;
  --blue-hover: #4276f7;
  --blue-tint: #f1f5fe;
  --blue-line: #c3d4fd;
  --blue-soft: #6b93f9;

  /* Status */
  --green: #0f9d6e;
  --green-ink: #0b7a56;
  --green-tint: #e7f7f1;
  --amber: #c77700;
  --amber-tint: #fff6e6;
  --red: #b02a38;
  --red-tint: #fdecee;
  --red-line: #f5c6cb;
  --teal: #12b5a6;
  --gold: #f5a623;

  /* Dark bands */
  --deep: #0f1b3d;
  --deepest: #0b1738;
  --deep-line: #3a4874;
  --deep-ink: #e9edfa;

  /* Brand navy + the hero's animated palette, taken from the app icon */
  --navy: #0a1230;
  --navy-deep: #070d20;
  --navy-lift: #0f1f4d;
  --electric: #1e5bf0;
  --cyan: #22b8f0;
  --indigo: #3b2ce0;
  --on-navy: #ffffff;
  --on-navy-2: #b6c4e2;
  --on-navy-3: #93a4cd;

  /* Type */
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shadow: 0 8px 40px rgba(15, 27, 61, 0.1);
  --page: 1200px;
  --content: 1160px;
  --gutter: 40px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Keeps the footer at the bottom on short pages such as 404 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
}

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

a {
  color: var(--blue);
  text-decoration: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:where(a, .btn):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Sprite host — icons are referenced with <use>, never rendered directly. */
.sprite {
  display: none;
}

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

/* `hidden` is only a `display: none` default, so any element that sets its own
   display — every .btn and .build below — ignores it. The Windows download
   buttons ship hidden until a Windows build exists, so this has to hold. */
[hidden] {
  display: none !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font: 700 14.5px var(--sans);
  padding: 13px 22px;
  border-radius: 9px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

/* Platform glyph inside a download button */
.btn__icon {
  width: 17px;
  height: 17px;
  flex: none;
  /* the Apple mark's optical centre sits low */
  margin-top: -2px;
}

.btn--sm .btn__icon {
  width: 15px;
  height: 15px;
}

.btn--primary {
  background: var(--blue);
  color: var(--white);
}

.btn--primary:hover {
  background: var(--blue-dark);
  color: var(--white);
}

.btn--outline {
  background: var(--white);
  border-color: var(--line-2);
  color: var(--ink);
}

.btn--outline:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.btn--sm {
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 8px;
}

/* On the dark closing band */
.btn--on-dark.btn--primary:hover {
  background: var(--blue-hover);
}

.btn--on-dark.btn--outline {
  background: transparent;
  border-color: var(--deep-line);
  color: var(--deep-ink);
}

.btn--on-dark.btn--outline:hover {
  border-color: var(--muted);
  color: var(--white);
}

.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

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

/* Fixed, and transparent until you scroll — it sits over the dark hero, so the
   white wordmark reads without a plate behind it. Once the page moves, the bar
   fills in with translucent navy so the logo keeps its dark backdrop over the
   light content below. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.28s ease, border-color 0.28s ease;
}

.site-header.is-stuck {
  background: rgba(10, 18, 48, 0.74);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.09);
}

.site-header__inner {
  max-width: var(--page);
  margin: 0 auto;
  height: 64px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
}

.brand img {
  height: 26px;
  width: auto;
}

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

.eyebrow {
  font: 600 10.5px var(--mono);
  letter-spacing: 1.05px;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Hero — dark, with a slow branded colour field behind it.
   `isolation: isolate` lets .hero__bg sit at z-index -1: above the hero's own
   background colour, below its content, with no z-index on the content itself.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  /* 64px clears the fixed header, then the design's own 76px */
  padding: 140px var(--gutter) 0;
  text-align: center;
}

.hero .eyebrow {
  color: var(--on-navy-3);
}

.hero__title {
  margin: 16px auto 0;
  max-width: 820px;
  font: 800 60px/1.02 var(--sans);
  letter-spacing: -2.6px;
  color: var(--on-navy);
  text-wrap: balance;
}

.hero__sub {
  margin: 20px auto 0;
  max-width: 600px;
  font: 400 17px/1.65 var(--sans);
  color: var(--on-navy-2);
  text-wrap: pretty;
}

.hero .cta-row {
  margin-top: 30px;
}

.hero__meta {
  margin: 14px 0 0;
  font: 500 11.5px var(--mono);
  color: var(--on-navy-3);
}

.hero__shot {
  max-width: var(--page);
  margin: 48px auto 0;
  text-align: left;
}

/* The product window has to hold its own against the dark field */
.hero__shot .win {
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.14),
    0 40px 90px rgba(0, 0, 0, 0.55);
}

/* Shorter variant for the 404 page, which has no product shot */
.hero--compact {
  padding-bottom: 96px;
}

/* --- The colour field --- */

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Only `transform` animates, so each blurred blob is rasterised once and then
   just moved by the compositor. */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform;
}

.blob--1 {
  width: 820px;
  height: 820px;
  top: -300px;
  left: -180px;
  background: var(--electric);
  opacity: 0.4;
  animation: drift-a 26s ease-in-out infinite alternate;
}

.blob--2 {
  width: 640px;
  height: 640px;
  top: -200px;
  right: -140px;
  background: var(--cyan);
  opacity: 0.26;
  animation: drift-b 32s ease-in-out infinite alternate;
}

.blob--3 {
  width: 720px;
  height: 720px;
  top: 120px;
  left: 42%;
  background: var(--indigo);
  opacity: 0.3;
  animation: drift-c 38s ease-in-out infinite alternate;
}

.blob--4 {
  width: 520px;
  height: 520px;
  top: 260px;
  left: 8%;
  background: var(--cyan);
  opacity: 0.15;
  animation: drift-d 30s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(180px, 90px, 0) scale(1.2);
  }
}

@keyframes drift-b {
  from {
    transform: translate3d(0, 0, 0) scale(1.15);
  }
  to {
    transform: translate3d(-160px, 120px, 0) scale(0.9);
  }
}

@keyframes drift-c {
  from {
    transform: translate3d(0, 0, 0) scale(0.9);
  }
  to {
    transform: translate3d(-220px, -80px, 0) scale(1.25);
  }
}

@keyframes drift-d {
  from {
    transform: translate3d(0, 0, 0) scale(1.1);
  }
  to {
    transform: translate3d(200px, -60px, 0) scale(0.85);
  }
}

/* Faint product-grid texture, faded out at the edges */
.hero__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(
    ellipse 75% 60% at 50% 28%,
    #000 35%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 75% 60% at 50% 28%,
    #000 35%,
    transparent 100%
  );
}

/* Holds a contrast floor under the copy no matter where the blobs drift:
   vignettes the edges and darkens the strip behind the header. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse 85% 65% at 50% 42%,
      rgba(7, 13, 32, 0) 0%,
      rgba(7, 13, 32, 0.5) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(7, 13, 32, 0.5),
      rgba(7, 13, 32, 0) 26%
    );
}

/* --- Floating platform marks ---
   Decorative tiles in the hero margins. They sit above the scrim so the logos
   stay bright, and below .hero__fade so any that drift low are covered before
   they reach the product window. Positions keep clear of the centre text
   column; only `transform` animates. */

.orbit {
  position: absolute;
  inset: 0;
}

.orbit__tile {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 27%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 38px rgba(3, 8, 25, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  will-change: transform;
}

.orbit__tile img {
  width: 54%;
  height: auto;
}

.orbit__tile--1 {
  left: 2.5%;
  top: 96px;
  width: 62px;
  height: 62px;
  opacity: 0.72;
  animation: float-a 17s ease-in-out infinite alternate;
}

.orbit__tile--2 {
  left: 11%;
  top: 250px;
  width: 46px;
  height: 46px;
  opacity: 0.5;
  animation: float-b 21s ease-in-out infinite alternate;
}

.orbit__tile--3 {
  left: 5%;
  top: 336px;
  width: 54px;
  height: 54px;
  opacity: 0.62;
  animation: float-c 15s ease-in-out infinite alternate;
}

.orbit__tile--4 {
  right: 3%;
  top: 118px;
  width: 58px;
  height: 58px;
  opacity: 0.7;
  animation: float-b 19s ease-in-out infinite alternate;
}

.orbit__tile--5 {
  right: 11.5%;
  top: 268px;
  width: 44px;
  height: 44px;
  opacity: 0.48;
  animation: float-c 23s ease-in-out infinite alternate;
}

.orbit__tile--6 {
  right: 5.5%;
  top: 344px;
  width: 60px;
  height: 60px;
  opacity: 0.66;
  animation: float-a 14s ease-in-out infinite alternate;
}

@keyframes float-a {
  from {
    transform: translate3d(0, 0, 0) rotate(-5deg);
  }
  to {
    transform: translate3d(12px, -28px, 0) rotate(4deg);
  }
}

@keyframes float-b {
  from {
    transform: translate3d(0, -18px, 0) rotate(6deg);
  }
  to {
    transform: translate3d(-14px, 16px, 0) rotate(-4deg);
  }
}

@keyframes float-c {
  from {
    transform: translate3d(-8px, 10px, 0) rotate(3deg);
  }
  to {
    transform: translate3d(10px, -22px, 0) rotate(-6deg);
  }
}

/* Settles the colour back to flat navy behind the product window */
.hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(10, 18, 48, 0), var(--navy) 82%);
}

@media (prefers-reduced-motion: reduce) {
  .blob,
  .orbit__tile {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Logo strip
   -------------------------------------------------------------------------- */

/* No top border — the hero's dark field is the separator now */
.logos {
  background: var(--white);
  padding: 26px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}

.logos img {
  height: 22px;
  width: auto;
  opacity: 0.8;
  filter: grayscale(1);
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.logos img:hover {
  opacity: 1;
  filter: none;
}

/* --------------------------------------------------------------------------
   Feature sections
   -------------------------------------------------------------------------- */

.section {
  padding: 72px var(--gutter) 0;
}

.section__head {
  max-width: var(--content);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.section__head h2 {
  max-width: 540px;
  font: 800 34px/1.12 var(--sans);
  letter-spacing: -1.3px;
  color: var(--ink);
}

.section__head p {
  max-width: 400px;
  font: 400 15px/1.6 var(--sans);
  color: var(--ink-2);
}

.section__shot {
  max-width: var(--content);
  margin: 30px auto 0;
}

/* Three plain cards */
.pillars {
  padding: 72px var(--gutter);
}

.pillars__grid {
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pillar {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  padding: 22px;
}

.pillar h3 {
  font: 700 16px var(--sans);
  color: var(--ink);
}

.pillar p {
  margin-top: 8px;
  font: 400 13.5px/1.6 var(--sans);
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Data Privacy & Transparency section
   -------------------------------------------------------------------------- */

.section--release,
.section--pricing {
  padding-bottom: 72px;
}

.section--pricing {
  background: var(--white);
}

/* Shared wrapper for section content that isn't an app mockup */
.section__body {
  max-width: var(--content);
  margin: 30px auto 0;
}

/* --------------------------------------------------------------------------
   Where-the-data-lives table
   -------------------------------------------------------------------------- */

.specs__list {
  max-width: var(--content);
  margin: 24px auto 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.specs__row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 13px 16px;
  background: var(--white);
}

.specs__row + .specs__row {
  border-top: 1px solid var(--line);
}

.specs__row dt {
  flex: none;
  width: 260px;
  font: 600 10.5px var(--mono);
  letter-spacing: 1.05px;
  text-transform: uppercase;
  color: var(--muted);
}

.specs__row dd {
  margin: 0;
  font: 500 13.5px var(--mono);
  color: var(--ink);
}

/* "Never" is the reassuring answer here, so it reads in brand blue —
   red is reserved for rejected actions and destructive controls. */
.specs__row--strong {
  background: var(--blue-tint);
}

.specs__row--strong dt,
.specs__row--strong dd {
  color: var(--blue-dark);
}

.specs__row--strong dd {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Current release
   -------------------------------------------------------------------------- */

.release {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  overflow: hidden;
}

.release__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.release__version {
  font: 700 17px var(--mono);
  letter-spacing: -0.4px;
  color: var(--ink);
}

.release__date {
  font: 500 11.5px var(--mono);
  color: var(--muted);
}

.build {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
}

/* Second platform row (Windows) needs its own rule off the first. */
.build + .build {
  border-top: 1px solid var(--line);
}

.build__os {
  font: 700 14px var(--sans);
  color: var(--ink);
}

.build__arch,
.build__req {
  font: 500 12px var(--mono);
  color: var(--ink-2);
}

.build__req {
  color: var(--muted);
}

.build__cta {
  justify-self: end;
}

.release__verify {
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  font: 400 12.5px/1.6 var(--sans);
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 780px;
  margin: 0 auto;
}

.plan {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  padding: 26px 24px;
}

.plan--featured {
  border-color: var(--blue-line);
  box-shadow: 0 12px 32px rgba(43, 94, 246, 0.1);
}

.plan__name {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 700 15px var(--sans);
  color: var(--ink);
}

.plan__badge {
  font: 600 9.5px var(--mono);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-tint);
  border-radius: 5px;
  padding: 3px 7px;
}

.plan__price {
  margin-top: 14px;
}

.plan__amount {
  font: 800 40px/1 var(--sans);
  letter-spacing: -1.8px;
  color: var(--ink);
}

.plan__cadence {
  margin-top: 6px;
  font: 500 11.5px var(--mono);
  color: var(--muted);
}

.plan__list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.plan__list li {
  position: relative;
  padding-left: 20px;
  font: 400 13.5px/1.55 var(--sans);
  color: var(--ink-2);
}

.plan__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--blue);
}

.plan__list strong {
  color: var(--ink);
  font-weight: 600;
}

.plan__cta {
  margin-top: 22px;
  width: 100%;
}

@media (max-width: 1000px) {
  .build {
    grid-template-columns: 110px minmax(0, 1fr) auto;
  }

  .build__req {
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .specs__row {
    flex-direction: column;
    gap: 4px;
  }

  .specs__row dt {
    width: auto;
  }

  .build {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  /* undo the two-column packing from the 1000px breakpoint */
  .build__req {
    grid-column: auto;
  }

  .build__cta {
    justify-self: stretch;
    margin-top: 10px;
  }

  .plans {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Document pages (privacy, terms, security, support)
   -------------------------------------------------------------------------- */

.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px var(--gutter) 88px;
}

.doc h2 {
  margin-top: 44px;
  font: 800 22px/1.25 var(--sans);
  letter-spacing: -0.7px;
  color: var(--ink);
}

.doc h2:first-child {
  margin-top: 0;
}

.doc h3 {
  margin-top: 28px;
  font: 700 15.5px var(--sans);
  color: var(--ink);
}

.doc p,
.doc li {
  font: 400 15px/1.7 var(--sans);
  color: var(--ink-2);
}

.doc p {
  margin-top: 14px;
}

.doc ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.doc ul li {
  position: relative;
  padding-left: 20px;
}

.doc ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--blue);
  opacity: 0.55;
}

.doc strong {
  color: var(--ink);
  font-weight: 600;
}

/* Callout for the "read this first" note at the top of each policy */
.doc__note {
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  background: var(--white);
}

.doc__note p {
  margin-top: 0;
  font-size: 14px;
}

.doc__updated {
  font: 500 11.5px var(--mono);
  color: var(--muted);
}

/* Contact / summary rows, reusing the specs table language */
.doc .specs__list {
  margin-top: 18px;
}

.doc .specs__row dt {
  width: 190px;
}

@media (max-width: 640px) {
  .doc {
    padding: 44px var(--gutter) 64px;
  }

  .doc h2 {
    font-size: 20px;
  }
}

/* --------------------------------------------------------------------------
   Closing CTA + footer
   -------------------------------------------------------------------------- */

.closing {
  background: var(--deep);
  padding: 72px var(--gutter);
  text-align: center;
  scroll-margin-top: 64px;
}

.closing h2 {
  margin: 0 auto;
  max-width: 600px;
  font: 800 38px/1.1 var(--sans);
  letter-spacing: -1.6px;
  color: var(--white);
  text-wrap: balance;
}

.closing .cta-row {
  margin-top: 26px;
}

.closing__meta {
  margin: 16px 0 0;
  font: 500 11.5px var(--mono);
  color: var(--muted);
}

.site-footer {
  background: var(--deepest);
  padding: 22px var(--gutter);
}

.site-footer__inner {
  max-width: var(--content);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.site-footer__name {
  font: 700 13px var(--sans);
  color: var(--muted);
}

.site-footer nav {
  display: flex;
  gap: 18px;
  font: 500 12px var(--sans);
  flex-wrap: wrap;
}

.site-footer nav a {
  color: var(--muted);
}

.site-footer nav a:hover {
  color: var(--deep-ink);
}

/* ==========================================================================
   App window mockups
   Each shot is laid out at a fixed pixel width so the dense UI keeps its
   proportions, then scaled down to fit its container by app.js (CSS `zoom`,
   which participates in layout so the height follows automatically).
   Without JS the wrapper just scrolls horizontally.
   ========================================================================== */

.shot-fit {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.shot {
  width: var(--shot-w, 1160px);
  transform-origin: top left;
}

.shot--hero {
  --shot-w: 1200px;
}

.win {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Hero window is cropped by the section edge: top corners only, no base. */
.win--cropped {
  border-radius: 14px 14px 0 0;
  border-bottom: none;
}

/* --- Title bar --- */

.titlebar {
  height: 38px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
}

.titlebar__dots {
  display: flex;
  gap: 7px;
  flex: none;
}

.titlebar__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.titlebar__dots span:nth-child(1) {
  background: #ff5f57;
}
.titlebar__dots span:nth-child(2) {
  background: #febc2e;
}
.titlebar__dots span:nth-child(3) {
  background: #28c840;
}

.titlebar__path {
  font: 500 11.5px var(--mono);
  color: var(--ink-2);
  white-space: nowrap;
}

.titlebar__spacer {
  flex: 1;
  display: flex;
  justify-content: center;
}

.titlebar__search {
  width: 320px;
  height: 22px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--white);
  display: flex;
  align-items: center;
  padding: 0 9px;
  font: 400 11px var(--mono);
  color: var(--muted);
}

.titlebar__search span {
  margin-left: auto;
}

.titlebar__status {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 11px var(--mono);
  color: var(--muted);
  white-space: nowrap;
}

.titlebar__status b {
  color: var(--blue);
  font-weight: 600;
}

/* --- Window body --- */

.win__body {
  display: flex;
}

.win__body--tall {
  height: 600px;
}

/* --- Icon rail --- */

.rail {
  width: 48px;
  flex: none;
  border-right: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 4px;
}

.rail__btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.rail__btn.is-active {
  background: var(--blue-tint);
  color: var(--blue);
}

.rail__btn svg {
  width: 17px;
  height: 17px;
}

.rail__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* --- Left sidebars --- */

.side {
  width: 200px;
  flex: none;
  border-right: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-direction: column;
}

.side__org {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font: 700 12.5px var(--sans);
  color: var(--ink);
}

.side__org .avatar {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--ink);
  color: var(--white);
  font: 700 9px var(--sans);
  display: grid;
  place-items: center;
  flex: none;
}

.side__org .caret {
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
}

.side__label {
  display: flex;
  align-items: center;
  padding: 10px 14px 6px;
  font: 600 10.5px var(--mono);
  letter-spacing: 1.05px;
  text-transform: uppercase;
  color: var(--muted);
}

.side__label .add {
  margin-left: auto;
  font: 500 13px var(--mono);
}

.side__list {
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.side__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  font: 500 12.5px var(--sans);
  color: var(--ink-2);
}

.side__item.is-active {
  background: var(--blue-tint);
  font-weight: 600;
  color: var(--ink);
}

.side__item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.dot--green {
  background: var(--green);
}

.dot--amber {
  background: var(--amber);
}

.side__sub {
  padding: 2px 0 2px 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: 400 11.5px var(--sans);
  color: var(--ink-2);
}

.side__sub span {
  padding: 4px 6px;
  border-radius: 6px;
}

.side__sub .is-active {
  background: var(--wash);
  color: var(--ink);
}

.side__user {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 11.5px var(--sans);
  color: var(--ink-2);
}

.side__user .avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--wash);
  border: 1px solid var(--line);
  font: 700 9px var(--sans);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  flex: none;
}

/* Narrow secondary nav (Settings / Reports) */
.subnav {
  width: 180px;
  flex: none;
  border-right: 1px solid var(--line);
  background: var(--panel);
  padding: 14px 10px;
}

.subnav__label {
  display: flex;
  align-items: center;
  padding: 0 6px 10px;
  font: 600 10.5px var(--mono);
  letter-spacing: 1.05px;
  text-transform: uppercase;
  color: var(--muted);
}

.subnav__label .add {
  margin-left: auto;
  font: 500 13px var(--mono);
}

.subnav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.subnav__list span {
  padding: 7px 10px;
  border-radius: 7px;
  font: 500 12px var(--sans);
  color: var(--ink-2);
}

.subnav__list .is-active {
  background: var(--wash);
  font-weight: 600;
  color: var(--ink);
}

.subnav--reports .subnav__list span {
  padding: 8px 9px;
  font-size: 11.5px;
}

/* --- Main pane --- */

.main {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.main--flush {
  padding: 16px 18px;
  gap: 12px;
}

.main--settings {
  padding: 22px 24px;
}

.main__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.main__title {
  font: 800 19px var(--sans);
  letter-spacing: -0.6px;
  color: var(--ink);
}

/* --- Reusable in-app chrome --- */

.chip {
  font: 600 11.5px var(--sans);
  color: var(--ink-2);
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 7px;
  padding: 6px 11px;
  white-space: nowrap;
}

.chip--primary {
  color: var(--white);
  background: var(--blue);
  border-color: var(--blue);
}

.chip-row {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.seg {
  display: flex;
  gap: 2px;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  font: 600 11.5px var(--sans);
  color: var(--ink-2);
}

.seg span {
  padding: 5px 11px;
  border-radius: 6px;
  white-space: nowrap;
}

.seg .is-active {
  background: var(--white);
  color: var(--ink);
}

.field {
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: var(--white);
  padding: 6px 9px;
  font: 400 11.5px var(--sans);
  color: var(--muted);
}

.field--search {
  margin-left: auto;
  width: 190px;
  flex: none;
}

.filters {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tag {
  font: 600 9.5px var(--mono);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 3px 7px;
  white-space: nowrap;
}

.tag--ok {
  color: var(--green-ink);
  background: var(--green-tint);
}

.tag--warn {
  color: var(--amber);
  background: var(--amber-tint);
}

.tag--idle {
  color: var(--ink-2);
  background: var(--wash);
}

.tile {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  padding: 12px 14px;
}

.tile__k {
  font: 600 10.5px var(--mono);
  letter-spacing: 1.05px;
  text-transform: uppercase;
  color: var(--muted);
}

.tile__v {
  margin-top: 6px;
  font: 600 22px var(--mono);
  letter-spacing: -0.8px;
  color: var(--ink);
}

.tile__s {
  font: 500 10.5px var(--mono);
  color: var(--muted);
}

.stat-row {
  display: flex;
  gap: 10px;
}

.stat-row .tile {
  flex: 1;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.quick {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  padding: 11px 13px;
}

.quick strong {
  display: block;
  font: 700 12.5px var(--sans);
  color: var(--ink);
}

.quick span {
  display: block;
  margin-top: 2px;
  font: 400 11.5px var(--sans);
  color: var(--ink-2);
}

.panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  padding: 12px 14px;
}

.panel__head {
  display: flex;
  align-items: center;
  font: 700 12.5px var(--sans);
  color: var(--ink);
}

.panel__head .link {
  margin-left: auto;
  font: 600 11px var(--sans);
  color: var(--blue);
}

.conn-logos {
  margin-top: 9px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.conn-logos img {
  height: 17px;
  width: auto;
}

.conn-logos .count {
  margin-left: auto;
  font: 500 10.5px var(--mono);
  color: var(--muted);
}

.meter {
  margin-top: 11px;
  display: flex;
  gap: 4px;
}

.meter i {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: #e9edf5;
}

.meter i.on {
  background: var(--blue);
}

.meter-note {
  margin-top: 7px;
  font: 500 10.5px var(--mono);
  color: var(--muted);
}

/* --- Approvals callout --- */

.approvals {
  border: 1px solid var(--blue-line);
  border-radius: 10px;
  background: var(--white);
  padding: 14px;
}

.approvals__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.approvals__head strong {
  font: 700 13.5px var(--sans);
  color: var(--ink);
}

.approvals__count {
  font: 600 10.5px var(--mono);
  color: var(--amber);
  background: var(--amber-tint);
  border-radius: 5px;
  padding: 3px 7px;
}

.approvals__list {
  margin-top: 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 500 11.5px var(--mono);
  color: var(--ink);
}

.approvals__list div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.approvals__list .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  flex: none;
}

.approvals__list time {
  margin-left: auto;
  color: var(--muted);
}

.approvals__note {
  margin-top: 10px;
  font: 400 11.5px/1.5 var(--sans);
  color: var(--ink-2);
}

/* --- Agent dock --- */

.dock {
  width: 320px;
  flex: none;
  border-left: 1px solid var(--line);
  background: var(--white);
  display: flex;
  flex-direction: column;
}

.dock__tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 4px;
  border-bottom: 1px solid var(--line);
  font: 700 11.5px var(--sans);
  color: var(--ink-2);
}

.dock__tabs span {
  padding: 6px 8px;
}

.dock__tabs .is-active {
  color: var(--blue);
  background: var(--blue-tint);
  border-radius: 7px;
}

.dock__tabs .badge {
  font: 600 10px var(--mono);
  color: var(--amber);
  padding: 0;
}

.dock__body {
  flex: 1;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.bubble {
  align-self: flex-end;
  max-width: 85%;
  background: var(--blue-tint);
  border: 1px solid var(--blue-line);
  border-radius: 9px;
  padding: 8px 11px;
  font: 400 12.5px/1.5 var(--sans);
  color: var(--ink);
}

.turn {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tool-calls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 500 10.5px var(--mono);
  color: var(--ink-2);
}

.tool-calls .ok {
  color: var(--green);
}

.tool-calls .ms {
  color: var(--faint);
}

.turn__text {
  font: 400 12.5px/1.55 var(--sans);
  color: var(--ink);
}

.turn__status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}

.turn__status strong {
  font: 700 11px var(--sans);
  color: var(--amber);
}

.turn__status .of {
  font: 500 10.5px var(--mono);
  color: var(--muted);
}

.turn__status .collapse {
  margin-left: auto;
  font: 600 10.5px var(--sans);
  color: var(--ink-2);
}

/* Proposal / diff card */
.proposal {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  overflow: hidden;
}

.proposal__head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.proposal__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.proposal__meta .kind {
  font: 600 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
}

.proposal__meta .conf {
  margin-left: auto;
  font: 600 10px var(--mono);
  color: var(--green);
}

.proposal__name {
  margin-top: 8px;
  font: 700 13px/1.35 var(--sans);
  color: var(--ink);
}

.diff {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 5px;
  font: 500 11px var(--mono);
}

.diff__row {
  display: flex;
  gap: 8px;
}

.diff__key {
  width: 88px;
  flex: none;
  color: var(--muted);
}

.diff__del {
  color: var(--red);
  background: var(--red-tint);
  padding: 0 5px;
  border-radius: 3px;
}

.diff__add {
  color: var(--green-ink);
  background: var(--green-tint);
  padding: 0 5px;
  border-radius: 3px;
}

.diff__same {
  color: var(--ink-2);
}

.proposal__foot {
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.proposal__foot .rev {
  font: 500 10.5px var(--mono);
  color: var(--muted);
}

.proposal__foot .actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.proposal__foot .reject {
  font: 600 11.5px var(--sans);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
}

.proposal__foot .approve {
  font: 600 11.5px var(--sans);
  color: var(--white);
  background: var(--blue);
  border-radius: 6px;
  padding: 5px 13px;
}

.dock__composer {
  border-top: 1px solid var(--line);
  padding: 10px 12px;
}

.dock__input {
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--white);
  padding: 8px 10px;
  font: 400 12px var(--sans);
  color: var(--muted);
}

.dock__opts {
  margin-top: 7px;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 10.5px var(--mono);
  color: var(--muted);
}

.dock__opts span {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
}

.dock__opts .hint {
  margin-left: auto;
  border: none;
  padding: 0;
}

/* --- Campaigns table --- */

.table {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  overflow: hidden;
}

.table__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 92px 92px 86px 76px 66px 72px 80px;
  align-items: center;
}

.table__head {
  background: var(--wash);
  font: 600 10px var(--mono);
  letter-spacing: 0.6px;
  color: var(--muted);
  text-transform: uppercase;
}

.table__head > * {
  padding: 9px 10px;
}

.table__body .table__row {
  border-top: 1px solid var(--line);
  font: 500 11.5px var(--mono);
  color: var(--ink);
  height: 44px;
}

.table__body .table__row > * {
  padding: 0 10px;
  min-width: 0;
}

.table__row.is-flagged {
  background: #fffcf5;
}

.table__name {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table__name .swatch {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
}

.swatch--meta {
  background: var(--blue);
}
.swatch--google {
  background: var(--blue-soft);
}
.swatch--tiktok {
  background: var(--teal);
}
.swatch--linkedin {
  background: var(--gold);
}

.is-down {
  color: var(--red);
}

.table-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 11px var(--mono);
  color: var(--muted);
}

.table-foot .action {
  color: var(--ink-2);
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 6px;
  padding: 5px 10px;
  font: 600 11.5px var(--sans);
}

.table-foot .note {
  margin-left: auto;
}

/* --- Settings / privacy pane --- */

.settings {
  max-width: 600px;
}

.settings__title {
  font: 700 16px var(--sans);
  color: var(--ink);
}

.settings__lede {
  margin-top: 5px;
  font: 400 13px/1.6 var(--sans);
  color: var(--ink-2);
}

.settings__links {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font: 600 12px var(--sans);
  color: var(--ink-2);
}

.settings__links span {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 7px;
  padding: 7px 12px;
}

.settings__sub {
  margin-top: 24px;
  font: 700 14px var(--sans);
  color: var(--ink);
}

.datalist {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  overflow: hidden;
  font: 500 12px var(--mono);
  color: var(--ink);
}

.datalist div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
}

.datalist div + div {
  border-top: 1px solid var(--line);
}

.datalist .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}

.datalist .where {
  margin-left: auto;
  color: var(--ink-2);
}

.datalist .is-off {
  color: var(--ink-2);
}

.datalist .is-off .dot {
  background: var(--faint);
}

.datalist .is-off .where {
  color: inherit;
}

.danger-row {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font: 600 12px var(--sans);
}

.danger-row .neutral {
  color: var(--ink-2);
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 7px;
  padding: 8px 13px;
}

.danger-row .danger {
  color: var(--red);
  border: 1px solid var(--red-line);
  background: var(--red-tint);
  border-radius: 7px;
  padding: 8px 13px;
}

.settings__note {
  margin-top: 10px;
  font: 400 12px/1.6 var(--sans);
  color: var(--ink-2);
}

/* --- Report --- */

.report {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  overflow: hidden;
}

.report__head {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}

.report__head strong {
  font: 700 14px var(--sans);
  color: var(--ink);
}

.report__head .range {
  font: 500 11px var(--mono);
  color: var(--muted);
}

.report__head .actions {
  margin-left: auto;
  display: flex;
  gap: 7px;
  font: 600 11.5px var(--sans);
  color: var(--ink-2);
}

.report__head .actions span {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
}

.report__kpis {
  display: flex;
  border-bottom: 1px solid var(--line);
}

.report__kpis > div {
  flex: 1;
  padding: 14px 16px;
}

.report__kpis > div:not(:last-child) {
  border-right: 1px solid var(--line);
}

.report__kpis .v {
  margin-top: 6px;
  font: 600 21px var(--mono);
  letter-spacing: -0.7px;
  color: var(--ink);
}

.report__kpis .d {
  font: 500 10.5px var(--mono);
  color: var(--muted);
}

.is-up {
  color: var(--green) !important;
}

.report__cols {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
}

.report__left {
  padding: 16px;
  border-right: 1px solid var(--line);
}

.bars {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bars__label {
  display: flex;
  justify-content: space-between;
  font: 500 11.5px var(--mono);
  color: var(--ink);
}

.bars__track {
  margin-top: 4px;
  height: 6px;
  border-radius: 3px;
  background: #e9edf5;
}

.bars__fill {
  height: 6px;
  border-radius: 3px;
}

.bars__fill--meta {
  width: 64%;
  background: var(--blue);
}
.bars__fill--google {
  width: 42%;
  background: var(--blue-soft);
}
.bars__fill--tiktok {
  width: 20%;
  background: var(--teal);
}

.knowledge {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font: 400 12.5px/1.5 var(--sans);
  color: var(--ink-2);
}

.knowledge div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
}

.knowledge div b {
  color: var(--ink);
}

.knowledge .is-pinned {
  border-color: var(--blue-line);
  background: var(--blue-tint);
  color: var(--blue-dark);
}

.knowledge .is-pinned b {
  color: inherit;
}

.report__right {
  padding: 16px 0;
}

.audit__title {
  padding: 0 16px;
}

.audit {
  margin-top: 10px;
}

.audit__head,
.audit__row {
  display: grid;
  grid-template-columns: 60px 1fr 84px;
  gap: 8px;
  padding: 10px 16px;
}

.audit__head {
  padding: 8px 16px;
  background: var(--wash);
  font: 600 10px var(--mono);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}

.audit__row {
  border-top: 1px solid var(--line);
  font: 500 11.5px var(--mono);
  color: var(--ink);
}

.audit .applied {
  color: var(--green-ink);
}

.audit .rejected {
  color: var(--red);
}

.audit__note {
  margin-top: 12px;
  padding: 0 16px;
  font: 400 12px/1.55 var(--sans);
  color: var(--ink-2);
}

.report__subhead {
  margin-top: 18px;
}

/* Shared micro-labels inside shots */
.k {
  font: 600 10.5px var(--mono);
  letter-spacing: 1.05px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
  :root {
    --gutter: 28px;
  }

  .hero {
    padding-top: 120px;
  }

  /* The headline widens into the margins here, so drop the inner tiles */
  .orbit__tile--2,
  .orbit__tile--5 {
    display: none;
  }

  .orbit__tile--1,
  .orbit__tile--4 {
    top: 84px;
  }

  /* The hero is shorter here and the product window rises to meet them, so
     the lower pair moves up to flank the call to action instead. */
  .orbit__tile--3,
  .orbit__tile--6 {
    top: 292px;
    width: 48px;
    height: 48px;
  }

  .hero__title {
    font-size: 46px;
    letter-spacing: -1.8px;
  }

  .section__head h2 {
    font-size: 30px;
    letter-spacing: -1px;
  }

  .pillars__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
  }

  .site-header__inner {
    height: 58px;
  }

  .brand img {
    height: 22px;
  }

  .hero {
    padding-top: 102px;
  }

  /* Big blur radii are the expensive part on phones: fewer, softer, smaller */
  .blob {
    filter: blur(70px);
  }

  .blob--3,
  .blob--4 {
    display: none;
  }

  /* Text runs edge to edge on a phone, so there is no margin left to float
     anything in — the tiles end up crowding the wordmark. The colour field
     carries the hero here, and the "Connects to" strip names the platforms. */
  .orbit {
    display: none;
  }

  .hero__grid {
    background-size: 40px 40px;
  }

  .hero__title {
    font-size: 34px;
    letter-spacing: -1.2px;
  }

  .hero__sub {
    font-size: 15.5px;
  }

  .hero__shot {
    margin-top: 34px;
  }

  .cta-row .btn {
    flex: 1 1 100%;
  }

  .logos {
    gap: 22px;
    padding: 22px var(--gutter);
  }

  .logos img {
    height: 19px;
  }

  .section {
    padding-top: 52px;
  }

  .section__head {
    gap: 14px;
  }

  .section__head h2 {
    font-size: 25px;
    letter-spacing: -0.7px;
  }

  .pillars {
    padding: 52px var(--gutter);
  }

  .closing {
    padding: 56px var(--gutter);
  }

  .closing h2 {
    font-size: 28px;
    letter-spacing: -1px;
  }

  .site-footer__inner {
    justify-content: flex-start;
    gap: 12px;
  }
}