/* ---------- Tokens ---------- */
:root {
  --bg: #ffffff;
  --ink: #0d0f12;
  --ink-2: #1a1d23;
  --muted: #5a6068;
  --line: #e8e9ec;
  --surface: #f7f7f9;

  --accent: #00d188;        /* mint green */
  --accent-2: #8a5cf6;      /* purple */
  --accent-3: #4dc3ff;      /* blue */

  /* Per-module identity. The reference poster is dark (amber #E8A33D /
     mint #37D6A0); these are the same two hues re-darkened for a light
     background so headings clear 3:1 and body/label text clears 4.5:1.
     `--*-ink` is the small-text variant, `--*-bg` / `--*-line` the tints. */
  --cowork: #b3730c;
  --cowork-ink: #8f5a06;
  --cowork-bg: rgba(179, 115, 12, 0.06);
  --cowork-line: rgba(179, 115, 12, 0.22);

  --code: #05876a;
  --code-ink: #04795e;
  --code-bg: rgba(0, 209, 136, 0.07);
  --code-line: rgba(5, 135, 106, 0.2);

  --mono: 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgba(13, 15, 18, 0.04), 0 8px 24px -16px rgba(13, 15, 18, 0.12);

  --container: 1200px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ol, ul { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; display: block; }

/* ---------- Background blobs (kept as fallback / extra glow on top of image bgs) ---------- */
.bg-blobs {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
}
.blob--purple {
  width: 520px; height: 520px;
  top: -120px; left: -160px;
  background: radial-gradient(circle, #d6c8ff 0%, transparent 70%);
}
.blob--mint {
  width: 480px; height: 480px;
  top: -100px; right: -140px;
  background: radial-gradient(circle, #b6f5d8 0%, transparent 70%);
}
.blob--purple-2 {
  width: 420px; height: 420px;
  bottom: -120px; left: 40%;
  background: radial-gradient(circle, #e2d6ff 0%, transparent 70%);
  opacity: 0.28;
}

/* ---------- Logo (SVG) ---------- */
.logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
/* The wordmark's box includes the descender of "Desktop" (54 user units tall for
   a ~39-unit cap height), so these heights are larger than the visible letters:
   38px renders ~27px caps, matching the old 28px/40-unit asset. If the logo's
   viewBox changes, rescale both of these with it. */
.logo {
  height: 38px;
  width: auto;
  display: block;
}
.logo--sm { height: 30px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  max-width: var(--container);
  margin: 0 auto;
  transition: padding 200ms ease, backdrop-filter 200ms ease, background 200ms ease;
}
.nav.is-scrolled {
  padding: 12px 40px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  max-width: none;
  width: 100%;
  left: 0;
}
.nav.is-scrolled > * { max-width: var(--container); }
.nav__links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  color: var(--muted);
}
.nav__links a:hover { color: var(--ink); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 14px;
  transition: transform 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.btn--pill {
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 10px 18px;
}
.btn--pill:hover { background: var(--ink-2); transform: translateY(-1px); }
.btn--lg { padding: 16px 24px; font-size: 15px; }
.btn--sm { padding: 8px 14px 8px 8px; font-size: 13px; gap: 10px; }
.btn--ghost {
  color: var(--ink);
  padding: 10px 4px;
  font-weight: 500;
}
.btn--ghost:hover { color: var(--accent-2); }
.btn__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 209, 136, 0.25);
}

/* Lime pill button — primary CTA style (matches screenshot reference) */
.btn--lime {
  background: #d9ff3f;
  color: #0d0f12;
  border-radius: 999px;
  padding: 10px 20px 10px 10px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.btn--lime:hover {
  background: #c8f02a;
  transform: translateY(-1px);
}
.btn--lime:hover .btn__icon { transform: translateX(2px); }
.btn--lime .btn__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #0d0f12;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 160ms ease;
}
.btn--lime.btn--lg {
  padding: 14px 28px 14px 14px;
  font-size: 17px;
  gap: 16px;
}
.btn--lime.btn--lg .btn__icon { width: 40px; height: 40px; }
.btn--lime.btn--sm {
  padding: 6px 16px 6px 6px;
  font-size: 13px;
  gap: 10px;
}
.btn--lime.btn--sm .btn__icon { width: 24px; height: 24px; }

/* Alt lime variant — outlined, used for secondary "Canary" channel */
.btn--lime.btn--alt {
  background: transparent;
  color: #0d0f12;
  box-shadow: inset 0 0 0 2px #0d0f12;
}
.btn--lime.btn--alt:hover {
  background: #0d0f12;
  color: #d9ff3f;
}
.btn--lime.btn--alt:hover .btn__icon {
  background: #d9ff3f;
  color: #0d0f12;
}

/* ---------- Section heads ---------- */
.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.section-head h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.section-head p {
  color: var(--muted);
  font-size: 17px;
  margin: 0;
}
/* Per-module highlights inside a heading (the brief colours "two" and
   "more finished" to tie the headline to the two module accents). */
.hl-cowork { color: var(--cowork); }
.hl-code { color: var(--code); }

/* ---------- HERO ---------- */
.hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: 60px 40px 100px;
  display: grid;
  align-items: center;
  justify-items: center;
  text-align: center;
  position: relative;
  min-height: 60vh;
}
.hero__copy { max-width: 820px; }
/* Hero section image background — soft cloud wash */
.hero::before {
  content: '';
  position: absolute;
  inset: -80px -10vw -40px;
  z-index: -1;
  background: url('assets/bg-hero.webp') center / cover no-repeat;
  pointer-events: none;
}
.hero__copy h1 {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
/* The brief's second line — "One app — Two ways of working". */
.hero__lead {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 20px;
}
.hero__sub {
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 auto 36px;
  max-width: 680px;
}
.hero__sub strong { color: var(--ink); font-weight: 600; }
.hero__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
/* Supported-platform note under the hero CTAs. */
.hero__meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 20px 0 0;
}
.scroll-down {
  position: absolute;
  right: 40px;
  bottom: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Modes strip (the two agentic modes, at a glance) ---------- */
.modes {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}
.modes__strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.mode-cell {
  padding: 26px 30px;
  border-right: 1px solid var(--line);
}
.mode-cell:last-child { border-right: none; }
.mode-cell__label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.mode-cell--cowork .mode-cell__label { color: var(--cowork-ink); }
.mode-cell--code .mode-cell__label { color: var(--code-ink); }
.mode-cell p {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

/* ---------- Purpose pillars ---------- */
.purpose {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 55px 40px 55px;
}
/* Purpose section image background — minimal edge accents */
.purpose::before {
  content: '';
  position: absolute;
  inset: 0 -10vw;
  z-index: -1;
  background: url('assets/bg-intro.webp') center / cover no-repeat;
  opacity: 0.9;
  pointer-events: none;
}
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pillar {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 28px 32px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  opacity: 0.9;
}
.pillar__num {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-2);
  margin-bottom: 16px;
}
.pillar h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.pillar p {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

/* ---------- The split — the two modules ---------- */
.modules {
  max-width: var(--container);
  margin: 0 auto;
  padding: 110px 40px 55px;
}
.modules__split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
/* Vertical hairline between the two modules, fading out at both ends. */
.modules__divider {
  position: absolute;
  left: 50%;
  top: -24px;
  bottom: -24px;
  width: 1px;
  transform: translateX(-0.5px);
  background: linear-gradient(to bottom, transparent, var(--line) 10%, var(--line) 90%, transparent);
  z-index: 1;
}
.modules__node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  z-index: 2;
}

/* Per-module identity is carried in local custom props so every shared rule
   below (title, dots, tinted list items) stays a single declaration.
   NOTE: no vertical padding here. The module is a subgrid (see the row-alignment
   block below) and vertical padding on a subgrid item offsets its row tracks. */
.module { scroll-margin-top: 90px; }
.module--cowork {
  --m: var(--cowork);
  --m-ink: var(--cowork-ink);
  --m-bg: var(--cowork-bg);
  --m-line: var(--cowork-line);
  padding-right: 56px;
}
.module--code {
  --m: var(--code);
  --m-ink: var(--code-ink);
  --m-bg: var(--code-bg);
  --m-line: var(--code-line);
  padding-left: 56px;
}
.module__num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.module__title {
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 8px;
  color: var(--m);
}
.module__tagline {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 18px;
}
.module__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}

.block-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 34px 0 4px;
}

