/* ============================================================
   DOCKSIDE — DESIGN SYSTEM
   Light page, dark card breakouts.
   Editorial layer (Instrument Serif) over systematic body (Inter).
   See WEBSITE.md for the locked design decisions.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Harbor (primary brand) ---- */
  --harbor:        #047857;
  --harbor-light:  #a7f3d0;
  --harbor-deep:   #064e3b;
  --harbor-wash:   rgba(4, 120, 87, 0.06);
  --harbor-glow:   rgba(4, 120, 87, 0.32);

  /* ---- Premium accent ---- */
  --amber:           #d97706;
  --amber-on-light:  #b45309;
  --amber-on-dark:   #f5b54a;
  --amber-glow:      rgba(217, 119, 6, 0.16);

  /* ---- Reserved supporting ---- */
  --sage:          #65a30d;
  --sage-on-dark:  #a3e635;
  --sage-wash:     rgba(101, 163, 13, 0.08);
  --stone:         #78716c;
  --slate:         #475569;

  /* ---- Light surfaces (page) ---- */
  --bg:            #fefcf9;
  --bg-elevated:   #f7f3ec;
  --bg-card:       #ffffff;
  --border:        rgba(15, 30, 25, 0.10);
  --border-strong: rgba(15, 30, 25, 0.18);

  /* ---- Dark card surfaces ---- */
  --dark:           #0f1413;
  --dark-elevated:  #161a19;
  --dark-card:      #1a2120;
  --dark-border:    rgba(255, 255, 255, 0.08);
  --dark-border-strong: rgba(255, 255, 255, 0.16);

  /* ---- Foreground (light) ---- */
  --text:          #0f1e19;
  --text-muted:    rgba(15, 30, 25, 0.55);
  --text-dim:      rgba(15, 30, 25, 0.40);

  /* ---- Foreground (dark) ---- */
  --cream:         #fefcf9;
  --text-on-dark:        #fefcf9;
  --text-on-dark-muted:  rgba(254, 252, 249, 0.62);
  --text-on-dark-dim:    rgba(254, 252, 249, 0.38);

  /* ---- Type ---- */
  --font-display:  'Instrument Serif', 'Times New Roman', serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;

  /* ---- Spacing ---- */
  --container:        1200px;
  --container-narrow: 880px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.h-display {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.h-display em {
  font-style: italic;
  color: var(--amber-on-light);
}

/* Two-color headline contrast — non-italic accent spans.
   Used in the hero and other display headings where we want
   color to do rhetorical work without italic. */
.h-display .accent-harbor,
.h-section .accent-harbor {
  color: var(--harbor);
}

.h-display .accent-amber,
.h-section .accent-amber {
  color: var(--amber-on-light);
}

/* On dark cards, both accents shift for contrast */
.dark-card .h-display .accent-harbor,
.dark-card .h-section .accent-harbor {
  color: var(--harbor-light);
}

.dark-card .h-display .accent-amber,
.dark-card .h-section .accent-amber {
  color: var(--amber-on-dark);
}

.h-section {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.h-section em {
  font-style: italic;
  color: var(--amber-on-light);
}

/* On dark cards, italics shift to brighter amber for contrast */
.dark-card .h-section em,
.dark-card .h-display em {
  color: var(--amber-on-dark);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}

.dark-card .eyebrow {
  color: var(--harbor-light);
}

.lead {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.55;
  color: var(--text-muted);
  font-weight: 400;
  max-width: 56ch;
}

.dark-card .lead {
  color: var(--text-on-dark-muted);
}

p {
  color: var(--text-muted);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms var(--ease);
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}

.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}

section {
  padding: clamp(56px, 7vw, 96px) 0;
  position: relative;
}

/* ============================================================
   NAV
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 16px 0;
  background: rgba(254, 252, 249, 0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease);
}

.nav.scrolled {
  border-bottom-color: var(--border);
  background: rgba(254, 252, 249, 0.92);
}

/* When the nav sits over a dark hero (top-of-page, before scroll),
   it inverts to a transparent dark glass. The existing .scrolled
   state takes over as soon as the user scrolls past the hero,
   reverting to the cream nav for the rest of the page. */
.nav.over-dark:not(.scrolled) {
  background: rgba(15, 30, 25, 0.20);
  border-bottom-color: transparent;
}

.nav.over-dark:not(.scrolled) .nav-brand {
  color: var(--harbor);
}

.nav.over-dark:not(.scrolled) .nav-links a {
  color: var(--text);
}

.nav.over-dark:not(.scrolled) .nav-links a:hover,
.nav.over-dark:not(.scrolled) .nav-links a.is-active {
  color: var(--harbor);
}

.nav.over-dark:not(.scrolled) .nav-links a.nav-cta {
  /* Primary CTA stays Harbor green with cream text — works on any background */
  color: var(--cream);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--harbor);
}

.nav-brand-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 0.9375rem;
  font-weight: 500;
}

.nav-links a {
  color: var(--text);
  transition: color 200ms var(--ease);
}

.nav-links a:hover,
.nav-links a.is-active {
  color: var(--harbor);
}

.nav-links a.nav-cta {
  padding: 10px 20px;
  background: var(--harbor);
  color: var(--cream);
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: transform 200ms var(--ease), background 200ms var(--ease), box-shadow 240ms var(--ease);
}

.nav-links a.nav-cta:hover {
  transform: translateY(-1px);
  background: var(--harbor-deep);
  color: var(--cream);
}

/* Hamburger toggle — hidden on desktop, visible on mobile */
.nav-toggle {
  display: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px;
  margin: -10px;
  cursor: pointer;
  color: var(--text);
  border-radius: 8px;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 1.75px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 240ms var(--ease), opacity 240ms var(--ease);
}

.nav-toggle-bar + .nav-toggle-bar {
  margin-top: 6px;
}

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

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  transform: translateY(-3.875px) rotate(-45deg);
}

.nav.over-dark:not(.scrolled) .nav-toggle {
  color: var(--text);
}

@media (max-width: 720px) {
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}

/* ============================================================
   NAV SHEET (mobile menu)
   ============================================================ */

.nav-sheet {
  position: fixed;
  inset: 0;
  background: rgba(254, 252, 249, 0.97);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease);
  padding: 80px 32px 32px;
  overflow-y: auto;
}

.nav-sheet[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.nav-sheet-inner {
  display: flex;
  flex-direction: column;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

.nav-sheet-link {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  transition: color 200ms var(--ease);
}

.nav-sheet-link.is-active {
  color: var(--harbor);
}

.nav-sheet-link:hover {
  color: var(--harbor);
}

.nav-sheet .nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 14px 24px;
  background: var(--harbor);
  color: var(--cream);
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: background 200ms var(--ease);
}

.nav-sheet .nav-cta:hover {
  background: var(--harbor-deep);
  color: var(--cream);
}

body.nav-open {
  overflow: hidden;
}

@media (min-width: 721px) {
  .nav-sheet {
    display: none;
  }
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  border: none;
  transition: transform 200ms var(--ease), background 200ms var(--ease), box-shadow 300ms var(--ease), border-color 200ms var(--ease);
  white-space: nowrap;
}

.btn-primary {
  background: var(--harbor);
  color: var(--cream);
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--harbor-deep);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--border-strong);
  background: var(--bg-elevated);
  transform: translateY(-2px);
}

/* Buttons inside dark cards */
.dark-card .btn-secondary {
  color: var(--cream);
  border-color: var(--dark-border-strong);
}

.dark-card .btn-secondary:hover {
  background: var(--dark-elevated);
  border-color: var(--harbor-light);
}

.btn-arrow {
  transition: transform 200ms var(--ease);
}

.btn:hover .btn-arrow {
  transform: translateX(3px);
}

/* ============================================================
   HERO
   ============================================================ */

/* ============================================================
   HERO — light by default, .is-dark flips to OG-style atmospheric
   dark Harbor field. The dark variant is what's currently active
   on the home page; the light variant is preserved as fallback.
   ============================================================ */

.hero {
  padding: clamp(56px, 8vw, 96px) 0 clamp(32px, 5vw, 56px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Light-hero atmospheric glow (used when .is-dark is not present) */
.hero:not(.is-dark)::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 700px;
  background: radial-gradient(ellipse, var(--harbor-wash) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Dark hero — mirrors the OG image's atmospheric Harbor field.
   Deep gradient base, two soft radial glows positioned to match
   the OG composition (Harbor top-left, Amber bottom-right),
   subtle film grain at low opacity. */
.hero.is-dark {
  background:
    /* Bottom-right amber atmospheric glow */
    radial-gradient(
      ellipse 1100px 700px at 85% 85%,
      rgba(217, 119, 6, 0.14) 0%,
      transparent 65%
    ),
    /* Top-left Harbor atmospheric glow */
    radial-gradient(
      ellipse 1300px 900px at 15% 15%,
      rgba(10, 138, 100, 0.55) 0%,
      transparent 60%
    ),
    /* Base gradient */
    linear-gradient(180deg, #055f47 0%, #033d2e 100%);
  color: var(--cream);
  padding: clamp(72px, 10vw, 120px) 0 clamp(48px, 7vw, 80px);
}

/* Subtle film-grain overlay — matches the 4% black overlay
   in the OG image. Gives the dark field a touch of texture. */
.hero.is-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.04);
  pointer-events: none;
  z-index: 1;
}

.hero > * {
  position: relative;
  z-index: 2;
}

/* Eyebrow pill — light variant by default; flips on .is-dark hero */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeUp 800ms var(--ease) 100ms forwards;
}

.hero.is-dark .hero-eyebrow {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--harbor-light);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero h1 {
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeUp 900ms var(--ease) 200ms forwards;
  /* Each sentence is ~28 characters; let them sit on their own
     lines via the explicit <br>. text-wrap: balance keeps lines
     visually balanced if they wrap on narrow viewports. */
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

.hero.is-dark h1 {
  color: var(--cream);
}

/* Two-color accents: on dark hero, accent-harbor shifts from deep
   harbor (#047857, invisible on dark) to mint-harbor (#34d399 —
   the same color used in the OG image). Amber stays warm but
   shifts slightly brighter for contrast. */
.hero.is-dark h1 .accent-harbor {
  color: #34d399;
}

.hero.is-dark h1 .accent-amber {
  color: var(--amber-on-dark);
}

.hero .lead {
  margin: 0 auto 36px;
  opacity: 0;
  animation: fadeUp 900ms var(--ease) 350ms forwards;
}

.hero.is-dark .lead {
  color: var(--text-on-dark-muted);
}

.hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 900ms var(--ease) 500ms forwards;
}

/* Secondary button on dark hero — borders flip to light-on-dark */
.hero.is-dark .btn-secondary {
  color: var(--cream);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

/* Primary CTA on dark hero — swap from Harbor to Amber so the
   button doesn't blend into the same-color Harbor background.
   Amber is the underused brand accent; using it here creates a
   defined home for it on the dark hero. Scoped to .hero.is-dark
   so it only applies in this context — every other use of
   .btn-primary across the site stays Harbor. */
.hero.is-dark .btn-primary {
  background: var(--amber);
  color: var(--cream);
}

.hero.is-dark .btn-primary:hover {
  background: var(--amber-on-light);
}

.hero.is-dark .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--harbor-light);
}

