/* Fonts loaded via Google Fonts <link> in the HTML head:
   - Google Sans Flex → body / UI sans, variable wght (was ABC Oracle, commercial)
   - Fraunces     → display serif, variable opsz+wght (was Exposure, commercial)
   - mono         → system monospace stack (was ABC Mono, commercial)
   Commercial ABC Oracle / Exposure / ABC Mono removed for licensing. */

/* ─────────────────────────────────────────────────────────────────────────
   ORBIT DESIGN TOKENS — single source of truth.
   Change a value HERE and it updates everywhere that uses the var().
   Visual catalog: /styleguide.html (noindex, internal only).
   Existing hard-coded values are being migrated to these over time; new
   work should use the tokens below.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces & text */
  --bg: #f8f8f8;
  /* High-emphasis text. Material Design avoids pure black on light surfaces;
     this is Material 3's on-surface (#1C1B1F), a near-black that reads softer. */
  --ink: #1c1b1f;
  --muted: rgba(0, 0, 0, 0.56);
  --line: rgba(0, 0, 0, 0.08);
  --surface: #ffffff;
  --nav-bg: rgba(255, 255, 255, 0.94);

  /* Brand / accent */
  --accent: #2d6fe8;            /* primary blue — links, highlights, Orbit column */
  --accent-rgb: 45, 111, 232;   /* for rgba(var(--accent-rgb), .x) tints */
  --accent-soft: #1f73e8;       /* secondary blue used in some demos */
  --cta: #111914;               /* dark button / primary CTA */
  --positive: #008a4a;          /* green — savings, success */

  /* Typography. Two fonts in play: --font-sans for all body/UI copy, and
     --font-accent for the single emphasised word ("quiet") in the hero.
     Swap --font-accent here and the hero word follows — nothing else to edit. */
  --font-sans: "Google Sans Flex", Helvetica, Arial, sans-serif;
  --font-accent: "Fraunces", Georgia, serif;
  --font-serif: "Fraunces", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  /* Serif section heading — one source of truth for every section title. */
  --h-display: 50px;
  --h-display-weight: 700;
  --h-display-line: 1.1;
  --h-display-tracking: -0.045em;
  --h-display-gap: 40px;        /* space below a section title before its content */

  /* Radius */
  --radius-sm: 10px;
  --radius: 18px;               /* cards, table column, demos */
  --radius-pill: 999px;

  /* Shadow */
  --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.08);
  --shadow-accent: 0 18px 50px rgba(var(--accent-rgb), 0.1);

  /* Spacing rhythm */
  --section-gap: 120px;         /* bottom margin between major sections */
  --gutter: 20px;               /* page side padding */

  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: geometricPrecision;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a,
button {
  font: inherit;
  color: inherit;
}

a {
  text-decoration: none;
}

button {
  border: 0;
  cursor: pointer;
}

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

.site-header {
  position: fixed;
  top: 28px;
  left: 0;
  right: 0;
  z-index: 50;
  pointer-events: none;
}

.desktop-nav,
.download-float,
.mobile-shell,
.mobile-menu {
  pointer-events: auto;
}

/* Edit here first when practicing the nav. */
.desktop-nav {
  width: fit-content;
  max-width: calc(100vw - 32px);
  height: 60px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 24px 0 9px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 23px;
  background: var(--nav-bg);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}

.desktop-nav a:not(.nav-mark) {
  flex: 0 0 auto;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.78);
  opacity: 1;
}

.desktop-nav a:not(.nav-mark):hover {
  color: #000;
}

.nav-mark {
  width: 49px;
  height: 49px;
  flex: 0 0 49px;
  display: grid;
  place-items: center;
  opacity: 1;
}

.nav-mark img {
  width: 47px;
  height: 47px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(var(--accent-rgb), 0.22));
}

.download-float {
  position: absolute;
  top: 6px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  background: var(--nav-bg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.download-float.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Hover: a darker grey frost over the blur, with a faint stroke. */
.download-float.is-visible:hover {
  background: rgba(234, 234, 237, 0.85);
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

.mobile-shell,
.mobile-menu {
  display: none;
}

/* Edit here next when practicing the hero. */
.hero {
  position: relative;
  min-height: max(100svh, 1080px);
  isolation: isolate;
  /* No clipping here: the mockup needs to overflow the bottom so the next section
     can tuck over it. The glow + orbit circle are clipped by their own .hero-bg
     wrapper instead, so the circle's edges never bleed past the hero. */
  background: var(--bg);
}

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

.hero-glow {
  position: absolute;
  inset: 0 0 auto 0;
  height: 64svh;
  /* Dia-style sky: the whole top band is a solid royal-blue (logo blue #297BEA),
     a touch deeper toward the top corners. The white moon (.hero-orbit) rises into
     it and the bright bloom lives on the moon's shoulders (its box-shadow), so the
     edge where blue meets white reads as backlight. */
  background:
    radial-gradient(ellipse 90% 120% at 50% -25%, rgba(20, 78, 200, 0.95), rgba(41, 123, 234, 0.7) 45%, rgba(41, 123, 234, 0.32) 70%, transparent 88%),
    linear-gradient(180deg, rgba(31, 105, 222, 0.5), rgba(248, 248, 248, 0) 85%);
  filter: blur(14px);
  transform: scale(1.06);
  z-index: -3;
}

.hero-orbit {
  position: absolute;
  left: 50%;
  /* Sized in vw so the circle scales with the viewport instead of being a fixed
     pixel disc — wider than the screen (130vw) so its left/right edges run
     off-screen, reading as a big soft horizon under the nav. A small gap from the
     nav so it doesn't touch. The blue box-shadow rings the top edge so the disc
     reads like a moon glowing against the sky behind it. */
  top: 8vw;
  width: 130vw;
  height: 130vw;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--bg);
  /* Backlight: a bright cyan-white bloom all around the rim (Dia-style), brightest
     on the shoulders. A tight white inner ring + a wide soft cyan spread. */
  box-shadow:
    0 0 2vw 0.3vw rgba(235, 245, 255, 0.95),
    0 0 9vw 1vw rgba(150, 200, 255, 0.75);
  z-index: -2;
}

.hero-copy {
  position: relative;
  z-index: 3;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 270px 16px 0;
  text-align: center;
}

/* Entrance: each hero element rises + fades in on load, staggered top to bottom.
   The "quiet" per-letter weight animation runs on the inner <span>s, so animating
   the parent <p> here doesn't fight it. */
@keyframes hero-rise {
  from {
    opacity: 0;
    translate: 0 22px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.hero-copy > .ph-badge--hero,
.hero-copy > .ph-result,
.hero-copy > p,
.hero-copy > .hero-subcopy,
.hero-copy > .primary-cta,
.hero-copy > .hero-trial,
.hero-copy > .ph-badge:not(.ph-badge--hero),
.hero-copy > .cinema {
  opacity: 0;
  animation: hero-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
html.js .hero-copy:not(.is-motion-ready) > .ph-badge--hero,
html.js .hero-copy:not(.is-motion-ready) > .ph-result,
html.js .hero-copy:not(.is-motion-ready) > p,
html.js .hero-copy:not(.is-motion-ready) > .hero-subcopy,
html.js .hero-copy:not(.is-motion-ready) > .primary-cta,
html.js .hero-copy:not(.is-motion-ready) > .hero-trial,
html.js .hero-copy:not(.is-motion-ready) > .ph-badge:not(.ph-badge--hero),
html.js .hero-copy:not(.is-motion-ready) > .cinema {
  animation-play-state: paused;
}
.hero-copy > .ph-badge--hero {
  animation-delay: 0s;
}
.hero-copy > .ph-result {
  animation-delay: 0.1s;
}
.hero-copy > p:nth-of-type(1),
.hero-copy > p:nth-of-type(2) {
  animation-delay: 0.18s;
}
.hero-copy > .hero-subcopy {
  animation-delay: 0.4s;
}
.hero-copy > .primary-cta {
  animation-delay: 0.54s;
}
.hero-copy > .hero-trial {
  animation-delay: 0.6s;
}
.hero-copy > .ph-badge:not(.ph-badge--hero) {
  animation-delay: 0.60s;
}
.hero-copy > .cinema {
  animation-delay: 0.76s;
  animation-duration: 1100ms;
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy > .ph-badge--hero,
  .hero-copy > .ph-result,
  .hero-copy > p,
  .hero-copy > .hero-subcopy,
  .hero-copy > .primary-cta,
  .hero-copy > .hero-trial,
  .hero-copy > .ph-badge:not(.ph-badge--hero),
  .hero-copy > .cinema {
    opacity: 1;
    animation: none;
  }
}

.hero-copy p {
  margin: 0;
  font-size: 84px;
  line-height: 91px;
  font-weight: 300;
  /* Google Sans Flex is tighter than Inter by default, so -0.04em (tuned for
     Inter) crammed the letters. -0.02em keeps headline density without crowding. */
  letter-spacing: -0.02em;
}

.hero-copy .display-word {
  display: inline-block;
  font-family: "Fraunces", Georgia, serif;
  /* Upright Fraunces for the emphasised word(s) — only "quiet" stays italic. */
  font-style: normal;
  font-size: 92px;
  line-height: 101px;
  /* Large optical size for display; weight is driven per-letter by the idle
     animation JS (font-variation-settings 'wght'). */
  font-variation-settings: "opsz" 144, "wght" 560;
}

.hero-copy .quiet-word {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  margin: 0 0.08em;
  /* width is locked once by JS (to the bold-state width) so the rippling
     weights keep natural letter spacing without ever shifting "window". */
}

.hero-copy .quiet-word span {
  display: inline-block;
  transform-origin: 50% 62%;
  /* Fraunces sits visually smaller than the Google Sans body at the same px, so
     bump it up. Using em (relative to the parent line) keeps the ratio at every
     breakpoint — desktop 84px and mobile 38px both scale together. */
  font-size: 1.2em;
  letter-spacing: -0.015em;
  /* Each letter is pinned to a fixed thin-state slot by JS; overflow stays
     visible so that, as a letter thickens, it swells past its slot and lightly
     overlaps its neighbours instead of pushing them. */
  overflow: visible;
  text-align: center;
  /* Accent font (--font-accent = Fraunces) for the one emphasised word: a soft
     italic (SOFT axis rounds the sharp serifs). The weight "breathes" via JS,
     which overrides wght inline — SOFT/opsz here are the resting baseline. */
  font-family: var(--font-accent);
  font-style: normal;
  font-variation-settings: "SOFT" 100, "opsz" 144, "wght" 400;
}

.hero-copy .hero-subcopy {
  max-width: 455px;
  margin-top: 42px;
  color: var(--muted);
  font-size: 1.66rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

/* Who it's for — a quiet signal so agencies/freelancers self-identify. */
.hero-copy .hero-audience {
  margin: 20px 0 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.primary-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-width: 280px;
  min-height: 56px;
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 28px;
  color: #fff;
  background: var(--cta);
  border-radius: 13px;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0;
  box-shadow: 0 10px 30px rgba(71, 174, 255, 0.22);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.primary-cta::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -12%;
  height: 125%;
  z-index: -1;
  background: var(--accent);
  border-radius: 50% 50% 0 0 / 16% 16% 0 0;
  transform: translateY(100%);
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.primary-cta > * {
  position: relative;
  z-index: 1;
}

.primary-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(var(--accent-rgb), 0.32);
}

.primary-cta:hover::before {
  transform: translateY(0);
}

.primary-cta:active {
  transform: translateY(0);
  box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.26);
}

.primary-cta:active::before {
  transform: translateY(6%);
}

.primary-cta .cta-arrow {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* ============================================================
   CINEMA — video / preview section directly below the hero
   ============================================================ */
.cinema {
  width: min(940px, calc(100vw - 32px));
  margin: 52px auto 0;
  text-align: center;
  position: relative;
  z-index: 2;
}
.cinema video,
.cinema .cinema-stage {
  display: block;
  width: 100%;
  margin: 0 auto;
  height: auto;
}
.cinema-stage {
  position: relative;
  display: block;
  width: 100%;
  /* Match the demo clip's real aspect ratio (3164×2160) so the frame is sized
     to the video exactly — no crop, no letterbox, no backdrop color needed. */
  aspect-ratio: 3164 / 2160;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(11, 17, 27, 0.12);
  cursor: pointer;
  transition: box-shadow 240ms ease, transform 240ms ease;
}
.cinema-stage:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(11, 17, 27, 0.2);
}
.cinema-stage.is-sound-on {
  cursor: pointer;
}
.cinema-stage.is-sound-on:hover {
  transform: none;
  box-shadow: 0 12px 32px rgba(11, 17, 27, 0.12);
}
.cinema-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  border-radius: inherit;
  pointer-events: none;
}

/* The muted loop autoplays underneath; the poster (the static mockup) sits on
   top and fades out once the video can paint frames. Until a video source is
   set, the poster is all that shows. The poster drives the stage height (the
   empty <video> has none), so it's in flow and the video is absolutely placed. */
.cinema-poster {
  display: block;
  /* Absolute-fill so the stage's aspect-ratio drives the frame height (a poster
     in normal flow would size the frame to the image, re-introducing a mismatch). */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: opacity 360ms ease, filter 240ms ease, transform 240ms ease;
}
.cinema .cinema-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Stage is set to the clip's exact ratio, so cover fills it with no crop. */
  object-fit: cover;
  z-index: 0;
}
.cinema-stage.is-playing .cinema-poster {
  opacity: 0;
  pointer-events: none;
}
/* Apple-style frosted-glass play button, centred over the mockup. The poster
   dims slightly on hover so the glass control reads against any frame. */
.cinema-stage:hover .cinema-poster {
  filter: brightness(0.92);
  transform: scale(1.012);
}
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  z-index: 2;
  color: #fff;
  background: rgba(10, 16, 26, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow:
    0 18px 44px rgba(6, 12, 22, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background 240ms ease, border-color 240ms ease, opacity 180ms ease;
  pointer-events: none;
}
.play-button svg {
  width: 34px;
  height: 34px;
  margin-left: 4px; /* optically centre the triangle */
  fill: currentColor;
}
.cinema-stage:hover .play-button {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(10, 16, 26, 0.68);
  border-color: rgba(255, 255, 255, 0.48);
}
.cinema-stage:active .play-button {
  transform: translate(-50%, -50%) scale(0.97);
}
.cinema-stage.is-playing .play-button {
  opacity: 0.9;
}
.cinema-stage.is-playing:hover .play-button {
  opacity: 1;
}
.cinema-stage.is-sound-on .play-button,
.cinema-stage.is-sound-on:hover .play-button {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
}
.cinema-stage.is-paused .play-button,
.cinema-stage.is-paused:hover .play-button {
  opacity: 0.92;
  transform: translate(-50%, -50%) scale(1);
}
.cinema-controls {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  z-index: 3;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: #fff;
  background: rgba(10, 16, 26, 0.5);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 14px 34px rgba(6, 12, 22, 0.24);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.cinema-stage.is-sound-on .cinema-controls {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.cinema-control {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  background: transparent;
  border-radius: 10px;
  transition: background 160ms ease;
}
.cinema-control:hover {
  background: rgba(255, 255, 255, 0.14);
}
.cinema-control svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}
.cinema-progress,
.cinema-volume {
  --progress: 0%;
  --volume: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  cursor: pointer;
  background: transparent;
}
.cinema-progress {
  min-width: 0;
  flex: 1 1 auto;
}
.cinema-volume {
  width: 72px;
  flex: 0 0 72px;
}
.cinema-progress::-webkit-slider-runnable-track,
.cinema-volume::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
}
.cinema-progress::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.92) var(--progress),
    rgba(255, 255, 255, 0.26) var(--progress)
  );
}
.cinema-volume::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.82) var(--volume),
    rgba(255, 255, 255, 0.24) var(--volume)
  );
}
.cinema-progress::-webkit-slider-thumb,
.cinema-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 0;
}
.cinema-progress::-moz-range-track,
.cinema-volume::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
}
.cinema-progress::-moz-range-progress,
.cinema-volume::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
}
.cinema-progress::-moz-range-thumb,
.cinema-volume::-moz-range-thumb {
  width: 0;
  height: 0;
  border: 0;
}
.cinema-toggle .icon-play,
.cinema-stage.is-paused .cinema-toggle .icon-pause,
.cinema-mute .icon-muted,
.cinema-stage.is-muted .cinema-mute .icon-volume {
  display: none;
}
.cinema-stage.is-paused .cinema-toggle .icon-play,
.cinema-stage.is-muted .cinema-mute .icon-muted {
  display: block;
}
.between-tabs {
  max-width: 1400px;
  margin: 120px auto 120px;
  padding: 0 30px;
}

