/* ─────────────────────────────────────────────────────────────
   Noveriq - 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 ───────────────────────────────────────────────── */
/* Six silences, one line each, and nothing else on the line.
   ─────────────────────────────────────────────────────────────
   This used to be six headings over six paragraphs, each with a
   chip carrying one of the notch's own indicators. Two things went
   wrong with that. The paragraphs described the app, which is what
   the section underneath is for, so the page made its case twice.
   And the chips were the product's material, which put product in
   the one part of the page that has to be about the reader.

   What is left is the argument in its shortest possible form. The
   structure is a hairline over each line and nothing else - no
   marker, no bullet, no box - because the section above it is one
   big panel and the section below it is a grid of boxes, and this
   one has to be neither. Six rules and six sentences.

   Sentences, not labels: each one ends in a full stop and is meant
   to be read as a statement somebody nods at, so they are set at
   nearly heading size and in the page's ink, not in body grey. */

/* 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 line 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: 0 clamp(40px, 5vw, 72px);
  margin: clamp(48px, 5.5vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}

.wy-item {
  padding: 18px 0;
  border-top: 1px solid var(--edge);
  font-size: clamp(16px, 1.4vw, 18.5px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}

/* ── 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; }
}