.hero-meta {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-dim);
  opacity: 0;
  animation: fadeUp 900ms var(--ease) 650ms forwards;
}

.hero-meta strong {
  color: var(--harbor);
  font-weight: 500;
}

.hero.is-dark .hero-meta {
  color: var(--text-on-dark-dim);
}

.hero.is-dark .hero-meta strong {
  color: var(--harbor-light);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* HERO PRODUCT SCREENSHOT */
.hero-product {
  margin: clamp(40px, 8vw, 80px) auto 0;
  max-width: 1080px;
  position: relative;
  opacity: 0;
  animation: fadeUp 1200ms var(--ease) 800ms forwards;
}

/* The screenshot already has its own Mac window chrome (rounded
   corners, traffic-light dots). We don't add another frame on top —
   that creates a visible edge mismatch. Only the drop shadow that
   lifts the screenshot off the page is preserved. */
.product-frame-dark {
  position: relative;
}

.product-frame-dark img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow:
    0 50px 100px -40px rgba(15, 30, 25, 0.30),
    0 20px 50px -20px var(--harbor-wash);
}

.product-placeholder {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1a1f1d, #0e1110);
  color: var(--text-on-dark-dim);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 24px;
}

.product-placeholder span {
  display: block;
  margin-top: 8px;
  font-size: 0.75rem;
  opacity: 0.6;
}

/* ============================================================
   PILLARS — light section, three cards
   ============================================================ */

.pillars-header {
  text-align: center;
  margin-bottom: 56px;
}

.pillars-header h2 {
  margin-bottom: 20px;
}

.pillars-header .lead {
  margin: 0 auto;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pillar {
  padding: 32px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transition: border-color 300ms var(--ease), transform 300ms var(--ease), box-shadow 300ms var(--ease);
}

.pillar:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -24px rgba(15, 30, 25, 0.12);
}

.pillar-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--harbor-wash);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: var(--harbor);
  border: 1px solid rgba(4, 120, 87, 0.16);
}

/* "Built for you" pillar — sage accent (single instance, earned) */
.pillar.is-built-for-you .pillar-icon {
  background: var(--sage-wash);
  color: var(--sage);
  border-color: rgba(101, 163, 13, 0.20);
}

.pillar h3 {
  font-family: var(--font-display);
  font-size: 1.625rem;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.pillar h3 em {
  font-style: italic;
  color: var(--amber-on-light);
}

.pillar.is-built-for-you h3 em {
  color: var(--sage);
}

.pillar p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

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

/* ============================================================
   WHY BROWSERS FAIL: contrast rows, "why change" argument
   ============================================================ */

.why-fail {
  background: var(--bg-elevated);
}

.contrast-grid {
  display: grid;
  gap: 12px;
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.contrast-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: center;
  gap: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 26px;
  transition: border-color 300ms var(--ease), transform 300ms var(--ease);
}

.contrast-row:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.contrast-from {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.contrast-from strong {
  font-weight: 600;
  color: var(--text);
}

.contrast-to {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text);
  padding-left: 24px;
  border-left: 1px solid var(--border);
}

.contrast-to strong {
  font-weight: 600;
  color: var(--harbor);
}

@media (max-width: 720px) {
  .contrast-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 22px;
  }
  .contrast-to {
    padding-left: 0;
    border-left: none;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
}

/* ============================================================
   DARK CARD — the showcase moment
   ============================================================ */

.dark-card-section {
  padding: clamp(40px, 5vw, 64px) 0;
}

.dark-card {
  max-width: var(--container);
  margin: 0 auto;
  background: var(--dark);
  color: var(--text-on-dark);
  border-radius: 24px;
  padding: clamp(48px, 7vw, 80px);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 30px 80px -30px rgba(15, 30, 25, 0.20),
    0 10px 30px -10px var(--harbor-wash);
}

/* Atmospheric glows inside the dark card */
.dark-card::before {
  content: '';
  position: absolute;
  top: -200px;
  left: -120px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(4, 120, 87, 0.16) 0%, transparent 60%);
  pointer-events: none;
}

.dark-card::after {
  content: '';
  position: absolute;
  bottom: -180px;
  right: -120px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(217, 119, 6, 0.10) 0%, transparent 65%);
  pointer-events: none;
}

.dark-card > * {
  position: relative;
  z-index: 2;
}

/* Workspaces dark card variant — differentiated atmospheric glows.
   Harbor glow shifts to center-right (lighting the workspace stack
   illustration in the right column). Amber glow shifts to lower-left
   for visual balance. Larger and softer than the default corner
   glows so the card feels lit-from-within rather than vignetted.
   The default .dark-card glow positions still apply to the closing
   CTA card, which uses no modifier class. */
.dark-card-workspaces::before {
  top: 50%;
  left: auto;
  right: -180px;
  transform: translateY(-50%);
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(4, 120, 87, 0.22) 0%, transparent 65%);
}

.dark-card-workspaces::after {
  bottom: -160px;
  left: -120px;
  right: auto;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(217, 119, 6, 0.08) 0%, transparent 65%);
}

/* Two-column dark card layout */
.dark-card-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

/* Stacked dark card — text on top, visual below at full width.
   Used by Workspaces card so the side-by-side comparison shots
   each get ~half the dark card width instead of being cramped
   into a sub-column. */
.dark-card-stacked {
  display: grid;
  gap: clamp(36px, 5vw, 56px);
}

.dark-card-stacked .dark-card-text {
  max-width: 720px;
}

.dark-card-text .eyebrow {
  margin-bottom: 16px;
}

.dark-card-text h2 {
  margin-bottom: 22px;
  color: var(--cream);
}

.dark-card-text .lead {
  margin-bottom: 0;
  max-width: 56ch;
}

.feature-list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text-on-dark-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.feature-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--harbor-light);
  border-radius: 50%;
  margin-top: 9px;
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--harbor-light);
}

/* Screenshot inside a dark card */
.screenshot-in-dark {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--dark-border);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.5);
}

.screenshot-in-dark .product-placeholder {
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #1f2522, #0e1110);
}

/* Workspaces section — top split layout.
   Text + features on the left, screenshot on the right.
   The modules below sit at full card width (handled by parent
   .dark-card-stacked grid). */
.workspace-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}

@media (max-width: 880px) {
  .workspace-split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Workspace stack illustration — three fanned workspace windows
   rendered as an inline SVG. The SVG self-contains its window
   chrome (titlebars, shadows, accent tints) so the figure itself
   has no border or background — it sits naturally on the dark card
   without nesting a panel-in-panel. */
.workspace-stack-shot {
  margin: 0;
  position: relative;
}

.workspace-stack-illo {
  display: block;
  width: 100%;
  height: auto;
  /* Soft outer shadow so the stack feels lifted off the dark card
     without needing a bordered viewport wrapper. */
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.45));
}

/* Centered dark card variant — for closing CTAs */
.dark-card-centered {
  text-align: center;
  padding: clamp(72px, 10vw, 120px) clamp(32px, 6vw, 80px);
}

.dark-card-centered h2 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  margin-bottom: 24px;
  color: var(--cream);
}

.dark-card-centered .lead {
  margin: 0 auto 36px;
  color: var(--text-on-dark-muted);
}

.dark-card-centered .closing-meta {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-on-dark-dim);
}

@media (max-width: 880px) {
  .dark-card-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ============================================================
   VIGNETTE BLOCK — work / personal / side hustle modules.
   Lives inside the Workspaces dark card. Modules use dark-on-dark
   styling (.is-on-dark) so they read as supporting context to the
   feature screenshot above them, not a separate loud section.
   Light-page styling kept as the default in case the modules
   are reused elsewhere later.
   ============================================================ */

/* In-section divider: marks the transition from feature deep-dive
   into the three-module "in practice" beat. Sits inside the dark
   card, tightens the rhythm between feature list and modules. */
.vignette-divider {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--dark-border);
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.vignette-divider .eyebrow {
  margin-bottom: 0;
}

.vignette-divider-text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-on-dark);
  margin: 0;
}

.vignette-divider-sub {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-on-dark-muted, rgba(255, 255, 255, 0.62));
  max-width: 52ch;
}

