/* =====================================================================================================
   brand.css  -  The Padel Syndicate look ("Night Court"), from the Brand & Marketing Guidelines 2026.
   Language: CSS (plain, no build step).   Added 12/11/2026.

   HOW IT WORKS
     Every rule here starts with ".ps". index.html puts the class "ps" on <html> before the page is
     drawn, unless the visitor chose the classic view (stored on their phone as ps-look = classic).
     Remove the class and the site looks exactly as it did before: no rule in this file applies.
     Nothing here changes what the site does. It only changes how it looks and moves.

   BRAND RULES APPLIED (section numbers are from the guidelines)
     04 Colour      Night #0E0E0F ground, Graphite #1C1C1D blocks, Syndicate Gold #FCCE02, Flame #FC5202
                    as the one hot element, Steel #8C8C8E for quiet text. No gold text on light grounds.
     05 Type        Bebas Neue capitals for headlines, team names, scores and kickers. Inter for the rest.
                    Labels are Inter Bold 12, capitals, +8% tracking.
     06 Shapes      Solid colour blocks with cut corners. No rounded boxes, no pills.
                    One graphic device per layout: the racket-dot field in the page header block.
     04 Results     Win and loss are told apart by lightness and a letter (W / L chips), never hue alone.
     11 App         Gold primary button with a black label; flame only for entering a score;
                    44px minimum tap targets; 2px gold focus ring.
   ===================================================================================================== */

/* ---------- TOKENS ----------
   The old stylesheet reads these same variable names, so redefining them here also restyles anything
   that uses them directly (including styles added later by s5-core.js and my-matches.js). */
html.ps{
  --bg:#0E0E0F; --panel:#1C1C1D; --panel-2:#0E0E0F; --line:#3F3F40; --line-soft:#2B2B2C;
  --txt:#FFFFFF; --dim:#B4B4B6; --faint:#8C8C8E;
  --gold:#FCCE02; --gold-light:#FFE36B; --gold-bg:rgba(252,206,2,.10); --gold-line:#FCCE02;
  --flame:#FC5202; --charcoal:#3F3F40;
  --green:#FCCE02; --green-bg:rgba(252,206,2,.10); --green-line:#FCCE02;   /* "played / won" is gold now */
  --red:#FC5202; --amber:#FFE36B;
  --tap:48px; --disp:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  --ps-ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}

