/* Homepage hero match card (see lib/hero-match-card.js). */
/* The static homepage only ships DM Sans at weight 500, so heavier text in the card was a browser-made fake bold.
   This is the site's own variable file, under its own name so the rest of the homepage is untouched. */
@font-face{font-family:"DM Sans Card";font-style:normal;font-weight:100 1000;font-display:swap;src:url(/fonts/providers/dm-sans-latin.woff2) format("woff2")}
.fzm{
  --bg:#fff;--fg:#10152e;--dim:#626977;--line:#e6e2d8;--chip:#d5d0c3;--amber:#c98a00;--idle:rgba(16,21,46,.1);
  --dot:rgba(16,21,46,.38);--hollow:rgba(16,21,46,.3);--yes:#17685e;--skel:#f5f2eb;--seg:#e6e2d8;--seg-on:#17685e;
  --f-bg:#10152e;--f-fg:#fff;--f-dim:rgba(255,255,255,.75);--plate:#e6e2d8;
  box-sizing:border-box;position:relative;width:100%;overflow:hidden;border-radius:16px;background:var(--bg);color:var(--fg);font-family:"DM Sans Card","DM Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left
}
.fzm *{box-sizing:border-box}
/* contain: the nowrap chips and the logo strip must not widen the hero column on phones */
/* min-height: the card (643px) plus the logo strip, reserved so the hero does not jump when the script builds it */
[data-fz-match-card]{position:relative;width:100%;max-width:600px;min-width:0;min-height:732px;margin-inline:auto;contain:inline-size}

/* quiet logo strip under the card */
.fzm-strip{margin-top:18px;font-family:"DM Sans Card","DM Sans",system-ui,sans-serif}
.fzm-strip p{margin:0 0 10px;font-size:13px;color:rgba(255,255,255,.65)}
.fzm-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fzm-marquee>div{display:flex;gap:10px;width:max-content;animation:fzm-marquee 60s linear infinite}
.fzm-marquee span{flex:none;overflow:hidden;width:102px;height:41px;border-radius:8px;background:rgba(255,255,255,.92)}
.fzm-marquee img{display:block;width:100%;height:100%;object-fit:contain}
@keyframes fzm-marquee{to{transform:translateX(calc(-50% - 5px))}}
.fzm p{margin:0}
@keyframes fzm-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fzm-fill{from{width:0}to{width:100%}}

/* which example is playing, and how long until the next one */
.fzm-segs{display:flex;gap:6px;padding:10px 22px 0}
.fzm-segs button{flex:1;height:24px;padding:10px 0;border:0;background:none;cursor:pointer}
.fzm-segs button:focus-visible{outline:2px solid var(--seg-on);outline-offset:2px;border-radius:4px}
.fzm-segs span{display:block;overflow:hidden;height:4px;border-radius:4px;background:var(--seg)}
.fzm-segs i{display:block;width:0;height:100%;border-radius:4px;background:var(--seg-on)}
.fzm-segs .done i{width:100%}
.fzm-segs .now i{animation:fzm-fill var(--cycle) linear both}

.fzm-pad{padding:10px 22px 0;transition:opacity .25s}
.fzm.leaving .fzm-pad{opacity:0}

/* steps: the one being worked on is lit, the ones still to come are dimmed */
.fzm-step{display:flex;gap:14px;opacity:.38;transition:opacity .4s}
.s1 .fzm-step:nth-child(1),.s2 .fzm-step:nth-child(-n+2),.s3 .fzm-step{opacity:1}
.fzm-rail{display:flex;flex:none;flex-direction:column;align-items:center;gap:6px;width:28px}
.fzm-num{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--chip);border-radius:999px;font-size:13px;font-weight:600;transition:background-color .3s,border-color .3s,color .3s}
.s1:not(.s2) .fzm-step:nth-child(1) .fzm-num,.s2:not(.s3) .fzm-step:nth-child(2) .fzm-num,.s3 .fzm-step:nth-child(3) .fzm-num{border-color:#c8ff73;background:#c8ff73;color:#10152e}
.fzm-line{flex:1;width:1px;background:var(--line);transform:scaleY(0);transform-origin:top;transition:transform .5s}
.s2 .fzm-step:nth-child(1) .fzm-line,.s3 .fzm-step:nth-child(2) .fzm-line{transform:none}
.fzm-main{flex:1;min-width:0;padding-bottom:24px}
.fzm-main.end{padding-bottom:14px}
.fzm-h{overflow:hidden;font-size:17px;font-weight:600;line-height:28px;letter-spacing:-.02em;white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums}

/* 1 setup */
.fzm-top{display:flex;align-items:center;justify-content:space-between;gap:12px;height:28px}
.fzm-label{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.fzm-title{display:flex;align-items:center;gap:12px;height:26px;margin-top:6px;font-size:20px;font-weight:600;letter-spacing:-.03em}
.fzm-title span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fzm-title img{flex:none;width:32px;height:24px;border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px var(--chip)}
.fzm-chips{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:center;gap:8px;min-height:31px;margin-top:10px}
.fzm-chip{display:inline-flex;align-items:center;gap:8px;height:31px;padding:0 12px;border:1px solid var(--chip);border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap}
.fzm-note{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--dim);white-space:nowrap}
.fzm-amber{flex:none;width:7px;height:7px;border-radius:999px;background:var(--amber)}
.s1 .fzm-title,.s1 .fzm-chips>*{animation:fzm-rise .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--n,0)*110ms)}