.vignette-stack {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.vignette-module {
  background: var(--bg-elevated);
  border-radius: 14px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  align-items: baseline;
  position: relative;
  overflow: hidden;
}

.vignette-module::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--harbor);
}

/* Three Harbor intensities for visual differentiation —
   no new color meanings, just shade variation. */
.vignette-module.is-work::before     { background: var(--harbor-deep); }
.vignette-module.is-personal::before { background: var(--harbor); }
.vignette-module.is-side::before     { background: var(--harbor-light); }

.vignette-label {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
}

.vignette-body {
  display: grid;
  gap: 6px;
}

.vignette-apps {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
}

.vignette-desc {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Dark-on-dark modifier — used when the modules sit inside a
   dark card (current placement, inside the Workspaces section). */
.vignette-module.is-on-dark {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--dark-border);
}

/* Work-deep is so dark on the dark card that the side accent
   barely registers. Give it a subtle glow so it stays visible. */
.vignette-module.is-on-dark.is-work::before {
  background: var(--harbor);
  box-shadow: 0 0 14px rgba(4, 120, 87, 0.35);
}

.vignette-module.is-on-dark .vignette-label {
  color: var(--text-on-dark);
}

.vignette-module.is-on-dark .vignette-apps {
  color: var(--text-on-dark);
}

.vignette-module.is-on-dark .vignette-desc {
  color: var(--text-on-dark-muted);
}

@media (max-width: 720px) {
  .vignette-module {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 22px;
  }
  .vignette-divider {
    gap: 6px;
  }
}

@media (max-width: 720px) {
  .vignette-module {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px 24px;
  }
}

/* ============================================================
   WORKFLOW — before / after, "see yourself using it"
   ============================================================ */

.workflow-compare {
  display: grid;
  grid-template-columns: 1fr 56px 1.35fr;
  align-items: stretch;
  gap: 8px;
  max-width: 1000px;
  margin: 0 auto;
}

.workflow-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 30px;
}

.workflow-after {
  border-color: var(--harbor);
  background: linear-gradient(180deg, var(--harbor-wash), var(--bg-card));
  box-shadow: 0 20px 50px -24px var(--harbor-glow);
}

.workflow-tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 20px;
}

.workflow-tag.is-after {
  color: var(--harbor);
}

.workflow-chaos {
  list-style: none;
  display: grid;
  gap: 12px;
}

.workflow-chaos li {
  font-size: 1rem;
  color: var(--text-muted);
  padding-left: 20px;
  position: relative;
  line-height: 1.4;
}

.workflow-chaos li::before {
  content: '×';
  position: absolute;
  left: 4px;
  color: var(--text-dim);
  font-weight: 600;
}

.workflow-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--harbor);
  opacity: 0.7;
}

.workflow-spaces {
  display: grid;
  gap: 10px;
}

.workflow-space {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  position: relative;
  overflow: hidden;
}

.workflow-space::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--harbor);
}

.workflow-space.is-work::before     { background: var(--harbor-deep); }
.workflow-space.is-side::before     { background: var(--amber); }
.workflow-space.is-personal::before { background: var(--harbor-light); }

.workflow-space-label {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 2px;
}

.workflow-space-apps {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
}

@media (max-width: 720px) {
  .workflow-compare {
    grid-template-columns: 1fr;
  }
  .workflow-divider {
    transform: rotate(90deg);
    padding: 4px 0;
  }
}

/* ============================================================
   SECURITY — elevated-bg trust section
   ============================================================ */

.security-section {
  background: var(--bg-elevated);
  padding: var(--section-y) 0;
}

.security-header {
  text-align: center;
  margin-bottom: 56px;
}

.security-header h2 {
  margin-bottom: 20px;
}

.security-header .lead {
  margin: 0 auto;
  max-width: 52ch;
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.security-pillar {
  padding: 32px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 300ms var(--ease), transform 300ms var(--ease), box-shadow 300ms var(--ease);
}

.security-pillar:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -24px rgba(15, 30, 25, 0.12);
}

.security-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--harbor-wash);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: var(--harbor);
  border: 1px solid rgba(4, 120, 87, 0.16);
}

.security-icon-red {
  background: rgba(185, 28, 28, 0.06);
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.16);
}

.security-pillar h3 {
  font-family: var(--font-display);
  font-size: 1.625rem;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.security-pillar h3 em {
  font-style: italic;
  color: var(--amber-on-light);
}

.security-pillar p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.security-micro {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

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

/* ============================================================
   COMPARISON — light section, price-tier framing
   ============================================================ */

.compare-header {
  text-align: center;
  margin-bottom: 48px;
}

.compare-header h2 {
  margin-bottom: 18px;
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}

.compare-card {
  padding: 32px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: left;
  transition: border-color 300ms var(--ease);
}

.compare-card:hover {
  border-color: var(--border-strong);
}

.compare-card.is-us {
  border-color: var(--harbor);
  background: linear-gradient(180deg, var(--harbor-wash), var(--bg-card));
  position: relative;
  box-shadow: 0 20px 50px -20px var(--harbor-glow);
}

.compare-card.is-us::before {
  content: 'Dockside';
  position: absolute;
  top: -11px;
  left: 24px;
  background: var(--harbor);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 4px 12px;
  border-radius: 100px;
  text-transform: uppercase;
}

.compare-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.compare-tagline {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}

.compare-price {
  font-family: var(--font-display);
  font-size: 2.5rem;
  margin-bottom: 4px;
  color: var(--text);
  letter-spacing: -0.025em;
  line-height: 1;
}

.compare-card.is-us .compare-price {
  color: var(--harbor);
}

.compare-price-note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 24px;
}

.compare-attrs {
  list-style: none;
  display: grid;
  gap: 10px;
}

.compare-attrs li {
  font-size: 0.875rem;
  color: var(--text-muted);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.compare-attrs li::before {
  content: '·';
  position: absolute;
  left: 6px;
  color: var(--text-dim);
}

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

/* ---- Decision-oriented capability matrix ---- */
.compare-matrix {
  max-width: 1000px;
  margin: 40px auto 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.compare-matrix-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  align-items: center;
  border-top: 1px solid var(--border);
}

.compare-matrix-row:first-child {
  border-top: none;
}

.compare-matrix-head {
  background: var(--bg-elevated);
}

.compare-matrix-head .compare-matrix-cap,
.compare-matrix-head .compare-matrix-col {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.compare-matrix-head .compare-matrix-col.is-us {
  color: var(--harbor);
}

.compare-matrix-cap {
  padding: 16px 22px;
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.4;
}

.compare-matrix-col {
  padding: 16px 12px;
  text-align: center;
}

.compare-matrix-col.is-us {
  background: var(--harbor-wash);
}

.mk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
}

.mk-yes {
  color: var(--cream);
  background: var(--harbor);
}

.mk-partial {
  color: var(--amber-on-light);
  background: var(--amber-glow);
}

.mk-no {
  color: var(--text-dim);
}

@media (max-width: 720px) {
  /* Stacked comparison cards: each capability becomes its own card,
     each approach a labeled row. No table structure to scan across. */
  .compare-matrix {
    border: none;
    border-radius: 0;
    overflow: visible;
    margin-top: 28px;
    display: grid;
    gap: 12px;
  }
  .compare-matrix-head {
    display: none;
  }
  .compare-matrix-row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
  }
  .compare-matrix-cap {
    padding: 0 0 10px;
    margin-bottom: 6px;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
  }
  .compare-matrix-col {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    text-align: left;
  }
  .compare-matrix-col.is-us {
    background: var(--harbor-wash);
    margin: 4px -20px -18px;
    padding: 12px 20px 14px;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
  }
  .compare-matrix-col::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
  }
  .compare-matrix-col.is-us::before {
    content: attr(data-label);
    color: var(--harbor);
    font-weight: 600;
  }
  /* The faint "no" dash needs a touch more presence on its own row */
  .mk-no {
    color: var(--text-muted);
  }
}

/* ============================================================
   FOOTER
   ============================================================ */

footer {
  padding: 56px 0 40px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--harbor);
  margin-bottom: 12px;
}

.footer-brand-mark {
  width: 24px;
  height: 24px;
}

.footer-tagline {
  font-size: 0.875rem;
  color: var(--text-dim);
  max-width: 32ch;
  line-height: 1.55;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 56px;
}

.footer-col-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
  display: grid;
  gap: 10px;
}

.footer-col a {
  font-size: 0.9375rem;
  color: var(--text-muted);
  transition: color 200ms var(--ease);
}

.footer-col a:hover {
  color: var(--harbor);
}

.footer-bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 720px) {
  .footer-links {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

/* ============================================================
   SCROLL REVEALS
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect motion-reduction preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   PRICING PAGE
   Small hero, billing toggle, two-card pricing grid, trust strip,
   FAQ accordion, closing CTA. Cream throughout (no dark hero
   on this page — the cards are the hero).
   ============================================================ */

/* ---- Pricing hero (small, focused) ---- */
.pricing-hero {
  padding: clamp(48px, 7vw, 88px) 0 clamp(32px, 4vw, 48px);
  text-align: center;
}

.pricing-hero .hero-eyebrow {
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.h-page {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 auto 20px;
  max-width: 14ch;
  color: var(--text);
  text-wrap: balance;
}

.h-page em {
  font-style: italic;
  color: var(--amber-on-light);
}

.pricing-hero .lead {
  margin: 0 auto;
  max-width: 52ch;
}

.pricing-hero-meta {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ---- Billing toggle ----
   Used inside the Pro pricing card. The toggle sits between
   tagline and price, with a state-dependent annotation
   ("Save 32%") that appears under whichever button is active. */

/* Vertical wrap around the toggle + its annotation. Sized to
   content so it hugs the left edge of the Pro card column. */
.billing-toggle-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: flex-start;
}

.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 100px;
}

.billing-toggle-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 16px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease);
  white-space: nowrap;
}

