/* Match tab v4 (4 Nov, Joshua's "Match Experience Redesign v4"): calm Carlos-led home + full-screen pages (.mr) instead of tall sheets.
   One accent (the app's purple #6D49FF), soft tints, white surfaces, hairlines, no thick outlines or repeated character art. Driven by match.js. */

/* ---------- Match home ---------- */
.m4{--mx:#6D49FF;--nv:#0B1021;--mu:#6B6E99;--hl:rgba(11,16,33,.08)}
.m4 .mc-sub{margin:2px 0 16px;font-size:15px;font-weight:600;color:var(--mu)}
.m4-hero{position:relative;display:flex;align-items:flex-end;min-height:178px;padding:20px 0 0 20px;border-radius:22px;overflow:hidden;
  background:radial-gradient(120% 120% at 100% 100%,#E7E0FF 0%,rgba(231,224,255,0) 55%),linear-gradient(160deg,#FFFFFF 0%,#F6F3FF 100%);box-shadow:0 1px 3px rgba(60,50,140,.08),0 0 0 1px rgba(109,73,255,.08) inset}
.m4-hc{position:relative;z-index:1;flex:1;align-self:center;padding-bottom:20px}
.m4-hero h3{margin:0;font-size:22px;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--nv)}
.m4-hero p{margin:6px 0 14px;max-width:180px;font-size:15px;font-weight:600;line-height:1.35;color:var(--mu)}
.m4-go{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:0;border-radius:99px;background:var(--mx);color:#fff;font:inherit;font-size:16px;font-weight:800;cursor:pointer;
  box-shadow:0 6px 16px -6px rgba(109,73,255,.6);transition:transform .3s cubic-bezier(.34,1.36,.5,1)}
.m4-go:active{transform:scale(.96)}
.m4-hero img{flex:none;width:150px;margin:0 -8px 0 -24px;align-self:flex-end;pointer-events:none}
.m4-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.m4-two button,.m4-after,.m4-how{display:flex;border:0;background:#fff;font:inherit;text-align:left;cursor:pointer;box-shadow:0 1px 3px rgba(60,50,140,.07);transition:transform .3s cubic-bezier(.34,1.36,.5,1)}
.m4-two button:active,.m4-after:active,.m4-how:active,.mr-pr:active,.mr-ch button:active{transform:scale(.98)}
.m4-two button{flex-direction:column;align-items:flex-start;gap:2px;min-height:112px;padding:14px;border-radius:18px}
.m4-two b{margin-top:10px;font-size:15.5px;font-weight:800;color:var(--nv)}
.m4-two small,.m4-after small{font-size:12.5px;font-weight:600;line-height:1.3;color:var(--mu)}
.m4-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px}
.m4-ic svg{width:19px;height:19px}
.m4-ic.r{background:#FFF1DC;color:#E8890C}
.m4-ic.p{background:#EEE9FF;color:var(--mx)}
.m4-ic.a{background:#E6F7EE;color:#14A44D}
.m4-how{align-items:center;gap:12px;width:100%;margin-top:12px;padding:12px 14px 12px 16px;border-radius:16px;box-shadow:0 0 0 1px rgba(109,73,255,.18) inset}
.m4-how span{flex:1;min-width:0;display:flex;flex-direction:column}
.m4-how small{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mx)}
.m4-how b{font-size:15.5px;font-weight:800;color:var(--nv)}
.m4-how em{font-style:normal;padding:8px 14px;border-radius:99px;background:#EEE9FF;color:var(--mx);font-size:14px;font-weight:800}
.m4-sec{display:flex;align-items:baseline;justify-content:space-between;margin:24px 2px 8px}
.m4-sec h3{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--nv)}
.m4-sec button{min-height:44px;padding:0 2px;border:0;background:none;font:inherit;font-size:14.5px;font-weight:800;color:var(--mx);cursor:pointer}
.m4-after{align-items:center;gap:12px;width:100%;margin-top:12px;padding:12px 14px;border-radius:18px}
.m4-after>span:not(.m4-ic){flex:1;display:flex;flex-direction:column}
.m4-after b{font-size:15.5px;font-weight:800;color:var(--nv)}
.m4-after>svg,.mr-pr>svg,.mr-ch button>svg{flex:none;width:15px;height:15px;color:#B4B6CC}

/* problem rows: one white card, hairlines between rows, a small coloured dot for the group */
.mr-list{border-radius:18px;background:#fff;box-shadow:0 1px 3px rgba(60,50,140,.07);overflow:hidden}
.mr-pr{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:11px 14px 11px 16px;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
.mr-pr+.mr-pr,.mr-list .mr-more{border-top:.5px solid rgba(11,16,33,.1)}
.mr-pr>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mr-pr b{font-size:15.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:#0B1021}
.mr-pr small{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#8A8CA8}
.mr-pr small i{width:7px;height:7px;border-radius:50%;background:#8B78FF}
.mr-pr i.g-shots{background:#22C55E}.mr-pr i.g-tactics{background:#F59E0B}.mr-pr i.g-match{background:#EF6A4C}.mr-pr i.g-move{background:#06B6D4}.mr-pr i.g-doubles{background:#EC4899}
.mr-more{display:block;width:100%;min-height:50px;border:0;background:none;font:inherit;font-size:15px;font-weight:800;color:#6D49FF;cursor:pointer}

/* ---------- full-screen pages ---------- */
.mr{position:absolute;inset:0;z-index:45;overflow:hidden;pointer-events:none}
.mr-s{--mx:#6D49FF;--nv:#0B1021;--mu:#6B6E99;position:absolute;inset:0;display:flex;flex-direction:column;background:#F5F5FA;color:var(--nv);pointer-events:auto;will-change:transform;box-shadow:-10px 0 30px rgba(0,0,0,.08)}
.mr-s.off{visibility:hidden}
.mr-bar{flex:none;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;padding:calc(max(10px,env(safe-area-inset-top)) + 2px) 10px 6px;background:#F5F5FA}
.mr-bar b{text-align:center;font-size:15px;font-weight:800;color:var(--nv);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mr-b{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--nv);cursor:pointer;box-shadow:0 1px 3px rgba(60,50,140,.08)}
.mr-b svg{width:18px;height:18px}
.mr-sc{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:10px 20px calc(36px + env(safe-area-inset-bottom));scrollbar-width:none}
.mr-sc::-webkit-scrollbar{display:none}
.mr-sc h1{margin:0;font-weight:800;letter-spacing:-.025em;color:var(--nv);text-wrap:balance}

/* Carlos + a heading */
.mr-hi{display:flex;align-items:center;gap:12px;margin:2px 0 18px}
.mr-hi img{flex:none;width:92px;height:auto}
.mr-hi h1{font-size:24px;line-height:1.15}
.mr-hi p{margin:6px 0 0;font-size:15px;font-weight:600;color:var(--mu)}
.mr-step{display:block;margin:0;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mu)}
.mr-qh{margin:6px 0 18px !important;font-size:26px;line-height:1.15}
.mr-qh.sm{margin-top:16px !important;font-size:21px}

/* choices: compact white cards, Not sure quieter */
.mr-ch{display:flex;flex-direction:column;gap:10px}
.mr-ch.g2{display:grid;grid-template-columns:1fr 1fr}
.mr-ch button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:54px;padding:12px 16px;border:0;border-radius:16px;background:#fff;font:inherit;font-size:16px;font-weight:700;line-height:1.3;color:var(--nv);text-align:left;cursor:pointer;box-shadow:0 1px 3px rgba(60,50,140,.07);transition:transform .3s cubic-bezier(.34,1.36,.5,1)}
.mr-ch.g2 button{justify-content:center;text-align:center}
.mr-ch button.ns{background:transparent;box-shadow:0 0 0 1.2px #DCDCE8 inset;color:var(--mu)}
.mr-q{display:flex;align-items:center;gap:10px;height:46px;margin-top:18px;padding:0 14px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(11,16,33,.07) inset;color:#9C9EB8}
.mr-q svg{flex:none;width:17px;height:17px}
.mr-q input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:none;font:inherit;font-size:15.5px;font-weight:600;color:var(--nv)}
.mr-q input::placeholder{color:#9C9EB8}
.mr-res:not(:empty){margin-top:10px}
.mr-none{margin:0;padding:14px 16px;border-radius:16px;background:#fff;font-size:14.5px;font-weight:600;line-height:1.45;color:var(--mu)}
.mr-none b{color:var(--nv)}
.mr-link{display:block;margin:14px auto 0;min-height:44px;padding:0 12px;border:0;background:none;font:inherit;font-size:15px;font-weight:800;color:var(--mx);cursor:pointer}

/* the coaching page */
.mr-ih{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.mr-ih img{flex:none;width:66px;height:auto}
.mr-ih small{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.mr-ih h1{margin-top:2px !important;font-size:22px;line-height:1.2}
.mr-feel{margin:0 0 14px;font-size:16px;font-weight:600;line-height:1.45;color:#3A3D5C}
.mr-may{padding:14px 16px;border-radius:16px;background:#fff;box-shadow:0 1px 3px rgba(60,50,140,.06)}
.mr-may h4,.mr-h4{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.mr-may p{margin:0;font-size:15px;font-weight:600;line-height:1.45;color:#3A3D5C}
.mr-may p+p{margin-top:6px}
.mr-try{margin-top:12px;padding:16px 18px;border-radius:18px;background:#F0ECFF}
.mr-try small{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mx)}
.mr-try b{display:block;margin-top:4px;font-size:20px;font-weight:800;line-height:1.25;letter-spacing:-.015em}
.mr-try p{margin:6px 0 0;font-size:16px;font-weight:600;line-height:1.45;color:#2A2D4A}
.mr-try.sm b{font-size:18px}
.mr-try details{margin-top:10px}
.mr-try summary{display:inline-flex;min-height:32px;align-items:center;font-size:14px;font-weight:800;color:var(--mx);cursor:pointer;list-style:none}
.mr-try summary::-webkit-details-marker{display:none}
.mr-try summary::after{content:"+";margin-left:6px}
.mr-try details[open] summary::after{content:"–"}
.mr-try details p{margin-top:2px;font-size:15px}
.mr-acts{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.mr-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 18px;border:0;border-radius:16px;background:var(--mx);color:#fff;font:inherit;font-size:17px;font-weight:800;cursor:pointer;
  box-shadow:0 8px 20px -10px rgba(109,73,255,.8);transition:transform .3s cubic-bezier(.34,1.36,.5,1)}
.mr-btn:active{transform:scale(.97)}
.mr-btn.ghost{background:#fff;color:var(--nv);box-shadow:0 0 0 1px rgba(11,16,33,.08) inset}
.mr-btn svg,.mr-tert svg{width:16px;height:16px}
.mr-tert{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}
.mr-tert button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;background:none;font:inherit;font-size:14.5px;font-weight:800;color:var(--mx);cursor:pointer}
.mr-fine{margin:16px 0 0;text-align:center;font-size:12.5px;font-weight:600;color:#9C9EB8}

/* a moment with Carlos */
.mr-done{display:flex;flex-direction:column;align-items:center;text-align:center;margin:4px 0 18px}
.mr-done img{width:130px;height:auto}
.mr-done h1{margin-top:6px !important;font-size:24px;line-height:1.2}
.mr-done p{margin:6px 0 0;max-width:300px;font-size:15.5px;font-weight:600;line-height:1.45;color:var(--mu)}
.mr-chips{display:flex;flex-wrap:wrap;gap:8px}
.mr-chips button{min-height:40px;padding:0 15px;border:0;border-radius:99px;background:#fff;font:inherit;font-size:14.5px;font-weight:700;color:var(--nv);cursor:pointer;box-shadow:0 0 0 1px rgba(11,16,33,.08) inset}
.mr-chips button.on{background:var(--mx);color:#fff;box-shadow:none}

/* drill */
.mr-steps{margin:12px 0 0;padding:14px 16px 14px 36px;border-radius:16px;background:#fff;box-shadow:0 1px 3px rgba(60,50,140,.06);font-size:15.5px;font-weight:600;line-height:1.45;color:#2A2D4A}
.mr-steps li+li{margin-top:8px}
.mr-nokit{margin-top:12px}
.mr-nokit summary{min-height:44px;display:flex;align-items:center;font-size:14.5px;font-weight:800;color:var(--mx);cursor:pointer}
.mr-safe{display:flex;gap:8px;align-items:flex-start;margin:14px 2px 0;font-size:14px;font-weight:600;line-height:1.4;color:var(--mu)}
.mr-safe svg{flex:none;width:17px;height:17px;margin-top:1px;color:#14A44D}

/* Match Ready plan: two lines, never more */
.mr-plan{border-radius:18px;background:#fff;box-shadow:0 1px 3px rgba(60,50,140,.07)}
.mr-plan>div{display:flex;gap:12px;padding:16px}
.mr-plan>div+div{border-top:.5px solid rgba(11,16,33,.1)}
.mr-plan i{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#F0ECFF;color:var(--mx);font-style:normal;font-size:14px;font-weight:800}
.mr-plan small{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.mr-plan b{display:block;margin-top:2px;font-size:17px;font-weight:800;line-height:1.35}

/* Pressure Points page */
.mr-pg{font-size:28px;line-height:1.1}
.mr-sub{margin:4px 0 0;font-size:15px;font-weight:600;color:var(--mu)}
.mr-g{flex-wrap:nowrap;overflow-x:auto;margin:14px -20px 12px;padding:2px 20px;scrollbar-width:none}
.mr-g::-webkit-scrollbar{display:none}
.mr-g button{flex:none}
.mr-sc>.mr-list{margin-top:4px}
@media (prefers-reduced-motion:reduce){.mr-s{animation:none !important}}
/* emoji in front of a choice (Match Ready moods, Joshua 4 Nov) */
.mr-l{display:flex;align-items:center;gap:12px}
.mr-em{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#F5F3FF;font-size:22px;line-height:1}
.mr-ch button.ns .mr-em{background:transparent}

/* ---------- the coaching page, take 2 (Joshua: "so much text"): one big idea card ---------- */
.mi-q{margin:2px 0 10px;font-size:15px;font-weight:700;line-height:1.35;color:var(--mu);text-align:right;padding-left:48px}
.mi-say{display:flex;align-items:flex-end;gap:8px;margin-bottom:14px}
.mi-say img{flex:none;width:58px;height:auto}
.mi-say p{position:relative;margin:0 0 10px;padding:12px 15px;border-radius:18px 18px 18px 6px;background:#fff;box-shadow:0 1px 3px rgba(60,50,140,.08);font-size:16px;font-weight:700;line-height:1.4;color:var(--nv)}
.mi-card{position:relative;padding:20px 20px 22px;border-radius:24px;overflow:hidden;color:#fff;
  background:radial-gradient(110% 90% at 100% 0%,#8F73FF 0%,rgba(143,115,255,0) 60%),var(--ds-grad-purple);box-shadow:0 14px 30px -16px rgba(80,40,220,.75)}
.mi-card img{position:absolute;top:10px;right:6px;width:112px;height:112px;object-fit:contain;pointer-events:none}
.mi-card small{display:inline-flex;padding:5px 11px;border-radius:99px;background:rgba(255,255,255,.18);font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.mi-card b{display:block;max-width:64%;margin-top:12px;font-size:25px;font-weight:800;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.mi-card p{margin:14px 0 0;font-size:16.5px;font-weight:600;line-height:1.45;color:rgba(255,255,255,.9)}
.mi-more{margin-top:10px;border-radius:16px;background:#fff;box-shadow:0 1px 3px rgba(60,50,140,.06)}
.mi-more summary{display:flex;align-items:center;justify-content:space-between;min-height:50px;padding:0 16px;font-size:15px;font-weight:800;color:var(--nv);cursor:pointer;list-style:none}
.mi-more summary::-webkit-details-marker{display:none}
.mi-more summary svg{width:14px;height:14px;color:#B4B6CC;transform:rotate(90deg);transition:transform .25s}
.mi-more[open] summary svg{transform:rotate(-90deg)}
.mi-more p{margin:0;padding:0 16px 14px;font-size:15px;font-weight:600;line-height:1.45;color:#3A3D5C}
.mi-more p+p{margin-top:-6px}
.mi-go{width:100%;margin-top:18px}
.mi-acts{display:flex;justify-content:center;gap:10px;margin-top:12px}
.mi-t{flex:1;max-width:110px;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:76px;padding:10px 4px;border:0;border-radius:16px;background:#fff;box-shadow:0 1px 3px rgba(60,50,140,.07);font:inherit;font-size:13px;font-weight:800;color:var(--nv);cursor:pointer;transition:transform .3s cubic-bezier(.34,1.36,.5,1)}
.mi-t:active{transform:scale(.95)}
.mi-ti{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#F0ECFF;color:var(--mx)}
.mi-ti svg{width:18px;height:18px}

/* ---------- Match home, take 2 (Joshua: "this page looks real boring") ---------- */
.m5 .mc-sub{margin-bottom:14px}
.m5-hero{position:relative;display:flex;align-items:flex-end;min-height:200px;padding:20px 0 0 20px;border-radius:24px;overflow:hidden;color:#fff;
  background:radial-gradient(90% 80% at 85% 20%,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 60%),var(--ds-grad-green);box-shadow:0 18px 34px -20px rgba(10,120,70,.9)}
/* faint court lines behind Carlos */
.m5-court{position:absolute;right:-30px;bottom:-40px;width:250px;height:190px;border:2px solid rgba(255,255,255,.22);border-radius:6px;transform:perspective(300px) rotateX(48deg);pointer-events:none}
.m5-court::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:2px solid rgba(255,255,255,.22)}
.m5-court::after{content:"";position:absolute;left:18%;right:18%;top:50%;border-top:2px solid rgba(255,255,255,.22)}
.m5-hero::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--mp-a),transparent 0 60%,rgba(255,255,255,.5) 74%,#fff 86%,#FFE58A 94%,transparent),linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:mpSnake 6.5s linear infinite}
.m5-hc{position:relative;z-index:2;flex:1;align-self:center;padding-bottom:20px}
.m5-hc small{display:inline-flex;padding:5px 11px;border-radius:99px;background:rgba(0,0,0,.14);font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.m5-hero h3{margin:10px 0 0;font-size:24px;font-weight:800;line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.m5-hero p{margin:6px 0 14px;max-width:170px;font-size:15px;font-weight:600;line-height:1.35;color:rgba(255,255,255,.85)}
.m5-go{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px 0 20px;border:0;border-radius:99px;background:#fff;color:#0B8A4E;font:inherit;font-size:16px;font-weight:800;cursor:pointer;
  box-shadow:0 8px 18px -8px rgba(0,60,30,.6);transition:transform .3s cubic-bezier(.34,1.36,.5,1)}
.m5-go svg{width:14px;height:14px}
.m5-go:active{transform:scale(.96)}
.m5-hero>img{position:relative;z-index:2;flex:none;width:160px;margin:0 -12px -4px -30px;align-self:flex-end;filter:drop-shadow(0 10px 14px rgba(0,60,30,.35));pointer-events:none}
.m5-quick{display:flex;gap:8px;margin:12px -20px 0;padding:2px 20px;overflow-x:auto;scrollbar-width:none}
.m5-quick::-webkit-scrollbar{display:none}
.m5-quick button{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px 0 11px;border:0;border-radius:99px;background:#fff;box-shadow:0 1px 3px rgba(60,50,140,.08);font:inherit;font-size:14.5px;font-weight:800;color:#0B1021;cursor:pointer;white-space:nowrap}
.m5-quick span{font-size:19px}
.m5 .m4-how{margin-top:14px}
.m5-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.m5-t{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:150px;padding:14px 14px 16px;border:0;border-radius:22px;overflow:hidden;font:inherit;color:#fff;text-align:left;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.36,.5,1)}
.m5-t:active{transform:scale(.97)}
.m5-t.o{background:var(--ds-grad-orange);box-shadow:0 14px 26px -18px rgba(200,100,10,.9),inset 0 0 0 1.5px rgba(255,255,255,.18)}
.m5-t.p{background:var(--ds-grad-purple);box-shadow:0 14px 26px -18px rgba(80,40,220,.9),inset 0 0 0 1.5px rgba(255,255,255,.14)}
.m5-t small{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.m5-t b{margin-top:4px;font-size:18px;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.m5-t span{position:relative;z-index:1;margin-top:3px;font-size:13px;font-weight:700;opacity:.9}
.m5-t img{position:absolute;right:-8px;bottom:-8px;width:88px;height:88px;object-fit:contain;transform:rotate(-8deg);filter:drop-shadow(0 8px 10px rgba(0,0,0,.18));pointer-events:none}
/* Pressure Points: picture cards you swipe */
.m5-pp{display:flex;gap:12px;margin:0 -20px;padding:2px 20px 8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;scrollbar-width:none}
.m5-pp::-webkit-scrollbar{display:none}
.m5-pc{flex:none;width:150px;display:flex;flex-direction:column;align-items:flex-start;padding:0 0 14px;border:0;border-radius:20px;background:#fff;box-shadow:0 1px 3px rgba(60,50,140,.08);font:inherit;text-align:left;cursor:pointer;scroll-snap-align:start;overflow:hidden;transition:transform .3s cubic-bezier(.34,1.36,.5,1)}
.m5-pc:active{transform:scale(.97)}
.m5-pa{display:grid;place-items:center;width:100%;height:104px;background:var(--pc,#EEE9FF)}
.m5-pa img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.12))}
.m5-pc b{margin:10px 12px 0;font-size:14.5px;font-weight:800;line-height:1.25;letter-spacing:-.01em;color:#0B1021}
.m5-pc small{margin:auto 12px 0;padding-top:6px;font-size:11.5px;font-weight:800;color:var(--pt,#6D49FF)}
.m5-pc.g-mind{--pc:#EEE9FF;--pt:#6D49FF}.m5-pc.g-shots{--pc:#DDF7E6;--pt:#14A44D}.m5-pc.g-tactics{--pc:#FFF0D2;--pt:#D97A06}
.m5-pc.g-match{--pc:#FFE4DC;--pt:#E0532F}.m5-pc.g-move{--pc:#DAF4FA;--pt:#0891B2}.m5-pc.g-doubles{--pc:#FFE1F0;--pt:#DB2777}
.m5-after{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:10px 14px 10px 10px;border:0;border-radius:20px;background:#fff;box-shadow:0 1px 3px rgba(60,50,140,.08);font:inherit;text-align:left;cursor:pointer}
.m5-after img{flex:none;width:58px;height:58px;padding:6px;border-radius:14px;background:#E6F7EE;object-fit:contain}
.m5-after>span{flex:1;display:flex;flex-direction:column}
.m5-after b{font-size:15.5px;font-weight:800;color:#0B1021}
.m5-after small{font-size:12.5px;font-weight:600;color:#6B6E99}
.m5-after>svg{flex:none;width:15px;height:15px;color:#B4B6CC}
@media (prefers-reduced-motion:reduce){.m5-hero::after{animation:none}}

/* ---------- Match Ready take 2 (4 Nov): a colour card per kind of Reset, the game plan on the green court, a breathing circle ---------- */
.rd-tag{margin:6px 0 0 !important;font-size:14px !important;font-weight:700;color:var(--mu)}
.rd-c{position:relative;margin-top:12px;padding:16px 18px 18px;border-radius:22px;overflow:hidden}
.rd-hd{display:flex;align-items:center;gap:10px}
.rd-em{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.75);font-size:22px;line-height:1}
.rd-hd small{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.rd-c b{display:block;margin-top:12px;font-size:20px;font-weight:800;line-height:1.3;letter-spacing:-.015em;text-wrap:pretty}
.rd-c p{margin:6px 0 0;font-size:15px;font-weight:600;line-height:1.45}
.rd-r{--r1:#FFF1DD;--r2:#FFDDB3;--rk:#B4630B;background:linear-gradient(160deg,var(--r1),var(--r2));color:var(--nv);box-shadow:0 1px 3px rgba(60,50,140,.06)}
.rd-r small{color:var(--rk)}
.rd-r p{color:#3E4160}
.rd-r.k-breathe{--r1:#E6F3FF;--r2:#C9E4FF;--rk:#2A6FB8}
.rd-r.k-words{--r1:#FFEBF4;--r2:#FFD3E7;--rk:#B23A78}
.rd-r.k-eyes{--r1:#F1EDFF;--r2:#DFD6FF;--rk:#5B36F0}
.rd-r.k-routine{--r1:#FFF8D8;--r2:#FFEBA0;--rk:#8A6400}
.rd-r.k-fuel{--r1:#E8F8EE;--r2:#CBF0D8;--rk:#1E7F45}
.rd-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:14px;padding:0 20px;border:0;border-radius:99px;background:var(--rk);color:#fff;font:inherit;font-size:15.5px;font-weight:800;cursor:pointer;box-shadow:0 8px 18px -10px var(--rk);transition:transform .3s cubic-bezier(.34,1.36,.5,1)}
.rd-go:active{transform:scale(.96)}
.rd-go svg{width:14px;height:14px}
.rd-g{color:#fff;background:radial-gradient(90% 80% at 85% 10%,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 60%),var(--ds-grad-green);box-shadow:0 16px 30px -20px rgba(10,120,70,.9)}
.rd-g .rd-em{background:rgba(255,255,255,.2)}
.rd-g small,.rd-g p{color:rgba(255,255,255,.88)}
.rd-g::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--mp-a),transparent 0 60%,rgba(255,255,255,.5) 74%,#fff 86%,#FFE58A 94%,transparent),linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:mpSnake 7s linear infinite}
.rd-more{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:18px;padding:14px 16px;border:0;border-radius:16px;background:#fff;font:inherit;text-align:left;color:var(--nv);cursor:pointer;box-shadow:0 1px 3px rgba(60,50,140,.07)}
.rd-more small{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mx)}
.rd-more b{display:block;margin-top:2px;font-size:15.5px;font-weight:800}
.rd-more>svg{flex:none;width:15px;height:15px;color:#B4B6CC}
.mr-ch+.mr-tert{margin-top:14px}
/* breathing circle */
.rd-br{display:flex;flex-direction:column;align-items:center;padding:24px 0 4px;text-align:center}
.rd-ring{position:relative;display:grid;place-items:center;width:250px;height:250px}
.rd-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px dashed rgba(42,111,184,.28)}
.rd-ring i{position:absolute;inset:0;border-radius:50%;transform:scale(.55);background:radial-gradient(circle at 35% 30%,#D4EDFF 0%,#6DB6F5 45%,#2F7FD6 100%);box-shadow:0 22px 44px -20px rgba(47,127,214,.9),inset 0 0 0 2px rgba(255,255,255,.35)}
.rd-ring b{position:relative;display:grid;place-items:center;font-size:58px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 2px 10px rgba(20,70,140,.35)}
.rd-ring b svg{width:56px;height:56px}
.rd-say{margin:26px 0 0;font-size:25px;font-weight:800;letter-spacing:-.02em;color:var(--nv)}
.rd-of{margin:6px 0 0;min-height:20px;font-size:14.5px;font-weight:700;color:var(--mu)}
@media (prefers-reduced-motion:reduce){.rd-g::after{animation:none}}

/* ---------- Match pages open like the Tips sheet (4 Nov, Joshua: "Tips brings up this almost full-screen page… Ask Carlos slides in from the side,
   and it looks different"): the first page slides up and the app steps back; deeper pages slide in from the side inside the sheet ---------- */
.mr-dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:auto}
.mr.up .mr-s{top:calc(max(14px,env(safe-area-inset-top)) + 34px);border-radius:var(--ds-r-sheet,16px) var(--ds-r-sheet,16px) 0 0;overflow:hidden;box-shadow:0 -10px 40px rgba(0,0,0,.25)}
.mr.up .mr-bar{padding-top:14px}
.mr.up .mr-s.up .mr-bar [data-mr=back]{visibility:hidden}
.mr.up .mr-s.up::before{content:"";position:absolute;top:7px;left:50%;z-index:2;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:rgba(11,16,33,.18)}