/* ============================================================
   SECTION  -  WHY WE BUILT IT                       2026-08-20

   The nav carried a #why link to a section that never existed. This
   is it. It is the only place on the page that says the problem out
   loud, and it is the only place carrying a figure.

   THE FIGURES ARE GOVERNED, NOT CHOSEN. The evidence doc's §9
   permissions matrix clears the prevalence group for landing page use
   WITH ATTRIBUTION, which is why the source sits under each number
   rather than in a footnote nobody reads. A third figure, 43%, is
   logged as contradiction C2 in WHISPR_STATE.md and is explicitly not
   ours to resolve, so it is not here.

   The second number does NOT claim the gap between them is the reason
   the product exists. That sentence was on the client's original page
   and a reviewer killed it: the gap is evidence that institutional
   settings are lonelier, and nothing more. The reason is the sentence
   above the numbers, which is about reachability.

   Everything is scoped with #why, because a section stylesheet that
   uses bare classes loses to any id-scoped rule elsewhere and fails
   silently.
   ============================================================ */

#why{background:var(--paper-2)}

/* PX, NOT CH. This was max-width:26ch on .head, whose own font-size is
   17px, so it resolved to 278.84px and clamped a 40px headline into a
   five line column and squeezed the lede inside its own 565px cap.
   ch is relative to the ELEMENT'S font-size, so it is meaningless on a
   wrapper holding mixed sizes. Cap the container in px. */
/* Centred, as it was on the client's own page. px not ch: ch resolves
   against the ELEMENT'S font-size, so a cap on a wrapper holding mixed
   sizes is meaningless and folded a 40px headline into five lines. */
#why .head{max-width:none}
#why .head h2{
  margin:8px auto 0; max-width:620px;
  font-size:clamp(26px,3.1vw,40px); line-height:1.12; letter-spacing:-.021em;
}
/* The belief sentence sits under the heading and above the two facts,
   which is where the client placed it. Display face, because it is the
   only opinion in a section otherwise made of other people's research,
   and it should not be mistaken for one of the findings. */
#why .why__belief{
  margin:16px auto 0; max-width:600px;
  font-family:var(--display); font-weight:400; letter-spacing:-.013em;
  font-size:clamp(18px,1.9vw,23px); line-height:1.36; color:var(--ink);
  text-wrap:balance;
}

/* ---------- the two numbers ----------
   Not cards. A card makes a statistic look like a product feature.
   These are set as two figures on a rule, the way a number is printed
   in a report, and the attribution is the same size as the caption on
   a photograph because that is what it is. */
#why .why__figs{
  list-style:none; margin:clamp(24px,3vw,38px) 0 0; padding:0;
  display:grid; gap:clamp(20px,2.6vw,34px);
  grid-template-columns:1fr;
}
@media (min-width:760px){
  #why .why__figs{grid-template-columns:1fr 1fr; gap:clamp(28px,3.4vw,54px)}
}
#why .why__figs li{
  border-top:2px solid rgba(0,27,61,.16);
  padding-top:clamp(12px,1.5vw,16px);
}
#why .why__n{
  display:block;
  font-family:var(--display); font-weight:400; letter-spacing:-.028em;
  font-size:clamp(38px,5.2vw,64px); line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
#why .why__says{
  margin:10px 0 0; max-width:330px;
  font-size:15.5px; line-height:1.5; color:var(--ink);
}
#why .why__src{
  margin:8px 0 0; max-width:340px;
  font-size:12.5px; line-height:1.45; color:var(--ink-3);
}

/* ---------- the attribution ----------
   The client's own disclaimer, and the most important line in the
   section: it is what keeps two loneliness figures from reading as
   claims about this product. Small, centred, plainly separated. */
#why .why__attrib{
  margin:clamp(22px,2.8vw,32px) auto 0; max-width:560px;
  padding-top:clamp(14px,1.8vw,20px);
  border-top:1px solid rgba(0,27,61,.12);
  font-size:13.5px; line-height:1.55; color:var(--ink-3);
  text-align:center;
}

html.no-js #why .rv,
.rv-force #why .rv{opacity:1; transform:none; transition:none}

@media (prefers-reduced-motion:reduce){
  #why .rv{transition:none}
}


/* ============================================================
   BACKGROUND PHOTOGRAPH                              2026-08-28

   Client asked for this section to sit on the companion photograph -
   an older hand resting on the device with its band lit - the way Ato
   put an elder and the device behind their figures.

   Size is unchanged. Only the ground swaps: --paper-2 becomes the
   photograph plus a scrim, and every ink colour inside #why flips to
   the on-night set so the type still reads. The scrim is not
   decoration; white text on an unmodified warm photograph fails
   contrast, and these two numbers are the only governed figures on the
   page - they have to be legible or they should not be here.

   --night stays as the element background so a failed image request
   degrades to a dark section with light text rather than to light text
   on white.
   ============================================================ */
#why{
  position:relative; isolation:isolate;
  background:var(--night);
  color:var(--on-night);
}
#why::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url("../assets/companion.jpg") 50% 42% / cover no-repeat;
  /* The photograph is 1600x900. On a phone the section is tall and narrow, so
     cover shows only ~29% of the image WIDTH - and centred, that window lands
     at 36-64%, which is all hand: the device sits at 0-35% and was cropped
     clean off. 28% puts the window at 20-49%, so both the device and the hand
     are in frame. Desktop shows the full width, so it is unaffected either
     way. Slight contrast and saturation because a scrim flattens a photograph
     and the device has to stay readable as an object. */
  filter:contrast(1.09) saturate(1.07);
}
@media (max-width:759px){
  #why::before{background-position:28% 50%}
}
#why::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to bottom, rgba(4,20,43,.66), rgba(4,20,43,.44) 45%, rgba(4,20,43,.74));
}
#why .head h2,
#why .why__belief,
#why .why__n,
#why .why__says{
  color:var(--on-night);
  /* The scrim was lightened so the device reads as an object rather than fog.
     That costs text contrast, so the type carries its own, exactly as the
     hero does. These two figures are governed copy and have to stay legible. */
  text-shadow:0 2px 16px rgba(3,12,26,.85), 0 1px 3px rgba(3,12,26,.7);
}
#why .why__attrib{color:var(--on-night-2); text-shadow:0 1px 10px rgba(3,12,26,.8)}
/* Both rules on the light ground used a near-black rule colour; on the
   photograph they vanish. The li rule is the one above each figure, the
   attrib rule is the hairline above the attribution line. */
#why .why__figs li{border-top-color:rgba(255,255,255,.22)}
#why .why__attrib{border-top-color:rgba(255,255,255,.16)}