/* gpui-maps.swatmobility.com: the gpui-maps launch page.
   Light, quiet sections around one dark hero (the engine's own globe).
   System type (SF on Apple devices); one accent, the atmosphere blue. */

:root {
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --paper: #ffffff;
  --mist: #f5f5f7;
  --line: #d2d2d7;
  --space: #000000;
  --atmo: #6cb4ff;      /* the limb glow, on dark */
  --atmo-ink: #0a5fcc;  /* the same blue, readable on white */
  --term: #1c1c1e;
  --term-ink: #f2f2f7;
  --term-dim: #8e8e93;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.47 var(--sans);
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--atmo-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: 0.88em; letter-spacing: 0; }
:focus-visible { outline: 2px solid var(--atmo); outline-offset: 3px; border-radius: 6px; }

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

h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.03em; }
h2 { font-size: clamp(32px, 5vw, 56px); line-height: 1.07; font-weight: 700; max-width: 18ch; }
h3 { font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
.lede { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.38; color: var(--ink-2); max-width: 36em; margin: 20px 0 0; letter-spacing: -0.02em; }
.note { color: var(--ink-2); font-size: 14px; }

/* Nav: translucent over everything, as the system bars are. */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: #f5f5f7;
}
.nav-in { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; height: 48px; display: flex; align-items: center; gap: 28px; font-size: 13px; letter-spacing: -0.01em; }
.brand { display: flex; align-items: center; gap: 8px; color: #f5f5f7; font-weight: 600; font-size: 15px; }
/* "by SWAT": the company behind the project, after its name and quieter
   than it, the mark in the same white ink as the bar. */
.by { display: flex; align-items: center; gap: 6px; margin-left: -16px; color: rgba(245, 245, 247, 0.55); font-size: 12px; }
.by img { height: 14px; width: auto; opacity: 0.85; }
.by:hover { text-decoration: none; color: rgba(245, 245, 247, 0.8); }
.by:hover img { opacity: 1; }
.nav nav { display: flex; gap: 24px; margin-left: auto; }
.nav nav a, .nav-gh { color: rgba(245, 245, 247, 0.8); }
.nav nav a:hover, .nav-gh:hover { color: #fff; text-decoration: none; }
.nav-gh { border: 1px solid rgba(245, 245, 247, 0.35); border-radius: 980px; padding: 4px 12px; }

/* Hero: the one dark, loud place on the page. */
/* The hero starts under the translucent nav, so the nav reads black on it. */
.hero { background: var(--space); color: #f5f5f7; text-align: center; margin-top: -48px; padding: 136px 0 0; overflow: hidden; }
.hero-copy { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; padding: 0 22px; }
.hero h1 { font-size: clamp(36px, 9.4vw, 96px); line-height: 1.02; font-weight: 700; letter-spacing: -0.045em; }
.hero-sub { font-size: clamp(19px, 2.4vw, 25px); line-height: 1.36; color: #a1a1a6; margin: 22px auto 0; max-width: 30em; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }
.install {
  display: inline-flex; align-items: center; gap: 14px;
  background: #1d1d1f; color: #f5f5f7; border: 1px solid #424245; border-radius: 980px;
  padding: 12px 14px 12px 22px; font: inherit; cursor: pointer;
}
.install code { font-size: 15px; }
.install code::before { content: "$ "; color: var(--term-dim); }
.install-state { font-size: 13px; color: var(--atmo); background: rgba(108, 180, 255, 0.12); border-radius: 980px; padding: 4px 10px; min-width: 64px; }
.install:hover { border-color: #6e6e73; }
.btn-light, .btn-dark, .btn-line { display: inline-block; border-radius: 980px; padding: 12px 22px; font-size: 17px; }
.btn-light { background: #f5f5f7; color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-line { border: 1px solid var(--line); color: var(--ink); }
.btn-light:hover, .btn-dark:hover, .btn-line:hover { text-decoration: none; opacity: 0.88; }
.btn-line.is-off { color: var(--ink-2); cursor: default; }
.btn-line.is-off:hover { opacity: 1; }

/* Sections share one rhythm. */
.start, .features, .agents, .platforms, .support { padding: 120px 0; }
.start { background: var(--paper); }
.features { background: var(--mist); }
.agents { background: var(--paper); }
.platforms { background: var(--mist); }

/* Terminal and code windows, in the system's dark chrome. */
.start-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; margin-top: 48px; }
.term, .code { background: var(--term); color: var(--term-ink); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16); }
.term-bar, .code-bar { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; background: #2c2c2e; font: 12px var(--sans); color: var(--term-dim); letter-spacing: 0; }
.term-bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.term-bar i:nth-child(2) { background: #febc2e; }
.term-bar i:nth-child(3) { background: #28c840; }
.term-bar span { margin: 0 auto; transform: translateX(-30px); }
.term-body, .code-body { margin: 0; padding: 18px 20px 22px; font: 13.5px/1.62 var(--mono); letter-spacing: 0; overflow-x: auto; white-space: pre; }
.term .p { color: var(--atmo); }
.term .dim, .term-body .dim { color: var(--term-dim); }
.code .k { color: #ff7ab2; }
.code .n { color: #d9c97c; }
.aside { margin: 28px 0 0; color: var(--ink-2); }

.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 40px; margin: 56px 0 0; }
.specs div { border-top: 1px solid var(--line); padding-top: 16px; }
.specs dt { font-weight: 600; margin-bottom: 6px; }
.specs dd { margin: 0; color: var(--ink-2); font-size: 15px; }

/* Agents. */
.term-agent { margin-top: 48px; }
.term-agent .term-body { font-size: 14px; }
.term-agent .you { color: #fff; font-weight: 600; }
.term-agent .dot { color: var(--atmo); }
.term-agent code { color: var(--atmo); font-size: 1em; }
.points { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.points li { color: var(--ink-2); font-size: 15px; }
.points strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
/* Connect Claude Code: the two ways in, side by side (stacked on phones). */
.connect { margin-top: 72px; }
.connect h3 { font-size: 24px; letter-spacing: -0.02em; }
.connect .aside { margin-top: 10px; max-width: 46em; }
.connect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.connect-grid .note { margin: 12px 4px 0; }
/* The one orchestrated motion: the session plays once when it scrolls in. */
.js .term-agent .line { opacity: 0; }
.js .term-agent.play .line { animation: line-in 0.01s linear forwards; animation-delay: calc(var(--i) * 260ms); }
@keyframes line-in { to { opacity: 1; } }

/* Platforms: three real frames in their own device chrome. */
/* Two shared rows: every frame sits on one baseline (row 1, bottom), and
   every caption starts on one line (row 2, top), however long it runs. */
.devices { display: grid; grid-template-columns: 1fr 1fr 0.42fr; grid-template-rows: auto auto; column-gap: 28px; max-width: 1320px; margin: 56px auto 0; padding: 0 22px; }
.dev { margin: 0; min-width: 0; display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.dev > :first-child { align-self: end; }
.dev figcaption { align-self: start; }
.dev-frame img, .phone img { width: 100%; }
.dev-frame { border-radius: 12px; overflow: hidden; background: var(--term); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); }
.dev-chrome { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; background: #2c2c2e; color: var(--term-dim); font-size: 12px; letter-spacing: 0; }
.dev-chrome i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.dev-chrome i:nth-child(2) { background: #febc2e; }
.dev-chrome i:nth-child(3) { background: #28c840; }
.dev-chrome span { margin: 0 auto; transform: translateX(-24px); }
.dev-chrome-web span { background: #1c1c1e; border-radius: 6px; padding: 3px 14px; }
.dev figcaption { padding: 14px 4px 0; color: var(--ink-2); font-size: 15px; }
.dev figcaption strong { color: var(--ink); font-weight: 600; }
.phone { border: 10px solid #1d1d1f; border-radius: 44px; overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); }
.phone img { border-radius: 34px; }
.demo-row { margin: 48px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.studio-dl { margin-top: 80px; border-top: 1px solid var(--line); padding-top: 32px; }
.studio-dl .studio-desc { margin: 12px 0 0; max-width: 46em; color: var(--ink-2); font-size: 17px; line-height: 1.5; }
.studio-dl .demo-row { margin-top: 24px; }
.crates { margin-top: 80px; border-top: 1px solid var(--line); padding-top: 32px; }
.crates ul { list-style: none; padding: 0; margin: 16px 0 12px; }
.crates li { padding: 10px 0; color: var(--ink-2); }
.crates li code { color: var(--ink); font-weight: 600; margin-right: 10px; }

/* Support. */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-left: auto; margin-right: auto; gap: 20px; margin-top: 56px; align-items: stretch; }
.plan { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; padding: 32px 28px; }
.plan-main { border-color: var(--ink); }
.plan .price { font-family: var(--display); font-size: 32px; font-weight: 700; letter-spacing: -0.03em; margin: 8px 0 20px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; }
.plan li { padding: 8px 0; border-top: 1px solid #e8e8ed; color: var(--ink-2); font-size: 15px; }
.plan .btn-dark, .plan .btn-line { align-self: flex-start; font-size: 15px; padding: 10px 18px; }

/* Footer. */
.foot { background: var(--mist); color: var(--ink-2); font-size: 12px; line-height: 1.6; padding: 32px 0 48px; border-top: 1px solid var(--line); }
.foot p { margin: 0 0 12px; max-width: 60em; }
.foot a { color: var(--ink); }
.foot-links { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }

@media (max-width: 860px) {
  .nav nav { display: none; }
  .nav-gh { margin-left: auto; }
  .start-grid, .plans, .points, .connect-grid { grid-template-columns: 1fr; }
  .devices { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 40px; }
  .dev { grid-row: auto; grid-template-rows: none; }
  .dev-phone { max-width: 260px; margin: 0 auto; }
  .specs { grid-template-columns: 1fr 1fr; }
  .start, .features, .agents, .platforms, .support { padding: 80px 0; }
  .term-body, .code-body { font-size: 12px; }
}
@media (max-width: 520px) {
  .by { display: none; }
  .specs { grid-template-columns: 1fr; }
  .hero { padding-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .term-agent .line { opacity: 1; animation: none; }
}

/* Grid items that hold a <pre> must be allowed to shrink below the code's
   width, or a long line widens the whole page on a phone. */
.start-grid > *, .term, .code { min-width: 0; }

/* The language menu, at the nav's right end. */
.lang { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 1px solid rgba(245, 245, 247, 0.35); border-radius: 980px;
  color: rgba(245, 245, 247, 0.9); font: 12px var(--sans); letter-spacing: 0; padding: 4px 10px; cursor: pointer;
}
.lang-btn:hover { color: #fff; border-color: rgba(245, 245, 247, 0.6); }
.flag { width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.35); flex: none; }
.chev { width: 9px; height: 6px; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; min-width: 150px;
  background: rgba(29, 29, 31, 0.96); border: 1px solid #424245; border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.lang-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: #f5f5f7; font-size: 14px; }
.lang-menu a:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; }
.lang-menu a[aria-current="page"] { color: var(--atmo); }

/* Japanese: the system's Japanese faces, no negative tracking (it crowds
   kana), and phrase-aware breaks so a heading never splits a word. */
html:lang(ja) {
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
}
:lang(ja) body { letter-spacing: 0.02em; line-height: 1.75; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .lede, :lang(ja) .hero-sub, :lang(ja) .plan .price { letter-spacing: 0; word-break: auto-phrase; line-break: strict; }
:lang(ja) h1 { font-size: clamp(40px, 7.4vw, 80px); line-height: 1.12; }
:lang(ja) h2 { font-size: clamp(28px, 4.2vw, 46px); line-height: 1.25; max-width: 22em; }
:lang(ja) .lede, :lang(ja) .hero-sub { line-height: 1.7; }

/* The player: the hero's live map, under the headline. One live map at
   a time, under tabs, its style switchable in place. Until it starts (on
   a desktop it starts by itself; on a phone, on a press) a poster holds
   its place at the same shape, so nothing jumps when the frame arrives. */
.player { max-width: 1240px; margin: 56px auto 0; padding: 0 22px 72px; text-align: left; }
.player-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 16px; }
.try-tabs, .styles { display: flex; flex-wrap: wrap; gap: 8px; }
.try-tab, .style-chip {
  font: 15px/1 var(--sans); letter-spacing: -0.01em; color: #d2d2d7; cursor: pointer;
  background: transparent; border: 1px solid #424245; border-radius: 980px; padding: 10px 18px;
}
.style-chip { font-size: 13px; padding: 7px 12px; border-color: #333336; color: #a1a1a6; }
.try-tab:hover, .style-chip:hover { border-color: #86868b; color: #fff; }
.try-tab[aria-selected="true"] { background: #f5f5f7; border-color: #f5f5f7; color: var(--ink); }
.style-chip[aria-pressed="true"] { border-color: #a1a1a6; color: #f5f5f7; }
.try-stage { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #111; }
.try-stage img, .try-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.try-stage img { filter: brightness(0.6); }
.try-start { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 0 22px; }
.try-start .btn-light { border: 0; cursor: pointer; font: inherit; }
.try-start span { font-size: 13px; color: #d2d2d7; }
.try-desc { margin: 16px 4px 0; color: #a1a1a6; font-size: 15px; max-width: 52em; }
.try-desc a { color: var(--atmo); white-space: nowrap; }

/* Phones: the player's tabs and style chips each keep to one row that
   scrolls sideways (the cut-off pill at the edge says there is more),
   with taller pills for thumbs; the stage turns portrait, so the map
   gets the screen's height rather than a 216 px strip. */
@media (max-width: 640px) {
  .player { margin-top: 40px; padding-bottom: 56px; }
  .player-bar { display: block; margin-bottom: 14px; }
  .try-tabs, .styles {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 -22px; padding: 0 22px; -webkit-overflow-scrolling: touch;
  }
  .try-tabs::-webkit-scrollbar, .styles::-webkit-scrollbar { display: none; }
  .styles { margin-top: 10px; }
  .try-tab { flex: none; padding: 13px 18px; }
  .style-chip { flex: none; font-size: 14px; padding: 11px 14px; }
  .try-stage { aspect-ratio: 4 / 5; border-radius: 14px; }
  .try-start span { font-size: 12px; max-width: 20em; }
}
.try-start span { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.try-credit {
  position: absolute; right: 10px; bottom: 10px; left: 10px; margin: 0; text-align: right;
  font-size: 10px; line-height: 1.4; color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); pointer-events: none;
}

/* The headline's last word turns: its letters leave upwards one after
   another, blurring as they fade, and the next word's letters rise into
   place the same way (each 22 ms behind the one before). Screen readers
   get the whole list once, from the heading's label. */
.rot { display: inline-block; white-space: nowrap; }
.rot .ch {
  display: inline-block; white-space: pre;
  transition: opacity 0.42s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.42s ease;
  transition-delay: calc(var(--i) * 22ms);
}
.rot.out .ch { opacity: 0; transform: translateY(-0.28em); filter: blur(8px); }
.rot.pre .ch { opacity: 0; transform: translateY(0.32em); filter: blur(8px); transition: none; }