/* Shared /week design system (fonts, tokens, reset, layout wrap, nav, eyebrow, footer)
   plus the /private-events and /join-us page styles. Served from /static and stamped with a content
   hash (?v=) by component.WKCSSHref so a CSS-only deploy reaches returning visitors at once. */

  /* Jost's en dash is drawn nearly em-length, so ranges like "6–7pm" read as em dashes.
     U+2013 is left out of the range so it falls back to the system font's shorter dash. */
  @font-face { font-family: "Jost"; font-weight: 300 700; font-display: swap; src: url("/static/fonts/jost-var-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2014-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

  /* Newsreader (variable: optical size 6-72, weight 300-700) for display type; Jost stays for UI and body. */
  @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/static/fonts/newsreader-var-latin.woff2") format("woff2"); }
  @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("/static/fonts/newsreader-var-italic-latin.woff2") format("woff2"); }

  :root {
    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --cream: #F7F2E8;
    --ink: #14213D;
    --ink-soft: #3B4663;
    --muted: #8A93A8;
    --ink-body: #2B3550; /* card body copy: one step darker than ink-soft */
    --tan: #EDE3CF;      /* band behind the request form */
    --blue: #2A63D4;
    --yellow: #FFD23F;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
  }

  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; }
  body {
    background: var(--cream);
    color: var(--ink);
    font-family: "Jost", system-ui, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  a { color: inherit; text-decoration: none; }
  a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--blue); }

  .wrap { max-width: 1200px; margin: 0 auto; padding: 0 48px; }

  .top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; }
  .brand { display: inline-flex; align-items: center; border-radius: 4px; }
  /* Script wordmark from the club logo (traced, filled with --ink). Kept small so it
     signs the page without competing with the italic hero line. */
  .brand-logo { display: block; width: auto; height: 46px; }
  .nav { display: flex; gap: 28px; font-weight: 500; font-size: 15px; align-items: center; }
  .nav a { border-radius: 4px; white-space: nowrap; padding: 10px 0; }
  /* Text links: an ink underline fades in on hover (no color change; blue is reserved for prices and booking). */
  /* Side padding gives the hit area and focus ring room; the matching negative margin keeps the text where it was. */
  .nav a:not(.nav-cta) { padding: 10px 6px; margin: 0 -6px; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; transition: text-decoration-color 0.2s var(--ease); }
  @media (hover: hover) { .nav a:not(.nav-cta):hover { text-decoration-color: currentColor; } }
  /* Current page keeps the hover underline, so the nav says where you are (aria-current is set by wkTopNav). */
  .nav a[aria-current="page"] { text-decoration-color: currentColor; }
  /* Sign in (signed out) and Play (signed in) are actions, not pages: a quiet outlined pill set apart from the text links. */
  .nav .nav-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 1px solid rgba(20, 33, 61, 0.18); border-radius: 999px; line-height: 1; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease); }
  .nav .nav-cta:hover { background: rgba(20, 33, 61, 0.05); border-color: rgba(20, 33, 61, 0.32); }
  /* Phone-only second row of page links (see the 630px block); desktop keeps them inline. */
  .top > .nav-row { display: none; }

  .eyebrow { font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }

  .foot { padding: 0 0 40px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-size: 14px; color: var(--ink-soft); }
  /* NP script monogram signs off the page beside the address; decorative (alt=""), the header wordmark already names the club. */
  .foot-sig { display: inline-flex; align-items: center; gap: 14px; }
  .foot-mark { display: block; width: auto; height: 40px; flex: none; }
  .foot-lines { display: flex; flex-direction: column; gap: 2px; }
  .foot-lines a { border-radius: 4px; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.25em; transition: text-decoration-color 0.2s var(--ease); }
  @media (hover: hover) { .foot-lines a:hover { text-decoration-color: currentColor; } }
  /* Instagram glyph rides the email line. The 32px hit box is pulled back with negative
     margins so the 16px glyph sits 10px from the address without growing the line. */
  .foot-contact { display: inline-flex; align-items: center; gap: 2px; }
  .foot-lines .foot-social { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -8px 0; border-radius: 8px; color: var(--ink-soft); transition: color 0.2s var(--ease); }
  @media (hover: hover) { .foot-lines .foot-social:hover { color: var(--ink); } }