.between-tabs h2,
.work-cards h2,
.privacy h2,
.compare h2,
.pricing h2,
.ready h2 {
  margin: 0;
  text-align: center;
}

/* Serif display headings — matched to Dia's live values:
   Exposure 48px / weight 650 / letter-spacing -2.4px (-0.05em) / line-height 56px.
   CRITICAL: this font's ONLY variable axis is EXPO (no weight axis), so
   font-weight does little — the stroke thickness is set by EXPO. Dia uses
   "EXPO" -25 (thinner); removing it earlier is what made our text look heavier
   than Dia. Keep -25 to match. */
.between-tabs h2,
.privacy h2,
.compare h2,
.pricing h2,
.ready h2 {
  font-family: var(--font-serif);
  font-size: var(--h-display);
  font-weight: var(--h-display-weight);
  letter-spacing: var(--h-display-tracking);
  line-height: var(--h-display-line);
  font-variation-settings: "wght" var(--h-display-weight);
}

/* Dia-style: the RIGHT column is a tall vertical stack of mockups that scroll
   normally; only the LEFT step list is sticky-pinned and highlights whichever
   mockup is currently centered. So the layout itself is a plain 2-col grid
   (not sticky), and step-nav does the pinning. */
.step-layout {
  display: grid;
  grid-template-columns: minmax(280px, 390px) 1fr;
  gap: 70px;
  margin-top: 72px;
  align-items: start;
}

.step-nav {
  display: grid;
  gap: 36px;
  /* Pin the step list while the stack of mockups scrolls past on the right.
     Centered-ish in the viewport so it sits beside the active mockup. */
  position: sticky;
  top: 28vh;
  align-self: start;
  height: max-content;
}

.step-nav button {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 0 0 0 24px;
  text-align: left;
  background: transparent;
  color: rgba(0, 0, 0, 0.34);
  transition: color 325ms ease;
}

.step-nav button::before {
  content: "";
  position: absolute;
  /* Start at the heading, not the number row above it, so the bar brackets the
     title + body rather than the "0X" label. */
  top: 38px;
  bottom: 6px;
  left: 0;
  width: 4px;
  background: #000;
  border-radius: 4px;
  /* Slow dissolve: fade the bar in/out while it grows, instead of a fast wipe. */
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 325ms ease, opacity 325ms ease;
}

.step-nav button.active {
  color: #090909;
}

.step-nav button.active::before {
  opacity: 1;
  transform: scaleY(1);
}

.step-nav span {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

/* Step title — matched to Dia: Exposure 24px / 650 / -0.96px (-0.04em) /
   lh 30px / EXPO -25 (the axis that actually sets stroke thickness). */
.step-nav strong {
  max-width: 315px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.04em;
  font-variation-settings: "wght" 600;
}

/* Step body: keep it readable while staying quieter than the title. */
.step-nav p {
  max-width: 310px;
  margin: 0;
  color: rgba(0, 0, 0, 0.66);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.56;
  letter-spacing: -0.01em;
}

.step-nav button:not(.active) p {
  display: none;
}

/* Right column = a vertical stack of all 3 mockups (Dia-style), each tall
   enough to own a screen as you scroll past it. No more absolute-overlap. */
.step-media {
  display: grid;
  gap: 22vh;
}

.step-media article {
  /* All mockups are always present and in normal flow. The one centered in
     the viewport reads as "active"; the others dim slightly so focus follows
     the scroll without hiding anything. */
  opacity: 0.5;
  transform: scale(0.985);
  transition: opacity 320ms ease, transform 320ms ease;
  will-change: opacity, transform;
}

.step-media article.active {
  opacity: 1;
  transform: scale(1);
}

.account-demo {
  width: 100%;
  min-height: 590px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* Real product screenshot used in step 01 (replaces the CSS switch-demo).
   The PNG already carries its own soft shadow; this adds a gentle grounding
   shadow + rounding so it sits like the other framed mockups. */
.step-shot {
  width: 100%;
  display: flex;
  justify-content: center;
}
.step-shot img {
  display: block;
  /* Slightly smaller than full width so the shot doesn't dominate the row. */
  width: 80%;
  height: auto;
  border-radius: 20px;
  filter: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.16));
}

/* ── Step 02: privacy — one big lock inside the Mac-window frame ─────────── */
/* The privacy step is lighter than the others, so give its frame a smaller
   min-height and let the body fill it edge-to-edge (so the rail divider runs
   the full height instead of stopping partway). */
