/* Fives — Eton Fives vs Rugby Fives page styles. Mobile-first.
   A reading/reference page: text-led hero, a highlighted short-answer block,
   a side-by-side comparison table, prose sections and a closing CTA.
   Visual system reused from Spirit of Fives / History (cream surfaces,
   hairline rules, warm-near-black ink). Namespace prefix: "vs-". */

html, body { margin: 0; padding: 0; }
body {
  background: var(--fives-bg);
  color: var(--fives-text);
  font-family: var(--fives-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vs-app { min-height: 100vh; }

.vs-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── Masthead ("The Full Stop.", M1) ───
   The hero is now the shared system in masthead.css; only the meta row's
   green dots are page business.
   The plate is dropped down its column on purpose. Eton's front-wall line is
   the declared strike line, and it is the TOP line of a court plan — with the
   plate top-aligned it sat above the H1's period and the ball fell instead of
   lobbing. Setting the plate down puts that line just below the period, which
   is the only way to keep the spec's strike line AND the spec's lob. */
.mh--vs { --mh-plate-h: 306px; }
@media (min-width: 1180px) { .mh--vs .mh-plate { margin-top: 168px; } }
.mh--vs .mh-meta { gap: 10px 22px; font-size: 13px; }
.mh--vs .mh-meta li { display: inline-flex; align-items: center; gap: 8px; }
.mh--vs .mh-meta li + li::before { content: none; margin: 0; }
.vs-dot {
  width: 6px; height: 6px; border-radius: 3px;
  background: var(--fives-primary);
}

/* ─── Short answer ─── */
.vs-answer-section {
  border-top: 1px solid var(--fives-line);
  background: var(--fives-bg-2);
}
.vs-answer {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 24px 48px;
}
@media (min-width: 760px) {
  .vs-answer { padding: 56px 40px 64px; }
}
.vs-answer-eyebrow {
  font-size: 12px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--fives-primary);
  margin: 0 0 12px;
}
.vs-answer-lead {
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.6;
  color: var(--fives-text);
  margin: 0;
  text-wrap: pretty;
}

/* ─── Comparison table ─── */
.vs-table-section {
  background: var(--fives-bg);
  border-top: 1px solid var(--fives-line);
}
.vs-table-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 48px 24px 24px;
}
@media (min-width: 760px) {
  .vs-table-inner { padding: 64px 40px 32px; }
}
.vs-h2 {
  font-family: var(--fives-display);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.7px;
  line-height: 1.12;
  margin: 0 0 18px;
  color: var(--fives-text);
  text-wrap: balance;
}
.vs-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--fives-line);
  border-radius: var(--fives-r-md);
  background: #fff;
}
.vs-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.55;
}
.vs-table thead th {
  font-family: var(--fives-body);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--fives-primary);
  text-align: left;
  padding: 14px 18px 12px;
  border-bottom: 2px solid var(--fives-primary);
  background: var(--fives-bg-2);
}
.vs-th-note {
  display: block;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: none;
  color: var(--fives-muted);
  margin-top: 2px;
}
.vs-table tbody th {
  font-family: var(--fives-body);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--fives-muted);
  text-align: left;
  vertical-align: top;
  padding: 14px 18px;
  white-space: nowrap;
}
.vs-table tbody td {
  color: var(--fives-text);
  vertical-align: top;
  padding: 14px 18px;
  max-width: 340px;
}
.vs-table tbody tr { border-top: 1px solid var(--fives-line); }
.vs-table tbody tr:first-child { border-top: none; }

/* ─── Prose ─── */
.vs-prose-section { background: var(--fives-bg); }
.vs-prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 56px;
}
@media (min-width: 760px) {
  .vs-prose { padding: 40px 40px 80px; }
}
.vs-prose .vs-h2 { margin-top: 36px; }
.vs-prose > div:first-child .vs-h2 { margin-top: 0; }
.vs-prose p {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--fives-text);
  margin: 0 0 22px;
  text-wrap: pretty;
}
.vs-prose a.fv-link {
  color: var(--fives-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--fives-line);
  transition: border-color var(--fives-t-quick), color var(--fives-t-quick);
}
.vs-prose a.fv-link:hover {
  color: var(--fives-primary-700);
  border-color: var(--fives-primary);
}

/* ─── Pull-quote ─── */
.vs-pull {
  margin: 40px 0;
  padding: 6px 0 6px 22px;
  border-left: 3px solid var(--fives-accent);
}
.vs-pull p {
  font-family: var(--fives-display);
  font-size: clamp(21px, 2.8vw, 27px);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.5px;
  font-style: italic;
  color: var(--fives-text);
  margin: 0;
  text-wrap: balance;
}

/* ─── Closing CTA ─── */
.vs-foot-section {
  background: var(--fives-bg-2);
  border-top: 1px solid var(--fives-line);
}
.vs-foot-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}
@media (min-width: 760px) {
  .vs-foot-inner { padding: 64px 40px 88px; }
}
.vs-foot-rule {
  width: 48px; height: 2px;
  background: var(--fives-accent);
  margin: 0 0 22px;
}
.vs-foot-note {
  font-size: 16px;
  line-height: 1.6;
  color: var(--fives-text);
  margin: 0 0 26px;
  max-width: 52ch;
  text-wrap: pretty;
}
.vs-foot-links {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center;
}
.vs-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fives-body);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  color: var(--fives-primary);
  padding: 10px 16px;
  border: 1px solid var(--fives-primary);
  border-radius: var(--fives-r-sm);
  transition: background var(--fives-t-quick), color var(--fives-t-quick),
              transform var(--fives-t-standard) var(--fives-e-rebound);
}
.vs-link:hover {
  background: var(--fives-primary);
  color: #fff;
}
.vs-link--ghost {
  color: var(--fives-muted);
  border-color: var(--fives-line);
}
.vs-link--ghost:hover {
  background: var(--fives-bg);
  color: var(--fives-text);
}
.vs-link:active { transform: scale(0.96); transition-duration: var(--fives-t-instant); transition-timing-function: var(--fives-e-settle); }

@media (prefers-reduced-motion: reduce) {
  .vs-link:active { transform: none; }
}