/* 2 check: 100 dots */
.fzm-dots{display:grid;grid-template-columns:repeat(25,minmax(0,1fr));row-gap:7px;margin-top:10px}
.fzm-dots span{display:grid;place-items:center;height:9px}
.fzm-dots i{width:7px;height:7px;border:1.5px solid transparent;border-radius:999px;background:var(--idle);transition:transform .25s,background-color .25s,border-color .3s}
.fzm-dots i.on{background:var(--dot)}
.checked .fzm-dots i{background:var(--dot);transition-delay:calc(var(--i)*5ms)}
.checked .fzm-dots i.out{border-color:var(--hollow);background:transparent}
.checked .fzm-dots i.yes{background:var(--yes);transform:scale(1.5)}
.fzm-legend{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px 22px;min-height:21px;margin-top:12px;font-size:14px;line-height:21px;color:var(--dim);opacity:0;transition:opacity .4s}
.checked .fzm-legend{opacity:1}
.fzm-legend>span{display:inline-flex;align-items:baseline;gap:8px}
.fzm-legend b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.fzm-key-out{flex:none;width:8px;height:8px;border:1.5px solid var(--hollow);border-radius:999px}
.fzm-key-yes{flex:none;width:10px;height:10px;border-radius:999px;background:var(--yes)}

/* 3 results: placeholders until the step is reached */
.fzm-rows{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.fzm-row{display:grid;grid-template-columns:112px minmax(0,1fr) auto;align-items:center;gap:14px;height:72px;padding:0 12px;border-radius:12px;background:var(--skel)}
.fzm-row>*{visibility:hidden}
.s3 .fzm-row{background:transparent;animation:fzm-rise .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--r)*150ms)}
.s3 .fzm-row>*{visibility:visible}
.s3 .fzm-row.first{background:var(--f-bg);color:var(--f-fg)}
.fzm-logo{overflow:hidden;width:100%;aspect-ratio:5/2;border:1px solid var(--plate);border-radius:8px;background:#fff}
.fzm-row.first .fzm-logo{border-color:#e6e2d8}
.fzm-logo img{display:block;width:100%;height:100%;object-fit:contain}
.fzm-name{display:flex;align-items:baseline;gap:10px;font-size:16.5px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.fzm-why{display:-webkit-box;overflow:hidden;margin-top:2px;font-size:13.5px;line-height:1.35;color:var(--dim);-webkit-box-orient:vertical;-webkit-line-clamp:2}
.fzm-row.first .fzm-why{color:var(--f-dim)}
.fzm-pill{padding:6px 12px;border-radius:999px;background:#e6f2ea;color:#1f6b4a;font-size:13px;font-weight:600;white-space:nowrap}
.fzm-pill.review{background:#fbf1dc;color:#8a5a00}

.fzm-foot{padding:10px 22px 11px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}

@media (max-width:520px){
  [data-fz-match-card]{min-height:979px}
  .fzm-segs,.fzm-pad{padding-inline:16px}
  .fzm-foot{padding-inline:16px}
  .fzm-title{align-items:flex-start;height:44px;font-size:17px;line-height:22px}
  .fzm-title span{display:-webkit-box;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .fzm-chips{min-height:70px}
  .fzm-legend{min-height:75px}
  .fzm-dots{grid-template-columns:repeat(20,minmax(0,1fr))}
  .fzm-row{grid-template-columns:76px minmax(0,1fr);gap:4px 10px;height:112px}
  .fzm-pill{grid-column:2;justify-self:start;padding:3px 10px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .fzm *,.fzm-marquee>div{animation:none!important;transition:none!important}
  .fzm-segs .now i{width:100%}
}