@media (max-width: 1000px) {
  .wrap { padding: 0 16px; }
}
@media (max-width: 630px) {
    /* Header phone layout at 630px and down, while the body's own blocks stay at 600px. Brand
       left with Join and Sign in (or Play when signed in) top right. Schedule, Lessons and
       Private events sit on a ruled row below. Their inline copies hide and the nav-row copy
       shows, so each link is in the accessibility tree once. Join is never hidden.
       Why 630: the desktop row is 135px logo + 16px + 423.8px nav (Join 24.8, Schedule 61.0,
       Lessons 51.0, Private events 90.7, 84.3px Sign in pill, four 28px gaps) = 574.8px. Plus the
       2 x 16px .wrap padding that is 606.8px, so the row overflowed at 601-606px. At 631px it has
       24.2px spare. Signed in, Join drops out and the Play pill replaces the Sign in pill, so the
       row is narrower than signed out at every width. */
    .top { flex-wrap: wrap; gap: 4px 12px; padding: 14px 0 8px; }
    .brand-logo { height: 38px; }
    .nav-secondary { display: none; }
    /* Basis 0 so the Main nav can never drop under the logo (flex-wrap breaks lines on
       max-content size). Row 1 fit: at 320px the 111px logo, 12px, Join 23px, 20px and the
       81px Sign in pill take 248px of the 288px row. Signed in it is the logo, 12px and the
       Play pill, which is narrower than the Sign in pill: under 204px. */
    .top > .nav { flex: 1 1 0; min-width: 0; justify-content: flex-end; gap: 20px; }
    /* A 24px line plus the link's 10px top and bottom padding makes Join a 44px tap target,
       matching the pill. */
    .top .nav-join { line-height: 24px; }
    /* Full-width second row, text left-aligned with the logo (the links' -6px margin cancels
       their 6px padding). Hairlines in the /join-us checklist tint plus 6px above, so it
       reads as the header's bottom edge rather than a tagline. A 28px gap; Schedule + Lessons +
       Private events is 202.7px of 15px Jost, 258.7px with both gaps, inside the 288px row at
       320px (29.3px spare). A 24px line plus the links' 10px top and bottom padding makes
       44px tap targets; stays 15px under 360px (beats the later .nav font-size on
       specificity). Both states share the row. It comes after .top > .nav and does not touch
       row 1 (the Main nav lacks nav-row). */
    .top > .nav.nav-row { display: flex; flex: 0 0 100%; justify-content: flex-start; gap: 28px; margin-top: 6px; border-top: 1px solid rgba(20, 33, 61, 0.14); border-bottom: 1px solid rgba(20, 33, 61, 0.14); font-size: 15px; line-height: 24px; }
    .nav { font-size: 15px; }
    .nav a { padding: 12px 0; }
    .nav .nav-cta { min-height: 44px; }
}
@media (max-width: 360px) {
  .nav { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; transform: none !important; }
}

/* ==== Private events page (/private-events) ====
   Every class is pe-prefixed so nothing collides with /week's inline rules. */
/* Split hero: headline, one sentence that carries the price, and the CTA on the left; the
   courts on the right so they show on first load. One body size under the headline. */
