/* ==========================================================================
   MVIII — Swiss Modernist design system, translated from the iOS app
   (MVIII/Theme/Color+MVIII.swift, Typography.swift, Components.swift).

   Background   purple → black gradient   #2A164A → #0A0A0A (145°, out by 60%)
   Action       orange                    #F25623
   Positive     neon green                #A8FFAB
   Labels       muted gray                #A0A0A0
   Inactive     dark gray                 #4D4D4D
   Text         white / light gray        #FFFFFF / #DEDEDE

   Hierarchy comes entirely from extreme contrasts of size and weight.
   No rounded corners. No pills. No shadows.
   ========================================================================== */

:root {
  --purple: #2a164a;
  --black: #0a0a0a;
  --orange: #f25623;
  --green: #a8ffab;
  --gray-dark: #4d4d4d;
  --gray-muted: #a0a0a0;
  --gray-light: #dedede;
  --hairline: rgba(255, 255, 255, 0.1);
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --measure: 62ch;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0; /* the Swiss rule: sharp corners everywhere */
  margin: 0;
  padding: 0;
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--gray-light);
  background-color: var(--black);
  background-image: linear-gradient(145deg, var(--purple) 0%, var(--black) 60%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

.display {
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 4rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #fff;
}

.title {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.15;
}

.eyebrow {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.136em;
  text-transform: uppercase;
  color: var(--gray-muted);
}

.data {
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1.1;
}

.sub {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--green);
}

.green { color: var(--green); }
.orange { color: var(--orange); }
.muted { color: var(--gray-muted); }

/* --------------------------------------------------------------------------
   Structural motifs
   -------------------------------------------------------------------------- */

/* Thick edge-to-edge geometric rule — divider between major zones. */
.rule {
  height: 4px;
  background: var(--orange);
  border: 0;
  width: 100%;
}

/* Thin hairline for minor separation inside a zone. */
.hairline {
  height: 1px;
  background: var(--hairline);
  border: 0;
  width: 100%;
}

/* Primary action: sharp-cornered edge-to-edge block of solid orange. */
.btn-block {
  display: block;
  width: 100%;
  background: var(--orange);
  color: #000;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.056em;
  text-transform: uppercase;
  text-align: center;
  padding: 16px;
  border: 0;
  cursor: pointer;
}

.btn-block:hover {
  background: #ff6a35;
}

/* Official Apple "Download on the App Store" badge. */
.appstore-badge {
  display: inline-block;
  line-height: 0;
  transition: opacity 0.15s ease;
}
.appstore-badge img {
  height: 58px;
  width: auto;
  display: block;
}
.appstore-badge:hover { opacity: 0.82; }

/* Download nav tab — the CTA in the top nav. */
.nav-links a.nav-dl { color: var(--orange); }
.nav-links a.nav-dl:hover { color: #ff6a35; }

/* Download popup. */
.dl-pop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.dl-pop[hidden] { display: none; }
.dl-pop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}
/* The one raster background on the site besides the body gradient, and it is
   deliberate: this card is the only place the page speaks before it has been
   read, so it gets a photograph rather than a flat panel.

   The scrim is doing real work. Two stops, heavier at the foot where the badge
   and the body copy sit, so white text clears the photograph everywhere rather
   than only over the dark half of it. The flat color stays underneath as the
   fallback for the moment before the image decodes. */
.dl-pop-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background-color: #121016;
  background-image:
    linear-gradient(180deg,
      rgba(10, 10, 10, 0.70) 0%,
      rgba(10, 10, 10, 0.86) 48%,
      rgba(10, 10, 10, 0.95) 100%),
    url("/img/photos/kettlebell-workout-finished.jpg");
  background-size: cover;
  /* The overhead floor shot rather than the gym portrait. This card is wide on
     a desktop and nearly square on a phone, so `cover` crops it very
     differently at each width. A portrait fails that test: framed off the face
     on desktop, the same rule put the face straight behind the headline on
     mobile. A dark floor with a figure lying on it is texture at every crop,
     which is what a background behind type has to be. */
  background-position: center 45%;
  background-repeat: no-repeat;
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--orange);
  padding: 34px 28px 30px;
  text-align: center;
}
.dl-pop-close {
  position: absolute;
  top: 8px;
  right: 14px;
  background: none;
  border: 0;
  color: var(--gray-muted);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.dl-pop-close:hover { color: #fff; }
.dl-pop-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 10px;
}
.dl-pop-sub {
  font-size: 14px;
  color: var(--gray-muted);
  margin-top: 10px;
}
.dl-pop .appstore-badge { margin-top: 22px; }
/* `.dl-pop-later` lived here: a "But why $29.99?" link that closed the popup
   and scrolled to the pricing band. It existed to answer an objection the price
   no longer raises. At $14.99, under the workout app it replaces, defending the
   number in the first thing a visitor sees only plants the doubt. */

/* Underlined uppercase text tag — replaces pills. */
.tag {
  display: inline-block;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.083em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--orange);
}