.billing-toggle-btn:hover {
  color: var(--text);
}

.billing-toggle-btn.is-active {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(15, 30, 25, 0.10);
}

/* Annotation under the toggle — shown only when the toggle is
   in the "annual" mode (managed by inline script in pricing.html).
   Tucked under the Annual button using left padding that matches
   the toggle's outer padding + Annual button left padding. */
/* Annotation under the toggle — persists in both modes via two
   variants (positive/muted), only one visible at a time.
   Aligned with the toggle's outer left edge (no inset padding). */
.billing-toggle-annotation {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.billing-toggle-annotation.is-positive {
  color: var(--harbor);
}

.billing-toggle-annotation.is-muted {
  color: var(--text-muted);
}

.billing-toggle-annotation[hidden] {
  display: none;
}

/* ---- Pricing cards ---- */
.pricing-cards-section {
  padding: 0 0 clamp(48px, 6vw, 80px);
}

.pricing-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.5vw, 28px);
  max-width: 880px;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .pricing-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.pricing-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}

.pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -28px rgba(15, 30, 25, 0.20);
}

.pricing-card.is-free {
  border-color: var(--border-strong);
}

.pricing-card.is-pro {
  background: var(--bg);
  border: 2px solid var(--harbor);
  box-shadow:
    0 0 0 1px var(--harbor-wash) inset,
    0 30px 60px -30px var(--harbor-glow);
}

.pricing-card-recommended {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--harbor);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 6px 16px -6px var(--harbor-glow);
}

.pricing-card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pricing-card-title {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text);
}

.pricing-card-tagline {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ---- Price block ---- */
.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.pricing-price[hidden] {
  display: none;
}

.pricing-price-currency {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--text);
}

.pricing-price-amount {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--text);
}

.pricing-price-period {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-muted);
  letter-spacing: -0.005em;
}

/* Savings note next to the price — shown only when the toggle
   is in annual mode (handled by the parent .pricing-price's
   hidden attribute via the toggle JS). Sits on its own line
   below the price thanks to flex-basis: 100%. */
.pricing-price-savings {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--harbor);
  margin-top: 4px;
}

/* ---- Pricing CTAs ----
   Anchoring strategy: only ONE element per card gets margin-top: auto
   to push the bottom cluster down. On Pro, cta-meta is first in the
   bottom cluster so it takes the auto-margin. On Free, there is no
   meta, so the CTA itself gets the auto-margin via .is-free scoping. */
.pricing-cta {
  width: 100%;
  justify-content: center;
}

.pricing-card.is-free .pricing-cta {
  margin-top: auto;
}

.pricing-cta-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
  margin-top: auto;
  margin-bottom: -10px;
}

/* ---- Pricing feature lists ----
   margin-top: auto pushes the features block to the bottom of
   the card. The cards are flex-columns; this lets the feature
   list claim leftover vertical space so it always sits flush
   at the bottom. Top content (header, price, CTA, etc.) flows
   from the top, the gap between price/CTA cluster and features
   absorbs height differences between cards. Net effect: CTAs
   end up at much closer vertical positions across the two
   cards than without this rule. */
.pricing-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding-top: 22px;
}

.pricing-features li {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
  position: relative;
  padding-left: 22px;
}

.pricing-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 6px;
  border-left: 1.6px solid var(--harbor);
  border-bottom: 1.6px solid var(--harbor);
  transform: rotate(-45deg);
}

.pricing-features li strong {
  font-weight: 600;
  color: var(--text);
}

/* For Free card, the harbor checkmark color is fine — using the
   product-color throughout reinforces brand. No special case. */

/* ---- Trust strip ---- */
.trust-strip {
  padding: clamp(24px, 3vw, 40px) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.trust-strip ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px 36px;
  margin: 0;
  padding: 0;
}

.trust-strip li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-muted);
}

.trust-strip svg {
  color: var(--harbor);
  flex-shrink: 0;
}

/* ---- Testimonials (social proof) ---- */
.testimonials {
  padding: clamp(40px, 6vw, 80px) 0;
}

.testimonials-header {
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.testimonials-header h2 {
  margin: 14px 0 16px;
}

.testimonials-audience {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin: 0;
}

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

.testimonial {
  margin: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: border-color 300ms var(--ease), transform 300ms var(--ease);
}

.testimonial:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.testimonial-quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
}

.testimonial-attr {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
}

.testimonial-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text);
}

.testimonial-role {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

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

/* ---- FAQ ---- */
.faq-section {
  padding: clamp(32px, 4vw, 56px) 0 clamp(48px, 6vw, 80px);
}

.faq-container {
  max-width: 760px;
}

.faq-header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 56px);
}

.faq-header .eyebrow {
  margin-bottom: 16px;
}

.faq-header h2 {
  margin: 0;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 4px;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color 200ms var(--ease);
}

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

.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><path d='M3 5l4 4 4-4' stroke='%23475552' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center;
  transition: transform 200ms var(--ease);
}

.faq-item[open] summary::after {
  transform: rotate(180deg);
}

.faq-item summary:hover {
  color: var(--harbor);
}

.faq-answer {
  padding: 0 4px 22px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.faq-answer p {
  margin: 0;
}

.faq-answer p + p {
  margin-top: 12px;
}

.faq-answer a {
  color: var(--harbor);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ============================================================
   WHY DOCKSIDE — editorial closing module, dark surface
   Two-column asymmetric layout (eyebrow + lede on the left,
   narrative + resolution on the right) inside a dark card with
   a bottom-center Amber radial glow. Reusable as a pattern for
   other "editorial moment" surfaces across the site.

   Distinct from the home page closing CTA (which uses Harbor
   green): Amber here marks this surface as a different beat —
   a closing reflection, not a sales push.

   NOTE: lede uses Inter italic for an editorial feel. Revisit
   if/when a serif joins the brand system.
   ============================================================ */

.why-dockside {
  padding: clamp(48px, 6vw, 80px) 0;
}

.why-dockside-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: clamp(56px, 7vw, 96px) clamp(36px, 6vw, 80px);
  background:
    /* Bottom-center Amber atmospheric glow */
    radial-gradient(
      ellipse 1200px 600px at 50% 110%,
      rgba(217, 119, 6, 0.22) 0%,
      transparent 65%
    ),
    /* Subtle Amber wash from the bottom edge */
    radial-gradient(
      ellipse 800px 300px at 50% 100%,
      rgba(245, 181, 74, 0.10) 0%,
      transparent 70%
    ),
    /* Dark base */
    linear-gradient(180deg, #0f1413 0%, #161c1a 100%);
  color: var(--cream);
}

/* Subtle film grain — matches the hero treatment for cohesion */
.why-dockside-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.04);
  pointer-events: none;
  z-index: 1;
}

.why-dockside-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}

.why-dockside-col-left,
.why-dockside-col-right {
  min-width: 0;
}

.why-dockside-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-on-dark);
  margin-bottom: 24px;
}

.why-dockside-lede,
.why-dockside-body,
.why-dockside-resolution,
.why-dockside-tagline {
  text-wrap: pretty;
  margin: 0;
}

.why-dockside-lede {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.45;
  font-weight: 400;
  color: var(--cream);
}

.why-dockside-lede strong {
  font-weight: 500;
  font-style: italic;
  color: var(--amber-on-dark);
}

.why-dockside-body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(254, 252, 249, 0.72);
}

.why-dockside-body + .why-dockside-body {
  margin-top: 1.25rem;
}

.why-dockside-rule {
  width: 32px;
  height: 1px;
  margin: 32px 0;
  border: 0;
  background: rgba(254, 252, 249, 0.20);
}

.why-dockside-resolution {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 16px;
}

.why-dockside-tagline {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: rgba(254, 252, 249, 0.48);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .why-dockside-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 480px) {
  .why-dockside-tagline {
    white-space: normal;
  }
}


/* ============================================================
   DOWNLOAD PAGE
   Hero with expanding download picker, 3-card requirements grid,
   first-launch dark card with numbered steps, platform note.
   ============================================================ */

/* ---- Hero ---- */
.download-hero {
  padding: clamp(48px, 7vw, 88px) 0 clamp(32px, 4vw, 48px);
  text-align: center;
}

.download-hero .hero-eyebrow {
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.download-hero .lead {
  margin: 0 auto 32px;
  max-width: 52ch;
}

/* ---- Expanding download picker ---- */
.download-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.download-cta {
  /* matches existing .btn .btn-primary; size handled there */
}

.download-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 480px;
}

.download-options[hidden] {
  display: none;
}

.download-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  text-align: left;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
}

.download-option:hover {
  border-color: var(--harbor);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -16px var(--harbor-glow);
}

.download-option-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}

.download-option-detail {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.download-help {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.download-help summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
  padding: 8px;
  transition: color 200ms var(--ease);
}

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

.download-help summary:hover {
  color: var(--harbor);
}

.download-help p {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 12px auto 0;
  max-width: 56ch;
  text-align: left;
}

.download-meta {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .download-options {
    grid-template-columns: 1fr;
  }
}

/* ---- Product preview ---- */
.download-preview {
  padding: clamp(32px, 5vw, 64px) 0 0;
}

/* Screenshots carry their own Mac window chrome, so no added frame.
   Same lift treatment as the homepage hero screenshot. */
.download-preview-frame {
  max-width: 920px;
  margin: 0 auto;
}

.download-preview-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow:
    0 50px 100px -40px rgba(15, 30, 25, 0.30),
    0 20px 50px -20px var(--harbor-wash);
}

