/* R59 installation guide. Existing Outfit, navy, court blue and lime tokens.
   Static document flow and fixed line lengths keep reading stable during loading.
   Use the same preloaded Outfit file with an optional swap. A late font keeps the
   metric matched fallback for this visit instead of reflowing the guide. */
@font-face {
  font-family: "Outfit Setup";
  src: url("assets/fonts/outfit-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: optional;
}
.club-setup-page { --pc-font: "Outfit Setup", "Outfit Fallback", Arial, sans-serif; --setup-icon-size: 40px; --setup-icon-gap: 16px; --setup-gutter: calc(var(--setup-icon-size) + var(--setup-icon-gap)); background: var(--navy); }
/* R61: the clubs and pricing navy tiles, lime line work and soft lime ring.
   Fixed icon columns reserve their space before the font or SVG is painted. */
.setup-icon { display: block; flex: 0 0 auto; box-sizing: border-box; width: var(--setup-icon-size); height: var(--setup-icon-size); padding: 8px; border-radius: 11px; background: #0b1226; box-shadow: 0 0 0 1px #c8e84a4d, 0 0 0 4px #c8e84a1a; fill: none; stroke: var(--lime); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.setup-body h2 { display: flex; align-items: center; align-self: start; gap: var(--setup-icon-gap); }
.setup-body h2 > .setup-icon { width: 48px; height: 48px; padding: 10px; border-radius: 13px; }
.setup-body h2 > span, .setup-label > span, .setup-item > span, .setup-steps li > div { min-width: 0; }
.setup-label { display: flex; align-items: center; gap: var(--setup-icon-gap); }
.setup-item { display: grid; grid-template-columns: var(--setup-icon-size) minmax(0, 1fr); gap: var(--setup-icon-gap); align-items: start; }
.club-setup-page .setup-intro { padding-block: 40px 48px; }
.setup-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: underline; text-underline-offset: 5px; }
.setup-back:hover { color: var(--ink); }
.club-setup-page h1 { margin-top: 24px; font-size: clamp(40px, 5vw, 72px); line-height: 1.08; letter-spacing: -0.035em; text-wrap: initial; }
.club-setup-page h1 > span { display: block; width: fit-content; max-width: 100%; }
.club-setup-page .hl-mark { position: relative; padding-bottom: 18px; }
.club-setup-page .title-swoosh { position: absolute; inset: auto 0 0; width: 100%; height: 16px; overflow: visible; fill: none; stroke: var(--lime); stroke-width: 7; stroke-linecap: round; pointer-events: none; }
.setup-lead { margin-top: 24px; max-width: 36em; color: var(--muted); font-size: 20px; line-height: 1.6; }
.setup-contents { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 32px; }
.setup-contents a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 6px; }
.setup-contents a:hover { color: var(--lime); }
.setup-body { padding-bottom: 64px; }
.setup-essentials { padding: 32px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
.club-setup-page h2 { font-size: clamp(26px, 2.7vw, 36px); line-height: 1.15; }
.club-setup-page h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; }
.setup-needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 28px 0 0; }
.setup-needs > div { position: relative; border-top: 2px solid var(--lime); padding: 20px 0 0 var(--setup-gutter); }
.setup-needs dt > .setup-icon { position: absolute; top: 20px; left: 0; }
.setup-needs dt { color: var(--ink); font-size: 20px; font-weight: 700; }
.setup-needs dd { margin: 8px 0 0; color: var(--muted); line-height: 1.65; }
.setup-note { color: var(--muted); font-size: 16px; line-height: 1.65; }
.setup-note strong { font-weight: 500; color: var(--ink); }
.setup-essentials > .setup-note { margin-top: 28px; }
.setup-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 32px 72px; padding-block: 56px; border-bottom: 1px solid var(--line); }
.setup-copy { min-width: 0; max-width: 44em; color: var(--muted); font-size: 17px; line-height: 1.65; }
.setup-copy h3 { color: var(--ink); }
.setup-copy > h3 + p { margin-top: 16px; }
.setup-copy > .setup-label + p:not(.setup-item) { margin-left: var(--setup-gutter); }
.setup-copy > .setup-item + .setup-item { margin-top: 24px; }
.setup-copy > p + h3 { margin-top: 32px; }
.setup-facts { margin: 28px 0; display: grid; gap: 20px; }
.setup-facts > div { position: relative; min-height: var(--setup-icon-size); padding-left: var(--setup-gutter); }
.setup-facts dt > .setup-icon { position: absolute; top: 0; left: 0; }
.setup-facts dt { color: var(--ink); font-weight: 600; }
.setup-facts dd { margin: 4px 0 0; color: var(--muted); }
.setup-time { color: var(--ink); font-size: 22px; line-height: 1.45; font-weight: 600; }
.setup-steps { padding-left: 24px; margin: 28px 0; display: grid; gap: 28px; }
.setup-steps li { position: relative; padding-left: calc(var(--setup-gutter) + 8px); min-height: var(--setup-icon-size); }
.setup-steps li > .setup-icon { position: absolute; top: 0; left: 8px; }
.setup-steps li::marker { color: var(--lime); font-weight: 700; }
.setup-steps p { margin-top: 8px; }
.club-setup-page .text-link { min-height: 44px; text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 5px; }
.setup-offer { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 36px; margin-top: 48px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
.setup-offer > div { max-width: 40em; min-width: 0; }
.setup-offer h2 + p { color: var(--lime); font-size: 20px; font-weight: 600; margin-top: 16px; }
.setup-offer-detail { color: var(--muted); line-height: 1.65; }
.setup-offer .text-link { margin-top: 12px; }
.setup-offer > .button-dark { flex-shrink: 0; }
@media (max-width: 860px) {
  .club-setup-page .setup-intro { padding-block: 32px 40px; }
  .setup-section { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 40px; }
  .setup-needs { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .setup-offer { flex-direction: column; align-items: flex-start; }
  /* This title has intentional lines. Keep the shared squiggle in its reserved lane. */
  body.club-setup-page main h1 .hl-mark { display: block; padding-bottom: 18px; background: none; }
  body.club-setup-page main h1 .hl-mark > .title-swoosh { display: block; }
}
@media (max-width: 430px) {
  .club-setup-page h1 { font-size: clamp(30px, 7.5vw, 33px); }
  .setup-lead { font-size: 18px; }
  .setup-contents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .setup-contents a { font-size: 16px; line-height: 1.4; }
  .setup-essentials, .setup-offer { padding: 24px 20px; }
  .setup-offer > .button-dark { width: 100%; padding-inline: 12px; }
  .setup-copy { font-size: 16px; }
  .club-setup-page { --setup-icon-gap: 12px; }
  .setup-body h2 > .setup-icon { width: 40px; height: 40px; padding: 8px; border-radius: 11px; }
  .setup-steps { padding-left: 20px; }
  .setup-steps li { padding-left: calc(var(--setup-gutter) + 4px); }
  .setup-steps li > .setup-icon { left: 4px; }
  .setup-body { padding-bottom: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.club-setup-page) { scroll-behavior: auto; }
}