.tag--white { border-bottom-color: #fff; }
.tag--green { border-bottom-color: var(--green); }

/* Thin sharp horizontal gauge — the Swiss replacement for progress rings. */
.gauge {
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.12);
}

.gauge > i {
  display: block;
  height: 100%;
  background: var(--orange);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Site nav */
.nav {
  border-bottom: 1px solid var(--hairline);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* The stamp carries the header on its own. No wordmark beside it: the mark is
   the letters, so setting MVIII next to it was saying the same thing twice and
   spending the width that the menu needs. */
.nav-mark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Master geometry, not the compact build the tab icon uses. At 40px the master's
   gaps land near a pixel and a half, which holds up at 1x and is clean on retina,
   and the compact's narrowed block reads visibly cramped once it is this large. */
.nav-stamp {
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.nav-links {
  display: flex;
  gap: 28px;
}

.nav-links a {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.136em;
  text-transform: uppercase;
  color: var(--gray-muted);
}

.nav-links a:hover { color: #fff; }

/* Hero */
.hero .wrap {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 380px);
  gap: 64px;
  align-items: center;
  padding-top: 88px;
  padding-bottom: 88px;
}

.hero-copy > * + * { margin-top: 28px; }

.hero-copy p {
  max-width: 44ch;
  color: var(--gray-light);
}

.hero .btn-block { max-width: 380px; }

/* Hero lockup: the disc beside the word it does not repeat.
   No border and no tile. The mark is a knockout, so the canvas reads straight
   through the letters, and a box around it would be a second shape competing
   with the disc. */
.wodmark {
  display: flex;
  align-items: center;
  gap: 18px;
}

.wodmark img {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
}

.wodmark-type {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wodmark-word {
  font-weight: 700;
  font-size: 44px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #fff;
}

.wodmark-sub {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gray-muted);
}

@media (max-width: 700px) {
  .wodmark img { width: 58px; height: 58px; }
  .wodmark-word { font-size: 36px; }
  .wodmark-sub { font-size: 10px; letter-spacing: 0.26em; }
}

/* Screenshots: sharp rectangles, hairline border — no frame, no shadow. */
.shot {
  width: 100%;
  border: 1px solid var(--hairline);
}

/* Photography. Same Swiss treatment as a screenshot, kept as its own class
   because the two will not stay the same: a screenshot is evidence and wants
   the hairline to read as a device edge, a photograph is mood and may later
   want to bleed. */
.photo {
  width: 100%;
  border: 1px solid var(--hairline);
}

/* Full-width photographic break between bands. A fixed height with
   object-fit so a tall portrait can sit in a wide slot without the page
   growing a screen and a half of gap.

   Framing is per-image and deliberate: a wide strip keeps under a fifth of a
   3:4 frame, so the subject has to be aimed at rather than centered. Anything
   whose whole frame is the point belongs in .photo-portrait below instead. */
.photo-band {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.photo-band img {
  width: 100%;
  height: clamp(320px, 46vh, 520px);
  object-fit: cover;
  object-position: center 50%;
  border: 0;
}

/* Hold the shirt, which is the sentence being read. */
.photo-band--tee img { object-position: center 42%; }

/* A portrait whose whole frame carries the moment: shown entire, in a column
   the width of a screenshot, rather than cropped to a letterbox. */
.photo-portrait {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}

.photo-portrait img {
  width: 100%;
  max-width: 340px;
  border: 1px solid var(--hairline);
}

/* Tab strip */
.tabstrip {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.tabstrip .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding-top: 22px;
  padding-bottom: 22px;
  justify-content: space-between;
}

.tabstrip span {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.136em;
  text-transform: uppercase;
  color: var(--gray-dark);
}

.tabstrip span.on { color: var(--green); }

/* Feature sections */
.feature {
  border-top: 1px solid var(--hairline);
}

.feature:first-of-type { border-top: 0; }

.feature .wrap {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 340px);
  gap: 64px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 72px;
}

.feature.flip .wrap { grid-template-columns: minmax(260px, 340px) 1fr; }
.feature.flip .feature-copy { order: 2; }
.feature.flip .feature-shot { order: 1; }

.feature-copy > * + * { margin-top: 18px; }

.feature-copy h2 {
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #fff;
}

.feature-copy p {
  max-width: 52ch;
  color: var(--gray-light);
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.feature-data {
  display: flex;
  gap: 48px;
  padding-top: 8px;
}

.datablock .eyebrow { display: block; margin-bottom: 4px; }
.datablock .data { display: block; }
.datablock .sub { display: block; margin-top: 4px; }

/* Privacy section */
.privacy-band {
  border-top: 1px solid var(--hairline);
}

.privacy-band .wrap {
  padding-top: 88px;
  padding-bottom: 88px;
}

.privacy-band h2 { margin-top: 24px; }

.privacy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 40px 32px;
  margin-top: 56px;
}

.privacy-grid article h3 {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.056em;
  text-transform: uppercase;
  color: #fff;
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--green);
  margin-bottom: 12px;
}

.privacy-grid article p {
  color: var(--gray-muted);
  font-size: 14px;
}

.privacy-band .more {
  margin-top: 56px;
}

/* Closing CTA */
.cta .wrap {
  padding-top: 96px;
  padding-bottom: 96px;
  text-align: left;
}

.cta .btn-block {
  max-width: 380px;
  margin-top: 40px;
}

.cta .appstore-badge { margin-top: 40px; }

/* Footer */
.footer {
  border-top: 1px solid var(--hairline);
}

.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 28px;
  padding-bottom: 44px;
}

.footer a,
.footer span {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.136em;
  text-transform: uppercase;
  color: var(--gray-muted);
}

.footer a:hover { color: #fff; }

/* Wraps, because the row grew a sixth link when References was added and a
   fixed row of six pushed the page 90px wide on a phone. A footer is the one
   place a horizontal scrollbar is least excusable and hardest to notice. */
.footer-links { display: flex; flex-wrap: wrap; gap: 14px 28px; }

/* --------------------------------------------------------------------------
   Marketing bands — Suggest panels, price tables, loop steps, feature cards
   -------------------------------------------------------------------------- */

.num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  white-space: nowrap;
}

/* Full-width marketing band, same rhythm as .feature. */
.band {
  border-top: 1px solid var(--hairline);
}

.band .wrap {
  padding-top: 72px;
  padding-bottom: 72px;
}

.band h2 {
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 18px;
}

.band .lede {
  margin-top: 18px;
  max-width: 62ch;
  color: var(--gray-light);
}

/* Two-column split inside a band: copy left, screenshot/aside right. */
.band-split {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 340px);
  gap: 64px;
  align-items: center;
}

