/*
  Shared stylesheet for the home page and the topic pages. Moved out of
  index.html when the one long page became several (20 October 2026); the rules
  are unchanged apart from the header, which is now shared and sticky.
*/
/*
  One file, no build step, no external requests — deployable by dropping this
  folder on any static host, and still working when a CDN it depended on goes
  away in three years. The phone mockups are inline SVG for the same reason;
  they also stay sharp at any size and recolour with the theme, which a PNG
  screenshot cannot.
*/
:root {
  --bg: #ffffff;
  --bg-alt: #fafafa;
  --surface: #ffffff;
  --border: #e6e6e6;
  --text: #0a0a0a;
  --dim: #6b6b6b;
  --ink-invert: #ffffff;

  /* Light-mode versions: darkened where they have to carry text on white. */
  --violet: #4b47c9;
  --violet-soft: #ecebfb;
  --lime: #14a35a;
  --lime-soft: #e2f7ec;
  --amber: #b06f05;
  --amber-soft: #fdf1dc;
  --rose: #cc3338;
  --rose-soft: #fde9ea;

  /* Volume ramp — one hue, light to dark, so "more" reads as "darker".
     A perceptual heat ramp: it climbs in lightness as well as hue, so the order
     survives for colour-blind readers. Green->amber->red was rejected — those two
     measure dE 2.3 apart under deuteranopia. */
  --muscle-none: #ccd3e0;
  --body-skin: #b9c2d2;
  --muscle-low: #a020c0;
  --muscle-mid: #ff2d78;
  --muscle-high: #ff7a18;
  --muscle-max: #ffd400;

  /* Flatter. A page where every card floats has no hierarchy left to spend
     on the one element that should. */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -16px rgba(0, 0, 0, 0.12);
  --radius: 12px;

  /*
    THE SLAB IS THE VIDEO'S BACKGROUND.

    Two soft lights over the ink: indigo from the left, a warm rust from the
    bottom right. Those are the promo video's own colours, sampled off its
    poster frame, and having the page and the video share them means the
    video stops looking like something embedded from elsewhere.

    Fixed in both themes. It is a surface, not a text colour, and the light
    page keeping a dark hero is deliberate -- it is the one place the product
    gets to look like itself.
  */
  --slab:
    radial-gradient(1100px 680px at 6% 44%, #2b2c6d 0%, rgba(43,44,109,0) 64%),
    radial-gradient(860px 620px at 90% 92%, #613029 0%, rgba(97,48,41,0) 62%),
    #0e1621;
  --slab-flat: #1b2145;
  --on-slab: #ffffff;
  --max: 1140px;
}
@media (prefers-color-scheme: dark) {
  :root {
    /*
      The ink the logo is drawn on, #0e1621, rather than a neutral black.

      Neutral was a correction of the old violet cast and overshot: the app,
      the icon and the promo video are all a deep blue-black, and a website
      in true greyscale beside them looks like a different product's site.
      This is the icon's own background colour, sampled.
    */
    --bg: #0e1621;
    --bg-alt: #121c28;
    --surface: #16212e;
    --border: #253444;
    --text: #f4f7fa;
    --dim: #94a5b6;

    /* The ring's own colours, which already read well on the ink. */
    --violet: #7d7ce8;
    --violet-soft: #1a1e3a;
    --lime: #4ade80;
    --lime-soft: #0f2a1d;
    --amber: #f0a020;
    --amber-soft: #2a2010;
    --rose: #e5484d;
    --rose-soft: #2c161a;

    --muscle-none: #333b4f;
    --body-skin: #4a536a;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -16px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
section { padding: 96px 0; }
section.alt { background: var(--bg-alt); }

/*
  HEADINGS AS BLOCKS, which is the whole trick.

  Measured off the reference rather than guessed at: uppercase, weight 700+,
  tracking near -0.03em, and leading BELOW the font size -- 48px of line
  height on 68px type. It is the sub-1 line height that does the work. Lines
  that lock together into a solid mass read as deliberate; the same words at
  1.1 leading read as a paragraph that happens to be large, and no amount of
  size or weight fixes that.

  h3 is deliberately NOT uppercase. Card titles are read as labels at a
  glance, and setting a whole page of them in caps costs the legibility that
  sentence case buys for nothing in return.
*/
h1, h2 {
  font-family: "Inter Tight", "Inter", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.92;
  margin: 0 0 22px;
}
h1 { font-size: clamp(42px, 6.6vw, 76px); }
h2 { font-size: clamp(30px, 4.2vw, 50px); }
h3 {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-size: 19px; font-weight: 650; letter-spacing: -0.015em;
  line-height: 1.25; margin: 0 0 14px;
}
p { margin: 0 0 18px; }
.lead { font-size: clamp(18px, 2.3vw, 23px); color: var(--dim); max-width: 60ch; line-height: 1.5; }
.dim { color: var(--dim); }
.small { font-size: 14.5px; }
a { color: var(--violet); }

/*
  Section eyebrow, as a label rather than a badge.

  These were filled pills in four colours, so every section opened with a
  small bright lozenge and the page had no single accent left anywhere. Now a
  quiet uppercase line with a dot: it still marks the start of a block, and
  the colour classes still exist, so no markup has to change.
*/
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}
.e-violet { color: var(--violet); }
.e-lime   { color: var(--lime); }
.e-amber  { color: var(--amber); }
.e-rose   { color: var(--rose); }

/* --- header ---
   One bar for every page: brand and the launch-list button, then a row of
   every page. On a phone the row scrolls sideways (the Play Store tab
   pattern) rather than hiding behind a menu -- Kyne asked for the same
   headings on mobile as on desktop (20 October 2026). */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}
header.site .bar { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.brand {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 750; letter-spacing: -0.04em; font-size: 20px;
  text-transform: uppercase; color: var(--text); text-decoration: none;
}
.brand span { color: var(--violet); }
[hidden] { display: none !important; }
.btn.notify-btn { padding: 8px 14px; font-size: 14px; }
nav.tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
nav.tabs::-webkit-scrollbar { display: none; }
nav.tabs .wrap { display: flex; gap: 4px; white-space: nowrap; padding-bottom: 8px; }
nav.tabs a { color: var(--dim); text-decoration: none; font-size: 14.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; flex: none; }
nav.tabs a:hover { color: var(--text); background: var(--bg-alt); }
[data-page="how"] nav.tabs a[href="/how-it-works"], [data-page="logging"] nav.tabs a[href="/logging"],
[data-page="meals"] nav.tabs a[href="/meal-plans"], [data-page="training"] nav.tabs a[href="/training"],
[data-page="prep"] nav.tabs a[href="/contest-prep"], [data-page="events"] nav.tabs a[href="/event-training"],
[data-page="pricing"] nav.tabs a[href="/pricing"], [data-page="about"] nav.tabs a[href="/about"] {
  color: var(--violet); background: var(--violet-soft);
}
@media (min-width: 900px) { nav.tabs { -webkit-mask-image: none; mask-image: none; } }
/* Anchored sections land below the sticky bar, not under it. */
[id] { scroll-margin-top: 120px; }

/* --- topic pages --- */
.page-intro { padding: 56px 0 8px; }
.page-intro h1 { font-size: clamp(34px, 6vw, 54px); margin: 10px 0 14px; }
.page-top h1 { font-size: clamp(32px, 5.5vw, 48px); }
a.card.teaser { display: block; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
a.card.teaser:hover { border-color: var(--violet); transform: translateY(-2px); }
a.card.teaser .more { display: inline-block; margin-top: 10px; color: var(--violet); font-weight: 600; font-size: 14.5px; }
.related { padding: 24px 0 8px; }
.related-links { display: flex; flex-wrap: wrap; gap: 10px; }
footer .foot-pages { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 14px; }
.page-intro + section { padding-top: 28px; }
@media (max-width: 640px) { .page-intro { padding-top: 36px; } }

/* --- buttons --- */
/*
  It was never the pill that dated these, it was the coloured glow sitting
  under it. Black pill, no shadow, no gradient.
*/
.btn {
  display: inline-block; padding: 14px 26px; border-radius: 999px;
  background: var(--text); color: var(--bg);
  font-weight: 600; text-decoration: none; font-size: 15.5px;
  border: 1px solid var(--text);
  transition: opacity .15s ease;
}
.btn:hover { opacity: 0.85; }
.btn.secondary {
  background: transparent; color: var(--text); border-color: var(--border);
}
/* On the slab the pill inverts: white fill, deep indigo text. `--slab-flat`
   rather than `--slab`, which is a gradient and cannot be a text colour, and
   not `--violet`, which in dark mode is pale enough to sit near 2:1 on
   white. */
.hero .btn { background: #fff; color: var(--slab-flat); border-color: #fff; text-decoration: none; }
.hero .btn.secondary {
  background: transparent; color: #fff; border-color: rgba(255,255,255,0.45);
}
.btn.secondary {
  background: transparent; color: var(--text);
  border-color: var(--border); box-shadow: none;
}
.btn.play { display: inline-flex; align-items: center; gap: 10px; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* --- hero --- */
/*
  THE HERO AS A SLAB OF BRAND COLOUR.

  One saturated block, edge to edge, with everything on it in white. It is
  the opposite instinct to the old treatment, which spread a weak violet
  glow across a dark page and committed to nothing. A page is allowed one
  loud moment; this is it, and everything after it can then be quiet.

  Violet rather than the reference's lime because it is already the app's
  colour -- on the icon, the buttons and the charts -- and a website whose
  brand colour is not the product's is a website for a different product.
*/
.hero {
  padding: 92px 0 88px; position: relative; overflow: hidden;
  background: var(--slab);
  color: var(--on-slab);
}
.hero h1, .hero .lead, .hero .eyebrow, .hero p { color: var(--on-slab); }
.hero .lead { color: rgba(255,255,255,0.93); }
.hero .eyebrow { color: rgba(255,255,255,0.8); }
.hero .dim, .hero .small { color: rgba(255,255,255,0.84); }
.hero a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* Lifted off the gradient rather than outlined against it. */
.hero .showcase-phone {
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.75);
}
.hero .wrap { position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
/*
  Was a violet-to-rose-to-amber gradient across the second line of the
  headline: three accent colours in four words, and the page had no
  hierarchy left afterwards. On a solid slab the headline does not need a
  second colour at all -- the slab IS the emphasis. The class stays defined
  so the markup is untouched.
*/
.gradient-text { color: inherit; }

/* --- layout helpers --- */
.split { display: grid; gap: 56px; grid-template-columns: 1fr 1fr; align-items: center; }
.split.rev > div:first-child { order: 2; }
@media (max-width: 900px) { .split, .split.rev > div:first-child { grid-template-columns: 1fr; order: 0; } }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
}
.card p:last-child { margin-bottom: 0; }

/*
  A LIST OF ARGUMENTS, NOT A WALL OF BOXES.

  The "why bother switching" section is fourteen items of two or three
  paragraphs each. A bordered card suits things you compare at a glance -- a
  pricing table, a feature matrix -- and actively hurts prose: fourteen
  borders, fourteen fills and fourteen radii, all competing with the words
  they contain, and the reader meets the packaging before the argument.

  Stripped to a rule and a heading. Two columns rather than three, because
  these are paragraphs and a 250px column turns a sentence into a column of
  four-word lines.
*/
.grid.plain { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 56px; }
.grid.plain .card {
  background: none; border: 0; border-top: 1px solid var(--border);
  border-radius: 0; padding: 26px 0 30px;
}
.grid.plain .card h3 { margin-bottom: 10px; }
/*
  Icons as marks, not tiles.

  These were colour emoji sitting on pastel squares in four rotating tints,
  which gave every card a small bright badge and made a page of them look
  like a sticker sheet. Now a line icon in the text colour, no container, no
  fill: it marks the card and then gets out of the way.
*/
.icon {
  display: flex; align-items: center;
  color: var(--text); margin-bottom: 14px;
}
.ic { width: 26px; height: 26px; display: block; }
/* The numbered steps keep a tile, because a bare digit reads as body text.
   One neutral tile, not four tinted ones. */
.icon.step {
  width: 34px; height: 34px; border-radius: 9px;
  justify-content: center;
  background: var(--bg-alt); border: 1px solid var(--border);
  font-size: 15px; font-weight: 650;
  font-family: "Inter Tight", "Inter", sans-serif;
}

/* --- phone mockup --- */
.phone { display: block; margin: 0 auto; max-width: 100%; height: auto; filter: drop-shadow(var(--shadow)); }
.phones { display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* --- pricing --- */
.price { font-size: 46px; font-weight: 640; letter-spacing: -0.04em; line-height: 1; }
.price span { font-size: 16px; font-weight: 500; color: var(--dim); letter-spacing: 0; }
ul.ticks { list-style: none; padding: 0; margin: 22px 0 0; }
ul.ticks li { padding-left: 30px; position: relative; margin-bottom: 11px; color: var(--dim); }
ul.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--lime); font-weight: 800; font-size: 17px;
}
.featured { border: 1px solid var(--violet); position: relative; }
.flag {
  position: absolute; top: -14px; right: 22px;
  background: var(--violet); color: #fff; font-size: 12px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: 6px;
}

/* --- faq --- */
details { border-bottom: 1px solid var(--border); padding: 22px 0; }
summary {
  cursor: pointer; font-weight: 600; list-style: none; font-size: 17px;
  font-family: "Inter Tight", "Inter", sans-serif;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; color: var(--violet); font-weight: 700; font-size: 22px; line-height: 1; }
details[open] summary::after { content: "−"; }
details p { margin: 14px 0 0; color: var(--dim); max-width: 70ch; }

/* --- cta --- */
/* Was a three-stop gradient. Now the same solid slab as the hero, so the
   page opens and closes on one note rather than fading out on a grey box. */
.cta {
  background:
    radial-gradient(700px 420px at 4% 30%, #2b2c6d 0%, rgba(43,44,109,0) 66%),
    radial-gradient(620px 420px at 96% 100%, #613029 0%, rgba(97,48,41,0) 64%),
    #0e1621;
  color: var(--on-slab);
  border-radius: var(--radius); padding: 64px 40px; text-align: center;
}
.cta h2 { color: var(--on-slab); }
.cta p { max-width: 52ch; margin-inline: auto; color: rgba(255,255,255,0.92); }
.cta .btn { background: #fff; color: var(--slab-flat); border-color: #fff; }

footer { border-top: 1px solid var(--border); padding: 52px 0; color: var(--dim); font-size: 15px; }
footer a { color: var(--dim); margin-right: 24px; font-weight: 500; }

/* ---- A single screenshot, framed --------------------------------------
   The six screenshots already existed and all six lived inside one rotating
   showcase, which meant five of them were invisible at any given moment and
   every other section on the page had nothing to look at. This puts one
   beside the argument it illustrates, which is how the competitors do it.

   Same frame as the showcase so the two agree: a real device edge, the app's
   own near-black behind it so any letterboxing disappears. */
.shot {
  width: 290px; max-width: 100%; flex: 0 0 auto;
  border-radius: 34px; border: 1px solid var(--border); overflow: hidden;
  background: #0b0d12; box-shadow: 0 30px 60px -24px rgba(0,0,0,.5);
}
.shot img { display: block; width: 100%; height: auto; }
.shot-col { display: flex; justify-content: center; }

/*
  INSIDE A .split, THE SHOT SPANS BOTH COLUMNS.

  Three of these sections already had two children -- the prose and a card or
  a mock -- so adding a shot made a third item in a two-column grid, and a
  third item wraps to row two, COLUMN ONE. All three sat hard against the
  left margin, 287px off centre, under a half-width gap. It looked like a
  mistake because it was one.

  Spanning the full row and centring is right rather than merely fixed: the
  screen is the summary of the whole section, not a partner to one half of
  it, and at 290px it cannot fill a column on its own anyway.
*/
.split > .shot-col { grid-column: 1 / -1; margin-top: 12px; }
/* Below the split breakpoint the phone leads, then the words. */
@media (max-width: 900px) { .shot { width: 240px; } }

/* ---- Screen showcase -----------------------------------------------------
   Real screenshots rather than a drawing: the app is the product, and a hand
   drawn approximation of it is a claim about what it looks like rather than a
   photograph of it. Six screens, cross-fading on a timer, no JavaScript.

   `contain` and not `cover`: the screens are captured at different heights and
   the most important one — the gram amounts for tonight's meals — has its
   content at the bottom, which cropping to a common ratio removes. The frame is
   the app's own near-black, so the letterboxing is invisible.               */
.showcase { display:flex; gap:48px; align-items:center; flex-wrap:wrap; justify-content:center; }
.showcase-phone {
  position:relative; width:270px; aspect-ratio:480/965; flex:0 0 auto;
  border-radius:34px; border:1px solid var(--border); overflow:hidden;
  background:#0b0d12; box-shadow:0 30px 60px rgba(0,0,0,.45);
}
.showcase-phone img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; animation:screens 24s infinite;
}
.showcase-phone img:nth-child(1) { animation-delay:0s }
.showcase-phone img:nth-child(2) { animation-delay:4s }
.showcase-phone img:nth-child(3) { animation-delay:8s }
.showcase-phone img:nth-child(4) { animation-delay:12s }
.showcase-phone img:nth-child(5) { animation-delay:16s }
.showcase-phone img:nth-child(6) { animation-delay:20s }
/* Each screen holds for roughly its four seconds, then fades over the last. */
@keyframes screens {
  0%     { opacity:0 }
  1.5%   { opacity:1 }
  15%    { opacity:1 }
  16.7%  { opacity:0 }
  100%   { opacity:0 }
}
.showcase-list { flex:1 1 300px; max-width:460px; display:grid; gap:16px; }
.showcase-list div { display:grid; gap:4px }
.showcase-list strong { color:var(--text); font-size:16px }
@media (prefers-reduced-motion: reduce) {
  /*
    Not a frozen frame.

    Showing only the first screen to anyone who has asked their system to stop
    things moving means five of the six simply do not exist for them — and on
    Windows, "animation effects off" is a common enough setting that the page
    looked broken rather than considerate. They get the same content laid out
    instead of played: a strip of all six, scrollable, nothing moving.
  */
  .showcase-phone {
    width:100%; max-width:900px; aspect-ratio:auto;
    display:flex; gap:12px; overflow-x:auto; padding-bottom:8px;
    border:0; box-shadow:none; background:transparent; border-radius:0;
  }
  .showcase-phone img {
    position:static; animation:none; opacity:1;
    width:150px; height:auto; flex:0 0 auto;
    border-radius:16px; border:1px solid var(--border);
  }
}
}

/* ---- Signup and testimonials ---------------------------------------------
   Plain form controls rather than a component library: two forms do not justify
   a framework on a page that is otherwise static HTML.                      */
.form-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px }
.field {
  flex:1 1 240px; padding:13px 15px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  font:inherit; font-size:15px;
}
.field:focus { outline:2px solid var(--violet); outline-offset:1px }
textarea.field { min-height:96px; resize:vertical; width:100% }
.form-note { margin-top:12px; min-height:20px }
.form-note.ok { color:var(--lime) }
.form-note.bad { color:var(--rose) }

/* Half steps, because "very good but not perfect" is a real answer and a
   five-point scale forces it into a lie in one direction or the other. */
.stars { display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap }
.stars input[type=range] { flex:1 1 200px; accent-color:var(--amber) }
.stars-out { font-size:22px; letter-spacing:2px; color:var(--amber); white-space:nowrap }
.stars-num { color:var(--dim); font-size:14px }

.quotes { display:grid; gap:16px; margin-top:26px }
.quote-card { padding:22px; border-radius:16px; border:1px solid var(--border); background:var(--surface) }
.quote-card blockquote { margin:0 0 10px; font-size:16px; line-height:1.6 }
.quote-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.quote-meta .who { font-weight:600 }

/* ---- The one comparison the whole product rests on ---------------------- */
.versus { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px }
@media (max-width:640px) { .versus { grid-template-columns:1fr } }
.versus > div { padding:22px; border-radius:16px; border:1px solid var(--border) }
.versus .them { background:var(--bg-alt); opacity:.75 }
.versus .us { background:var(--surface); border-color:var(--lime) }
.versus h4 { margin:0 0 12px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim) }
.versus .big { font-size:26px; font-weight:800; margin:0 }
.versus ul { margin:10px 0 0; padding:0; list-style:none; display:grid; gap:7px }
.versus li { display:flex; justify-content:space-between; gap:12px; font-size:15px }
.versus li span:last-child { font-weight:700; color:var(--lime) }

/* ---- Shopping list mock -------------------------------------------------- */
.list-mock { border:1px solid var(--border); border-radius:16px; background:var(--surface); padding:22px; }
.list-mock h4 { margin:18px 0 8px; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim) }
.list-mock h4:first-child { margin-top:0 }
.list-mock .row { display:flex; justify-content:space-between; gap:14px; padding:5px 0; font-size:15px }
.list-mock .row span:last-child { color:var(--dim); white-space:nowrap }
.list-mock .total { display:flex; justify-content:space-between; align-items:baseline;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--border); font-weight:700; font-size:17px }
.list-mock .total span:last-child { color:var(--lime) }

/* ---- Video ---------------------------------------------------------------
   A poster and a button, with the file itself served from this domain.

   Six megabytes should not be fetched by everyone who scrolls past, so nothing
   loads until the button is pressed. That started as a way to avoid YouTube's
   embed — about a megabyte of script and a set of third-party cookies for every
   visitor, watching or not — and it is still worth doing for a plain file.

   The video is self-hosted rather than embedded because YouTube auto-captions a
   film that contains no speech, and its recognition invents words out of the
   music. See the click handler for what was tried before giving up on it. */
.video-wrap { position:relative; margin-top:32px; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow); background:#0e1621 }
/* Laid over the real <video>, whose poster shows through it. */
.video-facade { position:absolute; inset:0; display:block; width:100%; height:100%;
  border:0; padding:0; cursor:pointer; background:transparent }
.video-facade::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%) }
.video-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:82px; height:58px; border-radius:14px; background:rgba(14,22,33,.72);
  display:grid; place-items:center; z-index:1; transition:background .15s ease, transform .15s ease;
  backdrop-filter:blur(2px) }
.video-facade:hover .video-play,
.video-facade:focus-visible .video-play { background:var(--rose); transform:translate(-50%,-50%) scale(1.06) }
.video-play svg { width:24px; height:24px; fill:#fff; margin-left:3px }
/* height:auto, or the height="1080" attribute on the <video> wins and the
   player is 1080px tall at any width. */
.video-wrap video, .video-wrap iframe { display:block; width:100%; height:auto; aspect-ratio:16/9; border:0;
  background:#0e1621 }
@media (max-width:560px) { .video-play { width:66px; height:48px } }