.download-preview-caption {
  text-align: center;
  margin: 20px auto 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ---- System requirements ---- */
.requirements-section {
  padding: clamp(48px, 6vw, 80px) 0;
}

.requirements-header {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 48px);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.requirements-header .eyebrow {
  margin-bottom: 16px;
}

.requirements-header h2 {
  margin: 0;
}

.requirements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  max-width: 880px;
  margin: 0 auto;
}

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

.requirement-card {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}

.requirement-card:hover {
  border-color: var(--harbor);
  transform: translateY(-2px);
}

.requirement-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* "macOS" is a brand spelling, not a label to uppercase. Keep Apple's
   casing even though sibling labels (CHIP, SIZE) stay all-caps. */
.requirement-label-macos {
  text-transform: none;
  letter-spacing: 0.04em;
}

.requirement-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.5rem);
  line-height: 1.05;
  color: var(--text);
  font-weight: 400;
}

.requirement-suffix {
  font-size: 0.6em;
  color: var(--text-muted);
}

.requirement-detail {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ---- First launch dark card ---- */
.first-launch {
  display: grid;
  gap: clamp(36px, 5vw, 56px);
}

.first-launch-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.first-launch-header .eyebrow {
  margin-bottom: 16px;
  color: var(--harbor-light);
}

.first-launch-header h2 {
  color: var(--cream);
  margin-bottom: 16px;
}

.first-launch-header .lead {
  color: var(--text-on-dark-muted);
  margin: 0;
}

.first-launch-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}

@media (max-width: 720px) {
  .first-launch-steps {
    grid-template-columns: 1fr;
  }
}

.first-launch-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--dark-border);
  border-radius: 14px;
}

.first-launch-step-num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--harbor-light);
  font-weight: 500;
}

.first-launch-step-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.first-launch-step-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.15;
  color: var(--cream);
  letter-spacing: -0.01em;
}

.first-launch-step-text {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
  margin: 0;
}

/* Trial note sitting below the 3-step grid — quiet, mono,
   harbor-light callout that the trial begins automatically. */
.first-launch-trial-note {
  margin: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--harbor-light);
}

/* ---- Platform note (Windows / Linux status disclosure) ---- */
.platform-note {
  padding: clamp(32px, 4vw, 56px) 0 clamp(48px, 6vw, 80px);
}

.platform-note-inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 28px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--bg-elevated);
}

.platform-note-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
  text-align: center;
}

.platform-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.platform-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
}

.platform-row + .platform-row {
  border-top: 1px solid var(--border);
}

.platform-name {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
}

.platform-status {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
}

.platform-status.is-planned {
  background: var(--harbor-wash);
  color: var(--harbor);
}

.platform-status.is-not-planned {
  background: rgba(15, 30, 25, 0.06);
  color: var(--text-muted);
}

/* Lead-secondary — used on heroes that split the subhead across
   two lines for breathing room. Lighter weight than the primary
   lead. Works on any hero context. */
.lead-secondary {
  margin-top: 4px;
  color: var(--text-muted);
}

/* ============================================================
   CONTACT PAGE
   Two-column layout: form on the left, "what to expect" / "heads
   up" aside on the right. Single column on mobile.
   ============================================================ */

.contact-hero {
  padding: clamp(48px, 7vw, 88px) 0 clamp(24px, 4vw, 40px);
  text-align: center;
}

.contact-hero .hero-eyebrow {
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-hero .lead {
  margin: 0 auto;
  max-width: 52ch;
}

.contact-section {
  padding: clamp(32px, 4vw, 56px) 0 clamp(48px, 6vw, 80px);
}

.contact-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(32px, 5vw, 64px);
  max-width: 960px;
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 720px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ---- Form ---- */
.contact-form {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

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

.contact-field label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

.contact-field input,
.contact-field textarea,
.contact-field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}

.contact-field select {
  /* Custom chevron — appearance:none removes the native one */
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><path d='M3 5l4 4 4-4' stroke='%23475552' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

.contact-field input:focus,
.contact-field textarea:focus,
.contact-field select:focus {
  outline: none;
  border-color: var(--harbor);
  background: var(--bg);
}

.contact-field[hidden] {
  display: none !important;
}

.contact-field-optional {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-left: 6px;
  text-transform: none;
}

.contact-field-optional[hidden] {
  display: none;
}

.contact-field textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-body);
}

.contact-submit {
  align-self: flex-start;
  margin-top: 4px;
}

.contact-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact-status {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: 10px;
}

.contact-status.is-success {
  background: var(--harbor-wash);
  color: var(--harbor-deep);
  border: 1px solid var(--harbor-light);
}

.contact-status.is-error {
  background: rgba(239, 68, 68, 0.06);
  color: var(--error);
  border: 1px solid rgba(239, 68, 68, 0.20);
}

/* ---- Aside ---- */
.contact-aside {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.contact-aside-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-aside-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

.contact-aside-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-aside-list li {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
  position: relative;
  padding-left: 20px;
}

.contact-aside-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--harbor);
  border-radius: 50%;
}

/* ============================================================
   POLICY PAGES
   Shared content-column treatment for the four legal policy
   pages: privacy.html, terms.html, refunds.html, eula.html.
   Single narrow column, comfortable reading line-length, generous
   vertical rhythm. Brand chrome (nav + footer) wraps unchanged.
   ============================================================ */

.policy-page {
  padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 7vw, 96px);
}

.policy-container {
  max-width: 720px;
}

/* Legal eyebrow — matches the pill-shaped eyebrow pattern from other heroes */
.policy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 24px;
}

.policy-container h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 clamp(32px, 4vw, 48px);
  text-wrap: balance;
}

.policy-container h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: clamp(48px, 5vw, 64px) 0 16px;
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--border);
  text-wrap: balance;
}

.policy-container h2:first-of-type {
  margin-top: clamp(32px, 4vw, 48px);
}

.policy-container h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text);
  margin: 32px 0 12px;
}

.policy-container p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 16px;
  text-wrap: pretty;
}

.policy-container a {
  color: var(--harbor);
  text-decoration: underline;
  text-decoration-color: rgba(4, 120, 87, 0.40);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  word-break: break-word;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.policy-container a:hover,
.policy-container a:focus-visible {
  color: var(--harbor-deep);
  text-decoration-color: var(--harbor);
}

.policy-container strong {
  font-weight: 600;
  color: var(--text);
}

.policy-container ul,
.policy-container ol {
  margin: 0 0 20px;
  padding-left: 24px;
}

.policy-container li {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 8px;
}

.policy-container li::marker {
  color: var(--harbor);
}

.policy-container hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: clamp(40px, 5vw, 56px) 0;
}

/* The all-caps legal sections (Warranty Disclaimer, Limitations of
   Liability, etc.) sit in a slightly muted box so the heavy
   ALL-CAPS text doesn't shout against the otherwise calm document. */
.policy-container .policy-caps,
.policy-container p:has(> strong:only-child:matches([data-caps])) {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* ============================================================
   ABOUT PAGE
   Sectioned founder note. Hero up top, then 4 thematic sections
   each with a mono eyebrow + body. Final section is a soft
   contact CTA. Narrow content column for comfortable reading.
   ============================================================ */

.about-hero {
  padding: clamp(48px, 7vw, 88px) 0 clamp(24px, 4vw, 40px);
  text-align: center;
}

.about-hero .hero-eyebrow {
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.about-page {
  padding: 0 0 clamp(56px, 7vw, 96px);
}

.about-container {
  max-width: 720px;
}

.about-section {
  padding: clamp(20px, 2.5vw, 32px) 0;
}

.about-section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--harbor);
  font-weight: 600;
  margin-bottom: 24px;
}

.about-section-body p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 18px;
}

.about-section-body p:last-child {
  margin-bottom: 0;
}

.about-section-body strong {
  font-weight: 600;
  color: var(--text);
}

.about-section-body a {
  color: var(--harbor);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.about-section-body a:hover {
  color: var(--harbor-deep);
}

/* The "How I work" commitment block stack inside the section. */
.about-commitments {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 24px;
}

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

.about-commitment-title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.about-commitment-text {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}

/* Contact section gets slightly lighter treatment to read as a soft
   CTA at the end, not another body paragraph. */
.about-section-contact .about-section-body p {
  font-size: 1.0625rem;
  color: var(--text);
}

/* ============================================================
   FEATURES PAGE
   Modular page architecture. Three tiers of feature treatment:
   editorial modules (Tier 1), feature cards (Tier 2), and
   table-stakes tiles (Tier 3). Each tier scales the visual
   weight appropriately. Two mid-page CTA strips break up the
   flow with conversion checkpoints.
   ============================================================ */

/* ---------- Hero ---------- */
.features-hero {
  padding: clamp(64px, 8vw, 96px) 0 clamp(40px, 5vw, 64px);
  text-align: center;
}

.features-hero .hero-eyebrow {
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.features-hero .h-page {
  margin: 0 auto clamp(20px, 2.5vw, 28px);
  max-width: 880px;
}

.features-hero .lead {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Tier 1 — Editorial modules ---------- */
.features-tier-1 {
  padding: clamp(40px, 5vw, 64px) 0;
}

.feature-module {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
  padding: clamp(48px, 6vw, 80px) 0;
}

.feature-module:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.feature-module.is-text-right .feature-module-text {
  order: 2;
}

.feature-module.is-text-right .feature-module-visual {
  order: 1;
}

.feature-module-text {
  display: flex;
  flex-direction: column;
}

.feature-module-text .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--harbor);
  margin-bottom: 20px;
}

.feature-module-text .h-section {
  margin: 0 0 24px;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1.1;
}

.feature-module-text .lede {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 20px;
}

.feature-module-text .body {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 16px;
}

.feature-module-text .body:last-of-type {
  margin-bottom: 24px;
}

.feature-mechanics {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.feature-mechanics li {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
  padding-left: 18px;
  position: relative;
}

.feature-mechanics li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--harbor);
}

