: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;
}

.app-store-badge {
  display: inline-flex;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.app-store-badge img {
  display: block;
  height: 48px;
  width: auto;
}

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

.cta-row-start {
  justify-content: flex-start;
}

#pricing .section-head {
  margin-bottom: 28px;
}

@media (max-width: 480px) {
  .app-store-badge img {
    height: 42px;
  }

  .cta-row {
    gap: 10px;
  }
}

.app-store-badge:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 10px;
}

.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;
}

/* Screenshots are shown frameless: the Mac captures already include the
   app's own window chrome, so a second title bar would read as a window
   inside a window. */

.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);
}

.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);
}

/* iPad and iPhone */

.devices {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 32px;
  margin-top: 64px;
}

.device-tablet {
  flex: 0 1 420px;
}

.device {
  margin: 0;
}

.device-frame {
  border-radius: 34px;
  padding: 10px;
  background: var(--ink);
  box-shadow: 0 24px 48px -20px var(--shadow);
  transition: transform 0.2s ease;
}

.device-frame:hover {
  transform: translateY(-3px);
}

.device-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 25px;
}

.device-phone .device-frame {
  border-radius: 38px;
  padding: 8px;
}

.device-phone .device-frame img {
  border-radius: 31px;
}

.device-pair {
  flex: 0 1 440px;
  display: flex;
  gap: 20px;
  align-items: flex-end;
}

.device-pair .device {
  flex: 1;
}

.device 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;
  }

  .notify-form {
    flex-direction: column;
  }

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

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

  .devices {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .device-tablet,
  .device-pair {
    flex: none;
  }
}

/* Newsletter signup */

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

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

.notify > p {
  color: var(--ink-soft);
  font-size: 16px;
  margin: 0 0 28px;
  text-wrap: pretty;
}

.notify-form {
  display: flex;
  gap: 10px;
  max-width: 440px;
  margin: 0 auto;
}

.notify-form input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

.notify-form input[type="email"]::placeholder {
  color: var(--ink-faint);
}

.notify-form input[type="email"]:focus {
  outline: none;
  border-color: var(--ink);
}

.notify-form button {
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.notify-form button:hover {
  opacity: 0.88;
}

.notify-form button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.notify .notify-fine {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--ink-faint);
}

.notify-fine a {
  color: var(--ink-soft);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}