.sealed-demo {
  min-height: 440px;
}
.sealed-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 210px 1fr;
  align-items: stretch;
}
/* Left sidebar placeholder so the frame doesn't feel empty. */
.sealed-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 18px;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(250, 251, 253, 0.7);
}
.sealed-rail::before {
  content: "";
  height: 38px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.05);
}
.sealed-rail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  border-radius: 10px;
}
.sealed-rail-row.active {
  background: rgba(0, 0, 0, 0.05);
}
.sealed-rail-row i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex: 0 0 26px;
}
.sealed-rail-row b {
  height: 9px;
  width: 82px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.1);
}
.sealed-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 40px 34px;
}
/* Two separate, equal-sized, aligned badges — no overlap. */
.sealed-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
/* Liquid-glass badge: translucent tinted pane + backdrop blur, a bright top
   highlight, and layered shadows so it reads like frosted glass. Pure CSS, no
   third-party assets. */
.sealed-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 140px;
  height: 140px;
  border-radius: 36px;
  color: #297bea;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12)),
    radial-gradient(circle at 50% 30%, rgba(41, 123, 234, 0.22), rgba(41, 123, 234, 0.06) 72%);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 -8px 18px rgba(41, 123, 234, 0.1),
    0 18px 32px rgba(41, 123, 234, 0.16);
  overflow: hidden;
}
/* Soft specular sheen sweeping across the top-left. */
.sealed-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 22% 8%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}
.sealed-badge svg {
  position: relative;
  width: 84px;
  height: 84px;
  filter: drop-shadow(0 2px 3px rgba(41, 123, 234, 0.25));
}
.sealed-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.sealed-chips span {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
}

/* ── Step 03: real Google apps — NO frame, two rows, staggered offset ───── */
.realgmail-free {
  width: 100%;
  padding: 8px 0 0;
}
.realgmail-apps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 40px;
  column-gap: 20px;
  align-items: start;
  /* room for the horizontal nudge so row-2 icons never clip the edge */
  padding: 0 34px;
}
.realgmail-apps figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* Offset row 2 (5–8) as a whole: shift right by ~half a column so it sits
   between the columns above (brick pattern). All four share the SAME vertical
   nudge, so no single icon (Sheets) rides higher than its neighbours. */
.realgmail-apps figure:nth-child(5),
.realgmail-apps figure:nth-child(6),
.realgmail-apps figure:nth-child(7),
.realgmail-apps figure:nth-child(8) {
  transform: translate(24%, 14px);
}
.realgmail-apps img {
  width: 58px;
  height: 58px;
}
.realgmail-apps figcaption {
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
}
.realgmail-note {
  margin: 66px 34px 0;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.55);
}

.demo-toolbar {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  background: rgba(252, 253, 255, 0.76);
}

.demo-toolbar span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d9dde5;
}

.demo-toolbar strong {
  margin-left: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.demo-toolbar em {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(3, 88, 247, 0.1);
  color: rgba(3, 88, 247, 0.9);
  font-style: normal;
  font-size: 13px;
  line-height: 17px;
}

.demo-body {
  display: grid;
  grid-template-columns: 255px 1fr;
  min-height: 532px;
}

.account-rail {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 28px 18px;
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  background: rgba(246, 249, 252, 0.86);
}

.account-row {
  min-height: 56px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-radius: 16px;
  color: rgba(0, 0, 0, 0.58);
}

.account-row.active {
  color: #000;
  background: #fff;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
}

.account-row b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(180deg, #72c4ff, #1f73e8);
  font-size: 15px;
}

.account-row span,
.account-row em,
.gmail-head span,
.mail-row span,
.session-card span,
.session-note,
.real-window aside span,
.real-row span {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.02em;
}

.account-row span {
  font-weight: 700;
}

.account-row em {
  color: rgba(0, 0, 0, 0.44);
  font-style: normal;
}

.demo-panel {
  padding: 34px;
  background: linear-gradient(180deg, #fbfcfd, #edf3fb);
}

.gmail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 26px;
}

.gmail-head strong {
  font-size: 34px;
  line-height: 40px;
  letter-spacing: -0.04em;
}

.gmail-head span {
  color: rgba(0, 0, 0, 0.5);
}

.mail-row {
  display: grid;
  gap: 6px;
  min-height: 74px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.48);
}

.mail-row:first-of-type {
  border-radius: 18px 18px 0 0;
}

.mail-row.unread {
  background: #fff;
}

.mail-row b,
.real-row b,
.session-card b {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.02em;
}

.mail-row span,
.real-row span,
.session-card span {
  color: rgba(0, 0, 0, 0.54);
}

.shortcut-hint {
  width: max-content;
  margin: 28px auto 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: #111914;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  box-shadow: 0 18px 34px rgba(17, 25, 20, 0.18);
}

.session-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 54px;
  min-height: 532px;
  background:
    radial-gradient(circle at 20% 20%, rgba(3, 88, 247, 0.18), transparent 34%),
    linear-gradient(180deg, #fbfcfd, #edf3fb);
}

.session-card {
  min-height: 132px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 24px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.08);
}

.session-card.active {
  border: 1px solid rgba(3, 88, 247, 0.24);
}

.session-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 78px;
  border-radius: 20px;
  color: rgba(0, 0, 0, 0.62);
  background: rgba(255, 255, 255, 0.62);
  text-align: center;
}

.real-window {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 532px;
  background: #fff;
}

.real-window aside {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 34px 28px;
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  background: #f6f8fb;
}

.real-window aside b {
  width: max-content;
  padding: 12px 20px;
  border-radius: 18px;
  color: #fff;
  background: #1f73e8;
  font-size: 15px;
  line-height: 20px;
}

.real-window aside span {
  color: rgba(0, 0, 0, 0.58);
}

.real-main {
  padding: 34px;
}

.search-bar {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-radius: 18px;
  color: rgba(0, 0, 0, 0.38);
  background: #eef3f8;
  font-size: 15px;
}

/* The real Google apps that open inside this account — the "not a copy" proof. */
.google-apps-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 8px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.google-apps-row img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
}

.real-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  padding: 20px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.real-row.strong {
  margin-top: 24px;
  border-radius: 18px;
  border-bottom: 0;
  background: #f8fbff;
}

.work-cards {
  max-width: 1180px;
  margin: 0 auto 140px;
  padding: 150px 20px 0;
}

/* ---- Pricing ---- */
/* ── Competitor comparison ─────────────────────────────────────────────
   Vertical table, Orbit column lifted as a blue card so it reads as the
   answer. Built on the site tokens: --accent, --ink, --muted. */
.compare {
  max-width: 940px;
  margin: 0 auto 140px;
  padding: 80px 20px 0;
  text-align: center;
}