.band-split .split-copy > * + * { margin-top: 18px; }
.band-split .split-copy h2 { margin-top: 0; }

/* More than one split in a single band. The section's own padding only
   separates sections, so consecutive splits need their own gap or they read
   as one run-on block. */
.band-split--stacked { margin-top: 72px; }

.kicker {
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 24px);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #fff;
  max-width: 44ch;
  margin-top: 48px;
}

.fine {
  font-size: 13px;
  color: var(--gray-muted);
  margin-top: 18px;
  max-width: 62ch;
}

/* Suggest demo panels. */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.panel {
  border: 1px solid var(--hairline);
  padding: 24px 20px;
}

.panel > .eyebrow {
  display: block;
  color: var(--green);
  margin-bottom: 6px;
}

.menu-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
}

.panel > .eyebrow + .menu-row { border-top: 0; }

.menu-name {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  line-height: 1.3;
}

.menu-sub {
  font-size: 12px;
  color: var(--gray-muted);
  margin-top: 3px;
  line-height: 1.4;
}

.menu-row .num { font-size: 15px; color: var(--orange); }

.menu-total {
  border-top: 2px solid var(--orange);
  margin-top: 6px;
  padding-top: 14px;
}

.menu-total .eyebrow { letter-spacing: 0.1em; }
.menu-total .num { color: var(--green); font-size: 15px; }

/* Price section. */
.price-cols {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 320px);
  gap: 64px;
  align-items: start;
  margin-top: 48px;
}

