/* Matchpoint: bold sports graphics, oversized type, and real in-game imagery. */
body.matchpoint{--ink:#071a23;--lime:#dbf77b;--paper:#f4f2e9;--muted:#54605a;background:var(--paper);color:var(--ink);font-family:var(--body);overflow-x:hidden}
.matchpoint .skip-link{position:absolute;left:16px;top:-70px;z-index:100;background:var(--paper);color:var(--ink);padding:12px 18px}
.matchpoint .skip-link:focus{top:48px}
.matchpoint :focus-visible{outline:3px solid #58a6ff;outline-offset:5px}
.matchpoint h1,.matchpoint h2,.matchpoint h3,.matchpoint p{margin:0}
.matchpoint h1,.matchpoint h2,.matchpoint h3,.matchpoint h4{font-family:var(--font-heading);font-weight:var(--heading-weight);text-transform:var(--heading-case)}
.matchpoint em{font-style:italic}
.matchpoint .eyebrow{font-size:var(--text-small);letter-spacing:.16em;font-weight:750;line-height:1.6}
.matchpoint section[id]{scroll-margin-top:80px}
.matchpoint .mp-header{background:var(--ink);color:var(--paper);position:relative;z-index:20}
.matchpoint .mp-header-inner{height:90px;display:flex;justify-content:space-between;align-items:center;gap:32px}
.matchpoint .mp-brand{display:inline-flex;align-items:baseline;white-space:nowrap;font-family:var(--body);font-size:var(--text-section);font-weight:900;font-style:italic;letter-spacing:-.065em;line-height:1;color:var(--paper);text-decoration:none}
.matchpoint .mp-brand span{color:var(--lime)}

.matchpoint .mp-brand sup{font-size:var(--text-small);align-self:flex-start;padding-top:4px;margin-left:3px;letter-spacing:0;color:var(--lime)}
.matchpoint .mp-nav{display:flex;align-items:center;gap:25px;font-size:var(--text-small);font-weight:600}
.matchpoint .mp-nav>a{text-decoration:none;white-space:nowrap}
.matchpoint .mp-nav>a:not(.button){color:var(--paper);transition:color .2s}
.matchpoint .mp-nav>a:hover{color:var(--lime)}
.matchpoint .mp-header-cta{min-height:44px;padding:12px 19px;border-radius:var(--radius-control);background:var(--paper);border-color:var(--paper);color:var(--ink);gap:24px;font-size:var(--text-small)}
.matchpoint .mp-header-cta:hover{color:var(--ink)!important;background:#fff}
.matchpoint .mp-menu-toggle{display:none}
.matchpoint .mp-play-button{display:inline-flex;align-items:stretch;box-sizing:border-box;min-height:var(--button-hero-height);background:var(--button-bg);color:var(--button-ink);text-decoration:none;border:1px solid var(--button-ink);border-radius:var(--button-radius);font-family:var(--button-font);font-weight:var(--button-weight);line-height:1;transition:background .2s,box-shadow .2s}
.matchpoint .mp-play-button>span{font-family:var(--button-font);font-weight:var(--button-weight);font-size:var(--button-hero-size);line-height:var(--button-leading);display:flex;align-items:center;padding:var(--button-padding-block) 2rem;letter-spacing:var(--button-tracking);text-transform:uppercase}
.matchpoint .mp-play-button b{display:flex;align-items:center;justify-content:center;min-width:76px;border-left:1px solid #071a2340;font-family:var(--body);font-size:3rem;font-weight:400;line-height:1;color:currentColor;transition:background .2s,color .2s}
.matchpoint .mp-play-button:hover{background:var(--button-hover)}
.matchpoint .mp-play-button:focus-visible{outline:3px solid var(--button-focus);outline-offset:4px}
.matchpoint .mp-play-button:hover b{background:transparent;color:inherit}
.matchpoint .mp-no-download{font-size:var(--text-small);font-weight:500;margin-top:13px}
.matchpoint .mp-feel{padding:115px 0 113px}
.matchpoint .mp-feel-grid{display:grid;grid-template-columns:1fr 1fr;gap:10%}
.matchpoint .mp-feel-heading>.eyebrow{margin-bottom:23px}
.matchpoint .mp-feel h2{font-size:var(--text-display);line-height:.92;letter-spacing:-.026em;margin-bottom:31px}
.matchpoint .mp-feel h2 em{color:#567048}
.matchpoint .mp-feel h2{overflow-wrap:normal}
.matchpoint .mp-feel-heading>p:not(.eyebrow){max-width:375px;font-size:var(--text-body);line-height:1.7;color:var(--muted)}
.matchpoint .mp-feel-heading>.mp-feel-intro{font-size:var(--text-title)!important;line-height:1.55!important;font-weight:500;color:var(--ink)!important;margin-bottom:15px}
.matchpoint .mp-text-link{display:inline-flex;gap:33px;align-items:center;color:var(--ink);font-size:var(--text-small);font-weight:650;text-decoration:none;border-bottom:1px solid var(--ink);padding:0 0 8px}
.matchpoint .mp-text-link>span{font-size:var(--text-title);line-height:1;transition:transform .2s}
.matchpoint .mp-text-link:hover>span{transform:translate(3px,-3px)}
.matchpoint .mp-feel .mp-text-link{margin-top:28px}
.matchpoint .mp-feature-list{padding-top:3px}
.matchpoint .mp-feature{border-top:1px solid #b9c0b2;padding:33px 0 37px;display:grid;grid-template-columns:25px 1fr 65px;gap:15px;align-items:start}
.matchpoint .mp-feature:last-child{border-bottom:1px solid #b9c0b2}
.matchpoint .mp-feature-index{font:500 var(--text-small)/1.7 var(--body)}
.matchpoint .mp-feature h3{font-size:var(--text-section);line-height:1.1;letter-spacing:-.015em;margin-bottom:13px}
.matchpoint .mp-feature p{font-size:var(--text-small);line-height:1.7;color:var(--muted);max-width:300px}
.matchpoint .mp-feature-mark{width:65px;height:65px;margin-top:9px}
.matchpoint .mp-courts{padding:90px 0 42px;background:#e7eadf}
.matchpoint .mp-courts-top{display:flex;align-items:flex-end;justify-content:space-between;gap:70px;margin-bottom:36px}
.matchpoint .mp-courts-top h2{font-size:var(--text-display);line-height:.86;letter-spacing:-.026em;margin-top:21px}
.matchpoint .mp-courts-copy{width:365px;padding-bottom:5px}
.matchpoint .mp-courts-copy>p{font-size:var(--text-body);line-height:1.7;max-width:325px;margin-bottom:28px}
.matchpoint .mp-surface-tabs{display:flex;gap:6px;justify-content:space-between}
.matchpoint .mp-surface-tabs button{display:flex;align-items:center;gap:8px;border:1px solid #b7c0ad;border-radius:var(--radius-control);background:transparent;color:var(--ink);padding:11px 14px;cursor:pointer;font:500 var(--text-small) var(--body);transition:background .2s,color .2s}
.matchpoint .mp-surface-tabs button span{font:700 var(--text-title) var(--display)}
.matchpoint .mp-surface-tabs button[aria-pressed=true],.matchpoint .mp-surface-tabs button:hover{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.matchpoint .mp-court-stage{position:relative;height:620px;isolation:isolate;overflow:hidden;background:#174252;color:var(--paper)}
.matchpoint .mp-court-stage:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,26,35,.55),transparent 30%,transparent 50%,rgba(7,26,35,.9));z-index:-1;pointer-events:none}
.matchpoint .mp-court-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;z-index:-2;transition:opacity .2s}
.matchpoint .mp-court-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 30px;font-size:var(--text-small);letter-spacing:.14em;font-weight:650}
.matchpoint .mp-court-camera{display:flex;align-items:center;gap:8px}
.matchpoint .mp-court-camera>span{font-size:var(--text-title);line-height:1}
.matchpoint .mp-court-bottomline{position:absolute;bottom:30px;left:34px;right:34px;display:flex;gap:25px;align-items:flex-end}
.matchpoint .mp-court-bottomline .eyebrow{font-size:var(--text-small);color:var(--lime);display:block;margin-bottom:8px}
.matchpoint .mp-court-bottomline h3{text-transform:uppercase;font-size:var(--text-display);font-style:italic;line-height:.9;letter-spacing:-.04em}
.matchpoint .mp-court-bottomline>p{font-size:var(--text-small);margin:0 0 7px auto;max-width:180px;line-height:1.5}
.matchpoint .mp-court-bottomline>a{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:64px;height:64px;font-size:var(--text-page);background:var(--lime);color:var(--ink);text-decoration:none;transition:background .2s}
.matchpoint .mp-court-bottomline>a:hover{background:var(--paper)}
.matchpoint .mp-court-footnote{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:23px}
.matchpoint .mp-court-footnote>span{font-size:var(--text-small);font-weight:750;letter-spacing:.08em;white-space:nowrap}
.matchpoint .mp-court-footnote p{font-size:var(--text-small);line-height:1.6;margin-right:auto;color:var(--muted)}
.matchpoint .mp-court-footnote>a{font-size:var(--text-small);font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.matchpoint .mp-court-footnote>a span{padding-left:10px}
.matchpoint .mp-controls{padding:106px 0 92px;background:var(--ink);color:var(--paper)}
.matchpoint .mp-controls-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:57px}
.matchpoint .mp-controls-heading .eyebrow{color:var(--lime);margin-bottom:22px}
.matchpoint .mp-controls-heading h2{font-size:var(--text-display);line-height:.89;letter-spacing:-.024em}
.matchpoint .mp-controls-heading h2 em{color:var(--lime)}
.matchpoint .mp-controls-heading>p{font-size:var(--text-body);line-height:1.7;color:#bbc5c3;padding:0 52px 4px 0}
.matchpoint .mp-control-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.matchpoint .mp-control-block{border-top:1px solid #506058;border-right:1px solid #506058;padding:23px 30px 34px}
.matchpoint .mp-control-block:first-child{padding-left:0}
.matchpoint .mp-control-block:last-child{padding-right:0;border-right:0}
.matchpoint .mp-control-label{display:flex;justify-content:space-between;gap:10px;font:600 var(--text-small) var(--body);letter-spacing:.08em;color:#aeb9b3}
.matchpoint .mp-control-label span:last-child{font-size:var(--text-small);opacity:.65}
.matchpoint .mp-control-block h3{font-size:var(--text-section);line-height:1.1;margin-bottom:14px}
.matchpoint .mp-control-block>p{font-size:var(--text-small);color:#bbc5c3;line-height:1.7;max-width:300px}
.matchpoint kbd{font-family:var(--body)}
.matchpoint .mp-arrow-keys,.matchpoint .mp-space-key,.matchpoint .mp-depth-keys{height:177px;display:flex;align-items:center;justify-content:center;padding:20px 0}
.matchpoint .mp-arrow-keys{flex-direction:column;gap:5px;align-items:center;width:174px}
.matchpoint .mp-arrow-keys>div{display:flex;gap:5px}
.matchpoint .mp-arrow-keys kbd{width:45px;height:43px;display:flex;align-items:center;justify-content:center;font-size:var(--text-title);font-weight:400;border:1px solid #a0b67f;background:#172c2b;border-radius:var(--radius-icon);box-shadow:0 4px 0 #506049;color:var(--lime)}
.matchpoint .mp-space-key{justify-content:flex-start}
.matchpoint .mp-space-key kbd{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:260px;height:63px;border:1px solid #b8cb93;border-radius:var(--radius-icon);background:var(--lime);color:var(--ink);font-size:var(--text-small);letter-spacing:.1em;font-weight:700;padding:0 20px;box-shadow:0 6px 0 #839953;transform:rotate(-4deg)}
.matchpoint .mp-space-key kbd span{font-size:var(--text-section)}
.matchpoint .mp-depth-keys{justify-content:flex-start;gap:22px}
.matchpoint .mp-depth-keys>div{display:flex;flex-direction:column;align-items:center;gap:12px}
.matchpoint .mp-depth-keys kbd{height:54px;width:55px;display:flex;align-items:center;justify-content:center;font-size:var(--text-title);border:1px solid #a0b67f;background:#172c2b;border-radius:var(--radius-icon);box-shadow:0 4px 0 #506049;color:var(--lime)}
.matchpoint .mp-depth-keys span{font-size:var(--text-small);letter-spacing:.1em;color:#aeb9b3}
.matchpoint .mp-depth-keys>i{font:400 var(--text-section) var(--display);margin-bottom:19px;color:#829777}
.matchpoint .mp-touch-note{display:flex;align-items:center;gap:20px;border-top:1px solid #506058;border-bottom:1px solid #506058;padding:26px 0}
.matchpoint .mp-touch-note>svg{width:27px;height:36px;flex-shrink:0;color:var(--lime)}
.matchpoint .mp-touch-note h3{font-size:var(--text-title);font-weight:var(--heading-weight);margin-bottom:4px}
.matchpoint .mp-touch-note p{font-size:var(--text-small);line-height:1.7;color:#bbc5c3}
.matchpoint .mp-touch-note .mp-text-link{color:var(--lime);border-color:#506058;margin-left:auto;font-size:var(--text-small);white-space:nowrap;gap:28px}
.matchpoint .mp-practice{margin-top:35px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.matchpoint .mp-practice>div{display:flex;align-items:center;gap:16px}
.matchpoint .mp-practice-symbol{font-size:var(--text-section);line-height:1;color:var(--lime)}
.matchpoint .mp-practice p{font-size:var(--text-small);color:#bbc5c3}
.matchpoint .mp-practice>a{font-size:var(--text-small);color:var(--paper);text-decoration:none}
.matchpoint .mp-practice>a span{margin-left:25px}
.matchpoint .mp-faq{padding:107px 0 115px}
.matchpoint .mp-faq-grid{display:grid;grid-template-columns:38% 62%;gap:0}
.matchpoint .mp-faq h2{font-size:var(--text-display);line-height:.88;letter-spacing:-.022em;margin:24px 0 25px}
.matchpoint .mp-faq h2 span{color:#748b4f}
.matchpoint .mp-faq-grid>div:first-child>p:last-child{font-size:var(--text-small);line-height:1.7;color:var(--muted)}
.matchpoint .mp-questions{padding-top:0}
.matchpoint .mp-questions details{border-top:1px solid #b9c0b2}
.matchpoint .mp-questions details:last-child{border-bottom:1px solid #b9c0b2}
.matchpoint .mp-questions summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px 0;font-size:var(--text-body);line-height:1.4;font-weight:550;cursor:pointer}
.matchpoint .mp-questions summary::-webkit-details-marker{display:none}
.matchpoint .mp-questions summary>span{display:flex;align-items:center;justify-content:center;width:25px;height:25px;border:1px solid #aab39f;border-radius:var(--radius-icon);font-size:var(--text-title);font-weight:300;flex-shrink:0;transition:transform .2s,background .2s}
.matchpoint .mp-questions summary:hover>span{background:var(--lime)}
.matchpoint .mp-questions details[open] summary>span{transform:rotate(45deg);background:var(--lime)}
.matchpoint .mp-questions details>p{font-size:var(--text-small);color:var(--muted);line-height:1.75;max-width:90%;padding-bottom:26px}
.matchpoint .mp-finale{background:var(--lime);position:relative;overflow:hidden;padding:86px 0 78px;isolation:isolate}
.matchpoint .mp-finale-court{position:absolute;left:56%;width:50%;height:180%;top:-45%;border:3px solid rgba(7,26,35,.1);transform:rotate(25deg);z-index:-1}
.matchpoint .mp-finale-court:before{content:"";position:absolute;inset:0 12%;border-left:3px solid rgba(7,26,35,.1);border-right:3px solid rgba(7,26,35,.1)}
.matchpoint .mp-finale-court:after{content:"";position:absolute;left:12%;right:12%;top:25%;bottom:25%;border-top:3px solid rgba(7,26,35,.1);border-bottom:3px solid rgba(7,26,35,.1)}
.matchpoint .mp-finale-court i{position:absolute;top:50%;left:0;right:0;border-top:3px solid rgba(7,26,35,.1)}
.matchpoint .mp-finale-content{position:relative}
.matchpoint .mp-finale h2{font-size:var(--text-display);line-height:.8;letter-spacing:-.035em;margin:27px 0 39px}
.matchpoint .mp-finale .mp-no-download{margin-top:15px}
.matchpoint .mp-finale-side{position:absolute;right:7%;top:50%;transform:translateY(-50%) rotate(90deg);font:800 italic var(--text-section) var(--display);letter-spacing:-.02em;transform-origin:center}
@media(min-width:1600px){}
@media(max-width:1190px){.matchpoint .mp-nav{gap:17px;font-size:var(--text-small)}.matchpoint .mp-header-inner{gap:22px}.matchpoint .mp-brand{font-size:var(--text-section)}.matchpoint .mp-sign-in{display:none}.matchpoint .mp-feel-grid{gap:6%}.matchpoint .mp-feature{grid-template-columns:20px 1fr 50px;gap:12px}.matchpoint .mp-feature-mark{width:50px;height:50px}.matchpoint .mp-feature h3{font-size:var(--text-title)}.matchpoint .mp-courts-top{gap:40px}.matchpoint .mp-courts-copy{width:325px}.matchpoint .mp-court-stage{height:530px}.matchpoint .mp-controls-heading>p{padding-right:0}.matchpoint .mp-control-block{padding-left:24px;padding-right:24px}.matchpoint .mp-control-label span:last-child{display:none}}
@media(max-width:900px){.matchpoint .mp-header-inner{height:76px}.matchpoint .mp-nav{gap:15px}.matchpoint .mp-nav>a[href*="rankings"]{display:none}.matchpoint .mp-header-cta{padding:10px 15px;gap:15px}.matchpoint .mp-play-button{min-height:var(--button-hero-height)}.matchpoint .mp-play-button>span{font-size:var(--text-section);padding-left:24px;padding-right:24px}.matchpoint .mp-play-button b{min-width:64px;font-size:var(--text-section)}.matchpoint .mp-no-download{font-size:var(--text-small)}.matchpoint .mp-feel{padding:85px 0}.matchpoint .mp-feel h2{font-size:7vw}.matchpoint .mp-feel-heading>.eyebrow{font-size:var(--text-small)}.matchpoint .mp-feel-heading>.mp-feel-intro{font-size:var(--text-body)!important}.matchpoint .mp-feature{grid-template-columns:20px 1fr;padding-top:26px;padding-bottom:27px}.matchpoint .mp-feature-mark{display:none}.matchpoint .mp-feature p{font-size:var(--text-small)}.matchpoint .mp-courts-top{align-items:flex-start;gap:30px}.matchpoint .mp-courts-top h2{font-size:7.5vw}.matchpoint .mp-courts-copy{width:295px;padding-top:33px}.matchpoint .mp-courts-top .eyebrow{font-size:var(--text-small)}.matchpoint .mp-courts-copy>p{font-size:var(--text-small)}.matchpoint .mp-surface-tabs button{padding:8px 10px;gap:7px}.matchpoint .mp-surface-tabs button span{font-size:var(--text-body)}.matchpoint .mp-court-stage{height:470px}.matchpoint .mp-court-footnote{flex-wrap:wrap;gap:8px 24px}.matchpoint .mp-court-footnote>span{width:100%}.matchpoint .mp-court-footnote p{font-size:var(--text-small)}.matchpoint .mp-controls{padding:85px 0 70px}.matchpoint .mp-controls-heading h2{font-size:7.5vw}.matchpoint .mp-controls-heading>.eyebrow{font-size:var(--text-small)}.matchpoint .mp-controls-heading>p{font-size:var(--text-small)}.matchpoint .mp-control-block{padding-left:18px;padding-right:18px}.matchpoint .mp-control-block h3{font-size:var(--text-title)}.matchpoint .mp-control-block>p{font-size:var(--text-small)}.matchpoint .mp-touch-note{gap:13px}.matchpoint .mp-touch-note h3{font-size:var(--text-title)}.matchpoint .mp-touch-note p{font-size:var(--text-small);max-width:370px}.matchpoint .mp-touch-note .mp-text-link{font-size:var(--text-small);gap:15px}.matchpoint .mp-faq{padding:85px 0}.matchpoint .mp-faq h2{font-size:8vw}.matchpoint .mp-questions summary{font-size:var(--text-small)}.matchpoint .mp-finale{padding:70px 0}.matchpoint .mp-finale-side{right:0;font-size:var(--text-section)}}
@media(max-width:680px){.matchpoint .mp-header-inner{height:70px}.matchpoint .mp-brand{font-size:var(--text-section)}.matchpoint .mp-menu-toggle{display:flex;gap:13px;align-items:center;font:600 var(--text-small) var(--body);border:1px solid #506058;padding:10px 12px;background:transparent;color:var(--paper);border-radius:var(--radius-control);cursor:pointer}.matchpoint .mp-menu-toggle>span{font-size:var(--text-body)}.matchpoint .mp-nav{display:none;position:absolute;left:0;right:0;top:70px;padding:20px;background:var(--ink);align-items:stretch;flex-direction:column;gap:0;border-top:1px solid #40534b;box-shadow:0 15px 20px #071a2330}.matchpoint .mp-nav[data-open="true"],.matchpoint .mp-nav.is-open,.matchpoint .mp-nav.open,.matchpoint .mp-menu-toggle[aria-expanded="true"]+.mp-nav{display:flex}.matchpoint .mp-nav>a{font-size:var(--text-body);padding:14px 0}.matchpoint .mp-nav>a[href*="rankings"],.matchpoint .mp-sign-in{display:block}.matchpoint .mp-nav>a.button{display:flex;padding:15px 19px;margin-top:10px;justify-content:space-between}.matchpoint .mp-play-button{min-height:var(--button-hero-height)}.matchpoint .mp-play-button>span{font-size:var(--text-section);padding-left:27px;padding-right:27px}.matchpoint .mp-play-button b{min-width:66px}.matchpoint .mp-no-download{font-size:var(--text-small);margin-top:11px}.matchpoint .mp-feel{padding:66px 0}.matchpoint .mp-feel-grid{display:block}.matchpoint .mp-feel-heading>.eyebrow{margin-bottom:20px;font-size:var(--text-small)}.matchpoint .mp-feel h2{font-size:var(--text-display);margin-bottom:25px}.matchpoint .mp-feel h2 br:first-of-type{display:none}.matchpoint .mp-feel h2 em{display:block}.matchpoint .mp-feel h2 em br{display:none}.matchpoint .mp-feel-heading>p:not(.eyebrow){font-size:var(--text-small)}.matchpoint .mp-feel-heading>.mp-feel-intro{font-size:var(--text-body)!important}.matchpoint .mp-feel .mp-text-link{margin-top:23px;font-size:var(--text-small)}.matchpoint .mp-feature-list{padding-top:42px}.matchpoint .mp-feature{grid-template-columns:23px 1fr 52px;gap:12px;padding:26px 0}.matchpoint .mp-feature-mark{display:block;width:52px;height:52px}.matchpoint .mp-feature h3{font-size:var(--text-section);margin-bottom:11px}.matchpoint .mp-feature p{font-size:var(--text-small);line-height:1.7}.matchpoint .mp-courts{padding:62px 0 28px}.matchpoint .mp-courts-top{display:block;margin-bottom:25px}.matchpoint .mp-courts-top h2{font-size:var(--text-display);margin-top:20px;line-height:.89}.matchpoint .mp-courts-top .eyebrow{font-size:var(--text-small)}.matchpoint .mp-courts-copy{width:auto;padding:23px 0 0}.matchpoint .mp-courts-copy>p{font-size:var(--text-small);max-width:330px;margin-bottom:23px}.matchpoint .mp-surface-tabs{justify-content:flex-start;gap:8px}.matchpoint .mp-surface-tabs button{padding:9px 17px;gap:10px;flex:1;justify-content:center}.matchpoint .mp-surface-tabs button span{font-size:var(--text-title)}.matchpoint .mp-court-stage{height:490px}.matchpoint .mp-court-stage>img{object-position:center}.matchpoint .mp-court-topline{padding:18px 16px;font-size:var(--text-small);letter-spacing:.06em}.matchpoint .mp-court-camera{gap:4px}.matchpoint .mp-court-camera>span{font-size:var(--text-title)}.matchpoint .mp-court-bottomline{bottom:20px;left:20px;right:20px;display:grid;grid-template-columns:1fr 51px;gap:12px;align-items:center}.matchpoint .mp-court-bottomline>div{grid-column:1;grid-row:1}.matchpoint .mp-court-bottomline .eyebrow{font-size:var(--text-small);letter-spacing:.1em;margin-bottom:9px}.matchpoint .mp-court-bottomline h3{text-transform:uppercase;font-size:var(--text-display)}.matchpoint .mp-court-bottomline>p{grid-column:1;grid-row:2;margin:0;font-size:var(--text-small);max-width:none}.matchpoint .mp-court-bottomline>a{grid-column:2;grid-row:1/3;width:51px;height:51px;font-size:var(--text-section);align-self:end}.matchpoint .mp-court-footnote{display:grid;grid-template-columns:1fr auto;gap:10px 20px;padding-top:21px}.matchpoint .mp-court-footnote>span{grid-column:1/-1;font-size:var(--text-small)}.matchpoint .mp-court-footnote p{font-size:var(--text-small);max-width:240px}.matchpoint .mp-court-footnote>a{font-size:var(--text-small);align-self:start;margin-top:2px}.matchpoint .mp-court-footnote>a span{padding-left:5px}.matchpoint .mp-controls{padding:64px 0 49px}.matchpoint .mp-controls-heading{display:block;margin-bottom:33px}.matchpoint .mp-controls-heading .eyebrow{font-size:var(--text-small);margin-bottom:20px}.matchpoint .mp-controls-heading h2{font-size:var(--text-display)}.matchpoint .mp-controls-heading>p{font-size:var(--text-small);line-height:1.6;margin-top:23px}.matchpoint .mp-controls-heading>p br{display:none}.matchpoint .mp-control-grid{display:block}.matchpoint .mp-control-block,.matchpoint .mp-control-block:first-child,.matchpoint .mp-control-block:last-child{padding:23px 0 25px;border-right:0;display:grid;grid-template-columns:40% 1fr;column-gap:25px;align-items:center}.matchpoint .mp-control-label{grid-column:1/-1;grid-row:1;margin-bottom:23px;font-size:var(--text-small)}.matchpoint .mp-control-label span:last-child{display:block}.matchpoint .mp-arrow-keys,.matchpoint .mp-space-key,.matchpoint .mp-depth-keys{grid-column:1;grid-row:2/4;height:100px;width:auto;padding:0;align-self:start;justify-content:center}.matchpoint .mp-control-block h3{grid-column:2;grid-row:2;font-size:var(--text-title);margin:0 0 9px}.matchpoint .mp-control-block>p{grid-column:2;grid-row:3;font-size:var(--text-small);line-height:1.65;align-self:start}.matchpoint .mp-arrow-keys kbd{width:32px;height:31px;font-size:var(--text-title);box-shadow:0 3px 0 #506049}.matchpoint .mp-space-key kbd{height:49px;padding:0 13px;font-size:var(--text-small)}.matchpoint .mp-space-key kbd span{font-size:var(--text-title)}.matchpoint .mp-depth-keys{gap:14px;align-items:center}.matchpoint .mp-depth-keys kbd{width:40px;height:43px;font-size:var(--text-title)}.matchpoint .mp-depth-keys>i{font-size:var(--text-title);margin-bottom:12px}.matchpoint .mp-depth-keys>div{gap:9px}.matchpoint .mp-depth-keys span{font-size:var(--text-small)}.matchpoint .mp-touch-note{display:grid;grid-template-columns:26px 1fr;gap:12px 15px;padding:24px 0}.matchpoint .mp-touch-note>svg{grid-column:1;grid-row:1;align-self:start}.matchpoint .mp-touch-note>div{grid-column:2;grid-row:1}.matchpoint .mp-touch-note h3{font-size:var(--text-title)}.matchpoint .mp-touch-note p{font-size:var(--text-small)}.matchpoint .mp-touch-note .mp-text-link{grid-column:2;grid-row:2;margin:0;justify-self:start;gap:25px;font-size:var(--text-small);padding-bottom:4px}.matchpoint .mp-practice{margin-top:24px;align-items:flex-start;gap:20px}.matchpoint .mp-practice>div{gap:10px;align-items:flex-start}.matchpoint .mp-practice-symbol{font-size:var(--text-section)}.matchpoint .mp-practice p{font-size:var(--text-small);line-height:1.6;max-width:145px}.matchpoint .mp-practice>a{font-size:var(--text-small);white-space:nowrap;padding-top:5px}.matchpoint .mp-practice>a span{margin-left:7px}.matchpoint .mp-faq{padding:64px 0 69px}.matchpoint .mp-faq-grid{display:block}.matchpoint .mp-faq .eyebrow{font-size:var(--text-small)}.matchpoint .mp-faq h2{font-size:var(--text-display);margin:20px 0}.matchpoint .mp-faq-grid>div:first-child>p:last-child{font-size:var(--text-small);margin-bottom:29px}.matchpoint .mp-faq-grid>div:first-child>p:last-child br{display:none}.matchpoint .mp-questions summary{padding:20px 0;font-size:var(--text-small);gap:18px}.matchpoint .mp-questions summary>span{width:23px;height:23px;font-size:var(--text-title)}.matchpoint .mp-questions details>p{font-size:var(--text-small);max-width:95%;padding-bottom:21px}.matchpoint .mp-finale{padding:59px 0 51px}.matchpoint .mp-finale .eyebrow{font-size:var(--text-small);letter-spacing:.12em}.matchpoint .mp-finale h2{font-size:23vw;margin:25px 0 30px;line-height:.83}.matchpoint .mp-finale-side{display:none}.matchpoint .mp-finale .mp-no-download{font-size:var(--text-small)}.matchpoint .mp-finale-court{left:44%;width:75%;border-width:2px}}
@media(max-width:375px){.matchpoint .mp-feature{grid-template-columns:20px 1fr 37px;gap:9px}.matchpoint .mp-feature h3{font-size:var(--text-title)}.matchpoint .mp-feature-mark{width:37px;height:37px}.matchpoint .mp-court-bottomline h3{text-transform:uppercase;font-size:var(--text-page)}.matchpoint .mp-surface-tabs button{padding:9px 11px}.matchpoint .mp-surface-tabs button span{font-size:var(--text-body)}.matchpoint .mp-faq h2{font-size:var(--text-display)}.matchpoint .mp-control-block h3{font-size:var(--text-title)}}.matchpoint .mp-feature p,.matchpoint .mp-feel-heading>p:not(.eyebrow),.matchpoint .mp-courts-copy>p,.matchpoint .mp-controls-heading>p,.matchpoint .mp-control-block>p,.matchpoint .mp-touch-note p,.matchpoint .mp-questions details>p{font-size:var(--text-body)}
.matchpoint .film-dialog-head h2{font:var(--heading-weight) var(--text-title)/var(--leading-heading) var(--font-heading);letter-spacing:.01em;text-transform:var(--heading-case)}
@media(max-width:680px){.matchpoint .mp-control-block,.matchpoint .mp-control-block:first-child,.matchpoint .mp-control-block:last-child{grid-template-columns:35% 1fr;column-gap:20px}.matchpoint .mp-control-block>p{line-height:1.6}.matchpoint .mp-feature{grid-template-columns:20px 1fr 40px;gap:10px}.matchpoint .mp-feature-mark{width:40px;height:40px}.matchpoint .mp-touch-note p{line-height:1.6}.matchpoint .mp-feel h2 em br{display:initial}}
@media(prefers-reduced-motion:reduce){:root:not([data-reduced-motion="false"]) .matchpoint *,:root:not([data-reduced-motion="false"]) .matchpoint *:before,:root:not([data-reduced-motion="false"]) .matchpoint *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep the editorial headline within the narrowest supported phone width. */
@media(max-width:375px){.matchpoint .mp-feel h2{font-size:17vw}}

/* Full-bleed gameplay and the lime game-mode section. */
.matchpoint .mp-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: clamp(620px, 47vw, 760px);
  overflow: hidden;
  overflow: clip;
  background: var(--ink);
  color: var(--paper);
}

.matchpoint .mp-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.matchpoint .mp-hero-media canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 120%;
  max-width: none;
  height: 100%;
  opacity: 0;
  transition: opacity .7s ease-out;
}

/* The live court fades in once its first frame is on screen. The still is only
   fetched when WebGL is unavailable, keeping it off the critical path. */
.matchpoint .mp-hero-media[data-demo="ready"] canvas { opacity: 1; }
.matchpoint .mp-hero-media[data-demo="unavailable"] {
  background: url("/assets/optimized/site/image.403ec937fd4e.jpg") center 68% / cover no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-reduced-motion="false"]) .matchpoint .mp-hero-media canvas { transition: none; }
}

.matchpoint .mp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, #071a23eb 0%, #071a23c4 27%, #071a2333 59%, #071a2300 82%), linear-gradient(0deg, #071a2366, transparent 22%);
}

.matchpoint .mp-hero-grid {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: 64px 34px;
}

.matchpoint .mp-hero-copy {
  width: 58%;
  position: relative;
}

.matchpoint .mp-hero-copy > .eyebrow {
  margin-bottom: 24px;
  font-size:var(--text-small);
  letter-spacing: .2em;
}

.matchpoint .mp-hero h1 {
  margin: 0 0 25px -3px;
  font-size:var(--text-display);
  font-weight: 900;
  font-style: italic;
  line-height: .89;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.matchpoint .mp-hero-lead {
  max-width: 490px;
  margin-bottom: 28px;
  font-size:var(--text-title);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.025em;
}

/* On the lime finale, invert the same two brand colors for contrast. */
.matchpoint .mp-finale .mp-play-button {
  background: var(--button-ink);
  color: var(--button-bg);
}
.matchpoint .mp-finale .mp-play-button b { border-color: #dbf77b40; }
.matchpoint .mp-finale .mp-play-button:hover { background: #16333f; }

.matchpoint .mp-hero-baseline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  min-height: 64px;
  padding-bottom: 16px;
  font-size:var(--text-small);
  font-weight: 600;
  letter-spacing: .2em;
}

.matchpoint .mp-hero-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid transparent;
  background: #071a2333;
  color: var(--paper);
  border-radius:var(--radius-control);
}

.matchpoint .mp-hero-pause svg {
  width: 22px;
  height: 22px;
}

.matchpoint .mp-hero-pause:hover {
  background: #071a2399;
  border-color: #f4f2e966;
}

.matchpoint .mp-hero-pause:disabled { visibility: hidden; }

.matchpoint .mp-modes {
  background: var(--lime);
  color: var(--ink);
  padding: 36px 0 52px;
}

.matchpoint .mp-rule-label {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 35px;
}

.matchpoint .mp-rule-label i {
  height: 1px;
  background: #071a2366;
  flex: 1;
}

.matchpoint .mp-rule-label h2 {
  font: var(--heading-weight) var(--text-small)/var(--leading-heading) var(--font-heading);
  letter-spacing: .28em;
  white-space: nowrap;
}

.matchpoint .mp-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.matchpoint .mp-mode {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 35px;
  border-right: 1px solid #071a234d;
  color: var(--ink);
  text-decoration: none;
}

.matchpoint .mp-mode:first-child { padding-left: 0; }
.matchpoint .mp-mode:last-child { padding-right: 0; border-right: 0; }

.matchpoint .mp-mode-number {
  font-size:var(--text-small);
  letter-spacing: .12em;
  font-weight: 600;
}

.matchpoint .mp-mode h3 {
  font-size:var(--text-display);
  line-height: 1;
  letter-spacing: -.025em;
  margin: 12px 0 16px;
}

.matchpoint .mp-mode p {
  max-width: 32ch;
  margin-bottom: 24px;
  font-size:var(--text-body);
  line-height: 1.6;
  color: #21382c;
}

.matchpoint .mp-mode-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 44px;
  margin-top: auto;
  font-size:var(--text-small);
  font-weight: 600;
}

.matchpoint .mp-mode-link b {
  font-size:var(--text-section);
  font-weight: 400;
  transition: transform .2s;
}

.matchpoint .mp-mode:hover .mp-mode-link { text-decoration: underline; text-underline-offset: 4px; }
.matchpoint .mp-mode:hover .mp-mode-link b { transform: translate(3px, -3px); }

.matchpoint .mp-mode small {
  position: absolute;
  bottom: -17px;
  font-size:var(--text-small);
  color: #21382c;
}

/* Controller support: a court-side equipment illustration and connection guide. */
.matchpoint .mp-controller{background:#e3e9d9;padding:clamp(56px,7vw,104px) 0;border-top:1px solid #bbc9af;border-bottom:1px solid #bbc9af}
.matchpoint .mp-controller-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.matchpoint .mp-controller-art{min-width:0;position:relative}
.matchpoint .mp-controller-art>.eyebrow{display:block;padding-left:11%;color:#345644}
.matchpoint .mp-controller-art img{width:100%;height:auto;margin:12px 0}
.matchpoint .mp-controller-caption{display:block;text-align:center;font:600 var(--text-small)/1.5 var(--body);letter-spacing:.19em;color:#345644}
.matchpoint .mp-controller-copy{min-width:0}
.matchpoint .mp-controller h2{font-size:var(--text-display);line-height:.94;letter-spacing:-.025em;margin:18px 0 22px}
.matchpoint .mp-controller h2 em{color:#345644}
.matchpoint .mp-controller-lead{font-size:var(--text-body);line-height:1.7;max-width:46ch}
.matchpoint .mp-controller-buttons{margin:24px 0 30px;display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.matchpoint .mp-controller-buttons div{border-top:1px solid #acbca0;padding-top:12px}
.matchpoint .mp-controller-buttons dt{font-size:var(--text-small);font-weight:600;letter-spacing:.1em;margin-bottom:5px}
.matchpoint .mp-controller-buttons dd{margin:0;font-size:var(--text-small);line-height:1.6}
.matchpoint .mp-controller-buttons b{font-weight:800}
.matchpoint .mp-controller-setup h3{font-size:var(--text-title);margin-bottom:10px}
.matchpoint .mp-controller-setup details{border-top:1px solid #acbca0}
.matchpoint .mp-controller-setup details:last-child{border-bottom:1px solid #acbca0}
.matchpoint .mp-controller-setup summary{display:flex;justify-content:space-between;gap:16px;align-items:center;cursor:pointer;list-style:none;min-height:54px;font-size:var(--text-small);font-weight:600;letter-spacing:.04em}
.matchpoint .mp-controller-setup summary::-webkit-details-marker{display:none}
.matchpoint .mp-controller-setup summary>span:last-child{font-size:var(--text-title);font-weight:400;transition:transform .2s}
.matchpoint .mp-controller-setup details[open] summary>span:last-child{transform:rotate(45deg)}
.matchpoint .mp-controller-setup details p{font-size:var(--text-small);line-height:1.75;margin:0 0 15px;max-width:55ch}
.matchpoint .mp-controller-sources{display:flex;gap:20px;flex-wrap:wrap}
.matchpoint .mp-controller-sources a{text-decoration:underline;text-underline-offset:3px}
.matchpoint .mp-controller-start{font-size:var(--text-small);line-height:1.7;color:#345644;margin:18px 0 23px;max-width:58ch}
@media(max-width:760px){.matchpoint .mp-controller-grid{grid-template-columns:1fr;gap:32px}.matchpoint .mp-controller-art{max-width:460px;width:100%;margin:0 auto}.matchpoint .mp-controller-art img{margin:0}.matchpoint .mp-controller-copy{max-width:560px}.matchpoint .mp-controller h2{font-size:var(--text-display)}.matchpoint .mp-controller-buttons{gap:18px 14px}}