.compare-sub {
  max-width: 500px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

/* Horizontal scroll only kicks in on small screens (see media query). */
.compare-scroll {
  margin: 52px auto 0;
  max-width: 940px;
}

.compare-hint {
  display: none;
}

.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.compare-table th,
.compare-table td {
  padding: 0 14px;
  height: 76px;            /* uniform row height across every cell */
  font-size: 15px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Row labels (left column) */
.compare-rowhead {
  width: 30%;
  text-align: left !important;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.compare-rowhead small {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* Header row taller to fit the logo + name */
.compare thead th {
  height: 132px;
  vertical-align: bottom;
  padding-bottom: 20px;
}
/* Competitor column headers */
.compare thead th.compare-col {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
/* The divider under the header runs ALL the way across, including the
   left label column (the empty rowhead also gets the bottom border). */
.compare thead th.compare-rowhead {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Plain competitor cells — darker, not faded */
.compare-table td {
  color: var(--ink);
}

/* ── Orbit column: the lifted blue card ── */
.compare-col--orbit {
  position: relative;
  background: #fff;
}
/* round the top + bottom of the highlighted column and give it the border.
   The card overhangs the table above and below (::after caps) so it reads
   as a lifted card, like the featured pricing column pattern. */
.compare thead th.compare-col--orbit {
  color: var(--ink);
  font-weight: 700;
  font-size: 17px;
  padding-top: 22px;
  border: 1.5px solid rgba(3, 88, 247, 0.55);
  border-top: 0;
  /* keep the table's own row rule running through the column */
  border-bottom: 1px solid rgba(3, 88, 247, 0.14);
  border-radius: 0;
  background: linear-gradient(180deg, #f2f6fe 0%, #f2f6fe 8%, #fff);
}
.compare thead th.compare-col--orbit::after {
  content: "";
  position: absolute;
  left: -1.5px;
  right: -1.5px;
  top: -6px;
  height: 6px;
  border: 1.5px solid rgba(3, 88, 247, 0.55);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: #f2f6fe;
}
tbody td.compare-col--orbit {
  border-left: 1.5px solid rgba(3, 88, 247, 0.55);
  border-right: 1.5px solid rgba(3, 88, 247, 0.55);
  border-bottom-color: rgba(3, 88, 247, 0.14);
  color: var(--ink);
}
/* last Orbit cell: the card cap extends below the table's bottom rule */
.compare-table tbody tr:last-child td.compare-col--orbit {
  border-bottom: 0;
  border-radius: 0;
}
.compare-table tbody tr:last-child td.compare-col--orbit::after {
  content: "";
  position: absolute;
  left: -1.5px;
  right: -1.5px;
  bottom: -24px;
  height: 25px;
  border: 1.5px solid rgba(3, 88, 247, 0.55);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: #fff;
}
.compare-col--orbit b {
  font-weight: 700;
}

/* Orbit brand mark in the header */
.compare-mark {
  display: block;
  margin: 0 auto 8px;
  width: 40px;
  height: 40px;
}
.compare-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Check / cross / partial glyphs ── */
[data-yes]::before,
[data-no]::before,
[data-partial]::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* blue filled check for Orbit, darker neutral check for others */
[data-yes]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565249' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.compare-col--orbit[data-yes]::before {
  width: 27px;
  height: 27px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23dcefe4'/%3E%3Cpath d='M17.2 8.6 10.6 15.2 6.8 11.4' fill='none' stroke='%23008a4a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Clear, definite NO — a real red cross, not a faded one */
[data-no]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d23f3f' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
/* Partial — a clear neutral dash */
[data-partial]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a877f' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
/* caption under a cross — readable, not washed out. Sits below the glyph. */
[data-no],
[data-partial] {
  line-height: 1.3;
}
.muted-note {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: -0.01em;
}
.compare td .x {
  color: var(--ink);
}

.compare-foot {
  max-width: 460px;
  margin: 30px auto 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  letter-spacing: -0.01em;
}

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

.pricing {
  max-width: 940px;
  margin: 0 auto 120px;
  padding: 80px 20px 0;
  text-align: center;
}

.pricing-sub {
  max-width: 460px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

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

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px 32px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 22px;
  background: #fff;
  text-align: left;
}

/* The launch tier is the one we push: stronger border + soft glow. */
.price-card--feature {
  border-color: rgba(3, 88, 247, 0.55);
  box-shadow: 0 18px 50px rgba(3, 88, 247, 0.1);
}

.price-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
}

.price-card h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 22px;
}

.price .amount {
  font-family: "Fraunces", Georgia, serif;
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.price .once {
  color: var(--muted);
  font-size: 14px;
}

.price .was {
  align-self: center;
  color: rgba(0, 0, 0, 0.4);
  font-size: 22px;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.price .save {
  align-self: center;
  margin-left: 2px;
  padding: 4px 10px;
  border-radius: 999px;
  /* Green = "money saved" — also separates it from the blue 'Launch price'
     badge so the two don't read as the same thing. */
  background: rgba(0, 168, 90, 0.12);
  color: #008a4a;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.price-list {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
  width: 100%;
}

.price-list li {
  position: relative;
  padding-left: 26px;
  color: rgba(0, 0, 0, 0.72);
  font-size: 15px;
  letter-spacing: -0.01em;
}

.price-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.price-cta {
  width: 100%;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 13px;
  background: #fff;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  margin-top: auto;
}

.price-cta--solid {
  border-color: transparent;
  background: var(--cta);
  color: #fff;
}

.cta-note {
  width: 100%;
  margin-top: 10px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: -0.01em;
}

.cta-note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cta-note a:hover {
  text-decoration: none;
}

/* Trial = the wide-open front door, so it's the loud line. */
.pricing-trial {
  margin: 34px auto 0;
  color: var(--ink);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Refund = quiet reassurance, deliberately small. */
.pricing-foot {
  margin: 8px auto 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: -0.01em;
}

/* Trust signals — three reassurances, each with a green check, side by side. */
.trust-row {
  margin: 16px auto 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
}
.trust-row li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.trust-row li::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6 9 17l-5-5' stroke='%2316a34a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pricing-fineprint {
  margin: 38px auto 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: -0.01em;
}
.pricing-fineprint strong {
  color: var(--ink);
  font-weight: 600;
}
.pricing-fineprint a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 680px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  /* Comparison: let the table scroll sideways instead of cramming. */
  .compare-scroll {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
  }
  .compare-hint {
    display: block;
    margin: 0 auto 18px;
    font-size: 12px;
    color: var(--muted);
    text-align: center;
  }
  .compare-table {
    min-width: 660px;
  }
  .compare thead th {
    height: 148px;
    padding-top: 8px;
    padding-bottom: 24px;
  }
  .compare-table th,
  .compare-table td {
    padding: 14px 10px;
    font-size: 14px;
  }
  .compare-rowhead {
    width: 34%;
  }
  .muted-note {
    font-size: 11px;
  }
}

/* Sans display heading — matched to Dia's live values:
   ABC Oracle 54px / weight 300 / letter-spacing -2.16px (-0.04em) / line-height 60px. */
.work-cards h2 {
  max-width: 760px;
  margin: 0 auto 72px;
  /* Unified section-title spec (design tokens). */
  font-family: var(--font-serif);
  font-style: normal;
  font-size: var(--h-display);
  font-weight: var(--h-display-weight);
  letter-spacing: var(--h-display-tracking);
  line-height: var(--h-display-line);
  font-variation-settings: "wght" var(--h-display-weight);
}

.cards-grid {
  display: grid;
  /* 12-col track so cards can take uneven widths. Row 1: wide + narrow;
     row 2: narrow + wide — the column weight zig-zags (Dia-style rhythm)
     instead of a flat 50/50 grid. */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

.feature-card {
  min-height: 560px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: #ededec;
}

/* Asymmetric column widths — wide/narrow diagonally. */
.feature-card:nth-child(1) { grid-column: span 7; }
.feature-card:nth-child(2) { grid-column: span 5; }
.feature-card:nth-child(3) { grid-column: span 5; }
.feature-card:nth-child(4) { grid-column: span 7; }

.feature-card h3 {
  max-width: 680px;
  margin: 24px 32px 0;
  color: rgba(0, 0, 0, 0.92);
  font-size: 30px;
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.feature-card p {
  max-width: 520px;
  margin: 16px 32px 32px;
  color: rgba(0, 0, 0, 0.68);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 450;
  letter-spacing: -0.01em;
}

.pill {
  align-self: flex-start;
  margin: 32px 32px 0;
  padding: 7px 18px;
  border-radius: 999px;
  background: #fff;
  color: rgba(0, 0, 0, 0.66);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.card-image {
  position: relative;
  margin-top: auto;
  min-height: 292px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
}

.card-image img {
  width: 100%;
  height: 360px;
  object-fit: contain;
  object-position: bottom center;
}

.feature-mockup {
  width: calc(100% - 64px);
  min-height: 255px;
  margin: 0 auto;
  border-radius: 24px 24px 0 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 0;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.08);
}

.isolation-mockup {
  /* Full-bleed to the card's bottom + side edges (absolute inside the
     position:relative .card-image), so the tiles sit flush and the card-image
     fade mask dissolves their bottom (Dia-style). */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 0 28px;
  /* Kill the inherited white feature-mockup box so only the tinted tiles show
     (the white was bleeding into the side gaps). */
  background: none;
  border: 0;
  box-shadow: none;
}
.isolation-mockup .iso-tile {
  min-height: 320px;
  border-radius: 22px 22px 0 0;
  border-bottom: 0;
}
/* Softer, lower fade for the isolation card so the tiles dissolve gently at the
   bottom instead of ending in a hard cut. */
.card-image:has(.isolation-mockup) {
  min-height: 340px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 96%);
}
.iso-tile {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 180px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.iso-tile figcaption {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Glass icon chip inside each tile. */
.iso-glass {
  position: relative;
  display: grid;
  place-items: center;
  width: 90px;
  height: 90px;
  border-radius: 26px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    0 10px 22px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.iso-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 24% 10%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}
.iso-glass svg {
  position: relative;
  width: 46px;
  height: 46px;
}
/* Per-account tint: soft frosted background + matching icon colour. */
.iso-blue {
  background: linear-gradient(180deg, rgba(114, 196, 255, 0.32), rgba(31, 115, 232, 0.24));
}
.iso-blue .iso-glass svg,
.iso-blue figcaption { color: #1f6fe0; }
.iso-green {
  background: linear-gradient(180deg, rgba(159, 234, 185, 0.36), rgba(51, 166, 101, 0.24));
}
.iso-green .iso-glass svg,
.iso-green figcaption { color: #2c9e5f; }
.iso-orange {
  background: linear-gradient(180deg, rgba(255, 201, 91, 0.4), rgba(245, 109, 45, 0.24));
}
.iso-orange .iso-glass svg,
.iso-orange figcaption { color: #e2691f; }

.local-mockup {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 30px;
}

.local-mockup b {
  font-size: 25px;
  line-height: 30px;
  letter-spacing: -0.04em;
}

.local-mockup span {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 14px;
  color: rgba(0, 0, 0, 0.62);
  background: rgba(246, 248, 251, 0.92);
  font-size: 15px;
}

.weight-mockup {
  display: grid;
  gap: 18px;
  padding: 30px;
}

.weight-mockup div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  padding: 0 22px;
  border-radius: 20px;
  background: rgba(246, 248, 251, 0.92);
}

.weight-mockup div:first-child {
  color: #fff;
  background: #111914;
}

.weight-mockup strong {
  font-size: 18px;
  letter-spacing: -0.02em;
}

.weight-mockup span {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 22px;
}

/* Native card: checkmarks instead of size numbers. Green ticks read as
   "yes, this is true" without asserting any measurable figure. */
.native-mockup span {
  color: #34c759;
  font-size: 24px;
  font-weight: 700;
}
.native-mockup div:first-child span {
  color: #34c759;
}

.workspace-mockup {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 30px;
}

.workspace-mockup span {
  min-height: 86px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: rgba(0, 0, 0, 0.7);
  background: rgba(246, 248, 251, 0.92);
  font-size: 15px;
  font-weight: 700;
}

/* ── Card 4: real Google app icons, 2 rows, labelled, side fades ─────────── */
.workspace-image,
.noserver-image {
  /* These mockups place their own content; drop the shared bottom fade so the
     icons / shield aren't clipped, and neutralise the global `img { height:360 }`. */
  -webkit-mask-image: none;
  mask-image: none;
  display: flex;
  align-items: flex-end;
  padding: 0 0 34px;
}
/* No-server card: center the shield block in the card's free space instead of
   pinning it to the bottom. */
.noserver-image {
  margin-top: 0;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 0 0 8px;
}
.workspace-image img,
.noserver-image img {
  width: auto;
  height: auto;
  object-fit: contain;
}

.workspace-apps {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 12px;
  padding: 0 44px;
}
.workspace-apps figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.workspace-apps img {
  width: 44px;
  height: 44px;
}
.workspace-apps figcaption {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  letter-spacing: -0.01em;
}
/* White gradient fade on the left and right edges. */
.workspace-apps::before,
.workspace-apps::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 2;
}
.workspace-apps::before {
  left: 0;
  background: linear-gradient(90deg, #ededec, rgba(237, 237, 236, 0));
}
.workspace-apps::after {
  right: 0;
  background: linear-gradient(270deg, #ededec, rgba(237, 237, 236, 0));
}

/* Tile variant: each Google icon sits on a rounded white card with a soft
   shadow (used on the narrower Workspace card). */
.workspace-apps--tiles {
  gap: 22px 14px;
  padding: 0 20px;
}
.workspace-apps--tiles .app-tile {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}
.workspace-apps--tiles .app-tile img {
  /* Cap BOTH dimensions to 40 and keep natural ratio: wide marks (Gmail/Meet)
     size by width, tall marks (Docs/Slides) size by height, so none blow up and
     each stays centered by the tile's place-items. */
  width: auto;
  height: auto;
  max-width: 40px;
  max-height: 40px;
  object-fit: contain;
}

/* ── Card 1 (wide): Native — Swift (colour) vs Electron (grey) ──────────── */
.nativevs-image {
  -webkit-mask-image: none;
  mask-image: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 20px;
}
.nativevs {
  display: flex;
  align-items: stretch;
  gap: 20px;
}
.nativevs figure {
  position: relative;
  margin: 0;
  /* Both cards identical size regardless of label length. */
  width: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 34px 24px;
  border-radius: 26px;
  /* Glassmorphism (our style): frosted translucent pane + top highlight. */
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.18));
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    0 12px 28px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.nativevs figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 70% at 24% 6%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}
/* Winner (Swift): a soft blue tint + stronger glow. */
.nativevs-win {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.62), rgba(41, 123, 234, 0.12));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    0 16px 34px rgba(41, 123, 234, 0.18);
}
/* Loser (Electron): flatter, cooler, dimmed. */
.nativevs-lose {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.04));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    0 10px 22px rgba(0, 0, 0, 0.06);
}
/* ✓ / ✗ badge in the top-right corner of each card. */
.nativevs-mark {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
}
.nativevs-mark svg {
  width: 15px;
  height: 15px;
}
.nativevs-mark.good {
  background: #34c759;
}
.nativevs-mark.bad {
  background: rgba(0, 0, 0, 0.28);
}
.nativevs-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
}
.nativevs figcaption {
  position: relative;
}
.nativevs-icon img {
  width: 68px;
  height: 68px;
  object-fit: contain;
}
/* Swift stays full colour (the winner); Electron is desaturated + dimmed so it
   reads as the heavier, lesser option. */
.nativevs-icon.electron img {
  filter: grayscale(1) opacity(0.42);
}
.nativevs figcaption {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(0, 0, 0, 0.72);
}
.nativevs-lose figcaption {
  color: rgba(0, 0, 0, 0.4);
}

/* ── Card 2: privacy shield (Lucide shield-check) + local facts ─────────── */
.noserver-visual {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 0 32px;
}
.noserver-shield {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  border-radius: 34px;
  color: #297bea;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12)),
    radial-gradient(circle at 50% 30%, rgba(41, 123, 234, 0.22), rgba(41, 123, 234, 0.06) 72%);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 -8px 18px rgba(41, 123, 234, 0.1),
    0 18px 32px rgba(41, 123, 234, 0.16);
  overflow: hidden;
}
.noserver-shield::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 22% 8%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}
.noserver-shield svg {
  position: relative;
  width: 74px;
  height: 74px;
  filter: drop-shadow(0 2px 3px rgba(41, 123, 234, 0.25));
}
.noserver-facts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.noserver-facts li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
}
.noserver-facts .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34c759;
}

.privacy {
  position: relative;
  max-width: 1180px;
  /* bottom spacing brought in line with the other sections (was 320px, which
     left an oversized gap before the compare/pricing area) */
  margin: 80px auto 140px;
  padding: 0 20px;
}

.privacy-box {
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  border: 2px dotted rgba(0, 0, 0, 0.42);
  border-radius: 12px;
  text-align: center;
  background: var(--bg);
  padding-top: 74px;
}

.lock-top,
.lock-bottom {
  position: absolute;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
}

.lock-top {
  top: -25px;
  width: 78px;
}

.lock-bottom {
  bottom: -36px;
  /* Solid page-coloured pad so the dotted border doesn't run through the logo
     (the line visually breaks around it). */
  display: grid;
  place-items: center;
  width: 96px;
  height: 72px;
  background: var(--bg);
}
.lock-bottom img {
  width: 62px;
  height: 62px;
}

.ticker {
  position: absolute;
  top: 147px;
  left: 0;
  right: 0;
  overflow: hidden;
}

.ticker > div {
  width: max-content;
  display: flex;
  gap: 22px;
  animation: ticker 24s linear infinite;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(235, 235, 235, 0.92);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.toggle i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #f6b22e;
}

.toggle:not(.on) i {
  background: #fff8a8;
}

.toggle strong {
  padding: 3px 7px;
  background: #fff;
  border-radius: 4px;
  font-weight: 400;
}

.privacy h2 {
  display: grid;
  gap: 86px;
  max-width: 680px;
  margin-top: 0;
}

.privacy h2 span {
  display: block;
}

.privacy p {
  max-width: 680px;
  margin: 42px 20px 0;
  color: rgba(0, 0, 0, 0.64);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.learn-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 38px;
  margin-top: 40px;
  padding: 0 24px;
  border-radius: 999px;
  background: #eeeeed;
  color: rgba(0, 0, 0, 0.86);
  text-decoration: none;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0;
  transition: background 160ms ease;
}
.learn-button:hover {
  background: #e4e4e2;
}

@keyframes ticker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.footer {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.ready {
  /* Closing CTA mirrors the hero: royal-blue sky with the white moon/hill
     rising from below — the page ends where it began. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: min(1180px, calc(100vw - 40px));
  margin: clamp(48px, 6vw, 72px) auto clamp(56px, 6vw, 84px);
  padding: clamp(72px, 8vw, 104px) 20px clamp(64px, 7vw, 96px);
  text-align: center;
  background: #f8f8f8;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
}
.ready::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 90% 130% at 50% -30%, rgba(20, 78, 200, 0.95), rgba(41, 123, 234, 0.75) 45%, rgba(41, 123, 234, 0.5) 75%, rgba(41, 123, 234, 0.35) 100%);
}
.ready::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: clamp(120px, 26%, 170px);
  width: 170%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--bg, #f8f8f8);
  box-shadow: 0 -28px 80px rgba(255, 255, 255, 0.5);
}

.ready .primary-cta {
  margin-top: 42px;
}

.ready p {
  margin: 72px 0 96px;
  color: rgba(0, 0, 0, 0.48);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

/* ============================================================
   Testimonials marquee (.voices) — moved here from the standalone
   testimonials-preview.html so it lives on the real landing. CSS-only
   infinite scroll: the track holds two identical card sets and slides
   -50%, looping seamlessly. Pauses on hover; stops under reduced-motion.
   ============================================================ */
.voices {
  /* Section is commented out in preview.html until real quotes exist; these
     styles stay ready so it renders correctly when the markup is restored. */
  margin: 0 auto 120px;
  padding: 80px 0 0;
  text-align: center;
}
.voices-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0 0 22px;
}
.voices h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 650;
  letter-spacing: -0.05em;
  line-height: 1.166;
  font-variation-settings: "wght" 600;
}
.voices-sub {
  max-width: 500px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  padding: 0 20px;
}
.voices-marquee {
  margin-top: 56px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 4%,
    #000 96%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 4%,
    #000 96%,
    transparent
  );
}
.voices-track {
  display: flex;
  width: max-content;
  animation: voices-scroll 55s linear infinite;
}
.voices-marquee:hover .voices-track {
  animation-play-state: paused;
}
@keyframes voices-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.voice-card {
  flex: 0 0 540px;
  background: var(--surface);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(var(--accent-rgb), 0.1);
  padding: 30px 28px 26px;
  margin-right: 14px;
  display: flex;
  flex-direction: column;
  text-align: left;
  min-height: 230px;
}
.voice-card::before {
  content: "\201C";
  font-family: var(--font-serif);
  font-size: 60px;
  font-weight: 600;
  line-height: 0.7;
  color: rgba(var(--accent-rgb), 0.18);
  display: block;
  margin-bottom: 12px;
}
.voice-quote {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 24px;
}
.voice-who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  justify-content: flex-end;
}
.voice-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  order: 2;
}
.voice-who > span:last-child {
  display: flex;
  flex-direction: column;
}
.voice-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-align: right;
}
.voice-role {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.3;
  margin-top: 2px;
  text-align: right;
}
@media (prefers-reduced-motion: reduce) {
  .voices-track { animation: none; }
}
@media (max-width: 760px) {
  .voices h2 { font-size: 36px; }
  .voice-card { flex-basis: 86vw; }
}

