:root {
  --bg: #f2ead6;
  --surface: #fbf7ea;
  --surface-alt: #eae0c6;
  --ink: #1e1b16;
  --ink-soft: #5b5347;
  --ink-faint: #8c8271;
  --border: rgba(30, 27, 22, 0.14);
  --border-strong: rgba(30, 27, 22, 0.26);
  --shadow: rgba(30, 27, 22, 0.16);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --max-width: 1080px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a {
  color: inherit;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  text-wrap: balance;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(140%) blur(20px);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  background: rgba(242, 234, 214, 0.78);
  border-bottom: 1px solid var(--border);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

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

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  color: var(--ink-soft);
}

.nav-links a {
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-cta {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface) !important;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}

/* Hero */

.hero {
  padding: 96px 0 64px;
  text-align: center;
}

.hero .mark-ring {
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 auto 28px;
  filter: drop-shadow(0 10px 16px var(--shadow));
}

.mark-ring .draw {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: draw-badge 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

@keyframes draw-badge {
  to {
    stroke-dashoffset: 0;
  }
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(38px, 5.8vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  font-weight: 600;
}

.hero p.lede {
  max-width: 560px;
  margin: 0 auto 34px;
  font-size: clamp(16px, 2vw, 19px);
  color: var(--ink-soft);
}

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

.download-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
  filter: drop-shadow(0 6px 14px var(--shadow));
}

.download-badge:hover {
  transform: translateY(-1px);
  opacity: 0.88;
}

.download-badge-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  fill: var(--surface);
}

.download-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}

.download-badge-eyebrow {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.75;
}

.download-badge-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--border-strong);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-secondary:hover {
  background: var(--surface-alt);
  border-color: var(--ink-faint);
}

.requirement {
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* Hero screenshot */

.hero-shot {
  margin: 56px auto 0;
  max-width: 880px;
}

/* macOS window chrome, in paper form -- the screenshot placeholders are
   literal window frames (the product itself is entirely about windows),
   rendered as a soft card rather than a glassy dark pane.

   .is-frameless drops the fake title bar: hero.png is a multi-monitor
   desktop composite and menu-bar.png is a menu-bar strip, so neither is
   actually a single window and wrapping them in one more title bar reads
   as a window inside a window. Those two just get the plain card shell. */

.mac-window {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 24px 48px -20px var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mac-window:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 56px -18px var(--shadow);
}

.mac-window-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}

.mac-window-bar .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mac-window-bar .dot.red { background: #ff5f57; }
.mac-window-bar .dot.yellow { background: #febc2e; }
.mac-window-bar .dot.green { background: #28c840; }

/* Centered on the full bar width, independent of the traffic-light cluster's
   real width -- matches how macOS itself centers window titles. */
.mac-window-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 55%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
  pointer-events: none;
}

.mac-window-body {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface);
}

/* The hero shot is a generated multi-monitor desk render (16:9-ish) and the
   menu-bar shot is a thin menu-bar strip (much wider) -- neither fits the
   16:10 ratio every other screenshot uses without cropping content, so each
   gets its own ratio matching its actual image. */
.mac-window-hero .mac-window-body {
  aspect-ratio: 1672 / 941;
}

.mac-window-wide .mac-window-body {
  aspect-ratio: 850 / 130;
}

/* Preferences and the onboarding ("Welcome") window are real single-window
   screenshots at their own natural shape -- one taller than wide, one
   wider than tall. Forcing both into the shared 16:10 box meant padding
   each image out with solid background to fill the rest, which read as a
   card mostly full of dead space. Let the box follow the image's own
   ratio instead: no forced crop, no fill needed. */
.mac-window-natural .mac-window-body {
  aspect-ratio: auto;
  min-height: 200px; /* keeps the fallback placeholder visible if the image fails to load -- with no fixed ratio, an unloaded image has no intrinsic height */
}

.mac-window-natural .mac-window-body img {
  height: auto;
}

.mac-window-body img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.screenshot-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 24px;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 27px,
      var(--border) 27px,
      var(--border) 28px
    );
}

.screenshot-fallback strong {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 700;
}

.screenshot-fallback span {
  font-size: 12px;
  color: var(--ink-faint);
  max-width: 320px;
}

/* Sections */

section {
  padding: 72px 0;
}

.section-head {
  max-width: 560px;
  margin: 0 0 44px;
}

.section-head h2 {
  font-size: clamp(26px, 3.4vw, 34px);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  font-weight: 600;
}

.section-head p {
  color: var(--ink-soft);
  font-size: 16px;
  margin: 0;
}

.section-head code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--ink-soft);
  background: var(--surface-alt);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Features */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.feature {
  padding: 26px 24px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px -16px var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -16px var(--shadow);
}

.feature .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
  margin-bottom: 16px;
}

.feature h3 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.feature p {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}

/* Screenshots grid */

.screens-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 24px;
}

.screenshot-card {
  margin: 0;
}

.screenshot-card-full {
  grid-column: 1 / -1;
}

.screenshot-card-full figcaption {
  text-align: center;
}

.screenshot-card figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* How it works / trust */

.trust {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -24px var(--shadow);
  padding: 44px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.trust h2 {
  font-size: 24px;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.trust p {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 0;
}

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

.trust-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* The dot (::before) and this span are the only two flex items -- text,
   the bold lead-in, and the link all live inside the span so they flow and
   wrap together as one line instead of each becoming its own flex item
   (which happened when they were direct children of the flex <li>: every
   inline element/text node between them got its own column). min-width: 0
   overrides the flex default of never shrinking narrower than the text's
   unwrapped width, which otherwise defeats wrapping entirely. */
.trust-list li span {
  min-width: 0;
}

.trust-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--ink);
  flex-shrink: 0;
}

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

/* Footer */

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

footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--ink-faint);
}

footer .foot-links {
  display: flex;
  gap: 20px;
}

footer a {
  text-decoration: none;
  color: var(--ink-faint);
}

footer a:hover {
  color: var(--ink-soft);
}

footer .credit a {
  color: var(--ink-soft);
  font-weight: 700;
}

/* Legal / article pages */

.article {
  padding: 72px 0 96px;
}

.article .wrap {
  max-width: 640px;
}

.article h1 {
  font-size: clamp(30px, 4vw, 40px);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  font-weight: 600;
}

.article .updated {
  color: var(--ink-faint);
  font-size: 13px;
  margin: 0 0 40px;
  font-variant-numeric: tabular-nums;
}

.article h2 {
  font-size: 18px;
  margin: 36px 0 10px;
  font-weight: 700;
  color: var(--ink);
}

.article p {
  color: var(--ink-soft);
  font-size: 15px;
  max-width: 65ch;
  margin: 0 0 6px;
}

.article a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}

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

  .trust {
    grid-template-columns: 1fr;
    padding: 32px 24px;
  }

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