.pe-hero { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: 48px; align-items: center; padding: 40px 0 48px; }
.pe-h1 { margin: 0; font-family: var(--serif); font-size: clamp(44px, 5.4vw, 68px); line-height: 1.02; font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; }
.pe-h1 em { font-style: italic; }
.pe-sub { margin: 22px 0 0; max-width: 34ch; font-size: 21px; line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }
.pe-sub strong { font-weight: 500; color: var(--ink); white-space: nowrap; }
.pe-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 28px; }
.pe-hero-note { font-size: 15px; color: var(--ink-soft); }
.pe-cta, .pe-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--yellow); color: var(--ink); font-weight: 600; font-size: 15px; padding: 12px 20px; border-radius: 999px; transition: background-color 0.2s var(--ease), transform 0.2s var(--ease); }
.pe-cta { min-height: 48px; padding: 0 24px; font-size: 16px; }
.pe-cta:hover, .pe-submit:hover { background: #F2C200; transform: translateY(-1px); }
.pe-cta:hover .pe-arrow, .pp-other:hover .pe-arrow { transform: translateX(3px); }
.pe-cta:focus-visible, .pe-submit:focus-visible { box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--blue); outline: none; }
.pe-arrow { flex: none; transition: transform 0.2s var(--ease); }
/* The frame clips an oversized photo (a zoom without transform, which the reduced-motion rule
   would cancel). The overscan trims the pale bottom corners (stained roof, white wall, bins) and
   the right edge, keeping the gold tower and the courts. */
.pe-hero-media { position: relative; display: block; min-width: 0; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 20px; }
/* The lounge shot is pale at the edges (tower above, white wall at left, bare concrete below).
   The crop leans right and down onto the courts and the crowd, which are the subject. */
.pe-hero-media img { position: absolute; top: -3%; left: -6%; display: block; width: 118%; height: 118%; max-width: none; object-fit: cover; object-position: 50% 40%; filter: saturate(1.1) contrast(1.05); }

/* Three surfaces, as on /week: cream page, white card, cream tile inside it. */
.pe-card { background: #fff; border: 1px solid rgba(20, 33, 61, 0.08); border-radius: 20px; padding: 32px; margin-bottom: 48px; }
/* Section headings: the middle step between the 68px headline and the 21px tile titles.
   Same cut as /week's lessons heading (Newsreader 400, -0.02em). */
.pe-h2 { margin: 0; font-family: var(--serif); font-size: clamp(28px, 3.2vw, 36px); line-height: 1.1; font-weight: 400; letter-spacing: -0.02em; text-wrap: balance; }
.pe-lede { margin: 12px 0 0; max-width: 56ch; font-size: 18px; line-height: 1.5; color: var(--ink-body); text-wrap: pretty; }
.pe-items { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, calc((100% - 12px) / 2)); gap: 12px; }
.pe-items li { min-width: 0; background: var(--cream); border-radius: 12px; padding: 18px 20px 20px; }
.pe-item-title { margin: 0 0 6px; font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pe-item-body { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink-body); overflow-wrap: anywhere; text-wrap: pretty; }
/* One mid-page Request a date, after What's included. The reply promise lives in the hero
   and beside the form, so it isn't repeated here; the form needs no button pointing at it. */
.pe-cta-row { margin-top: 28px; }
.pe-cta-solid { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; background: var(--ink); color: var(--cream); border-radius: 999px; font-weight: 600; font-size: 15px; transition: background-color 0.2s var(--ease), transform 0.2s var(--ease); }
.pe-cta-solid:hover { background: var(--ink-soft); transform: translateY(-1px); }
.pe-cta-solid:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blue); }

/* The page's one dark anchor, built like /week's events band: navy, 20px radius, wrap width.
   Photos read richer on dark, so the three sample cards lead with them at full card width. */
.pe-samples { background: var(--ink); color: var(--cream); border-radius: 20px; padding: 40px; margin-bottom: 48px; }
.pe-samples .pe-h2 { margin-top: 0; color: var(--cream); }
.pe-samples .pe-lede { color: rgba(247, 242, 232, 0.82); }
.pe-sample-grid { display: grid; grid-template-columns: repeat(3, calc((100% - 40px) / 3)); gap: 20px; margin-top: 28px; }
.pe-sample { min-width: 0; display: flex; flex-direction: column; background: rgba(247, 242, 232, 0.06); border: 1px solid rgba(247, 242, 232, 0.1); border-radius: 16px; overflow: hidden; }
.pe-sample-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: rgba(247, 242, 232, 0.08); }
.pe-sample-body { padding: 18px 20px 22px; }
.pe-sample-title { margin: 0; font-family: var(--serif); font-size: 23px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: var(--cream); text-wrap: balance; }
.pe-sample-meta { margin: 8px 0 0; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(247, 242, 232, 0.82); }
.pe-sample-text { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: rgba(247, 242, 232, 0.82); overflow-wrap: anywhere; text-wrap: pretty; }

