/* ============================================================
   Axis marketing site
   The palette, type scale and spacing rhythm below are lifted
   from the app's own design system (native/Sources/DesignSystem.swift)
   rather than invented for the web: same surfaces, same accent,
   same rule that chrome carries zero hue (R == G == B).
   Corner radius system: media and panels 12px, buttons 8px,
   small inline chips 6px. Nothing else rounds.
   Theme: dark, locked. The app ships light too, and the page shows
   it, but the page itself does not invert section to section.
   ============================================================ */

:root {
  /* Surfaces (DesignSystem.swift, dark column) */
  --base:      #121212;
  --surface:   #1b1b1b;
  --raised:    #232323;
  --elevated:  #2b2b2b;
  --hairline:  #313131;

  /* Ink */
  --ink:       #ededed;
  --ink-2:     #b4b4b4;
  --ink-3:     #9f9f9f;

  /* One accent, page-wide: the app's Player 1 blue */
  --accent:      #66b0ff;
  --accent-ink:  #7fc4ef;
  --accent-deep: #1e5aa8;

  /* Data colours. Used only where the app uses them: on data. */
  --pos: #5cdb91;
  --neg: #e0645a;

  --r-media: 12px;
  --r-btn: 8px;
  --r-chip: 6px;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", "Roboto Mono", monospace;

  --gutter: clamp(20px, 5vw, 56px);
  --section: clamp(68px, 9.5vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-chip);
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--elevated); color: var(--ink);
  padding: 10px 16px; border-radius: var(--r-btn); z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap--wide { max-width: 1360px; }

/* ---------------- type ---------------- */

h1 {
  text-wrap: balance;
  font-size: clamp(2.6rem, 6.2vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0 0 24px;
}

.h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 600;
  margin: 0 0 16px;
  max-width: 26ch;
  text-wrap: balance;
}

h3 {
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.008em;
  font-weight: 600;
  margin: 0 0 10px;
}

p { margin: 0 0 18px; max-width: 62ch; color: var(--ink-2); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.0625rem, 1.9vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
  margin-bottom: 34px;
}

.sub { color: var(--ink-3); max-width: 58ch; margin-bottom: 44px; }

.tag {
  font-family: var(--mono);
  font-size: 0.82em;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-chip);
  padding: 1px 7px;
  white-space: nowrap;
}

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 0.9375rem; font-weight: 590; letter-spacing: -0.005em;
  padding: 12px 22px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  transition: background-color .18s cubic-bezier(.16,1,.3,1),
              border-color .18s cubic-bezier(.16,1,.3,1),
              transform .12s cubic-bezier(.16,1,.3,1),
              color .18s;
}
.btn:active { transform: translateY(1px); }

/* Contrast: #66b0ff against #121212 ink gives 8.7:1 for the label. */
.btn--primary { background: var(--accent); color: #08121e; }
.btn--primary:hover { background: #8cc4ff; color: #08121e; }

.btn--ghost {
  color: var(--ink);
  border-color: var(--hairline);
  background: var(--surface);
}
.btn--ghost:hover { border-color: #454545; background: var(--raised); color: var(--ink); }

.btn--sm { padding: 8px 15px; font-size: 0.875rem; min-height: 34px; }
.btn--lg { padding: 15px 30px; font-size: 1.0625rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------- glass ----------------
   A web APPROXIMATION of Apple's Liquid Glass, not the real material: Apple
   documents Liquid Glass for Apple platforms, and there is no official CSS
   package. What is borrowed is the behaviour, not a stylesheet: a translucent
   layer that blurs and saturates what passes behind it, a bright specular
   edge along its top, a hairline containing it, and an opacity that firms up
   once real content is behind it rather than the page ground.

   Apple's rule that glass belongs to the NAVIGATION LAYER ONLY is followed
   literally. Exactly two elements on this page get it: the sticky nav, and
   the workspace tab strip, which is the page's one navigation control and the
   direct analogue of the segmented control the app itself glasses. No card,
   screenshot, panel or CTA is glass. That is also what keeps this inside the
   1 to 2 element dose cap.

   `.glass--solid` is the `.identity` style: glass switched off, not faked. */

.glass {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012) 42%, rgba(255,255,255,0) 72%),
    rgba(20, 20, 20, 0.62);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  transition: background-color .4s cubic-bezier(.16,1,.3,1);
}

/* Once the hero has scrolled past, there is page content behind the nav
   rather than empty ground, so the material carries more of its own weight. */
.nav.is-lifted {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.012) 42%, rgba(255,255,255,0) 72%),
    rgba(18, 18, 18, 0.86);
  border-bottom-color: #3a3a3a;
}

/* Reduced transparency is the accessibility switch Apple honours with
   `.identity`. Same here: no blur, no translucency, solid fill. */
