:root {
  --bg: #fbfbfd;
  --bg-alt: #f5f5f7;
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --line: rgba(0, 0, 0, 0.08);
  --brand: #2e7d5b;
  --brand-ink: #ffffff;
  --card-bg: #ffffff;
  --accent: #e0a526;
  --shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.25);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #06120d;
    --bg-alt: #0a1a13;
    --ink: #f5f5f7;
    --ink-soft: #a7b3ad;
    --line: rgba(255, 255, 255, 0.1);
    --card-bg: #0f231a;
    --shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.brand svg, .brand img { display: block; border-radius: 6px; }

.nav-links {
  display: flex;
  gap: 22px;
  margin-right: auto;
}

.nav-links a {
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
}

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

.nav-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 980px;
  padding: 4px;
}

.tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 980px;
  cursor: pointer;
  font-family: inherit;
}

.tab[aria-selected="true"] {
  background: var(--brand);
  color: var(--brand-ink);
}

/* ---------- Views ---------- */

.view { display: none; }
.view.active { display: block; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 96px 24px 80px;
  overflow: hidden;
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent) 0%, var(--bg) 92%),
    url("https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?q=80&w=1800&auto=format&fit=crop");
  background-size: cover;
  background-position: center 35%;
  opacity: 0.5;
}

.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  padding: 6px 14px;
  border-radius: 980px;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(36px, 5.2vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 20px;
}

.hero p.lede {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 32px;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 980px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}

.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-secondary { color: var(--ink); }
.btn-secondary:hover { color: var(--brand); }

/* ---------- Phone frame ---------- */

