/* blindeye cards (x-cards.js). 900×1200, 56 px margins on every side, the photo fills the card.
   Colours come from the photo: --fg/--fg2 text, --pl plates (0.9), --acc/--accA accent, --g gradient colour. */
.ew-card.xk{padding:0;overflow:hidden;font-family:Arial,sans-serif}
.xk .ew-card-photo{position:absolute;inset:0;display:flex}
.xk .ew-card-photo .ew-img{flex:1;background:transparent}
.xk .ew-card-photo .ew-img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;mix-blend-mode:normal;filter:none}
.xk .ew-card-photo .ew-img-empty{margin:56px;border-radius:32px;background:rgba(127,127,127,.12)}
.xk>*:not(.ew-card-photo){position:absolute;z-index:2}

/* gradients for text that sits on the photo: from the gradient colour at 0.9 to transparent */
.xk .xk-shade{left:0;right:0;z-index:1;pointer-events:none;opacity:var(--ga,1)}
.xk .xk-shade-t{top:0;height:460px;background:linear-gradient(rgba(var(--g),.9) 0,rgba(var(--g),.6) 45%,rgba(var(--g),0) 100%)}
.xk .xk-shade-b{bottom:0;height:480px;background:linear-gradient(0deg,rgba(var(--g),.9) 0,rgba(var(--g),.7) 40%,rgba(var(--g),0) 100%)}

/* title block */
.xk .xk-top{top:56px;left:56px;right:56px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;color:var(--fg)}
.xk .xk-top.xk-c{align-items:center;text-align:center}
.xk .xk-top .xk-badge{display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:24px;background:var(--accA);color:var(--accFg);font:700 24px/1 Arial,sans-serif;white-space:nowrap}
.xk .xk-h{margin:0;max-width:100%;font:700 76px/1.04 var(--hf);letter-spacing:-.025em;color:var(--fg);text-wrap:balance;overflow-wrap:normal}
.xk .xk-sub{margin:0;max-width:720px;font:500 32px/1.3 Arial,sans-serif;color:var(--fg2);text-wrap:balance}

/* plates */
.xk .xk-pl{background:var(--pl);color:var(--fg);border-radius:32px}
.xk .xk-acc{background:var(--accA);color:var(--accFg);border-radius:32px}
.xk .xk-ic{display:flex;align-items:center;justify-content:center;flex:none;width:72px;height:72px;border-radius:50%;background:var(--acc);color:var(--accFg)}
.xk .xk-ic .ew-ic,.xk .xk-ic svg{width:36px;height:36px}
.xk .xk-ic>.ew-ic{width:50%;height:50%}.xk .xk-ic>.ew-ic>svg{width:100%;height:100%} /* the icon is half its circle at any circle size */
.xk b,.xk span:not(.ew-ic),.xk strong{display:block;min-width:0}
.xk .xk-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 20px;text-align:center;overflow:hidden}
.xk .xk-tile>b{max-width:100%;font:700 30px/1.15 Arial,sans-serif;white-space:nowrap}
.xk .xk-tile>span{max-width:100%;font:500 22px/1.3 Arial,sans-serif;color:var(--fg2);text-wrap:balance} /* plates are top-aligned: icons and titles stay on one level */
.xk .xk-line{display:flex;align-items:center;gap:20px;padding:20px 28px 20px 20px;overflow:hidden}
.xk .xk-line .xk-ic{width:64px;height:64px}
.xk .xk-line .xk-ic svg{width:32px;height:32px}
.xk .xk-lt{display:flex;flex-direction:column;gap:4px;min-width:0}
.xk .xk-lt>b{font:700 28px/1.15 Arial,sans-serif;white-space:nowrap}
.xk .xk-lt>span{font:500 21px/1.3 Arial,sans-serif;color:var(--fg2);white-space:nowrap}

/* top: a row of plates at the bottom; steps use it too */
.xk .xk-row{left:56px;right:56px;bottom:56px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:repeat(3,auto);gap:12px 20px}
/* rows of one grid across the plates: icons, titles and texts line up even when one title takes two lines */
.xk .xk-row>.xk-tile{grid-row:span 3;display:grid;grid-template-rows:subgrid;justify-items:center;align-items:center;align-content:start} /* a shorter title or text sits in the middle of its row */
.xk .xk-sn{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--acc);color:var(--accFg);font:700 36px/1 Arial,sans-serif;font-style:normal}

/* left: a column of points */
.xk .xk-col{left:56px;bottom:56px;max-width:440px;display:flex;flex-direction:column;gap:16px} /* as wide as the longest point, all points equal */