/* Pricing strip: the two buyout rates, blue like /week's tile prices, beside one line of terms.
   A white card on cream, slimmer than the cards above, so it reads as a fact, not a section. */
.pe-pricing { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 48px; background: #fff; border: 1px solid rgba(20, 33, 61, 0.08); border-radius: 20px; padding: 28px 32px; margin-bottom: 48px; }
.pe-pricing-text { flex: 1 1 320px; min-width: 0; }
.pe-pricing-note { margin: 10px 0 0; max-width: 48ch; font-size: 17px; line-height: 1.5; color: var(--ink-body); text-wrap: pretty; }
/* Two equal columns: in shrink-to-fit sizing, 1fr tracks both take the wider tile's width. */
.pe-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.pe-rate { min-width: 0; background: var(--cream); border-radius: 12px; padding: 16px 22px 18px; }
.pe-rate-when { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.pe-rate-price { margin: 6px 0 0; font-size: 32px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; color: var(--blue); font-variant-numeric: tabular-nums; }
.pe-rate-unit { font-size: 17px; font-weight: 500; letter-spacing: 0; margin-left: 2px; }

/* Request: a tan band grounds the form card. The pitch sits beside it on desktop, above it on phones. */
.pe-request { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; background: var(--tan); border-radius: 20px; padding: 48px; margin-bottom: 48px; scroll-margin-top: 24px; }
.pe-request-intro { padding-top: 8px; position: sticky; top: 24px; }
.pe-request-body { margin: 16px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-body); text-wrap: pretty; }
.pe-request-promise { margin: 12px 0 0; font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.pe-request-where { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid rgba(20, 33, 61, 0.14); font-size: 15px; line-height: 1.5; color: var(--ink-body); }
.pe-request .pe-card { margin-bottom: 0; box-shadow: 0 1px 2px rgba(20, 33, 61, 0.04), 0 8px 24px rgba(20, 33, 61, 0.06); }
.pe-request .pe-item-body { margin-top: 6px; }
/* Success page: the whole page after a sent request. One tan band, same surface as the form band. */
.pe-sent { max-width: 760px; margin: 40px 0 64px; background: var(--tan); border-radius: 20px; padding: 48px; }
.pe-sent-h { margin: 0; font-family: var(--serif); font-size: clamp(40px, 5vw, 56px); line-height: 1.04; font-weight: 500; letter-spacing: -0.025em; }
.pe-sent-promise { margin: 18px 0 0; max-width: 40ch; font-size: 20px; line-height: 1.45; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.pe-sent-body { margin: 12px 0 0; max-width: 48ch; font-size: 17px; line-height: 1.5; color: var(--ink-body); text-wrap: pretty; }
.pe-sent-back { margin-top: 28px; }
.pe-inline-link { border-radius: 4px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.pe-inline-link:hover { color: var(--blue); }
.pe-form { display: flex; flex-direction: column; gap: 18px; }
.pe-field { min-width: 0; }
.pe-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--ink); }
.pe-input { display: block; width: 100%; font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); background: var(--cream); border: 1px solid rgba(20, 33, 61, 0.14); border-radius: 12px; padding: 14px 16px; }
.pe-input::placeholder { color: var(--muted); }
.pe-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blue); }
.pe-input.is-invalid { border-color: #B42318; }
.pe-select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2314213D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.pe-textarea { resize: vertical; }
.pe-field-error, .pe-form-error { margin: 6px 0 0; font-size: 14px; color: #B42318; }
.pe-form-error { margin: 0 0 18px; }
.pe-submit { display: flex; width: 100%; min-height: 52px; border: 0; font-family: inherit; cursor: pointer; }

@media (max-width: 900px) {
  .pe-card { padding: 22px 18px; }
  .pe-items { grid-template-columns: minmax(0, 1fr); }
  .pe-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 0 40px; }
  .pe-sub { max-width: 40ch; }
  .pe-hero-media { aspect-ratio: 4 / 3; }
  .pe-samples { padding: 28px 18px; }
  .pe-pricing { padding: 22px 18px; }
  .pe-rates { width: 100%; }
  .pe-sample-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pe-request { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 18px 18px; }
  .pe-request-intro { padding-top: 0; position: static; }
}
@media (max-width: 600px) {
  .pe-hero { padding: 36px 0 32px; gap: 24px; }
  .pe-sub { font-size: 18px; }
  .pe-items li { padding: 16px; }
  /* Side by side, the two labels wrap to different line counts and the prices misalign: stack them. */
  .pe-rates { grid-template-columns: minmax(0, 1fr); }
  .pe-request { padding: 28px 12px 12px; }
  .pe-request-intro { padding: 0 6px; }
  .pe-sent { margin: 20px 0 40px; padding: 32px 20px; }
}

/* ==== Join us page (/join-us) ====
   Reuses the pe- type, card, tile, form, and button rules above; this block only adds what /join-us needs. */
.ju-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; padding: 40px 0 48px; scroll-margin-top: 24px; }
.ju-eyebrow { display: block; margin-bottom: 10px; }
.ju-price { display: flex; align-items: baseline; gap: 6px; margin-top: 28px; }
.ju-price-figure { font-family: "Jost", sans-serif; font-weight: 600; font-size: 40px; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ju-price-unit { font-size: 18px; font-weight: 400; color: var(--ink-soft); }
.ju-price-note { margin: 8px 0 0; font-size: 15px; font-weight: 400; color: var(--ink-soft); }
.ju-price-anchor { margin: 10px 0 0; max-width: 40ch; font-size: 17px; line-height: 1.5; color: var(--ink-body); text-wrap: pretty; }
.ju-checklist { list-style: none; margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(20, 33, 61, 0.14); display: flex; flex-direction: column; gap: 12px; }
.ju-checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 24px; color: var(--ink); }
.ju-check { flex: none; width: 22px; height: 22px; display: inline-grid; place-items: center; background: var(--yellow); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1; border-radius: 999px; margin-top: 1px; }
.ju-signup { background: var(--tan); border-radius: 20px; padding: 24px; }
.ju-signup .pe-card { margin-bottom: 0; }
.ju-signup-h { font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.ju-signup-sub { margin: 8px 0 20px; font-size: 16px; line-height: 1.5; color: var(--ink-body); text-wrap: pretty; }
.ju-field-hint { margin: -2px 0 8px; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.ju-signup-foot { margin: 14px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-body); text-align: center; text-wrap: balance; }
.ju-signup .pe-submit.is-loading { opacity: 0.8; cursor: progress; }
.ju-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: ju-spin 0.8s linear infinite; }
@keyframes ju-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ju-spinner { animation: none; }
}
.ju-photo { display: block; margin: 24px 0 0; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; }
.ju-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) contrast(1.05); }
.ju-faq { margin: 24px 0 0; border-top: 1px solid rgba(20, 33, 61, 0.12); }
.ju-faq-item { border-bottom: 1px solid rgba(20, 33, 61, 0.12); }
.ju-faq-q { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 16px 0; cursor: pointer; font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; border-radius: 4px; }
.ju-faq-q::-webkit-details-marker { display: none; }
.ju-faq-q:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blue); }
.ju-faq-icon { flex: none; width: 24px; text-align: center; font-family: "Jost", sans-serif; font-weight: 400; font-size: 22px; color: var(--ink-soft); }
.ju-faq-icon::before { content: "+"; }
.ju-faq-item[open] .ju-faq-icon::before { content: "\2212"; }
.ju-faq-a { margin: 0 0 18px; max-width: 60ch; font-size: 17px; line-height: 1.5; color: var(--ink-body); text-wrap: pretty; }
@media (max-width: 900px) {
  .ju-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 0 40px; }
  .ju-signup { padding: 12px; }
  .ju-photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .ju-hero { padding: 36px 0 32px; gap: 24px; }
  .ju-price-figure { font-size: 36px; }
  .ju-checklist li { font-size: 16px; }
  .ju-faq-q { font-size: 19px; }
}
/* "The courts" is the page's one dark anchor, built like /private-events' "Ways to run it" band:
   the photo reads richer on navy, and the four benefits become the band's translucent cards.
   No CTA inside: the hero's yellow "Claim my spot" stays the page's only primary action. */