.footer-links {
  width: min(1688px, calc(100vw - 180px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 180px 180px 180px 1fr;
  gap: 44px;
  align-items: start;
  /* breathing room between page content and the footer, on every page */
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: 20px;
}

.footer-links div {
  display: grid;
  gap: 12px;
}

.footer-links strong,
.footer-links a,
.copyright {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 0.1em;
}

.footer-links strong {
  margin-bottom: 4px;
  color: rgba(0, 0, 0, 0.92);
}

.footer-links a {
  color: rgba(0, 0, 0, 0.48);
}

.footer-links .dearnode-logo {
  width: 195px;
  display: block;
  justify-self: end;
  /* small top padding so the ascenders (the "d") aren't clipped by the grid */
  margin-top: 2px;
  text-transform: none;
  opacity: 0.94;
  transition: opacity 160ms ease;
}

.footer-links .dearnode-logo:hover {
  opacity: 1;
}

.footer-links .dearnode-logo img {
  width: 100%;
  max-width: none;
  height: auto;
}

/* One clean bottom bar (Dia-style): built-by on the left, year + label on the
   right. No more absolutely-positioned scattered pieces. */
.copyright {
  width: min(1688px, calc(100vw - 180px));
  /* bottom margin replaces the breathing room the old orbit stage gave */
  margin: 20px auto clamp(56px, 7vh, 96px);
  padding-top: 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: rgba(0, 0, 0, 0.5);
}

.copyright-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.copyright-built {
  text-align: left;
}

.copyright-legal {
  color: rgba(0, 0, 0, 0.38);
  font-size: 11px;
  line-height: 1.5;
}

.thanks-page {
  background: #f8f8f8;
}

.thanks-main {
  width: 100%;
  margin: 0 auto;
  padding: 115px 0 120px;
}

.thanks-hero {
  width: min(1440px, calc(100vw - 40px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.thanks-hero h1 {
  max-width: 20ch;
  margin: 0;
  color: rgba(0, 0, 0, 0.85);
  font-size: 54px;
  font-weight: 300;
  line-height: 60px;
  letter-spacing: -0.045em;
}

.thanks-hero h1 span {
  display: block;
}

.thanks-hero h1 em {
  color: inherit;
  background: none;
  font-style: normal;
}

.download-note {
  width: min(100%, 920px);
  min-height: 48px;
  margin: 46px auto 60px;
  display: block;
  padding: 8px 24px;
  border-radius: 999px;
  color: rgba(0, 0, 0, 0.44);
  background: rgba(0, 0, 0, 0.06);
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.03em;
}

.download-note a {
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
}

.license-fallback {
  width: min(560px, 100%);
  margin-top: 32px;
  padding: 18px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.license-status {
  margin: 0;
  color: rgba(0, 0, 0, 0.68);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.license-key-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}

.license-key-row code {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 12px;
  background: #111914;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 0.08em;
}

.license-key-row button {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  background: #eeeeed;
  font-size: 14px;
  font-weight: 700;
}

.license-email {
  margin: 10px 0 0;
  color: rgba(0, 0, 0, 0.52);
  font-size: 13px;
  line-height: 1.4;
}

.install-steps {
  width: min(1220px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 64px;
  text-align: left;
}

.install-step {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.install-visual {
  height: 320px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 12%, rgba(var(--accent-rgb), 0.12), transparent 34%),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.08);
}

.install-step p {
  margin: 0;
}

.install-copy {
  display: grid;
  gap: 7px;
}

.install-caption {
  color: rgba(0, 0, 0, 0.6);
  font-size: 18px;
  line-height: 27px;
  letter-spacing: -0.02em;
}

.install-caption strong,
.install-caption b {
  color: #000;
  font-weight: 600;
}

.install-subcopy {
  color: rgba(0, 0, 0, 0.46);
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.01em;
}

.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-size: 1em;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.orbit-login-window,
.orbit-session-window,
.orbit-switch-window {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 18px 42px rgba(0, 0, 0, 0.08);
}

.orbit-window-bar {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(248, 249, 252, 0.78);
}

.orbit-window-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.13);
}

.orbit-login-panel {
  min-height: calc(100% - 38px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 13px;
  padding: 26px;
  text-align: center;
}

.google-wordmark {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.google-wordmark span:nth-child(1),
.google-wordmark span:nth-child(4) {
  color: #4285f4;
}

.google-wordmark span:nth-child(2),
.google-wordmark span:nth-child(6) {
  color: #ea4335;
}

.google-wordmark span:nth-child(3) {
  color: #fbbc05;
}

.google-wordmark span:nth-child(5) {
  color: #34a853;
}

.orbit-login-panel strong {
  color: rgba(0, 0, 0, 0.82);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.02em;
}

.google-signin-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  background: #fff;
  color: rgba(0, 0, 0, 0.74);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
}

.google-g-mark {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #4285f4;
  background: rgba(66, 133, 244, 0.08);
  font-weight: 700;
  letter-spacing: 0;
}

.orbit-login-panel small {
  color: rgba(0, 0, 0, 0.38);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
}

.orbit-session-window {
  display: grid;
  grid-template-columns: 66px 1fr;
  background: rgba(250, 251, 253, 0.88);
}

.orbit-session-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  background: rgba(255, 255, 255, 0.62);
}

.orbit-session-sidebar img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(var(--accent-rgb), 0.22));
}

.session-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
  font-size: 14px;
  font-weight: 700;
}

.session-avatar--blue {
  background: linear-gradient(180deg, #73c5ff, var(--accent));
}

.session-avatar--green {
  background: linear-gradient(180deg, #8de8ac, #21935a);
}

.session-avatar--orange {
  background: linear-gradient(180deg, #ffc866, #e36c2e);
}

.orbit-session-stack {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 18px;
}

.session-room {
  min-height: 58px;
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-left-width: 4px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.session-room--blue {
  border-left-color: var(--accent);
}

.session-room--green {
  border-left-color: #21935a;
}

.session-room--orange {
  border-left-color: #e36c2e;
}

.session-room strong,
.shortcut-account-card strong {
  display: block;
  color: rgba(0, 0, 0, 0.82);
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  letter-spacing: -0.015em;
}

.session-room span:not(.session-avatar),
.shortcut-account-card span:not(.session-avatar) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
  color: rgba(0, 0, 0, 0.42);
  font-size: 11px;
  line-height: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.session-room i {
  color: rgba(var(--accent-rgb), 0.78);
  font-size: 13px;
}

.orbit-switch-window {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 28px;
}

.shortcut-keys {
  display: flex;
  justify-content: center;
  gap: 9px;
}

.shortcut-key {
  min-width: 56px;
  min-height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(17, 25, 20, 0.08);
  color: rgba(0, 0, 0, 0.56);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.02em;
}

.shortcut-key.is-active {
  background: #111914;
  color: #fff;
  box-shadow: 0 12px 26px rgba(17, 25, 20, 0.18);
}

.shortcut-account-card {
  min-height: 64px;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 13px;
  padding: 12px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.shortcut-app-icons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.shortcut-app-icons img {
  width: 31px;
  height: 31px;
  object-fit: contain;
  border-radius: 9px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.thanks-faq {
  width: min(1220px, 100%);
  margin: 120px auto 0;
  padding: 0 10px;
}

.thanks-faq h2 {
  margin: 0 0 60px;
  text-align: center;
  color: rgba(0, 0, 0, 0.85);
  font-size: 54px;
  font-weight: 300;
  line-height: 60px;
  letter-spacing: -0.04em;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-list details {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition: border-color 200ms ease;
}

.faq-list details:hover {
  border-color: rgba(0, 0, 0, 0.18);
}

.faq-list summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.86);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::before {
  content: "+";
  width: 12px;
  flex: 0 0 12px;
  color: rgba(0, 0, 0, 0.42);
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  transition: transform 240ms ease, color 200ms ease;
}

.faq-list details[open] summary::before {
  content: "-";
  color: rgba(0, 0, 0, 0.68);
}

.faq-answer {
  overflow: hidden;
}

.faq-list.is-animated .faq-answer {
  height: 0;
  opacity: 0;
  transition:
    height 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease;
}

.faq-list.is-animated details[open] .faq-answer {
  opacity: 1;
}

.faq-answer p {
  margin: 0;
  padding: 0 0 32px 24px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
}

@media (max-width: 900px) {
  .site-header {
    top: 16px;
    padding: 0 16px;
  }

  .desktop-nav,
  .download-float {
    display: none;
  }

  .mobile-shell {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    border-radius: 22px;
    background: var(--nav-bg);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }

  .mobile-logo {
    width: 51px;
    height: 51px;
    display: grid;
    place-items: center;
  }

  .mobile-logo img {
    width: 47px;
    height: 47px;
    object-fit: contain;
  }

  .menu-button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: transparent;
  }

  .menu-button span {
    width: 18px;
    height: 1.5px;
    grid-area: 1 / 1;
    background: #000;
    transition: transform 180ms ease;
  }

  .menu-button span:first-child {
    transform: translateY(-4px);
  }

  .menu-button span:last-child {
    transform: translateY(4px);
  }

  .site-header.is-open .menu-button span:first-child {
    transform: rotate(45deg);
  }

  .site-header.is-open .menu-button span:last-child {
    transform: rotate(-45deg);
  }

  .mobile-menu {
    margin-top: 10px;
    padding: 18px;
    display: none;
    flex-direction: column;
    gap: 14px;
    border-radius: 18px;
    background: rgba(249, 249, 248, 0.96);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.12);
    font-size: 18px;
  }

  .site-header.is-open .mobile-menu {
    display: flex;
  }

  .hero {
    min-height: 900px;
  }

  .hero-glow {
    height: 430px;
    filter: blur(12px);
  }

  .hero-orbit {
    top: 286px;
    width: 760px;
    height: 760px;
  }

  .hero-copy {
    justify-content: flex-start;
    min-height: auto;
    padding: 170px 24px 0;
  }

  .hero-copy p {
    font-size: 38px;
    line-height: 1.08;
    transform: none;
  }

  .hero-copy .display-word {
    font-size: 44px;
    line-height: 1;
  }

  .hero-copy .hero-subcopy {
    max-width: 300px;
    margin-top: 34px;
    font-size: 16px;
  }

  .primary-cta {
    width: min(280px, 100%);
    min-height: 57px;
    margin-top: 24px;
    font-size: 17px;
  }

  .cinema {
    width: calc(100vw - 32px);
    margin-top: 28px;
  }

  .between-tabs {
    min-height: auto;
    margin: 80px auto;
    padding: 0 20px;
  }

  .between-tabs h2,
  .work-cards h2,
  .privacy h2,
  .ready h2 {
    font-size: 40px;
  }

  .step-layout {
    position: static;
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 40px;
  }

  /* Mobile: Dia-style stack — the sticky-text + switching-mockup desktop layout
     becomes a simple vertical sequence. JS (mobileStepStack) hides .step-nav
     and clones each step's copy in BETWEEN the mockups so the order reads
     mockup → copy → mockup → copy → mockup → copy. */
  .step-nav {
    display: none;
  }

  .step-media {
    order: 2;
    position: static;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* mockups no longer overlap — each sits in normal flow, full opacity */
  .step-media article {
    position: static;
    inset: auto;
    opacity: 1;
    transform: none;
    margin: 0;
  }

  /* copy block injected after each mockup */
  .step-copy-mobile {
    padding: 22px 4px 44px;
  }
  .step-copy-mobile span {
    display: block;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--muted, rgba(0, 0, 0, 0.5));
    margin-bottom: 8px;
  }
  .step-copy-mobile strong {
    display: block;
    font-family: var(--font-serif, "Fraunces", Georgia, serif);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--ink, #1c1b1f);
    margin-bottom: 10px;
  }
  .step-copy-mobile p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--muted, rgba(0, 0, 0, 0.56));
  }

  .account-demo {
    min-height: auto;
    border-radius: 14px;
  }

  .demo-toolbar {
    height: 48px;
    padding: 0 14px;
  }

  .demo-toolbar strong {
    font-size: 13px;
  }

  .demo-toolbar em {
    display: none;
  }

  .demo-body,
  .real-window {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .account-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  }

  .account-row {
    min-height: 48px;
    grid-template-columns: 28px 1fr;
    padding: 0 10px;
  }

  .account-row b {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }

  .account-row em {
    display: none;
  }

  .demo-panel,
  .real-main {
    padding: 20px;
  }

  .gmail-head {
    display: grid;
    gap: 4px;
    margin-bottom: 18px;
  }

  .gmail-head strong {
    font-size: 26px;
    line-height: 32px;
  }

  .mail-row {
    min-height: 64px;
    padding: 13px 14px;
  }

  .shortcut-hint {
    width: 100%;
    text-align: center;
  }

  .session-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 20px;
  }

  .session-card {
    min-height: 92px;
  }

  .real-window aside {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 18px;
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  }

  .real-window aside b {
    grid-column: 1 / -1;
  }

  .search-bar {
    height: 44px;
  }

  .real-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 4px;
  }

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

  /* Stack full-width on mobile — drop the asymmetric column spans so the
     7/5 tracks don't overflow the single column. */
  .feature-card:nth-child(1),
  .feature-card:nth-child(2),
  .feature-card:nth-child(3),
  .feature-card:nth-child(4) {
    grid-column: span 1;
  }

  .feature-card {
    min-height: 520px;
  }

  .feature-card h3 {
    margin: 20px 24px 0;
    font-size: 25px;
  }

  .feature-card p {
    margin: 12px 24px 28px;
    font-size: 17px;
  }

  .pill {
    margin: 24px 24px 0;
  }

  .feature-mockup {
    width: calc(100% - 48px);
    min-height: 220px;
  }

  .isolation-mockup,
  .local-mockup,
  .weight-mockup,
  .workspace-mockup {
    padding: 22px;
  }

  .isolation-mockup span {
    min-height: 54px;
  }

  .isolation-mockup {
    gap: 10px;
    padding: 0 16px;
  }

  .isolation-mockup .iso-tile {
    min-height: 250px;
  }

  .iso-glass {
    width: 74px;
    height: 74px;
  }

  .iso-glass svg {
    width: 38px;
    height: 38px;
  }

  .iso-tile figcaption {
    font-size: 15px;
  }

  .nativevs {
    width: 100%;
    justify-content: center;
    gap: 12px;
  }

  .nativevs figure {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: 168px;
    padding: 24px 12px;
  }

  .nativevs-icon {
    width: 60px;
    height: 60px;
  }

  .nativevs-icon img {
    width: 48px;
    height: 48px;
  }

  .workspace-mockup {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-apps {
    padding: 0 28px;
    gap: 22px 8px;
  }
  .workspace-apps img {
    width: 38px;
    height: 38px;
  }
  .workspace-apps::before,
  .workspace-apps::after {
    width: 30px;
  }

  .privacy {
    margin-bottom: 130px;
  }

  .privacy-box {
    min-height: 620px;
    padding: 70px 0 56px;
  }

  .ticker {
    top: 196px;
  }

  .privacy h2 {
    gap: 144px;
    margin-top: 0;
  }

  .privacy p {
    margin-top: 34px;
    padding: 0 22px;
    font-size: 18px;
  }

  .footer-links {
    width: calc(100vw - 40px);
    grid-template-columns: 1fr 1fr;
    gap: 36px 26px;
  }

  .footer-links .dearnode-logo {
    width: 190px;
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: 10px;
  }

  .footer-links .dearnode-logo img {
    width: 100%;
  }

  .copyright {
    width: calc(100vw - 40px);
    margin-bottom: clamp(40px, 6vh, 64px);
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

  .copyright-bar {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .copyright-built {
    text-align: center;
  }

  .thanks-main {
    width: 100%;
    padding: 108px 0 104px;
  }

  .thanks-hero h1 {
    font-size: 36px;
    line-height: 41px;
    letter-spacing: -0.04em;
  }

  .download-note {
    min-height: auto;
    margin: 36px auto 48px;
    padding: 14px 20px;
    border-radius: 24px;
    font-size: 18px;
    line-height: 1.35;
  }

  .license-fallback {
    width: calc(100vw - 40px);
  }

  .install-steps {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 60px;
  }

  .install-visual {
    height: 320px;
    padding: 18px;
    border-radius: 20px;
  }

  .orbit-switch-window {
    padding: 22px;
  }

  .install-caption {
    font-size: 18px;
    line-height: 27px;
  }

  .install-subcopy {
    font-size: 15px;
    line-height: 22px;
  }

  .thanks-faq {
    width: 100%;
    margin-top: 120px;
    padding: 0 10px;
  }

  .thanks-faq h2 {
    margin-bottom: 60px;
    font-size: 36px;
    line-height: 41px;
  }

  .faq-list summary {
    min-height: 44px;
    font-size: 16px;
    line-height: 24px;
  }

  .faq-list p {
    padding-left: 24px;
    font-size: 16px;
  }
}

/* ============================================================
   Home blog teaser (preview.html → becomes the landing on launch).
   Latest posts, footer-adjacent, on the site tokens. Quiet — the page's
   job is still conversion; this is a secondary "we write" signal + SEO
   internal links into /blog/.
   ============================================================ */
.home-blog {
  width: min(1200px, calc(100vw - 48px));
  margin: 0 auto;
  padding: clamp(72px, 9vw, 120px) 0 clamp(56px, 6vw, 84px);
  /* hairline closes the blog section so it reads as content that's ENDED,
     separating it from the big footer CTA below (otherwise the small cards
     bleed straight into the page's strongest call-to-action). */
  border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.08));
}
.home-blog-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.home-blog-eyebrow {
  display: block;
  width: 100%;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, #2d6fe8);
  margin-bottom: 10px;
}
.home-blog-head h2 {
  margin: 0;
  font-family: var(--font-serif, "Fraunces", Georgia, serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink, #1c1b1f);
}
.home-blog-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 15px var(--font-sans, Helvetica, Arial, sans-serif);
  color: var(--accent, #2d6fe8);
  text-decoration: none;
  white-space: nowrap;
}
.home-blog-all span { transition: transform 0.18s ease; }
.home-blog-all:hover span { transform: translateX(3px); }

.home-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.home-blog-card {
  display: block;
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius, 18px);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink, #1c1b1f);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.home-blog-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb, 45, 111, 232), 0.4);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.07);
}
.home-blog-card img {
  display: block;
  width: 100%;
  height: 224px;
  object-fit: cover;
  background: #eef1f4;
}
.home-blog-card-body {
  padding: 20px 22px 24px;
}
.home-blog-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 11px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(var(--accent-rgb, 45, 111, 232), 0.08);
  color: var(--accent, #2d6fe8);
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.home-blog-card-body h3 {
  margin: 0 0 8px;
  font-family: var(--font-sans, Helvetica, Arial, sans-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink, #1c1b1f);
}
.home-blog-card-body p {
  margin: 0;
  color: var(--muted, rgba(0, 0, 0, 0.55));
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .home-blog-grid { grid-template-columns: 1fr; }
  .home-blog-card img { height: 180px; }
}

/* ============================================================
   Shared page header (eyebrow + serif title + lede) — the single source of
   truth for centered page intros. Used by /blog and /contact (and any future
   page) so their headers match exactly. The legacy class names (.blog-* /
   .help-*) are aliased here too, so existing markup needs no changes.
   ============================================================ */
.page-eyebrow,
.blog-eyebrow,
.help-hero-eyebrow {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, #2d6fe8);
  margin: 0 0 14px;
}

.page-title,
.blog-head h1,
.help-page h1,
.post-hero h1 {
  margin: 0 0 16px;
  /* Unified with the section-title spec (design tokens). Match the section h2
     variation exactly — wght only. Setting opsz 144 maxes the thick/thin stroke
     contrast, which is what made this title render unevenly. */
  font-family: var(--font-serif, "Fraunces", Georgia, serif);
  font-variation-settings: "wght" var(--h-display-weight);
  font-size: clamp(44px, 6vw, 56px);
  font-weight: var(--h-display-weight);
  letter-spacing: var(--h-display-tracking);
  line-height: 1.05;
  color: var(--ink, #1c1b1f);
}

.page-lede,
.blog-head p,
.help-page .help-lede {
  margin: 16px auto 0;
  max-width: 56ch;
  color: var(--muted, rgba(0, 0, 0, 0.56));
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  text-align: center;
}

/* ── ALT Privacy: data-flow diagram (comparison version) ─────────────────── */
.privacy-flow {
  max-width: 1080px;
  margin: 0 auto 120px;
  padding: 0 24px;
  text-align: center;
}
.privacy-flow h2 {
  /* Unified section-title spec (design tokens). */
  font-family: var(--font-serif);
  font-size: var(--h-display);
  font-weight: var(--h-display-weight);
  letter-spacing: var(--h-display-tracking);
  line-height: var(--h-display-line);
  font-variation-settings: "wght" var(--h-display-weight);
  color: var(--ink);
  /* Breathing room below the title before the diagram cards. */
  margin: 0 0 var(--h-display-gap);
}
.privacy-flow h2 em {
  /* Own line (2-line title, like the other section headings). */
  display: block;
  font-style: normal;
  color: inherit;
}
.pf-sub {
  max-width: 640px;
  margin: 0 auto 48px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.6);
}
.pf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.pf-card {
  border-radius: 22px;
  padding: 28px 26px 26px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.07);
  background: #f4f5f7;
}
.pf-card header {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 22px;
}
/* Both cards share the same neutral surface — the difference lives in the flow,
   not a background tint (the blue fill read as arbitrary). */
/* the flow row: nodes + arrows */
.pf-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 10px;
}
/* Every node is the SAME fixed size, so the row reads as an even flow. */
.pf-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 104px;
  height: 104px;
  flex: 0 0 104px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.72);
}
.pf-node b { font-size: 13px; font-weight: 600; }
/* Tinted icon chip inside each node — keeps the glyph sizing consistent. */
.pf-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.05);
}
.pf-ico svg { width: 22px; height: 22px; }
.pf-danger { color: #e0533d; }
.pf-danger .pf-ico { background: rgba(224, 83, 61, 0.12); }
.pf-mac { color: #297bea; border-color: rgba(41, 123, 234, 0.25); }
.pf-mac .pf-ico { background: rgba(41, 123, 234, 0.14); }
.pf-arrow {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.28);
  flex: 0 0 auto;
}
.pf-orbit .pf-arrow-two { color: #297bea; }
/* "Ends here. No server." — a calm dashed endcap after the Mac node. */
.pf-endcap {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(41, 123, 234, 0.8);
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px dashed rgba(41, 123, 234, 0.4);
  max-width: 96px;
}
.pf-note {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.5;
}
.pf-note-bad { color: rgba(180, 62, 44, 0.8); }
.pf-note-good { color: rgba(41, 123, 234, 0.78); }
.pf-learn { margin-top: 40px; }

@media (max-width: 720px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-flow { justify-content: center; }
}

/* ── Privacy proof — merged section (ticker + diagram → claim chips), 7/2 ──
   The claims ARE the design: mono pills with a verified-green dot under the
   one-line manifesto. Replaces .privacy (ticker) and .privacy-flow (diagram);
   their styles above are retired with the markup (kept for git archaeology). */
.privacy-proof {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 150px;
  text-align: center;
}
.privacy-proof h2 {
  font-family: var(--font-serif);
  font-size: var(--h-display);
  font-weight: var(--h-display-weight);
  letter-spacing: var(--h-display-tracking);
  line-height: var(--h-display-line);
  font-variation-settings: "wght" var(--h-display-weight);
  color: var(--ink);
  margin: 0 0 26px;
}
.privacy-proof h2 em {
  display: block;
  font-style: normal;
  color: inherit;
}
.pp-manifesto {
  max-width: 540px;
  margin: 0 auto 42px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}
.pp-chips {
  list-style: none;
  margin: 0 auto 44px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 920px;
}
.pp-chips li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.pp-chips li i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 0 3px rgba(0, 138, 74, 0.14);
}
.pp-chips li strong {
  color: var(--ink);
  font-weight: 600;
}

/* Belt-and-braces: never let stray horizontal overflow move the page.
   'clip' (unlike 'hidden') doesn't turn body into a scroll container;
   the 'hidden' line is the fallback for older engines. */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

@media (max-width: 760px) {
  /* Kill the min-content track expansion that let the step mockups force the
     page wider than the viewport (586px at a 390px viewport — the mobile
     horizontal-scroll bug). minmax(0,1fr) lets the track shrink below the
     mockups' intrinsic width; min-width:0 does the same for the items. */
  .step-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .step-media,
  .step-media article {
    min-width: 0;
    max-width: 100%;
  }
  .step-shot img {
    max-width: 100%;
  }
  .step-media article .account-demo,
  .step-media article .realgmail-free {
    width: 100%;
  }
  /* Mobile: undo the desktop stagger + shrink tiles so the icon grid fits. */
  .realgmail-apps figure:nth-child(5),
  .realgmail-apps figure:nth-child(6),
  .realgmail-apps figure:nth-child(7),
  .realgmail-apps figure:nth-child(8) {
    transform: none;
  }
  .realgmail-apps img {
    width: 38px;
    height: 38px;
    padding: 12px;
    border-radius: 16px;
  }

  /* The table's min-width inside the swipe wrapper still leaks into the
     document's scrollable-overflow metric in Blink; contain:paint scopes it
     to the wrapper (the wrapper itself keeps scrolling horizontally). */
  .compare-scroll {
    contain: paint;
  }

  /* Sealed-off mockup: the desktop rail+main grid (210px column + fixed
     paddings) gets cropped by the card's overflow:hidden once the card
     shrinks to the viewport — stack to one column, drop the decorative rail. */
  .sealed-rail {
    display: none;
  }
  .sealed-body {
    grid-template-columns: 1fr;
  }
  .sealed-main {
    padding: 34px 20px;
    gap: 28px;
  }
  .sealed-badges {
    gap: 18px;
  }
  .sealed-chips {
    flex-wrap: wrap;
    justify-content: center;
  }

  .privacy-proof {
    padding: 10px 20px 110px;
  }
  .pp-chips {
    gap: 10px;
  }
  .pp-chips li {
    padding: 10px 14px;
    font-size: 12px;
  }

  /* Privacy diagram (#security-alt): stack the two flow cards and let them
     shrink below their min-content width so they don't spill past the
     viewport while the ticker-vs-diagram comparison is still undecided. */
  .pf-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pf-card {
    min-width: 0;
    max-width: 100%;
  }
}

/* ── Sealed rooms (step 02 media, rebuilt 7/7) — two accounts side by side,
   each with its own identity and session facts, split by a locked wall.
   Replaces the abstract shield/key icons (.sealed-body et al, now unused). */
/* Match the sealed/realgmail mockups to the step-01 screenshot's width
   (the PNG renders at 80% of the media column), so all three steps read
   as the same object. Mobile resets to full width below. */
.step-media article .account-demo,
.step-media article .realgmail-free {
  width: 80%;
  margin: 0 auto;
}

.sealed-rooms {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  min-height: 340px;
}
.sealed-room {
  padding: 46px 32px 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 24px;
  background:
    radial-gradient(420px 260px at 50% 0%, rgba(var(--tone), 0.07), transparent 70%);
}
.sr-id {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}
.sr-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  box-shadow:
    0 0 0 3px #fff,
    0 10px 24px rgba(var(--tone), 0.25);
  flex-shrink: 0;
}
.sr-id strong {
  display: block;
  font-size: 16.5px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sr-id div span {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0;
}
.sr-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
/* Pills follow the design-system badge spec (.sg-badge in styleguide.html):
   soft-UI pill, sans 600, white→tone gradient face, inset top highlight. */
.sr-facts li {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(180deg, #ffffff, rgba(var(--tone), 0.08));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    0 4px 10px rgba(0, 0, 0, 0.06);
  font: 600 13px var(--font-sans);
  color: rgb(var(--tone));
  white-space: nowrap;
}
.sr-facts li i {
  display: none;
}
.sealed-wall {
  position: relative;
  width: 1px;
  background: rgba(0, 0, 0, 0.12);
  margin: 26px 0;
}
.sw-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffffff, #f3f4f6);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    0 10px 24px rgba(0, 0, 0, 0.10);
  color: var(--ink);
}
.sw-lock svg {
  width: 26px;
  height: 26px;
}

@media (max-width: 760px) {
  .sealed-rooms {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .sealed-room {
    padding: 34px 24px;
    gap: 20px;
  }
  .sealed-wall {
    width: auto;
    height: 1px;
    margin: 0 26px;
  }
}

/* (sw-note wall caption removed 7/8 — lock badge carries the message.) */

/* Hero: risk-free line under the CTA (customer-audit fix, 7/7). */
.hero-trial {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.56);
}
.hero-trial > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-trial svg {
  width: 14px;
  height: 14px;
  color: var(--positive, #008a4a);
  flex-shrink: 0;
}

/* Sealed wall caption. */
.sw-note {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 10px;
  background: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.38);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .sw-note {
    display: none;
  }
}

/* ── Privacy diagram — promoted to the work-card system (7/8) ──
   Same surface + white mono pill labels as the feature cards above it,
   larger nodes/type so the section reads at a glance. Overrides the
   original .pf-* rules by cascade order. */
.privacy-flow {
  max-width: 1180px;
}
.pf-card {
  background: #ededec;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 36px 30px;
}
.pf-card header {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 999px;
  background: #fff;
  color: rgba(0, 0, 0, 0.66);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: none;
  margin-bottom: 30px;
}
.pf-node {
  width: 124px;
  height: 124px;
  flex: 0 0 124px;
}
.pf-node b {
  font-size: 14.5px;
}
.pf-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}
.pf-ico svg {
  width: 26px;
  height: 26px;
}
.pf-note {
  margin-top: 26px;
  font-size: 15.5px;
  font-weight: 600;
}