.price-big {
  font-weight: 700;
  font-size: clamp(3.2rem, 8vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.price-big .eyebrow { display: block; margin-top: 12px; }

.price-tier { margin-top: 34px; }
.price-tier:first-child { margin-top: 0; }

.price-table { margin-top: 12px; }

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  color: var(--gray-light);
  font-size: 15px;
}

.price-row:first-child { border-top: 0; }
.price-row .muted { color: var(--gray-dark); }

.price-row--total {
  border-top: 3px solid var(--orange);
  font-weight: 700;
  color: #fff;
}

.price-row--us {
  border-top: 0;
  font-weight: 700;
  color: var(--green);
}

.price-row--us .num { color: var(--green); }

/* Risk-reversal card. */
.assure {
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--green);
  padding: 34px 28px;
  margin-top: 56px;
  max-width: 680px;
}

.assure h3 {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
}

.assure p { margin-top: 14px; font-size: 15px; max-width: 58ch; }
.assure b { color: #fff; }
.assure a { color: var(--green); border-bottom: 1px solid var(--green); }

/* Loop steps. */
.loop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
  margin-top: 48px;
}

.step {
  border-left: 2px solid var(--orange);
  padding-left: 18px;
}

.step .eyebrow { color: var(--orange); }

.step h3 {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  margin: 8px 0;
  line-height: 1.2;
}

.step p {
  font-size: 14px;
  color: var(--gray-muted);
  margin: 0;
}

/* Stacked steps inside a band-split column. */
.steps-stack { margin-top: 28px; }
.steps-stack .step + .step { margin-top: 24px; }

/* Condensed feature cards — 1px gaps read as hairline seams. */
.cardgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: 48px;
}

.card {
  background: var(--black);
  padding: 28px 26px;
}

.card .eyebrow { color: var(--orange); }

.card h3 {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.056em;
  text-transform: uppercase;
  color: #fff;
  margin: 10px 0 10px;
}

.card p {
  font-size: 14px;
  color: var(--gray-muted);
  margin: 0;
  max-width: 44ch;
}

/* Small price line under App Store badges. */
.price-note {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--gray-muted);
  line-height: 1.55;
}

.price-note b { color: #fff; }

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */

.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

.legal header { margin-bottom: 48px; }
.legal header .display { font-size: clamp(2rem, 6vw, 3rem); margin-top: 16px; }
.legal header .eyebrow + .display { margin-top: 16px; }
.legal header .meta { margin-top: 16px; color: var(--gray-muted); font-size: 13px; }

.legal section { margin-top: 44px; }

.legal h2 {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 14px;
}

.legal h2 .num {
  color: var(--orange);
  margin-right: 10px;
}

.legal p,
.legal li {
  color: var(--gray-light);
  max-width: var(--measure);
}

.legal p + p { margin-top: 12px; }

.legal ul {
  list-style: none;
  margin-top: 12px;
}

.legal li {
  padding-left: 20px;
  position: relative;
  margin-top: 8px;
}

.legal li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 2px;
  background: var(--orange);
}

.legal a {
  color: #fff;
  border-bottom: 1px solid var(--orange);
}

