/* os/app.css — the two product pages: /os and /app.
 *
 * One file for both on purpose. dac0578 ("the app and the OS are different
 * products; the site did not say so") is only satisfied if the two pages are
 * SYMMETRIC: the same comparison told from each side, the same status panel,
 * the same weight. A shared stylesheet is how that symmetry stays true when
 * one of them is edited.
 *
 * Everything structural comes from /design.css. What is here is the site
 * chrome design.css deliberately does not carry, and the few page shapes.
 *
 * Contrast is design.css's job now: --bone-3 was retuned to #54605F there
 * after this file measured it failing AA at the bottom of the stratum stack.
 */

/* ---- Site chrome ----------------------------------------------------- */
.masthead{
  display:flex;align-items:baseline;gap:14px clamp(16px,3vw,40px);flex-wrap:wrap;
  padding:16px var(--pad-x);border-bottom:1px solid var(--rule);
  background:var(--st-0);
}
.masthead__brand{
  font-weight:660;letter-spacing:-.02em;font-size:16px;color:var(--bone);
  border-bottom:0;
}
.masthead__brand em{font-style:normal;color:var(--bone-3);font-weight:400}
.masthead__brand:hover{color:var(--flux-2)}
.masthead nav{
  display:flex;gap:10px clamp(12px,2vw,24px);flex-wrap:wrap;margin-left:auto;
  font-family:var(--code);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;
}
.masthead nav a{color:var(--bone-2);border-bottom:1px solid transparent;
                padding-bottom:2px}
/* "Webπ" is a mark, not a word: uppercasing it gives WEBΠ, which reads as an
   N at 11.5px. The lowercase pi is exempted from the nav's text-transform. */
.masthead nav i{font-style:normal;text-transform:none}
.masthead nav a:hover{color:var(--flux);border-bottom-color:var(--flux)}
/* Colour here marks a true state: which page you are on. */
.masthead nav a[aria-current=page]{color:var(--flux);border-bottom-color:var(--flux)}

.colophon{
  padding:32px var(--pad-x) 40px;border-top:1px solid var(--rule-2);
  background:var(--st-3);display:flex;gap:12px 26px;flex-wrap:wrap;
  align-items:baseline;font-family:var(--code);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bone-2);
}
.colophon a{color:var(--bone-2)}
.colophon a:hover{color:var(--flux-2)}
.colophon__note{margin-left:auto;text-transform:none;letter-spacing:0;
                font-family:var(--sans);font-size:12.5px;color:var(--bone-2)}

/* ---- Measured contrast correction ------------------------------------ */
/* No contrast correction here any more. This file briefly rebound --bone-3
   on the darker strata, because at #5E6B6A it measured 3.85:1 on --st-3.
   design.css has since moved the token itself to #54605F, which clears the
   floor on every stratum, so the local patch is deleted rather than left to
   fight the system it was compensating for. Re-measured after: worst text on
   these pages is the token's own 5.75:1. */

/* ---- Hero ------------------------------------------------------------ */
.hero{
  padding:clamp(56px,8vh,104px) var(--pad-x) clamp(48px,7vh,88px);
  display:grid;gap:clamp(28px,4vw,60px);align-items:start;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
}
.hero__panel{max-width:460px}
.hero h1 em{font-style:normal;color:var(--flux)}
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero__panel{max-width:none}
}

/* The eyebrow carries the section's verification state on the same line. */
.eyebrow .state{margin-left:auto}
.eyebrow--with-state::after{margin-right:2px}

/* ---- The pair -------------------------------------------------------- */
/* Two products in one table, which must stay visually equal in weight: the
   moment one column reads as the headline and the other as a footnote, the
   page is saying the thing dac0578 removed.

   This was a pair of cards ABOVE the table until the prose pass. The cards
   said where each product runs; the table's first row said it again. What
   only the cards carried was which page you are on, so that moved into the
   column head and the cards went. */
table.pair th.is-here{color:var(--flux)}
table.pair th.is-here span{
  display:block;font-size:9.5px;letter-spacing:.14em;margin-top:4px;
  color:var(--bone-3);font-weight:400;
}
table.pair th[scope=col]{font-size:11px;padding-bottom:14px}
table.pair th[scope=row]{text-transform:none;letter-spacing:0;font-size:14px;
                         font-family:var(--sans);color:var(--bone-2);
                         font-weight:400}

/* ---- Layer stack ----------------------------------------------------- */
.layers{border-top:1px solid var(--rule-2);margin-top:6px}
.layers li{list-style:none;display:grid;
           grid-template-columns:3.2rem minmax(0,15rem) minmax(0,1fr) auto;
           gap:10px clamp(14px,2vw,28px);align-items:baseline;
           padding:16px 0;border-bottom:1px solid var(--rule)}
.layers ol,.layers{padding-left:0;margin:0}
.layers__n{font-family:var(--code);font-size:12px;color:var(--bone-3);
           font-variant-numeric:tabular-nums}
.layers__name{font-family:var(--code);font-size:14px;color:var(--bone);
              letter-spacing:-.005em}
.layers__what{color:var(--bone-2);font-size:14.5px;line-height:1.55}
.layers li .state{justify-self:end}
@media (max-width:760px){
  .layers li{grid-template-columns:3.2rem minmax(0,1fr);}
  .layers__what{grid-column:1 / -1}
  .layers li .state{grid-column:2;justify-self:start}
}

/* ---- Milestones ------------------------------------------------------ */
.path{counter-reset:step;display:grid;gap:0;padding:0;margin:0;
      border-top:1px solid var(--rule-2)}
.path li{list-style:none;padding:20px 0;border-bottom:1px solid var(--rule);
         display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);
         gap:6px clamp(14px,2vw,28px);align-items:baseline}
.path__when{font-family:var(--code);font-size:11.5px;letter-spacing:.14em;
            text-transform:uppercase;color:var(--bone-2)}
.path h3{margin:0 0 6px}
.path p{margin:0;color:var(--bone-2);font-size:14.5px}
@media (max-width:680px){.path li{grid-template-columns:1fr}}

/* ---- Prose ----------------------------------------------------------- */
.prose > * + *{margin-top:0}
.prose ul{max-width:var(--measure);padding-left:1.1em;margin:0 0 18px}
.prose li{margin-bottom:9px}
.head{max-width:none}
.head .lede{max-width:58ch}