/* =========================================================================
   Padel Court Media · Proposal design system
   Brand palette
     --pcm-lime:    #c1d82f
     --pcm-navy:    #191a3f
     --pcm-paper:   #e4e2e1
     --pcm-sky:     #a7d4dc
     --pcm-ink:     #1b1615
   Type:  Cabinet Grotesk 800 (display), Cabinet Grotesk 400 (body)
   ========================================================================= */

@import url('./cabinet-grotesk.css');

:root {
  --pcm-lime:  #c1d82f;
  --pcm-navy:  #191a3f;
  --pcm-paper: #e4e2e1;
  --pcm-sky:   #a7d4dc;
  --pcm-ink:   #1b1615;
  --pcm-cream: #f5f4f2;
  --pcm-mid:   #6b6f7a;

  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 2px rgba(25,26,63,.04), 0 8px 24px rgba(25,26,63,.06);
  --shadow-deep: 0 6px 14px rgba(25,26,63,.10), 0 30px 60px rgba(25,26,63,.14);

  --ease: cubic-bezier(.2,.7,.2,1);

  --content-w: 1180px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Cabinet Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 400;
  color: var(--pcm-ink);
  background: var(--pcm-paper);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--pcm-navy);
}
h1 { font-size: clamp(2.6rem, 5.6vw, 4.8rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
h4 { font-size: 1.1rem; }
p  { margin: 0 0 1rem; }

/* ------------------------------ Layout primitives -------------------------- */
.container { width: 100%; max-width: var(--content-w); margin: 0 auto; padding: 0 28px; }

.stack > * + * { margin-top: 1rem; }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media screen and (max-width: 800px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* Agreement slide — fixed layout, internal iframe scrolling.
   The iframe owns the scroll; the slide does NOT scroll its own content.
   Print mode is handled in @media print (allows the contract to flow over multiple pages). */
@media screen {
  .deck #agreement { overflow: hidden !important; }
}
#agreement .agreement-stack {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  gap: .75rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
#agreement .agreement-head { flex: 0 0 auto; }
#agreement .agreement-foot { flex: 0 0 auto; }
#agreement .iframe-wrap {
  flex: 1 1 auto;
  min-height: 0;           /* allows the wrap to shrink in flex layout */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-deep);
}
#agreement .iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}

/* Print/screen swap for the agreement slide */
.agreement-print { display: none; }
@media print {
  .agreement-screen { display: none !important; }
  .agreement-print  { display: block !important; }
}

/* CTA that only appears on the PDF version of the sign slide */
.print-cta { display: none; }
@media print {
  .print-cta {
    display: block !important;
    text-align: center;
    margin: 1.5rem auto 0;
    max-width: 720px;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
    border: 2px solid var(--pcm-lime);
  }
  .print-cta .btn {
    font-size: 11pt;
    background: var(--pcm-navy) !important;
    color: var(--pcm-cream) !important;
    text-decoration: underline;
    padding: .65rem 1.25rem;
  }
  /* Hide the screen-only sign form when printing — the CTA above is the call-to-action */
  #sign-form, #sign .signed-card { display: none !important; }
}

/* ------------------------------ Brand bits --------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center;
  font-size: .78rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pcm-navy);
  background: var(--pcm-lime);
  padding: .35rem .75rem;
  border-radius: var(--radius-pill);
}
.eyebrow.muted { background: rgba(25,26,63,.08); color: var(--pcm-navy); }
.eyebrow.sky   { background: var(--pcm-sky); }

.lime { color: var(--pcm-lime); }
.navy { color: var(--pcm-navy); }
.text-mid { color: var(--pcm-mid); }
.bg-lime { background: var(--pcm-lime); }
.bg-navy { background: var(--pcm-navy); color: var(--pcm-cream); }
.bg-paper { background: var(--pcm-paper); }
.bg-sky { background: var(--pcm-sky); }

/* PCM lime triangle (pattern) — flush stripe, used at the bottom of the viewer */
.pcm-pattern {
  height: 22px;
  background-image: url('/images/PCM-pattern.svg');
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 22px;
}

/* ------------------------------ Buttons ------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.5rem;
  border-radius: var(--radius-pill);
  font-weight: 800; font-size: .95rem; letter-spacing: .02em;
  border: 0; text-decoration: none;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--pcm-navy); color: var(--pcm-cream); }
.btn-primary:hover { background: #0f1130; box-shadow: var(--shadow-deep); }
.btn-lime { background: var(--pcm-lime); color: var(--pcm-navy); }
.btn-lime:hover { background: #b1c918; }
.btn-ghost { background: transparent; color: var(--pcm-navy); border: 1.5px solid currentColor; }
.btn-ghost:hover { background: var(--pcm-navy); color: var(--pcm-cream); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ------------------------------ Cards / surfaces --------------------------- */
.card {
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
}
.card h3 { margin-bottom: 1rem; }
.card h3 + ul { margin-top: 0; }
.card ul.bullets li { margin-bottom: .75rem; }
.card.dark { background: var(--pcm-navy); color: var(--pcm-cream); }
.card.dark h1, .card.dark h2, .card.dark h3 { color: #fff; }
.card.lime { background: var(--pcm-lime); color: var(--pcm-navy); }
.card.sky  { background: var(--pcm-sky); color: var(--pcm-navy); }

.tile {
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  border: 1px solid rgba(255,255,255,.45);
}
.tile h4 { color: var(--pcm-navy); margin-bottom: .35rem; }
.tile p  { color: var(--pcm-mid); margin: 0; }

/* ------------------------------ Forms -------------------------------------- */
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.field label { font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--pcm-navy); }
.field input[type=text],
.field input[type=email],
.field input[type=password],
.field input[type=tel],
.field input[type=number],
.field input[type=date],
.field textarea,
.field select {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid rgba(25,26,63,.18);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--pcm-ink);
  font: inherit;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--pcm-navy);
  box-shadow: 0 0 0 3px rgba(193,216,47,.45);
}
.field .hint { font-size: .8rem; color: var(--pcm-mid); }
.field.row { flex-direction: row; align-items: center; gap: .55rem; }

