/* Step 1: background only. No content or interactive elements. */
:root { color-scheme: light; background: #f5fbff; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
.background-study {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 2800px;
  padding-bottom: max(380px, min(650px, 50vw));
  background:
    linear-gradient(90deg, #edf8ff 0%, #ffffff 14%, #ffffff 86%, #edf8ff 100%);
}
.background-art {
  position: absolute;
  inset-inline: 0;
  pointer-events: none;
  background-image: url('../assets/img/club-hero-saas-v1.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.background-art--hero {
  background-image: url('../assets/img/club-hero-three-sports-v2.webp');
  top: 0;
  height: min(880px, 66.667vw);
  min-height: 520px;
  mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}
.background-glow {
  position: absolute;
  inset: 800px 0 430px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 0% 28%, #bfeeff55, transparent 42%),
    radial-gradient(ellipse at 100% 75%, #b2f7ed35, transparent 40%);
}
.background-art--footer {
  bottom: 0;
  height: min(650px, 50vw);
  min-height: 380px;
  background-position: center bottom;
  mask-image: linear-gradient(to bottom, transparent, #000 30%);
}
@media (max-width: 600px) {
  .background-study { min-height: 2100px; }
  .background-art--hero { min-height: 580px; background-position: center; }
  .background-glow { inset-block: 550px 350px; }
  .background-art--footer { min-height: 380px; }
}
/* Step 2: navigation and hero copy over the approved background. */
body { font-family: 'Plus Jakarta Sans', sans-serif; color: #07203f; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid #009fac; outline-offset: 5px; }
.site-header { position: relative; z-index: 2; width: min(1200px, calc(100% - 80px)); height: 88px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.wordmark { display: inline-flex; gap: 6px; align-items: center; font-family: Figtree, sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
.wordmark img { width: 35px; height: auto; }
.primary-nav { display: flex; gap: 32px; font-size: 12px; font-weight: 500; }
.primary-nav [aria-disabled] { cursor: default; }
.header-actions { display: flex; align-items: center; gap: 26px; }
.sign-in { font-size: 12px; }
.sign-in:hover { color: #0066ff; }
.demo-button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 48px; padding: 0 25px; background: #0066ff; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 5px 15px #0066ff12; transition: background .15s; }
.demo-button:hover { background: #0057dc; }
.demo-button span { font-size: 20px; }
.header-demo { min-height: 40px; padding-inline: 21px; font-size: 11px; border-radius: 999px; }
.hero-content { position: relative; z-index: 1; text-align: center; padding: clamp(35px, 4.3vw, 64px) 24px 0; }
.hero-content h1 { margin: 0; font-family: Figtree, sans-serif; font-size: clamp(40px, 4.8vw, 68px); letter-spacing: -.045em; line-height: 1.08; font-weight: 700; text-wrap: balance; }
.hero-content p { margin: 22px auto 27px; font-size: 15px; line-height: 1.7; color: #526c83; max-width: 650px; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; width: 38px; height: 40px; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; margin: 6px 0; background: #07203f; }
@media(max-width: 800px) {
  .site-header { width: calc(100% - 40px); gap: 18px; height: 76px; }
  .wordmark { font-size: 26px; }.wordmark img { width: 30px; }
  .primary-nav { gap: 20px; font-size: 11px; }.header-actions { gap: 18px; }
  .hero-content { padding-top: 44px; }.hero-content p { font-size: 13px; max-width: 470px; }
}
@media(max-width:640px) {
  .site-header { width: calc(100% - 36px); gap: 12px; }
  .primary-nav { display: none; position: absolute; top: 70px; inset-inline: 0; padding: 22px; background: #f8fcff; border: 1px solid #dfedf6; border-radius: 14px; box-shadow: 0 12px 30px #173f6112; }
  .primary-nav.is-open { display: flex; justify-content: space-between; }
  .nav-toggle { display: block; }.header-actions { gap: 8px; }.sign-in { display: none; }
  .header-demo { min-height: 37px; padding-inline: 12px; font-size: 10px; }
  .hero-content { padding-top: 37px; }.hero-content h1 { max-width: 360px; margin-inline: auto; font-size: 43px; }
  .hero-content p { max-width: 320px; margin: 18px auto 22px; font-size: 12px; }
}
@media(prefers-reduced-motion:reduce) { .demo-button { transition: none; } }

.hero-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.hero-actions .demo-button { width: 176px; }
@media(max-width: 400px) { .hero-actions { gap: 10px; } .hero-actions .demo-button { width: 150px; padding-inline: 14px; gap: 12px; } }

.player-button { background: #5ce6d4; color: #fff; box-shadow: 0 5px 15px #28cbb51a; }
.player-button:hover { background: #43d9c6; }
/* Step 3: the connected club product showcase. */
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
.hero-stage { position: relative; height: max(520px, min(880px, 66.667vw)); }
.club-overview { position: relative; z-index: 1; text-align: center; padding: 65px 0 72px; background: radial-gradient(ellipse at 50% 65%, #dff4ff70, #faffff00 70%); }
.overview-heading { padding-inline: 24px; }
.overview-eyebrow { margin: 0 0 23px; color: #0066ff; font-size: 11px; font-weight: 600; letter-spacing: 3.2px; }
.overview-heading h2 { margin: 0; font-family: Figtree,sans-serif; font-size: clamp(32px, 4.1vw, 58px); line-height: 1.1; letter-spacing: -.045em; font-weight: 700; }
.overview-intro { color: #526585; font-size: 17px; line-height: 1.6; margin: 14px auto 30px; }
.product-tabs { display: grid; grid-template-columns: repeat(4,1fr); width: min(700px, calc(100% - 48px)); margin: 0 auto; padding: 4px; background: #e5f3fe; border-radius: 999px; }
.product-tabs button { appearance: none; border: 0; background: transparent; color: #07203f; font-family: inherit; font-size: 14px; min-height: 43px; border-radius: 999px; cursor: pointer; }
.product-tabs button[aria-selected="true"] { background: #0066ff; color: white; box-shadow: 0 0 0 2px #bedfff; }
.product-tabs button:hover:not([aria-selected="true"]) { background: #d5ebfb; }
.product-description { color: #526585; font-size: 14px; line-height: 1.6; min-height: 23px; margin: 20px 24px 24px; }
.product-stage { position: relative; isolation: isolate; width: min(1440px,100%); margin: auto; padding: 0 max(24px, 10.5%); }
.product-stage:before { content: ''; position: absolute; z-index: -1; inset: -35px 0 -40px; background: url('../assets/img/overview-ribbons.webp') center bottom/100% 100% no-repeat; mask-image: linear-gradient(transparent, #000 18%, #000 85%, transparent); }
.product-frame { position: relative; overflow: hidden; background: #f8fbff; border: 1px solid #cde3f8; border-radius: 16px; box-shadow: 0 12px 40px #54b5ee22; aspect-ratio: 1920 / 980; text-align: left; }
.product-frame[hidden] { display: none; }
.business-screen { width: 100%; height: 100%; overflow: hidden; }
.business-screen img { display: block; height: auto; width: 107.5%; max-width: none; margin-left: -3.75%; margin-top: -4.2%; }
.screen-capture { width: 100%; height: 100%; display: block; object-fit: contain; background: #f8fbff; }
.overview-demo { display: inline-block; margin-top: 25px; color: #0066ff; font-size: 15px; font-weight: 600; }
.overview-demo:hover { text-decoration: underline; }
.overview-caption { color: #7b8eab; font-size: 10px; margin: 9px 0 0; }
.program-preview { display: grid; grid-template-columns: 19% 1fr; height: 100%; font-size: clamp(8px, .9vw, 12px); }
.program-sidebar { display: flex; flex-direction: column; gap: 20px; padding: 22px 12px; background: #f3f7fc; }
.program-brand { display: flex; align-items: center; gap: 4px; font-family: Figtree,sans-serif; font-size: clamp(12px,1.5vw,20px); font-weight: 800; letter-spacing: -.8px; margin-bottom: 20px; }.program-brand img { width: 24px; height: auto; }
.program-sidebar strong { background: #e0ecfa; padding: 9px 5px; margin-inline: -5px; border-radius: 7px; font-size: inherit; }
.program-workspace { padding: 20px 25px; background: white; min-width: 0; }.program-topbar { color: #7587a0; border-bottom: 1px solid #e6edf5; padding-bottom: 18px; display: flex; justify-content: space-between; }
.program-workspace h3 { font: 700 clamp(16px,2.3vw,31px)/1.1 Figtree,sans-serif; letter-spacing: -.6px; margin: 25px 0 8px; }.program-workspace p { color: #667e9b; }.program-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 24px; }.program-stats>div { border: 1px solid #e0eaf6; border-radius: 9px; padding: 15px; }.program-stats span { display: block; color: #5d7391; }.program-stats b { display: block; font-size: clamp(20px,3vw,38px); margin-top: 9px; }.program-workspace h4 { margin: 25px 0 13px; font-size: 14px; }.program-table-wrap { overflow: auto; }.program-workspace table { border-collapse: collapse; width: 100%; white-space: nowrap; }.program-workspace th,.program-workspace td { padding: 14px 8px; border-bottom: 1px solid #e5edf6; text-align: left; }.program-workspace th { background: #f3f7fc; font-weight: 500; }.program-workspace td span { background: #def8ed; color: #196952; border-radius: 20px; padding: 4px 9px; }.program-workspace td .full { background: #e8effd; color: #345c9d; }.program-example { font-size: 9px; margin-top: 15px; }
@media(max-width:800px) { .club-overview { padding-top: 45px; }.overview-intro { font-size: 14px; }.product-stage { padding-inline: 5%; }.product-tabs { width: min(620px,calc(100% - 40px)); }.program-sidebar { gap: 12px; padding: 15px 8px; }.program-brand { margin-bottom: 8px; }.program-workspace { padding: 15px; }.program-workspace h3 { margin-top: 15px; }.program-stats { margin-top: 15px; }.program-stats>div { padding: 10px; }.program-workspace th,.program-workspace td { padding: 10px 5px; } }
@media(max-width:600px) { .hero-stage { height: 580px; }.club-overview { padding: 42px 0 55px; }.overview-eyebrow { font-size: 8px; letter-spacing: 2px; margin-bottom: 16px; }.overview-heading h2 { font-size: 34px; }.overview-intro { font-size: 12px; margin-bottom: 24px; }.product-tabs { width: calc(100% - 32px); }.product-tabs button { font-size: 11px; min-height: 39px; }.product-description { font-size: 11px; min-height: 36px; margin: 16px 25px; }.product-stage { padding-inline: 16px; }.product-frame { border-radius: 9px; }.overview-demo { font-size: 13px; margin-top: 20px; }.overview-caption { font-size: 9px; }.program-sidebar { display: none; }.program-preview { grid-template-columns: 1fr; }.program-workspace { padding: 10px; overflow: auto; }.program-topbar { padding-bottom: 8px; }.program-workspace h3 { margin: 12px 0 4px; }.program-stats { margin-top: 10px; gap: 6px; }.program-stats>div { padding: 7px; }.program-stats b { font-size: 20px; margin-top: 3px; }.program-workspace h4 { font-size: 11px; margin: 13px 0 5px; }.program-workspace th,.program-workspace td { padding: 8px 5px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }

/* Continuous background and a single sliding selection pill. */
.background-glow { mask-image: linear-gradient(to bottom, transparent, #000 180px, #000 calc(100% - 180px), transparent); }
.club-overview { background: transparent; }
.product-tabs { position: relative; isolation: isolate; --active-tab: 0; margin-top: 30px; margin-bottom: 30px; }
.product-tabs::before { content: ""; position: absolute; z-index: -1; left: 4px; top: 4px; bottom: 4px; width: calc((100% - 8px) / 4); border-radius: 999px; background: #0066ff; box-shadow: 0 0 0 2px #bedfff; transform: translateX(calc(var(--active-tab) * 100%)); transition: transform 360ms cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.product-tabs button { transition: color 180ms ease; }
.product-tabs button[aria-selected="true"] { background: transparent; box-shadow: none; }
.product-tabs button:hover:not([aria-selected="true"]) { background: transparent; color: #0066ff; }
@media(prefers-reduced-motion: reduce) { .product-tabs::before, .product-tabs button { transition: none; } }

/* Original landing-page agent cards, isolated from the new product tabs. */
.intelligence-section { --navy: #07203f; --display: Figtree, sans-serif; position: relative; z-index: 1; width: min(1200px, calc(100% - 80px)); margin: 0 auto; padding: 65px 0 120px; }
.intelligence-heading { text-align: center; }
.intelligence-heading > p:first-child { color: #0066ff; font-size: 11px; font-weight: 600; letter-spacing: 3.2px; margin: 0 0 23px; }
.intelligence-heading .intelligence-intro { max-width: 710px; margin: 24px auto 0; color: #526980; font-size: clamp(14px,1.3vw,17px); font-weight: 400; line-height: 1.8; letter-spacing: normal; text-wrap: pretty; }
.intelligence-heading h2 { margin: 0; font-family: Figtree,sans-serif; font-size: clamp(32px,4.1vw,58px); line-height: 1.1; letter-spacing: -.045em; font-weight: 700; }
.intelligence-section .agent-tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); }
.intelligence-section .agent { font: inherit; }
.intelligence-section .agent img { display: block; width: auto; object-fit: contain; }
.intelligence-section .agent strong { display: block; font-family: var(--display); }
.intelligence-section .agent-tabs{max-width:none;gap:16px;margin:30px 0 38px;align-items:stretch}.intelligence-section .agent-tabs .agent{--agent-color:#0066ff;--agent-wash:#e7f0ff;--agent-edge:#c8dcff;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 17px 22px;border:1px solid var(--agent-edge);border-radius:20px;background:linear-gradient(155deg,var(--agent-wash),#ffffff 125%);box-shadow:none;transition:transform .18s,box-shadow .18s,border-color .18s;color:var(--navy)}.intelligence-section .agent-tabs .agent[data-agent="mia"]{--agent-color:#0093d0;--agent-wash:#e5f6ff;--agent-edge:#bce8fc}.intelligence-section .agent-tabs .agent[data-agent="dash"]{--agent-color:#00a8a7;--agent-wash:#e4fcfa;--agent-edge:#b8efeb}.intelligence-section .agent-tabs .agent[data-agent="rally"]{--agent-color:#16b862;--agent-wash:#eafbed;--agent-edge:#c9f1d5}.intelligence-section .agent-tabs .agent[data-agent="ace"]{--agent-color:#87ad00;--agent-wash:#f6fbdc;--agent-edge:#e6efb9}.intelligence-section .agent-tabs .agent.active{border-color:var(--agent-color);box-shadow:0 8px 24px #1439570a}.intelligence-section .agent-tabs .agent:hover{transform:translateY(-4px);box-shadow:0 12px 24px #14395710;background:linear-gradient(155deg,var(--agent-wash),#ffffff 125%)}.intelligence-section .agent-tabs .agent img{height:108px;max-width:85px;margin:0 auto 14px;filter:drop-shadow(0 9px 9px color-mix(in srgb,var(--agent-color) 18%,transparent))}.intelligence-section .agent-tabs .agent strong{font-size:20px;line-height:1.2}.intelligence-section .agent-tabs .agent-role-label{display:block;text-transform:uppercase;letter-spacing:.8px;font-size:9px;font-weight:600;margin-top:7px;color:#667b90}.intelligence-section .agent-tabs .agent-summary{font-size:12px;line-height:1.65;margin-top:10px;min-height:60px;color:#526980;letter-spacing:0}.intelligence-section .agent-tabs .agent-card-benefits{display:flex;flex-direction:column;align-self:stretch;gap:11px;border-top:1px solid var(--agent-edge);padding-top:16px;margin-top:15px;text-align:left;letter-spacing:0}.intelligence-section .agent-card-benefits>span{font-size:10px;line-height:1.6;color:#294362;display:flex;gap:7px}.intelligence-section .agent-card-benefits>span:before{content:'✓';color:var(--agent-color);font-weight:700;flex-shrink:0}
@media(max-width:1100px){.intelligence-section .agent-tabs{gap:10px}.intelligence-section .agent-tabs .agent{padding:20px 12px;border-radius:16px}.intelligence-section .agent-tabs .agent img{height:88px}.intelligence-section .agent-tabs .agent strong{font-size:18px}.intelligence-section .agent-tabs .agent-summary{font-size:11px;min-height:72px}.intelligence-section .agent-card-benefits>span{font-size:9px}.intelligence-section .agent-tabs .agent-role-label{font-size:7px}}
@media(max-width:800px){.intelligence-section .agent-tabs{grid-template-columns:repeat(6,1fr);gap:14px}.intelligence-section .agent-tabs .agent{grid-column:span 2;padding:22px 16px}.intelligence-section .agent-tabs .agent:nth-child(4){grid-column:2/span 2}.intelligence-section .agent-tabs .agent img{height:95px}.intelligence-section .agent-tabs .agent-summary{min-height:57px;font-size:12px}.intelligence-section .agent-tabs .agent-role-label{font-size:8px}.intelligence-section .agent-card-benefits>span{font-size:10px}}
@media(max-width:540px){.intelligence-section .agent-tabs{grid-template-columns:1fr;gap:12px}.intelligence-section .agent-tabs .agent,.intelligence-section .agent-tabs .agent:nth-child(4){grid-column:auto;display:grid;grid-template-columns:76px 1fr;column-gap:15px;text-align:left;padding:20px;align-items:start}.intelligence-section .agent-tabs .agent img{grid-column:1;grid-row:1/span 3;height:92px;margin:auto;max-width:70px;align-self:center}.intelligence-section .agent-tabs .agent strong{grid-column:2;font-size:21px}.intelligence-section .agent-tabs .agent-role-label{grid-column:2;font-size:8px;margin-top:5px}.intelligence-section .agent-tabs .agent-summary{grid-column:2;min-height:0;font-size:11px;margin-top:7px}.intelligence-section .agent-tabs .agent-card-benefits{grid-column:1/-1;display:flex;gap:7px;padding-top:13px;margin-top:15px}.intelligence-section .agent-card-benefits>span{font-size:11px}}

.intelligence-section .agent-tabs .agent:hover { transform: none; }
@media(max-width:800px) { .intelligence-section { width: calc(100% - 40px); padding-block: 45px 80px; }.intelligence-section .agent-tabs .agent-card-benefits { display: grid; grid-template-columns: minmax(0,max-content); justify-content: center; justify-items: start; gap: 9px; width: 100%; } }
@media(max-width:540px) { .intelligence-heading > p:first-child { font-size: 8px; letter-spacing: 2px; margin-bottom: 16px; }.intelligence-heading h2 { font-size: 34px; } }
@media(prefers-reduced-motion:reduce) { .intelligence-section .agent { transition: none; } }

/* Airy surfaces and restrained color accents echo the hero and product frame. */
.intelligence-section .agent-tabs { gap: 14px; margin-top: 38px; }
.intelligence-section .agent-tabs .agent {
  position: relative;
  padding: 26px 18px 23px;
  border: 1px solid #dfebf5;
  border-radius: 24px;
  background: radial-gradient(ellipse 90px 85px at 50% 65px, var(--agent-wash), transparent), #ffffffd9;
  box-shadow: 0 8px 28px #174e7b06;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.intelligence-section .agent-tabs .agent.active {
  border-color: #76b4ff;
  background: radial-gradient(ellipse 100px 90px at 50% 65px, #e3f1ff, transparent), #fff;
  box-shadow: 0 0 0 3px #0066ff08, 0 12px 32px #0066ff0b;
}
.intelligence-section .agent-tabs .agent:hover {
  background: radial-gradient(ellipse 90px 85px at 50% 65px, var(--agent-wash), transparent), #fff;
  border-color: #b8d6ef;
  box-shadow: 0 10px 28px #174e7b0b;
}
.intelligence-section .agent-tabs .agent.active:hover { border-color: #76b4ff; }
.intelligence-section .agent-tabs .agent img { height: 96px; margin-bottom: 18px; filter: drop-shadow(0 8px 10px #173f6112); }
.intelligence-section .agent-tabs .agent strong { font-size: 21px; letter-spacing: -.5px; }
.intelligence-section .agent-tabs .agent-role-label {
  margin-top: 9px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f0f6fb;
  color: #49657d;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  line-height: 1.3;
}
.intelligence-section .agent-tabs .agent.active .agent-role-label { color: #0066ff; background: #edf5ff; }
.intelligence-section .agent-tabs .agent-summary { font-size: 12px; min-height: 0; margin: 15px 0 20px; line-height: 1.65; }
.intelligence-section .agent-tabs .agent-card-benefits { border-color: #e8eff5; margin-top: auto; padding-top: 17px; gap: 10px; }
.intelligence-section .agent-card-benefits>span { color: #526980; }
.intelligence-section .agent-card-benefits>span:before { color: #84a1b8; }
.intelligence-section .agent.active .agent-card-benefits>span:before { color: #0066ff; }
@media(max-width:1100px) {
  .intelligence-section .agent-tabs { gap: 10px; }
  .intelligence-section .agent-tabs .agent { padding: 23px 12px 20px; border-radius: 20px; }
  .intelligence-section .agent-tabs .agent-summary { font-size: 11px; }
  .intelligence-section .agent-tabs .agent-role-label { font-size: 9px; }
}
@media(max-width:540px) {
  .intelligence-section .agent-tabs .agent { padding: 20px; background: radial-gradient(ellipse 70px 80px at 58px 65px, var(--agent-wash), transparent), #ffffffed; }
  .intelligence-section .agent-tabs .agent-role-label { justify-self: start; }
  .intelligence-section .agent-tabs .agent-summary { margin: 10px 0 0; }
  .intelligence-section .agent-tabs .agent-card-benefits { margin-top: 18px; }
}
@media(prefers-reduced-motion:reduce) { .intelligence-section .agent-tabs .agent { transition: none; } }

/* The Scout preview follows the app's tinted question and open answer layout. */
.scout-demo { position:relative; width:100%; max-width:none; margin:64px auto 0; }
.scout-demo-top { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 0 24px; font-size:13px; font-weight:600; }
.scout-spark { color:#0066ff; font-size:19px; margin-right:8px; }
.sample-label { color:#788da0; font-size:10px; font-weight:400; }
.scout-conversation { padding:8px 0 24px; }
.scout-question { width:fit-content; max-width:80%; margin:0 0 28px auto; padding:13px 20px; border-radius:22px 22px 8px 22px; background:#eaf3ff; color:#18364f; font-size:14px; line-height:1.65; }
.scout-answer-row { display:flex; align-items:flex-start; gap:15px; }
.scout-chat-avatar { width:32px; height:46px; object-fit:contain; margin-top:1px; }
.scout-answer-body { flex:1; min-width:0; position:relative; }
.scout-byline { font-size:13px; font-weight:700; margin:0 0 14px; }.scout-byline span { margin-left:8px; color:#8091a3; font-size:11px; font-weight:400; }
.scout-response p { font-size:14px; line-height:1.8; color:#40566d; margin:0 0 20px; }.scout-response strong { font-weight:600; color:#102e4b; }
.scout-chart { margin:22px 0; padding:21px 0; border-top:1px solid #e4edf5; border-bottom:1px solid #e4edf5; }
.scout-chart figcaption { font-size:12px; font-weight:600; margin-bottom:24px; }.scout-chart figcaption>span { float:right; font-size:10px; font-weight:400; color:#7d90a3; }
.scout-bar-row { display:grid; grid-template-columns:120px 1fr 35px; align-items:center; gap:15px; margin-top:17px; font-size:11px; }.scout-bar-row small { display:block; color:#8a9cad; font-size:9px; margin-top:4px; }.scout-bar-row b { font-size:11px; font-weight:600; text-align:right; }
.scout-track { height:13px; border-radius:5px; background:#f2f6fb; overflow:hidden; }.scout-track i { display:block; width:var(--bar); height:100%; border-radius:5px; background:#1668e8; transform-origin:left; }.opportunity .scout-track i { background:#00908a; }.opportunity b { color:#00847f; }
.scout-response .scout-takeaway { margin-bottom:14px; }.scout-source { font-size:10px; color:#8595a5; }
.scout-demo-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 0; color:#8293a5; font-size:11px; }
.scout-replay { display:inline-flex; align-items:center; gap:7px; border:0; border-radius:999px; background:#f0f6fc; color:#3d6384; padding:10px 14px; font:inherit; cursor:pointer; }.scout-replay:hover { color:#0066ff; background:#e8f2ff; }.scout-replay:focus-visible { outline:2px solid #0066ff; outline-offset:3px; }.scout-replay:disabled { opacity:.5; cursor:default; }
.scout-thinking { position:absolute; top:34px; font-size:12px; color:#8293a5; display:none; align-items:center; gap:4px; }.scout-thinking span { width:4px; height:4px; border-radius:50%; background:#6b93bb; animation:scout-pulse 1s infinite alternate; }.scout-thinking span:nth-child(2) { animation-delay:.15s; }.scout-thinking span:nth-child(3) { animation-delay:.3s; margin-right:7px; }
.scout-demo[data-state="ready"] .scout-question,.scout-demo[data-state="ready"] .scout-answer-row { opacity:0; }
.scout-demo[data-state="question"] .scout-answer-row { opacity:0; }
.scout-demo[data-state="thinking"] .scout-thinking { display:flex; }
.scout-demo:not([data-state="complete"]) .scout-response { visibility:hidden; }
.scout-demo[data-state="question"] .scout-question,.scout-demo[data-state="thinking"] .scout-answer-row,.scout-demo[data-state="complete"] .scout-response { animation:scout-arrive .55s ease both; }
.scout-demo[data-state="complete"] .scout-track i { animation:scout-grow .9s cubic-bezier(.22,1,.36,1) both; }
.scout-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@keyframes scout-arrive { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@keyframes scout-grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes scout-pulse { to { opacity:.25; } }
@media(max-width:600px) { .scout-demo { margin-top:40px; }.scout-demo-top { padding:0 0 20px; }.sample-label { max-width:115px; text-align:right; line-height:1.5; font-size:9px; }.scout-conversation { padding:8px 0 24px; }.scout-question { max-width:92%; font-size:12px; }.scout-answer-row { gap:9px; }.scout-chat-avatar { width:25px; height:36px; }.scout-response p { font-size:12px; }.scout-chart { padding:16px 0; }.scout-chart figcaption>span { display:block; float:none; margin-top:6px; }.scout-bar-row { grid-template-columns:68px 1fr 30px; gap:8px; font-size:10px; }.scout-bar-row small { font-size:8px; }.scout-demo-bottom { padding:8px 0; }.scout-demo-bottom>span { max-width:110px; line-height:1.6; }.scout-replay { white-space:nowrap; font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .scout-demo *, .scout-demo *::before { animation:none!important; } }

/* Light-theme values and dimensions from dashboard globals.css, ask-chat,
   AgentProse and AgentChart/Bars. Keep the landing demo shell unboxed. */
.scout-demo { --surface:#fff; --border:#e8ecf1; --text:#07203f; --muted:#3d4c60; --subtle:#6b7887; font-family:'Plus Jakarta Sans','Helvetica Neue',Arial,sans-serif; color:var(--text); }
.scout-question { padding:12px 20px; margin-bottom:24px; max-width:80%; font-size:16px; line-height:1.625; color:var(--text); background:color-mix(in srgb,#0468ef 12%,var(--surface)); border-radius:22px 22px 8px 22px; }
.scout-answer-row { gap:14px; }
.scout-chat-avatar { width:auto; height:46px; margin-top:2px; filter:drop-shadow(0 5px 9px rgba(7,32,63,.13)); }
.scout-byline { display:none; }
.scout-thinking { top:0; color:var(--subtle); }
.scout-response { display:flex; flex-direction:column; gap:12px; }
.scout-response p,.scout-response .scout-takeaway { margin:0; font-size:16px; line-height:1.7; color:var(--text); }
.scout-response strong { color:var(--text); font-weight:600; }
.scout-chart { margin:0; padding:16px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.scout-chart figcaption { margin:0 0 12px; font-size:13px; line-height:1.5; font-weight:600; color:var(--text); }
.scout-bar-row { grid-template-columns:minmax(74px,26%) 1fr auto; gap:12px; margin-top:8px; }
.scout-bar-row:first-of-type { margin-top:0; }
.scout-bar-row>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:12.5px; line-height:1.5; }
.scout-bar-row b,.opportunity b { color:var(--text); font-size:12.5px; line-height:1.5; font-weight:600; font-variant-numeric:tabular-nums; }
.scout-track { height:18px; background:transparent; border-radius:0; }
.scout-track i,.opportunity .scout-track i { background:#1668e8; border-radius:0 4px 4px 0; }
.scout-source { color:var(--subtle); font-size:12px; line-height:1.5; }

/* Keep the conversation and chart directly on the landing-page background. */
.scout-question { background:#e2f6fb; color:#12364c; }
.scout-chart { background:transparent; border:0; border-radius:0; padding:16px 0; }

/* Landing-page treatment for the sample question and utilization chart. */
.scout-question { background:#0066ff; color:#fff; box-shadow:0 5px 16px #0066ff12; }
.scout-chart { padding:20px 0; }
.scout-chart figcaption { margin-bottom:22px; font-size:13px; letter-spacing:-.1px; }
.scout-bar-row { grid-template-columns:minmax(74px,26%) 1fr 38px; gap:16px; margin-top:18px; }
.scout-bar-row>span { font-size:12px; }
.scout-track { height:14px; border-radius:999px; background:#e7f0f8; }
.scout-track i,.opportunity .scout-track i { background:linear-gradient(90deg,#0066ff,#42a9ff); border-radius:999px; }
.scout-bar-row b { font-size:12px; }
@media(max-width:600px) { .scout-bar-row { gap:10px; }.scout-bar-row>span { font-size:11px; }.scout-track { height:12px; } }

/* Each key selects its own scripted conversation. */
.intelligence-section .agent-tabs .agent { cursor:pointer; appearance:none; }
.intelligence-section .agent-tabs .agent:focus-visible { outline:3px solid #0066ff; outline-offset:4px; }
.scout-conversation { min-height:550px; }
.agent-example-draft { border-left:2px solid #bcdcff; padding:4px 0 4px 22px; display:flex; flex-direction:column; gap:12px; margin:8px 0; }
.agent-example-label { font-size:10px; letter-spacing:1.2px; color:#6b7887; }
.agent-example-draft h3 { font-size:18px; margin:0; font-weight:600; }
.agent-draft-link { font-size:13px; color:#0066ff; font-weight:600; }
.agent-example-table { margin:12px 0; }
.agent-example-table>div { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:16px 0; border-bottom:1px solid #e1eaf2; font-size:13px; align-items:center; }
.agent-example-table .agent-example-table-head { padding-top:0; font-size:11px; color:#6b7887; }
.agent-example-table strong { font-size:13px; font-weight:500; }
.agent-example-table small { display:block; font-size:11px; margin-top:5px; color:#6b7887; }
.agent-growth-math { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:25px 0; margin:10px 0; border-block:1px solid #e1eaf2; }
.agent-growth-math>div { display:flex; flex-direction:column; gap:9px; }
.agent-growth-math strong { font-family:Figtree,sans-serif; font-size:36px; letter-spacing:-1px; color:#0066ff; }
.agent-growth-math span { font-size:11px; color:#6b7887; }.agent-growth-math .agent-math-symbol { font-size:20px; }
@media(max-width:600px) { .scout-conversation { min-height:720px; }.agent-example-table>div { font-size:11px; gap:12px; }.agent-example-table strong { font-size:11px; }.agent-growth-math { flex-wrap:wrap; gap:12px; }.agent-growth-math strong { font-size:27px; }.agent-growth-math>div { flex:1; min-width:72px; }.agent-growth-math span { font-size:10px; }.agent-example-draft { padding-left:14px; } }

/* Introductions above; compact controls stay beside the conversation below. */
.intelligence-section .agent-tabs .agent { cursor:default; }
.intelligence-demo-heading { text-align:center; margin:90px 0 27px; }
.intelligence-demo-heading h3 { margin:0; font:600 clamp(28px,3vw,40px)/1.15 Figtree,sans-serif; letter-spacing:-.035em; }
.intelligence-demo-heading p { margin:13px 0 0; color:#60758a; font-size:14px; line-height:1.6; }
.demo-agent-selector { display:flex; justify-content:center; gap:10px; padding:4px 4px 12px; }
.demo-agent { display:flex; align-items:center; gap:10px; padding:10px 18px 10px 13px; border:1px solid #dfeaf4; background:#ffffffb8; color:#07203f; border-radius:999px; font:inherit; text-align:left; cursor:pointer; transition:background 180ms,border-color 180ms,box-shadow 180ms; flex-shrink:0; }
.demo-agent img { width:25px; height:36px; object-fit:contain; }
.demo-agent strong { display:block; font-size:13px; font-weight:600; }
.demo-agent small { display:block; font-size:9px; margin-top:3px; color:#60758a; }
.demo-agent:hover { border-color:#a6ccfa; background:#f4f9ff; }
.demo-agent[aria-pressed="true"] { border-color:#0066ff; background:#eaf3ff; box-shadow:0 0 0 2px #0066ff0a; }
.demo-agent[aria-pressed="true"] strong { color:#0066ff; }
.demo-agent:focus-visible { outline:2px solid #0066ff; outline-offset:3px; }
.scout-demo { margin-top:24px; }
.scout-conversation { min-height:510px; }
@media(max-width:800px) { .demo-agent-selector { justify-content:flex-start; overflow-x:auto; scrollbar-width:thin; }.demo-agent { padding:9px 14px 9px 11px; }.intelligence-demo-heading { margin-top:65px; } }
@media(max-width:600px) { .intelligence-demo-heading p { font-size:12px; }.scout-demo { margin-top:20px; }.scout-conversation { min-height:720px; } }
@media(prefers-reduced-motion:reduce) { .demo-agent { transition:none; } }

.demo-agent { width:160px; }

.demo-agent-selector { flex-wrap:wrap; }
.demo-results { overflow-x:auto; margin:10px 0; }
.demo-results table { border-collapse:collapse; width:100%; font-size:13px; text-align:left; }
.demo-results th { font-size:11px; font-weight:500; color:#6b7887; }
.demo-results th,.demo-results td { padding:12px 14px 12px 0; border-bottom:1px solid #e3edf5; }
.demo-results td { font-variant-numeric:tabular-nums; }
.demo-proposal,.demo-report { border-left:2px solid #91c5ff; padding:7px 0 7px 20px; margin:8px 0; }
.demo-proposal h4,.demo-report h4 { margin:10px 0; font-size:16px; font-weight:600; }
.demo-proposal p,.demo-report p { font-size:13px; }
.demo-proposal-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:16px; }
.demo-proposal button,.demo-report button { border:0; border-radius:999px; padding:10px 17px; background:#0066ff; color:#fff; font:600 12px 'Plus Jakarta Sans',sans-serif; cursor:pointer; }
.demo-proposal button[data-demo-dismiss] { color:#50677c; background:#eaf2f9; }
.demo-proposal button:disabled { opacity:.5; cursor:default; }
.demo-proposal button:focus-visible,.demo-report button:focus-visible { outline:2px solid #0066ff; outline-offset:3px; }
.demo-proposal-actions>span,.demo-action-status,.demo-report-detail { font-size:11px; color:#60758a; line-height:1.7; }
.demo-action-status:not(:empty),.demo-report-detail { margin-top:12px; }.demo-report button { margin-top:14px; }
.demo-contributors { display:flex; gap:8px; flex-wrap:wrap; }.demo-contributors span { padding:6px 10px; border-radius:999px; background:#edf5fc; font-size:10px; color:#426782; }
@media(max-width:800px) { .demo-agent-selector { flex-wrap:nowrap; } }
@media(min-width:801px) { .demo-agent-selector { flex-wrap:nowrap; }.demo-agent { width:calc((100% - 40px) / 5); max-width:160px; min-width:0; padding-inline:10px; gap:7px; } }

/* Calendar: an editorial heading and one uninterrupted view of the club day. */
.calendar-feature { position:relative; z-index:1; width:min(1200px,calc(100% - 80px)); margin:0 auto; padding:35px 0 110px; }
.calendar-feature-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:55px; margin-bottom:40px; }
.calendar-eyebrow { margin:0 0 21px; font-size:11px; font-weight:600; color:#0066ff; letter-spacing:3px; }
.calendar-feature h2 { margin:0; font:700 clamp(34px,4.1vw,58px)/1.08 Figtree,sans-serif; letter-spacing:-.045em; }
.calendar-feature-intro { max-width:340px; margin:0 0 5px; color:#526980; font-size:14px; line-height:1.85; }
.calendar-showcase { padding:18px 18px 0; border:1px solid #d7e9f6; border-radius:26px; background:linear-gradient(135deg,#e7f5ff,#f0fbfa); box-shadow:0 20px 55px #1465a30a; }
.calendar-screen { position:relative; overflow:hidden; aspect-ratio:2.7; border:1px solid #dfeaf3; border-radius:13px; background:white; }
.calendar-screen img { display:block; width:116%; max-width:none; height:auto; margin-left:-15.1%; margin-top:-4.35%; }
.calendar-caption { display:flex; align-items:center; gap:9px; padding:19px 5px; color:#315b78; font-size:11px; font-weight:600; }
.calendar-caption>span:last-child { margin-left:auto; color:#688298; font-weight:400; }
.calendar-live-dot { width:6px; height:6px; border-radius:50%; background:#00b6b1; }
.calendar-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:35px; }
.calendar-benefits>div { border-top:1px solid #dceaf4; padding-top:22px; }
.calendar-benefit-number { color:#0066ff; font-size:11px; font-weight:600; }
.calendar-benefits h3 { margin:11px 0 10px; font:600 22px/1.2 Figtree,sans-serif; letter-spacing:-.4px; }
.calendar-benefits p { margin:0; max-width:320px; color:#60758a; font-size:12px; line-height:1.85; }
@media(max-width:800px) { .calendar-feature { width:calc(100% - 40px); padding-bottom:75px; }.calendar-feature-heading { gap:25px; }.calendar-feature-intro { max-width:260px; font-size:12px; }.calendar-benefits { gap:20px; }.calendar-benefits h3 { font-size:19px; } }
@media(max-width:600px) { .calendar-feature-heading { display:block; margin-bottom:28px; }.calendar-feature-intro { margin-top:20px; max-width:360px; }.calendar-showcase { padding:10px 10px 0; border-radius:18px; }.calendar-screen { aspect-ratio:1.45; overflow-x:auto; }.calendar-screen img { width:760px; margin-left:-99px; margin-top:-28px; }.calendar-caption { font-size:10px; padding:15px 0; }.calendar-caption>span:last-child { display:none; }.calendar-benefits { grid-template-columns:1fr; gap:22px; }.calendar-benefits p { max-width:none; }.calendar-eyebrow { font-size:9px; } }

.animated-calendar { border:1px solid #dfeaf3; border-radius:16px; background:#fff; overflow:hidden; }
.calendar-native-top { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:26px 24px; }
.calendar-native-top strong { display:block; font:600 22px Figtree,sans-serif; letter-spacing:-.5px; }.calendar-native-top>div>span { display:block; margin-top:7px; font-size:11px; color:#6b7887; }
.calendar-legend { display:flex; gap:15px; font-size:10px; color:#60758a; }.calendar-legend span:before { content:''; display:inline-block; width:7px; height:7px; background:#80b5ff; border-radius:2px; margin-right:6px; }.calendar-legend span:nth-child(2):before { background:#63d8dc; }.calendar-legend span:nth-child(3):before { background:#a4df96; }
.calendar-native-scroll { overflow-x:auto; padding:0 18px 20px; }.calendar-native-grid { min-width:760px; }
.calendar-time-axis { display:grid; grid-template-columns:85px repeat(7,minmax(0,1fr)); background:#f6f9fc; border-radius:8px 8px 0 0; font-size:10px; color:#71849a; padding-block:12px; }.calendar-time-axis span { padding-left:10px; }
.calendar-native-row { display:grid; grid-template-columns:85px 1fr; min-height:104px; border-bottom:1px solid #ebf0f5; }
.calendar-court-label { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; font-size:11px; color:#526980; }
.calendar-native-slots { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; padding:4px 0; background:repeating-linear-gradient(90deg,#eaf0f6 0,#eaf0f6 1px,transparent 1px,transparent calc(100% / 7)); }
.calendar-booking { min-width:0; padding:11px 9px; border-radius:7px; background:#e8f1ff; color:#075ac7; display:flex; flex-direction:column; gap:6px; border:1px solid #dceaff; }
.calendar-booking>span { font-size:8px; text-transform:uppercase; letter-spacing:.3px; }.calendar-booking strong { font-size:11px; font-weight:600; }.calendar-booking small { font-size:9px; opacity:.75; margin-top:auto; }.booking-cyan { background:#ddf7f8; color:#00777d; border-color:#c9eef1; }.booking-green { background:#e2f7e5; color:#267443; border-color:#d4efd7; }.booking-lime { background:#f0f6d7; color:#657c10; border-color:#e4edc3; }
.calendar-motion-ready .calendar-booking { opacity:0; transform:translateY(22px) scale(.97); }
.calendar-motion-ready.is-visible .calendar-booking { animation:calendar-tile-in 650ms cubic-bezier(.22,1,.36,1) var(--tile-delay) both; }
@keyframes calendar-tile-in { to { opacity:1; transform:translateY(0) scale(1); } }
@media(max-width:600px) { .calendar-native-top { padding:20px 16px; }.calendar-native-top strong { font-size:20px; }.calendar-legend { display:none; }.calendar-native-scroll { padding-inline:10px; } }
@media(prefers-reduced-motion:reduce) { .calendar-motion-ready .calendar-booking { opacity:1; transform:none; }.calendar-motion-ready.is-visible .calendar-booking { animation:none; } }

/* Booking tile dimensions and palette from dashboard DayGrid and theme. */
.calendar-booking { position:relative; padding:10px; border:0; border-radius:6px; gap:0; line-height:1; background:var(--booking-fill); color:var(--booking-ink); }
.booking-reservation { --booking-fill:#e8f1ff; --booking-ink:#0058d0; --booking-deep:#0052c2; }
.booking-lesson { --booking-fill:#d4f8da; --booking-ink:#007030; --booking-deep:#00672c; }
.booking-program { --booking-fill:#e6f3cb; --booking-ink:#536700; --booking-deep:#4d6000; }
.booking-openplay { --booking-fill:#c0e1ff; --booking-ink:#00578e; --booking-deep:#005c95; }
.calendar-booking>span { padding-right:20px; font-size:10px; font-weight:700; line-height:1.35; letter-spacing:.06em; overflow-wrap:break-word; }
.calendar-booking strong { margin-top:2px; font-size:12.5px; font-weight:700; line-height:1.35; color:#07203f; }
.calendar-booking small { margin-top:2px; font-size:11px; line-height:1.35; color:#3d4c60; opacity:1; }
.booking-paid { position:absolute; right:8px; top:8px; }
.booking-people { display:flex; align-items:center; margin-top:6px; gap:4px; color:#07203f; }
.booking-people b { font-size:10px; margin-right:7px; }
.booking-people i { display:flex; justify-content:center; align-items:center; width:18px; height:18px; border-radius:50%; margin-left:-6px; background:var(--booking-deep); color:white; font-style:normal; font-size:8px; font-weight:700; border:1px solid var(--booking-fill); }
.calendar-native-row { min-height:122px; }
.calendar-native-grid { min-width:1000px; }

/* Match the app's Party avatar stack, with fixed circles and a separate count. */
.booking-people { width:100%; display:flex; align-items:center; gap:6px; margin-top:6px; }
.booking-party-count { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.booking-party-count b { margin:0; font-size:10px; font-weight:700; line-height:1; }
.booking-party-divider { flex:0 0 1px; height:14px; background:#07203f33; }
.booking-party-faces { display:flex; min-width:0; flex-wrap:wrap; align-items:center; row-gap:4px; padding-left:6px; }
.booking-face { display:flex; flex:0 0 18px; width:18px; height:18px; margin-left:-6px; align-items:center; justify-content:center; border-radius:50%; overflow:hidden; font-size:8px; font-weight:700; line-height:1; color:#fff; background:var(--booking-deep); box-shadow:0 0 0 2px var(--booking-fill); }
.booking-face svg { flex-shrink:0; }
.calendar-native-grid { width:1488px; min-width:1488px; }
.calendar-native-row { grid-template-columns:88px 1fr; height:118px; min-height:118px; }
.calendar-time-axis { grid-template-columns:88px repeat(7,200px); font-size:13px; font-weight:500; color:#6b7887; border-radius:8px 8px 0 0; background:#f7f9fb; }
.calendar-native-slots { gap:6px; padding:3px; }
.calendar-court-label { font-size:13px; font-weight:600; gap:4px; color:#07203f; border-right:1px solid #ebf0f5; }
.calendar-native-top { flex-wrap:wrap; padding:26px 24px 18px; }
.calendar-native-top strong { font-size:28px; }.calendar-native-top strong span { font-size:20px; color:#6b7887; margin-left:8px; }.calendar-native-top>div>span { font-size:13px; }
.calendar-legend { gap:6px; flex-wrap:wrap; }.calendar-legend>span { padding:7px 10px; border:1px solid #e8ecf1; border-radius:999px; font-size:12px; }.calendar-legend>span:before { width:12px; height:12px; vertical-align:-2px; border:1px solid #c6dcff; background:#e8f1ff; }.calendar-legend .calendar-filter-all { background:#e6ebf3; padding-inline:22px; }.calendar-legend .calendar-filter-all:before { display:none; }.calendar-legend>span:nth-child(3):before { background:#c0e1ff; }.calendar-legend>span:nth-child(4):before { background:#c4f9f3; }.calendar-legend>span:nth-child(5):before { background:#d4f8da; }.calendar-legend>span:nth-child(6):before { background:#e6f3cb; }
.calendar-legend>span:nth-child(2):before { background:#e8f1ff; }

.calendar-legend button { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid #e8ecf1; border-radius:999px; font:400 12px 'Plus Jakarta Sans',sans-serif; background:#fff; color:#60758a; cursor:pointer; transition:background 180ms,border-color 180ms; }
.calendar-legend button:before { content:''; width:12px; height:12px; border-radius:2px; background:#e8f1ff; border:1px solid #c6dcff; }
.calendar-legend button[data-calendar-filter="all"] { padding-inline:22px; }.calendar-legend button[data-calendar-filter="all"]:before { display:none; }
.calendar-legend button[data-calendar-filter="openplay"]:before { background:#c0e1ff; }.calendar-legend button[data-calendar-filter="match"]:before { background:#c4f9f3; }.calendar-legend button[data-calendar-filter="lesson"]:before { background:#d4f8da; }.calendar-legend button[data-calendar-filter="program"]:before { background:#e6f3cb; }
.calendar-legend button[aria-pressed="true"] { background:#e6ebf3; border-color:#e6ebf3; color:#07203f; }.calendar-legend button:hover { border-color:#b2c8df; }.calendar-legend button:focus-visible { outline:2px solid #0066ff; outline-offset:3px; }
.booking-match { --booking-fill:#c4f9f3; --booking-ink:#006d65; --booking-deep:#00645d; }
.calendar-motion-ready.is-visible.calendar-filtering .calendar-booking { animation:none; opacity:1; transform:none; transition:opacity 150ms ease; }
.calendar-motion-ready.is-visible.calendar-filtering .calendar-booking.is-muted { opacity:.25; }
@media(max-width:600px) { .calendar-legend { display:flex; } }
@media(prefers-reduced-motion:reduce) { .calendar-booking.filter-arriving { animation:none!important; }.calendar-booking,.calendar-legend button { transition:none!important; } }

/* Fit the calendar to the landing page rather than an app-sized scroll canvas. */
.calendar-native-scroll { overflow-x:hidden; }
.calendar-native-grid { width:100%; min-width:0; }
.calendar-time-axis { grid-template-columns:68px repeat(7,minmax(0,1fr)); font-size:11px; }
.calendar-native-row { grid-template-columns:68px minmax(0,1fr); }
.calendar-native-slots { min-width:0; }
.calendar-booking { overflow:hidden; padding:8px; }
.calendar-court-label { font-size:11px; }
@media(max-width:600px) {
  .calendar-native-scroll { padding-inline:5px; }
  .calendar-time-axis { grid-template-columns:42px repeat(7,minmax(0,1fr)); font-size:8px; }
  .calendar-time-axis span { padding-left:2px; }
  .calendar-native-row { grid-template-columns:42px minmax(0,1fr); height:110px; min-height:110px; }
  .calendar-court-label { font-size:8px; }.calendar-court-label svg { width:16px; }
  .calendar-native-slots { gap:2px; padding:2px 0; }
  .calendar-booking { padding:4px 3px; }.calendar-booking>span { font-size:6px; padding-right:0; letter-spacing:0; }
  .calendar-booking strong { font-size:8px; overflow-wrap:anywhere; }.calendar-booking small { font-size:7px; }
  .booking-paid { display:none; }.booking-people { gap:3px; flex-wrap:wrap; }.booking-party-count b { font-size:8px; }.booking-party-faces { display:flex; }.booking-party-divider { display:none; }
}

/* Use identical category fills for filter swatches and calendar tiles. */
.calendar-legend button[data-calendar-filter="reservation"] { --filter-fill:#e8f1ff; --filter-ink:#0058d0; }
.calendar-legend button[data-calendar-filter="openplay"] { --filter-fill:#c0e1ff; --filter-ink:#00578e; }
.calendar-legend button[data-calendar-filter="match"] { --filter-fill:#c4f9f3; --filter-ink:#006d65; }
.calendar-legend button[data-calendar-filter="lesson"] { --filter-fill:#d4f8da; --filter-ink:#007030; }
.calendar-legend button[data-calendar-filter="program"] { --filter-fill:#e6f3cb; --filter-ink:#536700; }
.calendar-legend button[data-calendar-filter]:not([data-calendar-filter="all"]):before { background:var(--filter-fill); border-color:color-mix(in srgb,var(--filter-ink) 25%,var(--filter-fill)); }
.calendar-legend button[aria-pressed="true"]:not([data-calendar-filter="all"]) { background:var(--filter-fill); color:var(--filter-ink); border-color:color-mix(in srgb,var(--filter-ink) 25%,var(--filter-fill)); }

/* Exact light-theme selected filter surfaces from the dashboard calendar. */
.calendar-legend button[aria-pressed="true"]:not([data-calendar-filter="all"]) { background:#eef0f3; border-color:#e1e8f0; color:#07203f; }
.calendar-legend button[aria-pressed="true"][data-calendar-filter="all"] { background:#e6ebf3; border-color:#e6ebf3; color:#07203f; }
/* Finished page: each story has a distinct composition within one visual system. */
.background-study { padding-bottom:0; }.background-art--footer { display:none; }
.finish-section { width:min(1200px,calc(100% - 80px)); margin:auto; position:relative; z-index:1; padding:100px 0; }
.finish-eyebrow { font-size:10px; font-weight:600; letter-spacing:2.8px; color:#0066ff; margin:0 0 22px; }
.finish-section h2,.closing-section h2 { font:700 clamp(36px,4.1vw,58px)/1.08 Figtree,sans-serif; letter-spacing:-.045em; margin:0; }
.finish-lede { font-size:15px; line-height:1.85; color:#60758a; max-width:460px; margin:24px 0 30px; }
.growth-section { display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:center; }
.growth-options { display:flex; flex-direction:column; gap:4px; }
.growth-options button { display:flex; gap:16px; text-align:left; padding:19px 16px; margin-left:-16px; border:0; background:transparent; font:inherit; color:#07203f; border-radius:15px; cursor:pointer; transition:background .2s; }
.growth-options button>span { color:#7d93a7; font-size:10px; margin-top:4px; }.growth-options strong { display:block; font-size:14px; font-weight:600; }.growth-options small { display:block; margin-top:7px; font-size:12px; color:#60758a; }.growth-options button[aria-pressed="true"] { background:#eaf5ff; }.growth-options button[aria-pressed="true"]>span { color:#0066ff; }
.growth-canvas { background:linear-gradient(155deg,#eaf5ff,#f5fbff 65%,#e6faf6); border:1px solid #dbeaf5; border-radius:30px; padding:27px; }
.growth-canvas-top { display:flex; justify-content:space-between; align-items:center; font-size:12px; }.growth-brand { color:#25577d; font-weight:600; }.growth-state { font-size:9px; background:#fff9; border-radius:999px; padding:7px 10px; color:#698397; }
.growth-flow { margin:32px auto; max-width:360px; }.flow-trigger,.flow-followup { display:flex; align-items:center; gap:15px; background:#fff; border:1px solid #e0ebf4; border-radius:14px; padding:18px; box-shadow:0 6px 15px #19578b04; }.flow-icon,.flow-followup>span { color:#0066ff; font-size:26px; }.growth-flow small { display:block; color:#8293a6; font-size:8px; letter-spacing:1px; margin-bottom:7px; }.growth-flow strong { font-size:13px; font-weight:600; }.flow-line { height:28px; width:1px; background:#abcde9; margin:auto; }.flow-message { border:1px solid #d9e7f4; border-radius:17px; background:#fff; padding:24px; box-shadow:0 12px 28px #2167a009; }.flow-message-top { display:flex; justify-content:space-between; font-size:9px; color:#7e91a4; }.flow-message h3 { font:600 23px/1.2 Figtree,sans-serif; letter-spacing:-.5px; margin:24px 0 13px; }.flow-message p { color:#60758a; font-size:12px; line-height:1.85; min-height:89px; }.flow-email-link { display:inline-block; padding:10px 15px; border-radius:999px; background:#0066ff; color:#fff; font-size:10px; margin-top:8px; }.growth-bottom { display:flex; justify-content:space-between; gap:8px; font-size:9px; color:#6c8499; }
.players-section { display:grid; grid-template-columns:1.15fr 1fr; gap:80px; align-items:center; padding-top:125px; }
.phone-stage { position:relative; min-height:660px; isolation:isolate; }.phone-halo { position:absolute; inset:0 -65px -30px; z-index:-1; background:radial-gradient(ellipse at center,#d7f7ff,transparent 67%); }
.phone { width:260px; border:5px solid #e3edf4; outline:1px solid #c9dce9; border-radius:39px; position:absolute; overflow:hidden; background:#fff; box-shadow:0 30px 50px #164d7320,inset 0 0 0 2px #fff; padding:5px; }.phone-back { left:0; top:25px; transform:rotate(-8deg); }.phone-front { right:0; top:110px; transform:rotate(6deg); }.phone-island { position:absolute; top:12px; width:73px; height:19px; border-radius:999px; background:#09203a; left:50%; transform:translateX(-50%); z-index:1; }.phone-content { border-radius:29px; overflow:hidden; padding:13px; }.phone-status { font-size:9px; font-weight:700; margin-bottom:28px; }.phone-logo { display:inline-flex; align-items:center; gap:5px; font:800 22px Figtree,sans-serif; letter-spacing:-1px; }.phone-logo img { width:26px; height:auto; flex-shrink:0; }.phone h3 { font:700 27px/1.07 Figtree,sans-serif; letter-spacing:-1px; margin:22px 0 12px; }.phone-muted { font-size:9px; color:#71859a; line-height:1.6; }.phone-photo { height:107px; background:url('../assets/img/indoor-club-email.webp') center/cover; border-radius:13px; margin:20px 0 14px; }.phone-club { font-size:14px; }.phone-chips { display:flex; gap:6px; margin:15px 0; }.phone-chips span { background:#edf4fa; border-radius:999px; padding:7px 12px; font-size:9px; }.phone-activity { border-top:1px solid #edf2f6; padding:13px 0; font-size:10px; }.phone-activity b { float:right; font-size:9px; }.phone-activity small { display:block; margin-top:6px; color:#71859a; font-size:8px; }.phone-days { display:flex; justify-content:space-between; margin:23px 0; }.phone-days span { text-align:center; font-size:7px; color:#71859a; border-radius:12px; padding:11px; }.phone-days b { display:block; margin-top:7px; font-size:14px; color:#07203f; }.phone-days .chosen { background:#0066ff; color:#fff; }.phone-days .chosen b { color:#fff; }.phone-court { display:flex; justify-content:space-between; align-items:center; margin:20px 0; font-size:14px; }.phone-court small { display:block; color:#71859a; font-size:9px; margin-top:5px; }.court-mini { width:42px; height:30px; border:2px solid #71cdd7; background:linear-gradient(90deg,transparent 48%,white 48%,white 52%,transparent 52%),#dcf7f3; border-radius:4px; }.phone-times { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.phone-times span { padding:11px; border:1px solid #e3edf6; border-radius:9px; text-align:center; font-size:10px; }.phone-times .chosen { border-color:#0066ff; background:#edf5ff; color:#0066ff; }.phone-booking { display:flex; flex-direction:column; gap:7px; margin:20px 0; padding:16px; background:#f2f8fc; border-radius:12px; font-size:8px; color:#71859a; }.phone-booking strong { font-size:12px; color:#07203f; }.phone-cta { padding:13px; text-align:center; color:white; background:#0066ff; border-radius:999px; font-size:10px; }.phone-nav { display:flex; justify-content:space-between; padding:23px 3px 12px; font-size:8px; color:#71859a; }.phone-nav .active { color:#0066ff; }
.player-benefits { list-style:none; padding:0; margin:30px 0; }.player-benefits li { display:flex; gap:17px; margin:24px 0; }.player-benefits li>span { color:#0066ff; font-size:10px; padding-top:3px; }.player-benefits strong { font-size:14px; font-weight:600; }.player-benefits p { font-size:12px; line-height:1.7; color:#60758a; margin:7px 0 0; }
.start-section { display:grid; grid-template-columns:1fr 1fr; gap:90px; border-top:1px solid #e3edf5; margin-top:80px; }.start-steps { list-style:none; padding:0; margin:0; }.start-steps li { display:flex; gap:24px; padding:26px 0; border-bottom:1px solid #e3edf5; }.start-steps li:first-child { padding-top:0; }.start-steps li>span { color:#0066ff; font-size:12px; margin-top:4px; }.start-steps h3 { font:600 22px Figtree,sans-serif; margin:0 0 11px; letter-spacing:-.5px; }.start-steps p { font-size:13px; line-height:1.85; color:#60758a; margin:0; max-width:350px; }
.faq-section { display:grid; grid-template-columns:1fr 1.4fr; gap:100px; padding-block:80px 100px; }.text-link { display:inline-block; color:#0066ff; font-size:12px; margin-top:30px; }.faq-list details { border-bottom:1px solid #dfeaf3; }.faq-list summary { list-style:none; display:flex; justify-content:space-between; gap:20px; padding:24px 0; cursor:pointer; font-size:14px; font-weight:600; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary:after { content:'+'; font-size:20px; color:#0066ff; font-weight:400; }.faq-list details[open] summary:after { content:'−'; }.faq-list details p { margin:0 0 24px; font-size:13px; line-height:1.9; color:#60758a; }
.closing-section { position:relative; min-height:680px; display:grid; place-items:start center; text-align:center; padding:80px 24px 270px; background:url('../assets/img/club-hero-saas-v1.webp') center bottom/cover no-repeat; mask-image:linear-gradient(transparent,#000 12%); }.closing-content>img { object-fit:contain; margin:0 0 22px; }.closing-content>p:not(.finish-eyebrow) { font-size:15px; line-height:1.8; color:#526980; margin:24px 0; }
.landing-footer { position:relative; z-index:1; background:#f8fcff; padding:50px max(40px,calc((100% - 1200px)/2)) 25px; }.footer-top { display:flex; align-items:flex-start; gap:35px; padding-bottom:40px; }.footer-top>p { font-size:11px; line-height:1.9; color:#71859a; margin:3px 0; }.footer-top nav { display:flex; flex-wrap:wrap; gap:22px; margin-left:auto; font-size:11px; padding-top:8px; }.footer-bottom { border-top:1px solid #e3edf5; padding-top:24px; display:flex; gap:30px; justify-content:space-between; font-size:9px; color:#71859a; }
.growth-options button:focus-visible,summary:focus-visible,a:focus-visible { outline:2px solid #0066ff; outline-offset:4px; }
@media(max-width:1100px) { .growth-section,.players-section { gap:40px; }.phone { width:225px; }.phone-stage { min-height:620px; }.phone-back { left:-10px; }.phone-front { right:-8px; }.phone-content { padding:10px; }.phone h3 { font-size:24px; }.phone-days span { padding:9px; }.phone-back { top:5px; }.phone-front { top:105px; }.faq-section { gap:50px; }.footer-top { flex-wrap:wrap; }.footer-top nav { width:100%; margin-left:0; } }
@media(max-width:800px) { .finish-section { width:calc(100% - 40px); padding:65px 0; }.growth-section,.players-section,.start-section,.faq-section { grid-template-columns:1fr; gap:40px; }.finish-lede { max-width:560px; }.growth-canvas { max-width:540px; width:100%; justify-self:center; }.players-copy { grid-row:1; }.phone-stage { width:min(500px,100%); justify-self:center; min-height:630px; }.phone { width:245px; }.phone-back { left:15px; }.phone-front { right:15px; }.start-section { margin-top:20px; }.start-steps p { max-width:none; }.faq-section h2 br { display:none; }.closing-section { min-height:650px; padding-top:60px; }.landing-footer { padding:35px 20px 25px; }.footer-bottom { flex-wrap:wrap; gap:15px; }.primary-nav { gap:14px; } }
@media(max-width:440px) { .phone-stage { min-height:575px; }.phone { width:210px; }.phone-back { left:0; transform:rotate(-6deg); }.phone-front { right:0; top:80px; transform:rotate(5deg); }.phone h3 { font-size:22px; }.phone-days span { padding:7px; }.phone-photo { height:90px; }.phone-activity { padding:10px 0; }.growth-canvas { padding:20px; }.growth-bottom { font-size:8px; }.finish-section h2 { font-size:38px; }.footer-top { gap:20px; }.footer-top nav { gap:17px; }.closing-section { background-size:auto 650px; }.primary-nav.is-open { flex-wrap:wrap; gap:20px; } }
@media(prefers-reduced-motion:reduce) { .growth-options button { transition:none; } }
.phone-halo { background:url('../assets/img/player-ribbon-v1.webp') center bottom/cover no-repeat; mask-image:radial-gradient(ellipse at center,#000 45%,transparent 75%); inset:-20px -95px -50px; }
@media(min-width:801px) and (max-width:1100px) { .phone { width:210px; }.phone-back { left:20px; }.phone-front { right:20px; }.players-section { gap:55px; } }
.landing-skip { position:fixed; top:8px; left:8px; z-index:100; padding:10px 16px; background:#fff; color:#0066ff; border-radius:8px; transform:translateY(-180%); }.landing-skip:focus { transform:none; }
@media(max-width:440px) { .phone { width:190px; }.phone-back { left:12px; }.phone-front { right:12px; }.phone-stage { min-height:570px; }.phone h3 { font-size:21px; }.phone-days span { padding:6px; }.phone-content { padding:9px; } }

/* A quiet, compact close to the page. */
.closing-section { width:min(1200px,calc(100% - 80px)); min-height:0; margin:0 auto; padding:55px 0; display:flex; align-items:center; justify-content:space-between; gap:30px; text-align:left; background:none; mask-image:none; border-top:1px solid #e3edf5; }
.closing-section h2 { font-size:clamp(26px,3vw,38px); letter-spacing:-.035em; }
.closing-content>p:not(.finish-eyebrow) { margin:12px 0 0; font-size:13px; color:#60758a; }
.closing-section>.demo-button { flex-shrink:0; }
.landing-footer { background:transparent; width:min(1200px,calc(100% - 80px)); margin:auto; padding:30px 0 24px; border-top:1px solid #e3edf5; }
.footer-top { align-items:center; justify-content:space-between; padding-bottom:28px; gap:25px; }
.footer-top .wordmark { font-size:26px; }.footer-top .wordmark img { width:30px; height:auto; }
.footer-top nav { width:auto; margin-left:auto; padding:0; gap:24px; color:#60758a; }
.footer-bottom { border:0; padding:0; font-size:10px; color:#8192a3; }
@media(max-width:800px) { .closing-section,.landing-footer { width:calc(100% - 40px); }.closing-section { padding:38px 0; }.footer-top nav { margin-left:0; } }
@media(max-width:540px) { .closing-section { flex-direction:column; align-items:flex-start; gap:22px; }.footer-top { align-items:flex-start; flex-direction:column; gap:22px; }.footer-top nav { gap:18px; font-size:11px; }.landing-footer { padding-top:26px; } }

/* Platform artwork: viewport-wide sweep beneath the product, never stretched. */
.product-stage:before {
  inset:auto auto -115px 50%;
  width:100vw;
  height:clamp(360px,55vw,920px);
  transform:translateX(-50%);
  background:url('../assets/img/platform-ribbon-v3.webp') center bottom / 100% 100% no-repeat;
  pointer-events:none;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 87%,transparent 100%);
}
.club-overview { padding-bottom:150px; }
@media(max-width:800px) {
  .product-stage:before { bottom:-70px; height:66.667vw; }
  .club-overview { padding-bottom:105px; }
}
@media(max-width:540px) {
  .product-stage:before { bottom:-45px; }
  .club-overview { padding-bottom:80px; }
}

/* The chat uses the calendar's shared outer frame and inner white surface. */
.scout-demo.calendar-showcase { padding:18px; }
.ai-chat-surface { padding:26px 24px 12px; }
@media(max-width:600px) {
  .scout-demo.calendar-showcase { padding:10px; }
  .ai-chat-surface { padding:20px 14px 8px; }
}

/* A companion ribbon frames the chat without entering its white surface. */
.chat-art-stage { position:relative; isolation:isolate; padding-bottom:75px; }
.chat-art-stage:before {
  content:''; position:absolute; pointer-events:none; z-index:-1;
  left:50%; bottom:-25px; transform:translateX(-50%);
  width:100vw; height:clamp(460px,55vw,880px);
  background:url('../assets/img/intelligence-ribbon-v1.webp') center bottom/100% 100% no-repeat;
  mask-image:linear-gradient(transparent,#000 25%,#000 85%,transparent);
}
@media(max-width:600px) {
  .chat-art-stage { padding-bottom:45px; }
  .chat-art-stage:before { height:320px; bottom:0; }
}

/* Calendar companion: a broad left fold and low sweep, outside the schedule. */
.calendar-art-stage { position:relative; isolation:isolate; padding-bottom:60px; }
.calendar-art-stage:before {
  content:''; position:absolute; pointer-events:none; z-index:-1;
  left:50%; bottom:-35px; transform:translateX(-50%);
  width:100vw; height:clamp(420px,52vw,830px);
  background:url('../assets/img/calendar-ribbon-v1.webp') center bottom/100% 100% no-repeat;
  mask-image:linear-gradient(transparent,#000 25%,#000 84%,transparent);
}
@media(max-width:600px) {
  .calendar-art-stage { padding-bottom:35px; }
  .calendar-art-stage:before { height:300px; bottom:-20px; }
}
/* Pending action presentation from dashboard AgentProposal. */
.scout-response .demo-proposal { overflow:hidden; border:1px solid #e8ecf1; border-radius:16px; background:#fff; padding:0; margin:8px 0; color:#07203f; }
.demo-proposal-edge { height:3px; background:var(--proposal-tint); }
.demo-proposal-body { display:flex; flex-direction:column; gap:14px; padding:16px; }
.scout-response .demo-proposal h4 { margin:0; font:600 17px/1.25 Figtree,sans-serif; letter-spacing:-.015em; }
.scout-response .demo-proposal p { margin:6px 0 0; font-size:14px; line-height:1.625; color:#3d4c60; }
.demo-proposal-changes { display:flex; flex-direction:column; overflow:hidden; border:1px solid #e8ecf1; border-radius:12px; margin:0; }
.demo-proposal-changes>div { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; padding:10px 14px; }
.demo-proposal-changes>div+div { border-top:1px solid #e8ecf1; }
.demo-proposal-changes dt { width:108px; flex-shrink:0; font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:#6b7887; }
.demo-proposal-changes dd { min-width:0; flex:1; margin:0; font-size:14px; line-height:1.5; }
.demo-proposal-changes s { color:#3d4c60; text-decoration-color:#6b788799; }
.demo-proposal-changes svg { display:inline-block; margin:0 6px; transform:translateY(2px); color:#6b7887; }
.scout-response .demo-proposal-changes strong { color:#07203f; font-weight:600; white-space:pre-wrap; }
.demo-proposal .demo-proposal-actions { display:flex; align-items:center; gap:8px; margin:0; }
.demo-proposal button[data-demo-confirm],.demo-proposal button[data-demo-dismiss] { display:flex; align-items:center; height:40px; padding:0 16px; border-radius:12px; font-size:14px; font-weight:600; background:var(--proposal-tint); color:var(--proposal-ink); }
.demo-proposal button[data-demo-dismiss] { background:transparent; color:#3d4c60; padding-inline:14px; }
.demo-proposal button[data-demo-dismiss]:hover { background:#f7f9fb; color:#07203f; }
.demo-proposal-actions>span { margin-left:auto; font-size:12px; color:#6b7887; line-height:1.5; }
@media(max-width:600px) { .demo-proposal-actions>span { width:100%; margin-left:0; }.demo-proposal-changes dt { width:100%; } }
/* Email draft mirrors dashboard AgentDraft (connected owner presentation). */
.demo-email-draft { overflow:hidden; border:1px solid #e8ecf1; border-radius:16px; background:#fff; margin:0 0 12px; color:#07203f; }
.demo-email-edge { height:3px; background:#0495ed; }
.demo-email-header { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; border-bottom:1px solid #e8ecf1; padding:10px 16px; }
.demo-email-header>svg { flex-shrink:0; color:#0378bf; }
.demo-email-kind { font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#0378bf; }
.demo-email-audience { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:#3d4c60; }
.demo-email-header button { display:flex; flex-shrink:0; align-items:center; gap:6px; padding:4px 10px; border:0; border-radius:8px; background:transparent; color:#3d4c60; font:600 13px/1.5 'Plus Jakarta Sans',sans-serif; cursor:pointer; }
.demo-email-header button:hover { background:#eef0f3; color:#07203f; }
.demo-email-header button:focus-visible { outline:2px solid #0066ff; outline-offset:2px; }
.demo-email-content { display:flex; flex-direction:column; gap:10px; padding:14px 16px; }
.scout-response .demo-email-subject { margin:0; font-size:15px; font-weight:600; line-height:1.375; color:#07203f; }
.scout-response .demo-email-body { margin:0; border-top:1px solid #e8ecf1; padding-top:10px; white-space:pre-wrap; font-size:14.5px; line-height:1.625; color:#07203f; }
.scout-response .demo-email-footer { margin:0; border-top:1px solid #e8ecf1; padding:8px 16px; font-size:12px; line-height:1.625; color:#6b7887; }
/* Chat prose tables and report figures follow AgentProse / AgentChart. */
.demo-results { overflow-x:auto; margin:0 -4px; padding:0 4px; }
.demo-results table { width:100%; min-width:max-content; border-collapse:collapse; font-size:13px; line-height:1.5; color:#07203f; }
.demo-results th { padding:6px 8px; border-bottom:1px solid #e8ecf1; font-size:13px; font-weight:600; color:#07203f; text-align:left; white-space:nowrap; }
.demo-results td { padding:6px 8px; border-bottom:1px solid #e8ecf180; vertical-align:top; white-space:nowrap; font-variant-numeric:tabular-nums; }
.demo-report-table { margin:0; border:1px solid #e8ecf1; border-radius:16px; background:#fff; padding:16px; }
.demo-report-table figcaption { margin-bottom:12px; font-size:13px; font-weight:600; color:#07203f; }
.demo-report-table .demo-results { margin:0; padding:0; }
.demo-report-table th { padding:6px 12px; font-size:11px; font-weight:800; line-height:1.3; letter-spacing:1.1px; text-transform:uppercase; color:#6b7887; }
.demo-report-table td { padding:6px 12px; border-color:rgba(11,27,43,.07); }
.demo-report-table td:not(:first-child) { color:#3d4c60; }
.scout-thinking { top:6px; align-items:baseline; gap:8px; font-size:14px; line-height:1.5; color:#3d4c60; }
.scout-thinking .demo-working-copy { width:auto; height:auto; margin:0; border-radius:0; background:none; animation:none; }
.demo-working-copy strong { color:#07203f; font-weight:600; }
.scout-thinking .demo-working-dots { display:inline-flex; align-items:flex-end; gap:4px; width:auto; height:auto; margin:0; border-radius:0; background:none; animation:none; }
.demo-working-dots i { width:4px; height:4px; border-radius:50%; background:#6b7887; animation:scout-pulse 1s infinite alternate; }
.demo-working-dots i:nth-child(2) { animation-delay:.15s; }.demo-working-dots i:nth-child(3) { animation-delay:.3s; }
.demo-proposal button[data-demo-dismiss]:hover { background:#eef0f3; }
/* Both phones share one fixed device canvas; viewport changes scale the entire UI. */
.phone-stage { --device-scale:1; min-height:735px; }
.phone { width:calc(260px * var(--device-scale)); height:calc(563px * var(--device-scale)); aspect-ratio:260 / 563; padding:0; border:calc(5px * var(--device-scale)) solid #cbd5df; border-radius:calc(39px * var(--device-scale)); background:#101b2b; box-shadow:0 25px 45px #164d7326,inset 0 0 0 1px #fff8; }
.phone-content { position:absolute; left:calc(3px * var(--device-scale)); top:calc(3px * var(--device-scale)); width:244px; height:547px; padding:13px; border-radius:31px; background:#fff; transform:scale(var(--device-scale)); transform-origin:top left; }
.phone-island { top:calc(12px * var(--device-scale)); width:calc(73px * var(--device-scale)); height:calc(19px * var(--device-scale)); }
.phone:after { content:''; position:absolute; bottom:calc(8px * var(--device-scale)); left:50%; transform:translateX(-50%); width:calc(82px * var(--device-scale)); height:calc(3px * var(--device-scale)); background:#102038; border-radius:999px; }
.phone h3 { font-size:24px; margin:19px 0 10px; }
.phone-status { margin-bottom:25px; }
.phone-photo { height:100px; margin:18px 0 12px; }
.phone-activity { padding:12px 0; }
.phone-days { margin:18px 0; }.phone-days span { padding:8px; }
.phone-court { margin:15px 0; }.phone-times span { padding:9px; }
.phone-booking { margin:16px 0; padding:13px; gap:6px; }
.phone-cta { padding:11px; }
.phone-nav { position:absolute; bottom:17px; left:16px; right:16px; padding:12px 0 5px; border-top:1px solid #edf2f6; background:#fff; }
@media(min-width:801px) and (max-width:1100px) { .phone-stage { --device-scale:.81; min-height:615px; } }
@media(max-width:800px) { .phone-stage { --device-scale:.94; min-height:690px; } }
@media(max-width:440px) { .phone-stage { --device-scale:.73; min-height:525px; } }
.phone-front h3 { margin-top:14px; }
.phone-front .phone-days { margin:12px 0; }
.phone-front .phone-court { margin:12px 0; }
.phone-front .phone-booking { margin:12px 0; }

/* Player companion art uses the hero ribbon material. */
.phone-halo { inset:-25px -100px -15px; background:url('../assets/img/player-ribbon-v2.webp') center bottom/100% auto no-repeat; mask-image:radial-gradient(ellipse at center,#000 48%,transparent 75%); }
@media(max-width:600px) { .phone-halo { inset:-10px -65px 0; } }
.phone-halo { right:-40px; }
@media(max-width:800px) { .phone-halo { right:-65px; } }
/* A focused, quiet FAQ before the final invitation. */
.faq-section.finish-section { display:block; width:min(800px,calc(100% - 48px)); padding:70px 0 90px; }
.faq-heading { text-align:center; margin-bottom:40px; }
.faq-heading .finish-eyebrow { margin-bottom:16px; font-size:10px; letter-spacing:2.5px; }
.faq-section .faq-heading h2 { font-size:clamp(32px,4vw,46px); letter-spacing:-.04em; }
.faq-heading>p:last-child { margin:16px 0 0; color:#60758a; font-size:14px; line-height:1.6; }
.faq-list { border-top:1px solid #dfeaf3; }
.faq-list details { padding:0 20px; transition:background 180ms; }
.faq-list details[open] { background:#f1f8fc; }
.faq-list summary { align-items:center; padding:23px 0; font-size:15px; line-height:1.5; }
.faq-list summary:after { content:'+'; flex:0 0 28px; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#eaf3ff; font-size:21px; line-height:1; transition:transform 200ms,background 200ms; }
.faq-list details[open] summary:after { content:'+'; transform:rotate(45deg); background:#dcecff; }
.faq-list summary:hover { color:#0066ff; }
.faq-list summary:focus-visible { outline:2px solid #0066ff; outline-offset:5px; border-radius:5px; }
.faq-list details p { max-width:670px; margin:0; padding:0 40px 24px 0; font-size:14px; line-height:1.8; color:#526980; }
.faq-contact { text-align:center; margin:28px 0 0; color:#60758a; font-size:13px; line-height:1.7; }
.faq-contact a { color:#0066ff; font-weight:600; margin-left:4px; text-decoration:none; }.faq-contact a:hover { text-decoration:underline; }
@media(max-width:600px) { .faq-section.finish-section { padding:45px 0 60px; }.faq-heading { margin-bottom:30px; }.faq-list details { padding-inline:12px; }.faq-list summary { font-size:14px; gap:14px; padding-block:20px; }.faq-list details p { padding-right:0; font-size:13px; } }
@media(prefers-reduced-motion:reduce) { .faq-list details,.faq-list summary:after { transition:none; } }
/* Draw the plus geometrically to avoid font baseline offsets. */
.faq-list summary:after,
.faq-list details[open] summary:after {
  content:'';
  background-color:#eaf3ff;
  background-image:linear-gradient(#0066ff,#0066ff),linear-gradient(#0066ff,#0066ff);
  background-size:10px 1.5px,1.5px 10px;
  background-position:center;
  background-repeat:no-repeat;
}
.faq-list details[open] summary:after { background-color:#dcecff; }
/* Marketing: four capabilities, visible together with distinct product compositions. */
.marketing-section { padding-block:90px 65px; }
.marketing-heading { text-align:center; max-width:750px; margin:0 auto 50px; }
.marketing-heading>p:last-child { max-width:580px; margin:24px auto 0; font-size:15px; line-height:1.85; color:#60758a; }
.marketing-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; }
.marketing-panel { min-width:0; position:relative; overflow:hidden; border:1px solid #dceaf5; border-radius:28px; background:#fff; }
.marketing-panel-copy { padding:34px 34px 0; position:relative; z-index:1; }
.marketing-kicker { display:block; color:#0066ff; font-size:10px; font-weight:600; letter-spacing:1.8px; margin-bottom:18px; }
.marketing-panel h3 { font:600 32px/1.1 Figtree,sans-serif; letter-spacing:-.035em; margin:0; }
.marketing-panel-copy>p { margin:16px 0 0; font-size:13px; line-height:1.85; color:#60758a; max-width:450px; }
.marketing-create { grid-column:span 7; background:linear-gradient(145deg,#fff 25%,#eef8ff); }
.marketing-audience { grid-column:span 5; background:linear-gradient(160deg,#fff 45%,#f0fbfa); }
.marketing-automate { grid-column:span 5; background:linear-gradient(145deg,#f7fcff,#fff); }
.marketing-measure { grid-column:span 7; background:linear-gradient(145deg,#fff,#f2f9ff); }
.marketing-tags { list-style:none; padding:0; margin:20px 0 0; display:flex; flex-wrap:wrap; gap:7px; }
.marketing-tags li { border:1px solid #dbeaf5; background:#ffffffb3; border-radius:999px; padding:7px 10px; font-size:9px; color:#436780; }
.marketing-composer { position:relative; padding:30px 34px 0; height:400px; }
.marketing-email { width:70%; background:#fff; border:1px solid #dce6f0; border-radius:14px 14px 0 0; box-shadow:0 14px 40px #205a8212; overflow:hidden; }
.marketing-windowbar { padding:12px 15px; border-bottom:1px solid #e8eef5; display:flex; justify-content:space-between; align-items:center; font-size:10px; font-weight:600; }
.marketing-draft-label { color:#75869a; font-size:8px; font-weight:400; border-radius:5px; padding:4px 6px; background:#f2f5f8; }
.marketing-email-paper { padding:20px; }.marketing-club-name { display:block; font-size:8px; letter-spacing:2px; font-weight:700; margin-bottom:15px; }
.marketing-email-photo { height:85px; border-radius:6px; background:url('../assets/img/indoor-club-email.webp') center 55%/cover; }
.marketing-email h4 { font:600 24px/1.1 Figtree,sans-serif; letter-spacing:-.7px; margin:17px 0 10px; }.marketing-email p { font-size:10px; line-height:1.7; color:#60758a; margin:0 0 14px; }
.marketing-email-cta { display:inline-block; background:#0066ff; color:white; padding:10px 14px; border-radius:6px; font-size:9px; }
.marketing-sms { position:absolute; width:44%; right:25px; top:130px; padding:18px; border:1px solid #d6e8f5; background:#ffffffed; border-radius:20px; box-shadow:0 16px 45px #165c8420; transform:rotate(3deg); }
.marketing-sms-label { display:block; font-size:8px; letter-spacing:1.4px; color:#67819a; margin-bottom:14px; }.marketing-sms p { margin:0; padding:13px; background:#e8f3ff; border-radius:13px 13px 13px 3px; font-size:11px; line-height:1.7; color:#153d66; }.marketing-sms>span:last-child { display:block; color:#8192a3; font-size:8px; line-height:1.6; margin-top:12px; }
.marketing-audience-ui { margin:32px 26px 20px; background:#fff; border:1px solid #e0eaf3; border-radius:15px; box-shadow:0 15px 35px #17628308; padding:18px; }
.marketing-mini-title { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; font-weight:600; margin-bottom:16px; }.marketing-mini-title>span:last-child { font-size:9px; font-weight:400; color:#8192a3; }
.marketing-audience-row { display:flex; align-items:center; gap:12px; border-top:1px solid #edf2f6; padding:17px 0; }.marketing-audience-symbol { display:grid; place-items:center; width:33px; height:33px; flex-shrink:0; background:#eaf5ff; color:#0066ff; border-radius:10px; font-size:20px; }.marketing-audience-row:nth-of-type(3) .marketing-audience-symbol { color:#009b9b; background:#e6faf7; }.marketing-audience-row:nth-of-type(4) .marketing-audience-symbol { color:#5c7e0b; background:#f1f8df; }
.marketing-audience-row strong { display:block; font-size:11px; font-weight:600; }.marketing-audience-row small { display:block; color:#7b8da0; font-size:9px; margin-top:6px; }
.marketing-audience-prompt { padding:12px 10px; border:1px solid #dbe9f6; border-radius:9px; font-size:10px; color:#7a8b9d; }.marketing-audience-prompt span { color:#0066ff; margin-right:5px; }
.marketing-panel-note { margin:0 34px 30px; color:#718599; font-size:11px; line-height:1.8; }
.marketing-sequence { padding:28px 34px 30px; }.marketing-trigger { display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; font-weight:600; }.marketing-sequence-dot { width:7px; height:7px; border-radius:50%; background:#00bda9; box-shadow:0 0 0 5px #e3faf5; }.marketing-connector { width:1px; height:23px; margin:auto; background:#c7ddeb; }
.marketing-step { display:flex; align-items:center; gap:13px; background:#fff; border:1px solid #dce8f1; border-radius:12px; padding:16px; box-shadow:0 6px 18px #15548405; }.marketing-step-icon { display:grid; place-items:center; flex-shrink:0; width:34px; height:34px; border-radius:10px; background:#eaf3ff; color:#0066ff; font-size:20px; }.marketing-step small { display:block; font-size:8px; letter-spacing:1px; color:#8092a4; margin-bottom:6px; }.marketing-step strong { display:block; font-size:12px; font-weight:600; }.marketing-wait { width:fit-content; margin:0 auto; padding:14px 12px; border-inline:1px solid transparent; font-size:9px; color:#7a8d9f; position:relative; }.marketing-wait:before,.marketing-wait:after { content:''; height:8px; width:1px; background:#c7ddeb; position:absolute; left:50%; }.marketing-wait:before { top:0; }.marketing-wait:after { bottom:0; }.marketing-sequence-foot { font-size:9px; line-height:1.8; text-align:center; color:#7a8d9f; margin-top:22px; }
.marketing-results-ui { background:#fff; border:1px solid #dce8f1; border-radius:15px; margin:30px 30px 20px; padding:20px; box-shadow:0 12px 30px #16508007; }
.marketing-metrics { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:15px; padding:6px 0 20px; }.marketing-metrics>div+div { border-left:1px solid #e8eff5; padding-left:15px; }.marketing-metrics small { display:block; font-size:9px; color:#7a8d9f; }.marketing-metrics strong { display:block; font:600 29px/1.2 Figtree,sans-serif; letter-spacing:-1px; margin-top:10px; }.marketing-metric-note { display:block; font-size:8px; color:#8093a5; margin-top:14px; }
.marketing-spark-bars { height:28px; display:flex; align-items:flex-end; gap:5px; margin-top:10px; }.marketing-spark-bars i { flex:1; height:40%; background:#9edbff; border-radius:3px 3px 0 0; }.marketing-spark-bars i:nth-child(2n) { height:60%; background:#62c6ff; }.marketing-spark-bars i:nth-child(3n) { height:80%; background:#18bde3; }.marketing-spark-bars i:last-child { height:100%; background:#0066ff; }
.marketing-result-row { display:grid; grid-template-columns:1.4fr 1fr auto; gap:12px; border-top:1px solid #edf2f6; padding:13px 0 0; margin-top:12px; font-size:10px; }.marketing-result-row span:nth-child(2) { color:#7b8d9e; }.marketing-result-row strong { font-weight:600; }
.marketing-links-note { display:flex; align-items:flex-start; gap:13px; margin:0 34px 30px; }.marketing-links-note>span { color:#0066ff; font-size:24px; }.marketing-links-note strong { font-size:11px; font-weight:600; }.marketing-links-note p { font-size:11px; line-height:1.8; color:#718599; margin:5px 0 0; }
.marketing-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:28px 4px 0; }.marketing-bottom p { font-size:13px; color:#60758a; margin:0; }.marketing-bottom .text-link { margin:0; font-size:13px; font-weight:600; }
@media(max-width:800px) { .marketing-panel-copy { padding:25px 24px 0; }.marketing-panel h3 { font-size:27px; }.marketing-grid { gap:16px; }.marketing-create,.marketing-audience,.marketing-automate,.marketing-measure { grid-column:span 6; }.marketing-tags { gap:5px; }.marketing-composer { padding:25px 20px 0; height:380px; }.marketing-email { width:90%; }.marketing-sms { width:65%; right:12px; top:170px; }.marketing-audience-ui { margin:25px 15px 20px; padding:14px; }.marketing-results-ui { margin:25px 15px 20px; padding:14px; }.marketing-metrics { gap:8px; }.marketing-metrics>div+div { padding-left:8px; }.marketing-metrics strong { font-size:24px; }.marketing-sequence { padding-inline:22px; }.marketing-panel-note,.marketing-links-note { margin-inline:24px; } }
@media(max-width:600px) { .marketing-section { padding-top:55px; }.marketing-heading { margin-bottom:32px; }.marketing-heading>p:last-child { font-size:13px; }.marketing-grid { grid-template-columns:1fr; gap:20px; }.marketing-panel { grid-column:1; border-radius:22px; }.marketing-panel h3 { font-size:30px; }.marketing-composer { height:365px; padding-inline:25px; }.marketing-email { width:75%; }.marketing-sms { width:49%; top:125px; right:16px; padding:14px; }.marketing-panel-copy>p { font-size:13px; }.marketing-audience-ui { margin:25px 24px 20px; }.marketing-results-ui { margin:25px 20px 20px; }.marketing-bottom { flex-direction:column; text-align:center; gap:13px; }.marketing-result-row { gap:7px; } }
@media(max-width:600px) {
  .marketing-composer { height:auto; padding:24px; display:flex; flex-direction:column; gap:16px; }
  .marketing-email { width:100%; border-radius:14px; }
  .marketing-sms { position:relative; top:auto; right:auto; width:100%; transform:none; padding:16px; box-shadow:0 8px 24px #165c8410; }
  .marketing-email-photo { height:100px; }
}
/* Shared showcase treatment: marketing, calendar and chat use the same frame. */
.marketing-panel {
  border:1px solid #d7e9f6;
  border-radius:26px;
  background:linear-gradient(135deg,#e7f5ff,#f0fbfa);
  box-shadow:0 20px 55px #1465a30a;
  padding:18px;
}
.marketing-panel-inner {
  height:100%; overflow:hidden; border:1px solid #dfeaf3;
  border-radius:16px; background:#fff;
}
.marketing-panel-copy { padding:26px 24px 0; }
.marketing-panel-note,.marketing-links-note { margin-inline:24px; }
.marketing-composer { padding-inline:24px; }
.marketing-audience-ui { margin-inline:24px; }
.marketing-results-ui { margin-inline:24px; }
@media(max-width:800px) {
  .marketing-panel-copy { padding:24px 18px 0; }
  .marketing-audience-ui,.marketing-results-ui { margin-inline:14px; }
  .marketing-composer { padding-inline:18px; }
}
@media(max-width:600px) {
  .marketing-panel { padding:10px; border-radius:18px; }
  .marketing-panel-copy { padding:24px 18px 0; }
  .marketing-composer { padding:24px 18px; }
  .marketing-panel-note,.marketing-links-note { margin-inline:18px; }
}
/* Keep marketing icons open, without individual tiles. */
.marketing-audience-symbol,
.marketing-audience-row:nth-of-type(3) .marketing-audience-symbol,
.marketing-audience-row:nth-of-type(4) .marketing-audience-symbol,
.marketing-step-icon { background:transparent; border:0; border-radius:0; }
.marketing-trigger { padding-bottom:12px; }

/* One peripheral ribbon composition behind the marketing panels. */
.marketing-grid { position:relative; isolation:isolate; }
.marketing-grid:before { content:''; pointer-events:none; position:absolute; z-index:-1; left:50%; bottom:-80px; width:100vw; height:calc(100% + 100px); transform:translateX(-50%); background:url('../assets/img/marketing-ribbon-v1.webp') center bottom/100% 100% no-repeat; mask-image:linear-gradient(transparent,#000 20%,#000 86%,transparent); }
.marketing-bottom { position:relative; padding-top:65px; }
@media(max-width:600px) { .marketing-grid:before { height:800px; bottom:-45px; }.marketing-bottom { padding-top:45px; } }
/* Bleed the player artwork to the viewport edge while keeping its right fade. */
@media(min-width:801px) {
  .phone-halo { left:calc((min(1200px, 100vw - 80px) - 100vw) / 2 - 2px); }
}
@media(max-width:800px) {
  .phone-halo { left:calc((min(500px, 100vw - 40px) - 100vw) / 2 - 2px); }
}
.phone-halo {
  mask-image:linear-gradient(to right,#000 0%,#000 78%,transparent 100%);
}
.phone-halo {
  mask-image:linear-gradient(to right,#000 78%,transparent),linear-gradient(to bottom,transparent,#000 20%,#000 85%,transparent);
  mask-composite:intersect;
}
/* Phone layouts prioritize readable content instead of shrinking desktop canvases. */
@media(max-width:600px) {
  .demo-agent-selector { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; gap:8px; padding:4px 0 12px; }
  .demo-agent { width:100%; min-width:0; max-width:none; padding:10px 6px; justify-content:center; gap:5px; }
  .demo-agent img { width:17px; height:25px; }.demo-agent strong { font-size:11px; }.demo-agent small { display:none; }
  .scout-demo.calendar-showcase { padding:7px; }.ai-chat-surface { padding:18px 12px 16px; }
  .scout-conversation { min-height:0; padding:4px 0 0; }
  .scout-question { max-width:100%; width:fit-content; font-size:13px; line-height:1.65; padding:12px 14px; margin-bottom:22px; }
  .scout-answer-row { gap:8px; }.scout-chat-avatar { height:34px; width:24px; }
  .scout-answer-body { min-width:0; }.scout-response>p { font-size:13px; line-height:1.75; }
  .scout-thinking { font-size:12px; top:6px; }
  .demo-results { margin:0; padding:0; overflow:visible; }
  .demo-results table,.demo-results tbody { display:block; min-width:0; width:100%; }
  .demo-results thead { display:none; }.demo-results tr { display:block; padding:10px 0; border-bottom:1px solid #e8ecf1; }
  .demo-results td { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:4px 0; border:0; white-space:normal; font-size:12px; text-align:right; }
  .demo-results td:before { content:attr(data-label); color:#6b7887; font-size:10px; text-align:left; flex:0 0 42%; }
  .demo-results td:first-child { font-weight:600; }
  .demo-report-table { padding:12px; }.demo-report-table figcaption { font-size:12px; }
  .demo-proposal-body { padding:12px; }.scout-response .demo-proposal h4 { font-size:15px; }.scout-response .demo-proposal p { font-size:12px; }
  .demo-proposal-changes>div { padding:9px 10px; }.demo-proposal-changes dt { font-size:10px; }.demo-proposal-changes dd { font-size:12px; }
  .demo-proposal button[data-demo-confirm],.demo-proposal button[data-demo-dismiss] { font-size:12px; padding-inline:12px; }
  .demo-proposal-actions>span { font-size:10px; }
  .demo-email-header { padding:10px; gap:6px; }.demo-email-audience { flex-basis:100%; order:3; white-space:normal; font-size:11px; }.demo-email-header button { margin-left:auto; }
  .demo-email-content { padding:12px; }.scout-response .demo-email-subject { font-size:13px; }.scout-response .demo-email-body { font-size:12px; }.scout-response .demo-email-footer { padding:9px 12px; font-size:10px; }
  .chat-art-stage { padding-bottom:25px; }.intelligence-section { padding-bottom:45px; }
  .calendar-native-top { padding:18px 12px; gap:14px; }.calendar-native-top strong { font-size:18px; }.calendar-native-top>div>span { font-size:11px; }
  .calendar-legend { gap:6px; }.calendar-legend button { font-size:10px; padding:8px; min-height:34px; }.calendar-legend button[data-calendar-filter="all"] { padding-inline:14px; }
  .calendar-native-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 8px; }
  .calendar-time-axis { display:none; }
  .calendar-native-row { display:flex; flex-direction:column; height:auto; min-height:0; border:0; min-width:0; }
  .calendar-court-label { flex-direction:row; justify-content:flex-start; font-size:12px; border:0; padding:0 3px 8px; gap:5px; }
  .calendar-native-slots { display:flex; flex-direction:column; gap:6px; padding:0; background:none; }
  .calendar-booking { padding:10px 8px; min-height:108px; border-radius:6px; }
  .calendar-booking>span { font-size:8px; letter-spacing:.025em; line-height:1.4; padding:0; }
  .calendar-booking strong { font-size:11px; overflow-wrap:normal; }.calendar-booking small { font-size:10px; }.booking-party-count b { font-size:10px; }
  .calendar-native-scroll { padding:0 10px 15px; }.calendar-caption { font-size:9px; }
  .calendar-feature { padding-bottom:45px; }.calendar-benefits { margin-top:15px; }
  .intelligence-section .agent-tabs .agent { padding:18px; }
  .intelligence-section .agent-tabs .agent img { height:78px; margin:0 auto; }
  .intelligence-section .agent-tabs .agent-summary { margin:8px 0 0; }
  .intelligence-section .agent-tabs .agent-card-benefits { justify-content:start; gap:5px; margin-top:12px; }
}

@media(max-width:600px) { .marketing-automate h3 { font-size:26px; text-wrap:balance; } }

@media(max-width:600px) { .calendar-legend button { min-height:40px; } }
@media(max-width:375px) { .phone-stage { --device-scale:.66; min-height:485px; } }
/* Crop the artwork's baked-in pale left edge offscreen. */
@media(min-width:801px) {
  .phone-halo { left:calc((min(1200px, 100vw - 80px) - 100vw) / 2 - 120px); }
}
@media(max-width:800px) {
  .phone-halo { left:calc((min(500px, 100vw - 40px) - 100vw) / 2 - 90px); }
}
/* Keep all section links accessible without crowding the header. */
.primary-nav a { white-space:nowrap; }
@media(min-width:961px) { .primary-nav { gap:22px; } }
@media(max-width:960px) {
  .primary-nav { display:none; position:absolute; top:70px; inset-inline:0; padding:18px; background:#f8fcff; border:1px solid #dfedf6; border-radius:14px; box-shadow:0 12px 30px #173f6112; }
  .primary-nav.is-open { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 16px; }
  .primary-nav a { padding:12px 8px; font-size:13px; }
  .nav-toggle { display:block; }
  .sign-in { display:none; }
}
/* Vector icons stay consistent on iOS and Android, without emoji substitution. */
.landing-icon { display:inline-block; flex:none; vertical-align:middle; }
.marketing-audience-symbol,
.marketing-audience-row:nth-of-type(3) .marketing-audience-symbol,
.marketing-audience-row:nth-of-type(4) .marketing-audience-symbol { color:#0066ff; }
.marketing-step-icon,.marketing-mini-title .landing-icon { color:#0066ff; }
.scout-spark .landing-icon,.marketing-audience-prompt .landing-icon { width:15px; height:15px; }
@media(max-width:960px) {
 .header-actions .sign-in { display:inline-flex; align-items:center; justify-content:center; min-height:40px; white-space:nowrap; font-size:12px; }
}
@media(max-width:440px) {
 .site-header { width:calc(100% - 28px); gap:8px; }
 .site-header .wordmark { font-size:23px; gap:4px; }
 .site-header .wordmark img { width:26px; }
 .header-actions { gap:5px; }
 .header-demo { padding-inline:10px; font-size:10px; }
 .nav-toggle { width:32px; padding:6px; }
}
/* Give the mobile hero CTA clear space above the ribbon. */
@media(max-width:600px) {
  .background-art--hero { top:clamp(130px,calc(130px + (390px - 100vw) * 4),250px); }
  .hero-stage { height:clamp(710px,calc(710px + (390px - 100vw) * 4),830px); }
}
@media(max-width:600px) {
  .background-art--hero { mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent); }
}
/* Marketing illustrations arrive once, without looping or shifting layout. */
@media(prefers-reduced-motion:no-preference) {
 .marketing-motion { opacity:0; translate:0 16px; transition:opacity .65s ease,translate .75s cubic-bezier(.2,.7,.2,1); }
 .marketing-motion.marketing-revealed { opacity:1; translate:0 0; }
 .marketing-motion-item { opacity:0; translate:0 10px; transition:opacity .5s ease,translate .6s cubic-bezier(.2,.7,.2,1); transition-delay:var(--reveal-delay,0ms); }
 .marketing-revealed .marketing-motion-item { opacity:1; translate:0 0; }
 .marketing-motion .marketing-connector { scale:1 0; transform-origin:top; transition:scale .4s ease var(--reveal-delay); }
 .marketing-revealed .marketing-connector { scale:1 1; }
 .marketing-motion .marketing-spark-bars i { scale:1 0; transform-origin:bottom; transition:scale .65s cubic-bezier(.2,.7,.2,1) var(--reveal-delay); }
 .marketing-revealed .marketing-spark-bars i { scale:1 1; }
}

@media (min-width:601px) and (max-width:900px) {
  .background-art--hero { top:50px; }
}

@media(max-width:600px) {
  .booking-people { flex-wrap:nowrap; }
  .booking-party-faces { flex-wrap:nowrap; overflow:hidden; padding-left:0; }
  .booking-party-faces .booking-face { flex:0 0 17px; width:17px; height:17px; min-width:17px; font-size:7px; margin-left:-6px; }
  .booking-party-faces .booking-face:first-child { margin-left:0; }
}

/* The Courtkey network: players on the app on one side, the club's dashboard on the other, joined in the middle. */
.network-section { padding:110px 0 40px; text-align:center; }
.network-heading .finish-lede { margin:24px auto 0; max-width:560px; }
.network-heading h2 { text-wrap:balance; }
.network-diagram { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 168px minmax(0,1fr); align-items:stretch; margin:64px auto 0; max-width:1040px; text-align:left; }
.network-diagram::before { content:''; position:absolute; inset:-40px -60px; z-index:-1; background:radial-gradient(ellipse at 50% 50%,#d9efff 0%,#eaf6ff66 42%,#f3faff00 70%); }
.network-card { display:flex; flex-direction:column; background:#fff; border:1px solid #dfeaf3; border-radius:24px; padding:22px 22px 20px; box-shadow:0 24px 60px #164d7314; }
.network-card-top { display:flex; }
.network-pill { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; background:#eef5ff; color:#0066ff; font-size:11px; font-weight:600; letter-spacing:.2px; }
.network-pill-live { background:#f2f9e3; color:#4b6600; }
.network-pill-live i, .network-dot { width:8px; height:8px; border-radius:50%; background:#8cc63f; box-shadow:0 0 0 0 #8cc63f80; }
.network-card-title { margin:16px 0 6px; font:700 21px/1.2 Figtree,sans-serif; letter-spacing:-.4px; color:#07203f; }
.network-people, .network-events { list-style:none; margin:0 0 14px; padding:0; }
.network-people li, .network-events li { display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid #edf3f8; }
.network-people li:first-child, .network-events li:first-child { border-top:0; }
.network-people div, .network-events div { flex:1; min-width:0; display:grid; gap:2px; }
.network-people strong, .network-events strong { font-size:14px; font-weight:600; color:#07203f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.network-people small, .network-events small { font-size:12px; color:#60758a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.network-avatar { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--hue); color:var(--ink); font:700 13px Figtree,sans-serif; box-shadow:0 0 0 2px #fff,0 0 0 3.5px #bfe34a; }
.network-people b { flex:none; padding:4px 9px; border-radius:999px; background:#eef5ff; color:#0066ff; font-size:12px; font-weight:700; }
.network-court { display:flex; align-items:center; gap:11px; margin-top:auto; padding:12px 14px; border-radius:16px; background:#f4fae6; }
.network-court div { display:grid; gap:1px; }
.network-court strong { font-size:13px; font-weight:700; color:#365100; }
.network-court small { font-size:12px; color:#5b6e3a; }
.network-icon { flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:12px; background:#eef5ff; color:#0066ff; font-weight:700; font-size:14px; }
.network-bars { display:flex; align-items:flex-end; gap:7px; height:58px; margin-top:auto; padding-top:14px; border-top:1px solid #edf3f8; }
.network-bars span { flex:1; height:var(--fill); border-radius:7px 7px 3px 3px; background:linear-gradient(#3d8bff,#9cc6ff); transform-origin:bottom; }
.network-bars span:last-child { background:linear-gradient(#0066ff,#5aa2ff); }
.network-link { display:flex; align-items:center; justify-content:center; }
.network-line { position:relative; flex:1; height:2px; background:repeating-linear-gradient(90deg,#9cc6ff 0 6px,transparent 6px 12px); overflow:hidden; }
.network-line i { position:absolute; top:-3px; left:-10px; width:8px; height:8px; border-radius:50%; background:#0066ff; }
.network-hub { position:relative; display:grid; place-items:center; width:62px; height:62px; flex:none; border-radius:50%; background:#fff; border:1px solid #d6e6f4; box-shadow:0 14px 34px #0066ff24; }
.network-hub::after { content:''; position:absolute; inset:-9px; border-radius:50%; border:1px solid #bcd9fb; }
.network-hub img { width:30px; height:auto; }
.network-benefits { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; max-width:1040px; margin:72px auto 0; padding:0; text-align:left; }
.network-benefits li { display:grid; align-content:start; gap:8px; padding-top:18px; border-top:1px solid #dfeaf3; }
.network-benefits span { color:#0066ff; font-size:10px; font-weight:600; letter-spacing:1px; }
.network-benefits strong { font:700 17px/1.3 Figtree,sans-serif; letter-spacing:-.2px; color:#07203f; }
.network-benefits p { margin:0; font-size:13px; line-height:1.7; color:#60758a; }
@media(prefers-reduced-motion:no-preference) {
  .network-pill-live i, .network-dot { animation:network-pulse 2.2s ease-out infinite; }
  .network-line i { animation:network-travel 2.6s cubic-bezier(.45,0,.25,1) infinite; }
  .network-link .network-line:last-child i { animation-delay:1.3s; }
  .marketing-motion .network-bars span { scale:1 0; transition:scale .65s cubic-bezier(.2,.7,.2,1) var(--reveal-delay); }
  .marketing-revealed .network-bars span { scale:1 1; }
}
@keyframes network-pulse { 0% { box-shadow:0 0 0 0 #8cc63f80; } 70% { box-shadow:0 0 0 9px #8cc63f00; } 100% { box-shadow:0 0 0 0 #8cc63f00; } }
@keyframes network-travel { 0% { left:-10px; opacity:0; } 15% { opacity:1; } 85% { opacity:1; } 100% { left:100%; opacity:0; } }
@media(max-width:1000px) {
  .network-diagram { grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr); }
  .network-benefits { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 36px; }
}
/* Phones: the two sides stack, joined by an upright link. */
@media(max-width:760px) {
  .network-section { padding:70px 0 20px; }
  .network-diagram { grid-template-columns:1fr; max-width:440px; margin-top:44px; }
  .network-link { flex-direction:column; height:120px; }
  .network-line { width:2px; height:auto; flex:1; background:repeating-linear-gradient(180deg,#9cc6ff 0 6px,transparent 6px 12px); }
  .network-line i { left:-3px; top:-10px; }
  @media(prefers-reduced-motion:no-preference) { .network-line i { animation-name:network-drop; } }
  .network-benefits { grid-template-columns:1fr; gap:22px; margin-top:52px; max-width:440px; }
}
@keyframes network-drop { 0% { top:-10px; opacity:0; } 15% { opacity:1; } 85% { opacity:1; } 100% { top:100%; opacity:0; } }

/* The platform ribbon behind the product screenshot reaches up past the stage on wide screens; keep the heading and tabs above it. */
.club-overview .overview-heading, .club-overview .product-tabs { position:relative; z-index:2; }
/* The hero headline always reads as two lines on wider screens: the promise, then "on and off the court." */
.hero-break { display:inline; }
@media(max-width:700px) { .hero-break { display:none; } }

/* Real player app screens retain their full aspect ratio inside the club page phones. */
.phone.phone-screenshot { height:auto; aspect-ratio:auto; }
.phone-screenshot > img { display:block; width:100%; height:auto; }
.phone-screenshot:after { content:none; }

/* Player portraits share the existing circular avatar sizes. */
.booking-face > img, .network-avatar > img { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; }