/* Model Compass · yellow sticker design. Self-hosted fonts (no request to Google = GDPR-safe). Put the .woff2 files in /fonts/ (see fonts/README.txt). Without them the page falls back to Arial Black / system fonts and still works. */ @font-face{font-family:"Archivo Black";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/archivo-black-latin.woff2) format("woff2")} @font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/space-grotesk-latin-500.woff2) format("woff2")} @font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/space-grotesk-latin-700.woff2) format("woff2")} :root{ --bg:#FFD84D; --surface:#FFFFFF; --ink:#121212; --muted:#3A3A3A; --line:#121212; --track:#E4E0D4; --accent:#121212; --accent-soft:#FFF1A8; --seg1:#121212; --seg2:#FF6FA0; --seg3:#5AA9FF; --signal:#FF8A1F; --seg4:#9B7BFF; --warn:#B3360A; --p1:#FF9EC0;--p4-bar:#BFB8A5; --p2:#9AD0FF; --p3:#8DEBB5; --p4:#FFFFFF; --p5:#FFB066; --p6:#C9B2FF; --p7:#7FE6E2; --p8:#FF8A7A; --on-ink:#fff; --shc:#121212; --shw:#fff; --sticker-ink:#121212; --bw:3px; --sh:6px 6px 0 var(--shc); --sh-s:4px 4px 0 var(--shc); --f-display:"Archivo Black", "Arial Black", "Segoe UI Black", system-ui, sans-serif; --f-body:"Space Grotesk", "Segoe UI", system-ui, sans-serif; --f-mono:"Space Grotesk", "Segoe UI", system-ui, sans-serif; color-scheme:light; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-weight:500;font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%} img{max-width:100%} [hidden]{display:none!important} b,strong{font-weight:700} .wrap{max-width:1180px;margin:0 auto;padding-block:28px 64px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))} h1,h2,h3,h4{margin:0;line-height:1.1} h1,h2{font-family:var(--f-display);font-weight:400;text-transform:uppercase;text-wrap:balance} h1{font-size:clamp(2.5rem,7.4vw,6.2rem);line-height:.94;letter-spacing:-.02em} h2{font-size:clamp(1.4rem,2.6vw,1.8rem);letter-spacing:-.01em} h3{font-family:var(--f-body);font-weight:700;font-size:1.1rem;text-wrap:balance} p{margin:0} a{color:var(--ink)} .eyebrow,h2.eyebrow{font-family:var(--f-body);font-size:.8rem;font-weight:700;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} h2.eyebrow{margin:0} .mono{font-variant-numeric:tabular-nums} /* Focus: a black ring reads on yellow, white and pastel */ a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,#resultCard:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px} .cta:focus-visible,.btn.primary:focus-visible{outline-color:var(--ink);box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--shc)} .situ:focus,#resultCard:focus{outline:none} /* ---------- Top bar ---------- */ .topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:28px} .brand{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-body);font-weight:700;font-size:1rem;line-height:1;letter-spacing:0;color:var(--on-ink);background:var(--ink);border:var(--bw) solid var(--ink);border-radius:999px;padding:0 18px;text-decoration:none;min-height:44px} @media (hover:hover){.brand:hover{background:var(--surface);color:var(--ink)}} .tools{display:flex;gap:10px;align-items:center} .lang{display:inline-flex;border:var(--bw) solid var(--ink);border-radius:999px;overflow:hidden;background:var(--surface)} .lang a{font-size:.85rem;font-weight:700;padding:8px 14px;min-height:44px;display:inline-flex;align-items:center;color:var(--ink);text-decoration:none} .lang a[aria-current="page"]{background:var(--ink);color:var(--on-ink)} .lang a:hover:not([aria-current]){background:var(--accent-soft)} /* ---------- Hero ---------- */ /* Like artboard 1: slogan + headline, stickers, then the lede and the CTA pinned to the bottom edge. */ header.hero{display:flex;flex-direction:column;gap:32px;padding-bottom:36px;margin-bottom:36px;border-bottom:var(--bw) solid var(--ink);align-items:stretch; min-height:min(720px, calc(100svh - 190px))} .hero-head{display:grid;gap:20px;justify-items:start} .hero-foot{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;margin-top:auto} .slogan{display:inline-block;transform:rotate(-2deg);background:var(--surface);border:var(--bw) solid var(--ink);border-radius:999px;box-shadow:var(--sh-s);padding:8px 20px;font-weight:700;font-size:1.05rem} .hero .lede{max-width:46ch;font-size:1.2rem;line-height:1.4;color:var(--ink)} .hero-foot .cta{font-size:1.25rem;padding:18px 32px} /* Shown only to someone who already has answers in this browser. */ .hero-foot .resume{flex:1 0 100%;order:3;margin:0;max-width:62ch} .cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center} @media (max-width:620px){ header.hero{min-height:0;gap:24px} .hero-foot{gap:18px} .hero .lede{font-size:1.05rem;max-width:none} .hero-foot .cta{font-size:1.02rem;padding:16px 24px} } .cta{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:1.15rem;padding:16px 28px;min-height:48px;border-radius:14px;background:var(--ink);color:var(--on-ink);box-shadow:6px 6px 0 #fff;transition:transform .12s ease,box-shadow .12s ease} @media (hover:hover){.cta:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--shw)}} .cta::after{content:"→";font-weight:700} button.cta{font-family:inherit;border:0;cursor:pointer;line-height:1.2} .stickers{display:flex;flex-wrap:wrap;gap:20px 18px;align-items:center;margin:4px 0} .stickers a{color:var(--sticker-ink);display:inline-flex;align-items:center;min-height:48px;text-decoration:none;font-weight:700;font-size:clamp(1.05rem,1.9vw,1.55rem);padding:12px 26px;border:var(--bw) solid var(--ink);border-radius:999px;box-shadow:5px 5px 0 var(--shc);transition:transform .15s ease} @media (hover:hover){.stickers a:hover{transform:rotate(0) scale(1.06)!important}} .stickers a:nth-child(1){background:var(--p1);transform:rotate(-4deg)} .stickers a:nth-child(2){background:var(--p2);transform:rotate(3deg)} .stickers a:nth-child(3){background:var(--p3);transform:rotate(-2deg)} .stickers a:nth-child(4){background:var(--p4);transform:rotate(5deg)} .stickers a:nth-child(5){background:var(--p5);transform:rotate(-5deg)} .stickers a:nth-child(6){background:var(--p6);transform:rotate(2deg)} .stickers a:nth-child(7){background:var(--p7);transform:rotate(-3deg)} .stickers a:nth-child(8){background:var(--p8);transform:rotate(4deg)} .dot{width:12px;height:12px;border-radius:3px;border:2px solid var(--ink);display:inline-block} /* ---------- Layout ---------- */ .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:32px;align-items:start;scroll-margin-top:16px} @media (max-width:920px){.grid{grid-template-columns:minmax(0,1fr)}} .qs{display:grid;gap:24px;min-width:0} .section-label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 4px;flex-wrap:wrap;row-gap:4px} .section-label .eyebrow{background:var(--surface);border:2px solid var(--ink);border-radius:999px;padding:4px 14px;color:var(--ink)} .section-label>:last-child{white-space:nowrap} /* ---------- Part 2 cards ---------- */ .q{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:24px;box-shadow:var(--sh);padding:22px 22px 20px;display:grid;gap:14px} .qhead{display:flex;gap:12px;align-items:baseline} .qnum{font-family:var(--f-display);font-size:.95rem;min-width:2.2em} .q.done .qnum::after{content:" ✓"} .qhint{font-size:.9rem;color:var(--muted);margin-left:calc(2.2em + 12px);margin-top:-6px} .opts{display:flex;flex-wrap:wrap;gap:10px} .opt{font:inherit;font-weight:700;font-size:1rem;text-align:left;cursor:pointer;padding:9px 18px;min-height:44px;border-radius:999px;border:var(--bw) solid var(--ink);background:var(--surface);color:var(--ink);transition:transform .1s ease,background .15s} @media (hover:hover){.opt:hover:not([aria-pressed="true"]){background:var(--accent-soft)}} .opt[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)} .opt:active{transform:scale(.97)} .pgroups{display:grid;gap:18px} .pgroup{display:grid;gap:8px} .stack{display:grid;gap:24px} .addrow{display:flex;gap:10px;flex-wrap:wrap} .addrow input{font:inherit;font-weight:500;font-size:1rem;flex:1 1 200px;min-width:0;min-height:44px;padding:8px 14px;border-radius:12px;border:var(--bw) solid var(--ink);background:var(--surface);color:var(--ink)} /* ---------- Result panel ---------- */ aside.panel{position:sticky;top:calc(env(safe-area-inset-top, 0px) + 16px);display:grid;gap:20px;min-width:0} @media (max-width:920px){aside.panel{position:static}} .card{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:24px;box-shadow:var(--sh);padding:22px} .state{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:.9rem;font-weight:700} .tag{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:999px;border:2px solid var(--ink);background:var(--accent-soft);color:var(--ink)} .tag.live{background:var(--p3)} .progress{height:14px;background:var(--surface);border:var(--bw) solid var(--ink);border-radius:999px;overflow:hidden} .progress i{display:block;height:100%;background:var(--ink);width:0;transition:width .3s} .bars{display:grid;gap:12px;margin-top:16px} .row{display:grid;grid-template-columns:7.6em minmax(0,1fr) 3.4em;gap:10px;align-items:center} .row .name{font-weight:700;font-size:.95rem} .row .pct{font-weight:700;text-align:right;font-variant-numeric:tabular-nums} .track{height:20px;background:var(--surface);border:2px solid var(--ink);border-radius:999px;display:flex;overflow:hidden} .track i{display:block;height:100%;transition:width .45s cubic-bezier(.2,.7,.2,1)} .row.top .name{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:3px} .rough .track i{opacity:.7} .conf{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:.85rem;color:var(--muted)} .conf b{color:var(--ink)} .cbar{flex:1;height:10px;border-radius:999px;background:var(--surface);border:2px solid var(--ink);overflow:hidden;display:block} .cbar i{display:block;height:100%;background:var(--ink);transition:width .3s} .legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.8rem;font-weight:700;margin-top:16px} .legend span{display:inline-flex;gap:6px;align-items:center} .locked{border:var(--bw) dashed var(--ink);border-radius:20px;padding:16px;display:grid;gap:10px;font-size:.92rem;font-weight:700;background:var(--surface)} .lockdots{display:flex;gap:4px} .lockdots i{width:20px;height:10px;border-radius:999px;border:2px solid var(--ink);background:var(--surface);display:block;transition:background .2s} .lockdots i.a{background:var(--ink)} .top3{display:grid;gap:20px} .path{font-size:.95rem;padding:16px 18px;border-radius:20px;background:var(--ink);color:var(--on-ink);border:var(--bw) solid var(--ink)} .path b{font-family:var(--f-body);font-weight:700;color:var(--bg)} .pick{border:var(--bw) solid var(--ink);border-radius:24px;box-shadow:var(--sh);padding:20px;display:grid;gap:12px;background:var(--p4)} /* The model's own colour is set inline, so a model keeps one colour across the whole page. */ .pick .ph{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .pick>h3{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:1.6rem} .pick .num{font-family:var(--f-display);font-weight:800;font-size:3.4rem;line-height:.8} .pick .pctpill{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:999px;padding:3px 14px;font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums} .pick .rank{display:inline-block;font-size:.8rem;font-weight:700;background:var(--surface);border:2px solid var(--ink);border-radius:999px;padding:2px 12px} /* ---------- "Why is it #1?" · scan first, read only if you want to ---------- */ /* The three scores as bars instead of a sentence with numbers buried in it. */ .why .wbars{display:grid;gap:7px} .why .wbar{display:grid;grid-template-columns:7.4em minmax(0,1fr) 2.2em;gap:9px;align-items:center} .why .wl{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} .why .wt{height:13px;border:2px solid var(--ink);border-radius:999px;background:var(--surface);overflow:hidden;display:block} .why .wt i{display:block;height:100%;background:var(--ink)} .why .wv{font-size:.82rem;font-weight:700;text-align:right;font-variant-numeric:tabular-nums} .why .whygap{font-size:.86rem;line-height:1.4;color:var(--muted)} /* Every reason is one chip. The + / − glyph carries the meaning, so colour is never the only signal. */ .why .chips{display:flex;flex-wrap:wrap;gap:8px} .why .chip{display:inline-flex;align-items:flex-start;gap:6px;background:var(--surface);border:2px solid var(--ink);border-radius:999px;padding:5px 12px;font-weight:700;font-size:.76rem;line-height:1.3;text-wrap:balance} .why .chip.pro{background:var(--p3)} .why .chip.con{background:var(--p8)} .why .chip.skill{background:var(--accent-soft)} /* The two things that genuinely need sentences stay prose, at the bottom. */ .why .whyline{font-size:.86rem;line-height:1.45;border-top:2px solid var(--ink);padding-top:10px} .why .whyline b{display:block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:3px} .why .whyline em{font-style:normal;font-weight:700} .why .shapeline{display:flex;align-items:center;gap:9px;margin:0 0 7px;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} .why .shapeline svg{width:88px;height:30px;flex:none;background:var(--surface);border:2px solid var(--ink);border-radius:8px;padding:2px} .pick dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;margin:0;font-size:.9rem} .pick dt{font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;padding-top:3px} .pick dd{margin:0} .warnline{font-size:.88rem;font-weight:700;color:var(--warn);background:var(--surface);border:2px solid var(--ink);border-radius:12px;padding:8px 12px} .why{background:var(--surface);border:2px solid var(--ink);border-radius:16px;padding:2px 15px 14px;display:grid;gap:12px} .why summary{min-height:44px;align-items:center;cursor:pointer;font-weight:700;font-size:.95rem;list-style:none;display:flex;justify-content:space-between;gap:8px} .why summary::-webkit-details-marker{display:none} .why summary::after{content:"+";font-family:var(--f-display);font-size:1.2rem} .why[open] summary::after{content:"–"} .why h4{margin:8px 0 2px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700} .why ul{margin:0;padding-left:1.2em;display:grid;gap:6px;font-size:.9rem} .why li.pro::marker{content:"+ ";font-weight:700} .why li.con::marker{color:var(--warn);content:"− ";font-weight:700} .why li.idea::marker{content:"→ ";font-weight:700} .why .ctx{color:var(--muted)} .why .lead{font-size:.92rem} .resetcard{display:grid;gap:24px;padding:0;background:none;border:0;box-shadow:none} .histcard{display:grid;gap:10px} .histcard h3,.restartrow h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.45rem} .restartrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 24px} .restartrow>div{display:grid;gap:6px;max-width:46ch} .restartrow .cta{font-size:1.15rem} .restartrow .cta:disabled{opacity:.5;cursor:default;box-shadow:none} @media (max-width:520px){.restartrow .cta{width:100%;justify-content:center}} .resetrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .spread{justify-content:space-between} .flush{margin:0} .confirm{font-size:.92rem;font-weight:700} .hist{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:.9rem} .hist li{display:flex;justify-content:space-between;gap:10px;border-top:2px solid var(--ink);padding-top:6px} .hist .d{color:var(--muted);font-size:.8rem;white-space:nowrap} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .btn{font:inherit;font-size:.95rem;font-weight:700;cursor:pointer;padding:9px 18px;min-height:44px;border-radius:12px;border:var(--bw) solid var(--ink);background:var(--surface);color:var(--ink);box-shadow:var(--sh-s);transition:transform .12s ease,box-shadow .12s ease} @media (hover:hover){.btn:hover:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 var(--shc)}} .btn.primary{background:var(--ink);color:var(--on-ink)} .btn:disabled{opacity:.5;cursor:default;box-shadow:none} /* ---------- Speed round ---------- */ .round{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:28px;box-shadow:var(--sh);padding:26px;display:grid;gap:20px} .round-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} .round .situ{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.04;text-wrap:balance;min-height:2.1em} .ab{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media (max-width:620px){.ab{grid-template-columns:1fr}} .choice{font:inherit;cursor:pointer;text-align:left;border:var(--bw) solid var(--ink);color:var(--ink);border-radius:24px;box-shadow:var(--sh);padding:18px 20px;display:grid;gap:12px;min-height:150px;align-content:space-between;transition:transform .12s ease,box-shadow .12s ease} .choice:nth-child(1){background:var(--p1)} .choice:nth-child(2){background:var(--p7)} @media (hover:hover){.choice:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--shc)}} .choice:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--shc)} .choice .keyrow{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700;font-size:.88rem} .choice .keyrow .arrow{font-size:1.1rem} .choice .key{justify-self:start;font-size:.85rem;font-weight:700;background:var(--surface);border:2px solid var(--ink);border-radius:10px;padding:2px 12px} .keyshint{color:var(--muted);font-weight:500} @media (hover:none){.keyshint,.choice .keyrow .arrow{display:none}} .choice .txt{font-family:var(--f-display);font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.12;text-transform:uppercase} .choice.picked{background:var(--ink);color:var(--on-ink)} .choice.picked .key{color:var(--ink)} .round-foot{display:flex;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;align-items:center;font-size:.9rem;font-weight:700} .linkbtn{font:inherit;font-size:.95rem;font-weight:700;background:none;border:0;color:var(--ink);cursor:pointer;padding:10px 2px;min-height:44px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px} .linkbtn:disabled{opacity:.4;cursor:default} .dots{display:flex;flex-wrap:wrap;gap:4px} .dots i{width:12px;height:12px;border:2px solid var(--ink);border-radius:4px;background:var(--surface);display:block} .dots i.a{background:var(--ink)} .dots i.s{background:var(--signal)} .dots i.cur{outline:3px solid var(--ink);outline-offset:2px;background:var(--bg)} .toast{font-size:.9rem;font-weight:700;color:var(--warn);min-height:1.3em} /* Reduced motion: no transitions. The timer ring stands still (see .ring .rp below); its number keeps counting down. */ @media (prefers-reduced-motion: reduce){*{transition:none!important}html{scroll-behavior:auto!important}} /* ---------- Below the quiz ---------- */ .below{margin-top:64px;display:grid;grid-template-columns:minmax(0,1fr);gap:56px} .prose{max-width:68ch;display:grid;gap:14px;font-size:1.05rem;background:var(--surface);border:var(--bw) solid var(--ink);border-radius:24px;box-shadow:var(--sh);padding:26px} .prose .eyebrow{color:var(--ink)} .note{font-size:.9rem;color:var(--muted);max-width:70ch;margin-top:10px} .hero .note,.cta-row .note{color:var(--ink);margin-top:0;max-width:44ch} .models{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px;margin-top:20px} .models article{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:24px;box-shadow:var(--sh-s);padding:18px 20px;display:grid;gap:8px;align-content:start;scroll-margin-top:16px} .models article h3{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:1.25rem} .models article:nth-child(1){background:var(--p1)} .models article:nth-child(2){background:var(--p2)} .models article:nth-child(3){background:var(--p3)} .models article:nth-child(4){background:var(--p4)} .models article:nth-child(5){background:var(--p5)} .models article:nth-child(6){background:var(--p6)} .models article:nth-child(7){background:var(--p7)} .models article:nth-child(8){background:var(--p8)} .models p{font-size:.95rem;color:var(--ink)} .h-gap{margin-top:8px} /* ---------- Compared · one ranking per question instead of an 8x8 grid ---------- */ /* The chips are plain anchors: no JavaScript, no state, nothing is hidden from a crawler. */ /* Pick the models you are weighing up; one choice dims the other rows in all eight blocks at once. */ .modelfilter{margin-top:22px;background:var(--surface);border:var(--bw) solid var(--ink);border-radius:24px;box-shadow:var(--sh-s);padding:20px 22px;display:grid;gap:12px} .mf-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px} .mf-head h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.15rem} .mf-head .linkbtn[hidden]{display:none} .mf-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px} .mf-chips button{font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border:var(--bw) solid var(--ink);border-radius:999px;background:var(--c);color:var(--ink);box-shadow:var(--sh-s);transition:background .15s,color .15s,transform .12s ease,box-shadow .12s ease} @media (hover:hover){.mf-chips button:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--shc)}} .mf-chips button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--ink)} .mf-chips button.off{background:var(--track);color:var(--muted);box-shadow:none} /* Dimmed rows stay readable: muted ink that still clears 4.5:1, not a low opacity. */ .rank li.dim .rn,.rank li.dim .rv{color:#6E6758} .rank li.dim .rb{border-color:#6E6758} .rank li.dim .rb i{background:var(--track)!important} .rank li{transition:none} .rank li .rn,.rank li .rv,.rank li .rb i{transition:color .18s,background .18s} .crits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px;margin-top:22px} .crit{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:24px;box-shadow:var(--sh-s);padding:20px;display:grid;gap:14px;align-content:start;scroll-margin-top:24px} .crit h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.05rem;line-height:1.15} .rank{list-style:none;margin:0;padding:0;display:grid;gap:8px} .rank li{display:grid;grid-template-columns:7.4em minmax(0,1fr) 1.3em;gap:9px;align-items:center} .rank .rn{font-weight:700;font-size:.85rem;line-height:1.2} .rank .rb{height:15px;border:2px solid var(--ink);border-radius:999px;background:var(--surface);overflow:hidden;display:block} .rank .rb i{display:block;height:100%} .rank .rv{font-weight:700;font-size:.85rem;text-align:right;font-variant-numeric:tabular-nums} @media (max-width:420px){.rank li{grid-template-columns:6.6em minmax(0,1fr) 1.3em;gap:7px}.rank .rn{font-size:.8rem}} .levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px;margin-top:20px} .levels div{border-top:var(--bw) solid var(--ink);padding-top:12px;display:grid;gap:4px} .levels p{font-size:.95rem} .faq{display:grid;gap:14px;margin-top:20px;max-width:78ch} .faq details{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:20px;box-shadow:var(--sh-s);padding:6px 20px} .faq summary{cursor:pointer;font-weight:700;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--f-display);font-size:1.3rem} .faq details[open] summary::after{content:"–"} .faq details p{margin:0 0 14px} footer{border-top:var(--bw) solid var(--ink);margin-top:64px;padding-top:20px;font-size:.88rem;display:grid;gap:8px} footer nav{display:flex;gap:16px;flex-wrap:wrap} footer nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:700} /* ---------- 404 ---------- */ /* The hero on the quiz pages is viewport-tall and pins its CTA to the bottom edge. A 404 carries a third of that content, so the same rule leaves a hole in the middle: here the hero sizes to its own text, and the hero's bottom rule goes, otherwise it sits parallel to the footer's. */ body.e404 header.hero{min-height:0;gap:28px;padding-bottom:0;margin-bottom:0;border-bottom:0} body.e404 .hero-foot{margin-top:4px} body.e404 footer{margin-top:48px} /* ---------- Timing cards (kept for the optional #timing block) ---------- */ .timing{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-top:16px} .tcard{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:20px;padding:14px 16px;display:grid;gap:8px} .tcard .tt{display:flex;justify-content:space-between;align-items:baseline} .tbar,.sbar{height:8px;border-radius:999px;background:var(--track);overflow:hidden;display:block} .tbar i,.sbar i{display:block;height:100%;background:var(--ink)} .tcard p{font-size:.9rem} .subs{display:grid;gap:4px;font-size:.8rem} .sub{display:grid;grid-template-columns:10.5em minmax(0,1fr) 2em;gap:8px;align-items:center} .sub .mono{text-align:right} /* ---------- Skip link ---------- */ .skip{position:absolute;left:12px;top:-70px;z-index:20;background:var(--ink);color:var(--on-ink);padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none;transition:top .15s} .skip:focus{top:12px;outline:3px solid var(--bg);outline-offset:2px} /* ---------- Mobile ---------- */ @media (pointer: coarse){ .btn,.lang a{min-height:44px} } @media (max-width:920px){ .addrow input{font-size:16px} } @media (max-width:520px){ .wrap{padding-top:16px} .hero{gap:16px} .stickers{gap:10px 8px} .stickers a{font-size:.95rem;padding:6px 14px;min-height:44px} .round{padding:18px;border-radius:24px} .round .situ{min-height:0} .choice{min-height:110px;padding:16px} .q,.card{padding:18px;border-radius:20px} .row{grid-template-columns:6.6em minmax(0,1fr) 3.2em} .pick dl{grid-template-columns:minmax(0,1fr)} .pick dt{padding-top:6px} .sub{grid-template-columns:9em minmax(0,1fr) 2em} .qhint{margin-left:0;margin-top:0} .cta{width:100%;justify-content:center} } /* Grid items default to min-width:auto; min-width:0 lets wide children stay inside their box. */ .below>*,.grid>*,.qs>*,.panel>*,.stack>*,.round>*,.q>*{min-width:0} /* Display weight: real Archivo Black is one weight; the fallback (Arial Black / system bold) needs 800 to stay heavy. */ h1,h2,.round .situ,.choice .txt,.qnum,.pick .ph h3,.models article h3,.why summary::after,.faq summary::after{font-weight:800} h2.eyebrow{font-weight:700} @media (max-width:420px){ .topbar{gap:8px} .brand{font-size:1rem;gap:0} .tools{gap:8px} } @media (max-width:340px){.brand{font-size:.85rem}.topbar,.tools{gap:6px}} /* ===== Flow version: Start -> Speed round -> Facts -> Result (one view at a time) ===== */ body[data-flow] .stage{display:inline-flex;align-items:center;background:var(--surface);border:var(--bw) solid var(--ink);border-radius:999px;padding:6px 18px;font-weight:700;font-size:.95rem;box-shadow:var(--sh-s)} body[data-flow] .stage[hidden]{display:none} body[data-flow] .topbar{flex-wrap:wrap} @media (max-width:640px){body[data-flow] .stage{order:3;width:100%;justify-content:center}} body[data-flow] #viewTitle[hidden]{display:none} body[data-flow] main:focus,body[data-flow] #viewTitle:focus{outline:none} .resultnav,.facts-head,.flowcta{display:none} /* which view shows what */ body[data-view="start"] .grid{display:none} body[data-view="speed"] .hero,body[data-view="facts"] .hero,body[data-view="result"] .hero, body[data-view="speed"] .below,body[data-view="facts"] .below,body[data-view="result"] .below, body[data-view="speed"] footer{display:none} body[data-view="speed"] .panel,body[data-view="facts"] .panel, body[data-view="facts"] #roundBox,body[data-view="speed"] #factsBox,body[data-view="result"] #qs{display:none} body[data-view="speed"] .grid,body[data-view="facts"] .grid,body[data-view="result"] .grid{grid-template-columns:minmax(0,1fr)} body[data-view="speed"] .topbar,body[data-view="facts"] .topbar,body[data-view="result"] .topbar{margin-bottom:20px} body[data-view="speed"] .wrap{max-width:1280px} /* Speed round, like the design: segmented progress, ring timer, big question, two big answers */ body[data-view="speed"] .section-label{display:none} body[data-view="speed"] .round{background:transparent;border:0;box-shadow:none;padding:0;gap:22px;grid-template-columns:auto minmax(0,1fr); grid-template-areas:"top top" "ring situ" "ab ab" "toast toast" "foot foot"} body[data-view="speed"] .round.noring{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "situ" "ab" "toast" "foot"} body[data-view="speed"] .round>.round-top{grid-area:top;display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:8px} body[data-view="speed"] .round-top .eyebrow{justify-self:start} body[data-view="speed"] .dots{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:4px} body[data-view="speed"] .dots i{width:auto;height:14px;border-radius:6px} body[data-view="speed"] .dots i.cur{outline:0;background:#fff;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)} /* The question card: small counter, the question in display type, and the speed-bonus sticker hanging over the top edge like in the design. */ .qcard{position:relative;background:var(--surface);border:var(--bw) solid var(--ink);border-radius:28px;box-shadow:var(--sh);padding:26px 32px;display:grid;gap:8px;align-content:center} .qcard .qlabel{font-weight:700;font-size:.92rem;color:var(--muted)} .qcard .sbonus{position:absolute;top:-19px;right:24px;transform:rotate(3deg);background:var(--p1);border:var(--bw) solid var(--ink);border-radius:999px;padding:5px 16px;font-weight:700;font-size:.9rem;white-space:nowrap} body[data-view="speed"] .round>.qcard{grid-area:situ} body[data-view="speed"] .qcard .situ{min-height:0;font-size:clamp(1.4rem,3.6vw,3rem)} body[data-view="speed"] .round>.ab{grid-area:ab} body[data-view="speed"] .round>.toast{grid-area:toast;min-height:0} body[data-view="speed"] .round>.round-foot{grid-area:foot} body[data-view="speed"] .choice{min-height:clamp(170px,32vh,360px);padding:26px 30px;border-radius:32px} body[data-view="speed"] .choice .txt{font-size:clamp(1.3rem,3vw,2.6rem)} body[data-view="speed"] .choice{grid-template-columns:minmax(0,1fr);align-content:space-between} body[data-view="speed"] .choice .keyrow{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700;font-size:.92rem} body[data-view="speed"] .choice .arrow{font-size:1.2rem} .ring{grid-area:ring;position:relative;width:112px;height:112px;border:var(--bw) solid var(--ink);border-radius:50%;background:#fff;box-shadow:var(--sh);display:grid;place-items:center;align-self:center} .ring svg{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px)} .ring circle{fill:none;stroke-width:9} .ring .rt{stroke:var(--track)} .ring .rp{stroke:var(--ink);stroke-linecap:round} .ring b{position:relative;font-family:var(--f-display);font-weight:800;font-size:2.4rem;line-height:1} @media (max-width:620px){ body[data-view="speed"] .round{grid-template-columns:auto minmax(0,1fr);gap:16px} .ring{width:76px;height:76px}.ring b{font-size:1.6rem} .qcard{padding:16px 18px;border-radius:22px} body[data-view="speed"] .qcard .situ{font-size:1.25rem} .qcard .sbonus{display:none} body[data-view="speed"] .dots{gap:3px}body[data-view="speed"] .dots i{height:12px;border-width:2px;border-radius:5px} body[data-view="speed"] .choice{min-height:120px;padding:18px} } @media (prefers-reduced-motion:reduce){.ring .rp{transition:none!important}} body:not([data-flow]) .qcard{background:none;border:0;box-shadow:none;padding:0} /* Facts view */ /* Card headings in display type and the single-choice rows as label + detail, like artboard 3. */ body[data-view="facts"] .q{padding:26px} body[data-view="facts"] .q .qhead h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.45rem;line-height:1.05} body[data-view="facts"] .q .qhead{align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 16px} body[data-view="facts"] .q .qnum{display:none} body[data-view="facts"] .q .qhint{margin-left:0;margin-top:0} body[data-view="facts"] .q.done .qhead h3::after{content:" ✓";font-family:var(--f-body);font-size:1rem} .opts.rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:12px} .opt.wide{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-radius:16px;padding:14px 18px;font-size:1.05rem;text-align:left} .opt.wide .sub{font-weight:500;font-size:.92rem;white-space:nowrap} .opt.wide.stacked{flex-direction:column;align-items:flex-start;gap:3px} .opt.wide.stacked .sub{white-space:normal} .opt[aria-pressed="true"] .sub{color:var(--on-ink)} body[data-view="facts"] .facts-head{display:grid;gap:6px;justify-items:start} body[data-view="facts"] .facts-head h2{font-size:clamp(2rem,5vw,3.4rem);margin:0} body[data-view="facts"] .facts-head p{margin:0;max-width:60ch;font-size:1.1rem} body[data-view="facts"] .stack{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start} body[data-view="facts"] .stack>*{grid-column:1/-1} body[data-view="facts"] .stack>.q.half{grid-column:auto} @media (max-width:760px){body[data-view="facts"] .stack{grid-template-columns:minmax(0,1fr)}} body[data-view="facts"] .flowcta{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;border-top:var(--bw) solid var(--ink);padding-top:20px} @media (max-width:520px){body[data-view="facts"] .flowcta .cta{width:100%;justify-content:center}} /* Result view */ body[data-view="result"] aside.panel{position:static;display:flex;flex-direction:column;gap:28px} body[data-view="result"] .result-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;order:-2} body[data-view="result"] .resultnav{display:flex;flex-wrap:wrap;gap:12px;order:-1} body[data-view="result"] .top3{order:1} body[data-view="result"] #resultCard{order:2} body[data-view="result"] .weights{order:3} body[data-view="result"] .share{order:4} body[data-view="result"] .feedback{order:5} body[data-view="result"] .resetcard{order:6} /* Result head: the verdict as a headline, accuracy as its own small card (artboard 4). */ .result-head[hidden]{display:none} .result-head .verdict{flex:1 1 520px;display:grid;gap:16px;justify-items:start} .result-head h2.big{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,6.4vw,5.4rem);line-height:.94;letter-spacing:-.02em;text-wrap:balance} .accuracy{flex:1 1 280px;max-width:360px;background:var(--surface);border:var(--bw) solid var(--ink);border-radius:24px;box-shadow:var(--sh);padding:20px 24px;display:grid;gap:10px} .accuracy .arow{display:flex;justify-content:space-between;gap:10px;font-weight:700} .accuracy .abar{height:18px;border:var(--bw) solid var(--ink);border-radius:999px;background:var(--surface);overflow:hidden;display:block} .accuracy .abar i{display:block;height:100%;background:var(--ink)} .accuracy .anote{font-size:.88rem;color:var(--muted)} /* Top 3: big rank numeral, percentage as a pill, warning in its own white box. */ body[data-view="result"] .pick{padding:26px;box-shadow:8px 8px 0 var(--shc)} body[data-view="result"] .pick .ph{align-items:flex-start} body[data-view="result"] .pick .num{font-family:var(--f-display);font-weight:800;font-size:4.4rem;line-height:.8} body[data-view="result"] .pick .pctpill{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:999px;padding:3px 14px;font-weight:700;font-size:1.15rem;font-variant-numeric:tabular-nums} body[data-view="result"] .pick .ph h3{font-size:1.9rem;margin-top:0} body[data-view="result"] .pick>h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.9rem} body[data-view="result"] .pick .warnline{border-width:var(--bw);border-radius:14px;padding:10px 14px} /* "Your path" as a black band, not a note inside the cards. */ body[data-view="result"] .path{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;border-radius:28px;padding:26px 30px;font-size:1rem} body[data-view="result"] .path h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.45rem;flex:1 1 160px;color:var(--on-ink)} body[data-view="result"] .path .steps{display:flex;flex-wrap:wrap;align-items:center;gap:14px} body[data-view="result"] .path .steps span.p{border:var(--bw) solid var(--surface);border-radius:999px;padding:9px 22px;font-weight:700;font-size:1.1rem;color:var(--ink)} body[data-view="result"] .path .steps .ar{color:var(--surface);font-size:1.4rem;line-height:1} body[data-view="result"] .path p{flex:1 1 260px;color:var(--track);line-height:1.45;margin:0} /* All 8 models: wider bars, and each row opens into a one-line definition, so nobody has to leave the result to remember what "agency" meant. */ /* The weights stripe below is the legend now, and the verdict card carries the progress. */ body[data-view="result"] #resultCard .state,body[data-view="result"] #resultCard .progress,body[data-view="result"] #resultCard .conf,body[data-view="result"] #resultCard .legend{display:none} body[data-view="result"] #resultCard>h2{margin-top:0!important;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.45rem} body[data-view="result"] .bars{gap:10px} body[data-view="result"] .modelrow{border-radius:16px} body[data-view="result"] .modelrow>summary{list-style:none;cursor:pointer;padding:4px 0} body[data-view="result"] .modelrow>summary::-webkit-details-marker{display:none} body[data-view="result"] .modelrow .row{grid-template-columns:9.4em minmax(0,1fr) 3.6em 1.4em} body[data-view="result"] .modelrow .track{height:26px} body[data-view="result"] .modelrow .chev{font-family:var(--f-display);font-weight:800;font-size:1.2rem;text-align:center} body[data-view="result"] .modelrow[open] .chev::after{content:"–"} body[data-view="result"] .modelrow .chev::after{content:"+"} body[data-view="result"] .modelrow .def{font-size:.93rem;margin:2px 0 10px;padding-left:calc(9.4em + 10px);color:var(--ink)} body[data-view="result"] .modelrow .def b{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} @media (max-width:620px){ body[data-view="result"] .modelrow .row{grid-template-columns:minmax(0,1fr) 3.4em 1.4em;grid-template-areas:"name name name" "bar pct chev"} body[data-view="result"] .modelrow .row .name{grid-area:name} body[data-view="result"] .modelrow .row .track{grid-area:bar} body[data-view="result"] .modelrow .row .pct{grid-area:pct} body[data-view="result"] .modelrow .row .chev{grid-area:chev} body[data-view="result"] .modelrow .def{padding-left:0} } /* How it is weighted: the five factors as one stripe, replacing the colour legend. */ .weights[hidden]{display:none} .weights h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.45rem} .weights .stripe{display:flex;border:var(--bw) solid var(--ink);border-radius:16px;overflow:hidden;margin-top:16px;font-weight:700;font-size:.9rem} .weights .stripe span{padding:13px 8px;text-align:center;border-right:var(--bw) solid var(--ink);font-variant-numeric:tabular-nums} .weights .stripe span:last-child{border-right:0} .weights .wlabels{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-size:.92rem;font-weight:700} .weights .wlabels span{display:inline-flex;align-items:center;gap:8px} .weights .note{margin-top:12px} @media (max-width:620px){.weights .stripe{font-size:.78rem}.weights .stripe span{padding:12px 2px}} @media (min-width:1000px){ body[data-view="result"] .top3{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start} body[data-view="result"] .top3>*:not(article){grid-column:1/-1} body[data-view="result"] .pick dl{grid-template-columns:minmax(0,1fr)} body[data-view="result"] .pick dt{padding-top:6px} } /* Share (variant S3): the preview is the real canvas, scaled down with CSS, so what you see is literally the file you get. No second rendering path to drift out of sync. */ .share[hidden]{display:none} .share{display:grid;gap:16px} .share h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.45rem} .sharerow{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start} .sharepreview{flex:0 0 auto;width:136px;border:var(--bw) solid var(--ink);border-radius:14px; box-shadow:var(--sh-s);overflow:hidden;background:var(--bg);line-height:0} .sharepreview canvas{display:block;width:100%;height:auto} .sharemeta{flex:1 1 158px;min-width:0;display:grid;gap:8px;align-content:start} .sharemeta-h{font-weight:700} .sharebtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px} .sharebtns .btn{display:inline-flex;align-items:center;gap:9px} .bico{width:17px;height:17px;flex:none} #shareMsg:empty{display:none} @media (max-width:420px){.sharepreview{width:104px}} /* Bottleneck / how you win / first 30 days, under each of the eight model cards. Written into the HTML by build-seo.mjs so it is readable (and indexable) without the quiz. */ /* Label above value, never beside it: these sit in a four-up card grid, so the cards are narrow at every viewport and a label column would shear the text into ribbons. */ .mfacts{margin:14px 0 0;padding-top:12px;border-top:2px solid var(--ink);font-size:.9rem} .mfacts dt{font-weight:700;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .mfacts dd{margin:1px 0 10px;overflow-wrap:break-word} .mfacts dd:last-child{margin-bottom:0} /* The market-timing cards; .tcard itself is styled further up. */ .timing{display:grid;gap:16px;margin-top:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))} .timing .tcard h3{font-size:1.05rem} .timing .tcard .mono{font-variant-numeric:tabular-nums;font-weight:700} .timing .sub{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) 2.2em;align-items:center;gap:8px} .timing .sub .mono{text-align:right;font-size:.75rem} /* ---------- Pill switch: one control for the timer, used in the intro and in the round ---------- A real