/* ==========================================================================
   MIDNIGHT - "performance data"

   A third language again:
     - hero is an asymmetric grid; the photo is a narrow column, not a wash
     - mono labels everywhere, small type against very large numerals
     - square corners, dense hairlines, table-like structures
     - levels become a comparison table rather than cards
     - pricing becomes compact rows rather than three fat cards
     - modules run as a single hairline-divided strip
   ========================================================================== */

:root { --r-card: 6px; --r-btn: 4px; }

/* ---- Type: technical ------------------------------------------------------ */

.display-1, .display-2, .display-3 { letter-spacing: -0.045em; }
.display-1 { font-size: clamp(2.5rem, 1.20rem + 5.78vw, 5rem); }

.eyebrow { letter-spacing: .28em; }
.eyebrow::before { width: 40px; height: 1px; }

.btn { border-radius: var(--r-btn); letter-spacing: .1em; font-size: var(--fs-eyebrow); }

.card, .frame, .player, .contact__item, .phone__screen { border-radius: var(--r-card); }

.card--hover:hover { transform: none; background: var(--panel-2); border-color: var(--brand-fg); }

/* Every section gets a hairline and a mono index, like a spec sheet. */
.section { border-top: 1px solid var(--edge); }
.hero { border-top: 0; }

/* ---- Hero: asymmetric, photo as a column --------------------------------- */

.hero { align-items: center; min-height: min(94svh, 900px); }

.hero__media {
  position: absolute;
  inset: 0 0 0 auto;
  /* The photo begins where the copy stops, at every width. A flat 38% is 38% of
     the VIEWPORT while the copy is 62% of the CONTAINER, and the container stops
     growing - so the two drifted apart as the screen got wider: 9px between them
     at 1280, 161px at 2560. Both branches meet exactly at --container, so max()
     picks the right one and there is no breakpoint to keep in step. */
  width: max(
    calc(38% + 0.24 * var(--gutter)),
    calc(50% - 0.12 * var(--container) + 0.24 * var(--gutter))
  );
  /* No rule down the seam. The gradient already ends the photo; a hairline on
     top of it reads as a stray divider splitting the hero in two. */
}
.hero__media::after {
  background:
    linear-gradient(90deg, var(--bg) 0%, rgb(var(--bg-rgb) / .55) 40%, rgb(var(--bg-rgb) / .3) 100%);
}
/* margin-inline:0 here defeated .container's centring, pinning the copy to
   the viewport gutter while the nav stayed on the container edge. Keep the
   container intact and constrain the COPY inside it instead. */
.hero__inner { max-width: var(--container); }
.hero__inner > *:not(.hero__media) { max-width: 62%; }
/* 62% is the column the copy sits in, and it beats the 48ch on .hero__lead in
   sections.css. That was fine while the container stopped at 1280 - the column
   came to 62 characters - but once it grows the column is the only limit and
   the sentence reaches 96. Whichever is narrower wins, so this binds on a wide
   screen and changes nothing at or below the step. */
.hero__inner > .hero__lead { max-width: min(62%, 66ch); }
.hero__title { max-width: 13ch; }

@media (max-width: 1100px) { .hero__inner > *:not(.hero__media) { max-width: 100%; } }

/* A thin rule instead of a heavy slab. */
.hero__bar { height: 4px; width: clamp(48px, 7vw, 96px); border-radius: 0; align-self: center; margin-bottom: .3em; }

.hero__include { border-left: 1px solid var(--edge); letter-spacing: .08em; }

@media (max-width: 900px) {
  .hero__media { position: absolute; inset: 0; width: 100%; border-left: 0; }
  .hero__media::after { background: linear-gradient(180deg, rgb(var(--bg-rgb) / .82), var(--bg) 88%); }
  .hero__inner { max-width: 100%; }
}

/* ---- Modules: one hairline strip, no cards ------------------------------- */

.modules__layout { grid-template-columns: minmax(0, 1fr); }
.modules__frame { display: none; }          /* the photo goes; this is a data strip */
.modules__grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-left: 1px solid var(--edge);
  border-top: 1px solid var(--edge);
}
.module { min-height: 160px; border-radius: 0; }
.module__index { font-size: 1.75rem; font-weight: 500; letter-spacing: -.04em; color: var(--brand-fg); opacity: .35; }
.module__name { font-size: var(--fs-caption); }

@media (max-width: 900px) { .modules__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .modules__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Levels: a comparison table ------------------------------------------ */

.levels__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--edge);
}
.level {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 170px) minmax(0, 140px) minmax(0, 1fr) minmax(0, 160px);
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-4);
  border: 0;
  border-bottom: 1px solid var(--edge);
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.level:hover { background: var(--panel-1); }
.level::before, .card--tone::after { display: none; }
.level__head { display: contents; }
.level__index { order: -1; opacity: .5; }
.level__name { font-size: var(--fs-h5); }
.level .card__footer {
  padding: 0; margin: 0; text-align: right;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim);
}
.level__handicap { font-size: var(--fs-small); }

@media (max-width: 900px) {
  .level { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: var(--sp-2); padding-block: var(--sp-5); }
  .level__head { display: contents; }
  .level__name, .level__handicap, .level .card__body, .level .card__footer { grid-column: 2; text-align: left; }
}

/* ---- Pricing: compact rows ------------------------------------------------ */

.pricing__grid { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--edge); }
.plan-card {
  display: grid;
  /* The price column is 200px rather than 160px because not every price is a
     figure: "Complimentary" is one unbreakable word, and at 160px it ran past
     the column into the description beside it. */
  grid-template-columns: minmax(0, 220px) minmax(0, 200px) minmax(0, 1fr) minmax(0, 190px);
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-4);
  border: 0;
  border-bottom: 1px solid var(--edge);
  border-radius: 0;
  background: transparent;
}
.plan-card:hover { background: var(--panel-1); }
.plan-card::before { display: none; }
.plan-card--featured { background: rgb(var(--brand-rgb) / .07); transform: none; box-shadow: none; }
.plan-card--featured::after {
  position: static; translate: none;
  justify-self: start; align-self: start;
  margin-bottom: var(--sp-2);
}
.plan-card__tier { grid-row: 1; }
.plan-card__name { grid-column: 1; grid-row: 1; font-size: var(--fs-h5); }
.plan-card__price { grid-column: 2; border: 0; padding: 0; }
.plan-card__body { grid-column: 3; font-size: var(--fs-caption); }
.plan-card .ticks { display: none; }        /* the row is a summary; detail lives in the FAQ */
.plan-card .card__footer { grid-column: 4; padding: 0; margin: 0; }

@media (max-width: 1040px) {
  .plan-card { grid-template-columns: minmax(0, 1fr) minmax(0, 190px); row-gap: var(--sp-3); }
  .plan-card--featured { grid-column: auto; order: 0; margin: 0; }
  .plan-card__name  { grid-column: 1; }
  .plan-card__price { grid-column: 1; }
  .plan-card__body  { grid-column: 1; }
  .plan-card .card__footer { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}
@media (max-width: 620px) {
  .plan-card { grid-template-columns: minmax(0, 1fr); }
  .plan-card .card__footer { grid-column: 1; grid-row: auto; }
}

/* ---- Stats and numerals carry the theme ---------------------------------- */

.stat__value { font-size: clamp(2.75rem, 1.9rem + 3.4vw, 4.25rem); letter-spacing: -.05em; }
.perf__stats { border-top: 1px solid var(--edge); }

/* ---- Blog: hairline rows over the photos --------------------------------- */

.post { border-radius: var(--r-card); }
.post__frame { border-radius: 0; }