/* "Who it's for" — dotted rows separated by hairlines. */
.user-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.user-list .user-card:first-child { border-top: none; }
.user-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
  background: var(--m);
}
.user-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.user-card strong { color: var(--ink); font-weight: 600; }

/* "What you can do with it" — module-tinted cards. Item separation is a margin,
   not a flex `gap`, because the list becomes a subgrid on wide screens and a
   subgrid takes its row gaps from the parent grid, not from its own `gap`. */
.do-list {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}
.do-item {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  padding: 14px 18px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  background: var(--m-bg);
  border: 1px solid var(--m-line);
}
.do-list .do-item:last-child { margin-bottom: 0; }
.do-item__verb { font-weight: 700; color: var(--m-ink); }

.where-runs {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px dashed var(--line);
}
.where-runs::before { content: '→ '; }

/* ---------- The split: row alignment across the two columns ----------
   Left to their own block flow, the two modules' inner blocks land at different
   heights (Cowork's copy is longer, so its "What you can do with it" heading sat
   ~50px below Code's) and the columns read as noise. This maps BOTH modules onto
   one shared row grid, so every corresponding block — heading, body, each list
   row, the closing note — starts on the same line. Each row is as tall as the
   taller of its two cells, which also makes the paired tinted cards equal height.

   Row map (14 rows), matching the markup order inside every .module:
     1 num · 2 title · 3 tagline · 4 body · 5 "Who it's for"
     6-8 the three user cards · 9 "What you can do with it"
     10-13 the four do-items · 14 closing note

   Scoped to min-width 961px because below that the split stacks into one column
   and there is nothing to align — and unscoped, both modules would be placed
   into the same single-column rows and overlap. Wrapped in @supports because
   without subgrid the placement would misfire; browsers lacking it fall through
   to the plain block flow above, which is the pre-alignment look. */
