/* Hallmark · shape: Map / Diagram · genre: playful · theme: Piste (deal 3/3, seed rally-pickleball-club-management-e2d5·5c212630·2026-10-22·r0) · job: sign up · draw: 8ef0ba · hero: Settled · nav: slab · footer: colophon block · imagery: the product · signature: evening court timeline · piste: snow · data: sample · axes: light/display-condensed/cool · posture: committed · hero-review: in-thread, ship · finish-review: skipped, prototype fast mode · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: small product text, preview limited to four readable courts */
/* Hallmark · waive 39b · court schedule buttons are app controls · court bookings use compact buttons with expanded targets */
@import url("./tokens.css");
@import url("./base.css");

a, button { -webkit-tap-highlight-color: var(--color-clear); }
button, a, summary, input, select { touch-action: manipulation; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
button { cursor: pointer; }
button:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
button[aria-busy="true"] { cursor: progress; }
button:active, .btn:active { transform: translateY(1px); }
svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: absolute; inset: -100px auto auto 16px; z-index: var(--z-toast); padding: var(--space-sm) 20px; background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: 12px; }
.btn { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: 0 var(--space-lg); border: 2px solid var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); font: 800 18px/1 var(--font-display); text-transform: uppercase; white-space: nowrap; text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.btn.secondary { background: var(--color-clear); border-color: var(--color-ink); color: var(--color-ink); }
.btn.secondary:hover { background: var(--color-paper-3); }
.text-link { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; font-weight: 500; white-space: nowrap; min-height: 48px; }
.text-link:hover { text-decoration: underline; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); font: 800 42px/1 var(--font-display); letter-spacing: -1.5px; text-decoration: none; }
.wordmark svg { width: 34px; height: 34px; fill: currentColor; stroke: none; }
.site-header { background: var(--color-ink); color: var(--color-paper); }
.nav { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links>a:not(.btn) { font-size: 16px; text-decoration: none; white-space: nowrap; }
.nav-links>a:not(.btn):hover { text-decoration: underline; }
.nav .login { margin-left: var(--space-xl); }
.hero { display: flex; align-items: center; min-height: calc(100svh - 88px); padding-block: 72px 88px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(64px, 7.9vw, 114px); text-transform: uppercase; line-height: 1; letter-spacing: -1.2px; max-width: 11ch; }
.hero .lead { font-size: 20px; max-width: 31ch; margin-top: 28px; }
.hero-actions { display: flex; align-items: center; gap: var(--space-lg); margin-top: 32px; flex-wrap: wrap; }
.trial-note { color: var(--color-muted); font-size: 14px; margin-top: var(--space-md); }
.hero-product { min-width: 0; padding: var(--space-lg); border: 2px solid var(--color-ink); background: var(--color-white); position: relative; }
.hero-product::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; background: var(--color-paper-3); z-index: -1; }
.preview-top { display: flex; align-items: center; gap: var(--space-xs); }
.club-symbol { display: grid; place-items: center; background: var(--color-ink); color: var(--color-paper); width: 38px; height: 38px; font: 800 18px var(--font-display); }
.preview-top strong { font-size: 15px; font-weight: 500; display: block; line-height: 1.2; }
.preview-top div>span { color: var(--color-muted); font-size: 12px; }
.preview-sample { margin-left: auto; font-size: 12px; padding: var(--space-2xs) var(--space-xs); background: var(--color-paper-2); }
.preview-title { padding-block: 32px var(--space-lg); }
.preview-title h2 { font-size: 38px; text-transform: uppercase; }
.preview-title>span { display: block; margin-top: var(--space-xs); font-size: 14px; color: var(--color-muted); }
.preview-toolbar { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-ink); }
.preview-toolbar>span { color: var(--color-muted); }
.mini-times { display: grid; grid-template-columns: 62px repeat(4,minmax(0,1fr)); font-size: 11px; color: var(--color-muted); padding-block: var(--space-sm) var(--space-xs); }
.mini-row { display: grid; grid-template-columns: 62px minmax(0,1fr); min-height: 70px; align-items: stretch; }
.mini-row>strong { font-size: 12px; padding-top: var(--space-md); font-weight: 500; }
.mini-track { position: relative; border-bottom: 1px solid var(--color-rule); background: repeating-linear-gradient(to right,var(--color-rule) 0,var(--color-rule) 1px,var(--color-clear) 1px,var(--color-clear) 25%); }
.mini-event { position: absolute; inset: 6px auto 6px calc(var(--start) * 25%); width: calc(var(--span) * 25% - 5px); padding: var(--space-xs) var(--space-xs); font-size: 12px; font-weight: 500; background: var(--color-booking); color: var(--color-booking-ink); border-left: 2px solid var(--color-accent); line-height: 1.4; }
.mini-event small { display: block; font-size: 10px; margin-top: var(--space-3xs); }
.m-open { background: var(--color-openplay); color: var(--color-openplay-ink); border-color: var(--color-muted); }
.m-clinic { background: var(--color-clinic); color: var(--color-clinic-ink); border-color: var(--color-clinic-ink); }
.m-conflict { background: var(--color-alert-bg); color: var(--color-alert); border-color: var(--color-alert); }
.preview-alert { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); padding: var(--space-md) var(--space-sm); background: var(--color-alert-bg); color: var(--color-alert); text-decoration: none; }
.alert-mark { display: grid; place-items: center; border: 1px solid currentColor; width: 23px; height: 23px; font-weight: 500; flex-shrink: 0; }
.preview-alert strong { font-size: 12px; font-weight: 500; display: block; }
.preview-alert small { font-size: 12px; display: block; margin-top: var(--space-3xs); }
.preview-alert svg { margin-left: auto; width: 16px; }
.preview-alert:hover { text-decoration: underline; }
.preview-bottom { display: flex; justify-content: space-between; gap: var(--space-sm); padding-top: 20px; font-size: 11px; color: var(--color-muted); }
.preview-bottom a { color: var(--color-ink); }
@media(max-width:1100px) { .hero-grid { gap: 32px; } .hero-product { padding: 20px; } .hero-actions { gap: var(--space-xs); } .hero-actions .text-link { font-size: 14px; } .nav .login { margin-left: 0; } }
@media(max-width:800px) { .nav { height: 76px; } .nav-links { gap: var(--space-md); } .nav-links>a:not(.btn) { display: none; } .nav-links>a.login { display: block; } .hero { min-height: auto; padding-block: 56px 72px; } .hero-grid { grid-template-columns: minmax(0,1fr); gap: 48px; } .hero h1 { font-size: clamp(68px,12vw,98px); max-width: 11ch; } .hero .lead { max-width: 36ch; } .hero-product { width: 100%; max-width: 650px; } .hero-product::before { inset: 10px -8px -10px 8px; } .hero-actions { gap: var(--space-lg); } }
@media(max-width:400px) { .wordmark { font-size: 36px; } .wordmark svg { width: 28px; } .nav-links { gap: var(--space-md); } .nav .btn { padding-inline: var(--space-md); font-size: 16px; min-height: 44px; } .hero-product { padding: var(--space-md); } .preview-title h2 { font-size: 34px; } .preview-toolbar { font-size: 11px; } .mini-event { padding: var(--space-xs) var(--space-2xs); font-size: 10px; } .mini-event small { font-size: 9px; } .preview-alert { padding: var(--space-xs) var(--space-xs); gap: var(--space-xs); } .preview-alert strong,.preview-alert small { font-size: 11px; } .preview-bottom { font-size: 10px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition: none !important; animation: none !important; } }