/* ---------- PAGE ---------- */
.ps body{background:var(--bg);font-size:16px}
.ps body::before{background:none}
.ps h1,.ps h2,.ps h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.02em}
.ps :focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ps ::selection{background:var(--gold);color:#000}

/* ---------- HEADER: crest left, name on two lines beside it ("SYNDICATE" in gold) ---------- */
.ps header{background:rgba(14,14,15,.9);border-bottom:1px solid var(--line-soft)}
.ps .bar{justify-content:flex-start;gap:12px;padding:8px 14px}
.ps .crestbtn{border-radius:0;width:48px;height:48px}
.ps .crestbtn img{width:46px;height:46px}
/* The markup reads SYNDICATE + PADEL. Flip the two lines and add "THE" so it reads THE PADEL / SYNDICATE. */
.ps .mark{display:flex;flex-direction:column-reverse;align-items:flex-start;margin-right:auto;text-align:left;
  font-size:27px;letter-spacing:.04em;line-height:.86;color:var(--gold)}
.ps .mark span{font-family:var(--disp);font-weight:400;font-size:15px;letter-spacing:.14em;color:#fff;margin:0 0 2px}
.ps .mark span::before{content:'THE '}
.ps .circ{width:44px;height:44px;border:0;border-radius:0;background:var(--panel);color:#fff;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:background .15s,color .15s}
.ps .circ:active{background:var(--gold);color:#000}
.ps .circ:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--gold)}
.ps #acct .dot{top:5px;right:5px;width:9px;height:9px;border-radius:0;background:var(--gold);border:2px solid var(--panel)}
/* The refresh arrow turns while the data is reloading (the app dims the button for that moment). */
.ps #reload[style*="opacity"]{opacity:1!important}
.ps #reload[style*="opacity"] svg{animation:spin .8s linear infinite;color:var(--gold)}

.ps main{padding:14px 14px 28px}
.ps .view{animation:none}

/* ---------- PAGE HEADER BLOCK (.hero): kicker, huge headline, short rule, racket-dot field ---------- */
.ps .hero{display:flex;flex-direction:column;align-items:flex-start;background:var(--panel);border:0;border-radius:0;
  box-shadow:none;padding:22px 20px 26px;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%)}
.ps .hero>*{position:relative;z-index:1;order:2;max-width:100%}
.ps .hero>.eyebrow,.ps .hero>h1{order:0}
.ps .eyebrow{font-family:var(--disp);font-weight:400;font-size:18px;letter-spacing:.12em;line-height:1.1;color:var(--gold);margin:0}
.ps .hero h1{font-size:clamp(56px,18.5vw,104px);line-height:.88;margin:6px 0 0;letter-spacing:.012em;color:#fff;overflow-wrap:anywhere}
/* The short rule under the headline. Flame by default: the one hot element of the layout.
   On a screen that already has a flame button (entering a score) the rule steps back to gold. */
.ps .hero::after{content:'';position:static;order:1;width:56px;height:4px;border-radius:0;margin:16px 0 14px;
  background:var(--flame);transform-origin:0 50%;transition:background .3s}
.ps .view:has(#send,[data-score],[data-mmscore]) .hero::after{background:var(--gold)}
/* Racket-dot field, top right, fading out towards the text (taken from the perforated racket faces). */
.ps .hero::before{content:'';position:absolute;left:auto;bottom:auto;top:0;right:0;width:68%;height:190px;z-index:0;
  background:radial-gradient(circle,var(--gold) 1.25px,transparent 1.7px) 0 0/11px 11px;opacity:.5;
  -webkit-mask-image:linear-gradient(212deg,#000 4%,transparent 58%);mask-image:linear-gradient(212deg,#000 4%,transparent 58%)}
.ps .hero .upd{color:var(--dim);font-size:15px;margin:0}
.ps .hero .pager{align-self:stretch;margin-top:18px}
.ps .hero .form{margin:14px 0 0}

/* Status label (was a pill): square, outlined, with a small square marker */
.ps .pill{border-radius:0;border:1px solid var(--gold);background:transparent;color:var(--gold);padding:7px 10px;margin-top:14px;
  font-size:12px;font-weight:700;line-height:1;letter-spacing:.08em;text-transform:uppercase;gap:8px}
.ps .pill::before{content:'';width:6px;height:6px;background:currentColor;flex:none}
.ps .pill.grey{border-color:var(--line);background:transparent;color:var(--dim)}
.ps .pill:empty{display:none}

/* ---------- DROPDOWNS AND SEARCH BOXES ---------- */
.ps .pager select,.ps .pager input,.ps .s5-sel{border-radius:0;border:1px solid var(--line);background-color:var(--bg);color:#fff;
  min-height:var(--tap);font-weight:600;font-size:15px}
.ps .pager select{padding:0 42px 0 14px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FCCE02' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.ps .pager input{padding:10px 14px}
.ps .pager select:focus,.ps .pager input:focus,.ps .panel input:focus,.ps input:focus,.ps .s5-sel:focus{
  border-color:var(--gold);outline:none;box-shadow:0 0 0 1px var(--gold)}

/* ---------- TABS: a strip with a 3px gold bar under the active tab ---------- */
.ps .tabs{flex-wrap:nowrap;justify-content:flex-start;gap:0;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:0;margin:20px 0 10px;background:none;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ps .tabs::-webkit-scrollbar{display:none}
.ps .tabs button{flex:1 0 auto;position:relative;min-height:var(--tap);padding:0 14px;border:0;border-radius:0;background:none;
  color:var(--dim);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:color .15s}
.ps .tabs button.on{color:var(--gold);border:0;background:none}
.ps .tabs button.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold);
  transform-origin:50% 50%;animation:ps-bar .32s var(--ps-ease)}
.ps .tabs button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--gold)}

/* ---------- SECTION HEADINGS: angled gold tick, heading, hairline ---------- */
.ps .sect{margin:30px 0 12px;gap:10px}
.ps .sect::before{content:'';flex:none;width:11px;height:19px;background:var(--gold);clip-path:polygon(45% 0,100% 0,55% 100%,0 100%)}
.ps .sect h2{font-size:28px;color:#fff;letter-spacing:.03em;line-height:1}
.ps .sect::after{background:var(--line)}

/* ---------- BLOCKS: league card, panel, match card ---------- */
.ps .card{background:var(--panel);border:0;border-radius:0;box-shadow:none;margin-bottom:12px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);transition:background .15s,transform .2s var(--ps-ease)}
.ps button.card:active{transform:scale(.985);background:#232324;border:0}
.ps button.card:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--gold)}
.ps .card .top{padding:18px 18px 2px}
.ps .card .top h3{font-size:36px;line-height:.95}
.ps .card .meta{padding:0 18px 14px;color:var(--dim);font-size:14px}
.ps .card .foot{padding:12px 18px 18px;color:var(--faint);font-size:13.5px;border-top:1px solid var(--line-soft)}
.ps .chev{width:36px;height:36px;border:0;border-radius:0;background:var(--gold);color:#000;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:transform .25s var(--ps-ease)}
.ps button.card:active .chev{transform:translateX(4px)}

.ps .panel{background:var(--panel);border:0;border-radius:0;padding:18px 18px 20px;margin-bottom:12px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.ps .panel h3{font-size:30px;line-height:1;margin-bottom:4px}
.ps .panel .eyebrow{font-size:16px;margin-bottom:4px}
.ps .note{color:var(--faint);font-size:15px;line-height:1.45}

.ps .fx{background:var(--panel);border:0;border-radius:0;box-shadow:none;margin-bottom:10px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.ps .fx .hd{padding:10px 14px;border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--faint)}

/* ---------- TEAM BADGE: initials in a hexagon (echo of the PS shield) ---------- */
.ps .crest{width:36px;height:38px;border:0;border-radius:0;background:#2E2E2F;color:var(--gold);font-size:16px;letter-spacing:.02em;
  padding-top:1px;clip-path:polygon(50% 0,100% 24%,100% 76%,50% 100%,0 76%,0 24%)}

/* ---------- STANDINGS PREVIEW ROWS (home cards) ---------- */
.ps .row{padding:11px 18px;border-top:1px solid var(--line-soft)}
.ps .row .n,.ps .trow .n{font-family:var(--disp);font-size:21px;line-height:1;color:var(--faint)}
.ps .row .nm b,.ps .trow .team b,.ps .side .nm b{font-family:var(--disp);font-weight:400;font-size:21px;line-height:1.08;
  letter-spacing:.03em;text-transform:uppercase}
.ps .row .nm b{color:#fff}
.ps .row .nm i,.ps .trow .team i,.ps .side .nm i,.ps .s5-item .nm i{font-size:13px;color:var(--faint)}
.ps .row .fig .p{color:var(--faint);font-size:13px}
.ps .row .fig .pts{font-size:15px;font-weight:700}
.ps .row.lead{background:rgba(252,206,2,.07)}
.ps .row.lead::before,.ps .trow.lead::before{width:3px;background:var(--gold);transform-origin:50% 0}
.ps .row.lead .fig .pts{color:var(--gold)}

/* ---------- STANDINGS TABLE (league screen): the leader's row is a solid gold band ---------- */
.ps .thead{padding:14px 16px 10px;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--faint)}
.ps .trow{min-height:58px;border-top:1px solid var(--line-soft);transition:background .15s}
.ps .trow:active{background:#262627}
.ps .trow>span:nth-child(n+3){color:var(--dim);font-weight:600}
.ps .trow .pts{color:#fff;font-weight:700}
.ps .trow.lead,.ps .trow.lead:active{background:var(--gold)}
.ps .trow.lead::before{display:none}
.ps .trow.lead .team b,.ps .trow.lead>span:nth-child(n+3),.ps .trow.lead .pts{color:#000}
.ps .trow.lead .n{color:#000!important}
.ps .trow.lead .team i{color:rgba(0,0,0,.72)}
.ps .trow:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--gold)}
.ps .trow.lead:focus-visible{box-shadow:inset 0 0 0 2px #000}

/* ---------- MATCH CARD: names, set scores, and a W / L chip once a match is decided ---------- */
.ps .tag{border:0;border-radius:0;background:#2E2E2F;color:#fff;padding:5px 8px;font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1.1}
.ps .tag.done{background:var(--gold);color:#000;border:0}
.ps .tag.pend{background:transparent;box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold);border:0}
.ps .side{padding:12px 14px;gap:10px}
.ps .side .nm b{color:rgba(255,255,255,.74)}
.ps .side.win .nm b{color:#fff}
.ps .sets{gap:1px}
.ps .sets span{width:22px;height:30px;border:0;border-radius:0;background:none;font-family:var(--disp);font-weight:400;font-size:25px;color:var(--faint)}
.ps .sets span.w{background:none;border:0;color:#fff}
.ps .side:has(.sets)::after{flex:none;width:24px;height:24px;display:grid;place-items:center;font-family:var(--disp);font-size:16px;line-height:1;padding-top:1px}
.ps .side.win:has(.sets)::after{content:'W';background:var(--gold);color:#000}
.ps .side:has(.sets):has(~ .side.win)::after,.ps .side.win ~ .side:has(.sets)::after{content:'L';background:var(--charcoal);color:#fff}

/* ---------- BACK LINK, TEAM STATS, FORM GUIDE ---------- */
.ps .back{color:var(--dim);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;gap:6px;margin-bottom:6px}
.ps .back svg{color:var(--gold);transition:transform .2s var(--ps-ease)}
.ps .back:active{color:#fff}
.ps .back:active svg{transform:translateX(-4px)}
.ps .stats{gap:8px;margin:12px 0 4px}
.ps .stats div{background:var(--panel);border:0;border-radius:0;padding:16px 8px 12px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.ps .stats b{font-size:52px;line-height:.9;font-variant-numeric:tabular-nums}
.ps .stats div:last-child b{color:var(--gold)}
.ps .stats small{color:var(--faint);font-size:11.5px;font-weight:700;letter-spacing:.08em}
.ps .form{gap:4px}
.ps .form span{width:26px;height:26px;border:0;border-radius:0;font-family:var(--disp);font-weight:400;font-size:17px;padding-top:1px}
.ps .form .w{background:var(--gold);color:#000;border:0}
.ps .form .l{background:var(--charcoal);color:#fff;border:0}

/* ---------- FORMS ---------- */
.ps label{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--dim);margin:16px 0 6px}
.ps input[type=email],.ps input[type=password],.ps input[type=tel],.ps input[type=text],.ps input[type=number]{
  border-radius:0;border:1px solid var(--line);background:var(--bg);color:#fff;min-height:var(--tap)}
.ps input::placeholder{color:#77777A}
.ps input[type=file]{border-radius:0;border:1px dashed var(--line);background:var(--bg);color:var(--dim)}
.ps .setgrid{grid-template-columns:minmax(0,1fr) 56px 56px 56px}
.ps .setgrid input[type=number]{min-height:56px;font-family:var(--disp);font-size:30px;padding:4px}
.ps .setgrid .hd{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--faint)}
.ps .setgrid .who{font-family:var(--disp);font-weight:400;font-size:21px;letter-spacing:.03em;text-transform:uppercase}
.ps .prev{border-radius:0;background:var(--bg)}

/* Buttons: gold block, black capital label, two cut corners. Quiet buttons are charcoal with white. */
.ps .btn{min-height:var(--tap);padding:0 22px;border:0;border-radius:0;background:var(--gold);color:#000;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.15;text-align:center;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:background .15s,transform .15s var(--ps-ease)}
.ps .btn:active{transform:scale(.97);background:var(--gold-light)}
.ps .btn.ghost{background:var(--charcoal);color:#fff;border:0}
.ps .btn.ghost:active{background:#525254}
.ps .btn:disabled{opacity:.42}
.ps .btn:focus-visible{outline:none;box-shadow:inset 0 0 0 3px #000}
.ps .btn.ghost:focus-visible{box-shadow:inset 0 0 0 2px var(--gold)}
/* Flame button: entering a score, and nothing else. */
.ps #send,.ps .btn[data-score],.ps .btn[data-mmscore]{background:var(--flame);color:#000}
.ps #send:active,.ps .btn[data-score]:active,.ps .btn[data-mmscore]:active{background:#FF7A3D}
.ps .linkbtn{color:var(--gold);font-size:15px}

/* Messages: a coloured bar on the left plus the words (never colour alone) */
.ps .msg{border:0;border-left:3px solid var(--gold);border-radius:0;padding:12px 14px;font-size:15px;color:#fff;animation:ps-msg .35s var(--ps-ease)}
.ps .msg.ok{background:rgba(252,206,2,.10);border-color:var(--gold);color:#fff}
.ps .msg.err{background:rgba(252,82,2,.14);border-color:var(--flame);color:#fff}
.ps .empty{border-radius:0;border:1px dashed var(--line);color:var(--faint);font-size:15px;padding:30px 18px}
.ps .skel{border-radius:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
  background:linear-gradient(90deg,#1C1C1D 25%,#2A2A2B 50%,#1C1C1D 75%);background-size:200% 100%}

/* ---------- SEASON 5 REGISTRATION SCREENS ---------- */
.ps .s5-opt{border:0;border-radius:0;background:var(--panel);padding:15px 16px 16px;margin-top:8px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);transition:background .15s}
.ps .s5-opt b{font-family:var(--disp);font-weight:400;font-size:25px;line-height:1.05;letter-spacing:.03em;text-transform:uppercase;color:#fff}
.ps .s5-opt i{font-size:14px;color:var(--dim)}
.ps .s5-opt.on{background:var(--gold)}
.ps .s5-opt.on b{color:#000}
.ps .s5-opt.on i{color:rgba(0,0,0,.76)}
.ps .s5-opt:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--gold)}
.ps .s5-opt.on:focus-visible{box-shadow:inset 0 0 0 3px #000}
.ps .s5-seg{gap:6px}
.ps .s5-seg button{border:0;border-radius:0;background:var(--charcoal);color:#fff;min-height:var(--tap);
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ps .s5-seg button[aria-checked=true]{background:var(--gold);color:#000;border:0}
.ps label.s5-chk{font-size:15px;font-weight:400;letter-spacing:0;color:#fff}
.ps .s5-item{border-top:1px solid var(--line-soft)}
.ps .s5-item .nm b{font-size:16px;color:#fff}
.ps .s5-item.on .nm b{color:var(--gold)}
.ps .s5-item .btn{padding:0 14px}
.ps .s5-link{border-radius:0;border:1px dashed var(--gold);background:var(--bg);color:#fff}
.ps .s5-kv{font-size:15px;color:var(--faint);padding:7px 0}
.ps .s5-kv b{color:#fff}
/* Admin: contact buttons on the Players tab, and the "check number" marker */
.ps .s5-tabs{gap:0;padding:0}
.ps .s5-tabs button{padding:0 14px;font-size:12.5px;min-height:var(--tap)}
.ps .s5-pcon a{border:0;border-radius:0;background:var(--charcoal);color:#fff;min-height:44px}
.ps .s5-pcon a small{color:var(--gold);font-weight:700;letter-spacing:.08em}
.ps .s5-pcon a.mail{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--dim)}
.ps .s5-bad em{border:0;border-radius:0;background:transparent;box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold);font-weight:700;letter-spacing:.08em}
/* My matches: "message your opponents" buttons. Charcoal block, WhatsApp green kept on the icon only. */
.ps .mm-opp-l{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--faint)}
.ps .mm-wa{border-radius:0;background:var(--charcoal);color:#fff;min-height:44px;padding:0 16px 0 12px;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.ps .mm-wa svg{color:#25D366;width:18px;height:18px}

/* ---------- FOOTER: sign-off and the look switch (added by brand.js; plain rules so it also shows in classic view) ---------- */
.ps-foot{max-width:760px;margin:8px auto 0;padding:8px 14px 12px;text-align:center}
.ps-foot p{display:none;margin:0}
.ps-look{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:13px;font-weight:600;color:#8d98aa;
  text-decoration:underline;text-underline-offset:3px}
.ps .ps-foot{margin-top:26px;padding:26px 14px 14px;border-top:1px solid var(--line-soft);text-align:left;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:4px 12px}
.ps .ps-foot p{display:block}
.ps .ps-foot .ps-line{grid-column:1/-1;font-family:var(--disp);font-size:44px;line-height:.9;letter-spacing:.02em;text-transform:uppercase;color:#fff}
.ps .ps-foot .ps-sign{font-size:14px;color:var(--faint)}
.ps .ps-look{color:var(--faint);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:0 0 0 12px}
.ps .ps-look:active{color:var(--gold)}

/* ---------- MOTION ----------
   One orchestrated entrance per screen: the headline rises out of its block, the rule draws, the dot
   field drifts in, then the blocks below follow in a short stagger. brand.js adds "ps-anim" to #view
   only when the visitor actually moves to a different screen, so a live score update or a tab tap never
   replays it. The old rule for people who ask their phone for reduced motion still switches all of it off. */
@keyframes ps-rise{from{clip-path:inset(0 0 100% 0);transform:translateY(38%)}to{clip-path:inset(-10% -5% -20% -5%);transform:none}}
@keyframes ps-fade{from{opacity:0}to{opacity:1}}
@keyframes ps-left{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes ps-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ps-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ps-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ps-dots{from{opacity:0;background-position:33px -33px}to{opacity:.5;background-position:0 0}}
@keyframes ps-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ps-msg{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

.ps .ps-anim .hero>.eyebrow{animation:ps-left .45s var(--ps-ease) both}
.ps .ps-anim .hero>h1{animation:ps-rise .8s var(--ps-ease) .05s both}
.ps .ps-anim .hero::after{animation:ps-draw .55s var(--ps-ease) .42s both}
.ps .ps-anim .hero::before{animation:ps-dots 1.3s var(--ps-ease) .1s both}
.ps .ps-anim .hero>:not(.eyebrow):not(h1){animation:ps-up .55s var(--ps-ease) .34s both}
.ps .ps-anim .view>.back{animation:ps-fade .4s ease both}
.ps .ps-anim .view>:not(.hero):not(.back){animation:ps-up .6s var(--ps-ease) .62s both}
.ps .ps-anim .view>:not(.hero):not(.back):nth-child(2){animation-delay:.3s}
.ps .ps-anim .view>:not(.hero):not(.back):nth-child(3){animation-delay:.36s}
.ps .ps-anim .view>:not(.hero):not(.back):nth-child(4){animation-delay:.42s}
.ps .ps-anim .view>:not(.hero):not(.back):nth-child(5){animation-delay:.48s}
.ps .ps-anim .view>:not(.hero):not(.back):nth-child(6){animation-delay:.54s}
.ps .ps-anim .view>:not(.hero):not(.back):nth-child(7){animation-delay:.58s}
.ps .ps-anim .row.lead::before{animation:ps-grow .5s var(--ps-ease) .7s both}

/* Pointer devices only: the chevron block nudges and blocks lift a shade on hover */
@media (hover:hover){
  .ps button.card:hover{background:#212122}
  .ps button.card:hover .chev{transform:translateX(4px)}
  .ps .btn:hover{background:var(--gold-light)}
  .ps .btn.ghost:hover{background:#525254}
  .ps #send:hover,.ps .btn[data-score]:hover,.ps .btn[data-mmscore]:hover{background:#FF7A3D}
  .ps .trow:not(.lead):hover{background:#232324}
  .ps .tabs button:hover{color:#fff}
  .ps .tabs button.on:hover{color:var(--gold)}
  .ps .circ:hover{background:#2A2A2B}
  .ps .back:hover{color:#fff}
  .ps .ps-look:hover{color:var(--gold)}
}
@media (min-width:700px){
  .ps .hero{padding:30px 30px 34px}
  .ps .hero h1{font-size:112px}
  .ps .hero::before{height:240px}
}