/* ── 7/8 refinements ──────────────────────────────────────────────────── */

/* Step-03 icons: wrap each mark in the same soft tile as the Workspace
   card (.app-tile spec) instead of floating bare on the background. */
.realgmail-apps img {
  width: 52px;
  height: 52px;
  padding: 18px;
  box-sizing: content-box;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 22px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.09);
}

/* Sealed-room pills: unified on the white mono pill (same family as the
   work-card pills and the privacy-diagram labels). Account color returns
   as a small dot instead of tinted gradients. */
.sr-facts li {
  gap: 9px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  font: 400 13px var(--font-mono);
  letter-spacing: -0.02em;
  color: rgba(0, 0, 0, 0.66);
}
.sr-facts li i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--tone));
  flex-shrink: 0;
}


/* Pricing: shrink the currency symbol so the number leads (7/8). */
.price .cur {
  font-size: 0.55em;
  font-weight: 600;
  position: relative;
  top: -0.5em;
  margin-right: 1px;
  letter-spacing: 0;
}

/* Closing card: bare brand mark floating in the blue sky (7/8). */
.ready-mark {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 30px;
}

/* Fixed-nav offset for in-page anchor jumps (footer links to #security,
   #pricing, etc.) — applies on every page that loads this sheet. */
[id] {
  scroll-margin-top: 118px;
}


