@charset "utf-8";

:root {
  color-scheme: light;
  --ink: #14182a;
  --ink-soft: #3f4864;
  --paper: #fcfbff;
  --paper-blue: #f1f5ff;
  --panel: rgba(255, 255, 255, 0.8);
  --line: rgba(23, 35, 73, 0.14);
  --blue: #1976ff;
  --blue-strong: #0759d6;
  --violet: #7745f7;
  --mint: #18b790;
  --gold: #f6b600;
  --shadow: 0 24px 70px rgba(31, 53, 121, 0.14);
  --round: 1.25rem;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  min-width: 20rem;
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(46, 122, 255, 0.14), transparent 30rem),
    radial-gradient(circle at 97% 20%, rgba(123, 77, 255, 0.11), transparent 31rem),
    var(--paper);
  font-size: 1rem;
  line-height: 1.6;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(21, 39, 91, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 39, 91, 0.025) 1px, transparent 1px);
  background-size: 2rem 2rem;
  content: "";
  mask-image: linear-gradient(to bottom, black, transparent 62%);
}

a {
  color: var(--blue-strong);
  text-underline-offset: 0.16em;
}

a:hover {
  color: #0046ac;
}

a:focus-visible,
button:focus-visible {
  outline: 0.2rem solid #f6bd32;
  outline-offset: 0.22rem;
}

img {
  max-width: 100%;
}

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

h1,
h2,
h3 {
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

h1 {
  max-width: 12ch;
  margin-bottom: 1.35rem;
  font-size: clamp(3rem, 7.2vw, 6.8rem);
}

h2 {
  margin-bottom: 0.9rem;
  font-size: clamp(2rem, 4vw, 3.5rem);
}

h3 {
  margin-bottom: 0.55rem;
  font-size: 1.25rem;
}

p,
li {
  color: var(--ink-soft);
}

/* The skip link is the first control a keyboard user reaches, so its contrast
   is an accessibility contract rather than a style preference. Plain
   `.skip-link` lost to the theme rule `.home-tabela a`, which repainted it
   near-black on its own near-black pill: an invisible skip target. Matching
   specificity is not enough either, because tabela-home.css loads after this
   file and its rule has the same (0,2,0) weight. Hence the pinned colours. */
a.skip-link {
  position: fixed;
  z-index: 20;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.6rem 0.85rem;
  transform: translateY(-150%);
  border-radius: 0.7rem;
  background: var(--ink) !important;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.16s ease;
}

a.skip-link:focus,
a.skip-link:focus-visible {
  transform: translateY(0);
  background: var(--ink) !important;
  color: #fff !important;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.shell {
  width: min(73rem, calc(100% - 2.5rem));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  z-index: 10;
  top: 0;
  border-bottom: 1px solid rgba(23, 35, 73, 0.07);
  background: rgba(252, 251, 255, 0.78);
  backdrop-filter: blur(1.1rem);
}

.header-row {
  display: flex;
  min-height: 5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.035em;
  text-decoration: none;
}

.brand:hover {
  color: var(--ink);
}

.brand-mark {
  width: 2.12rem;
  height: 2.12rem;
  object-fit: contain;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  font-size: 0.9rem;
  font-weight: 650;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.55rem;
  padding: 0 0.8rem;
  border: 1px solid rgba(23, 35, 73, 0.14);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 750;
  cursor: pointer;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 1rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.nav-toggle-icon {
  position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  position: absolute;
  left: 0;
}

.nav-toggle-icon::before {
  top: -0.3rem;
}

.nav-toggle-icon::after {
  top: 0.3rem;
}

.primary-nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  color: var(--blue-strong);
}

.status-pill,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.status-pill {
  padding: 0.42rem 0.68rem;
  border: 1px solid rgba(25, 118, 255, 0.16);
  border-radius: 999px;
  background: rgba(240, 246, 255, 0.9);
  color: var(--blue-strong);
}

.status-pill::before {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0.22rem rgba(246, 182, 0, 0.12);
  content: "";
}

:root[data-release-state="public"] .status-pill::before {
  background: var(--mint);
  box-shadow: 0 0 0 0.22rem rgba(24, 183, 144, 0.13);
}

.eyebrow {
  margin-bottom: 0.95rem;
  color: var(--blue-strong);
}

.hero {
  display: grid;
  min-height: min(49rem, 90vh);
  /* The screenshot carries the pitch, so it gets the larger track. */
  grid-template-columns: minmax(0, 0.8fr) minmax(28rem, 1.2fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding: clamp(4rem, 9vw, 8.5rem) 0 5.5rem;
}

.hero-copy {
  position: relative;
}

.hero-copy::before {
  position: absolute;
  top: -1.45rem;
  left: -1.55rem;
  width: 4.25rem;
  height: 0.52rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  content: "";
}

.hero-copy > p:not(.eyebrow) {
  max-width: 33rem;
  margin-bottom: 1.75rem;
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

.button {
  display: inline-flex;
  min-height: 3.1rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 0.82rem;
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.button:hover {
  transform: translateY(-0.1rem);
}

.button-primary {
  box-shadow: 0 0.95rem 2.15rem rgba(25, 118, 255, 0.25);
  background: linear-gradient(135deg, var(--blue), var(--blue-strong));
  color: white;
}

.button-primary:hover {
  color: white;
  box-shadow: 0 1.2rem 2.5rem rgba(25, 118, 255, 0.35);
}

.button-secondary {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
}

.button-secondary:hover {
  color: var(--ink);
  background: white;
}

.button.is-disabled,
.button.is-disabled:hover,
a.is-disabled,
a.is-disabled:hover {
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.66;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.15rem;
  margin: 1.3rem 0 0;
  padding: 0;
  font-size: 0.88rem;
  list-style: none;
}

.hero-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.hero-meta li::before {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--mint);
  content: "";
}

.product-preview {
  position: relative;
  isolation: isolate;
}

.preview-glow {
  position: absolute;
  z-index: -1;
  top: 8%;
  right: 2%;
  width: 77%;
  height: 77%;
  border-radius: 2.7rem;
  transform: rotate(5deg);
  background: linear-gradient(130deg, rgba(25, 118, 255, 0.28), rgba(119, 69, 247, 0.24));
  filter: blur(1.7rem);
}

.app-window {
  overflow: hidden;
  border: 1px solid rgba(18, 29, 68, 0.15);
  border-radius: 1.2rem;
  box-shadow: 0 2rem 5rem rgba(15, 35, 96, 0.23);
  background: #ffffff;
  transform: rotate(1.45deg);
}

.window-topbar {
  display: flex;
  height: 2.8rem;
  align-items: center;
  gap: 0.4rem;
  padding: 0 1rem;
  border-bottom: 1px solid #e5e8f1;
  background: #f9faff;
}

.window-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #ff6961;
}

.window-dot:nth-child(2) {
  background: #ffbd44;
}

.window-dot:nth-child(3) {
  background: #00c855;
}

.window-title {
  margin-left: 0.38rem;
  color: #78829b;
  font-size: 0.71rem;
  font-weight: 700;
}

.window-body {
  display: grid;
  min-height: 24rem;
  grid-template-columns: 30% 1fr;
}

.preview-sidebar {
  padding: 1rem 0.8rem;
  background: #f6f7fb;
}

.preview-workspace {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.15rem;
  color: #1c2542;
  font-size: 0.7rem;
  font-weight: 800;
}

.preview-workspace-mark {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border-radius: 0.35rem;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  color: white;
  font-size: 0.66rem;
}

.preview-nav-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.28rem 0;
  padding: 0.43rem 0.42rem;
  border-radius: 0.37rem;
  color: #78829b;
  font-size: 0.63rem;
}

.preview-nav-item.active {
  background: #e7eeff;
  color: #215fca;
  font-weight: 800;
}

.preview-main {
  padding: 1.5rem 1.45rem;
}

.preview-date {
  margin-bottom: 0.45rem;
  color: #8c96ae;
  font-size: 0.63rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.preview-heading {
  margin-bottom: 1.15rem;
  color: #161c31;
  font-size: clamp(1.28rem, 2.4vw, 2rem);
  font-weight: 850;
  letter-spacing: -0.055em;
}

.preview-focus {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid #e5e8f1;
  border-radius: 0.68rem;
  background: #fcfdff;
  color: #3d4761;
  font-size: 0.68rem;
}

.preview-check {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  border: 1.5px solid #6c7896;
  border-radius: 0.26rem;
}

.preview-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}

.preview-column {
  min-width: 0;
  padding: 0.45rem;
  border-radius: 0.54rem;
  background: #f5f7fc;
}

.preview-column-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
  color: #606b86;
  font-size: 0.56rem;
  font-weight: 800;
}