/* right: big numbers */
.xk .xk-nums{right:56px;bottom:56px;width:300px;display:flex;flex-direction:column;gap:16px}
.xk .xk-num{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 20px;border-radius:32px;text-align:center;overflow:hidden}
.xk .xk-num>b{max-width:100%;font:700 48px/1.05 var(--hf);letter-spacing:-.02em;white-space:nowrap}
.xk .xk-num>span{max-width:100%;font:500 22px/1.3 Arial,sans-serif;opacity:.85;white-space:nowrap}

/* bignum: two points + one big number */
.xk .xk-bn{left:56px;right:56px;bottom:56px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:stretch}
.xk .xk-bn.xk-bn1{grid-template-columns:minmax(0,1fr)}
.xk .xk-pair{display:flex;flex-direction:column;gap:20px;min-width:0}
.xk .xk-pair .xk-line{flex:1}
.xk .xk-big{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:28px 20px;text-align:center;overflow:hidden}
.xk .xk-big>b{max-width:100%;font:700 96px/1.05 var(--hf);letter-spacing:-.03em;white-space:nowrap}
.xk .xk-big>span{max-width:100%;font:600 24px/1.25 Arial,sans-serif;white-space:nowrap}
.xk .xk-big>b small{font-size:.42em;letter-spacing:0}

/* icons: round icons with captions on the bottom gradient */
.xk .xk-icons{left:56px;right:56px;bottom:56px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:20px}
.xk .xk-ico{display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 12px;border-radius:32px;text-align:center;overflow:hidden}
.xk .xk-ico .xk-ic{width:96px;height:96px}
.xk .xk-ico .xk-ic svg{width:46px;height:46px}
.xk .xk-ico>b{max-width:100%;font:700 26px/1.2 Arial,sans-serif;white-space:nowrap}

/* corners: two plates on each side */
.xk .xk-side{top:420px;bottom:56px;width:236px;display:flex;flex-direction:column;justify-content:center;gap:20px}
.xk .xk-side-l{left:56px}.xk .xk-side-r{right:56px}
.xk .xk-side .xk-tile{padding:28px 16px}
.xk .xk-side .xk-tile>b{font-size:26px}

/* clean: a small stat plate centred at the bottom */
.xk .xk-pillw{left:56px;right:56px;bottom:56px;display:flex;justify-content:center}
.xk .xk-pill{display:flex;align-items:baseline;gap:12px;padding:20px 32px;border-radius:32px;max-width:100%;overflow:hidden}
.xk .xk-pill>b{font:700 48px/1 var(--hf);white-space:nowrap}
.xk .xk-pill>span{font:600 24px/1.2 Arial,sans-serif;white-space:nowrap}

/* specs: a table */
.xk .xk-table{left:56px;right:56px;bottom:56px;display:flex;flex-direction:column;padding:12px 36px}
.xk .xk-tr{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:2px solid rgba(127,127,127,.25);overflow:hidden}
.xk .xk-tr:last-child{border-bottom:0}
.xk .xk-tr>span{font:500 26px/1.25 Arial,sans-serif;color:var(--fg2);white-space:nowrap}
.xk .xk-tr>b{font:700 28px/1.25 Arial,sans-serif;white-space:nowrap;text-align:right}

/* dims: measuring lines with value plates */
.xk .xk-dim{display:flex;align-items:center;justify-content:center}
.xk .xk-dim i{position:absolute;background:var(--acc)}
.xk .xk-dim-h{right:56px;top:400px;bottom:240px;width:120px}
.xk .xk-dim-h i{top:0;bottom:0;left:50%;width:4px;margin-left:-2px;border-top:4px solid var(--acc)}
.xk .xk-dim-h i::before,.xk .xk-dim-h i::after{content:"";position:absolute;left:-18px;width:40px;height:4px;background:var(--acc)}
.xk .xk-dim-h i::before{top:-4px}.xk .xk-dim-h i::after{bottom:0}
.xk .xk-dim-w{left:56px;right:232px;bottom:96px;height:120px}
.xk .xk-dim-w i{left:0;right:0;top:50%;height:4px;margin-top:-2px}
.xk .xk-dim-w i::before,.xk .xk-dim-w i::after{content:"";position:absolute;top:-18px;width:4px;height:40px;background:var(--acc)}
.xk .xk-dim-w i::before{left:0}.xk .xk-dim-w i::after{right:0}
.xk .xk-dimv{position:relative;padding:14px 24px;border-radius:24px}
.xk .xk-dimv b,.xk .xk-dimd b{font:700 34px/1 Arial,sans-serif;white-space:nowrap}
.xk .xk-top .xk-dimd{position:static;padding:14px 24px;border-radius:24px}