.legal strong { color: #fff; }

/* 404 */
.notfound {
  max-width: 720px;
  margin: 0 auto;
  padding: 120px 24px;
}

.notfound .display { margin: 20px 0 28px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .hero .wrap,
  .feature .wrap,
  .feature.flip .wrap {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .feature.flip .feature-copy { order: 1; }
  .feature.flip .feature-shot { order: 2; }

  .feature-shot,
  .hero-shot {
    max-width: 320px;
  }

  .tabstrip .wrap { justify-content: flex-start; }

  /* Mark hard left, menu hard right, both on one row. The menu wraps inside
     itself rather than dropping below the mark, so the header stays two lines
     of links tall instead of three and the stamp centers against the block.
     This is why the wordmark came out: it was taking the width this needs. */
  .nav .wrap {
    align-items: center;
    gap: 16px;
  }

  .nav-links {
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    text-align: right;
    gap: 10px 16px;
  }

  .band .wrap { padding-top: 56px; padding-bottom: 56px; }

  .band-split {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .band-split .split-shot { max-width: 320px; }

  .panel-grid,
  .loop-grid,
  .cardgrid,
  .price-cols {
    grid-template-columns: 1fr;
  }

  .price-cols { gap: 44px; }
  .price-cols .price-side { order: -1; }
}

/* ---------------------------------------------------------------------------
   Library — research-backed writing.
   Long-form pages need a narrower measure than the marketing bands, and they
   need to read well when a machine strips the styling off entirely, so the
   markup underneath is plain semantic HTML.
   --------------------------------------------------------------------------- */

.lib-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

.lib-head {
  border-top: 1px solid var(--hairline);
  padding-top: 64px;
}

.lib-head h1 {
  font-weight: 700;
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #fff;
  margin: 14px 0 0;
}

.lib-meta {
  margin-top: 18px;
  font-size: 0.8125rem;
  color: var(--gray-mid);
}

.lib-standfirst {
  margin-top: 22px;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--gray-light);
}

.lib-body {
  padding: 48px 0 72px;
}

.lib-body h2 {
  font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  margin: 52px 0 0;
}

.lib-body h3 {
  font-weight: 700;
  font-size: 1.0625rem;
  color: #fff;
  margin: 32px 0 0;
}

.lib-body p {
  margin: 16px 0 0;
  line-height: 1.65;
  color: var(--gray-light);
}

.lib-body ul {
  margin: 16px 0 0;
  padding-left: 20px;
  color: var(--gray-light);
  line-height: 1.65;
}

.lib-body li { margin-top: 8px; }

.lib-body strong { color: #fff; }

.lib-body a { color: var(--green); }

/* The number that carries the section. */
.lib-stat {
  margin: 36px 0 0;
  padding: 24px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.lib-stat .num {
  display: block;
  font-weight: 700;
  font-size: clamp(2.25rem, 7vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--orange);
}

.lib-stat .sub {
  display: block;
  margin-top: 10px;
  font-size: 0.9375rem;
  color: var(--gray-light);
}

.lib-source {
  display: block;
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--gray-mid);
}

/* What MVIII does about it. Marked out so it never reads as a research claim. */
/* Lateral links out of a reference page.

   The ten reference pages were a closed silo: each linked up to /references/
   and to nothing else, so the one ranking lever a solo site fully controls was
   sitting unused, and a reader who finished a page had nowhere to go but back.
   Siblings first, then the essays arguing from the same evidence. */
.lib-related {
  margin: 40px 0 0;
  padding: 22px 24px;
  border: 1px solid var(--hairline);
}

.lib-related ul {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.lib-related li {
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline);
}

.lib-related li:last-child { border-bottom: 0; }

.lib-app {
  margin: 40px 0 0;
  padding: 22px 24px;
  border: 1px solid var(--hairline);
}

.lib-app .eyebrow { color: var(--green); }

.lib-app p { margin-top: 10px; }

.lib-index {
  display: grid;
  gap: 0;
  margin-top: 8px;
}

.lib-card {
  display: block;
  padding: 28px 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
}

.lib-card:first-child { border-top: 1px solid var(--hairline); }

.lib-card h2 {
  font-weight: 700;
  font-size: clamp(1.125rem, 2.6vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 8px 0 0;
}

.lib-card p {
  margin: 10px 0 0;
  color: var(--gray-light);
  line-height: 1.55;
}

.lib-card:hover h2 { color: var(--orange); }

.lib-faq {
  margin-top: 44px;
  border-top: 1px solid var(--hairline);
  padding-top: 8px;
}

.lib-faq details {
  border-bottom: 1px solid var(--hairline);
  padding: 18px 0;
}

.lib-faq summary {
  cursor: pointer;
  font-weight: 700;
  color: #fff;
  list-style: none;
}

.lib-faq summary::-webkit-details-marker { display: none; }

.lib-faq summary::after {
  content: "+";
  float: right;
  color: var(--orange);
}

.lib-faq details[open] summary::after { content: "–"; }

.lib-faq p { margin-top: 12px; }

/* The name band. Three cells that read as one sentence: the thousand, the
   eight, and the number they make together. The numeral is the hero of each
   cell, so it gets the display face at chart scale rather than a heading. */
.namegrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: 48px;
}

.namecell {
  background: var(--black);
  padding: 32px 26px 30px;
}

.namecell .numeral {
  font-size: 56px;
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--orange);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.namecell h3 {
  margin: 20px 0 8px;
  font-size: 13px;
  letter-spacing: 0.136em;
  text-transform: uppercase;
  color: #fff;
}

.namecell p:not(.numeral) {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--gray-muted);
}

.namenote {
  margin-top: 28px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-muted);
}

@media (max-width: 760px) {
  /* Stacked, because three columns puts "1008" on two lines and the numeral
     is the thing worth reading. */
  .namegrid { grid-template-columns: 1fr; }
  .namecell { padding: 26px 22px 24px; }
  .namecell .numeral { font-size: 44px; }
}

/* ==========================================================================
   References
   --------------------------------------------------------------------------
   The evidence specification pages. Built on the Library measure, because they
   are long-form and have to read when a machine strips the styling off, with
   three additions the Library never needed.

   A parameter table has nine columns and cannot be narrowed to a phone. So it
   scrolls inside its own container and the PAGE never does: horizontal scroll
   on the body is how a long document becomes unreadable on a phone, and it is
   always a container's fault rather than the table's.

   The entry id and the grade are set apart because they are the join between a
   number in the app and the paper behind it. Somebody arrives here from a
   "Sources" tap looking for one row, and finding it should not require reading.
   ========================================================================== */

.ref-scroll {
  overflow-x: auto;
  /* `max-width` and `min-width: 0` together are what actually contain a table
     wider than the measure. Without them the container simply grows to its
     contents and the PAGE scrolls sideways instead, which is the failure this
     block exists to prevent. */
  max-width: 100%;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0 8px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.ref-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
  font-size: 13px;
  line-height: 1.5;
}

.ref-table th {
  text-align: left;
  padding: 10px 14px 10px 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--hairline);
}