.feature-module-visual {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Placeholder visual treatment — soft dashed border, mono label.
   Replaced with real SVG illustration or screenshot in later phases. */
.visual-placeholder {
  width: 100%;
  aspect-ratio: 5 / 4;
  background: var(--bg-elevated);
  border: 1.5px dashed var(--border-strong);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}

.visual-placeholder.small {
  aspect-ratio: 1 / 1;
  border-width: 1px;
  border-radius: 12px;
}

.visual-placeholder-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- Mid-page CTA strip ---------- */
.cta-strip {
  background: linear-gradient(180deg, var(--harbor-wash) 0%, var(--bg) 100%);
  padding: clamp(28px, 4vw, 40px) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.cta-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cta-strip-text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
  flex: 1 1 280px;
}

.cta-strip-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.cta-strip-micro {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

/* ---------- Section break ---------- */
.features-break {
  padding: clamp(56px, 6vw, 80px) 0 clamp(24px, 3vw, 40px);
  text-align: center;
}

.features-break .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--harbor);
  margin-bottom: 16px;
}

.features-break .h-section {
  margin: 0 auto 12px;
  max-width: 720px;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.features-break-sub {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-muted);
  margin: 0;
}

/* ---------- Tier 2 — Feature grid ---------- */
.features-tier-2 {
  padding: clamp(24px, 3vw, 40px) 0 clamp(40px, 5vw, 64px);
}

.features-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}

.feature-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-card-visual {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.feature-card-visual .visual-placeholder {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  border-width: 1px;
  border-radius: 12px;
}

.feature-card .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--harbor);
  margin: 0;
}

.feature-card h3 {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}

.feature-card p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  flex: 1;
}

.feature-card .mechanic-footer {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* ---------- Tier 3 — Table-stakes grid ---------- */
.features-tier-3 {
  padding: clamp(24px, 3vw, 40px) 0 clamp(40px, 5vw, 64px);
}

.features-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}

.table-stake {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.table-stake-visual {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.table-stake h4 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.005em;
}

.table-stake p {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* ---------- A day with Dockside (features in concert) ---------- */
.day-in-life {
  background: var(--bg-elevated);
  padding: var(--section-y) 0;
}

.day-timeline {
  display: grid;
  gap: 14px;
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.day-moment {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 30px;
  position: relative;
  overflow: hidden;
  transition: border-color 300ms var(--ease), transform 300ms var(--ease);
}

.day-moment:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.day-moment::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--harbor);
}

.day-moment:nth-child(2)::before { background: var(--amber); }
.day-moment:nth-child(3)::before { background: var(--harbor-light); }

.day-moment-time {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-top: 6px;
}

.day-moment-body h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.day-moment-body p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.day-moment-features {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--harbor);
}

@media (max-width: 720px) {
  .day-moment {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 22px 24px;
  }
  .day-moment-time {
    padding-top: 0;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .feature-module {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .feature-module.is-text-right .feature-module-text,
  .feature-module.is-text-right .feature-module-visual {
    order: initial;
  }

  .feature-module-visual {
    min-height: 240px;
  }

  .features-grid-2 {
    grid-template-columns: 1fr;
  }

  .features-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .cta-strip-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .cta-strip-action {
    align-items: center;
  }

  .features-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ---------- Feature illustrations ---------- */
.feature-illustration {
  width: 100%;
  height: auto;
  max-width: 520px;
  display: block;
}

/* When SVG is inside a feature-module-visual, replace the placeholder
   sizing rules (the aspect-ratio container is removed entirely when
   real illustration is present). */
.feature-module-visual:has(.feature-illustration) {
  min-height: auto;
}

/* ---------- Tier 2 illustrations sizing ---------- */
.feature-card-visual svg {
  display: block;
  width: 100%;
  height: 100%;
}

.feature-card-visual {
  background: transparent;
  overflow: hidden;
  border-radius: 8px;
}

/* ---------- Tier 3 illustrations sizing ---------- */
.table-stake-visual svg {
  display: block;
  width: 100%;
  height: 100%;
}

.table-stake-visual {
  background: transparent;
  overflow: hidden;
  border-radius: 8px;
}

/* ---------- Features page revisions (Ali feedback May 12) ---------- */

/* 1. Tier 2 illustrations — bump height for better presence */
.features-grid-2 .feature-card-visual {
  height: 200px;
  margin-bottom: 12px;
}

/* 2. Hero → Tier 1 spacing reduction (was too much negative space) */
.features-hero {
  padding-bottom: clamp(20px, 2.5vw, 32px);
}

.features-tier-1 {
  padding-top: clamp(16px, 2vw, 24px);
}

/* First feature-module needs less top padding too */
.features-tier-1 .feature-module:first-child {
  padding-top: clamp(20px, 2.5vw, 32px);
}

/* 3. Closing CTA dark card — generous internal padding, more space
      between text and buttons, decorative illustration positioned
      bottom-right at low opacity. */
.dark-card-cta-closing {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 88px) clamp(32px, 5vw, 72px);
}

.dark-card-cta-closing .dark-card-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.dark-card-cta-closing .h-section {
  margin-bottom: clamp(24px, 3vw, 36px);
}

.dark-card-cta-closing .lead {
  margin-bottom: 0;
}

.dark-card-cta-closing .lead-secondary {
  margin-bottom: 0;
}

.dark-card-cta-closing .hero-ctas {
  margin-top: clamp(36px, 5vw, 56px);
  justify-content: flex-start;
}

/* Decorative illustration positioned bottom-right corner.
   Pointer-events none so it never blocks button clicks. */
.dark-card-deco {
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 320px;
  height: 320px;
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 880px) {
  .dark-card-deco {
    right: -80px;
    bottom: -80px;
    width: 280px;
    height: 280px;
    opacity: 0.45;
  }
}

@media (max-width: 560px) {
  .dark-card-deco {
    display: none;
  }
}

/* Closing CTA card — eyebrow needs more presence to match the page hierarchy */
.dark-card-cta-closing .eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 20px;
  display: inline-block;
}

/* Eyebrow with inline icon mark (used on Named Docks Tier 2 card) */
.eyebrow-with-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.eyebrow-mark {
  width: 11px;
  height: 12px;
  flex-shrink: 0;
  display: inline-block;
}

/* ----------------------------------------------------------
   ORPHAN PREVENTION (Ali feedback May 12)
   text-wrap: balance distributes lines evenly across headlines
   (preventing one long line + one orphan word).
   text-wrap: pretty optimizes paragraph endings — last line
   gets at least two words. Chrome 117+, Safari 17.4+, FF 121+.
   ---------------------------------------------------------- */

/* Headlines — balance for even line distribution */
.h-page,
.h-section,
.h-display,
.features-hero .h-page,
.feature-module-text .h-section,
.feature-card h3,
.table-stake h4,
.features-break .h-section,
.dark-card .h-section,
.cta-strip-text {
  text-wrap: balance;
}

/* Body paragraphs — pretty to prevent single-word orphans */
.lead,
.lead-secondary,
.lede,
.body,
.feature-card p,
.table-stake p,
.dark-card .lead,
.cta-strip-text {
  text-wrap: pretty;
}

/* ============================================================
   FEATURES PAGE — UNIFIED SECTION RHYTHM (Ali feedback May 12)

   Problem: each section had ad-hoc top/bottom padding. CTA strips
   felt tight (28-40px), section breaks were asymmetric, modules
   had giant internal padding. Result: visible "lurch" between
   sections as you scroll.

   Fix: every full-width section gets the same vertical breathing
   room. One token, used everywhere. Symmetric top/bottom.

   Hierarchy:
     --section-y      80px desktop / 56px mobile  → big rest beats
     --section-y-tight  48px / 32px               → tighter beats
                                                    (CTA strips,
                                                    section breaks)

   The CTA strip background still differentiates it visually; it
   doesn't need to be vertically cramped to feel like a different
   section.
   ============================================================ */

:root {
  --section-y: clamp(56px, 7vw, 80px);
  --section-y-tight: clamp(32px, 4vw, 48px);
}

/* All major sections — unified rhythm */
.features-hero {
  padding-top: clamp(80px, 9vw, 112px);    /* hero gets extra top for nav clearance */
  /* Headline area needs to breathe before the first feature; an
     overly tight bottom made Workspace Profiles read as cramped. */
  padding-bottom: clamp(44px, 5.5vw, 68px);
}

.features-tier-1 {
  padding-top: 0;                           /* hero already provides bottom space */
  padding-bottom: var(--section-y);
}

/* Per-module padding inside Tier 1 — the modules ARE the rhythm
   inside the section. Keep them as the "internal beat", smaller
   than full-section padding. */
.features-tier-1 .feature-module {
  padding: var(--section-y) 0;
}

/* The first module sits right under the headline area, so it keeps
   a real top beat instead of collapsing flush against the hero —
   the hero bottom + this padding give the section room to breathe. */
.features-tier-1 .feature-module:first-child {
  padding-top: clamp(32px, 4vw, 56px);
}

.features-tier-1 .feature-module:last-child {
  padding-bottom: 0;
}

/* CTA strips — same vertical beat as other sections.
   The background color does the visual differentiation. */
.cta-strip {
  padding: var(--section-y-tight) 0;
}

/* Section breaks — symmetric, lighter rhythm */
.features-break {
  padding: var(--section-y) 0 var(--section-y-tight);
}

/* Tier 2 grid */
.features-tier-2 {
  padding: 0 0 var(--section-y);
}

/* Tier 3 grid */
.features-tier-3 {
  padding: 0 0 var(--section-y);
}

/* Closing CTA section — same rhythm */
.dark-card-section {
  padding: var(--section-y) 0;
}

/* ============================================================
   PRICING PAGE — UNIFIED RHYTHM + CONVERSION POLISH (May 12)

   Three problems addressed:
   1. Cards smashed against trust strip — needed --section-y rhythm
   2. CTA strips used harbor-wash background — switching to amber-wash
      to match the editorial moments and create a recognizable
      "this is the moment" visual signal page-wide
   3. Micro-copy on CTA strips was --text-dim (rgba 0.40), failing
      readability against tinted backgrounds — bumping to --text-muted
   4. Post-cards CTA upgraded from a strip to a dedicated section
      treated as the page's primary conversion driver (option 1:
      cream background, amber radial glow, larger button, stacked
      micro-copy)
   ============================================================ */

/* Apply the same vertical rhythm token used on features.html
   to all pricing page sections */
.pricing-hero {
  padding-top: clamp(80px, 9vw, 112px);
  padding-bottom: var(--section-y);
}

/* Trust strip moved above cards — section-y margin handles spacing
   to the cards below. Internal padding stays as the base
   .trust-strip rule defines it. */
.trust-strip-above {
  padding: 0;
}

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

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

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

/* CTA strips on pricing page — amber-wash background to match the
   page's editorial moments. Same family as the strips on features,
   different color signal. */
.pricing-cta-amber.cta-strip {
  background: linear-gradient(180deg, var(--amber-glow) 0%, var(--bg) 100%);
}

/* Fix CTA-strip-micro contrast — was --text-dim (0.40 opacity),
   below WCAG AA. Bumped to --text-muted (0.62) for legibility on
   tinted backgrounds. Applied globally so the features page strips
   improve too. */
.cta-strip-micro {
  color: var(--text-muted);
}

/* ============================================================
   PRIMARY DOWNLOAD CTA (post-cards)
   This is THE conversion moment. Not a strip — a dedicated
   section with editorial weight.

   Option 1 chosen: cream background with subtle amber radial glow,
   larger button than standard, micro-copy stacked below the
   button (not beside it).
   ============================================================ */
.primary-cta-section {
  padding: var(--section-y) 0;
  position: relative;
  overflow: hidden;
}

/* A whisper of harbor warmth, not a promotional spotlight. The headline
   carries the section; the glow just lifts it off the page. */
.primary-cta-section::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 620px;
  height: 480px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(4, 120, 87, 0.07) 0%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
}