.phone-frame {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 19.5;
  margin: 0 auto;
  background: linear-gradient(160deg, #2b2b2d, #050505);
  border-radius: 54px;
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(255, 255, 255, 0.08);
  /* Deliberately NOT overflow:hidden here: the side-button decorations
     below are positioned a few pixels outside this box on purpose (real
     phones' buttons protrude slightly past the body), and clipping the
     frame would hide them. The screen's own overflow:hidden plus its fixed
     inset (below) is what keeps content from spilling out. */
}

.phone-frame::before,
.phone-frame::after {
  content: "";
  position: absolute;
  background: #050505;
}

.phone-frame::before {
  right: -3px;
  top: 130px;
  width: 3px;
  height: 64px;
  border-radius: 2px 0 0 2px;
}

.phone-frame::after {
  left: -3px;
  top: 96px;
  width: 3px;
  height: 40px;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 56px 0 #050505;
}

.phone-screen {
  /* Absolutely positioned with a fixed inset, rather than width/height:100%
     of a padded parent. The previous version had the screen size itself to
     100% of its own content box while the frame's height came from
     `aspect-ratio` — those two don't always agree on exactly how tall
     "100%" is once other content is involved, which is what let the screen
     render taller than the frame and spill out its bottom edge. An inset
     is computed directly against the frame's actual rendered box, so it
     can't drift out of sync with it. 16px matches the frame's previous
     padding value, so the bezel width is unchanged. */
  position: absolute;
  inset: 16px;
  background: #f4faf6;
  /* Frame radius minus the 16px inset, so this corner is perfectly
     concentric with the frame's outer corner on all four sides. */
  border-radius: 38px;
  overflow: hidden;
}

/* The hero's mock content fully covers .phone-screen's own background (its
   .mock-screen div is explicitly always-light, by design), so this only
   ever becomes visible in the Try view's reserved strip above the real
   iframe. The real app follows the system color scheme too, so matching
   that here keeps the reserved strip from showing as a mismatched light
   band across a dark app. */
@media (prefers-color-scheme: dark) {
  #try-view .phone-screen { background: #06120d; }
}

/* On a real iPhone the pill sits ON the display itself, at status-bar
   height, not carved into the bezel above it — the bezel is just a thin
   uniform rim, unrelated to the pill. That's why this is a child of
   .phone-screen (so it overlays the screen content) rather than of
   .phone-frame. Proportions (~32% width, ~4.5% height, ~1.3% inset from
   the screen's top edge) are taken from an actual iPhone's Dynamic
   Island, not sized to fit a bezel band. */
.phone-screen .notch {
  position: absolute;
  top: 1.3%;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 4.5%;
  min-height: 18px;
  background: #050505;
  border-radius: 999px;
  z-index: 3;
}

.phone-frame .home-indicator {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 4px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  z-index: 3;
}

.phone-screen iframe {
  /* The real app has no idea a pill is being drawn on top of it (it's a
     separate document), so its own content would render right up to the
     very top and collide with the overlay. Reserving a blank strip above
     it, matching the screen's own background, keeps the pill clear of
     real content the same way the mock's app-bar padding does. */
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 90%;
  border: 0;
  display: block;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.phone-screen iframe.loaded { opacity: 1; }

/* ---------- Mock UI inside the hero phone ---------- */

.mock-screen {
  /* Fixed (theme-independent) colors: this represents a lit phone screen,
     which should look the same whether the marketing site itself is in
     light or dark mode. */
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 10px;
  color: #1d1d1f;
  background: #f4faf6;
}

.mock-appbar {
  padding: 30px 16px 8px;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mock-appbar img {
  display: block;
  border-radius: 4px;
}

.mock-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  text-align: center;
}

.mock-paw {
  width: 34px;
  height: 34px;
  color: var(--brand);
}

.mock-body h3 { font-size: 13px; margin: 0; }
.mock-body p { font-size: 9px; color: #6e6e73; margin: 0; line-height: 1.4; }

.mock-actions { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 6px; }

.mock-btn {
  padding: 9px;
  border-radius: 10px;
  font-size: 9.5px;
  font-weight: 600;
  text-align: center;
}

.mock-btn.primary { background: var(--brand); color: #fff; }
.mock-btn.secondary { border: 1px solid rgba(0, 0, 0, 0.1); color: #1d1d1f; }

.mock-tabbar {
  display: flex;
  justify-content: space-around;
  padding: 8px 0 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.mock-tabbar span {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.1);
}

.mock-tabbar span:first-child { background: var(--brand); }

/* ---------- Sections ---------- */

section.band { padding: 88px 24px; }
section.band.alt { background: var(--bg-alt); }

.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.section-head p { color: var(--ink-soft); font-size: 17px; line-height: 1.5; margin: 0; }

/* ---------- Feature grid ---------- */

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

.feature-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
}

.feature-card svg {
  width: 26px;
  height: 26px;
  color: var(--brand);
  margin-bottom: 14px;
}

.feature-card h3 { font-size: 15px; margin: 0 0 6px; letter-spacing: -0.01em; }
.feature-card p { font-size: 13px; color: var(--ink-soft); margin: 0; line-height: 1.5; }

/* ---------- Mac install card (two methods, one card) ---------- */

.mac-card .method-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin: 14px 0 8px;
}

.method-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
}

.mac-card .method ol { margin: 0; }

.method-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: var(--ink-soft);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.method-divider::before,
.method-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ---------- Editorial split blocks ---------- */

.split {
  max-width: 1100px;
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.split.reverse .split-copy { order: 2; }
.split.reverse .split-media { order: 1; }

.split-copy h3 {
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.split-copy p { color: var(--ink-soft); font-size: 16px; line-height: 1.6; margin: 0; }

.split-media img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: var(--shadow);
  display: block;
}

/* ---------- Roadmap ---------- */

.roadmap {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

.roadmap::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line);
}

.phase {
  position: relative;
  padding: 0 0 36px 46px;
}

.phase:last-child { padding-bottom: 0; }

.phase-dot {
  position: absolute;
  left: 6px;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line);
}

.phase.done .phase-dot { background: var(--brand); border-color: var(--brand); }
.phase.active .phase-dot { border-color: var(--brand); }

.phase-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.phase-head h3 { font-size: 16px; margin: 0; letter-spacing: -0.01em; }

.pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 980px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

.pill.done { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); border-color: transparent; }
.pill.active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: #8a5a00; border-color: transparent; }

@media (prefers-color-scheme: dark) {
  .pill.active { color: var(--accent); }
}

.phase p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }

/* ---------- Try view ---------- */

.try-view-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 72px 24px 96px;
  text-align: center;
}

.try-view-inner h1 {
  font-size: clamp(28px, 3.6vw, 38px);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.try-view-inner > p {
  color: var(--ink-soft);
  font-size: 16px;
  max-width: 46ch;
  margin: 0 auto 40px;
  line-height: 1.5;
}

.try-view-inner .phone-frame { max-width: 340px; }

.open-full {
  display: inline-block;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}

.try-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #6e6e73;
  background: #f4faf6;
}

/* ---------- Footer ---------- */

footer {
  border-top: 1px solid var(--line);
  padding: 32px 24px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
}

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

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero .phone-frame { max-width: 240px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-copy,
  .split.reverse .split-media { order: initial; }
}

@media (max-width: 560px) {
  .nav-links { display: none; }
  .feature-grid { grid-template-columns: 1fr; }
  .hero { padding: 56px 20px 64px; }
}