/* For clubs, October 13, 2026. The round 22 hero crop keeps the electrical box outside the image.
   Mr. Niaki's latest notes use Install. Scan. Book. with three equal photo frames and a navy
   benefits band with lime accents. Preserve the shared Outfit, navy, court blue and lime design system. */
.clubs-1013 { --warm: #f4f2eb; --warm-ink: #0b1226; --warm-muted: #4b5570; --warm-body: #2a3350; --warm-line: rgba(11, 18, 38, 0.14); --court: #111d36; --court-lit: #172746; --card: #0f192f; --stage: #070b14; --quiet: #a8b5ca; --soft: #d5deee; --glass: rgba(11, 18, 38, 0.82); background: var(--navy); }
html, body { scroll-snap-type: none; }
.clubs-1013 main { overflow: clip; }
.clubs-1013 button { font-family: inherit; }
.clubs-1013 img { max-width: 100%; }
.clubs-1013 .icon { flex-shrink: 0; }
.clubs-1013 .section-title { font-weight: 800; letter-spacing: -0.03em; }
.clubs-1013 .band { padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.clubs-1013 .band-title { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; max-width: 18ch; text-wrap: balance; }
.clubs-1013 .band-deck { margin-top: 12px; color: var(--muted); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; max-width: 56ch; text-wrap: pretty; }
.clubs-1013 .band-head { display: flex; justify-content: space-between; align-items: end; gap: 16px 40px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 36px); }
.clubs-1013 .band-head .band-deck { margin-top: 0; }
/* The short qualifiers the law needs next to a claim: 13 px, the page's quiet ink, links in ink with a lime line. */
.clubs-1013 .fine { color: var(--quiet); font-size: 13px; line-height: 1.6; max-width: 100ch; text-wrap: pretty; }
.clubs-1013 .fine a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 3px; }
.clubs-1013 .fine a:hover { color: var(--lime); }
/* Anchors other pages land on (#plans) sit clear of the sticky header. */
.clubs-1013 [id] { scroll-margin-top: 88px; }

/* The curved stroke sits in its own space below the words. Long phrases may wrap on narrow screens. */
.hl-mark { position: relative; display: inline-block; max-width: 100%; padding-bottom: 18px; background: transparent; color: inherit; vertical-align: baseline; }
.title-swoosh { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 14px; overflow: visible; fill: none; stroke: var(--lime); stroke-width: 7; stroke-linecap: round; pointer-events: none; }
.hl-mark.hl-lime { color: var(--lime); }