@media (prefers-reduced-transparency: reduce) {
  .glass, .nav.is-lifted {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
}

/* ---------------- nav ---------------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  height: 64px;
  border-bottom: 1px solid var(--hairline);
}

.nav__inner {
  height: 100%;
  max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 28px;
}

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink); font-weight: 600; letter-spacing: -0.01em; font-size: 1.0625rem;
}
.brand img { border-radius: var(--r-chip); }

.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a { color: var(--ink-3); font-size: 0.9375rem; padding: 10px; }
.nav__links a:hover { color: var(--ink); }

@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav .btn { margin-left: auto; }
}

/* ---------------- hero ---------------- */

.hero { padding-top: clamp(56px, 8vw, 88px); padding-bottom: 0; }

.hero__copy { max-width: 1360px; }

.hero .shot--hero { margin-top: clamp(44px, 5.5vw, 68px); }

/* ---------------- screenshot frame ----------------
   A real capture of the app inside a minimal window edge.
   The chrome strip is the macOS title bar the app genuinely has;
   the content below it is an untouched export from the build. */

.shot {
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 30px 80px -30px rgba(0,0,0,0.85);
}

.shot__chrome {
  height: 30px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: var(--raised);
  border-bottom: 1px solid var(--hairline);
}
.shot__chrome i { width: 11px; height: 11px; border-radius: 50%; background: #3d3d3d; }
.shot__chrome i:nth-child(1) { background: #ff5f57; }
.shot__chrome i:nth-child(2) { background: #febc2e; }
.shot__chrome i:nth-child(3) { background: #28c840; }

/* On a phone the app's own density would shrink to nothing, so the capture
   pans instead of scaling down. Untouched at tablet width and up. */
.shot__view { overflow-x: auto; overscroll-behavior-x: contain; }
.shot__view img { width: 100%; }
@media (max-width: 720px) {
  .shot__view img { width: 760px; max-width: none; }
  .shot__view { scrollbar-width: thin; }
}

.shot figcaption {
  padding: 14px 18px 16px;
  border-top: 1px solid var(--hairline);
  color: var(--ink-3);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ---------------- sections ---------------- */

.band { padding: var(--section) 0; }
.band--statement { border-top: 1px solid var(--hairline); background: var(--surface); }
.band--limits { border-top: 1px solid var(--hairline); }

/* ---------------- section variants ---------------- */

.band--tight { padding: calc(var(--section) * 0.62) 0; }
.band--alt { background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }

/* ---------------- contents ---------------- */

.contents {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 clamp(28px, 5vw, 64px);
}
.contents li { border-top: 1px solid var(--hairline); padding: 14px 0; }
/* Full-width rows on touch, so the target is the row and not the word. */
@media (pointer: coarse) {
  .contents li { padding: 8px 0; }
  .contents a { display: flex; flex-direction: column; justify-content: center; min-height: 44px; }
}
.contents a { display: block; color: var(--ink); font-weight: 590; font-size: 0.9375rem; }
.contents a:hover { color: var(--accent); }
.contents span { display: block; margin-top: 3px; color: var(--ink-3); font-size: 0.875rem; line-height: 1.45; }
@media (max-width: 760px) { .contents { grid-template-columns: 1fr; } }

/* ---------------- figures ---------------- */

.figrow { display: grid; gap: 20px; margin-top: 40px; align-items: start; }
.figrow--2 { grid-template-columns: repeat(2, 1fr); }
.figrow--3 { grid-template-columns: repeat(3, 1fr); }
.figrow--4 { grid-template-columns: repeat(4, 1fr); }

.fig img {
  border: 1px solid var(--hairline);
  border-radius: var(--r-media);
  background: var(--base);
  width: 100%;
}
.fig figcaption {
  margin-top: 12px;
  color: var(--ink-3);
  font-size: 0.875rem;
  line-height: 1.55;
}
.fig figcaption strong { color: var(--ink-2); font-weight: 590; }
.fig--wide { margin-top: 40px; }
/* The tall panel crops are real columns out of the app. They are shown at a
   readable width and cut off at a fixed height rather than scaled down to
   nothing, with the cut faded so it reads as an excerpt and not as a bug. */
.fig--tall img {
  max-height: 560px;
  width: 100%;
  object-fit: cover;
  object-position: top;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}

@media (max-width: 1000px) {
  .figrow--4 { grid-template-columns: repeat(2, 1fr); }
  .figrow--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .figrow--2, .figrow--3, .figrow--4 { grid-template-columns: 1fr; }
  .fig--tall img { max-height: 420px; }
}

/* ---------------- side by side ---------------- */

.side {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
  margin-top: 48px;
}
.side--wide { grid-template-columns: 0.85fr 1.15fr; margin-top: 0; }
.side__media img { width: 100%; border: 1px solid var(--hairline); border-radius: var(--r-media); }
@media (max-width: 880px) { .side, .side--wide { grid-template-columns: 1fr; } }

/* ---------------- prose columns ---------------- */

.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 52px);
  margin-top: 40px;
}
.columns--3 { grid-template-columns: repeat(3, 1fr); }
.columns > div { border-top: 1px solid var(--hairline); padding-top: 20px; }
.columns p { font-size: 0.9375rem; }
@media (max-width: 860px) { .columns, .columns--3 { grid-template-columns: 1fr; gap: 26px; } }

/* ---------------- laptop band ---------------- */

.laptop { padding: 0; background: var(--base); }
.laptop img { width: 100%; display: block; }
.laptop figure {
  /* The photograph's own backdrop is lighter than the page, so it is faded
     into the ground at every edge instead of butting against it. */
  -webkit-mask-image: radial-gradient(120% 118% at 50% 46%, #000 52%, transparent 88%);
          mask-image: radial-gradient(120% 118% at 50% 46%, #000 52%, transparent 88%);
}

/* ---------------- statement + facts ---------------- */

.statement { max-width: 56ch; }
.statement .h2 { max-width: 24ch; }
.statement p { font-size: 1.0625rem; }

.facts {
  margin: 56px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-media);
  overflow: hidden;
}
.facts > div { background: var(--surface); padding: 22px 22px 24px; }
.facts dt {
  font-size: 0.8125rem; color: var(--ink-3);
  margin-bottom: 10px;
}
.facts dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--accent-ink);
}
.facts__note {
  font-family: var(--sans) !important;
  font-size: 0.8125rem !important;
  color: var(--ink-3) !important;
  margin-top: 8px !important;
  line-height: 1.45;
}
@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .facts { grid-template-columns: 1fr; } }

/* ---------------- split ---------------- */

.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split--reverse { grid-template-columns: 1fr 0.8fr; }
.split--reverse .split__copy { order: 0; }

.split__media img {
  border: 1px solid var(--hairline);
  border-radius: var(--r-media);
  background: var(--surface);
}
.split__media--small { justify-self: center; max-width: 420px; }

@media (max-width: 880px) {
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split__media { order: -1; }
  .split--reverse .split__media { order: -1; }
}

.syntax { list-style: none; margin: 32px 0 0; padding: 0; }
.syntax li {
  display: grid;
  grid-template-columns: minmax(0, 15.5em) 1fr;
  align-items: baseline;
  gap: 4px 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 560px) { .syntax li { grid-template-columns: 1fr; } }
.syntax li:first-child { border-top: 1px solid var(--hairline); }
.syntax code {
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--ink);
}
.syntax span { font-size: 0.875rem; color: var(--ink-3); }

/* ---------------- two up ---------------- */

.twoup { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.twoup figure { margin: 0; }
.twoup img {
  border: 1px solid var(--hairline);
  border-radius: var(--r-media);
}
.twoup figcaption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-3);
}
@media (max-width: 720px) { .twoup { grid-template-columns: 1fr; } }