.preview-card {
  min-height: 2.25rem;
  margin-top: 0.35rem;
  padding: 0.45rem;
  border-radius: 0.4rem;
  background: white;
  box-shadow: 0 0.25rem 0.65rem rgba(28, 46, 95, 0.07);
  color: #3a4560;
  font-size: 0.57rem;
  line-height: 1.38;
}

.preview-card::after {
  display: block;
  width: 1.45rem;
  height: 0.22rem;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: #cae0ff;
  content: "";
}

.preview-card.violet::after {
  background: #ddd0ff;
}

.preview-card.mint::after {
  background: #b7f0df;
}

.section {
  padding: clamp(4.5rem, 8vw, 7.5rem) 0;
}

.section-soft {
  border-top: 1px solid rgba(23, 35, 73, 0.06);
  border-bottom: 1px solid rgba(23, 35, 73, 0.06);
  background: rgba(241, 245, 255, 0.64);
}

.section-header {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(16rem, 0.75fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: 2.35rem;
}

.section-header > p {
  max-width: 35rem;
  margin-bottom: 0.45rem;
  font-size: 1.05rem;
}

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

.feature-card,
.promise-card,
.page-card {
  border: 1px solid var(--line);
  border-radius: var(--round);
  background: var(--panel);
  box-shadow: 0 0.8rem 2.3rem rgba(32, 51, 105, 0.04);
}

.feature-card {
  min-height: 15rem;
  padding: 1.5rem;
}

.feature-icon {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  margin-bottom: 1.4rem;
  border-radius: 0.82rem;
  background: linear-gradient(135deg, #e2edff, #e8e0ff);
  color: var(--blue-strong);
  font-size: 1.22rem;
}

.feature-card:nth-child(2) .feature-icon,
.feature-card:nth-child(5) .feature-icon {
  background: linear-gradient(135deg, #defff3, #d8f3ff);
  color: #078669;
}

.feature-card:nth-child(3) .feature-icon,
.feature-card:nth-child(6) .feature-icon {
  background: linear-gradient(135deg, #fff0c6, #ffe4d1);
  color: #bf6b09;
}

.feature-card p {
  margin-bottom: 0;
  font-size: 0.95rem;
}

.privacy-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.85fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.privacy-layout p {
  max-width: 35rem;
  font-size: 1.08rem;
}

.promise-stack {
  display: grid;
  gap: 0.85rem;
}

.promise-card {
  display: grid;
  grid-template-columns: 2.65rem 1fr;
  gap: 0.9rem;
  padding: 1.05rem;
}

.promise-number {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border-radius: 50%;
  background: #e7eeff;
  color: var(--blue-strong);
  font-size: 0.8rem;
  font-weight: 850;
}

.promise-card h3 {
  margin-bottom: 0.2rem;
  font-size: 1rem;
}

.promise-card p {
  margin: 0;
  font-size: 0.9rem;
}

.release-callout {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 1.6rem;
  background: linear-gradient(135deg, #14265d, #183b96 56%, #5731be);
  color: white;
  box-shadow: var(--shadow);
}

.release-callout::after {
  position: absolute;
  top: -14rem;
  right: -9rem;
  width: 30rem;
  height: 30rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(255, 255, 255, 0.04), 0 0 0 8rem rgba(255, 255, 255, 0.03);
  content: "";
}

.release-callout > * {
  position: relative;
  z-index: 1;
}

.release-callout h2,
.release-callout p,
.release-callout .eyebrow {
  color: white;
}

.release-callout h2 {
  max-width: 16ch;
}

.release-callout p:not(.eyebrow) {
  max-width: 38rem;
  opacity: 0.84;
}

.release-callout .button-primary {
  background: white;
  color: var(--blue-strong);
}

.release-callout .button-secondary {
  border-color: rgba(255, 255, 255, 0.27);
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.page-hero {
  display: flex;
  min-height: clamp(34rem, 63vw, 46rem);
  flex-direction: column;
  justify-content: center;
  padding: clamp(4.5rem, 8vw, 7.5rem) 0 clamp(4rem, 7vw, 6rem);
}

/* ---------------------------------------------------------------------------
   PAGE SCENES
   A decorative WebGL scene sits behind each page's opening headline, in the
   same visual language as the homepage hero. It is painted behind the text,
   masked so it dissolves into the paper background, and never interactive.
   Empty until page-scenes.js decides the device qualifies, so a browser
   without WebGL simply sees the page as it was.
--------------------------------------------------------------------------- */
.page-scene-anchor {
  position: relative;
  isolation: isolate;
}

.page-scene {
  /* !important is required, not stylistic: site-theme.css sets
     `.page-hero > * { position: relative }` to lift real content above the
     decorative orb. This element is not content, it is the backdrop, so it has
     to opt out of that rule and sit behind everything. */
  position: absolute !important;
  z-index: 0 !important;
  /* The former scene was a small ornament outside a 58.5rem text column. This
     is deliberately a hero-scale composition: it owns the right half of the
     opening, bleeds beyond the shell, and has enough vertical room for a real
     visual sequence rather than a thumbnail-sized loop. */
  top: clamp(-4rem, -4vw, -1.5rem);
  right: clamp(-18rem, -10vw, -7rem);
  bottom: clamp(-4rem, -3vw, -1.5rem);
  /* Anchored by its LEFT edge, past the text column, rather than bled in from
     the right. Scene-bearing heroes cap text at 56%, so a 60% anchor leaves a
     deliberate gutter. Width follows from the two edges, so the scene cannot
     grow back over the words at any viewport. */
  left: 59%;
  width: auto;
  pointer-events: none;
  opacity: 0;
  /* Two intersected masks keep the composition from ending at hard canvas
     edges. The radial dissolves the top/right/bottom into the paper; the short
     linear ramp softens the inner edge beside the text. Separation itself is
     guaranteed by the 56% text cap and 59% scene anchor above. */
  -webkit-mask-image: radial-gradient(ellipse 92% 84% at 52% 49%, #000 45%, rgba(0, 0, 0, 0.8) 66%, transparent 94%),
    linear-gradient(to right, transparent 0%, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 92% 84% at 52% 49%, #000 45%, rgba(0, 0, 0, 0.8) 66%, transparent 94%),
    linear-gradient(to right, transparent 0%, #000 14%);
  mask-composite: intersect;
}

.page-scene[data-page-scene-state="running"] {
  animation: page-scene-in 1.6s 0.15s ease-out forwards;
}

.page-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes page-scene-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.74;
  }
}

/* The scene is an enhancement for a comfortable pointer-driven screen. It is
   never shown when motion is unwelcome or the viewport is small. */
@media (prefers-reduced-motion: reduce) {
  .page-scene {
    display: none;
  }
}

/* Below this point the hero no longer has a safe second column. The former
   70rem cutoff hid every scene in ordinary laptop/split-window browsing even
   though the current 60/40 layout has room much earlier. */
@media (max-width: 56rem) {
  .page-hero {
    min-height: auto;
  }

  .page-scene {
    display: none;
  }
}

.page-hero h1 {
  max-width: 14ch;
  font-size: clamp(3rem, 6vw, 5.6rem);
}

.page-hero > p:not(.eyebrow) {
  max-width: 44rem;
  font-size: 1.13rem;
}

/* Where a scene is actually shown, the opening text keeps to the left of it.
   .page-scene is anchored at left: 59%, so the text column stops just short of
   that. Without this the intro paragraph (44rem) reached under the artwork on
   wide screens even though the headline did not. */
@media (min-width: 56.01rem) {
  .page-hero:has(.page-scene) > h1,
  .page-hero:has(.page-scene) > p:not(.eyebrow) {
    max-width: min(44rem, 56%);
  }
}

.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.34fr);
  gap: clamp(2rem, 6vw, 5rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}

.prose {
  min-width: 0;
}

.prose h2 {
  margin-top: 3.2rem;
  font-size: clamp(1.7rem, 3vw, 2.45rem);
}

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

.prose h3 {
  margin-top: 1.7rem;
}

.prose p,
.prose li {
  max-width: 47rem;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: 0.4rem;
}

.prose strong {
  color: var(--ink);
}

.page-aside {
  align-self: start;
  padding: 1.25rem;
}

.page-aside h2 {
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.page-aside p,
.page-aside li,
.page-aside a {
  font-size: 0.9rem;
}

.page-aside ul {
  margin: 0;
  padding-left: 1.2rem;
}

.page-aside li + li {
  margin-top: 0.4rem;
}

.release-notes {
  display: grid;
  gap: 1.1rem;
}

.release-note {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--round);
  background: white;
}

.release-note h2 {
  margin-bottom: 0.35rem;
  font-size: 1.6rem;
}

.release-note .eyebrow {
  margin-bottom: 0.9rem;
  font-size: 0.69rem;
}

.release-note ul {
  margin-bottom: 0;
}

.empty-state {
  padding: 1.4rem;
  border: 1px dashed rgba(23, 35, 73, 0.26);
  border-radius: var(--round);
  background: rgba(255, 255, 255, 0.55);
}

/* Resource hub and long-form article pages */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.resource-card {
  display: flex;
  flex-direction: column;
  min-height: 17rem;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--round);
  background: var(--panel);
  box-shadow: 0 0.8rem 2.3rem rgba(32, 51, 105, 0.04);
}

.resource-card__eyebrow,
.article-meta {
  margin-bottom: 0.85rem;
  color: #69738e;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.03em;
}

.resource-card h2 {
  margin-bottom: 0.75rem;
  font-size: clamp(1.4rem, 2.3vw, 1.8rem);
}

.resource-card h2 a {
  color: var(--ink);
  text-decoration: none;
}

.resource-card h2 a:hover {
  color: var(--blue-strong);
}

.resource-card p:not(.resource-card__eyebrow) {
  margin-bottom: 1.25rem;
}

.text-link {
  margin-top: auto;
  color: var(--blue-strong);
  font-weight: 750;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

.article-layout {
  padding-bottom: clamp(5rem, 10vw, 8rem);
}

.article-header {
  max-width: 52rem;
  padding: clamp(4rem, 8vw, 7.2rem) 0 3.1rem;
}

.article-header h1 {
  max-width: 16ch;
  font-size: clamp(3rem, 6vw, 5.6rem);
}

.article-deck {
  max-width: 43rem;
  font-size: 1.18rem;
}

.article-meta {
  margin: 1.3rem 0 0;
}

.article-aside {
  align-self: start;
}

.article-aside ol {
  padding-left: 1.2rem;
}

.article-aside li + li {
  margin-top: 0.45rem;
}

.article-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: end;
  margin-top: 3.5rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid #cbd9fa;
  border-radius: var(--round);
  background: linear-gradient(135deg, #f5f8ff, #f9f5ff);
}

.article-callout h2 {
  margin-top: 0;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.article-callout p:last-child {
  margin-bottom: 0;
}

/* "How Pro takes this further" on the use-case pages */
.pro-boost {
  margin: 2.75rem 0 0;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid #cbd9fa;
  border-radius: var(--round);
  background: linear-gradient(135deg, #f5f8ff, #fbf7ff);
}

.pro-boost .eyebrow {
  margin-bottom: 0.35rem;
}

.pro-boost h2 {
  margin-top: 0;
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
}

.pro-boost__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.5rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.pro-boost__list li {
  margin: 0;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.78);
  font-size: 0.98rem;
}

.pro-boost__list li + li {
  margin-top: 0;
}

/* An odd last card spans the row instead of sitting alone. */
.pro-boost__list li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.pro-boost__list strong {
  display: block;
  margin-bottom: 0.25rem;
}

.pro-boost__example {
  margin: 1.4rem 0 0;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--blue-strong);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 0 0.7rem 0.7rem 0;
}

.pro-boost__boundary {
  margin: 1.2rem 0 0;
  font-size: 0.92rem;
  color: var(--ink-soft, inherit);
}

@media (max-width: 46rem) {
  .pro-boost__list {
    grid-template-columns: 1fr;
  }
}

/* Source-backed authority articles */
.authority-article .prose > h2 {
  scroll-margin-top: 7rem;
}

.article-toc,
.evidence-note,
.copy-template,
.creator-perspectives,
.source-panel {
  margin: 2.25rem 0;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid rgba(16, 16, 16, 0.12);
  border-radius: var(--round);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1rem 2.8rem rgba(30, 30, 24, 0.07);
}

.article-toc {
  margin-top: 0;
}

.article-toc ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1.25rem;
  margin: 0;
  padding-left: 1.25rem;
}

.article-toc a,
.source-list a {
  font-weight: 750;
}

.evidence-note {
  border-color: rgba(181, 200, 0, 0.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(230, 255, 0, 0.2), transparent 42%),
    rgba(255, 255, 255, 0.82);
}

.evidence-note h2,
.copy-template h2,
.creator-perspectives h2,
.source-panel h2 {
  margin-top: 0;
}

.framework-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
}

.framework-grid article {
  display: grid;
  gap: 0.45rem;
  padding: 1.1rem;
  border: 1px solid rgba(16, 16, 16, 0.1);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(244, 244, 236, 0.84));
}

.framework-grid strong {
  color: #171714;
  font-size: 1rem;
}

.framework-grid span {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}

.copy-template {
  overflow: hidden;
  border-color: rgba(16, 16, 16, 0.18);
  background: linear-gradient(150deg, #2f2f2c 0%, #161615 64%, #050505 100%);
  color: #fff;
  box-shadow: 0 1.6rem 4rem rgba(16, 16, 16, 0.18), 0 0 2.2rem rgba(230, 255, 0, 0.08);
}

.copy-template h2,
.copy-template p {
  color: #fff;
}

.copy-template .eyebrow {
  color: #e6ff00;
}

.copy-template pre {
  max-width: 100%;
  margin: 1.25rem 0 0;
  padding: 1.25rem;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.35);
  color: #f8f8f2;
  white-space: pre-wrap;
}

.copy-template code {
  color: inherit;
  font-size: 0.85rem;
  line-height: 1.62;
}

.creator-perspectives,
.source-panel {
  background:
    radial-gradient(circle at 8% 0%, rgba(230, 255, 0, 0.14), transparent 32%),
    rgba(255, 255, 255, 0.78);
}

.video-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.video-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  min-height: 14rem;
  padding: 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 1.15rem;
  background: linear-gradient(145deg, #31312e 0%, #171716 66%, #070707 100%);
  box-shadow: 0 1rem 2.5rem rgba(16, 16, 16, 0.16), 0 0 0 1px rgba(16, 16, 16, 0.72);
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.video-card:hover {
  transform: translateY(-0.2rem);
  box-shadow: 0 1.5rem 3.4rem rgba(16, 16, 16, 0.22), 0 0 2rem rgba(230, 255, 0, 0.13);
}

.video-card__play {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: #e6ff00;
  box-shadow: 0 0 1.5rem rgba(230, 255, 0, 0.35);
  color: #101010;
  font-size: 0.82rem;
}

.video-card__body {
  display: grid;
  align-content: start;
  gap: 0.6rem;
}

.video-card__body strong {
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.28;
}

.video-card__body > span:last-child {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.86rem;
  line-height: 1.55;
}

.video-card__label {
  color: #e6ff00;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.video-card__action {
  grid-column: 2;
  align-self: end;
  color: #e6ff00;
  font-size: 0.78rem;
  font-weight: 800;
}

.source-list {
  display: grid;
  gap: 0.9rem;
  margin: 1.25rem 0;
  padding-left: 1.35rem;
}

.source-list li {
  padding-left: 0.25rem;
}

.source-list span {
  display: block;
  margin-top: 0.18rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.55;
}

.source-disclosure {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.reference-table-wrap {
  max-width: 100%;
  margin: 1.5rem 0 2rem;
  overflow-x: auto;
  border: 1px solid rgba(16, 16, 16, 0.12);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1rem 2.5rem rgba(30, 30, 24, 0.07);
}

.reference-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
}

.reference-table th,
.reference-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(16, 16, 16, 0.1);
  text-align: left;
  vertical-align: top;
}

.reference-table th {
  background: #20201e;
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.035em;
}

.reference-table tr:last-child td {
  border-bottom: 0;
}

.authority-article blockquote {
  margin: 1.5rem 0;
  padding: 1.25rem 1.4rem;
  border-left: 0.35rem solid #d8ed19;
  border-radius: 0 1rem 1rem 0;
  background: rgba(255, 255, 255, 0.68);
}

.authority-article blockquote p {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
}

.site-footer {
  border-top: 1px solid rgba(23, 35, 73, 0.1);
  background: rgba(255, 255, 255, 0.5);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(8rem, 0.6fr));
  gap: 2rem;
  padding: 3.3rem 0 2.4rem;
}

.footer-grid h2 {
  margin-bottom: 0.45rem;
  font-size: 1.12rem;
}

.footer-grid p,
.footer-grid a {
  font-size: 0.88rem;
}

.footer-links {
  display: grid;
  align-content: start;
  gap: 0.45rem;
}

.footer-links a {
  text-decoration: none;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.15rem 0;
  border-top: 1px solid rgba(23, 35, 73, 0.08);
  color: #727b95;
  font-size: 0.8rem;
}

.footer-bottom p {
  margin: 0;
  color: inherit;
}

@media (max-width: 56rem) {
  .hero,
  .privacy-layout,
  .section-header,
  .page-layout {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-top: 5.2rem;
  }

  .product-preview {
    width: min(100%, 38rem);
    margin: 0 auto;
  }

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

  .resource-grid,
  .article-callout {
    grid-template-columns: 1fr;
  }

  .article-toc ol,
  .framework-grid,
  .video-card-grid {
    grid-template-columns: 1fr;
  }

  .page-aside {
    order: -1;
  }
}

@media (max-width: 42rem) {
  .shell {
    width: min(100% - 1.5rem, 73rem);
  }

  .header-row {
    min-height: 4.5rem;
  }

  .primary-nav a:not(.nav-priority) {
    display: none;
  }

  .status-pill {
    display: none;
  }

  h1 {
    font-size: clamp(2.75rem, 14vw, 4.2rem);
  }

  .feature-grid,
  .resource-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .window-body {
    grid-template-columns: 33% 1fr;
    min-height: 19rem;
  }

  .preview-main {
    padding: 1rem 0.8rem;
  }

  .preview-sidebar {
    padding: 0.7rem 0.5rem;
  }

  .preview-workspace {
    font-size: 0.55rem;
  }

  .preview-nav-item {
    font-size: 0.51rem;
  }

  .preview-board {
    gap: 0.3rem;
  }

  .preview-column {
    padding: 0.27rem;
  }

  .preview-card {
    padding: 0.3rem;
    font-size: 0.49rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Downloads & pricing section */
.download-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.download-list li { margin: 0; }
.download-list .button { width: 100%; box-sizing: border-box; text-align: center; }
.download-note {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--muted, #5b6472);
}

/* ===========================================================================
   PRODUCT PRESENTATION — rebuilt as one system
   ===========================================================================

   The previous version accreted patch on patch: arbitrary image crops that
   bled past their containers, padding stripped so far that sections collided,
   and no shared rhythm, so nothing lined up with anything else.

   This replaces all of it with three decisions applied everywhere:

   1. RHYTHM. One spacing scale drives every gap. Sections, headings and
      figures all step through the same values, so the page has a beat
      instead of arbitrary numbers.
   2. CONTAINMENT. Imagery is a complete window, never a crop, and it is
      always inside a frame that clips it. Nothing bleeds.
   3. ALIGNMENT. Copy and media share one grid, so section edges agree down
      the whole page.
=========================================================================== */

:root {
  /* A modular scale. Every vertical gap on the page is one of these. */
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4rem;
  --s-8: 6rem;

  /* Section padding scales with the viewport but stays on the same beat. */
  --section-y: clamp(3.5rem, 7vw, 6rem);
  --frame-radius: clamp(0.6rem, 1vw, 0.9rem);
}

/* --- Containers ---------------------------------------------------------- */
.shell-wide {
  width: min(78rem, calc(100% - 3rem));
  margin: 0 auto;
}

.shell-full {
  width: min(88rem, calc(100% - 3rem));
  margin: 0 auto;
}

.section {
  padding: var(--section-y) 0;
}

/* --- Section headers ----------------------------------------------------- */
.section-header {
  margin-bottom: var(--s-6);
}

.section-header h2 {
  margin: var(--s-1) 0 0;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* ===========================================================================
   THE FRAME
   Every screenshot on the site sits in this. It clips its contents, so a
   window can never bleed past its container, and it carries the same border,
   radius and shadow everywhere for a single consistent treatment.
=========================================================================== */
.shot-frame {
  position: relative;
  display: block;
  margin: 0;
  border: 1px solid rgba(23, 35, 73, 0.1);
  border-radius: var(--frame-radius);
  background: #fff;
  box-shadow:
    0 1px 2px rgba(20, 35, 80, 0.04),
    0 12px 28px -14px rgba(20, 35, 80, 0.22);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The image fills the frame exactly. Captures are complete 16:10 windows, so
   no cropping is needed and none is applied. */
.shot-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: #fbfbfd;
}

.shot-frame figcaption {
  padding: var(--s-2) var(--s-3) calc(var(--s-2) + 0.15rem);
  border-top: 1px solid rgba(23, 35, 73, 0.08);
  background: #fff;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}

.shot-frame figcaption strong {
  display: block;
  margin-bottom: 0.1rem;
  color: var(--ink);
  font-size: 0.97rem;
  font-weight: 650;
}

.shot-frame.is-zoomable {
  cursor: zoom-in;
}

.shot-frame.is-zoomable:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(20, 35, 80, 0.04),
    0 22px 44px -18px rgba(20, 35, 80, 0.28);
}

/* Window chrome: a restrained title bar so a capture reads as an app. */
.shot-frame.has-chrome::before {
  display: block;
  height: 1.75rem;
  border-bottom: 1px solid rgba(23, 35, 73, 0.07);
  background:
    radial-gradient(circle at 0.85rem 50%, #ff5f57 0.26rem, transparent 0.28rem),
    radial-gradient(circle at 1.7rem 50%, #febc2e 0.26rem, transparent 0.28rem),
    radial-gradient(circle at 2.55rem 50%, #28c840 0.26rem, transparent 0.28rem),
    #f6f7fb;
  content: "";
}

/* On Windows, the same frame wears Windows-style window controls, so the
   product never reads as Mac-only to a PC visitor. */
[data-platform="windows"] .shot-frame.has-chrome::before {
  /* minimise (a rule), maximise (a square outline), close (an X) */
  background:
    linear-gradient(currentColor, currentColor) calc(100% - 3.20rem) 62% / 0.6rem 1px no-repeat,
    linear-gradient(currentColor, currentColor) calc(100% - 1.82rem) 32% / 0.56rem 1px no-repeat,
    linear-gradient(currentColor, currentColor) calc(100% - 1.82rem) 68% / 0.56rem 1px no-repeat,
    linear-gradient(currentColor, currentColor) calc(100% - 2.38rem) 50% / 1px 0.56rem no-repeat,
    linear-gradient(currentColor, currentColor) calc(100% - 1.82rem) 50% / 1px 0.56rem no-repeat,
    linear-gradient(45deg, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px)) calc(100% - 0.7rem) 50% / 0.56rem 0.56rem no-repeat,
    linear-gradient(-45deg, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px)) calc(100% - 0.7rem) 50% / 0.56rem 0.56rem no-repeat,
    #f6f7fb;
  color: rgba(23, 35, 73, 0.55);
}

/* ===========================================================================
   DEMO VIDEOS — real interaction recordings on the homepage
=========================================================================== */
.demo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

.demo-frame {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid rgba(23, 35, 73, 0.1);
  border-radius: var(--frame-radius);
  background: #fff;
  box-shadow:
    0 1px 2px rgba(20, 35, 80, 0.04),
    0 12px 28px -14px rgba(20, 35, 80, 0.22);
  overflow: hidden;
}

.demo-frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #0f1424;
}

.demo-frame figcaption {
  padding: var(--s-2) var(--s-3) calc(var(--s-2) + 0.15rem);
  border-top: 1px solid rgba(23, 35, 73, 0.08);
  background: #fff;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}

.demo-frame figcaption strong {
  display: block;
  margin-bottom: 0.1rem;
  color: var(--ink);
  font-size: 0.97rem;
  font-weight: 650;
}

.demo-chapters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: var(--s-2) var(--s-3) 0;
}

.demo-chapters:empty {
  display: none;
}

.demo-chapter {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.6rem;
  border: 1px solid rgba(23, 35, 73, 0.14);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.demo-chapter:hover {
  border-color: rgba(37, 99, 235, 0.55);
  color: var(--ink);
}

.demo-chapter.is-active {
  border-color: rgba(37, 99, 235, 0.75);
  background: rgba(37, 99, 235, 0.08);
  color: var(--ink);
}

.demo-feature {
  max-width: 1080px;
  margin: 0 auto;
}

.demo-chapter-time {
  /* Full opacity: at 0.9 alpha this blue lands at 4.34:1 on white, just under
     the 4.5:1 minimum for body-size text. Opaque it clears the bar. */
  color: rgb(37, 99, 235);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

@media (max-width: 68rem) {
  .demo-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 44rem;
    margin-inline: auto;
  }
}

/* ===========================================================================
   HERO
=========================================================================== */
.hero {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(3rem, 6vw, 5rem) 0 var(--section-y);
}

.hero h1 {
  margin: var(--s-2) 0 var(--s-3);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.hero-copy > p {
  margin: 0 0 var(--s-4);
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: 1.06rem;
  line-height: 1.6;
}

/* Keep the eyebrow compact. The broad paragraph rule above used to override
   the shared eyebrow scale, which made it wrap on phones and pushed the CTA
   below the first screen. */
.hero-copy > p.eyebrow {
  max-width: none;
  margin-bottom: var(--s-2);
  color: var(--blue-strong);
  font-size: 0.76rem;
  line-height: 1.3;
}

.hero-shot {
  min-width: 0;
  max-width: 44rem;
  margin-left: auto;
  width: 100%;
}

.hero > * {
  min-width: 0;
}

.hero-shot .shot-frame {
  transform: perspective(120rem) rotateY(-3deg) rotateX(1.5deg);
  transform-origin: center center;
}

.hero-shot .shot-frame:hover {
  transform: perspective(120rem) rotateY(-1deg) rotateX(0.5deg) translateY(-3px);
}

.hero-links {
  margin: var(--s-3) 0 0;
  color: var(--ink-soft);
  font-size: 0.97rem;
}

.hero-alt-platform {
  margin: 0.55rem 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.platform-support {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.9rem;
  max-width: 34rem;
  margin-top: 1.25rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(25, 118, 255, 0.18);
  border-radius: 0.9rem;
  background: linear-gradient(110deg, rgba(231, 241, 255, 0.8), rgba(247, 242, 255, 0.72));
  box-shadow: 0 0.7rem 1.6rem rgba(41, 81, 168, 0.08);
}

.platform-support-label {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.platform-support ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.platform-support li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.52rem;
  border: 1px solid rgba(25, 118, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.15;
}

.platform-support li span {
  color: var(--blue-strong);
  font-size: 0.72rem;
}

/* ===========================================================================
   SHOWCASE ROWS
   Copy and a complete window, alternating, on one shared grid.
=========================================================================== */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.showcase.is-flipped {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.showcase.is-flipped .showcase-media {
  order: -1;
}

.showcase + .showcase {
  margin-top: var(--s-8);
}

.showcase-media {
  max-width: 46rem;
  margin-inline: auto;
  width: 100%;
}

.showcase h3 {
  margin: var(--s-1) 0 var(--s-2);
  font-size: clamp(1.5rem, 2.8vw, 2.05rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.showcase p {
  margin: 0 0 var(--s-3);
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.6;
}

.showcase ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.showcase li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.showcase li + li {
  margin-top: var(--s-1);
}

.showcase li::before {
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: rgba(25, 118, 255, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231976ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center/0.68rem no-repeat;
  content: "";
}

/* ===========================================================================
   GALLERY
=========================================================================== */
.shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
  gap: var(--s-4);
}

.shot-group {
  margin-bottom: var(--s-8);
}

.shot-group h2 {
  margin: 0 0 var(--s-1);
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  letter-spacing: -0.03em;
}

.shot-group .lede {
  margin: 0 0 var(--s-4);
  max-width: 44rem;
  color: var(--ink-soft);
}

/* ===========================================================================
   PROSE PAGES
=========================================================================== */
.page-hero {
  padding: clamp(2.5rem, 5vw, 4rem) 0 var(--s-5);
}

.page-hero h1 {
  margin: var(--s-1) 0 var(--s-3);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.page-hero > p:not(.eyebrow) {
  max-width: 42rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.page-layout {
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: var(--s-8);
}

.prose h2 {
  margin: var(--s-6) 0 var(--s-3);
  letter-spacing: -0.025em;
}

.prose p,
.prose li {
  line-height: 1.62;
}

/* A figure inside prose breaks out to the full column width and is centred,
   because a complete window needs room to stay legible. */
.prose .shot-frame {
  margin: var(--s-4) 0;
}

/* ===========================================================================
   STEPS
=========================================================================== */
.step-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  counter-increment: step;
  padding-left: clamp(3rem, 5vw, 4rem);
}

.step + .step {
  margin-top: var(--s-7);
}

.step::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--blue), var(--violet));
  box-shadow: 0 6px 14px -6px rgba(25, 118, 255, 0.6);
  color: #fff;
  font-size: 0.98rem;
  font-weight: 700;
  content: counter(step);
}

.step:not(:last-child)::after {
  position: absolute;
  top: 2.9rem;
  bottom: calc(var(--s-7) * -1 + 0.5rem);
  left: 1.15rem;
  width: 2px;
  background: linear-gradient(rgba(23, 35, 73, 0.12), rgba(23, 35, 73, 0.02));
  content: "";
}

.step h2 {
  margin: 0 0 var(--s-2);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  letter-spacing: -0.025em;
}

.step p,
.step li {
  color: var(--ink-soft);
}

.step-note {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border: 1px solid rgba(25, 118, 255, 0.15);
  border-left: 3px solid var(--blue);
  border-radius: 0 0.6rem 0.6rem 0;
  background: linear-gradient(100deg, rgba(25, 118, 255, 0.055), rgba(119, 69, 247, 0.03));
  font-size: 0.96rem;
}

.step-note strong {
  color: var(--ink);
}

/* ===========================================================================
   TABLES
=========================================================================== */
.spec-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.97rem;
}

.spec-table caption {
  margin-bottom: var(--s-2);
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-align: left;
}

.spec-table th,
.spec-table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid rgba(23, 35, 73, 0.08);
  text-align: left;
  vertical-align: top;
}

.spec-table thead th {
  border-bottom: 1px solid rgba(23, 35, 73, 0.18);
  color: var(--ink);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.spec-table tbody th {
  color: var(--ink);
  font-weight: 620;
}

.spec-table td {
  color: var(--ink-soft);
}

.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td {
  border-bottom: 0;
}

.table-scroll {
  margin: var(--s-3) 0 var(--s-5);
  border: 1px solid rgba(23, 35, 73, 0.09);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.7);
  overflow-x: auto;
}

/* ===========================================================================
   CHECK COLUMNS
=========================================================================== */
.check-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--s-4) var(--s-5);
  margin: var(--s-4) 0 var(--s-5);
}

.check-columns h3 {
  margin: 0 0 var(--s-2);
  font-size: 1.02rem;
}

.check-columns ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-columns li {
  position: relative;
  padding-left: 1.45rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

.check-columns li + li {
  margin-top: 0.35rem;
}

.check-columns li::before {
  position: absolute;
  top: 0.08em;
  left: 0;
  color: var(--mint);
  font-weight: 700;
  content: "✓";
}

/* ===========================================================================
   TABLE OF CONTENTS
=========================================================================== */
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 0 0 var(--s-6);
  padding: 0;
  list-style: none;
}

.toc a {
  display: inline-flex;
  align-items: center;
  min-height: 2.3rem;
  padding: 0 0.85rem;
  border: 1px solid rgba(23, 35, 73, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.toc a:hover {
  border-color: var(--blue);
  color: var(--blue-strong);
}

.section-anchor,
.step {
  scroll-margin-top: 5rem;
}

/* ===========================================================================
   PRICING
=========================================================================== */
.pricing-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.05fr);
  align-items: start;
  gap: clamp(1.25rem, 3vw, 2rem);
}

/* The Pro card carries the accent; Free stays quiet. */
.price-card-pro {
  border-color: rgba(25, 118, 255, 0.45);
  box-shadow: 0 22px 52px -26px rgba(20, 35, 80, 0.5);
}

.price-card {
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border: 1px solid rgba(25, 118, 255, 0.2);
  border-radius: var(--round);
  background:
    linear-gradient(160deg, rgba(25, 118, 255, 0.06), rgba(119, 69, 247, 0.035)),
    #fff;
  box-shadow: 0 18px 44px -28px rgba(20, 35, 80, 0.4);
}

.price-eyebrow {
  margin: 0 0 var(--s-1);
  color: var(--blue-strong);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.price-amount {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.75rem, 6vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}

.price-currency {
  font-size: 0.5em;
  font-weight: 700;
}

.price-period {
  color: var(--ink-soft);
  font-size: 0.28em;
  font-weight: 600;
}

.price-sub {
  margin: var(--s-1) 0 var(--s-4);
  color: var(--ink-soft);
  font-size: 0.97rem;
}

.price-cta {
  width: 100%;
  justify-content: center;
  font-size: 1.02rem;
}

.price-note {
  margin: var(--s-2) 0 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-align: center;
}

.price-includes {
  margin: var(--s-4) 0 0;
  padding: var(--s-4) 0 0;
  border-top: 1px solid rgba(23, 35, 73, 0.1);
  list-style: none;
}

.price-includes li {
  position: relative;
  padding-left: 1.55rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.45;
}

.price-includes li + li {
  margin-top: var(--s-1);
}

.price-includes li::before {
  position: absolute;
  top: 0.12em;
  left: 0;
  color: var(--mint);
  font-weight: 700;
  content: "✓";
}

.download-panel h3 {
  margin: 0 0 var(--s-1);
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.download-panel > p {
  margin: 0 0 var(--s-3);
  color: var(--ink-soft);
}

.download-panel .download-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--s-2) var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.download-panel .download-list .button {
  width: 100%;
  justify-content: center;
}

/* ===========================================================================
   DOCUMENTATION ACCORDIONS
=========================================================================== */
.doc-section {
  margin: 0;
}

/* Reference detail inside a setup step: complete, but folded away so the
   ten-step guide stays walkable. Native <details>, so it works with no
   JavaScript, is keyboard operable, and stays findable by in-page search in
   browsers that expand matches. */
.step-detail {
  margin: var(--s-3) 0;
  border: 1px solid rgba(23, 35, 73, 0.12);
  border-radius: 0.75rem;
  background: rgba(23, 35, 73, 0.02);
}

/* WebKit keeps summary as display:list-item unless the marker is removed
   through list-style/::marker; without this it ignores flex and the row
   collapses to text height, below the 44px tap target. */
.step-detail > summary {
  display: flex;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0.7rem 1rem;
  border-radius: 0.75rem;
  color: var(--ink);
  font-weight: 650;
  cursor: pointer;
  gap: 0.75rem;
}

.step-detail > summary::-webkit-details-marker {
  display: none;
}

.step-detail > summary::after {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.25s ease;
  content: "";
}

.step-detail[open] > summary::after {
  transform: translateY(10%) rotate(225deg);
}

.step-detail > summary:hover {
  background: rgba(23, 35, 73, 0.04);
}

.step-detail-body {
  padding: 0 1rem 0.4rem;
}

.step-detail-body > *:first-child {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .step-detail > summary::after {
    transition: none;
  }
}

.doc-summary {
  list-style: none;
  cursor: default;
}

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

.doc-summary h2 {
  display: block;
  margin: var(--s-6) 0 var(--s-3);
  color: var(--ink);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* ===========================================================================
   UTILITIES
=========================================================================== */
.stack-top {
  margin-top: var(--s-5);
}

.stack-top-lg {
  margin-top: var(--s-7);
}

.stack-bottom {
  margin-bottom: var(--s-5);
}

.lede {
  max-width: 44rem;
  color: var(--ink-soft);
}

.detail-label,
.phone-only-note {
  display: none;
}

.page-aside h2 + ul,
.page-aside h2 + p {
  margin-top: var(--s-2);
}

.page-aside ul + h2,
.page-aside p + h2 {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(23, 35, 73, 0.1);
}

code {
  padding: 0.1em 0.35em;
  border-radius: 0.35rem;
  background: rgba(23, 35, 73, 0.06);
  font-size: 0.92em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ===========================================================================
   MOTION
=========================================================================== */
[data-motion="on"] .reveal {
  opacity: 0;
  transform: translateY(1.1rem);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-motion="on"] .reveal.is-visible {
  opacity: 1;
  transform: none;
}

[data-motion="on"] .reveal-group :where(.reveal-item) {
  opacity: 0;
  transform: translateY(0.9rem);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-motion="on"] .reveal-group.is-visible :where(.reveal-item) {
  opacity: 1;
  transform: none;
}

[data-motion="on"] .reveal-group.is-visible :where(.reveal-item):nth-child(1) { transition-delay: 0.03s; }
[data-motion="on"] .reveal-group.is-visible :where(.reveal-item):nth-child(2) { transition-delay: 0.08s; }
[data-motion="on"] .reveal-group.is-visible :where(.reveal-item):nth-child(3) { transition-delay: 0.13s; }
[data-motion="on"] .reveal-group.is-visible :where(.reveal-item):nth-child(4) { transition-delay: 0.18s; }
[data-motion="on"] .reveal-group.is-visible :where(.reveal-item):nth-child(5) { transition-delay: 0.23s; }
[data-motion="on"] .reveal-group.is-visible :where(.reveal-item):nth-child(6) { transition-delay: 0.28s; }

.feature-card,
.promise-card {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease;
}

.feature-card:hover,
.promise-card:hover {
  transform: translateY(-2px);
  border-color: rgba(25, 118, 255, 0.24);
  box-shadow: 0 18px 38px -24px rgba(20, 35, 80, 0.36);
}

.button {
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.button-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(25, 118, 255, 0.75);
}

/* ===========================================================================
   LIGHTBOX
=========================================================================== */
.lightbox:not([open]) {
  display: none;
}

.lightbox[open] {
  position: fixed;
  z-index: 100;
  display: grid;
  padding: clamp(1rem, 3vw, 2.5rem);
  border: 0;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  place-items: center;
  background: rgba(10, 16, 36, 0.84);
  backdrop-filter: blur(0.4rem);
  animation: lightbox-in 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.lightbox::backdrop {
  background: rgba(10, 16, 36, 0.84);
}

.lightbox-figure {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  max-width: min(90rem, 100%);
  max-height: 100%;
}

.lightbox img {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 8rem);
  object-fit: contain;
}

.lightbox figcaption {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.92rem;
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}

@keyframes lightbox-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
}

/* ===========================================================================
   TABLET
=========================================================================== */
@media (max-width: 68rem) {
  .hero,
  .showcase,
  .showcase.is-flipped,
  .pricing-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcase.is-flipped .showcase-media {
    order: 0;
  }

  .hero-shot .shot-frame,
  .hero-shot .shot-frame:hover {
    transform: none;
  }

  .showcase + .showcase {
    margin-top: var(--s-7);
  }

  .hero-copy {
    width: min(100%, 42rem);
  }

  .hero-shot {
    width: min(100%, 50rem);
    margin-inline: auto;
  }

  .hero h1 {
    font-size: clamp(3rem, 6.4vw, 5rem);
  }
}

/* ===========================================================================
   PHONE
   Same system, one step down the scale. Nothing is hidden that carries
   meaning; the page is shorter because the rhythm is tighter, not because
   content was removed.
=========================================================================== */
@media (max-width: 46rem) {
  :root {
    /* The landing page runs a dozen stacked sections. Trimming the shared
       rhythm by a few pixels per boundary keeps every section's content
       intact while holding the page inside its phone scroll budget. */
    --section-y: clamp(1.85rem, 6.5vw, 2.6rem);
  }

  .shell,
  .shell-wide,
  .shell-full {
    width: calc(100% - 2.25rem);
  }

  /* --- Header ---------------------------------------------------------- */
  .header-row {
    flex-wrap: wrap;
    row-gap: 0.2rem;
    padding-block: 0.4rem;
  }

  .brand {
    font-size: 1rem;
    gap: 0.45rem;
  }

  .brand-mark {
    width: 26px;
    height: 26px;
  }

  .primary-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    margin: 0 -1.125rem;
    padding: 0 1.125rem 0.15rem;
    gap: 0.2rem;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }

  .primary-nav::-webkit-scrollbar {
    display: none;
  }

  .primary-nav a,
  .primary-nav a:not(.nav-priority) {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: 2.4rem;
    padding: 0 0.65rem;
    border-radius: 0.55rem;
    font-size: 0.92rem;
    white-space: nowrap;
  }

  .primary-nav a[aria-current="page"] {
    background: rgba(25, 118, 255, 0.1);
  }

  /* A swipe-only nav hid the last links on small iPhones. Once the small
     enhancement script is ready, replace it with a compact two-column menu.
     Without JavaScript the full link list remains visible as a safe baseline. */
  .header-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .site-header[data-nav-enhanced="true"] .nav-toggle {
    display: inline-flex;
    justify-self: end;
  }

  .primary-nav {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: 0;
    padding: 0.45rem 0 0;
    border-top: 1px solid rgba(23, 35, 73, 0.08);
    gap: 0.3rem;
    overflow: visible;
    mask-image: none;
  }

  .site-header[data-nav-enhanced="true"] .primary-nav {
    display: none;
  }

  .site-header[data-nav-enhanced="true"][data-nav-open="true"] .primary-nav {
    display: grid;
  }

  .primary-nav a {
    min-height: 2.4rem;
    justify-content: flex-start;
    padding-inline: 0.75rem;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.55);
  }

  .status-pill {
    display: none;
  }

  /* --- Type ------------------------------------------------------------- */
  .hero {
    padding: var(--s-5) 0 var(--section-y);
    gap: var(--s-4);
  }

  .hero h1 {
    font-size: clamp(2rem, 9vw, 2.5rem);
  }

  .hero-copy > p:not(.eyebrow) {
    font-size: 1rem;
  }

  .hero-copy > p.eyebrow {
    max-width: 100%;
    margin-bottom: var(--s-2);
    font-size: 0.76rem;
    line-height: 1.3;
  }

  .hero-copy::before {
    left: 0;
  }

  /* The phone captures are deliberately portrait. Keeping the desktop 16:10
     frame here letterboxes the useful app UI into a shallow banner. Let each
     mobile capture keep its natural ratio so text and controls remain legible. */
  .shot-frame img {
    aspect-ratio: auto;
    object-fit: contain;
  }

  /* The tall phone capture is useful in the gallery, but showing the entire
     sidebar in the hero makes the first screen feel like a wall of UI. Crop
     the hero to the greeting and first cards so the product is readable and
     the download action stays close to it. The lightbox still exposes the full
     capture. */
  .hero-shot .shot-frame img {
    height: clamp(12rem, 56vw, 14rem);
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 70% 17%;
  }

  .hero-meta {
    display: none;
  }

  .section-header {
    margin-bottom: var(--s-4);
  }

  .section-header h2,
  .shot-group h2,
  .doc-summary h2 {
    font-size: clamp(1.4rem, 6vw, 1.75rem);
  }

  /* --- Controls --------------------------------------------------------- */
  .button {
    min-height: 2.85rem;
    width: 100%;
    justify-content: center;
  }

  .action-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
  }

  .prose a,
  .page-aside a,
  .hero-links a,
  .section-header a,
  .showcase a,
  .brand,
  .footer-links a {
    padding-block: 0.7rem;
    margin-block: -0.7rem;
  }

  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
  }

  /* --- Layout ----------------------------------------------------------- */
  /* Stacked showcase rows already read as separate blocks on a phone: each
     one is a full-width image with its own heading. A slightly tighter gap
     keeps the tour section within the page's scroll budget. */
  .showcase + .showcase {
    margin-top: var(--s-5);
  }

  .feature-grid {
    gap: var(--s-2);
  }

  .feature-card {
    min-height: 0;
    padding: var(--s-3);
  }

  .feature-card h3 {
    margin: var(--s-2) 0 0.3rem;
    font-size: 1.03rem;
  }

  .feature-icon {
    width: 2rem;
    height: 2rem;
    margin-bottom: 0;
    font-size: 0.95rem;
  }

  .promise-card {
    padding: var(--s-3);
    gap: var(--s-2);
  }

  .shot-grid {
    gap: var(--s-3);
  }

  .shot-group {
    margin-bottom: var(--s-5);
  }

  /* --- Tables stack into labelled cards --------------------------------- */
  .table-scroll {
    margin: var(--s-2) 0 var(--s-4);
    padding: 0;
    border: 0;
    background: none;
    overflow-x: visible;
  }

  .spec-table,
  .spec-table tbody,
  .spec-table tr,
  .spec-table th,
  .spec-table td {
    display: block;
    width: 100%;
  }

  .spec-table thead {
    display: none;
  }

  .spec-table tr {
    margin-bottom: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border: 1px solid rgba(23, 35, 73, 0.1);
    border-radius: 0.75rem;
    background: #fff;
  }

  .spec-table tbody th {
    padding: 0 0 0.2rem;
    border: 0;
    font-size: 1rem;
  }

  .spec-table tbody td {
    padding: 0.12rem 0 0;
    border: 0;
    font-size: 0.93rem;
  }

  .spec-table tbody td[data-label]::before {
    display: inline;
    margin-right: 0.35rem;
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.7;
    content: attr(data-label);
  }

  .spec-table tbody td:only-of-type[data-label]::before {
    display: none;
  }

  .spec-table tbody td + td {
    margin-top: 0.25rem;
  }

  /* --- Steps ------------------------------------------------------------ */
  .step {
    padding-left: 0;
  }

  .step::before {
    position: static;
    margin-bottom: var(--s-2);
  }

  .step:not(:last-child)::after {
    display: none;
  }

  .step + .step {
    margin-top: var(--s-6);
  }

  .check-columns {
    gap: var(--s-3);
    margin: var(--s-3) 0 var(--s-4);
  }

  .toc {
    gap: 0.35rem;
    margin-bottom: var(--s-5);
  }

  .toc a {
    min-height: 2.3rem;
    font-size: 0.86rem;
  }

  .page-hero {
    padding: var(--s-5) 0 var(--s-3);
  }

  .page-layout {
    gap: var(--s-5);
    padding-bottom: var(--s-6);
  }

  .prose h2 {
    margin-top: var(--s-5);
  }

  /* Documentation sections collapse. The markup ships open, so this is
     purely an enhancement applied by enhance.js. */
  .doc-section {
    border-bottom: 1px solid rgba(23, 35, 73, 0.1);
  }

  .doc-summary {
    position: relative;
    padding: 0 2rem 0 0;
    cursor: pointer;
  }

  .doc-summary h2 {
    margin: 0;
    padding: var(--s-3) 0;
    font-size: 1.1rem;
  }

  .doc-summary::after {
    position: absolute;
    top: 50%;
    right: 0.3rem;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--ink-soft);
    border-bottom: 2px solid var(--ink-soft);
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.25s ease;
    content: "";
  }

  .doc-section[open] > .doc-summary::after {
    transform: translateY(-35%) rotate(225deg);
  }

  .doc-section[open] > .doc-summary h2 {
    color: var(--blue-strong);
  }

  .doc-body {
    padding-bottom: var(--s-3);
  }

  .doc-body > *:first-child {
    margin-top: 0;
  }

  .price-card {
    padding: var(--s-4) var(--s-3);
  }

  .footer-grid {
    gap: var(--s-3);
    padding-block: var(--s-5);
  }

  .phone-only-note {
    display: block;
    margin: 0 0 var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-left: 3px solid var(--blue);
    border-radius: 0 0.5rem 0.5rem 0;
    background: rgba(25, 118, 255, 0.055);
    color: var(--ink-soft);
    font-size: 0.88rem;
  }
}

/* ===========================================================================
   REDUCED MOTION
=========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-motion="on"] .reveal,
  [data-motion="on"] .reveal-group :where(.reveal-item) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .shot-frame,
  .feature-card,
  .promise-card,
  .button,
  .toc a,
  .doc-summary::after {
    transition: none !important;
  }

  .shot-frame.is-zoomable:hover,
  .feature-card:hover,
  .promise-card:hover,
  .button-primary:hover,
  .hero-shot .shot-frame,
  .hero-shot .shot-frame:hover {
    transform: none !important;
  }

  .lightbox[open] {
    animation: none !important;
  }
}

/* ===========================================================================
   PRINT
   The setup guide and the resource articles are documents people actually
   print or save as PDF. Decorative layers cost ink and can push real content
   onto an extra sheet, so they are dropped. Collapsed reference detail is
   expanded instead: on paper there is no way to open a disclosure.
=========================================================================== */
@media print {
  .page-scene,
  .tm-hero-scene {
    display: none !important;
  }

  /* The disclosure arrow means nothing on paper, and the content behind it
     is exactly what a printed reference should include. */
  .step-detail > summary::after {
    display: none;
  }

  .step-detail-body {
    display: block !important;
  }
}