/* WYSIWYG email editor */
.wysiwyg-wrap { border: 1.5px solid rgba(25,26,63,.18); border-radius: var(--radius-md); overflow: hidden; background: #fff; }
.wysiwyg-toolbar {
  display: flex; align-items: center; gap: .25rem; flex-wrap: wrap;
  padding: .4rem .5rem; background: var(--pcm-cream);
  border-bottom: 1px solid rgba(25,26,63,.12);
}
.wz-btn {
  background: #fff; border: 1px solid rgba(25,26,63,.15); color: var(--pcm-navy);
  border-radius: 6px; padding: .3rem .55rem; font-size: .8rem; cursor: pointer; line-height: 1;
}
.wz-btn:hover { background: var(--pcm-lime); border-color: var(--pcm-lime); }
.wz-btn:disabled { opacity: .4; cursor: not-allowed; }
.wz-btn.wz-code { font-family: ui-monospace, monospace; }
.wz-btn.wz-code.active { background: var(--pcm-navy); color: #fff; border-color: var(--pcm-navy); }
.wysiwyg-area {
  min-height: 220px; max-height: 420px; overflow-y: auto;
  padding: 1rem 1.1rem; font-size: .95rem; line-height: 1.6; color: var(--pcm-ink);
  outline: none;
}
.wysiwyg-area:focus { box-shadow: inset 0 0 0 2px rgba(193,216,47,.5); }
.wysiwyg-area p { margin: 0 0 .8rem; }
.wysiwyg-area a { color: #7a9a0f; }
textarea.wysiwyg-source { border: 0; border-radius: 0; min-height: 240px; }

/* Workspace tabs (proposal details / outreach / activity) */
.ws-tabs {
  display: flex; gap: .35rem;
  margin: 0 auto; padding: 1.25rem 28px 0;
  border-bottom: 1px solid rgba(25,26,63,.12);
}
.ws-tab {
  padding: .7rem 1.2rem;
  font-weight: 800; font-size: .9rem;
  color: var(--pcm-mid); text-decoration: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: 1px solid transparent; border-bottom: 0;
  transition: all .15s var(--ease);
}
.ws-tab:hover { color: var(--pcm-navy); background: rgba(25,26,63,.04); }
.ws-tab.active {
  color: var(--pcm-navy);
  background: #fff;
  border-color: rgba(25,26,63,.12);
  box-shadow: 0 -2px 0 var(--pcm-lime) inset;
}

/* Activity accordion — extra rows hidden until "Show all" clicked */
.activity-table tr.activity-extra { display: none; }
.activity-table tr.activity-extra.open { display: table-row; }

/* Repeating contact rows in admin form */
fieldset.contact-row {
  border: 1.5px solid rgba(25,26,63,.12);
  border-radius: var(--radius-md);
  padding: .9rem 1rem .4rem;
  margin: 0 0 .8rem;
  background: rgba(255,255,255,.6);
}
.field.row label { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .95rem; }

.field-pct { display: flex; align-items: center; gap: .5rem; }
.field-pct input { width: 6rem; }
.field-pct .sym { font-weight: 800; color: var(--pcm-navy); }

input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--pcm-lime); }
input[type=checkbox].check-big { width: 2.2rem; height: 2.2rem; flex: 0 0 auto; margin-top: .1rem; }
/* Checkbox sitting on a lime background: use navy so it's visible */
input[type=checkbox].check-on-lime { accent-color: var(--pcm-navy); }

/* Lime screens-add-on signature card */
.sig-card--screens { background: var(--pcm-lime) !important; border-color: transparent !important; }
.sig-card--screens .field.row { gap: .8rem; }
input[type=file] { font: inherit; }

.alert { padding: .9rem 1.1rem; border-radius: var(--radius-md); margin-bottom: 1rem; }
.alert.error  { background: #fde7e6; color: #8a1a14; }
.alert.info   { background: #e2f1f4; color: #0b3540; }
.alert.success{ background: #e7f4d1; color: #2e4708; }

/* ------------------------------ Header (proposal) -------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.3rem;
  background: var(--pcm-navy);
  color: var(--pcm-cream);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header { padding: .75rem 1.3rem; }
.site-header .logos { display: flex; align-items: center; gap: 1.1rem; }
.site-header .logos .pcm-logo { height: 60px; width: auto; object-fit: contain; }
.site-header .logos .club-mark { height: 44px; width: auto; max-width: 220px; object-fit: contain; }
.site-header .logos .sep {
  display: inline-block; width: 1px; height: 48px;
  background: rgba(255,255,255,.22);
}
/* deck height handled by flexbox on body.viewer */
.site-header .actions { display: flex; align-items: center; gap: .5rem; }
.site-header .actions a, .site-header .actions span { color: var(--pcm-cream); }
.site-header .actions .btn-ghost { color: var(--pcm-cream); border-color: rgba(255,255,255,.45); }
.site-header .actions .btn-ghost:hover { background: var(--pcm-cream); color: var(--pcm-navy); border-color: var(--pcm-cream); }
.site-header .actions .signout { font-size: .85rem; opacity: .8; text-decoration: none; margin-left: .25rem; }
.site-header .actions .signout:hover { opacity: 1; }

/* ------------------------------ Footer ------------------------------------- */
.site-footer {
  margin-top: 4rem;
  padding: 0 0 1.5rem;
  color: var(--pcm-mid);
  font-size: .8rem;
}
.site-footer .pcm-pattern { margin-bottom: 1rem; }
.site-footer .legal {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 28px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
}

/* ------------------------------ Slides / sections -------------------------- */
/* Slideshow mode (proposal viewer only) locks the viewport using a flex column. */
body.viewer {
  height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
}
body.viewer .site-header { flex: 0 0 auto; position: relative; }
body.viewer .slide-progress--top { flex: 0 0 auto; }
body.viewer .deck { flex: 1 1 auto; height: auto; min-height: 0; }
body.viewer .viewer-bottom { flex: 0 0 auto; }
body.embedded, body.print-mode { height: auto; overflow: auto; }

.deck {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px); /* fallback when not in flex viewer */
  overflow: hidden;
  background: var(--pcm-paper);
}
.deck .slide {
  position: absolute; inset: 0;
  padding: 4rem 0 7rem;        /* extra bottom space so scrolled content clears the floating nav */
  overflow-y: auto;            /* scrollbar only when content overflows the slide height */
  overflow-x: hidden;          /* never scroll horizontally — decos stay clipped */
  opacity: 0;
  pointer-events: none;
  transform: translateX(40px);
  transition: opacity .45s var(--ease), transform .55s var(--ease);
  /* On WebKit, only show the scrollbar while user is interacting */
  scrollbar-width: thin;
  scrollbar-color: rgba(193,216,47,.5) transparent;
}
.deck .slide::-webkit-scrollbar { width: 8px; }
.deck .slide::-webkit-scrollbar-thumb { background: rgba(193,216,47,.45); border-radius: 4px; }
.deck .slide::-webkit-scrollbar-thumb:hover { background: rgba(193,216,47,.75); }
.deck .slide::-webkit-scrollbar-track { background: transparent; }
.deck .slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.deck .slide.prev { transform: translateX(-40px); }

.slide {
  position: relative;
  overflow: hidden;
}
.slide-inner { position: relative; z-index: 2; }

/* Slide background painted directly onto the section so it fills the slide box and
   never scrolls when the slide's content overflows. The JS helper at the top of
   slideshow.js promotes each <.bg-image> URL into a CSS custom property + .has-bg. */
.deck .slide.has-bg {
  background-image:
    linear-gradient(180deg, rgba(25,26,63,.55), rgba(25,26,63,.88)),
    var(--slide-bg);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Legacy .bg-image is hidden by JS, but keep the rules harmless */
.slide .bg-image {
  position: absolute; inset: 0; z-index: 1;
  background-size: cover; background-position: center;
}
.slide .bg-image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(25,26,63,.68), rgba(25,26,63,.88));
}
.slide.dark { color: #fff; }
.slide.dark h1, .slide.dark h2, .slide.dark h3 { color: var(--pcm-lime); }
.slide.dark p, .slide.dark li, .slide.dark .text-mid { color: #fff; }
.slide.bg-navy-flat { background: var(--pcm-navy); color: #fff; }
.slide.bg-navy-flat h1, .slide.bg-navy-flat h2, .slide.bg-navy-flat h3 { color: var(--pcm-lime); }
.slide.bg-navy-flat p, .slide.bg-navy-flat li, .slide.bg-navy-flat .text-mid { color: #fff; }
/* When .dark is on the inner container — same rules */
.slide-inner.dark { color: #fff; }
.slide-inner.dark h1, .slide-inner.dark h2, .slide-inner.dark h3 { color: var(--pcm-lime); }
.slide-inner.dark p, .slide-inner.dark li, .slide-inner.dark .text-mid { color: #fff; }
/* Cards inside dark slides keep their own bg/text — don't bleed white onto them */
.slide-inner.dark .card, .slide-inner.dark .tile { color: var(--pcm-ink); }
.slide-inner.dark .card h1, .slide-inner.dark .card h2, .slide-inner.dark .card h3,
.slide-inner.dark .tile h4 { color: var(--pcm-navy); }
.slide-inner.dark .card p, .slide-inner.dark .card li, .slide-inner.dark .tile p { color: var(--pcm-ink); }
.slide-inner.dark .card.dark { color: var(--pcm-cream); }
.slide-inner.dark .card.dark h1, .slide-inner.dark .card.dark h2, .slide-inner.dark .card.dark h3 { color: #fff; }
.slide-inner.dark .card.dark p, .slide-inner.dark .card.dark li { color: var(--pcm-cream); }
.slide-inner.dark .card.lime, .slide-inner.dark .card.sky { color: var(--pcm-navy); }
.slide-inner.dark .card.lime h3, .slide-inner.dark .card.sky h3 { color: var(--pcm-navy); }
.slide-inner.dark .card.lime p, .slide-inner.dark .card.sky p, .slide-inner.dark .card.lime li, .slide-inner.dark .card.sky li { color: var(--pcm-navy); }
.slide.bg-lime-flat { background: var(--pcm-lime); }
.slide.bg-sky-flat  { background: var(--pcm-sky); }
.slide.bg-paper-flat { background: var(--pcm-paper); }

.slide .deco {
  position: absolute; z-index: 1;
  pointer-events: none; opacity: .9;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.18));
  max-width: 50vw;
}
/* Decos stay strictly inside slide bounds so they never trigger overflow scroll */
.slide .deco.right { right: 0; bottom: 4%; width: 42%; max-width: 560px; }
.slide .deco.left  { left:  0; top:    4%; width: 38%; max-width: 480px; }
/* Belt-and-braces: horizontal overflow always clipped at slide level */
.slide { overflow-x: hidden; }

/* ------------------------------ Specific slide bits ------------------------ */
.cover h1 .accent { color: var(--pcm-lime); }
.cover .meta { font-size: .9rem; opacity: .85; }
.cover .club-logo {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 100px; min-width: 220px;
  box-shadow: var(--shadow-deep);
}
.cover .club-logo img { max-height: 88px; max-width: 320px; }

.lockup { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.lockup .x { font-size: 1.2rem; color: var(--pcm-lime); font-weight: 800; }

.split-pct {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  border-radius: var(--radius-lg); overflow: hidden;
}
.split-pct .half {
  padding: 2rem; text-align: center; font-weight: 800;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  min-height: 200px;
}
.split-pct .half .num { font-size: clamp(3rem, 6vw, 5rem); line-height: 1; }
.split-pct .half .lbl { font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.split-pct .half.club { background: var(--pcm-lime); color: var(--pcm-navy); }
.split-pct .half.pcm  { background: var(--pcm-navy); color: var(--pcm-cream); }

/* Smaller variant — used to demote the screens split below the core one */
.split-pct--small .half { padding: 1.2rem; min-height: 120px; }
.split-pct--small .half .num { font-size: clamp(2rem, 3.2vw, 2.8rem); }
.split-pct--small .half .lbl { font-size: .78rem; }

/* Compact variant — three stacked splits on one slide, tighter padding */
.split-pct--compact .half { padding: .7rem .9rem; min-height: 64px; gap: 0; }
.split-pct--compact .half .num { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1; }
.split-pct--compact .half .lbl { font-size: .7rem; }

/* Hero variant — used for the headline (core) split so it visually dominates */
.split-pct--hero .half { padding: 1.4rem 1.1rem; min-height: 140px; gap: .25rem; }
.split-pct--hero .half .num { font-size: clamp(3.2rem, 5.2vw, 4.4rem); line-height: 1; }
.split-pct--hero .half .lbl { font-size: .9rem; }

ul.bullets { padding: 0; margin: 0; list-style: none; }
ul.bullets li { position: relative; padding-left: 1.6rem; margin-bottom: .6rem; }
ul.bullets li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: .7rem; height: .7rem;
  background: var(--pcm-lime);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.contract { background: #fff; padding: 2.5rem 2.5rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.contract h3 { margin-top: 1.5rem; }
.contract .editable { color: var(--pcm-lime); font-weight: 800; }
.contract .editable.navy { color: var(--pcm-navy); }
.contract ul.bullets li { margin-bottom: .35rem; }

/* Signature block */
.sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; }
@media (max-width: 800px) { .sig-grid { grid-template-columns: 1fr; } }
.sig-card { background: rgba(255,255,255,.80); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: var(--radius-lg); padding: 1.75rem; border: 1.5px solid rgba(255,255,255,.5); }
.sig-card h4 { color: var(--pcm-navy); margin-bottom: .5rem; font-size: 1rem; }

/* Read-only signature record (used on the post-sign confirmation card).
   Two-column label / value rows with a divider on top. */
.sig-record {
  border-top: 1px solid rgba(25,26,63,.1);
  padding-top: .85rem;
  margin-top: .85rem;
  font-size: .92rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.sig-record .row { display: flex; align-items: baseline; gap: .75rem; }
.sig-record .lbl {
  flex: 0 0 110px;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--pcm-mid);
}
.sig-record .val { color: var(--pcm-ink); word-break: break-word; }
@media (max-width: 600px) {
  .sig-record .row { flex-direction: column; gap: .15rem; }
  .sig-record .lbl { flex: none; }
}
.sig-card .pre {
  white-space: pre-wrap; font-size: .92rem; color: var(--pcm-mid);
  border-top: 1px solid rgba(25,26,63,.08); padding-top: 1rem; margin-top: 1rem;
}
.signature-pad {
  border: 1.5px dashed rgba(25,26,63,.28);
  border-radius: var(--radius-md);
  background: var(--pcm-cream);
  height: 160px;
  width: 100%;
  touch-action: none;
  cursor: crosshair;
}
.signature-actions { display: flex; justify-content: space-between; align-items: center; margin-top: .5rem; }

/* Stepper deliberately removed — keylines only. */

/* ---------------------- Print header / footer ----------------- */
.print-only { display: none; }
.print-header, .print-footer { display: none; }

/* ---------------------- Slideshow chrome --------------------- */
/* The viewer bottom bar — navy band, © legal + pattern, flush to viewport bottom */
.viewer-bottom {
  background: var(--pcm-navy);
  color: var(--pcm-cream);
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative;
}

/* Floating slide-nav — sits above the bottom band, green border, drop shadow */
.slide-nav.floating {
  position: fixed;
  bottom: 70px;        /* sits above the viewer-bottom band */
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex; align-items: center; gap: .35rem;
  background: var(--pcm-navy);
  color: var(--pcm-cream);
  padding: .4rem .55rem;
  border: 2px solid var(--pcm-lime);
  border-radius: var(--radius-pill);
  box-shadow: 0 14px 36px rgba(0,0,0,.45), 0 2px 8px rgba(193,216,47,.25);
}
.slide-nav.floating button, .slide-nav.floating .counter {
  background: transparent; color: var(--pcm-cream);
  border: 0; padding: .5rem .9rem;
  border-radius: var(--radius-pill);
  font: inherit; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
}
.slide-nav.floating button:hover { background: rgba(193,216,47,.18); color: var(--pcm-lime); }
.slide-nav.floating button:disabled { opacity: .35; cursor: not-allowed; }
.slide-nav.floating .counter { color: var(--pcm-lime); font-variant-numeric: tabular-nums; font-size: .9rem; padding: .5rem .6rem; }
.slide-nav.floating .toc-btn .dot { width: 6px; height: 6px; background: var(--pcm-lime); border-radius: 50%; }

.viewer-bottom .footer-line {
  font-size: .72rem; color: rgba(255,255,255,.55);
  text-align: center;
  padding: .65rem 1rem .55rem;
  line-height: 1.5;
}
.viewer-bottom .pcm-pattern { margin: 0; }
.viewer-bottom .footer-line a { color: rgba(255,255,255,.75); text-decoration: none; }
.viewer-bottom .footer-line a:hover { color: var(--pcm-lime); }

/* Lime keyline — flush at the bottom edge of the header (top instance)
   and at the top edge of the viewer-bottom band (bottom instance).
   Both fill width as slides advance. */
.slide-progress {
  height: 3px; background: var(--pcm-lime);
  transition: width .35s var(--ease);
  display: block; width: 0%;
}
.slide-progress--top { /* sits directly under the .site-header */ }
.slide-progress--bottom {
  /* In the bottom band — top edge of viewer-bottom */
  margin: 0 0 0;
}
.viewer-bottom .slide-progress--bottom { display: block; }

/* Contents overlay */
.toc {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(25,26,63,.94);
  color: var(--pcm-cream);
  display: none; align-items: center; justify-content: center;
  padding: 2rem;
}
.toc.open { display: flex; }
.toc .toc-inner { max-width: 640px; width: 100%; }
.toc h3 { color: #fff; font-size: 1.2rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.25rem; opacity: .65; }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: tocnum; }
.toc li { counter-increment: tocnum; }
.toc li button {
  display: flex; align-items: baseline; gap: 1rem;
  width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--pcm-cream);
  padding: .8rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: inherit; font-size: 1.4rem; font-weight: 800;
  cursor: pointer; transition: color .15s var(--ease), padding .15s var(--ease);
}
.toc li button:hover { color: var(--pcm-lime); padding-left: .5rem; }
.toc li button:before {
  content: counter(tocnum, decimal-leading-zero);
  font-size: .9rem; font-weight: 800; color: var(--pcm-lime);
  letter-spacing: .12em; min-width: 2.5em;
}
.toc li.current button { color: var(--pcm-lime); }
.toc .close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: transparent; border: 0; color: var(--pcm-cream); font-size: 2rem; cursor: pointer;
  padding: .25rem .75rem;
}

/* In iframe / embedded agreement mode: hide all chrome */
.embedded .site-header, .embedded .slide-nav, .embedded .site-footer, .embedded .slide-progress { display: none !important; }
.embedded .deck { height: auto; overflow: visible; }
.embedded .deck .slide { position: relative; opacity: 1; transform: none; pointer-events: auto; height: auto; }

/* Status pill in admin */
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .65rem; border-radius: var(--radius-pill);
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(25,26,63,.08); color: var(--pcm-navy);
}
.pill.signed { background: #d6efb1; color: #2e4708; }
.pill.viewed { background: var(--pcm-sky); }
.pill.draft  { background: rgba(25,26,63,.08); }
.pill.sent   { background: var(--pcm-lime); }
.pill.expired{ background: #fdd; color: #8a1a14; }

/* Table */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid rgba(25,26,63,.08); font-size: .95rem; }
.table th { font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pcm-mid); background: rgba(25,26,63,.04); }
.table tr:hover td { background: rgba(193,216,47,.08); }
.table a { color: var(--pcm-navy); font-weight: 700; }

/* Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes slideInLeft  { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }

/* Reveal: hidden until its slide is active, then fades in.
   CSS-driven so it never fails even if JS doesn't run. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.slide.active .reveal, .reveal.in { opacity: 1; transform: none; }
/* Outside the slideshow (PDF / embedded), reveals are always visible */
body.print-mode .reveal, body.embedded .reveal { opacity: 1 !important; transform: none !important; }

.deco.float-y { animation: floatY 6s ease-in-out infinite; }

/* Misc helpers */
.h-screen { min-height: 100vh; }
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-6 { margin-top: 3rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 3rem; }
.py-6 { padding-top: 3rem; padding-bottom: 3rem; }
.py-8 { padding-top: 4rem; padding-bottom: 4rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.w-full { width: 100%; }
.max-w-sm { max-width: 420px; margin: 0 auto; }
.max-w-md { max-width: 640px; margin: 0 auto; }
.max-w-lg { max-width: 880px; margin: 0 auto; }
.opacity-80 { opacity: .8; }
.uppercase { text-transform: uppercase; letter-spacing: .08em; }
.font-800 { font-weight: 800; }

/* -------- Login page -------- */
.login-shell {
  min-height: 100vh;
  display: grid; place-items: center;
  background: var(--pcm-paper);
  position: relative; overflow: hidden;
}
.login-shell::before {
  content:''; position: absolute; inset: 0;
  background: url('/images/bgrndimage-padelcourtbranded.jpg') center/cover no-repeat;
  opacity: .25;
}
.login-card {
  position: relative; z-index: 2;
  background: #fff; padding: 3rem 2.5rem; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-deep);
  max-width: 460px; width: calc(100% - 2rem);
}
.login-card .logo { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.login-card .logo img { height: 64px; }

/* ============================ MOBILE ===================================== */
@media screen and (max-width: 900px) {
  /* On mobile, abandon the locked-viewport slideshow.
     The body scrolls naturally, header sticks to top, floating nav stays at the
     bottom of the viewport, and the legal footer band sits at the end of the
     content (revealed when you scroll past the active slide). */
  body.viewer {
    height: auto !important;
    overflow: auto !important;
    display: block !important;
  }
  body.viewer .site-header { position: sticky; top: 0; z-index: 50; flex: none; }
  .deck { position: static !important; height: auto !important; overflow: visible !important; display: block !important; }
  body.viewer .deck .slide {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: calc(100vh - 64px) !important;   /* fill viewport at least, can grow taller */
    transform: none !important;
    transition: opacity .25s var(--ease) !important;
    overflow: visible !important;
    display: none !important;
  }
  body.viewer .deck .slide.active {
    display: block !important;
    opacity: 1 !important;
  }
  /* Footer band: natural at end of content, NOT fixed/sticky */
  .viewer-bottom { position: static !important; }
  /* slide-progress at the very top under header — make it sticky too */
  .slide-progress--top { position: sticky; top: 64px; z-index: 49; }

  /* Header: tighter, stack logos */
  .site-header { padding: .55rem .85rem; }
  .site-header .logos { gap: .65rem; }
  .site-header .logos .pcm-logo { height: 38px; }
  .site-header .logos .club-mark { height: 28px; max-width: 110px; }
  .site-header .logos .sep { height: 26px; }
  .site-header .actions { gap: .35rem; }
  .site-header .actions .btn { padding: .55rem .9rem; font-size: .8rem; }
  .site-header .actions .signout { display: none; }

  /* Hide the secondary "Download PDF" button on mobile — keep only Sign agreement */
  .site-header .actions .btn-ghost { display: none; }

  /* Type scale: shrink hero/H2 */
  h1 { font-size: clamp(2rem, 8vw, 3rem); }
  h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  h3 { font-size: 1.15rem; }
  body { font-size: 16px; }

  /* Slide padding tighter + allow vertical scroll within each slide so
     tall content (e.g. cards stacked single-column) is reachable. */
  .deck .slide {
    padding: 2rem 0 5rem;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .slide-inner.container, .container { padding: 0 18px; }

  /* Card / tile padding */
  .card { padding: 1.25rem; }
  .tile { padding: 1rem; }

  /* Grids — single column on phones */
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; gap: .8rem !important; }
  .grid { gap: 1rem; }

  /* Revenue split: keep 2 cols but tighter */
  .split-pct { grid-template-columns: 1fr 1fr; }
  .split-pct .half { padding: 1.25rem .5rem; min-height: 140px; }
  .split-pct .half .num { font-size: clamp(2.2rem, 9vw, 3.2rem); }

  /* Cover: stack the lockup */
  .cover .lockup { gap: .8rem; }
  .cover .lockup img { max-height: 56px !important; }
  .cover .lockup .x { font-size: 1rem; }

  /* Floating contents nav: smaller, hug bottom band */
  .slide-nav.floating {
    bottom: 56px;
    padding: .25rem .35rem;
    font-size: .85rem;
  }
  .slide-nav.floating button, .slide-nav.floating .counter {
    padding: .35rem .6rem;
  }
  .slide-nav.floating .toc-btn { padding: .35rem .55rem; }
  .slide-nav.floating .toc-btn .dot { width: 5px; height: 5px; }

  /* Bottom band: keep just legal + pattern */
  .viewer-bottom .footer-line { font-size: .65rem; padding: .45rem .75rem .35rem; }
  .pcm-pattern { height: 14px; background-size: auto 14px; }

  /* Agreement slide on mobile: stack, iframe has fixed sensible height */
  #agreement .agreement-screen {
    display: block !important;
    height: auto !important;
  }
  #agreement .iframe-wrap { height: 60vh !important; }
  #agreement iframe { min-height: 60vh !important; }

  /* Sign slide: stack everything */
  .sig-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .sig-card { padding: 1.1rem; }
  .signature-pad { height: 110px !important; }
  #sign .flex.gap-3 { flex-direction: column-reverse; gap: .5rem !important; }
  #sign .flex.gap-3 .btn { width: 100%; }

  /* TOC overlay: bigger tap targets */
  .toc li button { font-size: 1.1rem; padding: .8rem 0; }

  /* Login card: full-width-ish */
  .login-card { padding: 2rem 1.5rem; }
  .login-card .logo img { height: 48px; }

  /* Admin: stack table cells visually */
  .table th, .table td { padding: .7rem .5rem; font-size: .85rem; }
  .table th { font-size: .7rem; }

  /* Admin pages: tighten cards */
  .card { padding: 1.5rem 1.25rem; }
}

/* Extra-small phones */
@media screen and (max-width: 480px) {
  .site-header .logos .club-mark { display: none; }
  .site-header .logos .sep { display: none; }
  .site-header .actions .btn-lime { padding: .5rem .8rem; font-size: .78rem; }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.5rem; }
  .slide-nav.floating .counter { display: none; }
}

/* ============================ PRINT ====================================== */
@media print {
  /* Zero @page margin so there is no white border on the printed page.
     Headers/footers sit inside the slide via padding. */
  @page { size: A4 landscape; margin: 0; }

  /* Make print header + footer visible in PDF and repeat on every page via position: fixed.
     Chrome's print engine duplicates fixed-position elements at top/bottom of each page. */
  .print-only { display: block !important; }
  .print-header {
    display: flex !important;
    align-items: center; justify-content: space-between;
    position: fixed !important;
    top: 0; left: 0; right: 0;
    height: 14mm;
    padding: 0 12mm;
    background: var(--pcm-navy) !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
    z-index: 1000;
  }
  .print-header img { height: 9mm; width: auto; }
  .print-header img.club-mark { height: 7mm; max-width: 44mm; object-fit: contain; }
  .print-footer {
    display: block !important;
    position: fixed !important;
    bottom: 0; left: 0; right: 0;
    height: 14mm;
    background: var(--pcm-navy) !important;
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
    z-index: 1000;
    padding: 0;
  }
  .print-footer .pcm-pattern { height: 5mm !important; background-size: auto 5mm !important; }
  .print-footer .legal-line {
    font-size: 7pt; color: rgba(255,255,255,.7);
    padding: 2mm 12mm 0;
    text-align: center;
    line-height: 1.35;
  }


  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body, body.viewer, body.print-mode {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    font-size: 12pt !important;
  }

  /* Hide all interactive chrome */
  .site-header, .viewer-bottom, .slide-nav, .slide-progress, .toc, .no-print, .site-footer { display: none !important; }
  iframe { display: none !important; }

  /* Deck flows naturally — no fixed viewport height */
  .deck { display: block !important; height: auto !important; overflow: visible !important; background: transparent !important; position: static !important; }

  /* Each slide = one A4 landscape page (297×210mm).
     Forced size + page-break-after = exactly one slide per page. */
  .deck .slide, body.print-mode .slide {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    width: 297mm !important;
    height: 210mm !important;
    max-height: 210mm !important;
    page-break-after: always;
    page-break-inside: avoid;
    break-after: page;
    break-inside: avoid;
    overflow: hidden !important;
    padding: 20mm 0 22mm !important;  /* leave room for the fixed header (top) + footer (bottom) */
    margin: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
  }
  .deck .slide:last-child, body.print-mode .slide:last-child {
    page-break-after: auto; break-after: auto;
  }

  /* Agreement: single A4 landscape page, full contract in two columns so it
     fits without spilling (which previously cut clause 7 + added a blank page). */
  #agreement, body.print-mode #agreement {
    height: 210mm !important;
    max-height: 210mm !important;
    overflow: hidden !important;
    page-break-after: auto !important;   /* last slide — no trailing blank page */
    break-after: auto !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    background: #fff !important;
    padding: 15mm 0 16mm !important;      /* clears the 14mm header/footer overlays */
  }
  #agreement.has-bg { background: #fff !important; background-image: none !important; }
  #agreement .agreement-print { display: block !important; }
  #agreement .agreement-screen { display: none !important; }
  #agreement .slide-inner { padding: 0 10mm !important; }
  #agreement .agreement-print > .slide-inner > .text-center { margin-bottom: 2.5mm !important; }
  #agreement h2 { color: var(--pcm-navy) !important; font-size: 13pt !important; margin: 0 !important; }
  #agreement .agreement-print .eyebrow { margin-bottom: 1mm !important; }
  #agreement .text-mid { color: var(--pcm-mid) !important; font-size: 7pt !important; margin: 0 !important; }
  #agreement .eyebrow { color: var(--pcm-navy) !important; background: var(--pcm-lime) !important; }

  /* Three-column contract — fits all seven clauses on one landscape page */
  #agreement .contract {
    background: #fff !important;
    color: var(--pcm-ink) !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    column-count: 3;
    column-gap: 7mm;
    column-fill: balance;
  }
  #agreement .contract > p:first-child { column-span: all; margin-bottom: .3em !important; }
  #agreement .contract h3 {
    color: var(--pcm-navy) !important;
    font-size: 8.5pt !important;
    margin: .45em 0 .2em !important;
    break-after: avoid; page-break-after: avoid;
  }
  #agreement .contract h3:first-of-type { margin-top: 0 !important; }
  #agreement .contract p, #agreement .contract li {
    color: var(--pcm-ink) !important;
    font-size: 7pt !important;
    line-height: 1.25 !important;
    margin: 0 0 .2em !important;
  }
  #agreement .contract ul.bullets { margin: 0 !important; }
  #agreement .contract ul.bullets li { margin-bottom: .15em !important; padding-left: .9rem !important; break-inside: avoid; }
  #agreement .contract ul.bullets li::before { top: .4em; width: .4rem; height: .4rem; }
  /* Keep each clause (heading + its list) together where possible */
  #agreement .contract h3 + ul { break-before: avoid; }

  /* Tighter print spacing inside slides */
  .slide .slide-inner { padding: 12mm 14mm !important; max-width: 100% !important; box-sizing: border-box; }
  .slide-inner.container, .container { width: 100% !important; max-width: 100% !important; }
  .slide h1 { font-size: 32pt !important; line-height: 1.05 !important; margin: 0 0 .35em !important; }
  .slide h2 { font-size: 24pt !important; line-height: 1.05 !important; margin: 0 0 .4em !important; }
  .slide h3 { font-size: 14pt !important; line-height: 1.15 !important; margin: 0 0 .5em !important; }
  .slide p, .slide li { font-size: 11pt !important; line-height: 1.45 !important; margin: 0 0 .35em !important; }
  .slide .eyebrow { font-size: 9pt !important; padding: .25rem .6rem !important; }

  /* Tighten cards/tiles for print */
  .card { padding: 1.2rem 1.3rem !important; }
  .card h3 { margin-bottom: .5rem !important; }
  .tile { padding: .8rem 1rem !important; }
  .grid { gap: .8rem !important; display: grid !important; }
  /* Force grid columns even if Chrome's print viewport is narrow */
  .grid.grid-2 { grid-template-columns: 1fr 1fr !important; }
  .grid.grid-3 { grid-template-columns: 1fr 1fr 1fr !important; }
  /* Sign slide grid: keep two columns */
  .sig-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
  .mt-6 { margin-top: 1rem !important; }
  .mt-4 { margin-top: .8rem !important; }
  .mb-4 { margin-bottom: .8rem !important; }
  .mb-6 { margin-bottom: 1rem !important; }

  /* Background colour fidelity */
  .slide .bg-image, .slide.dark, .slide.bg-navy-flat, .slide.bg-lime-flat, .slide.bg-paper-flat,
  .card, .card.dark, .card.lime, .card.sky, .tile, .split-pct .half,
  .pcm-pattern, .eyebrow, .sig-card, .sig-card--screens, .contract, .deco {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Flatten everything Adobe re-decodes layer-by-layer:
     no box-shadow, no drop-shadow, no backdrop-filter, no transforms. */
  *, *::before, *::after {
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* Single-layer overlay instead of bg-image + ::after pseudo-element.
     Render the navy darkening directly on the bg-image div with a solid gradient
     so Chrome flattens it into the JPEG layer instead of stacking transparency. */
  .slide .bg-image {
    background-blend-mode: multiply;
    background-color: rgba(25,26,63,.72);
  }
  .slide .bg-image::after { display: none !important; }

  .slide.dark, .slide-inner.dark { color: #fff !important; }
  .slide.dark h1, .slide.dark h2, .slide.dark h3,
  .slide-inner.dark h1, .slide-inner.dark h2, .slide-inner.dark h3 { color: var(--pcm-lime) !important; }

  /* Card / tile internal headings always navy in print so they stay readable
     on the light/translucent card background. Lime and sky cards already use
     navy text. Dark cards keep cream. */
  .slide.dark .card h1, .slide.dark .card h2, .slide.dark .card h3,
  .slide-inner.dark .card h1, .slide-inner.dark .card h2, .slide-inner.dark .card h3,
  .slide.dark .tile h4, .slide-inner.dark .tile h4,
  .slide.dark .sig-card h4, .slide-inner.dark .sig-card h4 { color: var(--pcm-navy) !important; }
  .slide.dark .card p, .slide.dark .card li,
  .slide-inner.dark .card p, .slide-inner.dark .card li,
  .slide.dark .tile p, .slide-inner.dark .tile p { color: var(--pcm-ink) !important; }

  /* Dark-variant cards keep cream/white internal text */
  .slide.dark .card.dark h1, .slide.dark .card.dark h2, .slide.dark .card.dark h3,
  .slide-inner.dark .card.dark h1, .slide-inner.dark .card.dark h2, .slide-inner.dark .card.dark h3 { color: #fff !important; }
  .slide.dark .card.dark p, .slide.dark .card.dark li,
  .slide-inner.dark .card.dark p, .slide-inner.dark .card.dark li { color: var(--pcm-cream) !important; }

  .reveal { opacity: 1 !important; transform: none !important; }

  /* Cover slide: bigger headline ok */
  #cover h1 { font-size: 42pt !important; }

  /* Revenue split pct numbers: keep big */
  .split-pct .half .num { font-size: 38pt !important; }

  /* ----- Print fit for slide 5 (Revenue) — dense content ----- */
  #revenue .slide-inner { padding: 10mm 14mm !important; }
  #revenue h2 { font-size: 20pt !important; margin-bottom: .35em !important; }
  #revenue h3 { font-size: 12pt !important; margin-bottom: .35em !important; }
  #revenue p  { font-size: 10pt !important; margin-bottom: .25em !important; }
  /* Widen the intro paragraph so it sits on fewer lines */
  #revenue > .slide-inner > .reveal > p { max-width: 100% !important; }

  /* Hero split (core) — biggest numbers */
  #revenue .split-pct--hero .half { min-height: 80px !important; padding: .9rem 1rem !important; }
  #revenue .split-pct--hero .half .num { font-size: 32pt !important; }
  #revenue .split-pct--hero .half .lbl { font-size: 9pt !important; }

  /* Compact splits (screens, originated) — smaller numbers */
  #revenue .split-pct--compact .half { min-height: 50px !important; padding: .5rem .8rem !important; }
  #revenue .split-pct--compact .half .num { font-size: 18pt !important; }
  #revenue .split-pct--compact .half .lbl { font-size: 7.5pt !important; }

  /* Legacy size-agnostic fallback so any unstyled split shrinks too */
  #revenue .split-pct .half { min-height: 50px !important; padding: .5rem .8rem !important; }
  #revenue .split-pct .half .num { font-size: 18pt !important; }
  #revenue .split-pct .half .lbl { font-size: 7.5pt !important; }
  /* Re-apply hero overrides after the fallback so they win */
  #revenue .split-pct--hero .half { min-height: 80px !important; padding: .9rem 1rem !important; }
  #revenue .split-pct--hero .half .num { font-size: 32pt !important; }
  #revenue .split-pct--hero .half .lbl { font-size: 9pt !important; }

  #revenue .tile { padding: .55rem .8rem !important; }
  #revenue .tile h4 { font-size: 11pt !important; margin-bottom: .15rem !important; }
  #revenue .mt-4 { margin-top: .55rem !important; }
  #revenue .mt-3 { margin-top: .4rem !important; }
  #revenue .mt-2 { margin-top: .3rem !important; }

  /* ----- Print fit for slide 7 (Screens) — 4-card grid + lower row ----- */
  #screens .slide-inner { padding: 10mm 14mm !important; }
  #screens h2 { font-size: 18pt !important; margin-bottom: .25em !important; line-height: 1.05 !important; }
  #screens h3 { font-size: 11pt !important; margin-bottom: .25em !important; }
  #screens p  { font-size: 9.5pt !important; margin-bottom: .2em !important; line-height: 1.35 !important; }
  #screens .card { padding: .65rem .8rem !important; }
  #screens .grid { gap: .45rem !important; }
  #screens .mt-6 { margin-top: .5rem !important; }
  #screens .mt-4 { margin-top: .5rem !important; }
  /* The closing optional paragraph below the last grid isn't critical — repeats other slides */
  #screens > .slide-inner > p.opacity-80.mt-6 { display: none !important; }

  /* Sign slide tweaks for print fit */
  #sign .signature-pad { height: 60px !important; }
  #sign .sig-card { padding: .8rem 1rem !important; }
  #sign .sig-card h4 { font-size: 10pt !important; }

  /* Signed sign slide — tight layout so it fits one A4 landscape page */
  #sign .slide-inner { padding: 6mm 10mm !important; }
  #sign h3 { font-size: 16pt !important; margin: 0 0 .25em !important; text-align: center !important; }
  #sign .pill.signed { font-size: 8pt !important; padding: .25rem .7rem !important; margin-bottom: .35rem !important; }
  #sign .sig-grid { gap: 8mm !important; margin-top: 4mm !important; }
  #sign .sig-card .sig-record { margin-top: .4rem !important; padding-top: .4rem !important; gap: .15rem !important; }
  #sign .sig-card .sig-record .row { font-size: 9pt !important; }
  #sign .sig-card .sig-record .lbl { font-size: 7pt !important; flex: 0 0 90px !important; }
  #sign .sig-card img { max-height: 50px !important; }
  #sign .opacity-80 { font-size: 9pt !important; line-height: 1.35 !important; }
  /* Centre the intro / welcome block on the printed page */
  #sign .reveal.text-center,
  #sign .reveal.text-center p,
  #sign .reveal.text-center h3 { text-align: center !important; }
  #sign .reveal.text-center p { max-width: 160mm !important; margin: 0 auto !important; }
  /* Hide the small reminder line at the bottom — redundant in PDF */
  #sign .reveal.text-center.mt-3 { display: none !important; }

  /* Agreement contract spacing tightened */
  .contract { padding: 0 !important; box-shadow: none !important; background: transparent !important; }
  .contract p, .contract li { font-size: 10.5pt !important; }
  .contract h3 { font-size: 12pt !important; margin-top: 1em !important; }

  /* Decos hidden in print to remove odd cropping */
  .deco { display: none !important; }
}

/* ==========================================================================
   BRANDS additions. Deliberately does NOT redefine .tile/.card/.btn — those
   already exist above and the deck relies on them (frosted tile, navy h4).
   ========================================================================== */

/* Big stat number, used inside the existing .tile / .card (both light) */
.net-num { font-family:'Cabinet Grotesk', system-ui, sans-serif; font-weight:800; font-size:2.4rem;
           line-height:1; letter-spacing:-.02em; color:var(--pcm-navy); }
.net-cap { margin-top:.35rem; font-size:.9rem; color:var(--pcm-mid); }

/* Tables sitting inside a .card on a dark slide must stay ink, not inherit white */
.slide-inner.dark .card table,
.slide-inner.dark .card th,
.slide-inner.dark .card td { color: var(--pcm-ink); }
.slide-inner.dark .card th { color: var(--pcm-navy); }

/* Numeric columns */
td.num, th.num { text-align:right; white-space:nowrap; }
.unit { display:block; font-size:.72rem; color:var(--pcm-mid); font-weight:400; }
.quote-table tfoot td { font-weight:700; }
.quote-table tfoot .grand td { font-size:1.05rem; color:var(--pcm-navy); border-top:2px solid var(--pcm-navy); }
.quote-table tfoot .disc td { color:#3a7a1f; font-weight:600; }

/* Signed-clubs logo wall */
.logo-wall { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.75rem; }
.logo-cell { display:flex; align-items:center; justify-content:center; min-height:78px; padding:.9rem;
             background:#fff; border:1px solid rgba(25,26,63,.10); border-radius:var(--radius-md); }
.logo-cell img { max-width:100%; max-height:48px; object-fit:contain; }
.logo-cell .logo-name { font-weight:700; color:var(--pcm-navy); text-align:center; font-size:.9rem; }

/* "What it looks like" shots */
.look-shot { margin:0; }
.look-shot img { width:100%; height:240px; object-fit:cover; border-radius:var(--radius-md); }
.look-shot figcaption { margin-top:.5rem; font-size:.88rem; }
.look-shot .ph { color:var(--pcm-lime); font-weight:700; }

/* Tick / step lists */
ul.ticks { list-style:none; padding:0; margin:0; }
ul.ticks li { position:relative; padding-left:1.5rem; margin-bottom:.5rem; }
ul.ticks li:before { content:''; position:absolute; left:0; top:.5em; width:.7rem; height:.7rem;
                     background:var(--pcm-lime); clip-path:polygon(0 0,100% 50%,0 100%); }
ol.steps { padding-left:1.2rem; } ol.steps li { margin-bottom:.5rem; }

/* Audience panel */
.aud-k { font-family:'Cabinet Grotesk', system-ui, sans-serif; font-weight:800; font-size:1.3rem;
         color:var(--pcm-navy); line-height:1.1; }
.aud-v { font-size:.85rem; color:var(--pcm-mid); margin-top:.2rem; }

/* ==========================================================================
   ADMIN / REP CONSOLE — compact layer for laptop screens.
   Scoped to <body class="admin-ui"> so the client-facing deck is untouched.
   ========================================================================== */
.admin-ui { font-size:15px; }
.admin-ui .site-header { padding:.45rem 1rem; }
.admin-ui .site-header .logos .pcm-logo { height:34px; }
.admin-ui .site-header .actions { gap:.4rem; display:flex; align-items:center; flex-wrap:wrap; }
.admin-ui .btn { padding:.45rem .9rem; font-size:.82rem; }
.admin-ui .signout { font-size:.82rem; margin-left:.4rem; }

.admin-ui h1 { font-size:1.6rem; }
.admin-ui h2 { font-size:1.45rem; margin-bottom:.5rem; }
.admin-ui h3 { font-size:1.05rem; }
.admin-ui h4 { font-size:.95rem; }
.admin-ui .eyebrow { font-size:.68rem; padding:.2rem .55rem; }

.admin-ui .py-6 { padding-top:1.25rem; padding-bottom:2rem; }
.admin-ui .card { padding:1.1rem 1.25rem; border-radius:12px; }
.admin-ui .mb-6 { margin-bottom:1.25rem; }
.admin-ui .mt-6 { margin-top:1.25rem; }

/* Forms: tighter rows, roomier inputs */
.admin-ui .field { margin-bottom:.7rem; gap:.25rem; }
.admin-ui .field label { font-size:.7rem; letter-spacing:.03em; }
.admin-ui .field input, .admin-ui .field select, .admin-ui .field textarea,
.admin-ui input[type=text], .admin-ui input[type=email], .admin-ui input[type=password],
.admin-ui input[type=number], .admin-ui input[type=date], .admin-ui select, .admin-ui textarea {
  width:100%; padding:.45rem .6rem; font-size:.9rem; border-radius:8px;
  border:1.5px solid rgba(25,26,63,.18); background:#fff; color:var(--pcm-ink); font-family:inherit;
}
.admin-ui .table th, .admin-ui .table td { padding:.5rem .6rem; font-size:.86rem; }
.admin-ui .table th { font-size:.7rem; }
.admin-ui .pill { font-size:.7rem; padding:.15rem .5rem; }

/* Form grids: 2 columns on laptops, 4 only on wide screens */
.admin-ui .fgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
.admin-ui .sgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
.admin-ui .crow  { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; margin-bottom:.5rem; }
@media (min-width:1500px) {
  .admin-ui .fgrid { grid-template-columns:repeat(4,1fr); }
  .admin-ui .crow  { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:760px) {
  .admin-ui .fgrid, .admin-ui .sgrid, .admin-ui .crow { grid-template-columns:1fr; }
}

/* Network stat strip */
.net-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:.6rem; margin-bottom:1rem; }
.net-strip .tile { padding:.7rem .85rem; }
.net-strip .net-num { font-size:1.5rem; }
.net-strip .net-cap { font-size:.75rem; }

/* Logo upload control */
.logo-field { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.logo-field .logo-prev { height:44px; max-width:130px; object-fit:contain; background:#fff;
                         border:1px solid rgba(25,26,63,.12); border-radius:8px; padding:.25rem; }
.logo-field input[type=file] { font-size:.82rem; }

/* ==========================================================================
   Console nav (consistent across every admin/rep page) + home dashboard
   ========================================================================== */
.console-header { padding:.4rem 1.1rem; }
.console-header .logos { text-decoration:none; }
.console-nav { display:flex; align-items:center; gap:.15rem; flex-wrap:wrap; }
.console-nav .cnav {
  color:rgba(244,242,238,.82); text-decoration:none; font-weight:700; font-size:.82rem;
  padding:.4rem .7rem; border-radius:var(--radius-pill); white-space:nowrap; line-height:1;
}
.console-nav .cnav:hover { color:#fff; background:rgba(255,255,255,.10); }
.console-nav .cnav.active { color:var(--pcm-navy); background:var(--pcm-lime); }
.console-nav .cnav.signout { color:rgba(244,242,238,.6); font-weight:600; }
.console-nav .cnav.signout:hover { color:#fff; background:transparent; }

/* Home dashboard panels */
.home-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-bottom:1.25rem; }
@media (max-width:1000px){ .home-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .home-grid { grid-template-columns:1fr; } }
.home-panel { display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid rgba(25,26,63,.10);
  border-radius:var(--radius-lg); padding:1.3rem 1.4rem; box-shadow:var(--shadow-soft); transition:transform .12s var(--ease), box-shadow .12s var(--ease); }
.home-panel:hover { transform:translateY(-2px); box-shadow:var(--shadow-deep); }
.home-panel .hp-eyebrow { font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--pcm-mid); }
.home-panel h3 { margin:.25rem 0 .6rem; color:var(--pcm-navy); }
.home-panel .hp-stat { font-family:'Cabinet Grotesk',system-ui,sans-serif; font-weight:800; font-size:2.1rem; color:var(--pcm-navy); line-height:1; }
.home-panel .hp-row { display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:.4rem; }
.home-panel .hp-sub { font-size:.85rem; color:var(--pcm-mid); }
.home-panel .hp-cta { display:inline-block; margin-top:.9rem; font-weight:700; font-size:.85rem; color:var(--pcm-navy); }
.home-links { display:flex; gap:.6rem; flex-wrap:wrap; }
.home-links a { text-decoration:none; }

/* Sortable + searchable list */
.list-toolbar { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:.9rem; }
.list-toolbar input[type=search], .list-toolbar input.search {
  padding:.5rem .8rem; border:1.5px solid rgba(25,26,63,.18); border-radius:var(--radius-pill);
  font:inherit; min-width:260px; background:#fff; }
.list-toolbar select { padding:.45rem .7rem; border:1.5px solid rgba(25,26,63,.18); border-radius:8px; font:inherit; background:#fff; }
th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable:after { content:' \2195'; opacity:.35; font-size:.8em; }
th.sortable.asc:after { content:' \2191'; opacity:.9; }
th.sortable.desc:after { content:' \2193'; opacity:.9; }
tr.row-link { cursor:pointer; }
tr.row-link:hover td { background:rgba(193,216,47,.10); }

/* Section headings inside the big club form */
.form-section { border-top:1px solid rgba(25,26,63,.10); margin-top:1.25rem; padding-top:1rem; }
.form-section:first-of-type { border-top:0; margin-top:0; padding-top:0; }
.form-section h3 { font-size:1rem; color:var(--pcm-navy); margin-bottom:.7rem; }
.chk-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem .9rem; }
@media (max-width:760px){ .chk-grid { grid-template-columns:1fr 1fr; } }
.chk-grid label { display:flex; align-items:center; gap:.45rem; font-size:.9rem; font-weight:600;
  text-transform:none; letter-spacing:0; color:var(--pcm-ink); }
.social-row { display:grid; grid-template-columns:1.4fr .8fr; gap:.5rem; align-items:end; }

/* Per-court editor (club page) */
.courts-head, .court-row { display:grid; grid-template-columns: 1.3fr 1fr 1.2fr .7fr .8fr 1.2fr 32px; gap:.4rem; align-items:center; }
.courts-head { font-size:.68rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--pcm-mid); padding:0 .1rem .35rem; }
.court-row { margin-bottom:.4rem; }
.court-row input, .court-row select { padding:.4rem .5rem; border:1.5px solid rgba(25,26,63,.18); border-radius:8px; font:inherit; font-size:.88rem; background:#fff; width:100%; }
.court-row .court-chk { display:flex; justify-content:center; align-items:center; }
.court-del { border:none; background:#f2ecea; color:#b23; border-radius:8px; cursor:pointer; font-size:1.1rem; line-height:1; height:34px; }
.court-del:hover { background:#f6d9d4; }
@media (max-width:820px){
  .courts-head { display:none; }
  .court-row { grid-template-columns:1fr 1fr; gap:.35rem; padding:.6rem; border:1px solid rgba(25,26,63,.12); border-radius:10px; background:#fff; }
  .court-row .court-del { grid-column:span 2; }
}

/* ---------------------------------------------------------------------------
   Local Sponsor Outreach deck
   --------------------------------------------------------------------------- */
.slide-inner .accent { color: var(--pcm-lime); }
.slide-inner .line-white { color:#fff; }

/* Slide 1 — cover: headline ~20% smaller, player cutout grounded to baseline */
.local-cover h1 { font-size: clamp(2.08rem, 4.48vw, 3.84rem); }
.slide .deco.right.baseline { right:0; bottom:0; width:40%; max-width:520px; filter:drop-shadow(0 18px 28px rgba(0,0,0,.28)); }

/* Slide 2 — court map sits on the image (no card), reversed text */
.court-map { display:grid; grid-template-columns:minmax(190px,280px) 1fr; gap:2.4rem; align-items:center; }
.court-map__svg { width:100%; }
.court-map__svg svg { width:100%; height:auto; max-height:430px; display:block; }
.court-map__legend { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1.8rem; }
.court-map__legend li { display:flex; align-items:flex-start; gap:.6rem; }
.court-map__num {
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:var(--pcm-lime); color:var(--pcm-navy);
  font-weight:800; font-size:.9rem; display:flex; align-items:center; justify-content:center;
}
.court-map__text { display:flex; flex-direction:column; line-height:1.25; }
.court-map__text strong { color:var(--pcm-lime); font-size:1rem; }
.court-map__text em { color:#fff; font-style:normal; font-size:.84rem; opacity:.92; }
.local-court .court-map__foot { width:100%; max-width:none; font-size:1.05rem; color:#fff; opacity:.9; }

/* Slide 3 — panels slightly translucent so the image hints through */
.local-more .tile { background:rgba(255,255,255,.55); }
.tile.tile-cta { background:var(--pcm-lime); border-color:var(--pcm-lime); }
.tile.tile-cta h4, .tile.tile-cta p { color:var(--pcm-navy); }
/* Full-width closing note, flush with the grid, opaque white, centred, uniform gap */
.local-more .more-note { width:100%; margin-top:1.5rem; background:#fff; text-align:center; }
.local-more .more-note p { color:var(--pcm-navy); }

/* Slide 4 — CTA panel (left) + form (right) */
.local-interest .nowrap-lg { white-space:nowrap; }
.interest-cols { display:grid; grid-template-columns:minmax(280px,1fr) minmax(320px,1.15fr); gap:1.6rem; align-items:stretch; }
.cta-panel { position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft); min-height:340px; display:flex;
  background:rgba(25,26,63,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14); }
.cta-panel__body { position:relative; z-index:1; padding:2rem; display:flex; flex-direction:column; justify-content:flex-start; color:#fff; }
.cta-panel__body h3 { color:#fff; margin-bottom:.6rem; }
.cta-panel__body p { color:#fff; opacity:.9; font-size:.98rem; margin:0 0 1.2rem; }
.cta-contact { border-top:1px solid rgba(255,255,255,.28); padding-top:1rem; display:flex; flex-direction:column; gap:.3rem; }
.cta-contact__name { font-weight:800; font-size:1.05rem; color:#fff; }
.cta-contact a { color:var(--pcm-lime); font-weight:600; text-decoration:none; }
.cta-contact a:hover { text-decoration:underline; }
.interest-form { align-self:stretch; }

@media (max-width:820px){
  .court-map { grid-template-columns:1fr; gap:1.4rem; }
  .court-map__svg svg { max-height:360px; }
  .court-map__legend { grid-template-columns:1fr; }
  .interest-cols { grid-template-columns:1fr; }
  .local-interest .nowrap-lg { white-space:normal; }
}
@media print {
  .court-map { grid-template-columns:minmax(180px,260px) 1fr; }
  .court-map__text strong { color:var(--pcm-lime) !important; }
  .court-map__text em { color:#fff !important; }
  .local-court .court-map__foot { color:#fff !important; }
  .cta-panel { background:rgba(25,26,63,.62) !important; }
  .cta-panel__body, .cta-panel__body h3, .cta-panel__body p, .cta-contact__name { color:#fff !important; }
  .cta-contact a { color:var(--pcm-lime) !important; }
  .interest-cols { grid-template-columns:1fr 1fr; }
  .local-more .tile { background:rgba(255,255,255,.62) !important; }
  .local-more .more-note { background:#fff !important; }
  .local-more .more-note p { color:var(--pcm-navy) !important; }
}