/* ---------------- limits ---------------- */

.limits { display: grid; gap: 6px; max-width: 62ch; }
.limits p { font-size: 1.0625rem; color: var(--ink-2); }

/* The page's one identity motif, and the same rule the app follows: every
   value the machine produced is set in SF Mono, every word a person wrote is
   not. It runs through the facts row, the range syntax, the appearance
   captions and the availability line. */
.mono {
  font-family: var(--mono);
  font-size: 0.875em;
  letter-spacing: -0.01em;
  color: var(--ink-3);
}

/* ---------------- close ---------------- */

.close {
  position: relative;
  border-top: 1px solid var(--hairline);
  /* Two scrims, not one. The vertical fade joins the section to the sections
     either side of it; the horizontal one guarantees the text column sits on
     near-black whatever the photo is doing behind it, because averaging the
     backdrop is exactly how a 3.2:1 line ships (R-25). */
  background-image:
    linear-gradient(90deg, rgba(18,18,18,0.97) 0%, rgba(18,18,18,0.95) 42%, rgba(18,18,18,0.15) 72%, rgba(18,18,18,0) 100%),
    linear-gradient(180deg, rgba(18,18,18,0.96) 0%, rgba(18,18,18,0.55) 26%, rgba(18,18,18,0.88) 82%, rgba(18,18,18,0.98) 100%),
    url("/assets/img/chips.webp");
  background-size: cover;
  background-position: center 40%;
  text-align: left;
}
.close__inner { padding: clamp(96px, 14vw, 190px) var(--gutter); }
.close h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.06; letter-spacing: -0.028em; font-weight: 600;
  margin: 0 0 14px;
}
.close p { color: var(--ink-2); margin-bottom: 32px; }
.close__status { line-height: 1.75; color: var(--ink); }
.close__status .mono { color: var(--ink-2); }

/* ---------------- footer ---------------- */

.foot { border-top: 1px solid var(--hairline); padding: 40px 0 56px; }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.foot__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 590; font-size: 0.9375rem; }
.foot__brand img { border-radius: var(--r-chip); }
.foot__links { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: -10px; }
.foot__links a { color: var(--ink-3); font-size: 0.9375rem; padding: 10px; }
.foot__links a:hover { color: var(--ink); }
.foot__note {
  width: 100%; margin: 6px 0 0;
  color: #8a8a8a; font-size: 0.8125rem; max-width: none;
}

/* Coarse pointers get the 44px minimum on every control, which is a bigger
   number than any of these need on a mouse. */
@media (pointer: coarse) {
  .btn, .nav__links a, .foot__links a, .brand, .foot__brand {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav__links a, .foot__links a { padding-inline: 12px; }
}

/* ---------------- scroll reveal ---------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); }
  .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  }
}