/* ─────────────────────────────────────────────────────────────
   Crew Tower - the argument section (#why)

   This section sits directly above the features grid and must not
   read as a second copy of it. The features are a catalogue: six
   equal tiles, each a tinted box above a sentence. The argument is
   one continuous statement, so it is composed the other way round.

     1. a centred lead, the only centred block-head on the page
     2. one wide panel split in half by a hairline - the whole
        argument is that hairline, so it is a single object rather
        than a row of cards
     3. the pains as a typographic ledger with no boxes at all,
        marked by the notch's own indicators on the notch's own
        black

   Words carry this section and one image anchors it; downstairs it
   is the other way round. Nothing here animates: a comparison you
   have to wait for is a worse comparison.

   The fragments reuse features-demo.css wholesale - .fx-frag and
   its em-off-one-font-size sizing, .fx-term, .fx-ring, and the
   brand marks hero-demo.css publishes. Only the two shapes that
   section has no use for are new: PeekView's pill, and the marker
   chip. Namespaced wy- to stay out of both.
   ───────────────────────────────────────────────────────────── */

.wy-stage, .wy-stage *, .wy-stage *::before, .wy-stage *::after,
.wy-list, .wy-list * { box-sizing: border-box; }

/* ── the lead ─────────────────────────────────────────────────── */
/* Centred, and a size up from every other section heading: this is
   the page's argument, and the features below are its footnotes. */

/* This section opens directly under .hero-tail, which is already a tall
   fade into the page's background. Stacking a full 80px section gap on
   top of that left a band of empty colour before anything was said, so
   the top gap is halved here. The bottom keeps the page's rhythm. */
#why.block { padding-top: 40px; }

.wy-head {
  max-width: 46rem;
  margin: 0 auto clamp(36px, 4.5vw, 56px);
  text-align: center;
}
.wy-head .h-lg { margin: 0 0 20px; text-wrap: balance; }
.wy-head .lede { margin: 0 auto; max-width: 60ch; }

/* ── the anchor ───────────────────────────────────────────────── */
/* One panel, two halves. The tint is the product's wallpaper blurred
   flat, exactly as .fx-box does it, so the anchor and the previews
   below sit on the same field - but it is painted once across the
   whole panel rather than per card, which is what stops two halves
   from reading as two tiles. */

.wy-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--r-card-lg);
  background: var(--paper);
  border: 1px solid var(--edge);
  overflow: hidden;
  isolation: isolate;
}
.wy-stage::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: var(--ct-wallpaper);
  filter: blur(60px) saturate(120%);
  opacity: .5;
  z-index: -2;
}
.wy-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .8));
  z-index: -1;
}

/* Rows, not flow: the label sits at the top of both halves and the
   caption at the bottom of both, so the two fragments float in the
   same band of air whatever height their captions take. */
.wy-side {
  container-type: inline-size;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 22px;
  padding: clamp(24px, 3vw, 34px);
  min-width: 0;
}
.wy-side + .wy-side { border-left: 1px solid var(--edge); }

.wy-label {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mist);
}
.wy-label-good { color: var(--iris); }

.wy-art {
  align-self: center;
  width: 100%;
  padding-block: clamp(6px, 1.6vw, 18px);
}

.wy-cap {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--slate);
}

/* ── PeekView ─────────────────────────────────────────────────── */
/* The lean-out the app shows on a re-nudge: the mark and its pip, the
   project, what it is asking, and how long it has been asking - which
   the app only prints once that is over a minute. Fully rounded
   because that is the shape it takes on a screen with no notch, and
   a pill floating free of a screen edge is the honest one to draw. */

.wy-peek {
  display: flex;
  align-items: center;
  gap: .85em;
  max-width: 24em;
  margin: 0 auto;
  padding: .8em 1.05em;
  border-radius: 1.4em;
  background: #000;
  box-shadow: 0 1.2em 2.6em rgba(16, 15, 18, .3), 0 .3em .8em rgba(16, 15, 18, .16);
}
.wy-peek .ct-agent { --ct-agent-size: 1.7em; }
.wy-peek-main { flex: 1; min-width: 0; }
.wy-peek-project {
  font-size: 1.08em;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
}
/* The headline takes the session's signal colour, which for a pending
   permission is the attention amber. */
