/* Jugador, the site. Built on the think-app.com principles: white and editorial, one sans
   set big and tight, hairlines, one primary per view, the product as lifted layers that
   open into a detail view and fold back. Forest and lime are the accent, used sparingly;
   the painted J is the mark. Light and dark are one design with two token blocks. */
/* v3, 11 Nov 2026: the new Jugador brand (design-2). Paper and ink, three signal colours that always
   mean something (lime: rating and hero metrics; orange: live and actions; cyan: info and provisional),
   Teko caps for display and numerals, a mono kicker with a block bar. Light and dark from their own tokens. */
:root{
  --bg:#F2F1EB;--ink:#15261B;--mute:#4E5A52;--line:rgba(21,38,27,.14);--line2:rgba(21,38,27,.12);--well:#E6E4DC;--card:#FFFFFF;
  --accent:#15261B;--accent-ink:#C8F24E;--glyph:#15261B;--act:#C2360F;
  --forest:#15261B;--deep:#0C150F;--night:#0C150F;--lime:#C8F24E;--live:#FF4D1F;--info:#35D4F0;--you:#FF4D1F;
  --hero:#15261B;--heroInk:#F2F1EB;--heroMuted:rgba(242,241,235,.66);
  --app-bg:#F2F1EB;--app-card:#FFFFFF;--app-ink:#15261B;--app-ink2:#4E5A52;--app-line:rgba(21,38,27,.12);
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --disp:'Teko','DIN Condensed','Arial Narrow',sans-serif;
  --serif:var(--disp);
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  --spring:cubic-bezier(.34,1.3,.64,1);--ease:cubic-bezier(.2,.8,.2,1);
  --gut:20px;--hd:64px;--r:20px;
  --shadow:0 2.6cqw 6.4cqw -2.6cqw rgba(12,21,15,.42),0 .4cqw 1.2cqw rgba(12,21,15,.08);
}
@supports (transition-timing-function:linear(0,1)){:root{--spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.043 21.9%,1.042 24.7%,1.012 31.2%,.998 37.9%,1)}}
@media (min-width:760px){:root{--gut:40px}}
@media (min-width:1200px){:root{--gut:64px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A0E0B;--ink:#F2F1EB;--mute:#B4BCB3;--line:rgba(242,241,235,.13);--line2:rgba(242,241,235,.14);--well:#1E2620;--card:#151B16;
  --accent:#C8F24E;--accent-ink:#15261B;--glyph:#C8F24E;--act:#FF5E33;--live:#FF5E33;--info:#4BDCF5;--you:#FF5E33;
  --app-bg:#0A0E0B;--app-card:#151B16;--app-ink:#F2F1EB;--app-ink2:#B4BCB3;--app-line:rgba(242,241,235,.12);
  --shadow:0 2.6cqw 6.4cqw -2cqw rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06)}}
:root[data-theme="dark"]{
  --bg:#0A0E0B;--ink:#F2F1EB;--mute:#B4BCB3;--line:rgba(242,241,235,.13);--line2:rgba(242,241,235,.14);--well:#1E2620;--card:#151B16;
  --accent:#C8F24E;--accent-ink:#15261B;--glyph:#C8F24E;--act:#FF5E33;--live:#FF5E33;--info:#4BDCF5;--you:#FF5E33;
  --app-bg:#0A0E0B;--app-card:#151B16;--app-ink:#F2F1EB;--app-ink2:#B4BCB3;--app-line:rgba(242,241,235,.12);
  --shadow:0 2.6cqw 6.4cqw -2cqw rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:calc(var(--hd) + 8px);-webkit-text-size-adjust:100%}
html,body{overflow-x:clip;max-width:100%}
html.locked{overflow:hidden}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color .2s ease,color .2s ease}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
ul,ol{list-style:none}
em{font-style:normal;color:var(--mute)}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle}
.ic .f{fill:currentColor;stroke:none}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--bg);padding:12px 18px;display:inline-flex;gap:8px;align-items:center;min-height:44px}
.skip:focus{left:8px;top:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* controls: 44px, icon plus words, no tinted chrome */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;font-weight:500;color:var(--ink);white-space:nowrap}
.btn .ic{transition:transform .22s var(--spring)}
.btn:hover .ic{transform:translateX(3px)}
.btn.down:hover .ic{transform:translateY(3px)}
.primary{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px 0 20px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:16px;white-space:nowrap;transition:transform .2s var(--spring)}
.primary:active{transform:scale(.97)}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ink)}
.icon-btn:hover{background:var(--well)}

.kick{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute);letter-spacing:.01em}
.kick .ic{width:16px;height:16px;color:var(--glyph)}
.mark{display:block;flex:none;border-radius:22%}

/* header */
.hd{position:fixed;inset:0 0 auto;z-index:50;height:var(--hd);display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline:var(--gut);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:box-shadow .2s ease}
.hd.is-scrolled{box-shadow:0 1px 0 var(--line)}
.brand{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-weight:600;font-size:17px;letter-spacing:-.02em}
.brand .mark{width:24px;height:24px}
.nav{display:flex;align-items:center;gap:2px}
.nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;justify-content:center;padding-inline:10px;font-size:14px;color:var(--mute);transition:color .2s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a .ic{width:18px;height:18px}
.nav .beta{font-size:12px;color:var(--mute);display:inline-flex;gap:6px;align-items:center;padding-inline:6px}
.nav .beta .ic{width:15px;height:15px}
@media (max-width:899px){.nav a span{display:none}.nav a{padding-inline:0}}
.progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:60}

/* sections */
main{display:block}
.sec{display:grid;gap:32px;padding:18vh var(--gut) 0}
.sec-head{display:grid;gap:14px}
.lede2{font-size:clamp(22px,2.4vw,34px);font-weight:600;letter-spacing:-.035em;line-height:1.1;max-width:30ch;text-wrap:balance}
.sub{font-size:clamp(17px,1.35vw,19px);line-height:1.5;color:var(--mute);max-width:56ch}
.note{display:flex;gap:12px;color:var(--mute);max-width:64ch;font-size:15px}
.note .ic{width:18px;height:18px;margin-top:2px;color:var(--glyph)}

/* hero: the line, one lede, one primary, and the Pass. One view at 1440x900 and 390x844. */
.hero{min-height:100svh;display:grid;align-content:end;align-items:end;gap:40px;padding:calc(var(--hd) + 24px) var(--gut) 6svh;overflow:clip}
.hero-main{display:grid;gap:24px;min-width:0}
@media (min-width:1000px){.hero{grid-template-columns:minmax(0,1fr) clamp(300px,26vw,380px);column-gap:48px}}
.h1{display:grid;font-weight:600;font-size:clamp(40px,6.6vw,96px);line-height:.95;letter-spacing:-.055em}
.ln{display:block;will-change:transform}
.ln:nth-child(even){padding-left:.9em}
.u{position:relative;display:inline-block;color:var(--ink)}
.hero-foot{display:grid;gap:28px;align-items:end}
@media (min-width:1000px){.hero-foot{grid-template-columns:minmax(0,1fr) auto;gap:48px}}
.hero-copy{display:grid;gap:24px}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.45;max-width:52ch;color:var(--ink)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.hero-art{width:min(100%,380px);justify-self:start}
@media (min-width:1000px){.hero-art{width:100%}}
.facts{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--mute)}
.facts span{display:inline-flex;align-items:center;gap:8px}
.facts .ic{width:17px;height:17px;color:var(--glyph)}
@media (max-width:999px){.hero{min-height:0;padding-top:calc(var(--hd) + 8svh);padding-bottom:6svh}}
@media (max-width:599px){.h1{font-size:clamp(36px,10.6vw,60px)}.ln:nth-child(even){padding-left:.45em}.hero{gap:20px}}

/* pieces: frameless product art on the ground, a name, a meta line, open */
.track{display:flex;gap:clamp(20px,3vw,48px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);padding-bottom:4px}
.track::-webkit-scrollbar{display:none}
.track>.piece{flex:none;width:min(74vw,300px);scroll-snap-align:start}
@media (min-width:1000px){.track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin:0;padding:0;row-gap:72px}.track>.piece{width:auto}}
.piece{position:relative;display:grid;gap:12px;min-width:0}
.pm{position:relative;aspect-ratio:3/4;width:100%}
.piece:hover .comp .el.lift{transform:rotate(var(--r,0deg)) translateY(-1.2cqw)}
.pc{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:15px;padding-top:12px;border-top:1px solid var(--line)}
.pc-n{font-variant-numeric:tabular-nums;color:var(--mute);font-size:13px;min-width:2ch}
.pc-name{font-size:18px;font-weight:600;letter-spacing:-.02em}
.pc-go{margin-left:auto;width:18px;height:18px;transition:transform .22s var(--spring)}
.piece:hover .pc-go{transform:translateX(4px)}
.pc-meta{flex-basis:100%;display:inline-flex;align-items:center;gap:6px;color:var(--mute);font-size:14px}
.pc-meta .ic{width:15px;height:15px;color:var(--glyph)}
.piece-open{position:absolute;inset:0;z-index:2;border-radius:var(--r)}
.piece.lifted .pm{visibility:hidden}
.track-cap{display:flex;gap:10px;color:var(--mute);font-size:14px}
.track-cap .ic{width:17px;height:17px;color:var(--glyph)}