/* Orbit's own mark leads the header row (7/8). */
.compare-col--orbit .compare-mark {
  width: 62px;
  height: 62px;
  margin-bottom: 4px;
}

/* Kill the table's top rule inside the Orbit card; the cap overlaps the cell
   edge by 3px to mask any seam. */
.compare thead th.compare-col--orbit {
  border-top: 0;
}


/* Mobile: the enlarged privacy-diagram nodes must fit a 390px viewport. */
@media (max-width: 760px) {
  .pf-node {
    width: 92px;
    height: 92px;
    flex: 0 0 92px;
  }
  .pf-node b {
    font-size: 12.5px;
  }
  .pf-ico {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }
  .pf-ico svg {
    width: 20px;
    height: 20px;
  }
  .pf-card {
    padding: 26px 14px;
  }
}

/* ── Mobile launch fixes (7/8, pre-launch audit) ─────────────────────────
   Appended LAST on purpose: these override the .pf-, .sr- and .nativevs
   rules above by cascade order. Desktop is untouched — everything lives
   inside max-width media blocks. */
@media (max-width: 760px) {
  /* P0-2: privacy diagram — stack the You → Cloud → Mail flow vertically.
     Arrows are text glyphs (→ / ↔); rotating 90° turns them into ↓ / ↕. */
  .pf-flow {
    flex-direction: column;
    gap: 8px;
  }
  .pf-arrow {
    display: inline-block;
    transform: rotate(90deg);
  }
  .pf-endcap {
    max-width: none;
  }

  /* P0-3: floating pill nav — smaller footprint so it covers less content
     while scrolling. (Sections already clear it via scroll-margin-top.) */
  .mobile-shell {
    height: 52px;
    padding: 0 10px;
    border-radius: 18px;
  }
  .mobile-logo {
    width: 42px;
    height: 42px;
  }
  .mobile-logo img {
    width: 40px;
    height: 40px;
  }

  /* P1-4: tap targets ≥ 44×44 (padding/size only, no layout change). */
  .menu-button {
    width: 44px;
    height: 44px;
  }
  .cinema-control {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  /* P0-1: sealed-room fact pills — long labels ("Own labels · Clients,
     Invoices") were nowrap and pushed the card past the viewport. */
  .sealed-room {
    padding-left: 16px;
    padding-right: 16px;
  }
  .sr-facts {
    gap: 7px;
  }
  .sr-facts li {
    padding: 5px 8px;
    font-size: 12px;
    letter-spacing: -0.035em;
    white-space: normal;
    text-align: center;
    max-width: 100%;
    line-height: 1.35;
  }

  /* Mobile comparison table: keep the Orbit column highlight, but remove the
     lifted-card caps that look detached inside the horizontal scroller. */
  .compare thead th.compare-col--orbit::after,
  .compare-table tbody tr:last-child td.compare-col--orbit::after {
    display: none;
  }
}

@media (max-width: 400px) {
  /* P0-1: iPhone SE (320px) — shrink the widest components until the
     document actually fits; the overflow-x:clip guard is only a backstop. */
  .sealed-room {
    padding: 30px 12px;
  }
  .nativevs {
    gap: 12px;
    width: 100%;
    justify-content: center;
  }
  .nativevs figure {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: 168px;
    padding: 28px 12px;
  }
  .pf-card {
    padding: 22px 10px;
  }
  .pp-chips li {
    white-space: normal;
    text-align: center;
  }
  .hero-trial {
    flex-wrap: wrap;
    gap: 10px 20px;
  }
}

/* Product Hunt "Featured on" badge (launch week). */
.ph-badge {
  display: inline-block;
  margin-top: 30px;
  line-height: 0;
  transition: transform 0.16s ease;
}
.ph-badge:hover { transform: translateY(-2px); }
.ph-badge img { width: 250px; height: 54px; }
.ph-badge--footer { margin-top: 26px; }


/* Hero badge sits above the title (launch week). */
.ph-badge--hero {
  margin-top: 0;
  margin-bottom: 18px;
}

.ph-result {
  display: block;
  margin: 0 0 24px;
  transition: transform 180ms ease;
}

.ph-result:hover {
  transform: translateY(-2px);
}

.ph-result-badge {
  width: 230px;
  display: block;
  margin: 0 auto;
  line-height: 0;
  filter: drop-shadow(0 10px 20px rgba(255, 97, 85, 0.1));
}

.ph-result-badge img {
  width: 230px;
  height: auto;
}

@media (max-width: 760px) {
  .ph-result {
    margin-bottom: 20px;
  }

  .ph-result-badge {
    width: 210px;
  }

  .ph-result-badge img {
    width: 210px;
  }
}