.wy-peek-line {
  margin-top: .15em;
  font-family: var(--font-mono);
  font-size: .9em;
  color: var(--ct-attention);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wy-peek-age {
  font-size: .84em;
  color: rgba(255, 255, 255, .45);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── the terminal, as the "before" ────────────────────────────── */
/* The strip is the features section's, with two changes. It stands
   alone here rather than under a notch fragment, so it drops the top
   margin; and its amber underline is the jump indicator - it means
   "this is the one", which is precisely what a tab strip cannot tell
   you. The lit tab is only the one you happen to have open. */

.wy-art .fx-term { margin-top: 0; }
.wy-art .fx-tab::after { display: none; }

/* Taller than the features version and scrolled to a real line, so the
   half reads as dense rather than thin: there is plenty on screen, it
   is just never the tab you need. */
.wy-term-body {
  display: flex;
  flex-direction: column;
  gap: .3em;
  padding: .7em .8em .9em;
  background: #0d1015;
  font-family: var(--font-mono);
  font-size: .82em;
  line-height: 1.35;
  color: rgba(238, 235, 250, .78);
  white-space: nowrap;
  overflow: hidden;
}
.wy-term-dim { color: rgba(238, 235, 250, .38); }

/* ── the ledger ───────────────────────────────────────────────── */
/* No cards, no rules, no boxes: the section above it is one big
   object and the section below it is a grid of them, so the third
   beat is plain type. What gives it a spine is the marker column. */

/* Two across, where the features grid below is three: the ledger has
   to sit at a different rhythm from the catalogue it introduces, and
   the wider measure keeps every heading on one line. */
.wy-list {
  display: grid;
  /* min() or the 420px floor becomes a 420px track on a 331px page
     and the whole document scrolls sideways */
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(30px, 3.4vw, 40px) clamp(40px, 5vw, 72px);
  margin: clamp(48px, 5.5vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}

.wy-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 3px 16px;
  /* auto rows stretch into a grid row taller than they are, which
     silently pushes a short item's heading off its neighbour's line */
  align-content: start;
}
.wy-item h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.02em;
  align-self: center;
  min-height: 34px;
  display: flex;
  align-items: center;
}
.wy-item p {
  grid-column: 2;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--slate);
}

/* The chip is the notch: the indicators inside it are drawn for a
   black surface and would be unreadable on the page. It is also why
   this list needs no bullet - the marker is the bullet, and it says
   which of the app's signals the line is about. */
.wy-mark {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  box-shadow: 0 4px 12px rgba(16, 15, 18, .18);
}
.wy-mark .ct-agent { --ct-agent-size: 15px; }
/* the collar that separates a pip from the card it sits on is the
   card's own black, so on the chip it only needs to be thinner */
.wy-mark .ct-agent-pip { box-shadow: 0 0 0 1.5px #000; }

/* the context ring, without its number: the colour is the statement */
.wy-mark .fx-ring svg { width: 17px; height: 17px; }

/* "nothing here wants you" - the idle pip's own grey, on its own */
.wy-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ct-pip-idle);
}

/* Two runs of the same agent. Side by side with air between rather
   than overlapping: Claude's mark is a starburst, and two of them
   overlapped read as one smudged mark, which is the opposite of the
   point. Identical marks are the case that actually hurts, so the
   pair is deliberately not two different brands. */
.wy-pair { display: flex; gap: 3px; }
.wy-pair .ct-agent { --ct-agent-size: 13px; }

/* ── narrow ───────────────────────────────────────────────────── */

@media (max-width: 760px) {
  /* Stacked, the hairline has to run across rather than down or the
     two halves stop reading as one panel. */
  .wy-stage { grid-template-columns: minmax(0, 1fr); }
  .wy-side + .wy-side { border-left: 0; border-top: 1px solid var(--edge); }
  .wy-side { gap: 18px; }
  .wy-list { margin-top: 44px; }
}