.primary-cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.primary-cta-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-on-light);
  margin-bottom: 16px;
}

.primary-cta-headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.1rem);
  font-style: italic;
  line-height: 1.12;
  color: var(--text);
  margin: 0 0 32px;
  text-wrap: balance;
}

.primary-cta-button.btn-primary {
  font-size: 1rem;
  padding: 14px 28px;
  font-weight: 600;
}

.primary-cta-micro {
  display: block;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   PRICING PAGE — trust-strip-above placement
   (May 12 follow-up, take 2)

   The trust strip's background band and borders are intentional —
   they signal "this is institutional info, take it as fact." That
   visual weight is part of what makes a trust strip work. Keep it.

   The original "cards smashed against trust strip" issue was about
   vertical breathing room between the strip and the cards below,
   not about the band itself. Adding bottom margin on the strip
   gives the cards their breathing room without destroying the
   trust strip's identity.
   ============================================================ */
.trust-strip.trust-strip-above {
  margin-bottom: var(--section-y);
  padding-top: clamp(28px, 3.5vw, 44px);
  padding-bottom: clamp(28px, 3.5vw, 44px);
}

/* ============================================================
   WHY DOCKSIDE — editorial layout (May 12 follow-up)

   Reframes the "Why Dockside exists" section from a dark card
   into a magazine-pull-quote editorial layout. Sits on the page
   background, no card chrome. Display italic lede gets larger
   typographic emphasis; supporting body text reads as ancillary
   prose. Subtle Harbor accent rule replaces the cream divider.

   Original .why-dockside-card styles are preserved (Cardinal
   Rule #1). This block overrides the typography and removes the
   card chrome by targeting .why-dockside-editorial — the new
   container class. Inline link to about.html on "one person"
   styled to read as text first, link second.
   ============================================================ */

.why-dockside-editorial {
  position: relative;
  padding: 0;
  /* No background, no border-radius — sits on the page background */
}

/* Override the dark-card grid sizing for editorial proportions */
.why-dockside-editorial .why-dockside-grid {
  position: relative;
  z-index: auto;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
  padding: clamp(20px, 3vw, 40px) 0;
}

/* Subtle Harbor accent rule between left and right columns */
.why-dockside-editorial .why-dockside-col-left {
  position: relative;
  padding-right: clamp(24px, 3vw, 40px);
}

@media (min-width: 721px) {
  .why-dockside-editorial .why-dockside-col-left::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(4, 120, 87, 0.20) 20%,
      rgba(4, 120, 87, 0.20) 80%,
      transparent 100%
    );
  }
}

.why-dockside-editorial .why-dockside-col-right {
  padding-left: clamp(0px, 1vw, 16px);
}

/* Eyebrow uses Harbor on light, not amber-on-dark */
.why-dockside-editorial .why-dockside-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--harbor);
  margin-bottom: 24px;
}

/* LEDE — the pull-quote moment. Bigger display italic, dark text on cream. */
.why-dockside-editorial .why-dockside-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.25;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.01em;
}

.why-dockside-editorial .why-dockside-lede strong {
  font-weight: 500;
  font-style: italic;
  color: var(--text);
}

/* Inline link on "one person" — reads as text first, link second.
   No accent color change on default state, just a subtle underline.
   Hovers to Harbor. */
.why-dockside-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(4, 120, 87, 0.40);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s, color 0.2s;
}

.why-dockside-link:hover,
.why-dockside-link:focus-visible {
  color: var(--harbor);
  text-decoration-color: var(--harbor);
}

/* BODY paragraphs — muted cream-page text */
.why-dockside-editorial .why-dockside-body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* Rule between body and resolution — Harbor-tinted, short */
.why-dockside-editorial .why-dockside-rule {
  width: 40px;
  height: 1px;
  margin: 28px 0;
  border: 0;
  background: var(--harbor);
  opacity: 0.40;
}

/* RESOLUTION — slightly elevated weight, dark text */
.why-dockside-editorial .why-dockside-resolution {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 16px;
}

/* TAGLINE — small mono-feeling caption */
.why-dockside-editorial .why-dockside-tagline {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Mobile — stack columns, drop the accent rule */
@media (max-width: 720px) {
  .why-dockside-editorial .why-dockside-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .why-dockside-editorial .why-dockside-col-left {
    padding-right: 0;
  }

  .why-dockside-editorial .why-dockside-col-right {
    padding-left: 0;
  }
}

/* ============================================================
   HOME PAGE — UNIFIED RHYTHM + HERO VIDEO (May 12)

   1. Apply --section-y token to all home page sections so the
      page rhythm matches features and pricing pages.
   2. Hero video sizing: same container as the prior screenshot
      (.product-frame-dark), but the video element needs explicit
      width/height behavior to avoid jank on load.
   ============================================================ */

/* Vertical rhythm — match features and pricing pages */
.hero.is-dark {
  /* Hero already has its own padding — leave it alone. The hero
     is its own thing on the home page. */
}

/* Pillars section — wrap the bare <section> with section-y rhythm */
body > section:has(.pillars-grid) {
  padding: var(--section-y) 0;
}

/* Workspaces dark card section */
body > .dark-card-section:has(.dark-card-workspaces) {
  padding: var(--section-y) 0;
}

/* Comparison section */
body > section:has(.compare-grid) {
  padding: var(--section-y) 0;
}

/* Closing CTA dark card section */
body > .dark-card-section:has(.dark-card-centered) {
  padding: var(--section-y) 0;
}

/* ---------- Hero video ---------- */
.hero-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1200;
  object-fit: cover;
  background: var(--bg);
  /* Slight corner radius hides the blue desktop bleed at the edges
     of the square recording. */
  border-radius: 12px;
  box-shadow:
    0 50px 100px -40px rgba(15, 30, 25, 0.30),
    0 20px 50px -20px var(--harbor-wash);
}

/* Fallback img inside <video> (for browsers that can't play) */
.hero-video img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* ============================================================
   HOME PAGE — Phase B DESIGN POLISH (May 12)

   Vignette workspace tiles beside each Work / Personal / Side
   Hustle label. Line-art style matching the pillar icons —
   stroked outlines, 1.5px weight, color inherited from parent
   so they harmonize with the page's existing visual language.

   (Phase A — closing CTA decorative SVG — removed per Ali's
   feedback. The dark card stands alone now.)
   ============================================================ */

/* ---------- Vignette workspace tiles ---------- */
.vignette-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vignette-tile {
  display: inline-flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: inherit;
  opacity: 0.75;
}

.vignette-tile svg {
  display: block;
  width: 100%;
  height: 100%;
}



/* ============================================================
   ABOUT PAGE REFRESH (May 12, v2 — layout fixes + color anchors)

   Fixes from v1:
   - Hero properly centered via .about-hero-inner
   - Body sections anchored to a single reading column with
     consistent left edge (max-width container, left-aligned text)
   - Ledes sized larger to actually feel editorial
   - Harbor section dividers replace ad-hoc spacing
   - Closing border-top removed (dividers handle rhythm now)
   - Eyebrows accented with a small Harbor leading mark
   - Three-signature grid for the closing variant comparison

   Route A locked: eyebrow accents + Harbor accent rules between
   sections. No callout blocks (B was the alternative).
   ============================================================ */

/* ---------- HERO ---------- */
.about-hero {
  padding-top: clamp(80px, 9vw, 112px);
  padding-bottom: calc(var(--section-y) * 0.5);
  text-align: center;
}

