/* Wingmark fresh-site mockups (Ray, Design, 22 Oct 2026). Brand carried over: logo, colours, type. Nothing else from the old site. */
@font-face{font-family:Sora;src:url(../assets/fonts/sora-variable.woff2);font-weight:100 900}
@font-face{font-family:Manrope;src:url(../assets/fonts/manrope-variable.woff2);font-weight:200 800}
@font-face{font-family:"IBM Plex Mono";src:url(../assets/fonts/ibm-plex-mono-400.woff2);font-weight:400}
@font-face{font-family:"IBM Plex Mono";src:url(../assets/fonts/ibm-plex-mono-500.woff2);font-weight:500}
@font-face{font-family:"IBM Plex Mono";src:url(../assets/fonts/ibm-plex-mono-600.woff2);font-weight:600}
:root{--bg:#0A0B0E;--surface:#131318;--surface2:#1A1A20;--line:rgba(233,231,226,.12);--line2:rgba(233,231,226,.24);--text:#E9E7E2;--muted:#9A9CA3;--dim:#6B6D75;
 --accent:#FF4FE0;--accent-ink:#FF4FE0;--on-accent:#1A0313;--way:#D7EDF2;--good:#3DDC84;--warn:#F5B83D;--bad:#FF5A6A;
 --head:Sora,system-ui,sans-serif;--body:Manrope,system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--r:10px;--shade:rgba(10,11,14,0)}