/* kit: a checklist */
.xk .xk-kit{left:56px;right:56px;bottom:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;padding:32px 36px}
.xk .xk-ki{display:flex;align-items:center;gap:16px;min-width:0;overflow:hidden}
.xk .xk-ki .xk-ic{width:48px;height:48px}
.xk .xk-ki .xk-ic svg{width:26px;height:26px}
.xk .xk-ki>span{font:600 26px/1.2 Arial,sans-serif;white-space:nowrap}

/* ===== poster layouts (x-cards.js, sreg): one big word, big numbers, plates over the photo ===== */
.xp .xp-kick{top:64px;left:56px;right:56px;font:600 26px/1.2 Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp .xp-c{text-align:center}
.xp .xp-word{top:116px;left:56px;right:56px;font:700 200px/1 "Arial Black",Arial,sans-serif;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap;color:var(--fg);overflow:hidden}
.xp-dark .xp-word{color:rgba(255,255,255,.94)}
.xp .xp-word.xp-l{top:64px;font:700 120px/1 Arial,sans-serif;letter-spacing:-.04em;text-transform:none}
.xpl-ring .xp-word.xp-l,.xp .xp-kick+.xp-word.xp-l{top:120px}
.xp .xp-word.xp-word-m{top:116px;font:700 128px/1 Arial,sans-serif;letter-spacing:-.04em;text-transform:none}
.xp .xp-sub{left:56px;max-width:520px;font:500 30px/1.3 Arial,sans-serif;color:var(--fg2);text-wrap:balance}
.xpl-cards .xp-sub{top:200px}
/* numbers: big value + small unit, caption under it */
.xp .xp-num>b{display:flex;align-items:baseline;gap:6px;font:700 72px/1.2 Arial,sans-serif;letter-spacing:-.03em;white-space:nowrap}
.xp .xp-num>b small{font:700 30px/1 Arial,sans-serif;letter-spacing:0}
.xp .xp-num .xp-l{margin-top:6px;font:500 22px/1.25 Arial,sans-serif;color:var(--fg2);text-wrap:balance}
.xp .xp-row{left:56px;right:56px;bottom:56px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:20px 0;border-radius:32px;background:var(--pl)}
.xp .xp-row>.xp-num{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 16px;overflow:hidden} /* room for the glyphs above the line box */
.xp .xp-row>.xp-num+.xp-num{border-left:2px solid var(--plb)}
/* number cards */
.xp .xp-col{left:56px;top:380px;width:260px;display:flex;flex-direction:column;gap:20px}
.xp .xp-card{display:flex;flex-direction:column;padding:28px 32px;border-radius:28px;background:var(--pl);box-shadow:0 12px 32px rgba(0,0,0,.08),0 0 0 2px var(--plb);overflow:hidden}
.xp .xp-card>b{font-size:64px}
.xp .xp-card .xp-l,.xp .xp-row .xp-l{margin-top:6px;line-height:1.15}
/* the caption sits close to its number (the line box is the glyph height, so nothing overlaps) */
.xp .xp-title{left:56px;right:56px;margin:0;font:700 96px/1.02 Arial,sans-serif;letter-spacing:-.02em;text-transform:uppercase;color:var(--fg);text-wrap:balance}
/* web page */
.xpl-ui .xp-title{top:64px;font:700 84px/1 Arial,sans-serif;letter-spacing:-.035em;text-transform:none}
.xpl-ui .xp-head{top:64px;left:56px;right:56px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.xpl-ui .xp-head>.xp-chips{margin-top:12px}
.xp .xp-chips{left:56px;top:328px;display:flex;gap:12px}
.xp .xp-chip{display:flex;align-items:baseline;gap:10px;height:64px;padding:0 26px;border-radius:32px;background:var(--acc);color:var(--accFg);white-space:nowrap}
.xp .xp-chip+.xp-chip{background:var(--pl);color:var(--fg);box-shadow:inset 0 0 0 2px var(--plb)} /* the second chip sits on the photo too: it needs its plate */
.xp .xp-chip b{font:700 30px/64px Arial,sans-serif}.xp .xp-chip span{font:500 22px/64px Arial,sans-serif;opacity:.85}
.xp .xp-plates{left:56px;bottom:64px;width:270px;display:flex;flex-direction:column;gap:14px}
.xp .xp-plate{display:flex;align-items:center;gap:16px;padding:16px 20px 16px 16px;border-radius:24px;background:var(--pl);box-shadow:0 10px 28px rgba(0,0,0,.08);overflow:hidden}
.xp .xp-plate b{font:600 24px/1.2 Arial,sans-serif;text-wrap:balance}
.xp .xp-tick{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--acc);color:var(--accFg)}
.xp .xp-tick .xk-ic{width:48px;height:48px;background:none}.xp .xp-tick svg{width:26px;height:26px}
/* podium */
.xp .xp-seal{left:56px;top:330px;width:260px;height:260px;border-radius:50%;background:var(--pl);color:var(--fg)}
.xp .xp-seal svg{position:absolute;inset:0;width:260px;height:260px}
.xp .xp-sealin{position:absolute;inset:50px;box-sizing:border-box;padding:0 16px;border-radius:50%;background:var(--acc);color:var(--accFg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.xp .xp-sealin>b{max-width:100%;font-size:44px}.xp .xp-sealin>b small{font-size:20px}.xp .xp-sealin .xp-l{margin-top:4px;line-height:1.1;font-size:16px;color:inherit;opacity:.85}
.xp .xp-tags{left:56px;right:56px;bottom:56px;display:flex;justify-content:center;gap:12px}
.xp .xp-tag{height:56px;line-height:56px;padding:0 26px;border-radius:28px;background:var(--pl);color:var(--fg);font:600 24px/56px Arial,sans-serif;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.08);overflow:hidden}
.xp .xp-tag:first-child{background:var(--accA);color:var(--accFg)}
/* ring + list */
.xp .xp-ring{left:56px;top:330px;width:260px;height:260px;border-radius:50%;background:var(--pl);color:var(--acc)}
.xp .xp-ring svg{position:absolute;inset:0;width:260px;height:260px}
.xp .xp-ringin{position:absolute;inset:36px;box-sizing:border-box;padding:0 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--fg)}
.xp .xp-ringin>b{max-width:100%;font-size:56px}.xp .xp-ringin .xp-l{margin-top:6px;line-height:1.1}
.xp .xp-checks{left:56px;bottom:64px;width:440px;display:flex;flex-direction:column;gap:14px}
.xp .xp-check{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px;padding:0 12px 0 28px;border-radius:36px;background:var(--pl);box-shadow:inset 0 0 0 2px var(--plb);overflow:hidden}
.xp .xp-check b{font:600 26px/1.15 Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== info layouts: grid, tags, table cards, check list, numbered list, striped table ===== */
.xk .xk-grid{left:56px;right:56px;bottom:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:20px}
.xk .xk-grid>.xk-tile{padding:28px 20px}
.xk .xk-chips{left:56px;right:56px;bottom:56px;display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.xk .xk-chipt{max-width:100%;padding:18px 28px;border-radius:40px;font:700 28px/1.15 Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xk .xk-tcards{left:56px;right:56px;bottom:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.xk .xk-tcards.xk-tc1{right:auto;width:440px;grid-template-columns:minmax(0,1fr)} /* an odd number: one column on the left */
.xk .xk-tcard{display:flex;flex-direction:column;gap:8px;padding:24px 28px;overflow:hidden}
.xk .xk-tcard>b{font:700 40px/1.05 var(--hf);letter-spacing:-.02em;white-space:nowrap}
.xk .xk-tcard>span{font:500 22px/1.25 Arial,sans-serif;color:var(--fg2);white-space:nowrap}
.xk .xk-clist{left:56px;right:56px;bottom:56px;display:flex;flex-direction:column;gap:20px;padding:32px 36px}
.xk .xk-ci{display:flex;align-items:center;gap:20px;min-width:0}
.xk .xk-ci .xk-ic{width:56px;height:56px}.xk .xk-ci .xk-ic svg{width:28px;height:28px}
.xk .xk-nl .xk-sn{width:64px;height:64px;font-size:30px}
.xk .xk-zebra{left:56px;right:56px;bottom:56px;display:flex;flex-direction:column;padding:12px;overflow:hidden}
.xk .xk-zebra .xk-tr{padding:16px 24px;border:0;border-radius:20px}
.xk .xk-zebra .xk-tr:nth-child(odd){background:rgba(127,127,127,.12)}
/* plates on a light photo: a soft shadow and a hairline keep them apart from a white backdrop */
.xk-light .xk-pl,.xk-light .xp-card,.xk-light .xp-plate,.xk-light .xp-check,.xk-light .xp-tag,.xk-light .xp-row,.xk-light .xp-seal,.xk-light .xp-ring{box-shadow:0 8px 24px rgba(22,24,28,.08),0 0 0 1px rgba(22,24,28,.06)}

.xp .xp-card.xp-ftxt>b{font:700 30px/1.15 Arial,sans-serif;letter-spacing:0;white-space:normal;text-wrap:balance} /* a text fact, not a number: wraps instead of cutting */
.xk .xk-zebra .xk-tr>b:only-child{text-align:left}