.ju-courts { background: var(--ink); color: var(--cream); border-color: transparent; padding: 40px; }
.ju-courts .eyebrow { color: rgba(247, 242, 232, 0.72); }
.ju-courts .pe-h2 { color: var(--cream); }
.ju-courts .pe-items li { background: rgba(247, 242, 232, 0.06); border: 1px solid rgba(247, 242, 232, 0.1); }
.ju-courts .pe-item-title { color: var(--cream); }
.ju-courts .pe-item-body { color: rgba(247, 242, 232, 0.82); }
@media (max-width: 900px) {
  .ju-courts { padding: 28px 18px; }
}

/* ==== Pro pages (/naomi-tran, /santhosh-narayanan, /cagatay-soke and /{slug}/requested) ====
   Reuses the pe- type, card, form, request band, and success rules above; this block only adds what the pro pages need. */
.pp-cred { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 18px; font-size: 15px; color: var(--ink-soft); }
.pp-social { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border-radius: 4px; color: var(--ink); }
.pp-social:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.pp-hero-media { margin: 0; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 20px; }
.pp-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) contrast(1.05); }
.pp-coach .eyebrow, .pp-others .eyebrow { display: block; margin: 0 0 12px; }
.pp-coach-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }
.pp-bio { margin: 16px 0 0; max-width: 60ch; font-size: 17px; line-height: 1.5; color: var(--ink-body); text-wrap: pretty; }
/* Navy rates panel: the one dark surface on the page, as the samples band is on /private-events,
   spent on the content a visitor decides on. Prices go cream; blue on navy is too weak. */