.hero { padding-block: 48px var(--space-2xl); }
.preview-title { padding-block: var(--space-lg) var(--space-md); }
.mini-row { min-height: 60px; }
.game-plan { padding-block: 120px var(--space-4xl); background: var(--color-paper-2); }
.workflow-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-2xl); align-items: start; }
.marketing h2 { text-transform: uppercase; font-size: clamp(44px,4.8vw,68px); line-height: 1; }
.sticky-copy { position: sticky; top: 64px; }
.sticky-copy .lead { margin-top: var(--space-lg); max-width: 45ch; }
.sticky-copy .text-link { margin-top: var(--space-lg); }
.workflow-rows article { padding-block: 32px var(--space-xl); border-top: 2px solid var(--color-ink); }
.workflow-rows article:first-child { padding-top: var(--space-lg); }
.workflow-rows article:last-child { padding-bottom: 0; }
.workflow-time { font-size: 14px; color: var(--color-muted); }
.workflow-rows h3 { font-size: 34px; text-transform: uppercase; margin-top: var(--space-sm); }
.workflow-rows p { font-size: 17px; margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 45ch; }
.workflow-line { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--color-muted); margin-top: 32px; padding-top: var(--space-sm); font-size: 13px; }
.workflow-line span:nth-child(2) { color: var(--color-muted); }
.queue-preview { display: flex; justify-content: space-between; margin-top: var(--space-lg); background: var(--color-white); padding: 20px; border-left: 2px solid var(--color-accent); }
.queue-preview>span { font-size: 16px; font-weight: 500; }
.queue-preview small { display: block; font-size: 12px; font-weight: 400; color: var(--color-muted); margin-top: var(--space-2xs); }
.checkin-preview { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); border-block: 1px solid var(--color-rule); padding-block: var(--space-md); font-size: 14px; }
.checkin-preview>span:last-child { display: flex; align-items: center; gap: var(--space-xs); }
.checkin-preview svg { width: 17px; }
.club-band { background: var(--color-field); color: var(--color-accent-ink); padding-block: 112px; }
.club-band-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-2xl); align-items: center; }
.club-band h2 { font-size: clamp(66px,7vw,100px); }
.capability-rows>div { border-top: 1px solid color-mix(in oklab,var(--color-accent-ink) 50%,var(--color-clear)); padding-block: var(--space-lg); }
.capability-rows>div:last-child { padding-bottom: 0; }
.capability-rows h3 { font-size: 28px; text-transform: uppercase; }
.capability-rows p { font-size: 17px; margin-top: var(--space-xs); }
.pricing-section { padding-block: var(--space-4xl) 120px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: var(--space-2xl); }
.section-heading .lead { max-width: 27ch; }
.pricing-scroll { overflow-x: auto; }
.pricing-table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
.pricing-table th,.pricing-table td { padding: 20px var(--space-lg); border-bottom: 1px solid var(--color-rule); font-weight: 400; font-size: 15px; }
.pricing-table thead th { border-top: 2px solid var(--color-ink); padding-top: var(--space-lg); vertical-align: top; }
.pricing-table thead td { vertical-align: bottom; padding-left: 0; }
.pricing-table thead .pro-plan { border-top: 4px solid var(--color-accent); padding-top: var(--space-lg); background: var(--color-paper-2); }
.pricing-table h3 { font-size: 28px; text-transform: uppercase; }
.plan-price { font: 800 72px/1.2 var(--font-display); font-variant-numeric: tabular-nums; display: block; margin-top: var(--space-sm); }
.plan-price small { font: 400 16px var(--font-body); margin-left: var(--space-2xs); }
.pricing-period { color: var(--color-muted); font-size: 14px; }
.pricing-table tbody th { padding-left: 0; font-size: 14px; }
.pricing-table tr>:first-child { width: 28%; }
.pricing-table tr>:nth-child(3) { background: var(--color-paper-2); }
.pricing-table .plan-actions td { border: 0; padding-block: 28px; vertical-align: middle; }
.plan-actions .btn { width: 100%; padding-inline: var(--space-md); }
.plan-actions td>span { font-size: 13px; color: var(--color-muted); }
.questions-section { padding-block: var(--space-3xl) 120px; background: var(--color-paper-2); }
.faq-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-2xl); }
.faq-rows { border-top: 2px solid var(--color-ink); }
.faq-rows details { border-bottom: 1px solid var(--color-rule); padding-block: var(--space-lg); }
.faq-rows summary { cursor: pointer; font-size: 18px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); list-style: none; min-height: 44px; }
.faq-rows summary::-webkit-details-marker { display: none; }
.faq-rows summary::after { content: "+"; font-size: 24px; font-weight: 400; }
.faq-rows details[open] summary::after { content: "−"; }
.faq-rows summary:hover { color: var(--color-accent); }
.faq-rows p { color: var(--color-muted); font-size: 16px; margin-top: var(--space-sm); padding-right: 32px; }
.site-footer { background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-2xl); }
.footer-layout { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.footer-mark { font: 800 100px/.9 var(--font-display); letter-spacing: -4px; text-decoration: none; }
.footer-layout p { margin-top: 20px; font-size: 14px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: end; column-gap: 32px; row-gap: var(--space-md); font-size: 14px; max-width: 360px; }
.footer-links>span { flex-basis: 100%; text-align: right; font-size: 12px; color: var(--color-paper-3); }
@media(max-width:800px) { .marketing .preview-title h2 { font-size: 38px; } .workflow-layout,.club-band-layout,.faq-layout { grid-template-columns: minmax(0,1fr); gap: var(--space-xl); } .sticky-copy { position: static; } .game-plan,.pricing-section,.questions-section { padding-block: 72px; } .club-band { padding-block: 72px; } .club-band h2 { font-size: 72px; } .section-heading { align-items: start; flex-direction: column; gap: var(--space-lg); margin-bottom: var(--space-xl); } .pricing-table { min-width: 680px; } .pricing-table th,.pricing-table td { padding-inline: var(--space-md); } .pricing-table tr>:first-child { width: 28%; } .footer-layout { align-items: start; } .footer-links { max-width: 200px; gap: var(--space-md); } }
@media(max-width:480px) { .marketing .preview-title h2 { font-size: 34px; } .hero { padding-block: 48px var(--space-2xl); } .hero .lead { font-size: 19px; } .hero-actions { gap: var(--space-md); } .marketing h2 { font-size: 48px; } .club-band h2 { font-size: 72px; } .workflow-rows h3 { font-size: 30px; } .footer-layout { flex-direction: column; gap: var(--space-xl); } .footer-links { max-width: none; justify-content: start; } .footer-links>span { text-align: left; } }

.marketing .preview-title h2 { font-size: 38px; }

.pricing-table h3 { font-variant-numeric: tabular-nums; }
.faq-rows a { white-space: nowrap; }

.workflow-rows h3 { margin-top: 0; }
.mobile-pricing { display: none; }
@media(max-width:640px) {
  .pricing-scroll { display: none; }
  .mobile-pricing { display: block; }
  .mobile-trial { font-size: 14px; color: var(--color-muted); margin-bottom: var(--space-lg); }
  .mobile-pricing article { border-top: 2px solid var(--color-ink); padding: var(--space-lg) 0 var(--space-xl); }
  .mobile-plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
  .mobile-plan-head h3 { font-size: 32px; text-transform: uppercase; }
  .mobile-plan-head .plan-price { margin-top: 0; font-size: 64px; }
  .mobile-pricing article>p { font-weight: 500; font-size: 17px; margin-top: var(--space-md); }
  .mobile-pricing ul { padding-left: var(--space-lg); margin-block: var(--space-sm) var(--space-lg); font-size: 15px; color: var(--color-muted); line-height: 1.8; }
  .mobile-pricing .btn { width: 100%; }
  .mobile-pricing .mobile-pro { border-color: var(--color-accent); }
}

.mobile-plan-head .plan-price { font-variant-numeric: tabular-nums; }