.ref-table td {
  padding: 9px 14px 9px 0;
  color: var(--gray-light);
  vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ref-table tr td:first-child {
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

.ref-entry {
  margin: 32px 0;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  /* Anchored from the app and from the tables above, so a linked row must not
     land under the sticky nav. */
  scroll-margin-top: 90px;
}

.ref-entry h3 {
  font-size: 19px;
  line-height: 1.3;
  margin-bottom: 12px;
  color: #fff;
}

.ref-id {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--black);
  background: var(--orange);
  vertical-align: middle;
}

.ref-field {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-light);
}

.ref-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-muted);
  margin-bottom: 2px;
}

/* The honesty note on an entry. Muted rather than hidden: it is frequently the
   most important line in the block, and it is never the headline. */
.ref-caveat {
  color: var(--gray-muted);
  font-size: 14px;
}

.ref-note {
  margin: 12px 0 28px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray-muted);
}

.ref-contested li,
.ref-list li {
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-light);
}

.ref-list {
  font-size: 14px;
}

.ref-list li {
  font-size: 14px;
  color: var(--gray-muted);
  scroll-margin-top: 90px;
}

.ref-list a {
  word-break: break-word;
}

@media (max-width: 760px) {
  .ref-entry h3 { font-size: 17px; }
  /* The table keeps its minimum width and scrolls; only the frame narrows. */
  .ref-scroll { margin-left: 0; margin-right: 0; }
}

/* A [12] pointing at the reference list. Kept quiet: it is a footnote marker,
   and a page with sixty of them set in link blue would be unreadable. */
.ref-cite {
  color: var(--gray-muted);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.ref-cite:hover,
.ref-cite:focus {
  color: var(--orange);
}

/* --------------------------------------------------------------------------
   Workout of the Day — /wod

   Rendered by the Worker in src/wod.ts, not by a file in public/. The page is
   a workout somebody reads standing up between sets, so the scheme (4 x 8) is
   the loudest thing on every row and the prose sits under it.

   The paragraph rules below are scoped to .lib-body on purpose, not for tidiness.
   This page borrows the library article's shell, and `.lib-body p` sets a color
   and a margin at a specificity a bare class cannot beat. Unscoped, the pace line
   silently lost its green and every row gained 16px it was not designed for.
   -------------------------------------------------------------------------- */

.wod-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  list-style: none;
  margin: 28px 0 0;
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.wod-facts .data { display: block; }
.wod-facts .sub { display: block; margin-top: 4px; color: var(--gray-muted); }

/* The denominator of "week 2 of 4". Smaller so the number that changes reads
   first and the one that never does stays out of the way. */
.wod-of {
  font-size: 0.5em;
  font-weight: 500;
  color: var(--gray-dark);
  letter-spacing: 0;
}

.wod-muscles {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
}

.wod-muscles span:not(.eyebrow) {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-light);
  border: 1px solid var(--hairline);
  padding: 3px 8px;
}

.wod-block { margin-top: 44px; }

.wod-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.136em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--orange);
}

.wod-h-min {
  font-weight: 500;
  letter-spacing: 0.045em;
  color: var(--gray-muted);
  white-space: nowrap;
}