/* the open view: the art large, beside its words. Grows from the tile, folds back. */
.layer{position:fixed;inset:0;z-index:100}
.layer[hidden]{display:none}
.layer .scrim{position:absolute;inset:0;background:var(--bg)}
.lp{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain}
.lp-in{max-width:1240px;margin-inline:auto;padding:84px var(--gut) 72px;display:grid;gap:40px;align-items:center;min-height:100%}
@media (min-width:900px){.lp-in{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px}}
.lp-media{position:relative;aspect-ratio:3/4;height:min(72svh,640px);max-width:100%;justify-self:center;transform-origin:0 0}
@media (max-width:899px){.lp-media{height:min(54svh,460px)}}
.lp-text{display:grid;gap:20px;align-content:start}
.lp-name{font-weight:600;font-size:clamp(34px,4.4vw,56px);line-height:1.02;letter-spacing:-.04em}
.lp-line{font-size:18px;line-height:1.5;max-width:44ch}
.lp-points{display:grid;gap:12px}
.lp-points li,.lp-state{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;font-size:15.5px;line-height:1.5}
.lp-points .ic{color:var(--glyph);margin-top:1px}
.lp-state{color:var(--mute);padding-top:18px;border-top:1px solid var(--line)}
.lp-state .ic{margin-top:1px}
.lp-back{position:fixed;z-index:3;top:12px;left:var(--gut);display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 14px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:500}
.lp-back .ic{transition:transform .22s var(--spring)}
.lp-back:hover .ic{transform:translateX(-3px)}

/* hairline lists: trust rows and the numbered steps */
.rows{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media (min-width:760px){.rows.c2{grid-template-columns:1fr 1fr;column-gap:40px}}
@media (min-width:1100px){.rows.c3{grid-template-columns:repeat(3,1fr);column-gap:40px}}
.rows li{display:grid;align-content:start;grid-template-columns:20px 1fr;column-gap:14px;row-gap:6px;align-items:start;padding:20px 0 22px;border-bottom:1px solid var(--line)}
.rows li>.ic{color:var(--glyph);margin-top:4px}
.rows b{display:block;font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.rows small{grid-column:2;display:block;font-size:15px;line-height:1.5;color:var(--mute);max-width:40ch}
.steps{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);counter-reset:step}
@media (min-width:760px){.steps{grid-template-columns:repeat(2,1fr);column-gap:40px}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{display:grid;gap:10px;align-content:start;padding:22px 0 26px;border-bottom:1px solid var(--line);counter-increment:step}
.st-n{display:flex;align-items:center;justify-content:space-between;font-variant-numeric:tabular-nums}
.st-n::before{content:"0" counter(step);font-size:13px;color:var(--mute);letter-spacing:.04em}
.st-n .ic{width:20px;height:20px;color:var(--glyph)}
.steps b{font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.steps small{font-size:15px;line-height:1.5;color:var(--mute);max-width:34ch}
.skills{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--mute)}
.skills span{display:inline-flex;gap:7px;align-items:center}
.skills .ic{width:15px;height:15px;color:var(--glyph)}

/* PRO: the list, the two prices set like a poster, the coach */
.pro-grid{display:grid;gap:48px;align-items:start}
@media (min-width:1000px){.pro-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px}}
.plist li{grid-template-columns:20px 1fr auto}
.plist .tag{grid-column:3;grid-row:1;align-self:center;font-size:13px;color:var(--mute);white-space:nowrap}
.plist .tag.pro{color:var(--ink);font-weight:600;display:inline-flex;gap:6px;align-items:center}
.plist .tag.pro .ic{width:15px;height:15px;color:var(--glyph)}
.prices{display:grid;border-top:1px solid var(--line);margin-top:8px}
@media (min-width:600px) and (max-width:999px){.prices{grid-template-columns:1fr 1fr;column-gap:40px}}
.price{display:grid;gap:6px;padding:22px 0 24px;border-bottom:1px solid var(--line)}
.price .pl{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute)}
.price .pl .ic{width:16px;height:16px;color:var(--glyph)}
.price b{white-space:nowrap;font-weight:600;font-size:clamp(44px,4.6vw,68px);line-height:1.1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.price b small{font-size:.32em;letter-spacing:-.01em;font-weight:500;color:var(--mute)}
.price span{font-size:15px;color:var(--mute)}
.pro-art{width:min(100%,360px)}

/* FAQ: hairline accordion */
.faq{border-top:1px solid var(--line);max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:grid;grid-template-columns:20px 1fr 20px;gap:14px;align-items:center;min-height:68px;padding:14px 0;cursor:pointer;font-size:clamp(18px,1.6vw,21px);font-weight:500;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary>.ic:first-child{color:var(--glyph)}
.faq .chev{color:var(--mute);transition:transform .32s var(--spring)}
.faq details[open] .chev{transform:rotate(90deg)}
.faq .ans{display:grid;grid-template-rows:1fr;transition:grid-template-rows .32s var(--ease)}
.faq .ans>div{overflow:hidden}
.faq .ans p{padding:0 34px 22px;color:var(--mute);max-width:68ch;font-size:16px}
.faq .ans a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.faq details.closing .ans,.faq details.opening .ans{grid-template-rows:0fr}

/* contact: the founder block */
.contact{padding-bottom:16vh;gap:24px}
.ct-line{font-weight:600;font-size:clamp(40px,7.4vw,112px);line-height:.95;letter-spacing:-.055em}
.ct-sub{font-size:clamp(18px,1.6vw,24px);color:var(--mute);letter-spacing:-.015em;max-width:44ch}
.ct-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding-top:8px}
.ct-acts .btn{font-size:17px}
.founder{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding-top:28px;border-top:1px solid var(--line);max-width:720px}
.founder .mark{width:52px;height:52px}
.founder p{font-size:15px;color:var(--mute);line-height:1.5}
.founder b{color:var(--ink);font-weight:600}

/* footer */
.ft{display:grid;gap:22px;padding:28px var(--gut) 32px;border-top:1px solid var(--line);font-size:13px;color:var(--mute)}
.ft-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.ft .brand{color:var(--ink);font-size:15px}
.ft-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px}
.ft-links .btn{font-size:14px;color:var(--ink)}
.ft-links .btn .ic{width:17px;height:17px;color:var(--glyph)}
.ft-low{align-items:flex-end}
.ft .legal{max-width:70ch;line-height:1.5}
.ft-tools{display:flex;align-items:center;gap:6px}
.ft-tools .btn{color:var(--mute);font-size:13px}
.ft-tools .btn:hover{color:var(--ink)}
.ft-tools .btn.up:hover .ic{transform:translateY(-3px)}

.toast{position:fixed;left:50%;bottom:24px;z-index:120;transform:translate(-50%,120px);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:999px;display:inline-flex;gap:8px;align-items:center;font-weight:500;transition:transform .32s var(--spring)}
.toast.on{transform:translate(-50%,0)}
.toast .ic{width:18px;height:18px}

/* reveals, once; waiting states only under .armed (JS ran, motion allowed) */
html.armed [data-rv]{transition:opacity .7s var(--ease),transform .9s var(--spring)}
html.armed [data-rv]:not(.in){opacity:0;transform:translateY(28px)}