.light{--bg:#F3F4F6;--surface:#FFFFFF;--surface2:#ECEEF1;--line:rgba(10,11,14,.12);--line2:rgba(10,11,14,.28);--text:#0A0B0E;--muted:#555861;--dim:#8A8D95;--accent-ink:#B0138F;--way:#0A0B0E;--good:#12874A;--warn:#9A6A00;--bad:#C4283A;--shade:rgba(243,244,246,0)}
*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--text);font:400 1rem/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{font-family:var(--head);letter-spacing:-.015em}a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono)}.kick{font:500 .72rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cat{font:600 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.cap{font:400 .72rem/1.5 var(--mono);color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--on-accent);font:700 .92rem var(--body);padding:12px 18px;border-radius:8px;text-decoration:none}
.btn.ghost{background:none;color:var(--text);border:1px solid var(--line2)}
.lnk{font:600 .74rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);text-decoration:none}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
/* header and footer, shared */
.head{background:var(--bg);border-bottom:1px solid var(--line)}
.head .wrap{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font:700 1.02rem var(--head);text-decoration:none;white-space:nowrap}
.brand svg{width:30px;height:30px;display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{font:500 .76rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:8px 0;white-space:nowrap}
.nav a.on{color:var(--text);box-shadow:0 2px 0 var(--accent)}
.nav .navcta{color:var(--on-accent);background:var(--accent);padding:9px 14px;border-radius:7px;font-weight:600;box-shadow:none}
.burger{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--line2);border-radius:8px;background:none;color:var(--text);align-items:center;justify-content:center}
@media(max-width:760px){.nav{display:none}.burger{display:flex}.head .wrap{height:58px}}
.foot{border-top:1px solid var(--line);margin-top:72px;padding:40px 0 48px;color:var(--muted);font:400 .78rem/1.65 var(--mono)}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.foot h4{font:600 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin-bottom:10px}
.foot a{display:block;color:var(--muted);text-decoration:none;padding:2px 0}
.foot .fine{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;margin-top:6px}
@media(max-width:760px){.foot .cols{grid-template-columns:1fr 1fr}.foot .cols>div:first-child{grid-column:1/-1}}
/* ticker: one component, three treatments (see ticker.js). .tk-hide removes the whole band when there is nothing fresh to show. */
.tk[hidden],.tk.tk-hide{display:none!important}
.tk-vp{position:relative}
.tk-row{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tk-row::-webkit-scrollbar{display:none}
.tk-tile{flex:none;scroll-snap-align:start;display:flex;flex-direction:column;gap:3px;padding:12px 16px;border-right:1px solid var(--line);width:var(--tw,232px);font:500 .72rem/1.3 var(--mono);color:var(--muted)}
.tk-tile b{display:flex;align-items:center;gap:8px;color:var(--text);font:600 .84rem var(--mono)}
.tk-tile .em{font:400 1.2rem/1 "Apple Color Emoji","Segoe UI Emoji",sans-serif}
.tk-tile .st{display:flex;gap:7px;align-items:flex-start;color:var(--text);font-size:.76rem;line-height:1.35}
.tk-tile .dot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:4px;background:var(--good)}
.tk-tile.warn .dot{background:var(--warn)}.tk-tile.bad .dot{background:var(--bad)}
.tk-tile.bad{box-shadow:inset 0 2px 0 var(--bad)}.tk-tile.warn{box-shadow:inset 0 2px 0 var(--warn)}
.tk-tile .tc{font-size:.62rem;color:var(--muted)}
.tk-fade{position:absolute;top:0;bottom:0;width:64px;pointer-events:none;opacity:1;transition:opacity .2s;z-index:2}
.tk-fade.l{left:0;background:linear-gradient(90deg,var(--tkbg,var(--bg)),var(--shade))}
.tk-fade.r{right:0;background:linear-gradient(270deg,var(--tkbg,var(--bg)),var(--shade))}
.at-start .tk-fade.l,.at-end .tk-fade.r{opacity:0}
.tk-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);background:var(--surface);color:var(--text);font:600 1rem/1 var(--mono);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.tk-btn.l{left:10px}.tk-btn.r{right:10px}
.at-start .tk-btn.l,.at-end .tk-btn.r{opacity:0;pointer-events:none}
@media(hover:none),(max-width:760px){.tk-btn{display:none}}
.tk-prog{height:3px;background:var(--line);border-radius:2px;position:relative;overflow:hidden}
.tk-prog i{position:absolute;top:0;bottom:0;left:0;background:var(--accent);border-radius:2px}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-14px)}}
.nudge .tk-row>.tk-tile:first-child{animation:nudge 1.4s ease-in-out 1.2s 2}
.tk-hint{font:600 .68rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);white-space:nowrap}
.tk-hint.gone{opacity:0;transition:opacity .4s}
/* shared modules */
.rank{list-style:none;margin:0;padding:0}
.rank li{display:grid;grid-template-columns:28px 34px 1fr auto;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line)}
.rank li:first-child{border-top:0}
.rank .rk{font:500 .8rem var(--mono);color:var(--muted)}.rank .em{font:400 1.3rem/1 "Apple Color Emoji","Segoe UI Emoji",sans-serif}
.rank .rn b{display:block;font:600 .92rem var(--mono)}.rank .rn small{display:block;font:400 .78rem var(--body);color:var(--muted)}
.rank .rs{font:600 1.05rem var(--mono)}
.gr{display:grid;grid-template-columns:1.6rem 1fr 2.6rem;gap:10px;align-items:center;padding:5px 0;font:500 .8rem var(--mono)}
.gr .gt{height:14px}.gr .gt i{display:block;height:100%;background:var(--accent);border-radius:0 3px 3px 0;opacity:.9}.gr span{text-align:right}
.plist{list-style:none;margin:0;padding:0}
.plist li{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-top:1px solid var(--line)}.plist li:first-child{border-top:0}
.plist b{font:600 1.02rem var(--head)}.plist p{color:var(--muted);font-size:.9rem;line-height:1.45}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px}
.sec-h h2{font:600 1.1rem var(--head)}
.stamp{font:500 .7rem/1.5 var(--mono);color:var(--muted)}
/* states every builder needs (spec section 8) */
a:focus-visible,button:focus-visible,.tk-row:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.btn:hover{filter:brightness(1.08)}.btn.ghost:hover{border-color:var(--text)}
.card.scard:hover,.card.pc:hover,.card.offer:hover,.card.oc:hover{border-color:var(--line2)}
@media(prefers-reduced-motion:reduce){.nudge .tk-row>.tk-tile:first-child{animation:none}.tk-row{scroll-behavior:auto}*{transition:none!important}}