@media (min-width: 961px) {
  @supports (grid-template-rows: subgrid) {
    .modules__split { grid-template-rows: repeat(14, auto); }

    .module {
      display: grid;
      grid-row: 1 / -1;
      grid-template-columns: 1fr;
      grid-template-rows: subgrid;
    }

    .module__num { grid-row: 1; }
    .module__title { grid-row: 2; }
    .module__tagline { grid-row: 3; }
    .module__body { grid-row: 4; }
    .block-label--who { grid-row: 5; }
    .block-label--do { grid-row: 9; }
    .where-runs { grid-row: 14; }

    /* The lists nest one level deeper so their items pair up row by row. */
    .user-list {
      display: grid;
      grid-row: 6 / span 3;
      grid-template-columns: 1fr;
      grid-template-rows: subgrid;
    }
    .do-list {
      display: grid;
      grid-row: 10 / span 4;
      grid-template-columns: 1fr;
      grid-template-rows: subgrid;
    }
  }
}

/* ---------- CTA ---------- */
.cta {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 55px 40px 120px;
  text-align: center;
}
/* CTA banner image background — broader pastel sweep */
.cta::before {
  content: '';
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background: url('assets/bg-banner.webp') center / cover no-repeat;
  pointer-events: none;
}
.cta h2 {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  line-height: 1.1;
}
.cta p {
  color: var(--muted);
  font-size: 17px;
  margin: 0 0 36px;
}
.cta__buttons {
  display: inline-flex;
  align-items: center;
  gap: 24px;
}

/* Download grid — paired platform cards */
.download-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 760px;
  margin: 40px auto 0;
  text-align: left;
}
.download-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.download-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.download-card__os {
  color: var(--ink);
}
.download-card__head h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.download-card__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.download-fallback {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 15, 18, 0.45);
  backdrop-filter: blur(4px);
  animation: modal-fade 160ms ease-out;
}
.modal__dialog {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(13, 15, 18, 0.25);
  padding: 36px 36px 28px;
  max-width: 440px;
  width: 100%;
  text-align: left;
  animation: modal-pop 200ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: background 120ms ease, color 120ms ease;
}
.modal__close:hover { background: var(--surface); color: var(--ink); }
.modal__close:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.modal__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink);
}
.modal__body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 24px;
}
.modal__actions {
  display: flex;
  justify-content: flex-end;
}
.modal__actions[hidden] { display: none; }
.modal__spinner {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 0 18px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--accent-2);
  animation: modal-spin 0.7s linear infinite;
}
.modal__spinner[hidden] { display: none; }
@keyframes modal-spin {
  to { transform: rotate(360deg); }
}
@keyframes modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .modal__backdrop, .modal__dialog { animation: none; }
  .modal__spinner { animation-duration: 1.4s; }
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  background: #fafbfc;
}
.footer__bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer__bottom small { color: var(--muted); font-size: 13px; }
/* Module colour key — the two dots that name the accents used up the page. */
.footer__legend {
  display: flex;
  gap: 22px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.footer__legend li { display: flex; align-items: center; gap: 8px; }
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.legend-dot--cowork { background: var(--cowork); }
.legend-dot--code { background: var(--code); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .nav__links { display: none; }
  .hero {
    padding: 40px 24px 60px;
    min-height: auto;
  }
  .scroll-down { display: none; }
  .cta { padding-left: 24px; padding-right: 24px; }
  .pillars { grid-template-columns: 1fr; }
  .purpose { padding: 40px 24px 60px; }
  /* The split collapses to stacked modules — the divider and its node only
     make sense while the two columns sit side by side. */
  .modes { padding: 0 24px; }
  .modes__strip { grid-template-columns: 1fr; }
  .mode-cell { border-right: none; border-bottom: 1px solid var(--line); }
  .mode-cell:last-child { border-bottom: none; }
  .modules { padding: 70px 24px 20px; }
  .modules__split { grid-template-columns: 1fr; gap: 56px; }
  .modules__divider, .modules__node { display: none; }
  .module--cowork { padding-right: 0; }
  .module--code { padding-left: 0; padding-top: 56px; border-top: 1px solid var(--line); }
  .download-grid { grid-template-columns: 1fr; max-width: 420px; }
  .footer__bottom { padding: 24px; flex-direction: column; gap: 12px; }
  .footer__legend { order: 1; }
  .nav { padding: 16px 24px; }
}
@media (max-width: 560px) {
  /* Stacked CTAs stay centred — the hero is a centred column now. */
  .hero__ctas, .cta__buttons { flex-direction: column; align-items: center; gap: 16px; }
  .download-card__buttons { flex-direction: column; align-items: stretch; }
  .download-card__buttons .btn { justify-content: flex-start; }
}