/* ================= the compositions: one art direction, a 3:4 field, container units ================= */
.comp{position:absolute;inset:0;container-type:size;color:var(--app-ink);font-family:var(--sans)}
.comp .el{position:absolute;transform:rotate(var(--r,0deg));transform-origin:50% 50%;transition:transform .5s var(--spring)}
.comp .lift{box-shadow:var(--shadow)}
.comp .ic{width:1em;height:1em}
.comp .demo{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:1.6cqw;font-family:var(--mono);font-size:2.6cqw;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.k-chip{display:flex;align-items:center;gap:2cqw;border-radius:99px;background:var(--app-card);color:var(--app-ink);padding:2.6cqw 4cqw 2.6cqw 3cqw;font-size:3.4cqw;font-weight:600;white-space:nowrap}
.k-chip .ic{color:var(--glyph);width:4cqw;height:4cqw}
.k-chip.dark{background:var(--forest);color:#fff}
.k-chip.dark .ic{color:var(--lime)}
.k-faces{display:flex;gap:2.4cqw;padding:2.4cqw;border-radius:99px;background:var(--app-card)}
.k-face{position:relative;width:12cqw;height:12cqw;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:4.4cqw;color:#16291D}
.k-face.you{background:var(--you);color:#fff}
.k-face .bd{position:absolute;right:-.8cqw;bottom:-.8cqw;width:5cqw;height:5cqw;border-radius:50%;display:grid;place-items:center;background:var(--forest);color:var(--lime);box-shadow:0 0 0 .7cqw var(--app-card)}
.k-face .bd .ic{width:3cqw;height:3cqw;stroke-width:2.8}
/* the result card */
.k-card{border-radius:5cqw;overflow:hidden;color:#fff;background:#16291D url(photo/court-1200.webp) center/cover;aspect-ratio:1;isolation:isolate}
.k-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,41,29,.5),rgba(22,41,29,.88));z-index:-1}
.k-card .rtop{position:absolute;left:5cqw;right:5cqw;top:5cqw;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:2.3cqw;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.k-card .rtop span{display:inline-flex;gap:1.4cqw;align-items:center}
.k-card .rtop .mark{width:3.6cqw;height:3.6cqw}
.k-card .won{position:absolute;left:32%;top:17%;width:60%;height:30%;background:url(brush/won-brush.png) center/contain no-repeat;clip-path:inset(0 0 0 0)}
.k-card .me{position:absolute;left:9%;top:22%;width:18%;aspect-ratio:1;border-radius:50%;background:var(--you);display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:6cqw;box-shadow:0 0 0 .8cqw var(--lime)}
.k-card .me img{position:absolute;width:70%;top:-46%;right:-26%;transform:rotate(12deg)}
.k-card .agr{position:absolute;left:0;right:0;top:53%;text-align:center;font-family:var(--mono);font-size:2.3cqw;letter-spacing:.2em;text-transform:uppercase}
.k-card .sets{position:absolute;left:0;right:0;top:60%;display:flex;justify-content:center;gap:2.4cqw}
.k-card .set{padding:1.4cqw 3cqw;border-radius:3cqw;background:rgba(255,255,255,.14);font-family:var(--serif);font-weight:600;font-size:5.4cqw;line-height:1.3}
.k-card .wl{position:absolute;left:6%;right:6%;bottom:6%;display:grid;grid-template-columns:1fr 1fr;gap:1px;border-radius:3.4cqw;overflow:hidden;background:rgba(255,255,255,.12)}
.k-card .wl div{background:rgba(22,41,29,.66);padding:2.2cqw;text-align:center}
.k-card .wl b{display:block;font-size:4cqw;color:var(--lime);font-weight:600}
.k-card .wl small{font-family:var(--mono);font-size:1.9cqw;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
/* strengths */
.k-radar{border-radius:5cqw;background:var(--app-card);padding:4cqw}
.k-radar svg{display:block;width:100%;height:auto}
.k-radar .web{fill:none;stroke:var(--app-line);stroke-width:1.2}
.k-radar .shape{fill:rgba(34,64,45,.14);stroke:var(--forest);stroke-width:2.2}
:root[data-theme="dark"] .k-radar .shape{fill:rgba(200,242,78,.22);stroke:var(--lime)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .k-radar .shape{fill:rgba(200,242,78,.22);stroke:var(--lime)}}
.k-radar text{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;fill:var(--app-ink2)}
.k-radar .cap2{display:flex;justify-content:space-between;font-size:3cqw;color:var(--app-ink2);margin-top:1cqw}
.k-pts{display:grid;gap:1.6cqw;padding:2.4cqw;border-radius:4cqw;background:var(--app-bg)}
.k-pts span{display:flex;align-items:center;justify-content:space-between;gap:4cqw;padding:2.2cqw 3cqw;border-radius:3cqw;background:var(--app-card);font-size:3.4cqw;font-weight:600}
.k-pts i{font-style:normal;display:flex;gap:1cqw}
.k-pts i b{width:2.4cqw;height:2.4cqw;border-radius:50%;background:var(--glyph);display:block}
/* rankings */
.k-rate{display:grid;gap:1cqw;padding:5cqw;border-radius:5cqw;background:var(--app-card)}
.k-rate .lb{font-family:var(--mono);font-size:2.5cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--app-ink2)}
.k-rate .big{font-family:var(--serif);font-weight:600;font-size:20cqw;line-height:1.3;letter-spacing:-.03em;display:flex;align-items:baseline;gap:1.4cqw}
.k-rate .big small{font-size:6cqw;color:var(--app-ink2)}
.k-rate svg{display:block;width:100%;height:auto;color:var(--glyph)}
.k-rate .up{font-size:3.4cqw;font-weight:600;color:var(--glyph);display:flex;gap:1cqw;align-items:center}
.k-ranks{display:grid;padding:1cqw 4cqw;border-radius:4cqw;background:var(--app-card)}
.k-ranks span{display:flex;align-items:center;gap:2.6cqw;padding:2.6cqw 0;font-size:3.4cqw;border-top:1px solid var(--app-line)}
.k-ranks span:first-child{border-top:0}
.k-ranks .ic{color:var(--glyph);width:4cqw;height:4cqw}
.k-ranks b{margin-left:auto;font-family:var(--serif);font-weight:600;font-size:4.4cqw}
/* the watch */
.k-watch{width:60cqw;aspect-ratio:.82;border-radius:16cqw;background:#000;box-shadow:0 0 0 2.6cqw #2B2B2B,0 0 0 2.9cqw #444,var(--shadow);color:#fff;padding:7cqw 5.6cqw;display:flex;flex-direction:column;justify-content:space-between}
.k-watch .crown{position:absolute;right:-5cqw;top:28%;width:2.4cqw;height:10cqw;border-radius:1.2cqw;background:#3A3A3A}
.k-watch .tm{display:flex;justify-content:space-between;font-family:var(--mono);font-size:2.6cqw;letter-spacing:.08em;color:#BBB}
.k-watch .tm span:first-child{color:var(--lime)}
.k-watch .gm{text-align:center;font-family:var(--mono);font-size:3.6cqw;color:#999}
.k-watch .pts{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw}
.k-watch .pt{height:24cqw;border-radius:6cqw;background:#1B1B1B;display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:11cqw;position:relative}
.k-watch .pt.me{background:#22402D;color:var(--lime)}
.k-watch .pt .sv{position:absolute;top:2.6cqw;left:2.8cqw;width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--lime)}
.k-watch .fo{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:2.8cqw;color:#999}
.k-watch .fo .ic{width:4cqw;height:4cqw;color:#fff}
.k-watch .fo .hr{display:inline-flex;gap:1cqw;align-items:center;color:#FF8A80}
.k-watch .fo .hr .ic{color:#FF8A80;width:3cqw;height:3cqw}
.k-band{border-radius:6cqw;background:#26302A}
/* messages */
.k-bub{max-width:72cqw;padding:3cqw 4cqw;border-radius:5cqw;background:var(--app-card);font-size:3.8cqw;line-height:1.35;color:var(--app-ink)}
.k-bub i{display:block;font-style:normal;font-family:var(--mono);font-size:2.3cqw;letter-spacing:.12em;text-transform:uppercase;color:var(--app-ink2);margin-bottom:1cqw}
.k-bub.me{background:var(--forest);color:var(--lime)}
.k-bub.me i{color:rgba(200,242,78,.7)}
/* the coach */
.k-coach{border-radius:5cqw;padding:5cqw;background:linear-gradient(140deg,#1C3527,#2B5038 55%,#173022);color:#fff;display:grid;gap:3cqw;overflow:hidden}
.k-coach .mk{font-family:var(--mono);font-size:2.4cqw;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.k-coach .q{font-family:var(--serif);font-weight:600;font-size:5.4cqw;line-height:1.22}
.k-drill{display:flex;align-items:center;gap:2.6cqw;padding:2.8cqw 3.4cqw;border-radius:3.4cqw;background:var(--app-card);color:var(--app-ink);font-size:3.4cqw;font-weight:600}
.k-drill .ic{color:var(--glyph);width:4cqw;height:4cqw}
.k-drill small{margin-left:auto;font-family:var(--mono);font-size:2.1cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--app-ink2);font-weight:400;white-space:nowrap}
/* motion, once: the hero's layers rise and the badges pop; a piece paints in when it arrives */
@keyframes rise{from{opacity:0;transform:translateY(5cqw) rotate(var(--r,0deg))}to{opacity:1;transform:rotate(var(--r,0deg))}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes paint{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes grow{from{transform:scale(0)}to{transform:scale(1)}}
html.motion.armed .hero-art.in .el{animation:rise .9s var(--spring) both;animation-delay:calc(var(--d,0) * 140ms + 150ms)}
html.motion.armed .hero-art.in .bd{animation:pop .48s var(--spring) both;animation-delay:calc(var(--k,0) * 150ms + 900ms)}
html.motion.armed [data-rv].in .won{animation:paint .7s var(--ease) .45s both}
html.motion.armed [data-rv].in .k-radar .shape{animation:grow .82s var(--spring) .3s both;transform-origin:150px 150px;transform-box:view-box}

/* legal docs, in the same editorial grammar */
.doc{padding:calc(var(--hd) + 8vh) var(--gut) 12vh;display:grid;gap:22px;max-width:960px}
.doc h1{font-weight:600;font-size:clamp(44px,7vw,96px);line-height:.98;letter-spacing:-.055em}
.doc .upd{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--mute)}
.doc .upd .ic{width:16px;height:16px;color:var(--glyph)}
.doc .biz{display:grid;grid-template-columns:20px 1fr;gap:12px;color:var(--mute);font-size:15px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:72ch}
.doc .biz .ic{color:var(--glyph);margin-top:2px}
.doc .biz a,.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.toc h2{font-size:13px;font-weight:500;color:var(--mute);display:flex;gap:8px;align-items:center;margin-bottom:6px}
.toc h2 .ic{width:16px;height:16px}
.toc ol{display:grid;border-top:1px solid var(--line)}
@media (min-width:760px){.toc ol{grid-template-columns:1fr 1fr;column-gap:40px}}
.toc li{border-bottom:1px solid var(--line)}
.toc a{display:flex;gap:12px;align-items:center;min-height:48px;font-size:16px}
.toc a .ic{width:18px;height:18px;color:var(--glyph)}
.prose{display:grid}
.prose h2{font-weight:600;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.035em;line-height:1.1;margin-top:56px;display:flex;gap:14px;align-items:center;scroll-margin-top:calc(var(--hd) + 16px)}
.prose h2 .ic{width:22px;height:22px;color:var(--glyph)}
.prose p,.prose li{max-width:68ch;color:var(--mute);margin-top:14px;font-size:16.5px;line-height:1.6}
.prose ul{list-style:disc;padding-inline-start:22px}
.prose strong{color:var(--ink);font-weight:600}
.doc-grid{display:grid;margin-top:18px;border-top:1px solid var(--line)}
.doc-grid .dr{display:grid;gap:4px 28px;padding:16px 0;border-bottom:1px solid var(--line)}
@media (min-width:760px){.doc-grid .dr{grid-template-columns:220px 1fr}}
.doc-grid dt{font-weight:500;display:flex;gap:10px;align-items:center}
.doc-grid dt .ic{color:var(--glyph);width:18px;height:18px}
.doc-grid dd{color:var(--mute);font-size:15.5px}
.note2{display:grid;grid-template-columns:20px 1fr;gap:12px;color:var(--mute);font-size:15px;padding:16px 0;border-bottom:1px solid var(--line);max-width:72ch}
.note2 .ic{color:var(--glyph);margin-top:2px}
.paths{display:grid;border-top:1px solid var(--line);margin-top:24px}
@media (min-width:760px){.paths{grid-template-columns:1fr 1fr;column-gap:40px}}
.paths .card{display:grid;gap:12px;align-content:start;padding:22px 0 26px;border-bottom:1px solid var(--line)}
.paths .card h2{margin-top:0}
.paths .card p{margin-top:0}
.paths .n{font-size:13px;color:var(--mute)}
.paths .n::before{content:"0"}
.prose .primary{justify-self:start;margin-top:20px;color:var(--accent-ink);text-decoration:none}
.prose .faq{margin-top:20px}
.prose .rows{margin-top:16px}
.prose .rows li{align-items:center}
.prose .rows li a{font-weight:500;color:var(--ink);text-decoration:none;font-size:18px;min-height:44px;display:flex;align-items:center}
.nf{min-height:80svh;display:grid;align-content:center;gap:24px;padding:calc(var(--hd) + 24px) var(--gut) 10vh}
.nf .mark{width:72px;height:72px}
.nf h1{font-weight:600;font-size:clamp(44px,7vw,96px);line-height:.98;letter-spacing:-.055em}

/* ================= v3: the new brand layer ================= */
body{font-size:16.5px}
:focus-visible{outline:2px solid var(--act);outline-offset:3px}
.kick{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);flex-wrap:wrap;row-gap:6px}
.kick .ic{color:var(--glyph)}
.lap>span:nth-of-type(1){color:var(--ink);font-weight:700}
.lap .of{font-style:normal;color:var(--mute);margin-left:-4px}
.blk{--c:var(--live);--u:10px;display:inline-block;flex:none;width:calc(var(--of) * var(--u) - 3px);height:8px;background:linear-gradient(var(--c),var(--c)) 0 0/calc(var(--n) * var(--u)) 100% no-repeat,var(--line2);-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(var(--u) - 3px),transparent 0 var(--u));mask:repeating-linear-gradient(90deg,#000 0 calc(var(--u) - 3px),transparent 0 var(--u));margin-inline:4px 6px}
.blk.info{--c:var(--info)}.blk.live{--c:var(--live)}.blk.lime{--c:var(--lime)}
.blk.big{--u:22px;height:14px;width:calc(var(--of) * var(--u) - 4px);max-width:100%;margin:0}
@keyframes fill{from{background-size:0 100%,auto}}
html.motion .hero .blk,html.motion.armed [data-rv].in .blk{animation:fill .9s var(--ease) .35s both}

.primary{border-radius:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:14px;min-height:54px;padding:0 24px 0 20px}
.primary .ic{color:var(--accent-ink)}
.btn{font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:13.5px}
.btn .ic{color:var(--glyph)}

.hd{background:color-mix(in srgb,var(--bg) 90%,transparent)}
.brand{font-family:var(--disp);font-weight:700;font-size:27px;letter-spacing:.02em;text-transform:uppercase;line-height:1;padding-top:3px}
.brand .mark{width:28px;height:28px;margin-top:-3px}
.nav a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.nav a .ic{color:var(--glyph)}
.progress{background:var(--live);height:3px}

/* the hero: giant caps, the highlighter on one word, the licence on a generated athlete */
.hero{align-content:center;gap:48px;padding-bottom:5svh}
@media (min-width:1000px){.hero{grid-template-columns:minmax(0,1fr) clamp(360px,33vw,500px);column-gap:56px;align-items:center}}
.h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(40px,10.4vw,62px);line-height:.86;letter-spacing:0}
@media (min-width:1000px){.h1{font-size:clamp(64px,6.4vw,112px)}.h1 .ln{white-space:nowrap}}
.ln:nth-child(even){padding-left:0}
.u{color:#15261B;padding:0 .06em;margin-left:-.06em;background:linear-gradient(var(--lime),var(--lime)) 0 46%/100% 72% no-repeat}
html.motion .hero .u{animation:hl .7s var(--ease) .55s both}
@keyframes hl{from{background-size:0 72%}}
.lede{font-size:clamp(17px,1.3vw,19.5px)}
.facts{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.hero-side{position:relative;display:grid;min-width:0;width:min(100%,460px);justify-self:center}
@media (min-width:1000px){.hero-side{width:100%}}
.hero-art{width:72%;justify-self:start;margin-top:-62%;position:relative;z-index:1}
.gimg{position:relative;overflow:hidden;border-radius:24px;background:var(--hero);margin:0}
.gimg img{width:100%;height:100%;object-fit:cover}
.gimg figcaption{position:absolute;right:12px;top:12px;display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border-radius:8px;background:rgba(10,14,11,.74);color:#F2F1EB;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.gimg figcaption .ic{width:14px;height:14px;color:var(--info)}
.hero-img{aspect-ratio:4/5;width:86%;justify-self:end}
.band{aspect-ratio:16/9;width:100%}
@media (min-width:900px){.band{aspect-ratio:21/8}}
.band img{object-position:50% 60%}

/* sections */
.sec{padding-top:16vh}
.lede2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(42px,5.2vw,84px);line-height:.88;letter-spacing:0;max-width:17ch}
.lede2 .ic{width:.62em;height:.62em;margin:-.14em .18em 0 0;color:var(--glyph)}
.pc{border-top-color:var(--line)}
.pc-n{font-family:var(--mono);color:var(--mute)}
.pc-name{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:28px;line-height:1;letter-spacing:.01em;padding-top:4px}
.pc-meta{font-size:14px}
.lp-name{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(48px,5.6vw,84px);line-height:.9;letter-spacing:0}
.lp-back{border-radius:12px;text-transform:uppercase;letter-spacing:.06em;font-size:13.5px;font-weight:600}
.rows b,.steps b{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(26px,2.2vw,32px);line-height:.95;letter-spacing:.01em;padding-top:4px}
.rows li>.ic{margin-top:6px}
.st-n::before{content:"0" counter(step);font-family:var(--disp);font-weight:700;font-size:64px;line-height:1;color:var(--ink);letter-spacing:0}
.st-n .ic{width:24px;height:24px}
.skills{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}

/* new: vitals tiles with signal chips and block meters */
.new-grid{display:grid;gap:20px}
@media (min-width:1000px){.new-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:stretch}}
.tall{aspect-ratio:4/3}
.tall img{object-position:50% 30%}
@media (min-width:1000px){.tall{aspect-ratio:auto;min-height:100%}}
.vitals{display:grid;gap:20px}
@media (min-width:700px){.vitals{grid-template-columns:1fr 1fr}}
.vt{display:grid;gap:14px;align-content:start;padding:24px;border-radius:var(--r);background:var(--card);min-width:0}
.vt:first-child{background:var(--hero);color:var(--heroInk);--line2:rgba(242,241,235,.16)}
.vt:first-child p,.vt:first-child .vk{color:var(--heroMuted)}
.vt:first-child .vk .ic,.vt:first-child h3 .ic{color:var(--lime)}
.vt:first-child .vnum i{color:var(--heroMuted)}
.vk{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.vk .ic{width:17px;height:17px;color:var(--glyph)}
.sig{margin-left:auto;padding:4px 8px;border-radius:6px;font-weight:700;color:#15261B;background:var(--lime);white-space:nowrap}
.sig.info{background:var(--info)}.sig.live{background:var(--live)}
.vnum{display:flex;align-items:baseline;gap:8px;font-family:var(--disp);font-weight:700;line-height:1.3;text-transform:uppercase}
.vnum b{font-size:96px;line-height:.85;padding-top:.12em}
.vt:first-child .vnum b{color:var(--info)}
.vnum i{font-style:normal;font-size:34px;color:var(--mute)}
.vt h3{display:flex;gap:10px;align-items:flex-start;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:26px;line-height:.95;letter-spacing:.01em;padding-top:4px}
.vt h3 .ic{margin-top:-1px;color:var(--glyph)}
.vt p{font-size:15px;line-height:1.5;color:var(--mute)}
.h2h{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:12px;font-family:var(--disp);text-transform:uppercase}
.h2h span{display:grid}
.h2h small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--mute)}
.h2h b{font-size:88px;line-height:.85;padding-top:.12em}
.h2h span:last-child{text-align:right}
.h2h em{font-style:normal;text-align:center;font-size:22px;color:var(--mute);padding-bottom:8px}
.vs{display:flex;gap:4px;height:14px}
.vs i{display:block;width:var(--w);border-radius:3px;background:var(--lime)}
.vs i+i{background:var(--live)}

/* the signal panel: FIYN's orange problem statement */
.panel{display:grid;gap:clamp(28px,6vh,72px);padding:clamp(28px,5vw,64px);border-radius:28px;background:#FF4D1F;color:#15261B;--line2:rgba(21,38,27,.2);--c:#15261B}
.panel .kick,.panel .kick span,.panel .lap .of{color:#15261B}
.panel .kick .ic{color:#15261B}
.panel .blk{--c:#15261B}
.ph{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(46px,7vw,120px);line-height:.86;max-width:15ch;letter-spacing:0}
.pfoot{display:grid;gap:24px;align-items:end}
@media (min-width:900px){.pfoot{grid-template-columns:minmax(0,1fr) auto;gap:48px}}
.pp{font-size:17px;line-height:1.5;max-width:52ch;color:#15261B}
.pbox{display:grid;gap:6px;padding:22px 26px;border-radius:14px;background:#0C150F;color:#F2F1EB}
.pbox b{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:34px;line-height:1;padding-top:4px}
.pbox small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,241,235,.7)}

/* PRO */
.plist .tag.pro{background:var(--lime);color:#15261B;padding:4px 8px;border-radius:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em}
.plist .tag.pro .ic{color:#15261B}
.plist .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.prices{gap:16px;border-top:0}
.price{padding:24px;border-radius:var(--r);background:var(--card);border-bottom:0}
.price:first-child{background:var(--hero);color:var(--heroInk)}
.price:first-child span,.price:first-child .pl,.price:first-child b small{color:var(--heroMuted)}
.price:first-child b{color:var(--lime)}
.price:first-child .pl .ic{color:var(--lime)}
.price .pl{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.price b{font-family:var(--disp);font-weight:700;font-size:clamp(72px,6.6vw,104px);line-height:1.3;letter-spacing:0;margin-block:-.12em -.2em}
.price b small{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:400}
#prices .note{margin-top:20px}

/* FAQ, contact, footer, docs */
.faq summary{font-weight:600}
.faq summary>.well{display:grid;place-items:center;color:var(--glyph)}
.ct-line{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(60px,9.6vw,160px);line-height:.84;letter-spacing:0}
#clubs .rows .btn{color:var(--ink)}
.ft .brand{font-size:24px}
.ft-links .btn{font-size:12.5px}
.doc h1,.nf h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(60px,8vw,128px);line-height:.86;letter-spacing:0}
.prose h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(32px,3vw,44px);line-height:.92;letter-spacing:.01em;padding-top:4px}
.toc h2{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:12px}

/* compositions in the new skin */
.comp .demo{color:var(--mute)}
.k-face{background:var(--well);color:var(--app-ink);font-weight:700}
.k-face.you{background:var(--live);color:#15261B}
.k-face .bd{background:#15261B;color:var(--lime);box-shadow:0 0 0 .7cqw #15261B}
.k-coach{background:#15261B}
.k-card .set{background:rgba(242,241,235,.14)}
/* the PLAYER LICENCE */
.k-lic{border-radius:5cqw;overflow:hidden;background:#15261B;color:#F2F1EB;display:grid}
.k-lic .lt{display:flex;justify-content:space-between;align-items:center;padding:3.4cqw 5cqw 2.6cqw;background:var(--lime);color:#15261B}
.k-lic .lt b{font-family:var(--disp);font-weight:700;font-size:7.4cqw;line-height:1;text-transform:uppercase;padding-top:.8cqw}
.k-lic .lt span{font-family:var(--mono);font-size:2.4cqw;letter-spacing:.14em;font-weight:700}
.k-lic .lb{display:grid;gap:3.6cqw;padding:5cqw}
.k-lic .who{display:flex;gap:4cqw;align-items:center}
.k-lic .av{width:15cqw;height:15cqw;border-radius:50%;background:var(--live);color:#15261B;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:7cqw;flex:none;padding-top:1cqw}
.k-lic .nm{display:block;font-family:var(--disp);font-weight:700;font-size:15cqw;line-height:.82;text-transform:uppercase;padding-top:1.6cqw}
.k-lic .who small{display:block;font-family:var(--mono);font-size:2.4cqw;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,241,235,.7);margin-top:1.4cqw}
.k-lic .vit{display:grid;grid-template-columns:repeat(3,1fr);border-top:.25cqw solid rgba(242,241,235,.16);padding-top:2.6cqw}
.k-lic .vit span{display:grid}
.k-lic .vit small{font-family:var(--mono);font-size:2.2cqw;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,241,235,.66)}
.k-lic .vit b{font-family:var(--disp);font-weight:700;font-size:13cqw;line-height:1;padding-top:1.4cqw}
.k-lic .vit b.lime{color:var(--lime)}
.k-lic .prov{display:flex;align-items:center;gap:3cqw;--line2:rgba(242,241,235,.16)}
.k-lic .pchip{display:inline-flex;align-items:center;gap:1.8cqw;padding:1.6cqw 2.6cqw;border-radius:2cqw;background:#0C150F;font-family:var(--mono);font-size:2.3cqw;letter-spacing:.12em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.k-lic .ring{width:3.4cqw;height:3.4cqw;border-radius:50%;background:conic-gradient(var(--info) 0 70%,rgba(242,241,235,.2) 0);-webkit-mask:radial-gradient(circle,transparent 42%,#000 44%);mask:radial-gradient(circle,transparent 42%,#000 44%)}
.k-lic .prov .blk{--u:4.2cqw;height:2.6cqw;--c:var(--info);margin:0}
.k-lic .four{display:flex;align-items:center;gap:2.4cqw}
.k-lic .four .k-face{width:10cqw;height:10cqw;font-size:4.6cqw;background:#2A332C;color:#F2F1EB;padding-top:.6cqw}
.k-lic .four .k-face.you{background:var(--live);color:#15261B}
.k-lic .four em{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:2.3cqw;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);font-weight:700}
.k-lic .q{font-family:var(--disp);font-weight:700;font-size:5.6cqw;line-height:1;text-transform:uppercase;padding-top:1cqw}
.k-lic .lc{display:flex;align-items:center;gap:3.4cqw;padding:3cqw 5cqw;background:#F2F1EB;color:#15261B}
.k-lic .qr{width:11cqw;height:11cqw;border-radius:2cqw;background:#15261B;color:#F2F1EB;display:grid;place-items:center;flex:none}
.k-lic .qr .ic{width:7cqw;height:7cqw}
.k-lic .bars{flex:1;height:9cqw;background:repeating-linear-gradient(90deg,#15261B 0 .5cqw,transparent 0 1.1cqw,#15261B 0 1.4cqw,transparent 0 2.3cqw,#15261B 0 3.1cqw,transparent 0 3.6cqw)}
.k-lic .mc{display:grid;font-family:var(--mono);font-size:2.6cqw;font-weight:700;letter-spacing:.08em}
.k-lic .mc small{font-size:2cqw;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
/* the timing tower */
.k-tower{display:grid;gap:2.4cqw}
.k-tower .th{display:flex;align-items:center;gap:4cqw;padding:4cqw 5cqw;border-radius:4cqw;background:#15261B;color:#F2F1EB}
.k-tower .pp{font-family:var(--disp);font-weight:700;font-size:20cqw;line-height:.8;color:var(--lime);padding-top:2cqw}
.k-tower .th b{display:block;font-family:var(--disp);font-weight:700;font-size:8cqw;line-height:.9;text-transform:uppercase;padding-top:1cqw}
.k-tower .th small{font-family:var(--mono);font-size:2.3cqw;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,241,235,.7)}
.k-tower ol{display:grid;gap:1.6cqw}
.k-tower li{display:grid;grid-template-columns:9cqw 1fr 3cqw 12cqw 12cqw;align-items:center;gap:2cqw;padding:2.4cqw 4cqw;border-radius:2.6cqw;background:#15261B;color:#F2F1EB;font-family:var(--disp);text-transform:uppercase}
.k-tower li i{font-style:normal;font-size:5cqw;color:rgba(242,241,235,.6);padding-top:.6cqw}
.k-tower li b{font-size:6cqw;font-weight:700;padding-top:.8cqw}
.k-tower li em{width:2.4cqw;height:2.4cqw;border-radius:.5cqw}
.k-tower li em.ok{background:var(--lime)}.k-tower li em.pv{background:var(--info)}
.k-tower li small{font-family:var(--mono);font-size:2.3cqw;color:rgba(242,241,235,.66);text-align:right}
.k-tower li span{font-size:7cqw;font-weight:700;color:var(--lime);text-align:right;padding-top:.8cqw}
.k-tower li.me{background:#F2F1EB;color:#15261B;box-shadow:inset .9cqw 0 0 var(--live)}
.k-tower li.me i,.k-tower li.me small{color:#4E5A52}
.k-tower li.me span{color:#15261B}

/* reduced motion and no JS: the finished page, nothing moves */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important}}
html:not(.motion) *,html:not(.motion) *::before,html:not(.motion) *::after{transition:none !important;animation:none !important}
@media print{.hd,.progress,.layer,.toast,.ft-tools,.piece-open,.skip{display:none !important}*{opacity:1 !important}.hero{min-height:0}.ln{transform:none !important}}
.prose .rows li{grid-template-columns:1fr;padding:6px 0}
.prose .rows li a{gap:14px}
.prose .rows li a .ic{color:var(--glyph)}

.toast[hidden]{display:none}

/* ===== v4 (11 Nov 2026): one section per feature, each with its own graphic that plays once ===== */
/* the rail: a slim sticky strip of anchors under the header */
html{scroll-padding-top:calc(var(--hd) + 60px)}
.rail{position:sticky;top:var(--hd);z-index:45;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);margin-top:var(--hd)}
.rail-in{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding-inline:var(--gut)}
.rail-in::-webkit-scrollbar{display:none}
.rail a{display:inline-flex;align-items:center;gap:7px;flex:none;min-height:46px;padding:0 12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);position:relative;transition:color .2s var(--ease)}
.rail a .ic{width:16px;height:16px;color:var(--glyph)}
.rail a:hover,.rail a[aria-current="true"]{color:var(--ink)}
.rail a::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;background:var(--live);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--spring)}
.rail a[aria-current="true"]::after{transform:none}
.hero{min-height:calc(100svh - 47px - var(--hd));padding-top:32px}
@media (max-width:999px){.hero{padding-top:6svh}}

/* the header's get-the-app */
.hdget{min-height:44px;padding:0 16px 0 14px;font-size:12.5px;margin-left:8px;border-radius:10px}
@media (max-width:899px){.hdget span{display:none}.hdget{padding:0;width:44px;justify-content:center}}

/* feature sections: copy and graphic side by side, alternating; stacked on phones */
.feat{display:grid;gap:28px;align-items:center}
@media (min-width:1000px){.feat{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(48px,6vw,96px)}.feat.flip .ft-copy{order:2}}
.ft-copy{display:grid;gap:18px;align-content:center;min-width:0}
.ft-copy .lap{flex-wrap:wrap;row-gap:8px}
.well{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--well);color:var(--glyph)}
.well .ic{width:18px;height:18px}
.ft-copy .sig{margin-left:6px;display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.ft-copy .sig .ic{width:13px;height:13px;color:#15261B}
.ft-copy .sub{max-width:46ch}
.fl{display:grid;gap:0;border-top:1px solid var(--line);margin-top:6px}
.fl li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.fl .ic{color:var(--glyph)}
.fx-col{display:grid;gap:12px;margin:0;min-width:0}
.fx-cap{display:flex;gap:10px;color:var(--mute);font-size:13.5px}
.fx-cap .ic{width:16px;height:16px;color:var(--glyph)}
.fx{position:relative;container-type:inline-size;aspect-ratio:4/3;border-radius:28px;background:#0C150F;color:#F2F1EB;overflow:hidden;--fl:#C8F24E;--fi:#4BDCF5;--fo:#FF5E33;--fm:rgba(242,241,235,.62);--fline:rgba(242,241,235,.16)}
@media (max-width:599px){.fx{aspect-ratio:4/4.4;border-radius:22px}}
.fx .ic{width:4.4cqw;height:4.4cqw}
.fc{display:inline-grid;place-items:center;width:9cqw;height:9cqw;border-radius:50%;background:#2A3A2F;color:#F2F1EB;font-family:var(--disp);font-weight:700;font-size:5cqw;line-height:1;padding-top:.5cqw;flex:none}
.fc.you{background:var(--fo);color:#15261B}

/* the PRO mark: the J, PRO in the display face, a lime spark, on an ink pill */
.promark{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 7px;border-radius:999px;background:#15261B;color:#F2F1EB;vertical-align:middle;flex:none;line-height:1}
.promark .pm-j{width:16px;height:16px;color:#F2F1EB}
.promark b{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.06em;padding-top:3px}
.promark .ic{width:14px;height:14px;color:#C8F24E;stroke-width:2}
:root[data-theme="dark"] .promark{background:#24352A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .promark{background:#24352A}}
.ft-copy .promark{margin-left:6px}

/* 1 log: four private entries become one agreed result */
.fx-lines{position:absolute;inset:0;width:100%;height:100%}
.fx-lines path{fill:none;stroke:var(--fline);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.ph4{position:absolute;display:flex;align-items:center;gap:2.4cqw;padding:2.2cqw 3.2cqw 2.2cqw 2.2cqw;border-radius:4cqw;background:#18241C;z-index:1}
.ph4 .pt{display:grid}
.ph4 small{font-family:var(--mono);font-size:2.2cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--fm)}
.ph4 b{font-family:var(--disp);font-weight:700;font-size:6cqw;line-height:1.1;padding-top:.6cqw}
.ph4 .tk{position:absolute;right:-1.6cqw;top:-1.6cqw;display:grid;place-items:center;width:5.4cqw;height:5.4cqw;border-radius:50%;background:var(--fl);color:#15261B}
.ph4 .tk .ic{width:3.4cqw;height:3.4cqw;stroke-width:2.4}
.fly{position:absolute;left:50%;top:50%;width:3cqw;height:3cqw;margin:-1.5cqw;border-radius:50%;background:var(--fl);opacity:0}
.res{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;justify-items:center;gap:1cqw;padding:3.4cqw 5cqw;border-radius:5cqw;background:#F2F1EB;color:#15261B;z-index:2;box-shadow:0 3cqw 8cqw -2cqw rgba(0,0,0,.6)}
.res .rk,.res .rs{display:flex;align-items:center;gap:1.4cqw;font-family:var(--mono);font-size:2.4cqw;letter-spacing:.1em;text-transform:uppercase}
.res .rk .ic,.res .rs .ic{width:3.4cqw;height:3.4cqw}
.res b{font-family:var(--disp);font-weight:700;font-size:13cqw;line-height:1.05;padding-top:1.4cqw}
.res .rs{color:#2E6B1E}

/* 2 rating: the number counts up, the provisional ring lights to 7 of 10 */
.rt{position:absolute;left:50%;top:44%;translate:-50% -50%;width:58cqw;aspect-ratio:1}
.ring{position:absolute;inset:0;width:100%;height:100%}
.ring .seg{fill:none;stroke:var(--fline);stroke-width:9;stroke-linecap:round}
.ring .seg.on{stroke:var(--fi)}
.rt-c{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.6cqw}
.rt-c small{font-family:var(--mono);font-size:2.6cqw;letter-spacing:.12em;text-transform:uppercase;color:var(--fm)}
.rt-c b{font-family:var(--disp);font-weight:700;font-size:19cqw;line-height:1.05;padding-top:2.4cqw;color:var(--fl);font-variant-numeric:tabular-nums}
.rt-c .lvl{display:flex;align-items:center;gap:1.4cqw;font-family:var(--mono);font-size:2.6cqw;letter-spacing:.1em;text-transform:uppercase}
.rt-c .lvl .ic{color:var(--fl);width:3.6cqw;height:3.6cqw}
.rt-foot{position:absolute;left:5cqw;right:5cqw;bottom:5cqw;display:flex;justify-content:space-between;gap:2cqw;flex-wrap:wrap;font-family:var(--mono);font-size:2.5cqw;letter-spacing:.1em;text-transform:uppercase}
.rt-foot span{display:flex;align-items:center;gap:1.4cqw}
.rt-foot .ic{width:3.6cqw;height:3.6cqw}
.rt-foot .pchip{color:var(--fi)}
.rt-foot .vr{color:var(--fm)}
.spark{position:absolute;left:5cqw;right:5cqw;bottom:12cqw;height:8cqw;opacity:.5}
.spark svg{width:100%;height:100%}
.spark path{fill:none;stroke:var(--fl);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1}

/* 3 licence: the card tilts in, the radar draws */
.fx-licence{perspective:900px}
.lic{position:absolute;left:50%;top:50%;width:66cqw;translate:-50% -50%;rotate:-2.5deg;display:grid;gap:2cqw;padding:4cqw;border-radius:5cqw;background:#F2F1EB;color:#15261B;box-shadow:0 4cqw 10cqw -3cqw rgba(0,0,0,.7)}
@media (max-width:599px){.lic{width:78cqw}}
.lic-t{display:flex;justify-content:space-between;font-family:var(--mono);font-size:2.3cqw;letter-spacing:.12em;text-transform:uppercase}
.lic-t b{font-weight:700}
.lic-who{display:flex;align-items:center;gap:2.4cqw}
.lic-who b{display:block;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:6cqw;line-height:1.1;padding-top:.8cqw}
.lic-who small{font-family:var(--mono);font-size:2.2cqw;letter-spacing:.1em;text-transform:uppercase;color:#4E5A52}
.lic-r{margin-left:auto;display:grid;justify-items:end}
.lic-r small{font-family:var(--mono);font-size:2.2cqw;letter-spacing:.1em;text-transform:uppercase;color:#4E5A52}
.lic-r b{font-family:var(--disp);font-weight:700;font-size:9cqw;line-height:1.1;padding-top:1cqw}
.lic-radar .radar{width:100%;height:auto;display:block;max-height:46cqw}
.lic-radar .web{fill:none;stroke:rgba(21,38,27,.18);stroke-width:1}
.lic-radar .shape{fill:rgba(255,77,31,.2);stroke:#E8461A;stroke-width:2;transform-origin:150px 150px}
.lic-radar text{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;fill:#4E5A52}
.lic-f{display:flex;align-items:center;gap:1.4cqw;font-family:var(--mono);font-size:2.2cqw;letter-spacing:.1em;text-transform:uppercase;color:#4E5A52}
.lic-f .ic{width:3.4cqw;height:3.4cqw}

/* 4 find: the grid filters to my level, both ways, no location */
.fd-chips{position:absolute;left:4cqw;right:4cqw;top:4cqw;display:flex;gap:1.6cqw;flex-wrap:wrap}
.ch{display:inline-flex;align-items:center;gap:1.2cqw;height:6.4cqw;padding:0 2.6cqw;border-radius:99px;background:#1E2A22;font-family:var(--mono);font-size:2.3cqw;letter-spacing:.08em;text-transform:uppercase;color:var(--fm)}
.ch .ic{width:3.2cqw;height:3.2cqw}
.ch.on{background:var(--fl);color:#15261B}
.fd-grid{position:absolute;left:4cqw;right:4cqw;top:14cqw;bottom:13cqw;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:2cqw}
.pcd{position:relative;border-radius:3cqw;overflow:hidden;background:#24352A}
.pcd.wide{grid-row:span 2}
.pcd img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.pcd .mono{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:14cqw;color:var(--fl);padding-bottom:5cqw}
.pcd .pn{position:absolute;left:0;right:0;bottom:0;display:grid;padding:4cqw 2cqw 1.6cqw;background:linear-gradient(transparent,rgba(8,12,9,.88))}
.pcd .pn b{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:4.6cqw;line-height:1.1;padding-top:.6cqw}
.pcd .pn small{display:flex;align-items:center;gap:.8cqw;font-family:var(--mono);font-size:1.8cqw;letter-spacing:.06em;text-transform:uppercase;color:rgba(242,241,235,.82)}
.pcd .pn .ic{width:2.6cqw;height:2.6cqw;color:var(--fl);stroke-width:2.4}
.pcd.out{opacity:.22;scale:.95;filter:grayscale(1)}
.fd-foot{position:absolute;left:4cqw;right:4cqw;bottom:3.6cqw;display:flex;justify-content:space-between;gap:2cqw;flex-wrap:wrap;font-family:var(--mono);font-size:2.3cqw;letter-spacing:.08em;text-transform:uppercase}
.fd-foot>span{display:flex;align-items:center;gap:1.2cqw}
.both{color:var(--fl)}
.both .ic{width:3.6cqw;height:3.6cqw}
.both .flipx{scale:-1 1;margin-left:-2.2cqw}
.noloc{color:var(--fm)}
.pinx{position:relative;display:inline-grid}
.pinx .ic{width:4cqw;height:4cqw;color:var(--fm)}
.pinx .slash{position:absolute;inset:0;width:4cqw;height:4cqw}
.pinx .slash path{fill:none;stroke:var(--fo);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1}

/* 5 record: the phone on the glass finds you, strokes land on a timeline */
.phone{position:absolute;left:6cqw;top:6cqw;bottom:6cqw;aspect-ratio:9/16;padding:1.6cqw;border-radius:6cqw;background:#2A3A2F}
.scr{position:relative;width:100%;height:100%;border-radius:4.6cqw;overflow:hidden;background:#1A3326}
.crt{position:absolute;inset:0;width:100%;height:100%}
.crt path{fill:none;stroke:rgba(242,241,235,.5);stroke-width:1.4;vector-effect:non-scaling-stroke}
.crt .net{stroke:rgba(242,241,235,.85);stroke-width:2.4}
.ppl{position:absolute;inset:0;width:100%;height:100%}
.ppl .opp{fill:rgba(242,241,235,.45)}
.ppl .pt2{fill:rgba(242,241,235,.55)}
.ppl .me{fill:#F2F1EB;stroke:#F2F1EB;stroke-width:6;stroke-linecap:round}
.ppl .me ellipse{fill:none;stroke-width:4}
.brk{position:absolute;left:21%;top:58%;width:34%;height:30%}
.brk i{position:absolute;width:24%;height:18%;border:solid var(--fl);border-width:0}
.brk i:nth-child(1){left:0;top:0;border-left-width:3px;border-top-width:3px}
.brk i:nth-child(2){right:0;top:0;border-right-width:3px;border-top-width:3px}
.brk i:nth-child(3){left:0;bottom:0;border-left-width:3px;border-bottom-width:3px}
.brk i:nth-child(4){right:0;bottom:0;border-right-width:3px;border-bottom-width:3px}
.brk span{position:absolute;left:0;top:-5cqw;display:flex;align-items:center;gap:.8cqw;white-space:nowrap;padding:.6cqw 1.6cqw;border-radius:99px;background:var(--fl);color:#15261B;font-family:var(--mono);font-size:1.8cqw;letter-spacing:.06em;text-transform:uppercase}
.brk span .ic{width:2.6cqw;height:2.6cqw}
.rec{position:absolute;right:2.6cqw;top:2.6cqw;display:flex;align-items:center;gap:1cqw;font-family:var(--mono);font-size:1.9cqw;letter-spacing:.1em;text-transform:uppercase}
.rec::before{content:"";width:1.8cqw;height:1.8cqw;border-radius:50%;background:var(--fo)}
.spd{position:absolute;left:2.6cqw;right:2.6cqw;top:8cqw;display:grid;padding:1.8cqw 2.2cqw;border-radius:2.6cqw;background:rgba(8,12,9,.8)}
.spd small,.spd em{font-family:var(--mono);font-size:1.8cqw;letter-spacing:.08em;text-transform:uppercase;color:var(--fm)}
.spd em{color:var(--fi)}
.spd b{font-family:var(--disp);font-weight:700;font-size:6.4cqw;line-height:1.1;padding-top:.8cqw;color:var(--fl)}
.tl{position:absolute;left:46cqw;right:5cqw;top:50%;translate:0 -50%;display:grid;gap:4cqw}
.tl-k{display:flex;align-items:center;gap:1.4cqw;font-family:var(--mono);font-size:2.4cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--fm)}
.tl-k b{font-family:var(--disp);font-size:7cqw;color:#F2F1EB;padding-top:1cqw;line-height:1}
.tl-bar{position:relative;height:16cqw}
.tl-bar>i{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--fline);transform-origin:0 50%}
.tg{position:absolute;left:var(--x);top:50%;translate:-50% -50%;display:grid;place-items:center;width:7cqw;height:7cqw;border-radius:50%;background:var(--fl);color:#15261B;font-family:var(--disp);font-weight:700;font-size:3.4cqw;padding-top:.5cqw}
.tg.bh{background:var(--fi);top:22%}
.tg.oh{background:var(--fo);top:78%}
@media (max-width:599px){.phone{left:4cqw;top:4cqw;bottom:auto;height:62cqw}.tl{left:4cqw;right:4cqw;top:auto;bottom:4cqw;translate:none;gap:2cqw}.tl-bar{height:14cqw}}

/* 6 share: the result card lands, the crown drops once */
.card{position:absolute;left:50%;top:47%;translate:-50% -50%;rotate:-2deg;width:44cqw;aspect-ratio:4/5;display:grid;align-content:space-between;padding:3.4cqw;border-radius:4cqw;background:linear-gradient(160deg,#22402D,#0C150F);box-shadow:0 4cqw 10cqw -3cqw rgba(0,0,0,.8)}
@media (max-width:599px){.card{width:56cqw;top:45%}}
.cd-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:2.1cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--fm)}
.cd-top .mark{width:5cqw;height:5cqw}
.cd-face{position:relative;display:flex;align-items:center;gap:2cqw;padding-top:5cqw}
.fc.big{width:12cqw;height:12cqw;font-size:6.4cqw}
.crown{position:absolute;left:2cqw;top:0;color:#FFC83D}
.crown .ic{width:8cqw;height:8cqw;stroke-width:2}
.cd-name b{display:block;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:5.4cqw;line-height:1.1;padding-top:.8cqw}
.cd-name small{font-family:var(--mono);font-size:2cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--fm)}
.won{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:17cqw;line-height:1.05;padding-top:2cqw;color:var(--fl);rotate:-4deg;transform-origin:0 60%}
.cd-sets{display:flex;gap:1.6cqw}
.cd-sets span{padding:.8cqw 2cqw;border-radius:1.6cqw;background:#F2F1EB;color:#15261B;font-family:var(--disp);font-weight:700;font-size:4cqw;padding-top:1.4cqw}
.cd-ok{display:flex;align-items:center;gap:1cqw;font-family:var(--mono);font-size:1.9cqw;letter-spacing:.08em;text-transform:uppercase;color:var(--fm)}
.cd-ok .ic{width:2.8cqw;height:2.8cqw;color:var(--fl)}
.vid{position:absolute;left:50%;bottom:4cqw;translate:-50% 0;display:flex;align-items:center;gap:1.4cqw;padding:1.6cqw 3cqw;border-radius:99px;background:var(--fl);color:#15261B;font-family:var(--mono);font-size:2.3cqw;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.vid .ic{width:3.4cqw;height:3.4cqw}

/* 7 streaks and the coach */
.sk{position:absolute;left:5cqw;right:5cqw;top:5cqw;display:grid;gap:1.6cqw}
.sk-k{display:flex;align-items:center;gap:1.4cqw;font-family:var(--mono);font-size:2.4cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--fm)}
.sk-k .ic{width:3.6cqw;height:3.6cqw;color:var(--fo)}
.sk-k .promark{margin-left:auto}
.sk-n{display:flex;align-items:baseline;gap:2cqw;font-family:var(--disp);font-weight:700;text-transform:uppercase}
.sk-n b{font-size:20cqw;line-height:1.05;padding-top:2cqw;color:var(--fo)}
.sk-n i{font-style:normal;font-size:6cqw;color:var(--fm)}
.wk{display:grid;grid-template-columns:repeat(12,1fr);gap:1.2cqw}
.wk i{height:5cqw;border-radius:1cqw;background:var(--fline)}
.wk i.on{background:var(--fo)}
.plan{position:absolute;left:5cqw;right:5cqw;bottom:5cqw;display:grid;gap:2cqw;padding:3.4cqw;border-radius:4cqw;background:#F2F1EB;color:#15261B}
.plan .sk-k{color:#4E5A52}
.plan .sk-k .ic{color:#15261B}
.plan ul{display:grid;gap:1.4cqw}
.plan li{display:flex;align-items:center;gap:1.6cqw;font-size:3.2cqw;font-weight:600}
.plan li .ic{width:4cqw;height:4cqw;color:#2E6B1E;stroke-width:2.4}

/* 8 watch */
.wt{position:absolute;left:50%;top:50%;translate:-50% -50%;width:38cqw;display:grid;justify-items:center}
@media (max-width:599px){.wt{width:50cqw}}
.wt-band{width:62%;height:14cqw;background:#24352A}
.wt-band.top{border-radius:3cqw 3cqw 0 0}.wt-band.bot{border-radius:0 0 3cqw 3cqw}
.wt-case{position:relative;width:100%;aspect-ratio:41/50;padding:2.4cqw;border-radius:9cqw;background:#2E3B32}
.crownbtn{position:absolute;right:-1.6cqw;top:26%;width:2.2cqw;height:7cqw;border-radius:1cqw;background:#3C4B41}
.wt-scr{height:100%;border-radius:7cqw;background:#000;display:grid;grid-template-rows:auto 1fr auto;padding:2.6cqw;gap:1.6cqw}
.wt-set{font-family:var(--mono);font-size:2.1cqw;letter-spacing:.08em;text-transform:uppercase;color:var(--fm);text-align:center}
.wt-pads{display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw}
.pad{position:relative;overflow:hidden;display:grid;place-content:center;justify-items:center;border-radius:4cqw;background:#1E2A22}
.pad.us{background:var(--fl);color:#15261B}
.pad small{font-family:var(--mono);font-size:2cqw;letter-spacing:.1em;text-transform:uppercase}
.pad b{font-family:var(--disp);font-weight:700;font-size:11cqw;line-height:1.05;padding-top:1.4cqw}
.rip{position:absolute;left:50%;top:50%;width:20cqw;height:20cqw;margin:-10cqw;border-radius:50%;background:rgba(21,38,27,.25);opacity:0}
.wt-foot{display:flex;justify-content:space-between;color:var(--fm)}
.wt-foot .ic{width:3.6cqw;height:3.6cqw}
.wt-foot span .ic{color:var(--fo)}
.wt-tap{position:absolute;left:12cqw;top:34cqw;display:flex;align-items:center;gap:1.2cqw;font-family:var(--mono);font-size:2.3cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--fl)}
@media (max-width:599px){.wt-tap{left:4cqw;top:6cqw}}

/* ---- motion: everything above is the finished frame. Under html.motion each .a plays once
   when its graphic is 40% in view (.play); until then it waits paused on its first frame. */
@keyframes fxPop{from{opacity:0;scale:.6}}
@keyframes fxIn{from{opacity:0;translate:0 6cqw}}
@keyframes fxDraw{from{stroke-dashoffset:1}}
@keyframes fxFly{0%{opacity:1;translate:var(--fx0) var(--fy0)}80%{opacity:1}100%{opacity:0;translate:0 0}}
@keyframes fxRes{from{opacity:0;scale:.4}}
@keyframes fxGrow{from{scale:0}}
@keyframes fxTilt{from{opacity:0;transform:rotateX(38deg) rotateY(-28deg) translateY(14cqw)}}
@keyframes fxOut{from{opacity:1;scale:1;filter:grayscale(0)}}
@keyframes fxLine{from{scale:0 1}}
@keyframes fxBrk{from{opacity:0;inset:auto;left:5%;top:30%;width:90%;height:66%}}
@keyframes fxDrop{0%{opacity:0;translate:0 -10cqw}60%{opacity:1;translate:0 1cqw}80%{translate:0 -.8cqw}100%{translate:0 0}}
@keyframes fxLand{from{opacity:0;translate:-50% -90%;rotate:-14deg}}
@keyframes fxStamp{from{opacity:0;scale:2.2}}
@keyframes fxRip{0%{opacity:.9;scale:.1}100%{opacity:0;scale:1}}
@keyframes fxTap{0%{opacity:0}30%{opacity:1}100%{opacity:1}}
html.motion .fx .a{animation:var(--an) var(--du,.7s) var(--spring) calc(var(--de,0s) + min(var(--i,0),6) * var(--st,.09s)) both}
html.motion .fx:not(.play) .a{animation-play-state:paused}
.fx-log .ph4{--an:fxIn;--de:.05s;--st:.12s}
html.motion .fx-log .ph4{animation:fxIn .6s var(--spring) calc(var(--i) * .12s) both}
html.motion .fx-log:not(.play) .ph4{animation-play-state:paused}
.fx-log .fx-lines .a{--an:fxDraw;--du:.5s;--de:.55s}
.fx-log .fly{--an:fxFly;--du:.55s;--de:.7s;--st:.08s;--fx0:0;--fy0:0;animation-timing-function:cubic-bezier(.5,0,.5,1)!important}
.fx-log .ph4:nth-of-type(1) .fly,.fx-log .ph4:nth-of-type(3) .fly{left:auto;right:0;top:50%}
.fx-log .ph4 .fly{left:50%;top:50%}
.fx-log .res{--an:fxRes;--du:.7s;--de:1.25s}
.fx-log .tk{--an:fxPop;--du:.45s;--de:1.55s;--st:.08s}
.fx-rating .seg.a{--an:fxPop;--du:.4s;--de:.2s;--st:.1s;transform-box:fill-box;transform-origin:center}
.fx-rating .spark .a{--an:fxDraw;--du:1.2s;--de:.4s;animation-timing-function:var(--ease)!important}
.fx-licence .lic{--an:fxTilt;--du:1s}
.fx-licence .shape{animation:none}
html.motion .fx-licence .shape{animation:fxGrow .9s var(--spring) .7s both}
html.motion .fx-licence:not(.play) .shape{animation-play-state:paused}
.fx-find .pcd{--an:fxIn;--du:.6s;--st:.08s}
.fx-find .ch.on{--an:fxPop;--du:.4s;--de:.85s}
html.motion .fx-find .pcd.out{animation:fxIn .6s var(--spring) calc(var(--i) * .08s) both,fxOut .5s var(--ease) 1.05s both}
html.motion .fx-find:not(.play) .pcd.out{animation-play-state:paused}
.fx-find .slash .a{--an:fxDraw;--du:.4s;--de:1.4s}
.fx-record .brk{--an:fxBrk;--du:.9s;--de:.3s}
.fx-record .tl-bar>i{--an:fxLine;--du:.9s;--de:.6s;animation-timing-function:var(--ease)!important}
.fx-record .tg{--an:fxPop;--du:.45s;--de:.9s;--st:.12s}
.fx-record .spd{--an:fxIn;--du:.6s;--de:1.7s}
.fx-share .card{--an:fxLand;--du:.9s}
.fx-share .crown{--an:fxDrop;--du:.8s;--de:.75s;animation-timing-function:cubic-bezier(.3,0,.4,1)!important}
.fx-share .won{--an:fxStamp;--du:.5s;--de:.55s}
.fx-share .cd-sets .a{--an:fxPop;--du:.4s;--de:1s;--st:.1s}
.fx-share .vid{--an:fxIn;--du:.6s;--de:1.4s}
.fx-streaks .wk .a{--an:fxPop;--du:.4s;--de:.2s;--st:.08s}
.fx-streaks .plan li{--an:fxIn;--du:.5s;--de:.9s;--st:.15s}
.fx-watch .rip{--an:fxRip;--du:.7s;--de:.6s;animation-timing-function:var(--ease)!important}
.fx-watch .wt-tap{--an:fxTap;--du:.6s;--de:.3s}
@media print{html.motion .fx .a,html.motion .fx .ph4,html.motion .fx .shape{animation:none!important}}

/* the get-the-app sheet */
.soon{position:fixed;inset:0;z-index:120;display:grid;place-items:end center}
.soon[hidden]{display:none}
.soon-scrim{position:absolute;inset:0;background:rgba(10,14,11,.55)}
.soon-card{position:relative;width:min(520px,100%);display:grid;gap:14px;padding:28px var(--gut) 32px;border-radius:24px 24px 0 0;background:var(--bg);color:var(--ink)}
@media (min-width:700px){.soon{place-items:center}.soon-card{border-radius:24px;padding:32px}}
.soon-card h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:44px;line-height:1;padding-top:6px}
.soon-card p{color:var(--mute)}
.soon-card .kick{color:var(--mute)}
.soon-acts{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:flex-end;padding-top:8px}

/* PRO: its own dark band */
.pro-band .pb-in{display:grid;gap:28px;padding:clamp(28px,5vw,64px);border-radius:28px;background:#0C150F;color:#F2F1EB;--line:rgba(242,241,235,.14);--mute:#B4BCB3;--glyph:#C8F24E;--ink:#F2F1EB;--card:#18241C;--hero:#15261B;--heroInk:#F2F1EB;--heroMuted:rgba(242,241,235,.66);--well:#1E2A22;--line2:rgba(242,241,235,.16)}
.pro-band .kick,.pro-band .lap>span:nth-of-type(1){color:#F2F1EB}
.pb-mark .promark{height:clamp(56px,7vw,84px);padding:0 clamp(18px,2vw,28px) 0 clamp(14px,1.6vw,22px);gap:14px;background:#15261B}
.pb-mark .promark .pm-j{width:clamp(34px,4.4vw,54px);height:clamp(34px,4.4vw,54px)}
.pb-mark .promark b{font-size:clamp(46px,6vw,74px);padding-top:.12em}
.pb-mark .promark .ic{width:clamp(26px,3vw,38px);height:clamp(26px,3vw,38px)}
.pro-band .plist li{grid-template-columns:20px 1fr}
.pro-band .price{background:#18241C}
.pro-band .price:first-child{background:#22402D}
.pb-never{display:flex;gap:12px;align-items:center;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.4vw,34px);line-height:1;padding-top:4px;color:#C8F24E}
.pb-never .ic{width:26px;height:26px}
.pb-free{display:grid;gap:8px;padding-top:20px;border-top:1px solid var(--line)}
.pb-free p:last-child{color:#B4BCB3;max-width:70ch}

/* the splash: first visit only, over a hero that has already painted */
.splash{display:none}
html.sp .splash{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--bg);animation:spLift .55s cubic-bezier(.7,0,.2,1) 1.75s forwards}
html.sp.sp-skip .splash{animation:spLift .32s cubic-bezier(.7,0,.2,1) forwards}
.sp-in{display:grid;justify-items:center;gap:10px}
.sp-mark{width:120px;height:120px}
.sp-bg{fill:#15261B;animation:spPop .5s var(--spring) both}
.sp-j{fill:none;stroke:#F2F1EB;stroke-width:150;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;animation:fxDraw .6s cubic-bezier(.5,0,.2,1) .2s both}
.sp-ball{fill:#C8F24E;animation:spBall .55s cubic-bezier(.3,0,.4,1) .7s both}
.sp-w{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:56px;line-height:1;letter-spacing:.04em;padding-top:8px;animation:spUp .5s var(--spring) 1s both}
.sp-s{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);animation:spFade .4s ease 1.25s both}
@keyframes spPop{from{opacity:0;scale:.7}}
@keyframes spBall{0%{opacity:0;translate:0 -520px}60%{opacity:1;translate:0 30px}80%{translate:0 -30px}100%{translate:0 0}}
@keyframes spUp{from{opacity:0;translate:0 24px}}
@keyframes spFade{from{opacity:0}}
@keyframes spLift{to{translate:0 -100%;visibility:hidden}}
@media print{.splash{display:none!important}}
/* fit passes after review */
.lic-radar{display:grid;place-items:center}
.lic-radar .radar{width:auto;height:30cqw;max-height:none}
@media (max-width:599px){.lic-radar .radar{height:40cqw}}
.lic{gap:1.6cqw;padding:3.4cqw 4cqw}
.rt{width:50cqw;top:42%}
.spark{bottom:11cqw;height:5cqw}
.won{font-size:13cqw}
.card{gap:1cqw}
.fd-grid{bottom:15cqw}
.ph4 .tk{right:-1.4cqw;top:-1.4cqw}
@media (max-width:599px){.nav a[href^="#"]{display:none}}

/* the header web-app link (12 Nov 2026): an <a> inside .nav, so it must beat the nav link colours */
.nav a.hdget,.nav a.hdget .ic{color:var(--accent-ink)}
.nav a.hdget{padding:0 16px 0 14px;font-family:inherit;letter-spacing:.06em}
@media (min-width:900px){.nav a.hdget span{display:inline}}
@media (max-width:899px){.nav a.hdget{padding:0;width:44px}}
/* interactive watch */
button.pad{border:0;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .2s}
button.pad:active{transform:scale(.96)}
button.pad:focus-visible,.wt-undo:focus-visible{outline:2px solid var(--fl);outline-offset:2px}
.wt-undo{border:0;background:none;padding:0;color:inherit;cursor:pointer;display:inline-flex}
@media (prefers-reduced-motion:reduce){button.pad{transition:none}button.pad:active{transform:none}}
.wt-tap{pointer-events:none}
.wt-undo{min-width:44px;min-height:44px;margin:-10px;align-items:center;justify-content:center}