.lib-body .wod-note {
  margin-top: 14px;
  font-size: 14px;
  color: var(--gray-muted);
}

.lib-body .wod-note a { color: var(--green); }

/* Warm-up and cool-down. Quieter than the session: they are things to do, not
   things to load. */
.wod-drills {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.lib-body .wod-drills li {
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
}

.lib-body .wod-drill-name {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.wod-drill-dur {
  font-weight: 500;
  font-size: 13px;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lib-body .wod-drill-detail {
  margin-top: 6px;
  font-size: 14px;
  color: var(--gray-light);
}

/* Form cues. Short enough that they set as a row of small caps rather than a
   list, which is how they appear on the app's own player screen. */
.lib-body .wod-cues {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.lib-body .wod-cues span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--gray-muted);
}

.lib-body .wod-cues span::before {
  content: "· ";
  color: var(--orange);
}

.wod-exercises {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lib-body .wod-ex {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0 16px;
  margin: 0;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
}

.lib-body .wod-ex:first-child { border-top: 0; }

.lib-body .wod-ex-n {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--gray-dark);
}

.wod-ex-name {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.15;
}

.lib-body .wod-ex-scheme {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

/* The number you act on. Everything else on the row is context for it. */
.wod-ex-sets {
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--orange);
}

.wod-x {
  font-weight: 400;
  font-size: 0.7em;
  color: var(--gray-dark);
}

.wod-ex-meta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--gray-muted);
}

.lib-body .wod-ex-how {
  margin-top: 10px;
  font-size: 15px;
  color: var(--gray-light);
}

.lib-body .wod-ex-pace {
  margin-top: 6px;
  font-size: 14px;
  color: var(--green);
}

.lib-body .wod-prev {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--gray-muted);
}

.lib-body .wod-prev a:hover,
.lib-body .wod-prev a:focus { color: var(--orange); }

@media (max-width: 560px) {
  /* Four stat columns stop being readable well before the type does. */
  .wod-facts { grid-template-columns: repeat(2, 1fr); }
  .lib-body .wod-ex { grid-template-columns: 28px 1fr; gap: 0 12px; }
  .lib-body .wod-ex-n { font-size: 18px; }
  .wod-ex-name { font-size: 17px; }
}

/* The badge inside the "one workout for everyone" panel. The panel's own rule
   gives every child a top margin; the badge needs more air than a paragraph. */
.lib-app .appstore-badge { margin-top: 18px; }

/* The one link on the landing page that goes to a workout instead of to the
   App Store. Understated: it sits under the badge, and the badge is still the
   thing the page is asking for. */
.hero-wod {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  font-weight: 500;
}

.hero-wod a {
  color: var(--green);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.hero-wod a:hover,
.hero-wod a:focus { border-bottom-color: var(--green); }

/* The badge in the WOD page header. Somebody who already wants the app should
   not have to read a whole workout to find the way to it. */
.wod-get {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.wod-get-note {
  flex: 1 1 260px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--gray-muted);
}

/* The link out of the download popup for somebody not ready to install. Quiet
   next to the badge, because the badge is still what the popup is asking for. */
.dl-pop-wod {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  font-weight: 500;
}

.dl-pop-wod a {
  color: var(--green);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.dl-pop-wod a:hover,
.dl-pop-wod a:focus { border-bottom-color: var(--green); }

/* The closing CTA on the WOD page. `.wrap` is 1080 wide and the workout above
   it is 720, so without this the headline starts a long way left of every line
   the reader has just read. */
.cta.wod-cta .wrap { max-width: 720px; }

/* A square photo shown whole. `.photo-portrait` caps at 340px, which is right
   for a tall frame and leaves a square looking like a thumbnail. */
.photo-square {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}

.photo-square img {
  width: 100%;
  max-width: 560px;
  border: 1px solid var(--hairline);
}

/* ==========================================================================
   Life lately (1.8.0). The top of the page in the listing's own look: paper
   ground, lowercase, film prints and the real screen. It is the one place on
   this site that breaks the Swiss rules on purpose (a tilt, a shadow, a round
   phone corner), because the photo dump is the look and it is scoped here.
   ========================================================================== */
.ll-hero,
.ll-dump {
  --paper: #eeeae3;
  --ink: #111111;
  --ink-soft: #605c58;
  background: var(--paper);
  color: var(--ink);
}

.ll-hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
  gap: 56px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 40px;
}

.ll-copy > * + * { margin-top: 22px; }

.ll-kicker {
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--orange);
}