.pp-rates { background: var(--ink); color: var(--cream); border-radius: 16px; padding: 22px 24px; }
.pp-rates .eyebrow { color: rgba(247, 242, 232, 0.72); }
.pp-rate-list { margin: 12px 0 0; }
.pp-rate { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(247, 242, 232, 0.14); }
.pp-rate:last-child { border-bottom: 0; }
.pp-rate-label { margin: 0; font-size: 16px; font-weight: 500; }
.pp-rate-price { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; text-align: right; }
.pp-rate-sub { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; line-height: 1.3; color: rgba(247, 242, 232, 0.78); }
.pp-rate-note { margin: 16px 0 0; font-size: 14px; line-height: 1.45; color: rgba(247, 242, 232, 0.78); }
.pp-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.pp-others { margin-bottom: 48px; }
.pp-others-grid { display: grid; grid-template-columns: repeat(2, calc((100% - 12px) / 2)); gap: 12px; }
.pp-other { min-width: 0; display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid rgba(20, 33, 61, 0.08); border-radius: 20px; padding: 16px; }
.pp-other img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.pp-other-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-other-name { font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.pp-other-cred { font-size: 15px; line-height: 1.35; color: var(--ink-soft); }
@media (max-width: 900px) {
  .pp-coach-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 600px) {
  .pp-form-row { grid-template-columns: minmax(0, 1fr); }
  .pp-others-grid { grid-template-columns: minmax(0, 1fr); }
  .pp-rate-price { font-size: 22px; }
}