/* The icon system: a 24 grid, 1.75 lime strokes, round caps, on a 48 px navy tile with a soft lime halo. */
.pillar-icon { flex: 0 0 auto; box-sizing: border-box; width: 48px; height: 48px; padding: 10px; border-radius: 13px; background: var(--warm-ink); box-shadow: 0 0 0 1px #c8e84a4d, 0 0 0 5px #c8e84a1a; fill: none; stroke: var(--lime); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pillar-icon .pillar-dot { fill: var(--lime); stroke: none; }
.pillar-text { min-width: 0; }
.stage-note { margin: 12px 0 0; color: var(--quiet); font-size: 12px; line-height: 1.5; text-wrap: pretty; }
/* Media frames: one corner radius (16 px) and one shadow for every large frame on the page, as on the System and
   Academy pages. */
.media-frame { position: relative; overflow: hidden; border-radius: 16px; background: var(--stage); box-shadow: inset 0 0 0 1px #ffffff14, 0 24px 60px #0005; }
.media-frame > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* 1. Hero: the club photograph fills the whole hero behind the headline. The backdrop is absolutely placed, so
   the hero's height comes from its words and the facts bar alone and nothing moves when the photo arrives. The
   overlay dims the photo from the left (where the headline column sits on near solid navy) to a lighter right
   (where the palms and the court show through), and fades it into the page navy at the foot. The headline block
   sits left, with the Club log in pill directly above the H1, then the line and the two doors. The four facts
   sit in a glass bar at the foot of the photo: a lime icon tile and the lime label on one line, the fact beneath, each
   on its own column with a hairline between. The approved Pexels photograph has a dedicated phone export, with both
   exact exports recorded as cleared and the retired Alamy comp retained only in the review archive.
   Round 73: the approved Pexels desktop crop keeps the existing overlay and position. A dedicated portrait crop
   from the original keeps both players in frame on phones, with its full width visible and heads above the copy. */
.clubs-1013 .hero { position: relative; isolation: isolate; overflow: hidden; padding: 0; background: var(--navy); }
.hero-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--stage); }
.hero-backdrop > picture { display: block; width: 100%; height: 100%; }
.hero-backdrop .hero-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #090d1af2 0%, #090d1ae6 30%, #090d1ab3 56%, #090d1a5c 100%), linear-gradient(180deg, #090d1a80 0%, #090d1a00 20%, #090d1a00 70%, var(--navy) 100%); }
/* A soft lime light low on the left, behind the facts bar, for depth. */
.hero-shell { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: clamp(600px, 78vh, 820px); padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(36px, 4.5vw, 56px); }
.hero-shell::before { content: ""; position: absolute; left: -8%; bottom: -14%; z-index: -1; width: 46%; height: 52%; border-radius: 50%; background: radial-gradient(closest-side, #c8e84a24 0%, #c8e84a0a 55%, transparent 100%); pointer-events: none; }
.hero-stage { display: grid; align-content: center; padding-block: clamp(28px, 4vw, 56px) clamp(40px, 6vw, 80px); }
.hero-intro { max-width: 780px; margin: 0; text-align: left; }
/* The pill sits directly above the H1, its own sibling, as the login contract asks on every page but the Academy.
   On the photograph it carries a dark fill so its words stay readable whatever sits behind. */
.hero-intro .hero-login-pill { margin-bottom: 22px; background: #090d1a8c; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero h1 { max-width: 16ch; margin-inline: 0; font-size: clamp(44.8px, 5.76vw, 83.2px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; text-shadow: 0 2px 24px #090d1a80; }
/* The curvy underline scales with the headline: a heavier stroke and more room than under a band title. */
.hero h1 .hl-mark { padding-bottom: calc(clamp(14px, 1.4vw, 20px) + 4px); }
.hero h1 .title-swoosh { height: clamp(14px, 1.4vw, 20px); stroke-width: 9; }
.hero-line { margin: 18px 0 0; max-width: 46ch; color: var(--soft); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; text-wrap: pretty; }
.hero .actions { justify-content: flex-start; gap: 10px 14px; margin-top: 28px; }
/* The glass bar: four facts on the photograph (round 80, Oct 15, 2026, Mr. Niaki: bookings, the free 4K camera, the
   players and the Academy, tighter and closer together), blurred navy behind them, a lime hairline along the top. Each
   fact: the 36 px lime icon tile and the lime label on one line, the fact beneath across the whole column. */
.hero-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; border-radius: 16px; background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 #c8e84a73, inset 0 0 0 1px #ffffff1a, 0 24px 60px #0006; }
.hero-facts > div { min-width: 0; padding: clamp(14px, 1.5vw, 20px) clamp(14px, 1.6vw, 22px); }
.hero-facts > div + div { box-shadow: inset 1px 0 0 #ffffff14; }
.hero-facts dt { display: flex; align-items: center; gap: 10px; color: var(--lime); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-facts dd { margin: 10px 0 0; color: var(--ink); font-size: clamp(14px, 1.1vw, 16px); font-weight: 600; line-height: 1.4; text-wrap: pretty; }
.fact-icon { box-sizing: border-box; width: 36px; height: 36px; flex: 0 0 36px; padding: 8px; border-radius: 10px; background: var(--warm-ink); box-shadow: 0 0 0 1px #c8e84a4d; color: var(--lime); }

/* 2. Install. Scan. Book. (round 38, Oct 14, 2026, Mr. Niaki: a three word title, the steps written to the club, and a
   layout that lines up). Three equal columns, one per step, as an ordered list. Each column opens with the step numeral
   on the page's navy tile with the lime ring (the hero facts and the dashboard feature tiles use the same tile) beside
   the step word, the two sentences run the full column width beneath, and the 4 by 3 photograph closes the column,
   taller than the earlier 16 by 10 frame at the same column width. The caption and photo rows share one subgrid, so the
   three photographs sit on one line however the sentences wrap. The title keeps to one line (no 12 ch cap). The sign
   shows its complete composite scene, and the match still is framed from its left edge so all four players stay inside
   the 4 by 3 crop. Round 54 (Oct 14, 2026): the Book photo is the Pexels 5357831 phone at the fence frame, exported
   at the frame's own 4 by 3, so it needs no object position of its own. */
.install-band { background: linear-gradient(180deg, var(--court) 0%, #0e182e 100%); }
.install-band .band-title { max-width: none; }
.install-spread { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 22px clamp(18px, 2.2vw, 28px); }
.install-print { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 22px; margin: 0; min-width: 0; }
.install-caption { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; }
.install-label { display: flex; align-items: center; gap: 14px; margin: 0; }
.install-step { display: grid; place-items: center; box-sizing: border-box; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: var(--warm-ink); box-shadow: 0 0 0 1px #c8e84a4d; color: var(--lime); font-size: 14px; font-weight: 800; letter-spacing: 0.02em; line-height: 1; }
.install-caption strong { color: var(--ink); font-size: clamp(21px, 1.8vw, 25px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.install-text { margin: 0; color: var(--muted); font-size: clamp(16px, 1.2vw, 17px); line-height: 1.55; text-wrap: pretty; }
.install-frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: var(--stage); box-shadow: inset 0 0 0 1px #ffffff14, 0 24px 60px #0005; }
.install-frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* 2b. PadelCue versus a regular recording camera (round 58, Oct 14, 2026, Mr. Niaki: the two card duel layout he
   likes, made our own; round 80, Oct 15, 2026: a tile per row and a fair mix of marks). On the page navy between
   the steps and the warm benefits band. Two cards side by side with a round lime VS badge on the seam. Each card is a
   column: a header bar naming the side with one short line beneath (the brand navy gradient with a lime hairline for
   PadelCue, a muted grey for regular cameras), then the 16 by 9 frame (our camera opening and closing, the System page
   loop as a managed muted loop with its own Pause control under the founder rule, against three real photographs of
   plain security cameras). Then the rows as a fixed three column table: the feature on the page navy, opened by its
   36 px navy icon tile with the lime ring (the same tile as the install steps and the dashboard features), then the
   PadelCue column and the regular column under their own visible labels (the navy gradient and the grey of the card
   heads), their gap drawn by transparent inner borders. Three marks: a navy check on a lime disc (included), an amber
   half disc in an amber ring (partly, or it depends on the camera, with the short fact beside it) and a rose cross in
   a rose ring (not included). A legend under the table names the three. Contrast: navy on the lime disc 11 to 1,
   amber and rose on the navy circle over 6 to 1, the quiet fact 8 to 1, past the AA bar for icons and text. Every
   frame keeps a fixed ratio, the film its poster and the header its height, so nothing moves when the film or the
   photo arrives. Under 700 px the cards stack with the badge between them, the table keeps its three columns with
   each mark above its fact, and under 430 px the feature tile sits above its words. */
.versus-band { --versus-gap: clamp(16px, 2vw, 24px); --versus-head: 72px; --versus-us: #111c35; --versus-them: #14181f; --versus-rose: #ff5d7d; --versus-amber: #ffc857; --versus-line: #ffffff14; background: var(--navy); }
.versus-band .band-title { max-width: 30ch; }
.versus-duel { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--versus-gap); }
.versus-card { margin: 0; min-width: 0; overflow: hidden; border-radius: 16px 16px 0 0; background: var(--versus-them); box-shadow: inset 0 0 0 1px var(--versus-line); }
.versus-card-padelcue { background: var(--versus-us); }
.versus-card-head { display: grid; align-content: center; gap: 2px; min-height: var(--versus-head); padding: 10px clamp(16px, 1.8vw, 24px); background: #3d4452; color: var(--ink); }
.versus-card-padelcue .versus-card-head { background: linear-gradient(115deg, #0b1226, #2a3e78); box-shadow: inset 0 1px 0 #c8e84a73; }
.versus-card-head strong { font-size: clamp(17px, 1.4vw, 20px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.versus-card-padelcue .versus-card-head strong { color: var(--lime); }
.versus-card-head span { color: #d5dae3; font-size: 14px; font-weight: 500; line-height: 1.3; }
.versus-card-padelcue .versus-card-head span { color: var(--soft); }
/* The round VS badge sits on the seam, centred on the two header bars. It is decoration (the heading says versus). */
.versus-badge { position: absolute; left: 50%; top: calc(var(--versus-head) / 2); z-index: 4; display: grid; place-items: center; width: 56px; height: 56px; border: 5px solid var(--navy); border-radius: 50%; background: var(--lime); color: var(--warm-ink); font-size: 15px; font-weight: 800; letter-spacing: 0.04em; line-height: 1; transform: translate(-50%, -50%); box-shadow: 0 10px 30px #0008; pointer-events: none; }
.versus-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; margin: clamp(12px, 1.2vw, 16px); border-radius: 12px; background: var(--stage); box-shadow: inset 0 0 0 1px var(--versus-line); }
.versus-frame-camera { background: #0a111c; box-shadow: inset 0 0 0 1px #ffffff1a; }
.versus-frame-camera::before { content: ""; position: absolute; inset: 8% 10%; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, #2a3e7880 0%, #2a3e7826 55%, transparent 100%); filter: blur(18px); pointer-events: none; }
.versus-frame-camera > video { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%); mask-composite: intersect; }
.versus-frame-regular { background: #ecece8; }
.versus-frame-regular > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* Each frame names what it shows (the render, the stock photographs) in the same pill as the film's control. */
.versus-note { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; min-height: 32px; padding: 5px 11px; border: 1px solid #ffffff3d; border-radius: 999px; background: #091326e6; color: var(--ink); font-size: 12px; font-weight: 650; line-height: 1.2; letter-spacing: 0.01em; pointer-events: none; }
/* The camera film's own Pause and Play control, as on the System page (home-1011.css is not loaded here). */
.versus-band .stage-control { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 60px; min-height: 32px; padding: 5px 11px; border: 1px solid #ffffff3d; border-radius: 999px; background: #091326e6; color: var(--ink); font: inherit; font-size: 12px; font-weight: 650; line-height: 1.2; letter-spacing: 0.01em; cursor: pointer; transition: border-color 0.2s; }
.versus-band .stage-control > span { width: 36px; text-align: center; }
.versus-band .stage-control:hover { border-color: var(--lime); }
.versus-band .stage-control:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
/* The rows: a fixed three column table under the cards. The feature column sits on the page navy with its icon tile,
   and the two mark columns carry their own labels in the colours of the card heads above. */
.versus-table-wrap { margin-top: var(--versus-gap); }
.versus-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.versus-table th, .versus-table td { background-clip: padding-box; vertical-align: middle; }
.versus-table .versus-col { padding: 12px 16px; border-top: 1px solid var(--versus-line); font-size: 13px; font-weight: 800; letter-spacing: 0.05em; line-height: 1.25; text-transform: uppercase; text-align: center; }
.versus-table .versus-col.versus-feature-col { width: 46%; padding: 0; border: 0; }
.versus-table .versus-col.versus-us { width: 27%; border-left: 1px solid var(--versus-line); border-right: calc(var(--versus-gap) / 2) solid transparent; border-top-left-radius: 16px; background: linear-gradient(115deg, #0b1226, #2a3e78); color: var(--lime); }
.versus-table .versus-col.versus-them { width: 27%; border-left: calc(var(--versus-gap) / 2) solid transparent; border-right: 1px solid var(--versus-line); border-top-right-radius: 16px; background: #3d4452; color: var(--ink); }
.versus-table tbody th, .versus-table tbody td { padding: 10px 16px; border-top: 1px solid #ffffff12; color: var(--ink); font-size: clamp(15px, 1.15vw, 17px); font-weight: 600; line-height: 1.35; text-align: left; text-wrap: pretty; }
.versus-table tbody .versus-feature { padding: 8px 20px 8px 0; border-top-color: var(--versus-line); }
.versus-table tbody .versus-us { border-left: 1px solid var(--versus-line); border-right: calc(var(--versus-gap) / 2) solid transparent; background: var(--versus-us); }
.versus-table tbody .versus-them { border-left: calc(var(--versus-gap) / 2) solid transparent; border-right: 1px solid var(--versus-line); background: var(--versus-them); }
.versus-table tbody tr:last-child > th, .versus-table tbody tr:last-child > td { border-bottom: 1px solid var(--versus-line); }
.versus-table tbody tr:last-child > .versus-us { border-bottom-left-radius: 16px; }
.versus-table tbody tr:last-child > .versus-them { border-bottom-right-radius: 16px; }
.versus-cellbox { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.versus-cell > .versus-cellbox { justify-content: center; text-align: center; }
.versus-feature-icon { box-sizing: border-box; flex: 0 0 36px; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--warm-ink); box-shadow: 0 0 0 1px #c8e84a4d; color: var(--lime); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.versus-text, .versus-value { min-width: 0; }
.versus-value { color: var(--quiet); font-size: clamp(14px, 1.05vw, 15px); font-weight: 500; line-height: 1.35; }
.versus-icon { flex: 0 0 28px; display: block; box-sizing: border-box; width: 28px; height: 28px; padding: 5px; border-radius: 50%; }
.versus-yes .versus-icon { background: var(--lime); color: var(--warm-ink); }
.versus-part .versus-icon { padding: 4px; border: 1px solid var(--versus-amber); background: var(--versus-them); color: var(--versus-amber); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.versus-part .versus-icon .versus-half { fill: currentColor; stroke: none; }
.versus-no .versus-icon { border: 1px solid var(--versus-rose); background: var(--versus-them); color: var(--versus-rose); fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* The legend: the three marks named once, under the table, in the quiet ink. */
.versus-legend { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: 14px 0 0; padding: 0; color: var(--quiet); font-size: 13px; line-height: 1.4; }
.versus-legend li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.versus-legend .versus-icon { flex-basis: 22px; width: 22px; height: 22px; padding: 4px; }
.versus-legend .versus-part .versus-icon, .versus-legend .versus-no .versus-icon { padding: 3px; }
.versus-band .versus-fine { margin-top: 16px; }
/* 3. What your club gets, on warm white: six cards, each opened by its lime line icon on a navy tile. Lime
   strokes on the warm paper would wash out, so the tile carries the navy and the lime stays crisp. */
.benefits-band { background: var(--warm); color: var(--warm-ink); border-top: 0; color-scheme: light; }
.benefits-band .section-title { color: var(--warm-ink); max-width: 20ch; }
.benefits-band .band-deck { color: var(--warm-muted); }
.benefit-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(16px, 2vw, 24px); }
.benefit-card { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: clamp(22px, 2.4vw, 30px); border-radius: 16px; background: #fffdf8; box-shadow: inset 0 0 0 1px var(--warm-line), 0 18px 44px #0b122614; }
.benefit-card .pillar-text { margin: 0; color: var(--warm-body); font-size: clamp(16px, 1.25vw, 18px); font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; text-wrap: pretty; }
.benefit-card strong { display: block; margin-bottom: 6px; color: var(--warm-ink); font-size: clamp(19px, 1.6vw, 23px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.benefit-card a { color: var(--warm-ink); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.benefit-card a:hover { color: var(--blue); }
.benefits-band .club-footnote { margin-top: 22px; color: var(--warm-muted); font-size: 12px; line-height: 1.6; }
/* The link to the figure's basis on legal.html sits right under the footnote, in the same quiet ink. On the warm
   paper the link is warm ink with the lime line, as in the cards, since the page ink would vanish here. */
.benefits-band .club-footnote-link { margin-top: 6px; color: var(--warm-muted); font-size: 12px; line-height: 1.6; }
.clubs-1013 .benefits-band .fine a { color: var(--warm-ink); text-decoration-color: var(--lime); text-decoration-thickness: 2px; }
.clubs-1013 .benefits-band .fine a:hover { color: var(--blue); }
.benefits-band :focus-visible { outline-color: var(--warm-ink); }

/* 4. Every highlight markets your club: four phone shaped cards, each a 9 by 16 still from our reels inside a
   dark bezel with the island at the top, on navy, and no caption beneath the photo. The still
   carries its own P badge and shot title, so the card adds nothing over the picture. Round 43: each card
   uses 85 percent of its grid track, centred, keeping equal gaps and the reserved screen ratio at every width. */
.highlights-band { background: var(--navy); }
.highlight-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
.highlight-card { min-width: 0; width: 85%; justify-self: center; }
.phone { position: relative; padding: 9px; border-radius: 34px; background: linear-gradient(180deg, #141c30 0%, #070b14 100%); box-shadow: inset 0 0 0 1px #ffffff24, 0 30px 70px #0007; }
.phone-island { position: absolute; top: 18px; left: 50%; z-index: 2; width: 28%; height: 13px; transform: translateX(-50%); border-radius: 999px; background: var(--stage); box-shadow: inset 0 0 0 1px #ffffff14; pointer-events: none; }
.phone-screen { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 26px; background: var(--stage); }
.phone-screen > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.highlights-band .fine { margin-top: 18px; }

/* 5. Your club. Your dashboard, on court blue: the example screen in a 16 px frame, eight features as tiles,
   one short qualifier with the link to the installation details. */
.dashboard-band { background: var(--court); }
.club-dashboard-preview { margin: 0; }
.club-dashboard-window { position: relative; aspect-ratio: 1440 / 1000; overflow: hidden; border-radius: 16px; background: #f6f7fb; box-shadow: 0 24px 60px #0006, inset 0 0 0 1px #ffffff1f; }
.club-dashboard-window img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.dashboard-band .stage-note { text-align: center; }
.club-feature-grid { list-style: none; margin: clamp(26px, 3.2vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px clamp(12px, 1.6vw, 20px); }
.club-feature-grid li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px #ffffff14; color: var(--ink); font-size: 15px; font-weight: 650; line-height: 1.3; }
.club-feature-grid .icon { box-sizing: border-box; width: 36px; height: 36px; flex-basis: 36px; padding: 8px; border-radius: 10px; background: var(--warm-ink); box-shadow: 0 0 0 1px #c8e84a4d; color: var(--lime); }
.dashboard-band .fine { margin-top: 18px; }

/* 6. One fee per court. Free camera with a contract., centred, on two lines. 7. Questions. 8. Bring PadelCue to your club, centred. */
.plan-band { background: linear-gradient(180deg, var(--court) 0%, #0c1529 100%); }
.plan-shell, .closing-shell { display: flex; flex-direction: column; align-items: center; text-align: center; }
.plan-band .band-title { max-width: 30ch; }
.closing .band-title { max-width: 16ch; }
.plan-band .band-deck { max-width: 60ch; }
.closing .band-deck { max-width: 48ch; }
.plan-actions, .closing-actions { justify-content: center; gap: 12px 16px; margin-top: 26px; }
.plan-band .fine, .closing .fine { margin-top: 16px; text-align: center; }
.questions .faq-layout { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: 32px 56px; align-items: start; }
.questions .faq-answer p + p { margin-top: 0; }
.faq-all-link { margin-top: 20px; }
.closing { background: linear-gradient(180deg, #0c1529 0%, var(--court) 100%); }
.closing-line { margin: 20px auto 0; max-width: 62ch; color: var(--quiet); font-size: 13px; line-height: 1.6; text-align: center; text-wrap: pretty; }

/* Calm under reduced motion: nothing slides, nothing fades, every reveal is simply present (styles.css keeps
   [data-reveal] visible there too). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .clubs-1013 *, .clubs-1013 *::before, .clubs-1013 *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* Band heads: the deck's baseline meets the title's last line. The 14 px matches the room the curvy underline
   takes below the title. */
@media (min-width: 761px) {
  .band-head .band-deck { margin-bottom: 14px; }
}
@media (min-width: 1000px) {
  /* Match the other section heads: the deck takes the room beside the title, set right, on the same baseline. */
  .band-head .band-deck { flex: 1 1 0; min-width: 0; text-align: right; text-wrap: balance; }
}
@media (min-width: 861px) and (max-height: 900px) {
  /* Short desktop screens: the hero keeps its words and the facts bar within one screen. */
  .hero-shell { min-height: clamp(560px, 86vh, 760px); padding-top: clamp(28px, 4vw, 48px); }
  .hero-stage { padding-block: 20px clamp(28px, 4vw, 48px); }
}
@media (min-width: 861px) and (max-width: 999px) {
  .clubs-1013 .nav-shell { padding-inline: 24px; }
  .clubs-1013 .nav-cta { gap: 8px; }
  /* Three frames across a tablet: the numeral tile and the labels take smaller sizes so the three columns keep their shape. */
  .install-spread { gap: 16px 16px; }
  .install-caption { gap: 10px; }
  .install-label { gap: 12px; }
  .install-step { flex-basis: 32px; width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
  .install-caption strong { font-size: 19px; }
  .install-text { font-size: 15px; }
}
@media (max-width: 999px) {
  .benefit-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .highlight-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .club-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .questions .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 860px) {
  /* The hero on tablets and phones: the photograph behind the whole block, dimmed more evenly, the court kept in
     view at the right, the headline block over it and the facts as one glass list beneath. */
  .hero-backdrop .hero-photo { object-position: 50% 50%; }
  .hero-backdrop::after { background: linear-gradient(180deg, #090d1aeb 0%, #090d1ad1 38%, #090d1a9e 68%, var(--navy) 100%); }
  .hero-shell { min-height: 0; padding-top: 36px; padding-bottom: 36px; }
  .hero-stage { padding-block: 0 40px; }
  .hero-intro { max-width: 600px; }
  .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-facts > div { padding: 14px 16px; }
  .hero-facts > div + div { box-shadow: none; }
  .hero-facts > div:nth-child(2n) { box-shadow: inset 1px 0 0 #ffffff14; }
  .hero-facts > div:nth-child(n+3) { box-shadow: inset 0 1px 0 #ffffff14; }
  .hero-facts > div:nth-child(4) { box-shadow: inset 1px 0 0 #ffffff14, inset 0 1px 0 #ffffff14; }
  .hero-facts dd { margin-top: 8px; font-size: 14px; }
  /* The plan title keeps Free camera on one line, so the stroke sits in the mark's own padding and never crowds the
     line beneath (the pattern the dashboard title uses in mobile-layout-r36.css). */
  body.clubs-1013 main #plans-title .hl-mark { display: inline-block; }
  /* The three equal photo frames stack at one width with their labels above. */
  .install-spread { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; max-width: 560px; margin-inline: auto; gap: 40px; }
  .install-print { grid-row: auto; grid-template-rows: auto auto; row-gap: 16px; }
}
@media (max-width: 700px) {
  .hero-backdrop .hero-photo { height: auto; object-fit: contain; object-position: 50% 50%; transform: translateY(-39%); }
  .clubs-1013 .band { padding-block: 48px; }
  .hero h1 { font-size: clamp(33.6px, 9.44vw, 57.6px); }
  .hero h1 .hl-mark { padding-bottom: 16px; }
  .hero h1 .title-swoosh { height: 12px; stroke-width: 7; }
  .hero-line { font-size: 16px; }
  .hero .actions, .plan-actions, .closing-actions { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
  .hero .actions a, .plan-actions a, .closing-actions a { justify-content: center; width: 100%; }
  .hero-facts, .install-frame, .club-dashboard-window, .benefit-card { border-radius: 12px; }
  .install-caption strong { font-size: 22px; }
  .benefit-cards { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; max-width: 560px; margin-inline: auto; }
  .benefit-card { gap: 14px; padding: 22px; }
  .benefit-card strong { font-size: 19px; }
  .pillar-icon { width: 40px; height: 40px; padding: 8px; }
  .highlight-strip { gap: 12px; }
  .phone { padding: 6px; border-radius: 24px; }
  .phone-screen { border-radius: 19px; }
  .phone-island { top: 12px; height: 9px; }
  .highlight-caption { padding: 10px 6px 0; font-size: 12px; }
  /* The versus band on phones: the cards stack at full width with the badge between them, and the table keeps its
     three columns with each mark above its short fact. */
  .versus-band { --versus-gap: 10px; }
  .versus-duel { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .versus-card { border-radius: 12px; }
  .versus-card-head { min-height: 64px; padding: 10px 16px; }
  .versus-card-head strong { font-size: 18px; }
  .versus-badge { position: static; justify-self: center; width: 48px; height: 48px; margin: -2px 0; font-size: 13px; transform: none; }
  .versus-frame { margin: 12px; border-radius: 10px; }
  .versus-table-wrap { margin-top: 20px; }
  .versus-table .versus-col { padding: 10px 8px; font-size: 12px; letter-spacing: 0.04em; text-align: center; }
  .versus-table .versus-col.versus-feature-col { width: 42%; }
  .versus-table .versus-col.versus-us { width: 24%; border-top-left-radius: 12px; }
  .versus-table .versus-col.versus-them { width: 34%; border-top-right-radius: 12px; }
  .versus-table tbody th, .versus-table tbody td { padding: 10px 8px; font-size: 15px; }
  .versus-table tbody .versus-feature { padding: 8px 10px 8px 0; }
  .versus-table tbody tr:last-child > .versus-us { border-bottom-left-radius: 12px; }
  .versus-table tbody tr:last-child > .versus-them { border-bottom-right-radius: 12px; }
  .versus-feature .versus-cellbox { gap: 10px; }
  .versus-us .versus-cellbox, .versus-them .versus-cellbox { flex-direction: column; align-items: center; gap: 4px; text-align: center; }
  .versus-feature-icon { flex-basis: 32px; width: 32px; height: 32px; padding: 7px; border-radius: 9px; }
  .versus-icon { flex-basis: 26px; width: 26px; height: 26px; }
  .versus-value { font-size: 13px; line-height: 1.3; }
  .versus-legend { gap: 8px 16px; font-size: 12px; }
}
@media (max-width: 600px) {
  /* Phones show the Recent footage crop of the portal (320 by 512 CSS px), framed on its own ratio. */
  .club-dashboard-window { aspect-ratio: 320 / 512; max-width: 360px; margin-inline: auto; }
}
@media (max-width: 430px) {
  /* Narrow phones: the feature tile sits above its words so the three columns stay readable at 320 px. */
  .versus-table .versus-col { padding-inline: 6px; font-size: 11px; letter-spacing: 0.02em; }
  .versus-table .versus-col.versus-feature-col { width: 40%; }
  .versus-table .versus-col.versus-us { width: 28%; }
  .versus-table .versus-col.versus-them { width: 32%; }
  .versus-table tbody th, .versus-table tbody td { padding-inline: 6px; }
  .versus-feature .versus-cellbox { flex-direction: column; align-items: flex-start; gap: 8px; }
  .versus-table tbody .versus-feature { padding-right: 8px; }
}
@media (max-width: 420px) {
  .club-feature-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 33.6px; }
  /* The narrowest phones: each fact column is about 140 px, so the tile, the gap and the label shrink a step and the
     longest label (Bookings) stays inside its column. */
  .hero-facts > div { padding: 12px; }
  .hero-facts dt { gap: 8px; font-size: 11px; letter-spacing: 0.06em; }
  .fact-icon { width: 32px; height: 32px; flex-basis: 32px; padding: 7px; border-radius: 9px; }
}