.ll-display {
  font-weight: 700;
  font-size: clamp(72px, 11vw, 148px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.ll-cap {
  font-size: clamp(18px, 2.1vw, 24px);
  color: var(--ink-soft);
  margin-top: 12px !important;
}

.ll-lede,
.ll-note {
  max-width: 44ch;
  color: var(--ink);
}

.ll-note { font-size: 13px; color: var(--ink-soft); }
.ll-lede strong { color: var(--ink); }

.ll-wod a {
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--orange);
}

/* The collage: three prints fanned behind the week, the way frame one is. */
/* The phone bleeds off the bottom the way it does in every listing frame,
   faded rather than cut so there is no hard edge above the strip. */
.ll-collage {
  position: relative;
  height: 720px;
  overflow: hidden;
  padding: 24px;
  margin: -24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

.ll-print {
  position: absolute;
  width: 46%;
  background: #faf8f4;
  padding: 10px 10px 30px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.ll-print img {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}

/* The date a disposable camera burns into the corner. */
.ll-stamp {
  position: absolute;
  right: 20px;
  bottom: 38px;
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 700;
  font-size: 15px;
  color: #ffb05a;
  text-shadow: 0 0 6px rgba(255, 140, 40, 0.9);
}

.ll-print--a { left: 0; top: 40px; transform: rotate(-8deg); }
.ll-print--b { right: 0; top: 10px; transform: rotate(7deg); }
.ll-print--c { left: 26%; top: 0; transform: rotate(-2deg); z-index: 1; }
.ll-print--a img { object-position: center 25%; }
.ll-print--c img { object-position: center 30%; }

.ll-phone {
  position: absolute;
  left: 14%;
  top: 200px;
  width: 68%;
  z-index: 2;
  border: 3px solid #1e1c1a;
  border-radius: 28px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.3);
  transform: rotate(1.5deg);
}

/* The strip: every listing frame, swiped like the carousel it imitates. */
.ll-dump {
  padding: 8px 0 64px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ll-strip {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 20px max(24px, calc((100vw - 1100px) / 2)) 12px;
  scrollbar-width: thin;
}

.ll-strip figure {
  flex: 0 0 clamp(210px, 24vw, 280px);
  scroll-snap-align: start;
}

.ll-strip img {
  width: 100%;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}

@media (max-width: 820px) {
  .ll-hero .wrap {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 48px;
  }
  .ll-collage { height: 600px; max-width: 460px; }
}

@media (max-width: 480px) {
  .ll-collage { height: 480px; }
  .ll-phone { top: 150px; }
}

/* --------------------------------------------------------------------------
   Android beta sign-up (/android). One field, one button, the app's rules:
   sharp corners, the orange block for the action, green only for the good news.
   -------------------------------------------------------------------------- */

.beta-form {
  margin-top: 40px;
  padding: 28px 0 8px;
  border-top: 4px solid var(--orange);
}

.beta-form label {
  display: block;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.136em;
  text-transform: uppercase;
  color: var(--gray-muted);
}

.beta-form input[type="email"] {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 14px 16px;
  font: inherit;
  font-size: 18px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--gray-dark);
}

.beta-form input[type="email"]:focus {
  outline: none;
  border-color: var(--orange);
}

.beta-hint {
  margin: 10px 0 22px;
  font-size: 13px;
  color: var(--gray-muted);
}

.beta-fine {
  margin-top: 14px;
  font-size: 13px;
  color: var(--gray-muted);
}

.beta-error {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-left: 4px solid var(--orange);
  background: rgba(242, 86, 35, 0.12);
  color: #fff;
}

/* Only a script ever finds this field. Off screen, not display:none, which
   some of them skip. */
.beta-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.beta-body {
  padding: 40px 0 88px;
}

.beta-body h2 {
  font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
}

.beta-body ol {
  margin: 18px 0 0 1.2em;
}

.beta-body li { margin-top: 10px; }

.beta-body a,
.beta-ios a {
  color: var(--green);
}

.beta-ios {
  margin-top: 36px;
  color: var(--gray-muted);
}

/* The app screen inside a library essay's "What MVIII does" box. Small: the
   essay is the point and the screen is the proof. */
.lib-app-shot {
  width: 100%;
  max-width: 260px;
  margin-top: 18px;
  border: 1px solid var(--hairline);
}