.about-hero-inner {
  max-width: 720px;
  margin: 0 auto;
}

.about-hero .h-page {
  max-width: none;
}

.about-hero .hero-eyebrow {
  display: inline-block;
}

/* ---------- ARTICLE READING COLUMN ---------- */
.about-page {
  padding-bottom: var(--section-y);
}

.about-container {
  /* Override the global container max-width — about prose reads
     better in a narrower column. */
  max-width: 680px !important;
}

.about-section {
  padding: 0;
}

/* Override stacked rhythm: each section flows tightly; dividers
   between provide the visual rest beats. */
.about-section + .about-section {
  margin-top: 0;
}

/* ---------- EYEBROW ACCENT (Route A) ---------- */
.about-section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--harbor);
  margin-bottom: 28px;
}

/* ---------- BODY PROSE ---------- */
.about-section-body {
  font-family: var(--font-body);
  color: var(--text);
}

.about-section-body p {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 20px;
  text-wrap: pretty;
}

.about-section-body p:last-child {
  margin-bottom: 0;
}

/* Section lede — display italic, larger emphasis at section openers */
.about-section-lede {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-size: clamp(1.5rem, 2.2vw, 1.875rem) !important;
  line-height: 1.35 !important;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 28px !important;
  text-wrap: balance;
}

/* Editorial italic for emphasized body paragraphs (the "opinionated on
   purpose" beat, etc.) */
.about-section-italic {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem) !important;
  line-height: 1.5 !important;
  color: var(--text);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

/* ---------- SECTION DIVIDERS — clean hairline (matches features page) ---------- */
.about-section-divider {
  margin: var(--section-y) 0;
  height: 1px;
  background: var(--border);
}

/* ---------- COMMITMENTS ---------- */
.about-commitments {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 8px;
}

.about-commitment {
  position: relative;
  padding-left: 20px;
}

/* Small Harbor accent mark on each commitment */
.about-commitment::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--harbor);
  opacity: 0.85;
}

.about-commitment-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 6px;
}

.about-commitment-text {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}

/* ============================================================
   ABOUT CLOSING — editorial moment + signature
   ============================================================ */

.about-closing {
  padding: calc(var(--section-y) * 0.5) 0 calc(var(--section-y) * 1.25);
}

.about-closing-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.about-closing-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 32px;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

.about-closing-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: rgba(4, 120, 87, 0.40);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  margin-bottom: 72px;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.about-closing-link:hover,
.about-closing-link:focus-visible {
  color: var(--harbor);
  text-decoration-color: var(--harbor);
}

/* ---------- Signature block (final state — single centered) ---------- */
.about-signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.about-signature-mark {
  margin-bottom: 4px;
  width: 280px;
  min-height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.about-signature-mark svg {
  width: 100%;
  height: auto;
  display: block;
}

.about-signature-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--text);
  margin-top: 8px;
}

.about-signature-title {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-top: 4px;
}

/* Signature mark renders PNGs natively (transparent backgrounds) */
.about-signature-mark img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* ============================================================
   COMING SOON MODE

   Activates when config.download_available is false. The
   renderComingSoon() helper in config.js sets the page state and
   swaps download CTAs to "Coming soon" labels (still clickable —
   they link through to the download page where the full preview
   card explains what's coming). The amber banner sits above the
   nav on marketing pages.

   Flip config.download_available to true to disable this entire
   surface; CSS rules below become no-ops since the matching JS
   never runs and no .is-coming-soon class is applied.
   ============================================================ */

/* Amber banner above the nav — marketing pages only */
.coming-soon-banner {
  background: var(--amber);
  color: #fefcf9;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-align: center;
  padding: 12px 24px;
}

/* Clickable "Coming soon" CTA state — visually distinct from active
   CTAs but still feels like a button. Cream pill, Harbor text, small
   amber dot before label. Links through to download page. */
.is-coming-soon,
.btn-primary.is-coming-soon,
.nav-cta.is-coming-soon {
  background: var(--bg-elevated) !important;
  color: var(--harbor) !important;
  border: 1px solid var(--border) !important;
  cursor: pointer;
  box-shadow: none !important;
  transform: none !important;
  position: relative;
  padding-left: calc(1em + 16px) !important;
}

.is-coming-soon::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
}

.is-coming-soon:hover,
.is-coming-soon:focus-visible {
  background: var(--bg-elevated) !important;
  color: var(--harbor-deep, var(--harbor)) !important;
  border-color: var(--harbor) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Strip any decorative arrow icons in the coming-soon state for cleanliness */
.is-coming-soon svg {
  display: none;
}

/* In coming-soon mode, hide the spec line under the picker
   (macOS 14+ · ~250 MB). Visitors will find the same info in
   the Requirements section further down. */
body[data-coming-soon="true"] .download-meta {
  display: none;
}

/* ---------- Download page coming-soon card (Option C) ---------- */
.download-coming-soon {
  margin: clamp(24px, 3vw, 32px) auto 0;
  padding: clamp(28px, 4vw, 40px) clamp(28px, 4vw, 40px) clamp(32px, 4vw, 44px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 520px;
  text-align: center;
}

.download-coming-soon-rule {
  width: 56px;
  height: 2px;
  background: var(--amber);
  margin: 0 auto 24px;
  border-radius: 2px;
}

.download-coming-soon-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: rgba(217, 119, 6, 0.10);
  border: 1px solid rgba(217, 119, 6, 0.30);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-on-light);
  margin: 0 0 20px;
}

.download-coming-soon-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 24px;
  text-wrap: balance;
}

.download-coming-soon-body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  text-wrap: pretty;
}

/* ============================================================
   MOBILE CLEANUP (≤560px)
   Consolidated pass — May 14 2026. Tightens vertical rhythm
   around CTAs, trims hero whitespace on inner pages, centers
   the "basics" tiles, and bumps feature-module illustrations
   to a readable size on small screens.
   ============================================================ */

@media (max-width: 560px) {
  /* CTA strips — tighten the column-stacked rhythm so the
     button doesn't feel marooned below the headline. The
     flex-basis on .cta-strip-text was 280px (horizontal min),
     which becomes a 280px-tall block once the parent stacks
     to a column — that's the source of the marooned-button
     look. Reset to auto-size at mobile. */
  .cta-strip {
    padding: 24px 0;
  }

  .cta-strip-inner {
    gap: 14px;
  }

  .cta-strip-text {
    flex: 0 0 auto;
  }

  .cta-strip-action {
    gap: 6px;
  }

  /* Primary CTA section (pricing "Try Dockside Pro free…") —
     same idea, the headline-to-button beat tightens. */
  .primary-cta-section {
    padding: var(--section-y-tight) 0;
  }

  .primary-cta-headline {
    margin-bottom: 20px;
  }

  .primary-cta-micro {
    margin-top: 12px;
  }

  /* Inner-page hero top padding — desktop's nav-clearance buffer
     reads as empty space on mobile. */
  .features-hero,
  .pricing-hero,
  .about-hero,
  .download-hero,
  .contact-hero,
  .policy-page {
    padding-top: var(--section-y);
  }

  /* About page — left-align the hero block on mobile so the whole
     page flows along one column edge instead of switching from
     centered title to left-aligned body mid-scroll. */
  .about-hero {
    text-align: left;
  }

  /* Download — kill the visible gap between the two lead lines so
     the hero reads as one tight intro instead of two stranded
     statements. */
  .download-hero .lead {
    margin-bottom: 6px;
  }

  .download-hero .lead-secondary {
    margin-top: 0;
  }

  /* "Plus the basics" tiles — center the illustration AND the
     copy so each tile sits on the same vertical axis as the
     larger creative illustrations elsewhere on the page. */
  .table-stake {
    align-items: center;
    text-align: center;
  }

  /* Feature-module illustrations — break out of the container
     and span the full viewport width so UI labels inside the
     SVGs stay legible. Pull the visual closer to the bullet
     list above; the SVGs carry their own top breathing room
     inside the viewBox, so the grid gap can drop way down. */
  .feature-module {
    gap: 8px;
  }

  .feature-module-visual {
    padding: 0;
    margin-left: -32px;
    margin-right: -32px;
    min-height: 0;
  }

  .feature-illustration {
    max-width: none;
    width: 100%;
  }

  /* Dark-card sections (home: "A clean slate" workspaces card and
     "Stop juggling" closing card) — the section padding stacks on
     top of the previous section's bottom padding, leaving an
     emptiness above the dark card that reads taller than the rest
     of the page rhythm. Trim the top on every variant to bring it
     back into beat. The :has() rules later in the file have higher
     specificity, so each variant has to be named here. */
  .dark-card-section,
  body > .dark-card-section:has(.dark-card-workspaces),
  body > .dark-card-section:has(.dark-card-centered) {
    padding-top: 16px;
  }

  /* Workspaces card illustration — let it bleed to the dark card's
     edges so the three stacked workspace windows render at a size
     where the titlebars and dock tiles stay legible on mobile. */
  .dark-card-workspaces {
    padding-left: 24px;
    padding-right: 24px;
  }

  .workspace-stack-shot {
    margin-left: -24px;
    margin-right: -24px;
  }

  /* Hero video — desktop locks the container to the prior
     screenshot's 1372/896 aspect to prevent layout shift, then
     uses object-fit: cover. On mobile that crops the left/right
     edges of the actual video (1920x1200, slightly wider). Drop
     the forced aspect and switch to contain so the whole frame
     is visible. Background goes transparent so the dark hero
     gradient shows through the rounded corners instead of a
     cream sliver. Radius eases off — 12px on a ~311px element
     reads heavier than the same value at desktop width. */
  .hero-video {
    aspect-ratio: auto;
    object-fit: contain;
    background: transparent;
    border-radius: 8px;
  }
}