:root{
  color-scheme:light;
  /* — Card9D Prism tokens (light theme) — */
  --surface-000:#ffffff; --surface-100:#f6f7fb; --surface-200:#eceefa; --surface-ink:#0d112a;
  --on-ink:#f2f3fa; --on-ink-muted:#a3a9c4;
  --ink:#12142b; --ink-muted:#5b6079; --ink-faint:#6e7389;
  --brand:#5e40ea; --brand-strong:#4a2fd0; --brand-tint:#ece8ff; --on-brand:#ffffff;
  --accent:#d6f25c; --accent-tint:#f2fbc9; --on-accent:#16210c;
  --hue-magenta:#b83ec6; --hue-teal:#2c685c; --hue-steel:#2f5d85; --hue-indigo:#3b4695;
  --good:#1d7a52; --warn:#9a5b00; --crit:#c03535;
  --line:#e3e6f0; --line-control:#878ea8; --focus:#5e40ea;

  --radius-xs:8px; --radius-sm:12px; --radius-md:16px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-14:56px; --space-20:80px; --space-30:120px;

  --shadow-raise:0 1px 2px rgba(13,17,42,.06), 0 6px 16px rgba(13,17,42,.08);
  --shadow-fan:0 12px 32px rgba(13,17,42,.16);
  --shadow-pop:0 16px 40px rgba(94,64,234,.22);

  --display:"Anuphan","Noto Sans Thai",system-ui,sans-serif;
  --body:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,-apple-system,sans-serif; /* kept as an alias: numbers use the body font */

  /* legacy aliases kept so untouched page CSS/JS keeps working */
  --bg:var(--surface-000); --bg-soft:var(--surface-100); --panel:var(--surface-200);
  --muted:var(--ink-muted); --faint:var(--ink-faint); --chip:var(--surface-000);
  --accent-soft:var(--brand-tint); --good-soft:var(--accent-tint); --warn-soft:color-mix(in srgb, var(--hue-steel) 14%, white);
  --shadow:var(--shadow-fan); --shadow-sm:var(--shadow-raise);
  --maxw:1080px;
}
*{box-sizing:border-box}
/* in-page links and scrollIntoView stop below the floating navbar (≈73px desktop / 68px mobile) */
html{scroll-behavior:smooth;scroll-padding-top:92px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}
body{margin:0;background:var(--surface-000);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
.tnum{font-family:var(--mono)}
.nw{white-space:nowrap} /* keep a Thai phrase on one line; wrap between phrases instead */

/* floating pill nav (shared across pages) */
.bar{position:sticky;top:0;z-index:30;padding-block:14px 0;background:linear-gradient(var(--surface-000),var(--surface-000) 65%,transparent)}
.bar > .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface-000);border:1px solid var(--line);border-radius:999px;padding:9px 10px 9px 22px;box-shadow:var(--shadow-raise)}
.brand{font-family:var(--display);font-weight:700;font-size:16.5px;letter-spacing:-.01em;color:var(--ink);display:inline-flex;align-items:center;gap:9px}
.brand::before{content:"";width:28px;height:28px;flex:none;background:url(assets/brand/logo.svg) center/contain no-repeat}
/* footer: logo on the left, site name with the tagline under it on the right */
.foot-brand{display:grid;grid-template-columns:70px 1fr;column-gap:14px;align-items:center;align-content:start}
.foot-brand::before{content:"";grid-row:1/3;width:70px;height:70px;background:url(assets/brand/logo.svg) center/contain no-repeat}
.foot-brand .brand::before{display:none}
.foot-brand .brand{align-self:end}
a.brand:hover{text-decoration:none}
.nav-desk{display:flex;align-items:center;gap:2px;font-size:13px}
.nav-desk a{color:var(--ink-muted);font-weight:600;padding:9px 15px;border-radius:999px}
.nav-desk a:hover,.nav-desk a[aria-current]{background:var(--surface-100);color:var(--ink);text-decoration:none}
.nav-toggle{display:none;align-items:center;gap:8px;font:600 13px/1 var(--body);color:var(--ink);background:var(--surface-100);border:1px solid var(--line);border-radius:999px;padding:9px 14px 9px 12px;cursor:pointer;min-height:40px}
.nav-burger{display:inline-flex;flex-direction:column;gap:3px;width:16px}
.nav-burger i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.nav-open .nav-burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-open .nav-burger i:nth-child(2){opacity:0}
.nav-open .nav-burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.nav-sheet{position:absolute;left:0;right:0;top:100%;padding-top:8px}
.nav-sheet-in{background:var(--surface-000);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-fan);padding:10px;max-height:calc(100vh - 100px);overflow:auto}
.nav-main{display:grid;gap:2px}
.nav-main a{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:14px;color:var(--ink);text-decoration:none;min-height:48px}
.nav-main a:hover,.nav-main a[aria-current]{background:var(--surface-100)}
.nav-main b{display:block;font:600 15px/1.3 var(--display)}
.nav-main small{display:block;color:var(--ink-muted);font-size:12px}
.nav-ic{width:36px;height:36px;border-radius:11px;background:var(--brand-tint);color:var(--brand);display:inline-flex;align-items:center;justify-content:center;flex:none}
.nav-h{margin:12px 10px 8px;font:700 11.5px/1 var(--body);letter-spacing:.05em;color:var(--ink-faint);text-transform:uppercase}
.nav-cats{display:flex;flex-wrap:wrap;gap:6px;padding:0 6px 6px}
.nav-cats a{font:600 12.5px/1 var(--body);color:var(--ink);background:var(--surface-100);border:1px solid var(--line);border-radius:999px;padding:9px 12px;text-decoration:none}
.nav-cats a[aria-current]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}

/* breadcrumb */
.crumb{font-size:12.5px;color:var(--ink-muted);padding-block:20px 0}
.crumb a{color:var(--ink-muted)}
.crumb a:hover{color:var(--brand)}
.crumb span{margin:0 6px}

/* shared buttons — bold pill, brand fill for primary */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:600 14.5px/1 var(--body);border-radius:var(--radius-pill);padding:14px 26px;cursor:pointer;text-decoration:none;border:1.5px solid transparent;letter-spacing:-.005em;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-pop)}
.btn-primary:hover{background:var(--brand-strong)}
.btn-secondary{background:var(--surface-000);color:var(--ink);border-color:var(--line-control)}
.btn-secondary:hover{border-color:var(--ink)}
.btn.sm{padding:9px 18px;font-size:13px;box-shadow:none}
/* "big icon" pill buttons — the hydrated data-ic icon links/submit buttons that aren't the
   "สมัคร ↗ external" apply links (those keep their small inline icon on purpose) */
.btn-ic-lg{padding:5px 26px}

/* badges/pills (shared) */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;border-radius:999px;padding:4px 12px}
.badge-promo{background:var(--accent-tint);color:var(--good)}
.badge-check{background:var(--surface-200);color:var(--ink-muted);font-weight:500}
.badge img{height:16px;width:auto;max-width:36px;border-radius:3px}

/* stat card — icon + label + value, used across pages for "value" moments */
.stat-card{background:var(--surface-100);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.stat-ico{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--brand-tint);color:var(--brand);font-size:19px;flex:none}
.stat-ico.good{background:color-mix(in srgb, var(--hue-teal) 14%, white);color:var(--hue-teal)}
.stat-ico.warn{background:color-mix(in srgb, var(--hue-steel) 14%, white);color:var(--hue-steel)}
.stat-card b{font-family:var(--display);font-size:14px;font-weight:600}
.stat-card .stat-val{font-family:var(--mono);font-weight:600;font-size:clamp(22px,3vw,28px);letter-spacing:-.01em}
.stat-card p{margin:0;color:var(--ink-muted);font-size:12.5px;line-height:1.5}

footer{padding-block:40px 48px;color:var(--ink-faint);font-size:12px;line-height:1.7;border-top:1px solid var(--line);margin-top:8px}
footer p{max-width:80ch;margin:0 0 8px}
footer .wrap{max-width:var(--maxw)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 2fr;gap:24px;margin-bottom:22px}
.foot-brand .brand,.foot-brand p{white-space:nowrap}
.foot-brand p{margin:3px 0 0;align-self:start;color:var(--ink-muted);font-size:12.5px}
.foot-col{display:flex;flex-direction:column;gap:6px}
.foot-col b{font:700 12px/1.4 var(--body);color:var(--ink);margin-bottom:2px}
.foot-col a{color:var(--ink-muted);font-size:12.5px}
.foot-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;align-content:start}
.foot-cats b{grid-column:1/-1}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand,.foot-grid .foot-cats{grid-column:1/-1}}

@media (max-width:975px){ /* the menu items stop fitting on one line below ~975px */
  .nav-desk{display:none}
  .nav-toggle{display:inline-flex}
  .bar > .wrap{padding:6px 6px 6px 18px}
}

/* shared inline icon utilities (see data/icons.js) */
.ic-inline{vertical-align:-2px;margin-inline-start:2px;flex:none}
.btn .ri, .btn .ic-inline{vertical-align:-2px}
:where([data-ic]){display:inline-flex;align-items:center;justify-content:center;flex:none}

/* hero-visual — static fanned card preview (kept for reuse elsewhere; not currently used on any page) */
.hero-visual{position:relative;max-width:640px;margin:clamp(36px,6vw,56px) auto 0;background:var(--surface-100);border:1px solid var(--line);border-radius:var(--radius-xl);padding:clamp(28px,6vw,48px) 20px clamp(34px,6vw,52px);overflow:visible}
.fan{position:relative;height:clamp(150px,26vw,190px);display:flex;align-items:center;justify-content:center}
.fan img{position:absolute;width:clamp(140px,24vw,180px);aspect-ratio:1.586;object-fit:cover;border-radius:var(--radius-md);box-shadow:var(--shadow-fan);background:#fff;transition:transform .3s ease}
.fan img:nth-child(1){transform:rotate(-9deg) translateX(-78px)}
.fan img:nth-child(2){transform:rotate(0deg) translateY(-10px);z-index:2}
.fan img:nth-child(3){transform:rotate(9deg) translateX(78px)}
.hero-visual:hover .fan img:nth-child(1){transform:rotate(-13deg) translateX(-88px) translateY(-4px)}
.hero-visual:hover .fan img:nth-child(3){transform:rotate(13deg) translateX(88px) translateY(-4px)}
.fan-chip{position:absolute;top:10px;left:50%;transform:translate(-50%,-50%);background:var(--accent);color:var(--on-accent);border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:700;box-shadow:var(--shadow-raise);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.hero-visual .cap{margin:22px 0 0;text-align:center;color:var(--ink-muted);font-size:13px}
.hero-visual .cap b{color:var(--ink)}

/* mini-compare (.mc-*) — the interactive homepage card-picker + comparator built earlier, kept here for reuse
   (e.g. on compare.html or a future "quick swap" feature) even though index.html now uses the .mq mini-recommender instead */
.mc{position:relative;max-width:640px;margin:clamp(32px,6vw,56px) auto 0;background:var(--surface-100);border:1px solid var(--line);border-radius:var(--radius-xl);padding:20px 14px 22px;overflow:visible;text-align:left}
.mc-chip{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--on-accent);border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:700;box-shadow:var(--shadow-raise);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.mc-fan{position:relative;height:106px;display:flex;align-items:center;justify-content:center;margin-top:14px}
.mc-slot{position:absolute;width:98px;aspect-ratio:1.586;padding:0;border:0;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-fan);cursor:pointer;transition:transform .25s ease,box-shadow .2s ease;overflow:hidden}
.mc-slot img{width:100%;height:100%;object-fit:cover;display:block}
.mc-slot:nth-child(1){transform:rotate(-8deg) translateX(-64px)}
.mc-slot:nth-child(2){transform:translateY(-8px);z-index:2}
.mc-slot:nth-child(3){transform:rotate(8deg) translateX(64px)}
.mc:hover .mc-slot:nth-child(1){transform:rotate(-11deg) translateX(-72px) translateY(-3px)}
.mc:hover .mc-slot:nth-child(3){transform:rotate(11deg) translateX(72px) translateY(-3px)}
.mc-slot:hover,.mc-slot:focus-visible{box-shadow:var(--shadow-pop)}
.mc-slot .mc-edit{position:absolute;inset:auto 0 0 0;background:rgba(13,17,42,.72);color:#fff;font:600 10.5px/1 var(--body);padding:5px 0;text-align:center;opacity:0;transition:opacity .18s ease}
.mc-slot:hover .mc-edit,.mc-slot:focus-visible .mc-edit{opacity:1}
.mc-result{margin-top:20px;background:var(--surface-000);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.mc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.mc-row + .mc-row{border-top:1px solid var(--line)}
.mc-row.mc-head{background:transparent}
.mc-cell{background:var(--surface-000);padding:10px 8px;min-width:0;font-size:11.5px;line-height:1.4;text-align:center}
.mc-row.mc-head .mc-cell{padding-top:14px;font-weight:700;font-family:var(--display);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-lab{padding:9px 8px 0;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint);text-align:center}
.mc-cell b{display:block;font-family:var(--mono);font-size:13px;color:var(--ink)}
.mc-cell.mc-same{color:var(--ink-faint)}
.mc-foot{display:flex;justify-content:center;padding:14px 10px 4px}
.mc-foot a{font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:5px}

/* mc picker sheet — mobile-first bottom sheet, becomes a centered modal at desktop widths */
.mc-backdrop{position:fixed;inset:0;background:rgba(13,17,42,.5);z-index:50;display:none;align-items:flex-end;justify-content:center}
.mc-backdrop.on{display:flex}
.mc-sheet{background:var(--surface-000);width:100%;max-height:88vh;border-radius:20px 20px 0 0;display:flex;flex-direction:column;overflow:hidden;animation:mcUp .22s ease}
@keyframes mcUp{from{transform:translateY(24px);opacity:.6}to{transform:translateY(0);opacity:1}}
.mc-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;flex:none}
.mc-sheet-head h3{margin:0;font-family:var(--display);font-weight:700;font-size:16px}
.mc-close{width:30px;height:30px;border-radius:999px;border:1px solid var(--line);background:var(--surface-000);color:var(--ink-muted);font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.mc-close[hidden]{display:none}
.mc-close:hover{border-color:var(--ink);color:var(--ink)}
.mc-suggest{background:var(--surface-ink);padding:26px 16px 20px;flex:none}
.mc-fan2{position:relative;height:96px;display:flex;align-items:center;justify-content:center}
.mc-sugg{position:absolute;width:90px;aspect-ratio:1.586;padding:0;border:0;border-radius:var(--radius-md);cursor:pointer;overflow:visible;background:none;transition:transform .2s ease}
.mc-sugg img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-md);box-shadow:var(--shadow-fan);display:block}
.mc-sugg:nth-child(1){transform:rotate(-6deg) translateX(-58px) translateY(10px)}
.mc-sugg:nth-child(2){transform:translateY(-6px);z-index:2}
.mc-sugg:nth-child(3){transform:rotate(6deg) translateX(58px) translateY(10px)}
.mc-sugg.mc-cur{transform:translateY(-14px) scale(1.03);z-index:3}
.mc-sugg.mc-cur img{box-shadow:0 0 0 3px var(--accent),var(--shadow-pop)}
.mc-sugg-pill{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);background:var(--accent);color:var(--on-accent);font:700 10.5px/1 var(--body);padding:5px 10px;border-radius:999px;white-space:nowrap;opacity:0;transition:opacity .15s ease}
.mc-sugg:hover .mc-sugg-pill,.mc-sugg:focus-visible .mc-sugg-pill{opacity:1}
.mc-suggest .mc-hint{margin:20px 0 0;text-align:center;color:var(--on-ink-muted);font-size:11.5px}
.mc-search-wrap{padding:12px 16px;border-bottom:1px solid var(--line);flex:none}
.mc-search-wrap input{width:100%;font:500 14px/1.3 var(--body);border:1.5px solid var(--line-control);border-radius:999px;padding:10px 16px;background:var(--surface-100)}
.mc-search-wrap input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.mc-list{overflow-y:auto;padding:6px 8px 20px}
.mc-item{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;background:none;border-radius:12px;cursor:pointer;text-align:left;color:inherit;font:inherit}
.mc-item:hover{background:var(--surface-100)}
.mc-item img{width:44px;aspect-ratio:1.586;object-fit:cover;border-radius:6px;flex:none;background:#fff;box-shadow:var(--shadow-raise)}
.mc-item b{display:block;font-family:var(--display);font-weight:600;font-size:13.5px;line-height:1.3}
.mc-item small{color:var(--ink-muted);font-size:11.5px}
.mc-item.mc-active{background:var(--brand-tint)}
.mc-empty{padding:24px;text-align:center;color:var(--ink-muted);font-size:13px}

@media (min-width:640px){
  .mc-backdrop{align-items:center}
  .mc-sheet{width:min(92vw,460px);max-height:80vh;border-radius:var(--radius-xl);box-shadow:var(--shadow-pop)}
}
@media (min-width:560px){
  .mc-fan{height:118px}
  .mc-slot{width:112px}
  .mc-slot:nth-child(1){transform:rotate(-9deg) translateX(-74px)}
  .mc-slot:nth-child(3){transform:rotate(9deg) translateX(74px)}
  .mc-cell{font-size:12.5px;padding:12px 10px}
}

/* ================================================================
   Shared components for generated pages (tools/build.mjs):
   rating stars, review page (.rv-*), category page (.cat-*, .pcard), compare tray, go page
   ================================================================ */
.crumb a{color:var(--ink-muted)}
.stars{position:relative;display:inline-block;font-size:var(--s,14px);line-height:1;letter-spacing:1px;color:var(--line)}
.stars .stars-fill{position:absolute;inset:0 auto 0 0;width:var(--pct);overflow:hidden;color:#f0a818;white-space:nowrap}
.rating{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.rating b{font:700 14px/1 var(--display)}
.rating-of{color:var(--ink-faint);font-size:12px;margin-inline-start:-4px}
.rating-big b{font-size:22px}
.na{color:var(--ink-faint)}
.hi-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hi-list li,.li-good li,.li-warn li{position:relative;padding-inline-start:26px;font-size:14px;line-height:1.55}
.li-good,.li-warn{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.hi-list li::before,.li-good li::before{content:"";position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;background:var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d7a52' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/10px no-repeat}
.li-warn li::before{content:"!";position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;background:color-mix(in srgb,var(--warn) 15%,white);color:var(--warn);font:800 11px/17px var(--body);text-align:center}

/* ---------- review page ---------- */
.pg-review main{padding-bottom:24px}
.rv-hero{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:clamp(24px,5vw,56px);padding-block:clamp(20px,4vw,36px) 8px;align-items:center}
.rv-media{display:flex;justify-content:center}
.rv-media img{width:auto;height:auto;max-width:100%;max-height:360px;border-radius:var(--radius-lg);box-shadow:var(--shadow-fan);display:block;background:#fff}
.rv-bank{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-muted)}
.rv-bank img{height:20px;width:auto;border-radius:4px}
.rv-nets{display:inline-flex;gap:6px;margin-inline-start:auto}
.rv-nets img{height:20px;width:auto}
.rv-body h1{font-family:var(--display);font-weight:700;font-size:clamp(28px,4.4vw,42px);letter-spacing:-.02em;line-height:1.22;margin:10px 0 6px}
.rv-sub{margin:0 0 14px;color:var(--ink-muted);font-size:15.5px;text-wrap:balance}
.rv-rating{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;margin-bottom:18px}
.rv-rating:hover{text-decoration:none}
.rv-rating-l{font-size:12.5px;color:var(--ink-muted)}
.rv-rating-l small,.rv-score h2 small{font:700 10px/1 var(--body);color:var(--brand);background:var(--brand-tint);border-radius:999px;padding:3px 7px;vertical-align:2px}
.rv-cta{display:flex;flex-wrap:wrap;gap:10px}
.rv-note{margin:10px 0 0;font-size:11.5px;color:var(--ink-faint);max-width:62ch}
.rv-updated{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:12px;color:var(--good)}
@media (max-width:760px){.rv-hero{grid-template-columns:1fr}.rv-media img{max-height:240px}.rv-cta .btn{flex:1 1 100%}}

.rv-facts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;margin-top:clamp(20px,4vw,32px)}
@media (max-width:980px){.rv-facts{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.rv-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fact{background:var(--surface-100);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px;display:flex;flex-direction:column;gap:3px;min-width:0}
.fact-ic{width:40px;height:40px;background:none;color:#000;display:inline-flex;align-items:center;justify-content:center;margin-bottom:6px}
.fact-k{font-size:11.5px;color:var(--ink-muted);font-weight:600}
.fact b{font:700 15.5px/1.3 var(--display);color:var(--ink)}
.fact-s{font-size:11.5px;color:var(--ink-muted);line-height:1.4}

.pg-review section h2,.pg-cat section h2{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.6vw,26px);letter-spacing:-.015em;margin:0 0 12px}
.rv-take,.rv-earn,.rv-calc,.rv-brands,.rv-score,.rv-specs,.rv-alts,.pg-review .faq,.rv-offer{margin-top:clamp(36px,6vw,56px)}
.rv-lead{color:var(--ink-muted);font-size:13.5px;margin:-4px 0 18px;max-width:70ch}
.rv-take-p{font-size:15.5px;line-height:1.75;max-width:72ch;margin:0 0 20px}
.tk-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tk{position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--tk-line);border-radius:var(--radius-xl);padding:22px 24px 24px;background:linear-gradient(135deg,var(--tk-a),var(--tk-b))}
.tk h3{display:flex;align-items:center;gap:10px;font:700 18px/1.3 var(--display);margin:0 0 14px;color:var(--ink)}
.tk-badge{width:50px;height:50px;margin-left:-8px;flex:none;background:var(--tk-badge) center/contain no-repeat;filter:var(--tk-badge-f,none)}
.tk ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tk li{position:relative;margin-left:5px;padding-inline-start:31px;font-size:14px;line-height:1.55;color:var(--ink)}
.tk li::before{content:"";position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;background:var(--tk-mk-bg) var(--tk-mk) center/12px no-repeat}
.tk-pro{--tk-a:#f9fde8;--tk-b:var(--accent-tint);--tk-line:color-mix(in srgb,var(--accent) 45%,white);--tk-mk-bg:var(--accent);--tk-mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.3 2.3 4.6-5' fill='none' stroke='%2316210c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--tk-badge:url(assets/icons/glass-color/ok.webp);--tk-badge-f:hue-rotate(-35deg) saturate(1.35) brightness(1.18);--tk-dot:var(--accent)}
.tk-warn{--tk-a:#fff7f3;--tk-b:#fdece6;--tk-line:#f7dcd2;--tk-mk-bg:#fde1d7;--tk-mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.4v4.3' stroke='%23d4531f' stroke-width='1.9' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='9.3' r='1.05' fill='%23d4531f'/%3E%3C/svg%3E");--tk-badge:url(assets/icons/glass-color/high-importance.webp);--tk-dot:#d4531f}
.tk-fit{--tk-a:#f5f7ff;--tk-b:#eaeefe;--tk-line:#dfe4f8;--tk-mk-bg:#e4dcff;--tk-mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.3 2.3 4.6-5' fill='none' stroke='%235e40ea' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--tk-badge:url(assets/icons/glass-color/user-male-circle.webp);--tk-badge-f:hue-rotate(26deg);--tk-dot:#5e40ea}
.tk-nofit{--tk-a:#f7f7fb;--tk-b:#eeeef6;--tk-line:#e3e3ee;--tk-mk-bg:#e3e4ef;--tk-mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' stroke='%235b6079' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");--tk-badge:url(assets/icons/glass-color/minus.webp);--tk-badge-f:grayscale(1) brightness(1.4) contrast(.85);--tk-dot:#5b6079}
@media (max-width:760px){.tk-grid{grid-template-columns:1fr}.tk{padding:20px 20px 22px}}
/* "สรุปจาก Card9D" as one card, each group an accordion row (tried on uob-one first) */
.tk-acc{border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface-000,#fff);overflow:hidden}
.tk-row{border-top:1px solid var(--line)}
.tk-row:first-child{border-top:0}
.tk-row summary{display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;list-style:none;font:700 16px/1.3 var(--display);color:var(--ink)}
.tk-row summary::-webkit-details-marker{display:none}
.tk-row summary:hover{background:var(--surface-100)}
.tk-row .tk-badge{width:34px;height:34px;margin-left:0}
.tk-row-t{flex:1}
.tk-row-n{font:600 12px/1 var(--body);color:var(--ink-muted);background:var(--surface-100);border-radius:999px;padding:4px 9px}
.tk-chev{width:8px;height:8px;flex:none;border-right:2px solid var(--ink-muted);border-bottom:2px solid var(--ink-muted);transform:rotate(45deg);transition:transform .2s ease;margin-right:2px}
.tk-row[open] .tk-chev{transform:rotate(-135deg)}
.tk-row .tk-body{display:block;overflow:hidden;height:0;transition:height .28s ease}
.tk-row[open] .tk-body{height:auto}
.tk-row ul{list-style:none;margin:0;padding:7px 20px 15px 60px;display:grid;gap:10px}
.tk-row li{position:relative;padding-inline-start:18px;font-size:14px;line-height:1.55;color:var(--ink)}
.tk-row li::before{content:"";position:absolute;left:2px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--tk-dot);transform:translateY(-50%)}
@media (max-width:760px){.tk-row ul{padding-left:20px}}

.offer-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius-xl);overflow:hidden;background:var(--surface-100)}
.offer-img{display:block}
.offer-img img{width:100%;height:100%;object-fit:cover;display:block}
.offer-img.offer-fit img{object-fit:contain}
.offer-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:220px;background:color-mix(in srgb,var(--tint) 13%,white)}
.offer-art svg{width:min(60%,260px);height:auto}
.offer-body{padding:clamp(18px,3vw,28px);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.offer-body h2{margin:0}
.offer-body p{margin:0 0 6px;color:var(--ink-muted);font-size:14px}
.offer-tag{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--body);color:var(--good);background:var(--accent-tint);border-radius:999px;padding:6px 11px}
.offer-src{color:var(--ink-faint);font-size:11.5px}
@media (max-width:760px){.offer-card{grid-template-columns:1fr}}

.tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:820px){.tier-grid{grid-template-columns:1fr}}
.tier-card{background:var(--surface-000);border:1px solid var(--line);border-radius:var(--radius-xl);padding:20px;box-shadow:var(--shadow-raise)}
.tier-card.top{border:2px solid var(--brand)}
.tier-pct{font:800 clamp(34px,5vw,42px)/1 var(--display);color:var(--ink)}
.tier-card.top .tier-pct{color:var(--brand)}
.tier-card b{display:block;font:600 14.5px/1.35 var(--display);margin:6px 0 12px}
.tier-brands,.tier-icons{display:flex;flex-wrap:wrap;gap:10px}
.tier-note{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-muted)}
.tbrand{display:flex;flex-direction:column;align-items:center;gap:5px;width:62px}
.tbrand img{width:42px;height:42px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px}
.tbrand small{font-size:10.5px;color:var(--ink-muted);text-align:center;line-height:1.2}
.tier-icons span{display:inline-flex;align-items:center;gap:5px;font-size:12px;background:var(--surface-100);border:1px solid var(--line);border-radius:999px;padding:5px 11px}

.calc-card{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--radius-xl);overflow:hidden}
.calc-in{padding:clamp(18px,3vw,28px)}
.calc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.calc-l b{display:block;font:600 14px/1.35 var(--display)}
.calc-l small{color:var(--brand);font-weight:700;font-size:12px}
.calc-inp{display:flex;align-items:center;gap:6px;flex:none}
.calc-inp input{width:120px;font:600 15px/1 var(--mono);text-align:right;border:1.5px solid var(--line-control);border-radius:12px;padding:10px 12px;background:#fff;color:var(--ink)}
.calc-inp input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.calc-inp i{font-style:normal;font-size:11.5px;color:var(--ink-muted);white-space:nowrap}
.calc-out{background:var(--surface-ink);color:var(--on-ink);padding:clamp(18px,3vw,28px);display:flex;flex-direction:column;gap:10px}
.calc-big span,.calc-year span{display:block;font-size:12.5px;color:var(--on-ink-muted)}
.calc-big b{font:700 clamp(36px,5vw,48px)/1.1 var(--display);color:var(--accent)}
.calc-big small,.calc-year small{color:var(--on-ink-muted);font-size:12.5px;margin-inline-start:4px}
.calc-year b{font:700 22px/1.2 var(--display)}
.calc-fee{margin:4px 0 0;font-size:13px;line-height:1.55;color:var(--on-ink)}
.calc-fee b{color:var(--accent)}
.calc-note{margin:auto 0 0;font-size:11.5px;line-height:1.5;color:var(--on-ink-muted)}
@media (max-width:760px){.calc-card{grid-template-columns:1fr}.calc-inp input{width:104px}}

.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.brand-item{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 8px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff}
.brand-item img{width:36px;height:36px;object-fit:contain}
.brand-item small{font-size:10.5px;color:var(--ink-muted);text-align:center;line-height:1.25}
.brand-grid .brand-item.more,.brand-grid .brand-item.more-dt{display:none}
.brand-grid.show-all .brand-item.more,.brand-grid.show-all .brand-item.more-dt{display:flex}
@media (min-width:1000px){.brand-grid .brand-item.more-dt{display:flex}.brand-more.brand-more-dt-hide{display:none}}
.brand-more{display:block;margin:14px auto 0;font:600 13px/1 var(--body);color:var(--brand);background:none;border:1.5px solid var(--line);border-radius:999px;padding:10px 18px;cursor:pointer}

.rv-score{background:var(--surface-100);border:1px solid var(--line);border-radius:var(--radius-xl);padding:clamp(18px,3vw,28px)}
.pg-review .rv-score{max-width:calc(var(--maxw) - 2 * clamp(16px,4vw,32px))}
.sb{display:grid;gap:14px}
.sb-row{display:grid;grid-template-columns:minmax(150px,210px) 1fr 44px;align-items:center;gap:6px 14px}
.sb-lab b{display:block;font:600 14px/1.3 var(--display)}
.sb-lab span{font-size:11.5px;color:var(--ink-muted)}
.sb-bar{height:10px;border-radius:99px;background:var(--surface-200);overflow:hidden}
.sb-bar i{display:block;height:100%;border-radius:99px;background:var(--brand)}
.sb-val{font:700 16px/1 var(--mono);text-align:right}
.sb-why{grid-column:2/-1;margin:-2px 0 0;font-size:12.5px;color:var(--ink-muted)}
.rv-score-n{color:var(--brand)}
.sb-note{margin:16px 0 0;font-size:12.5px;color:var(--ink-muted)}
@media (max-width:560px){.sb-row{grid-template-columns:1fr 44px}.sb-bar{grid-column:1/-1;grid-row:2}.sb-why{grid-column:1/-1}}

.sgroup{margin-bottom:26px}
.sgroup h3{display:flex;align-items:center;gap:8px;font-size:16px;color:#000;text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px;font-weight:600}
.sgroup h3 > i{font-style:normal;width:40px;height:40px;background:none;color:#000;display:inline-flex;align-items:center;justify-content:center;flex:none}
.srow{display:grid;grid-template-columns:minmax(140px,240px) 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.slab{font-size:13.5px;color:var(--ink-muted)}
.sval{font-size:14px}
.sval .val{font-weight:600;font-size:14.5px;margin-inline-end:6px}
.sval .sub{color:var(--ink-muted);font-size:13px}
.rv-src{font-size:12.5px;color:var(--ink-muted)}
@media (max-width:560px){.srow{grid-template-columns:1fr;gap:2px}}

.alts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.alts{grid-template-columns:1fr}}
.rv-more{margin:14px 0 0;font-weight:700;font-size:13.5px}
.rv-more-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:16px}
.rv-more-link{font-weight:700;font-size:13.5px}

.faq{max-width:780px}
.faq details{border-top:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:14.5px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+ ";color:var(--brand)}
.faq details[open] summary::before{content:"– "}
.faq p{margin:10px 0 0;color:var(--ink-muted);font-size:13.5px;line-height:1.65}
.compare-cta{margin-block:clamp(36px,6vw,56px) 8px;background:var(--surface-100);border:1px solid var(--line);border-radius:var(--radius-xl);padding:clamp(24px,4.5vw,36px);text-align:center}
.compare-cta h2{font-size:21px!important}
.compare-cta .cta-card{display:block;width:200px;max-width:100%;height:130px;object-fit:contain;margin:0 auto 16px}
.compare-cta p{margin:0 0 16px;color:var(--ink-muted);font-size:13.5px}
.compare-cta .cta-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}

.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:25;background:color-mix(in srgb,var(--surface-000) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(13,17,42,.08);transform:translateY(110%);transition:transform .25s ease;padding-bottom:env(safe-area-inset-bottom,0)}
.sticky-cta.on{transform:none}
.sticky-in{display:flex;align-items:center;gap:12px;padding-block:10px}
.sticky-in img{width:46px;height:auto;border-radius:5px;flex:none}
.sticky-t{display:flex;flex-direction:column;min-width:0;margin-inline-end:auto}
.sticky-t b{font:600 14px/1.25 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-t .rating b{font-size:12px}

/* ---------- category pages ---------- */
.cat-hero{position:relative;isolation:isolate;padding-block:clamp(16px,3vw,28px) 6px}
/* big white Liquid Glass icon (assets/icons/glass-xl, 720px) sitting behind the hero text on the right */
.cat-hero-ic{position:absolute;z-index:-1;right:min(-24px,calc((100% - 100vw) / 2 + 40px));top:calc(clamp(-8px,1vw,24px) - 50px);width:clamp(200px,30vw,360px);height:auto;pointer-events:none;user-select:none;filter:drop-shadow(0 18px 30px rgba(60,30,160,.18))}
@media (max-width:560px){.cat-hero-ic{width:190px;right:-16px;top:-4px;opacity:.7}}
/* single category pages: brand colour fading in from the page's top-right corner, behind the hero icon */
.pg-cat-one,.pg-glow{position:relative;overflow-x:clip}
.pg-cat-one::before,.pg-glow::before{content:"";position:absolute;z-index:-1;top:0;right:0;width:min(100%,1100px);height:760px;pointer-events:none;
  background:radial-gradient(90% 85% at 100% 0%,color-mix(in srgb,var(--brand) 42%,transparent) 0%,color-mix(in srgb,#b83ec6 16%,transparent) 38%,transparent 72%)}
@media (max-width:560px){.pg-cat-one::before,.pg-glow::before{height:520px}}
.pg-cat-one .bar:not(.is-scrolled),.pg-glow .bar:not(.is-scrolled){background:none}
.cat-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(28px,4.4vw,42px);letter-spacing:-.02em;line-height:1.25;margin:8px 0 12px;text-wrap:balance}
.h1-date{color:var(--brand)}
.cat-intro{color:var(--ink-muted);max-width:72ch;margin:0 0 14px;font-size:15px;line-height:1.7}
.cat-meta{font-size:12.5px;color:var(--good);margin:0;line-height:1.7}
.cat-meta svg{vertical-align:-2px;margin-inline-end:4px}
.cat-disc{font-size:11.5px;color:var(--ink-faint);margin:6px 0 0}
.cat-picks,.cat-list,.cat-table,.cat-guide,.cat-method,.pg-cat .faq,.cat-related{margin-top:clamp(32px,5vw,48px)}
.picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:980px){.picks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.picks{grid-template-columns:1fr}}
.pick{border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px;display:flex;flex-direction:column;gap:10px;background:#fff}
.pick-l{position:relative;left:-7px!important;white-space:nowrap;z-index:1;align-self:flex-start;font:700 11px/1 var(--body);color:var(--on-accent);background:var(--accent);border-radius:999px;padding:5px 10px}
.pick-c{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.pick-c:hover b{color:var(--brand)}
.pick-c img{width:auto;height:auto;max-width:72px;max-height:46px;border-radius:6px;flex:none}
.pick-c b{display:block;font:600 14px/1.3 var(--display);margin-bottom:3px}
.pick dl{margin:0;display:grid;gap:4px;font-size:12.5px}
.pick dl div{display:flex;justify-content:space-between;gap:8px}
.pick dt{color:var(--ink-muted)}
.pick dd{margin:0;font-weight:600;text-align:right}
.pick .btn{margin-top:auto}
.list-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px}
.sort{font-size:13px;color:var(--ink-muted);display:inline-flex;align-items:center;gap:8px}
.sort select{-webkit-appearance:none;appearance:none;font:600 13px/1.5 var(--body);border:1.5px solid var(--line-control);border-radius:999px;padding:6px 40px 6px 16px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b6079' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center/10px 6px;color:var(--ink);cursor:pointer}
.bank-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 16px}
.bank-chips button{display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1 var(--body);border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:8px 13px;cursor:pointer}
.bank-chips button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.plist{display:grid;gap:14px}
.pcard{position:relative;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;padding:16px;display:flex;flex-direction:column;gap:12px}
.pcard:target{outline:2px solid var(--brand);outline-offset:2px}
.pc-head{display:grid;grid-template-columns:auto 140px 1fr auto;align-items:center;gap:14px}
.pc-rank{width:30px;height:30px;border-radius:50%;background:var(--surface-ink);color:#fff;font:700 13px/30px var(--mono);text-align:center}
.pc-img{width:140px;height:88px;display:flex;align-items:center;justify-content:center}
.pc-img img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:9px;box-shadow:var(--shadow-raise);display:block;background:#fff}
.pc-title{min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.pc-title h3{margin:0;font:700 17px/1.3 var(--display)}
.pc-title h3 a{color:var(--ink)}
.pc-label{font:700 11px/1 var(--body);color:var(--on-accent);background:var(--accent);border-radius:999px;padding:5px 10px}
.pc-bank{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-muted)}
.pc-bank img{height:16px;width:auto;border-radius:3px}
.pc-rating{text-decoration:none}
.pc-rating:hover{text-decoration:none}
.pc-cta{display:flex;flex-direction:column;align-items:stretch;gap:5px;min-width:150px}
.pc-cta small{font-size:10.5px;color:var(--ink-faint);text-align:center;max-width:170px}
.pc-facts{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.pc-facts:has(> div:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}
.pc-facts div{background:var(--surface-100);padding:10px 12px;min-width:0}
.pc-facts dt{font-size:11px;color:var(--ink-muted);font-weight:600;margin-bottom:3px}
.pc-facts dd{margin:0}
.pc-facts dd b{display:block;font:700 14px/1.3 var(--display)}
.pc-facts dd span{display:block;font-size:11.5px;color:var(--ink-muted);line-height:1.35;margin-top:2px}
.pc-offer{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:13px;background:var(--accent-tint);border-radius:12px;padding:9px 12px;color:var(--ink)}
.pc-offer svg{color:var(--good);margin-top:2px}
.pc-offer small{color:var(--ink-muted)}
.pc-more summary{cursor:pointer;font:600 13px/1 var(--body);color:var(--brand);list-style:none;padding:4px 0}
.pc-more summary::-webkit-details-marker{display:none}
.pc-more summary::after{content:" ▾"}
.pc-more[open] summary::after{content:" ▴"}
.pc-pc{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.pc-pc h4{margin:0 0 8px;font:700 13px/1 var(--display)}
.pc-pc li{font-size:13px}
.pc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:10px;font-size:13px}
.pc-cmp{display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:var(--ink-muted);font-weight:600}
.pc-cmp input{width:17px;height:17px;accent-color:var(--brand)}
.pc-link{font-weight:700;display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:var(--radius-pill);background:var(--brand-tint);color:var(--brand);text-decoration:none}
.pc-link:hover{background:var(--brand);color:#fff}
.pc-cmp{margin-inline-start:auto;font-weight:500;font-size:12.5px}
a.pc-cmp-link{color:var(--brand);font-weight:600;text-decoration:none;gap:4px}
a.pc-cmp-link:hover{text-decoration:underline}
.pcard-compact .pc-head{grid-template-columns:96px 1fr}
.pcard-compact .pc-img{width:96px;height:62px}
.pcard-compact .pc-cta{grid-column:1/-1;flex-direction:row;align-items:center}
.pcard-compact .pc-cta small{text-align:left;max-width:none}
.pcard-compact .pc-facts{grid-template-columns:1fr 1fr!important}
@media (max-width:760px){
  .pc-head{grid-template-columns:auto 96px 1fr}
  .pc-img{width:96px;height:62px}
  .pc-cta{grid-column:1/-1;flex-direction:row;align-items:center}
  .pc-cta .btn{flex:none;min-width:120px}
  .pc-cta small{text-align:left;max-width:none}
  .pc-facts,.pc-facts:has(> div:nth-child(5)){grid-template-columns:1fr 1fr}
  .pc-pc{grid-template-columns:1fr}
}
.ct-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg)}
.ct{border-collapse:collapse;width:100%;min-width:760px;font-size:13px}
.ct th{text-align:left;font-size:12px;color:var(--ink-muted);font-weight:600;padding:11px 12px;border-bottom:1px solid var(--line);background:var(--surface-100);white-space:nowrap}
.ct th[data-k]{cursor:pointer}
.ct th[aria-sort=ascending]::after{content:" ▴"}
.ct th[aria-sort=descending]::after{content:" ▾"}
.ct td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.ct tr:last-child td{border-bottom:0}
.ct td a:not(.btn){font-weight:600;color:var(--ink)}
.ct td small{display:block;color:var(--ink-muted);font-size:11.5px}
.ct .num{text-align:right;white-space:nowrap}
@media (max-width:760px){.cat-table{display:none}}
.cat-guide ol{margin:0;padding-left:1.3em;display:grid;gap:10px;max-width:72ch;font-size:14.5px;line-height:1.65}
.cat-method{background:var(--surface-100);border:1px solid var(--line);border-radius:var(--radius-xl);padding:clamp(18px,3vw,28px)}
.cat-method p{margin:0 0 12px;font-size:14px;color:var(--ink-muted);max-width:72ch}
.method-list{margin:0 0 8px;padding-left:1.1em;display:grid;gap:8px;font-size:13.5px;line-height:1.6;max-width:80ch}
.cat-method h3{font:700 15px/1.3 var(--display);margin:18px 0 10px}
.val-table{overflow-x:auto}
.val-table table{border-collapse:collapse;width:100%;min-width:560px;font-size:12.5px;background:#fff;border-radius:12px;overflow:hidden}
.val-table th,.val-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.val-table th{background:var(--surface-200);font-weight:600}
.rel{display:flex;flex-wrap:wrap;gap:8px}
.rel a{display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1 var(--body);color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:10px 16px;text-decoration:none;background:#fff}
.rel a:hover{border-color:var(--brand);color:var(--brand)}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:20px 0 40px}
/* category hub tiles: purple gradient top half with a large Liquid Glass icon (assets/icons/glass-lg, 256px), details below */
.hub-cat{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;color:var(--ink);text-decoration:none;background:#fff;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.hub-cat:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow-pop);text-decoration:none}
.hub-top{position:relative;display:flex;align-items:center;justify-content:center;height:150px;background:radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.22),transparent 55%),linear-gradient(145deg,var(--brand),color-mix(in srgb,var(--brand) 62%,#b83ec6))}
.hub-big{width:88px;height:88px;filter:drop-shadow(0 10px 18px rgba(20,8,80,.28));transition:transform .3s cubic-bezier(.34,1.4,.64,1)}
.hub-cat:hover .hub-big{transform:scale(1.08) translateY(-2px)}
.hub-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
@media (max-width:560px){.hub-top{height:120px}.hub-big{width:72px;height:72px}}
.hub-cat b{font:700 17px/1.3 var(--display)}
.hub-cat small{color:var(--ink-muted);font-size:12.5px}
.hub-thumbs{display:flex;gap:6px;margin-top:8px}
.hub-thumbs img{height:34px;width:auto;max-width:60px;border-radius:5px;box-shadow:var(--shadow-raise)}

.cmp-tray{position:fixed;left:0;right:0;bottom:0;z-index:26;background:var(--surface-ink);color:var(--on-ink);padding-bottom:env(safe-area-inset-bottom,0);box-shadow:0 -8px 24px rgba(13,17,42,.2)}
.cmp-in{display:flex;align-items:center;gap:12px;padding-block:10px}
.cmp-thumbs{display:flex;align-items:center;gap:8px}
.cmp-thumbs img{height:46px;width:auto;max-width:none;flex:none;object-fit:contain;border-radius:5px}
.cmp-count{font:600 12.5px/1 var(--mono);color:var(--on-ink-muted);margin-inline-end:auto}
.cmp-clear{font:600 12.5px/1 var(--body);color:var(--on-ink-muted);background:none;border:none;cursor:pointer}
.cmp-tray .btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:none}
.cmp-tray .btn.disabled{opacity:.55;pointer-events:none}

/* ---------- go page ---------- */
.pg-go{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--surface-100);padding:20px}
.go-box{max-width:460px;width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:32px 26px;text-align:center;box-shadow:var(--shadow-raise)}
.go-box h1{font:700 21px/1.35 var(--display);margin:18px 0 8px}
.go-box p{color:var(--ink-muted);font-size:13.5px;margin:0 0 18px}
.go-note{font-size:11.5px!important;margin:18px 0 0!important}

/* ---------- NerdWallet-style additions: "เหมาะสำหรับ", quick pros, summary table, compare-3 ---------- */
.pc-best{margin:0;font-size:13px;color:var(--ink)}
.pc-best b,.rv-best b{color:var(--brand);font-weight:700}
.rv-best{margin:-6px 0 14px;font-size:14px}
.pc-take{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink)}
.pc-take b{font-weight:700}
.pc-quick{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.pc-quick li{font-size:13px}
@media (max-width:760px){.pc-quick{grid-template-columns:1fr}}
.pc-brands{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--ink-muted)}
.pc-brands img{width:26px;height:26px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:7px;padding:3px}
.pc-offer a{font-weight:700;color:var(--ink)}
.pc-elig{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--good);margin-inline:6px 0}
@media (max-width:560px){.pc-foot{flex-wrap:wrap}.pc-elig{margin:0;order:3;width:100%}.pc-link{order:1}.pc-cmp{order:2}}
.cat-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cat-tools a{display:inline-flex;align-items:center;gap:7px;font:600 13px/1.2 var(--body);color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:9px 14px;background:#fff;text-decoration:none}
.cat-tools a:hover{border-color:var(--brand);color:var(--brand)}
.sum-wrap{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.sum{width:100%;border-collapse:collapse;font-size:13px}
.sum th{background:var(--surface-100);text-align:left;font-size:12px;color:var(--ink-muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line)}
.sum td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.sum tr:last-child td{border-bottom:0}
.sum td b{display:block;font:600 13.5px/1.3 var(--display)}
.sum td small{display:block;font-size:11.5px;color:var(--ink-muted);line-height:1.35}
.sum td > a:not(.btn){font-weight:600;color:var(--ink)}
.sum-img{width:104px}
.sum-img a{display:block}
.sum-img img{display:block;width:80px;height:auto;aspect-ratio:1.586;object-fit:contain;object-position:left center;border-radius:6px;box-shadow:var(--shadow-raise)}
.sum-card a{display:flex;flex-direction:column;align-items:flex-start;gap:6px;color:var(--ink);text-decoration:none}
.sum-card b{font:700 14px/1.3 var(--display)}
.sum-cta{text-align:center;white-space:nowrap}
.sum tr.me td{background:color-mix(in srgb,var(--brand) 5%,transparent)}
.sum-cta a:not(.btn){display:block;font-size:11.5px;margin-top:6px;color:var(--good);font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:760px){
  .sum thead{display:none}
  .sum tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:14px;border-bottom:1px solid var(--line)}
  .sum tr:last-child{border-bottom:0}
  .sum td{padding:0;border:0}
  .sum td[data-l]::before{content:attr(data-l);display:block;font-size:11px;color:var(--ink-muted);font-weight:600;margin-bottom:2px}
  .sum-img{grid-column:1/-1;width:auto}
  .sum-card,.sum-cta{grid-column:1/-1}
  .sum-cta{display:flex;align-items:center;gap:14px;text-align:left}
  .sum-cta a:not(.btn){margin:0}
}
.rv-max,.rv-cmp,.gp-steps,.gp-cards,.gp-terms,.gp-more,.pg-gift .faq{margin-top:clamp(36px,6vw,56px)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:st;max-width:820px}
.steps li{counter-increment:st;display:grid;grid-template-columns:34px 1fr;gap:2px 14px;align-items:start}
.steps li::before{content:counter(st);grid-row:span 2;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;font:700 15px/34px var(--mono);text-align:center}
.steps b{font:700 15px/1.4 var(--display)}
.steps span{font-size:13.5px;color:var(--ink-muted);line-height:1.6}
.cmp3{min-width:640px}
.cmp3 thead th{background:#fff;vertical-align:bottom;white-space:normal;text-align:center}
.cmp3 thead th a{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink);text-decoration:none}
.cmp3 thead th img{width:auto;height:auto;max-width:96px;max-height:60px;border-radius:7px;box-shadow:var(--shadow-raise)}
.cmp3 thead th b{font:700 13.5px/1.3 var(--display)}
.cmp3 thead th small{display:inline-block;margin-top:6px;font:700 10.5px/1 var(--body);color:var(--brand);background:var(--brand-tint);border-radius:999px;padding:4px 8px}
.cmp3 tbody th{white-space:normal;width:150px;background:var(--surface-100)}
.cmp3 td{text-align:center}
.cmp3 td b{display:block;font:600 13.5px/1.3 var(--display)}
.cmp3 .me{background:color-mix(in srgb,var(--brand-tint) 45%,white)}
.cmp3 .rating{justify-content:center}

/* ---------- gifts: homepage gallery, hub, gift pages ---------- */
.gifts-home{margin-top:clamp(40px,7vw,64px)}
.gh-head{text-align:center;max-width:680px;margin-inline:auto}
.gh-head h2{font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,30px);letter-spacing:-.015em;margin:8px 0 6px;text-wrap:balance}
.gh-head p{color:var(--ink-muted);font-size:13.5px;margin:0}
.gh-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:12px;overflow-x:auto;padding:18px 2px 8px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.gh-row > *{scroll-snap-align:start}
@media (min-width:1000px){.gifts-home .gh-row{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}}
.gh-more{text-align:center;margin:10px 0 0}
.gift-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:6px}
.gtile{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.gtile:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow-raise);text-decoration:none}
.gtile[hidden]{display:none}
.gtile-art{position:relative;display:flex;align-items:center;justify-content:center;height:128px;background:color-mix(in srgb,var(--tint) 13%,white)}
.gtile-kind,.gp-art .gtile-kind{position:absolute;top:10px;left:10px;font:700 11px/1 var(--body);color:#fff;background:var(--tint);border-radius:999px;padding:5px 9px}
.gtile-body{display:flex;flex-direction:column;gap:4px;padding:14px 14px 16px;flex:1}
.gtile-t{font:700 15.5px/1.3 var(--display);text-wrap:balance}
.gtile-v{font-size:13px;color:var(--good);font-weight:700}
.gtile-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-muted);margin-top:auto;padding-top:8px}
.gtile-meta img{height:16px;width:auto;border-radius:3px}
.gtile-when{align-self:flex-start;font:600 11.5px/1 var(--body);color:var(--ink-muted);background:var(--surface-100);border-radius:999px;padding:5px 9px;margin-top:6px}
.gtile-when.soon{color:var(--crit);background:color-mix(in srgb,var(--crit) 9%,white)}
.empty-note{background:var(--surface-100);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;color:var(--ink-muted)}
.gp-hero{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:clamp(22px,5vw,52px);align-items:center;padding-block:clamp(20px,4vw,36px) 8px}
.gp-art{position:relative;border-radius:var(--radius-xl);background:color-mix(in srgb,var(--tint) 13%,white);display:flex;align-items:center;justify-content:center;aspect-ratio:4/3}
.gp-art svg{width:78%;height:auto}
.gp-bank{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-muted)}
.gp-bank img{height:20px;width:auto;border-radius:4px}
.gp-body h1{font-family:var(--display);font-weight:700;font-size:clamp(26px,4vw,38px);letter-spacing:-.02em;line-height:1.25;margin:10px 0 8px;text-wrap:balance}
.gp-short{color:var(--ink-muted);font-size:15px;margin:0 0 16px;max-width:60ch}
.gp-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
.gp-facts > div{background:var(--surface-100);border:1px solid var(--line);border-radius:var(--radius-md);padding:12px}
.gp-facts span{display:block;font-size:11.5px;color:var(--ink-muted);font-weight:600}
.gp-facts b{display:block;font:700 15px/1.3 var(--display);margin-top:2px}
.gp-facts small{display:block;font-size:11.5px;color:var(--ink-muted)}
.gp-facts .gp-left{color:var(--crit);font-weight:700}
.gp-facts .gp-left:empty{display:none}
.gp-expired{background:color-mix(in srgb,var(--crit) 8%,white);border-radius:12px;padding:12px 14px;color:var(--crit);font-weight:600}
.gp-tiers{margin-top:18px;max-width:820px}
.gp-tiers .ct{min-width:0}
.gp-terms ul{max-width:820px;margin-bottom:14px}
.sticky-in .gift-art{flex:none;width:46px;height:auto}
.sticky-t small{font-size:11.5px;color:var(--ink-muted)}
@media (max-width:760px){.gp-hero{grid-template-columns:1fr}.gp-art{max-width:320px;margin-inline:auto;width:100%}.gp-facts{grid-template-columns:1fr 1fr}.gp-facts > div:last-child{grid-column:1/-1}}

/* ---------- eligibility checker ---------- */
.pg-elig main{padding-bottom:40px}
/* tool hero (eligibility, gifts): text + feature chips + a small illustration drawn in CSS with Liquid Glass icons */
.xh{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(16px,4vw,48px);align-items:center;padding-block:clamp(14px,3vw,28px) clamp(20px,3vw,32px)}
.xh-kicker{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--body);color:var(--brand);background:var(--brand-tint);padding:7px 13px 7px 10px;border-radius:999px;letter-spacing:.02em}
.xh h1{font:700 clamp(30px,4.6vw,48px)/1.24 var(--display);letter-spacing:-.025em;margin:14px 0 14px;text-wrap:balance}
.xh-grad{display:block;width:fit-content;max-width:100%;background:linear-gradient(90deg,var(--brand),#b83ec6);-webkit-background-clip:text;background-clip:text;color:transparent;padding-block:.2em .14em;margin-block:-.2em -.14em} /* the padding gives Thai tone marks and vowels above/below the line box some gradient to show through */
.hero .xh-grad,.quiz-head .xh-grad{margin-inline:auto}
.xh-grad-in{display:inline-block;vertical-align:baseline} /* inline highlight inside a heading line */
.cat-hero > .xh-kicker + h1{margin-top:14px}
.xh-sub{margin:0;max-width:56ch;color:var(--ink-muted);font-size:15.5px;line-height:1.7}
.xh-feats{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.xh-feats li{display:flex;align-items:center;gap:9px;padding:8px 14px 8px 9px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.xh-feats img{width:30px;height:30px;flex:none}
.xh-feats b{display:block;font:700 12.5px/1.3 var(--display);white-space:nowrap}
.xh-feats small{display:block;font-size:11px;color:var(--ink-muted);line-height:1.35;white-space:nowrap}
.xh-art{position:relative;height:300px;max-width:440px;width:100%;justify-self:end}
.xh-blob{position:absolute;inset:6% 2% 4% 8%;border-radius:46% 54% 52% 48%/55% 45% 55% 45%;background:radial-gradient(60% 60% at 60% 40%,color-mix(in srgb,var(--brand) 22%,white),color-mix(in srgb,#b83ec6 10%,white) 60%,rgba(255,255,255,0) 100%);filter:blur(2px)}
.xh-card{position:absolute;width:62%;aspect-ratio:1.586;border-radius:18px;box-shadow:0 18px 36px rgba(60,30,160,.22),inset 0 1px 0 rgba(255,255,255,.5);overflow:hidden}
.xh-card::before{content:"";position:absolute;left:12%;top:30%;width:16%;height:24%;border-radius:6px;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.55));box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.xh-card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 38%)}
.xh-card.c1{left:22%;top:6%;transform:rotate(-8deg);background:linear-gradient(135deg,#6b4cf0,#8f6af5 55%,#b9a4ff)}
.xh-card.c2{left:8%;top:24%;transform:rotate(-14deg);background:linear-gradient(135deg,#7f8cf8,#a9b4ff 60%,#d9ddff)}
.xh-card.c3{left:30%;top:36%;transform:rotate(-4deg);background:linear-gradient(135deg,#f3a6d8,#c9a2ff 55%,#9fd0ff)}
.xh-badge{position:absolute;right:4%;bottom:6%;width:104px;height:104px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 16px 34px rgba(29,122,82,.22),0 0 0 8px rgba(255,255,255,.55)}
.xh-badge img{width:76px;height:76px}
.xh-spark{position:absolute;width:18px;height:18px;background:color-mix(in srgb,var(--brand) 55%,white);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.xh-spark.s1{right:6%;top:4%;width:22px;height:22px;background:#f5c451}
.xh-spark.s2{left:2%;bottom:30%}
.xh-spark.s3{right:30%;top:0;width:12px;height:12px}
@media (max-width:820px){.xh{grid-template-columns:1fr}.xh-art{order:-1;height:200px;max-width:300px;justify-self:center;margin-bottom:-6px}.xh-badge{width:78px;height:78px}.xh-badge img{width:56px;height:56px}}
@media (max-width:560px){.xh-feats li{flex:1 1 100%}}
/* gifts hero art: a large glass gift in front of a tilted card, with luggage and coins floating around */
.xh-art-gift .xh-card.c1{left:10%;top:14%;width:56%;transform:rotate(-12deg)}
.xh-art-gift .xh-card.c2{left:34%;top:8%;width:52%;transform:rotate(9deg);background:linear-gradient(135deg,#f3a6d8,#c9a2ff 55%,#9fd0ff)}
.xh-gift{position:absolute;left:50%;top:52%;width:62%;max-width:230px;transform:translate(-50%,-50%);filter:drop-shadow(0 22px 30px rgba(192,53,53,.28))}
.xh-float{position:absolute;filter:drop-shadow(0 12px 20px rgba(60,30,160,.2));animation:xhFloat 5s ease-in-out infinite}
.xh-float.f1{left:4%;top:8%;width:78px;animation-delay:-1.2s}
.xh-float.f2{right:4%;bottom:10%;width:84px}
@keyframes xhFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.xh-float{animation:none}}
@media (max-width:820px){.xh-float.f1{width:56px}.xh-float.f2{width:60px}}
.xh-disc{margin:14px 0 0}


/* shared step card */
.el{display:grid;gap:18px}
.el-step,.el-method{border:1px solid var(--line);border-radius:var(--radius-xl);padding:clamp(18px,3vw,30px);background:#fff;box-shadow:0 1px 2px rgba(13,17,42,.04),0 10px 30px rgba(13,17,42,.05)}
.el-sh{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.el-sh > div{flex:1;min-width:0}
.el-sh h2{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:700 clamp(19px,2.4vw,22px)/1.3 var(--display);margin:4px 0 2px}
.el-sh p{margin:0;font-size:13px;color:var(--ink-muted)}
.el-n{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 16px/1 var(--display);color:#fff;background:linear-gradient(145deg,var(--brand),color-mix(in srgb,var(--brand) 62%,#b83ec6));box-shadow:0 6px 14px rgba(94,64,234,.3)}
.el-cnt{font:600 12px/1 var(--body);color:var(--brand);background:var(--brand-tint);border-radius:999px;padding:6px 10px}
.el-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
@media (max-width:560px){.el-grid{grid-template-columns:1fr}}
.el-f{border:0;margin:0 0 18px;padding:0;min-width:0;display:block}
.el-l{display:block;font:600 13.5px/1.4 var(--body);color:var(--ink);margin-bottom:9px;padding:0}
.el-inp{display:flex;align-items:center;gap:10px;position:relative}
.el-inp > i{position:absolute;left:15px;top:50%;transform:translateY(-50%);display:flex;color:var(--ink-faint);pointer-events:none}
.el-inp input{flex:1;min-width:0;height:52px;font:600 16px/1 var(--body);border:1.5px solid var(--line);border-radius:14px;padding:0 16px 0 46px;background:#fff;color:var(--ink);transition:border-color .16s ease,box-shadow .16s ease}
.el-inp input::placeholder{color:var(--ink-faint);font-weight:500}
.el-inp input:hover{border-color:var(--line-control)}
.el-inp input:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
.el-inp em{font-style:normal;font-size:13px;color:var(--ink-muted);min-width:24px}
/* unit suffix after the number (e.g. "1,000 บาท") instead of the default icon-on-the-left layout */
.el-inp.el-suffix > i{left:auto;right:15px;font-style:normal;font-size:14px}
.el-inp.el-suffix input{padding:0 46px 0 16px}
/* calculator page: step-number circle sits closer to the heading text */
.pg-calc .el-n{margin-top:-22px;margin-bottom:10px}
.el-chips{display:flex;flex-wrap:wrap;gap:8px}
.el-chips button{display:inline-flex;align-items:center;gap:8px;font:600 13px/1.2 var(--body);border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:10px 16px;cursor:pointer;transition:border-color .16s ease,background-color .16s ease,color .16s ease}
.el-chips button > i{display:flex;color:var(--ink-faint);transition:color .16s ease}
.el-chips button:hover{border-color:var(--line-control)}
.el-chips button.on{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-strong);box-shadow:0 0 0 1px var(--brand) inset}
.el-chips button.on > i{color:var(--brand)}
.el-chips button img{height:16px;width:auto;border-radius:3px;background:#fff}
/* level bars on the tenure / debt-ratio chips (1–4 bars filled) */
.lv{display:inline-flex;align-items:flex-end;gap:2px;height:14px;color:var(--ink-faint)}
.lv i{display:block;width:3px;border-radius:2px;background:currentColor;opacity:.28}
.lv i:nth-child(1){height:5px}.lv i:nth-child(2){height:8px}.lv i:nth-child(3){height:11px}.lv i:nth-child(4){height:14px}
.lv[data-l="1"] i:nth-child(-n+1),.lv[data-l="2"] i:nth-child(-n+2),.lv[data-l="3"] i:nth-child(-n+3),.lv[data-l="4"] i{opacity:1}
.el-chips button.on .lv{color:var(--brand)}
.el-hint{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:12px;color:var(--ink-muted)}
.el-hint > i{display:flex;color:var(--ink-faint)}
.el-more{border-top:1px dashed var(--line);padding-top:14px;margin-top:2px}
.el-more summary{cursor:pointer;font:600 13.5px/1.4 var(--body);color:var(--brand);margin-bottom:14px}
.el-part2{margin-top:10px;padding-top:26px;border-top:1px solid var(--line)} /* steps 1 and 2 share one card */
.el-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.el-submit{padding:15px 26px;font-size:15px;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 70%,#b83ec6))}
.el-submit.btn-ic-lg{padding:5px 26px}
.el-submit:hover{background:linear-gradient(135deg,var(--brand-strong),color-mix(in srgb,var(--brand-strong) 70%,#b83ec6))}
.el-submit > i{display:flex}
.el-miss{margin:0;font-size:13px;color:var(--crit);font-weight:600}
.el-miss:empty{display:none}
.el-reset{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--body);color:var(--ink-muted);background:none;border:0;padding:8px 4px;cursor:pointer}
.el-reset:hover{color:var(--brand)}
.el-reset > i{display:flex}
/* card picker */
.el-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.el-types{display:flex;flex-wrap:wrap;gap:6px}
.el-types button{font:600 12.5px/1 var(--body);border:0;background:var(--surface-100);color:var(--ink);border-radius:999px;padding:9px 14px;cursor:pointer;transition:background-color .16s ease,color .16s ease}
.el-types button:hover{background:var(--surface-200)}
.el-types button.on{background:var(--brand);color:#fff}
.el-search{position:relative;display:flex;align-items:center;flex:0 1 260px}
.el-search > i{position:absolute;left:13px;display:flex;color:var(--ink-faint);pointer-events:none}
.el-search input{width:100%;font:500 13.5px/1 var(--body);border:1.5px solid var(--line);border-radius:999px;padding:10px 14px 10px 38px;background:#fff;color:var(--ink)}
.el-search input:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
@media (max-width:560px){.el-search{flex:1 1 100%}}
.el-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.el-card{position:relative;display:flex;align-items:center;gap:12px;text-align:left;border:1.5px solid var(--line);border-radius:var(--radius-md);background:#fff;padding:12px 38px 12px 12px;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.el-card:hover{border-color:var(--line-control);transform:translateY(-1px)}
.el-card img{width:64px;height:40px;object-fit:contain;flex:none;border-radius:5px;filter:drop-shadow(0 2px 4px rgba(13,17,42,.18))}
.el-card-t{min-width:0}
.el-card b{display:block;font:600 13px/1.3 var(--display)}
.el-card-m{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:4px;font-size:11px;color:var(--ink-muted)}
.el-card-m em{font:600 10.5px/1 var(--body);font-style:normal;border-radius:999px;padding:4px 8px;background:var(--brand-tint);color:var(--brand-strong)}
.el-card-m .t-cashback{background:var(--accent-tint);color:var(--good)}
.el-card-m .t-miles,.el-card-m .t-travel{background:color-mix(in srgb,var(--hue-steel) 12%,white);color:var(--hue-steel)}
.el-card-m .t-premium{background:color-mix(in srgb,var(--hue-indigo) 12%,white);color:var(--hue-indigo)}
.el-card-m .t-online{background:color-mix(in srgb,var(--hue-magenta) 12%,white);color:var(--hue-magenta)}
.el-card-m .t-starter{background:color-mix(in srgb,var(--hue-teal) 12%,white);color:var(--hue-teal)}
.el-tick{position:absolute;right:12px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;border:1.5px solid var(--line-control);transition:background-color .16s ease,border-color .16s ease}
.el-card.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand-tint) 55%,white);box-shadow:0 0 0 3px var(--brand-tint)}
.el-card.on .el-tick{background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/13px no-repeat;border-color:var(--brand)}
.el-card:disabled{opacity:.45;cursor:not-allowed;transform:none}
.el-none{color:var(--ink-muted);font-size:13px}
.el-showall{display:flex;align-items:center;gap:6px;margin:16px auto 0;font:600 13px/1 var(--body);color:var(--brand);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:11px 20px;cursor:pointer}
.el-showall:hover{border-color:var(--brand)}
/* how we assess: six factor tiles, details below */
.el-method{margin-top:clamp(28px,5vw,40px)}
.el-mic{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--hue-teal);background:color-mix(in srgb,var(--hue-teal) 12%,white)}
.el-mic > i{display:flex}
.el-factors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0}
.el-factors li{--h:var(--brand);display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:6px 10px}
.el-factors li + li{border-left:1px solid var(--line)}
.el-factors .h-steel{--h:var(--hue-steel)}.el-factors .h-indigo{--h:var(--hue-indigo)}.el-factors .h-teal{--h:var(--hue-teal)}.el-factors .h-magenta{--h:var(--hue-magenta)}
.el-fi{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--h);background:color-mix(in srgb,var(--h) 11%,white);margin-bottom:6px}
.el-fi > i{display:flex}
.el-factors b{font:700 13px/1.35 var(--display)}
.el-factors small{font-size:11.5px;color:var(--ink-muted);line-height:1.45}
@media (max-width:900px){.el-factors{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}.el-factors li:nth-child(4){border-left:0}}
@media (max-width:480px){.el-factors{grid-template-columns:repeat(2,minmax(0,1fr))}.el-factors li:nth-child(odd){border-left:0}.el-factors li:nth-child(4){border-left:1px solid var(--line)}}
.el-mdetail{margin-top:20px;border-top:1px dashed var(--line);padding-top:14px}
.el-mdetail summary{cursor:pointer;font:600 13.5px/1.4 var(--body);color:var(--brand)}
.el-mdetail .method-list{margin-top:12px}
.el-mdetail p{font-size:13px;color:var(--ink-muted);margin:10px 0 0}
.el-results{margin-top:clamp(28px,5vw,40px)}
.el-rhead h2{font:700 clamp(21px,2.6vw,26px)/1.3 var(--display);margin:0 0 4px;outline:none}
.el-rhead p{margin:0 0 16px;color:var(--ink-muted);font-size:13.5px}
#elList,#elAltList{display:grid;gap:12px}
.el-res{--gc:var(--ink-muted);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 18px;background:#fff;display:grid;gap:12px;box-shadow:0 1px 2px rgba(13,17,42,.04),0 8px 24px rgba(13,17,42,.05)}
.el-res.b-high{--gc:var(--good)}.el-res.b-mid{--gc:var(--warn)}.el-res.b-low,.el-res.b-vlow{--gc:var(--crit)}
.el-res-h{display:grid;grid-template-columns:auto 72px 1fr 170px;gap:12px;align-items:center}
.el-res-h > img{width:72px;height:46px;object-fit:contain;border-radius:6px}
.el-res-t a{color:var(--ink);text-decoration:none}
.el-res-t a:hover b{color:var(--brand)}
.el-res-t b{display:block;font:600 14.5px/1.3 var(--display)}
.el-res-t small{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-muted);margin-top:2px}
.el-gauge{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 10px}
.el-gauge .el-band{justify-self:end;font:700 11px/1 var(--body);color:var(--gc);background:color-mix(in srgb,var(--gc) 12%,white);border-radius:999px;padding:5px 9px;white-space:nowrap}
.el-gauge b{font:700 24px/1 var(--display);color:var(--gc)}
.el-gauge i{grid-column:1/-1;display:block;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--gc) var(--p),var(--surface-200) var(--p))}
.el-notes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.el-notes li{display:flex;align-items:flex-start;gap:7px;font-size:13px;line-height:1.5}
.el-notes .ic-inline{flex:none;margin-top:3px}
.n-ok .ic-inline{color:var(--good)}.n-warn .ic-inline{color:var(--warn)}.n-bad .ic-inline{color:var(--crit)}
.el-gift{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:13px;background:var(--accent-tint);border-radius:12px;padding:9px 12px}
.el-gift a{font-weight:700;color:var(--ink)}
.el-gift small{display:block;color:var(--ink-muted)}
.el-gift.no{background:var(--surface-100)}
.el-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.el-more-l{font-weight:700;font-size:13px}
.el-alt{margin-top:22px}
.el-alt h3{font:700 17px/1.3 var(--display);margin:0 0 10px}
.el-disc{margin:18px 0 0;font-size:12px;color:var(--ink-faint);max-width:80ch}
@media (max-width:680px){.el-res-h{grid-template-columns:auto 72px 1fr}.el-gauge{grid-column:1/-1}.el-notes{grid-template-columns:1fr}}
/* gift page: every listed card carries the same gift — don't repeat it in each card */
.gp-cards .pc-offer{display:none}
/* a few issuers publish portrait card art (UOB One, UOB Simple) — keep every thumbnail in a landscape box */
.el-spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;margin-inline-end:8px;vertical-align:-2px;animation:elspin .8s linear infinite}
@keyframes elspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.el-spin{animation:none}}
/* "ดูอีก N ใบ" under long category lists (same look as the homepage grid button) */
.plist + .grid-more{display:block;margin:22px auto 0;font:700 14px/1 var(--body);color:var(--ink);background:#fff;border:1.5px solid var(--line-control);border-radius:999px;padding:13px 22px;cursor:pointer}
.plist + .grid-more:hover{border-color:var(--ink)}
.plist + .grid-more[hidden]{display:none}
/* the hidden attribute always wins over component display rules (filters/pagination rely on it) */
[hidden]{display:none!important}
/* ---------- calculator ---------- */
.cx{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:24px;align-items:start;margin-top:8px}
.cx-in{position:sticky;top:84px}
.cx-rows{display:grid;gap:10px;margin-top:12px}
.cx-row{display:grid;grid-template-columns:1fr 150px;gap:10px;align-items:center}
.cx-row b{display:block;font:600 13.5px/1.3 var(--display)}
.cx-row small{display:block;font-size:11.5px;color:var(--ink-muted)}
.cx-row input{width:100%}
.cx-total{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-muted)}
.cx-total b{font:700 18px/1 var(--display);color:var(--ink)}
.cx-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.cx-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;padding:14px 16px;display:grid;gap:10px}
.cx-h{display:grid;grid-template-columns:auto 72px 1fr auto;gap:12px;align-items:center}
.cx-h > img{width:72px;height:46px;object-fit:contain}
.cx-t b{font:600 14.5px/1.3 var(--display);color:var(--ink)}
.cx-t a{text-decoration:none}
.cx-t small{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-muted);margin-top:2px}
.cx-v{text-align:right}
.cx-v b{display:block;font:700 24px/1 var(--display);color:var(--good)}
.cx-v span{font-size:11.5px;color:var(--ink-muted)}
.cx-break{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font-size:12.5px}
.cx-break div{display:flex;gap:6px}
.cx-break dt{color:var(--ink-muted)}
.cx-break dd{margin:0;font-weight:600}
.cx-more-d summary{cursor:pointer;font-size:12.5px;color:var(--brand);font-weight:600}
.cx-more-d ul{margin:8px 0 0;padding-left:18px;font-size:12.5px;color:var(--ink-muted)}
.cx-more-d p{margin:6px 0 0;font-size:12px;color:var(--ink-muted)}
.cx-card .pc-offer{margin:0}
.cx-out .grid-more{display:block;margin:18px auto 0;font:700 14px/1 var(--body);color:var(--ink);background:#fff;border:1.5px solid var(--line-control);border-radius:999px;padding:13px 22px;cursor:pointer}
@media (max-width:860px){.cx{grid-template-columns:1fr}.cx-in{position:static}}
@media (max-width:520px){.cx-row{grid-template-columns:1fr 128px}.cx-h{grid-template-columns:auto 56px 1fr}.cx-h > img{width:56px;height:36px}.cx-v{grid-column:1/-1;text-align:left;display:flex;align-items:baseline;gap:6px}.cx-v b{display:inline}}
/* ---------- brands hub + merchant pages ---------- */
.brand-cats a{display:inline-flex;align-items:center;text-decoration:none}
.bh-group{margin-top:clamp(28px,5vw,44px)}
.bh-group h2{font:700 clamp(19px,2.4vw,23px)/1.3 var(--display);margin:0 0 12px}
.bh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.bh-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:14px 8px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;text-decoration:none;color:var(--ink)}
.bh-item:hover{border-color:var(--brand)}
.bh-item img{width:44px;height:44px;object-fit:contain;border-radius:10px}
.bh-item b{font:600 13px/1.25 var(--display)}
.bh-item small{font-size:11.5px;color:var(--ink-muted)}
.brand-hero{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.brand-hero-logo{display:grid;place-items:center;width:88px;height:88px;border:1px solid var(--line);border-radius:22px;background:#fff}
.brand-hero-logo img{width:64px;height:64px;object-fit:contain;border-radius:12px}
.brand-item{text-decoration:none;color:inherit}
@media (max-width:560px){.brand-hero{grid-template-columns:1fr}.brand-hero-logo{width:64px;height:64px;border-radius:16px}.brand-hero-logo img{width:46px;height:46px}.bh-grid{grid-template-columns:repeat(3,1fr)}}
.brand-cats{margin-top:14px}
.brand-cats a{font:600 12.5px/1 var(--body);border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:8px 13px}
.brand-cats a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.bh-group{scroll-margin-top:0}
/* ---------- gift banner sliders (tiles + gift page hero) ---------- */
.gtile-art{height:auto;aspect-ratio:27/19}
.gslide{position:relative;overflow:hidden}
.gtile-art.gslide{display:block;background:var(--surface-100)}
.gtile-art.gslide.multi{padding-bottom:18px}
.gs-track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.gs-track::-webkit-scrollbar{display:none}
.gs-slide{position:relative;flex:0 0 100%;height:100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:var(--surface-100)}
.gs-bg{position:absolute;inset:-14%;width:128%;height:128%;object-fit:cover;filter:blur(20px) saturate(1.2);opacity:.85}
.gs-img{position:relative;display:block;width:100%;height:100%;object-fit:contain}
.gs-dots{display:flex;justify-content:center;align-items:center;gap:5px}
.gtile-art .gs-dots{position:absolute;left:0;right:0;bottom:5px;pointer-events:none}
.gs-dots > *{width:7px;height:7px;padding:0;border:0;border-radius:4px;background:var(--ink);opacity:.22;transition:width .2s ease,opacity .2s ease}
.gs-dots > .on{width:18px;opacity:.75;background:var(--brand)}
.gtile-k{align-self:flex-start;font:700 11px/1 var(--body);color:var(--tint);background:color-mix(in srgb,var(--tint) 11%,white);border-radius:999px;padding:4px 8px;margin-bottom:2px}
/* hero */
.gp-hero.has-media{grid-template-columns:minmax(0,480px) 1fr;align-items:start}
.gp-media{min-width:0}
.gs-frame{position:relative;border-radius:var(--radius-xl);overflow:hidden;background:var(--surface-100);box-shadow:var(--shadow-raise)}
.gs-frame .gs-track{height:auto;align-items:flex-start}
.gs-frame .gs-slide{height:auto;background:none}
.gs-frame .gs-img{height:auto}
.gs-frame .gs-track:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.gs-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px;margin-top:10px}
.gs-cap{display:flex;align-items:center;gap:6px;min-width:0;font:600 13px/1.3 var(--body);color:var(--ink)}
.gs-cap span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-cap svg{flex:none;color:var(--brand)}
.gs-bar .gs-dots{flex:none}
.gs-bar .gs-dots button{width:9px;height:9px;cursor:pointer}
.gs-bar .gs-dots button.on{width:22px}
.gs-nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:38px;height:38px;margin-top:-19px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.18);cursor:pointer;opacity:.9;transition:opacity .15s ease,transform .15s ease}
.gs-nav:hover{opacity:1;transform:scale(1.06)}
.gs-prev{left:10px}.gs-prev svg{transform:rotate(180deg)}
.gs-next{right:10px}
.gp-media-src{margin:6px 2px 0;font-size:11.5px;color:var(--ink-muted)}
.sticky-banner{width:60px!important;height:42px!important;object-fit:cover;border-radius:6px}
@media (hover:hover){.gs-nav{opacity:0}.gs-frame:hover .gs-nav,.gs-nav:focus-visible{opacity:.9}}
@media (max-width:760px){.gp-hero.has-media{grid-template-columns:1fr}.gp-media{width:100%;max-width:520px;margin-inline:auto}}

/* ---------- 10-question recommender widget (homepage + quiz.html, assets/mq.js) ---------- */
/* mini-recommender — a real, working 10-question "แนะนำบัตรให้คุณ" right on the homepage */
/* built from the design system's ChoiceCard component: fanned colour cards on the surface-ink ground, */
/* the picked one always taking the brand-fill + lift + "เลือกข้อนี้" pill treatment. mobile-first throughout. */
.mq-wrap{position:relative;max-width:750px;margin:clamp(32px,6vw,56px) auto 0}
.mq-chip{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--on-accent);border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:700;box-shadow:var(--shadow-raise);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;z-index:2}
.mq{position:relative;isolation:isolate;border-radius:var(--radius-xl);padding:22px 14px 20px;overflow:hidden;text-align:left;background:var(--surface-100);border:1px solid var(--line);color:var(--ink)}
.mq::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(165deg,var(--brand-strong),var(--surface-ink) 72%);opacity:1;transition:opacity .5s ease}
.mq:not(.mq-dark)::before{opacity:0}

.mq-dots{display:flex;justify-content:center;gap:5px;margin:18px 0 0}
.mq-dots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.22);transition:all .25s ease;font-style:normal}
.mq-dots i.done{background:var(--on-ink-muted)}
.mq-dots i.active{width:18px;background:var(--accent)}

.mq-step{text-align:center}
.mq-step-label{font:700 12px/1 var(--body);letter-spacing:.09em;color:var(--on-ink-muted);margin:20px 0 8px;text-transform:uppercase}
.mq-step h3{margin:0 0 18px;font-family:var(--display);font-weight:700;font-size:22px;line-height:1.3;color:var(--on-ink);letter-spacing:-.01em;text-wrap:balance;max-width:38ch;margin-inline:auto;outline:none}

/* fan of ChoiceCards — stacks to one plain column below 480px (per the DS spec), fans out with rotation above it.
   Only two hues plus the brand fill for the picked card, alternating indigo/magenta — never a third hue. */
.mq-fan{display:flex;flex-direction:column;gap:8px}
.mq-choice{width:100%;min-height:58px;display:flex;align-items:center;justify-content:flex-start;gap:12px;text-align:left;border:none;border-radius:var(--radius-lg);padding:10px;cursor:pointer;color:#fff;transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .2s ease,background-color .2s ease;font:inherit;background:var(--hue-indigo)}
.mq-choice:nth-child(even){background:var(--hue-magenta)}
.mq-choice:focus-visible{outline:2px solid var(--on-ink);outline-offset:3px}
.mq-choice svg{display:block;flex:none}
.mq-choice .t{font:600 15px/1.4 var(--body)}
.mq-pick{display:none;align-items:center;gap:4px;margin-inline-start:auto;background:var(--accent);color:var(--on-accent);font:700 11px/1 var(--body);padding:6px 10px;border-radius:999px;white-space:nowrap;flex:none}
.mq-choice.picked{background:var(--brand)!important;box-shadow:var(--shadow-fan)}
.mq-choice.picked .mq-pick{display:inline-flex}

.mq-nav{display:flex;justify-content:center;margin-top:16px;min-height:24px}
.mq-back{font:inherit;font-size:13px;font-weight:600;color:var(--on-ink-muted);background:none;border:none;cursor:pointer;padding:4px 2px;display:inline-flex;align-items:center;gap:4px}
.mq-back:hover{color:var(--on-ink)}

@media (min-width:480px){
  .mq{padding:26px 22px 22px}
  /* extra headroom above the fan so the -14px pick/hover lift never gets clipped by .mq's overflow:hidden */
  .mq-fan{flex-direction:row;justify-content:center;align-items:stretch;gap:6px;padding-top:16px}
  .mq-choice{flex:1 1 0;max-width:150px;min-width:0;min-height:176px;flex-direction:column;justify-content:center;gap:7px;text-align:center;padding:8px}
  .mq-choice .t{font-size:14px}
  .mq-fan[data-n="3"] .mq-choice:nth-child(1){transform:rotate(-6deg) translateY(9px)}
  .mq-fan[data-n="3"] .mq-choice:nth-child(2){transform:translateY(-5px)}
  .mq-fan[data-n="3"] .mq-choice:nth-child(3){transform:rotate(6deg) translateY(9px)}
  .mq-fan[data-n="4"] .mq-choice:nth-child(1){transform:rotate(-9deg) translateY(11px)}
  .mq-fan[data-n="4"] .mq-choice:nth-child(2){transform:rotate(-3deg) translateY(2px)}
  .mq-fan[data-n="4"] .mq-choice:nth-child(3){transform:rotate(3deg) translateY(2px)}
  .mq-fan[data-n="4"] .mq-choice:nth-child(4){transform:rotate(9deg) translateY(11px)}
  .mq-choice.picked{transform:translateY(-14px) rotate(0deg)!important;z-index:2;padding-bottom:17px}
  .mq-card-top img{width:112px}
}
/* desktop: preview the same lift-to-centre animation on hover as on pick (mouse-only, so touch/tablet taps aren't affected) */
@media (min-width:480px) and (hover:hover){
  .mq-fan .mq-choice:hover:not(.picked){transform:translateY(-14px) rotate(0deg);z-index:1}
}
@media (prefers-reduced-motion: reduce){.mq-choice{transition:background-color .2s ease}}

/* "analyzing" screen — shown briefly after the 10th answer, before the result appears */
.mq-analyzing{text-align:center;padding:18px 2px 4px}
.mq-fpills{max-width:300px;margin:auto;position:relative;min-height:70px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 8px;margin-bottom:22px;padding:0 6px}
.mq-fpill{display:inline-flex;padding:8px 14px;border-radius:999px;font:700 12.5px/1 var(--body);animation:mqBob 2.1s ease-in-out infinite;animation-delay:calc(var(--d, 0) * .18s)}
@keyframes mqBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.mq-analyzing .ttl{font-family:var(--display);font-weight:700;font-size:18px;color:var(--on-ink);margin:0 0 6px}
.mq-analyzing .sub{font-size:13.5px;color:var(--on-ink-muted);max-width:44ch;margin:0 auto}
@media (prefers-reduced-motion: reduce){.mq-fpill{animation:none}}

.rv-alias{margin:-4px 0 8px;font-size:14px;color:var(--ink-muted)}

/* ---------- icons: Icons8 "SF Regular" (assets/icons/sf/*.svg, traced from the PNGs; embedded below as data URIs so the masks also work when a page
   is opened straight from disk — browsers block mask images loaded from file://) drawn as a mask in the text colour (currentColor),
   so they follow the button/badge/tile colour. Quiz choice cards (.mq-choice) use Icons8
   "Liquid Glass" white instead (assets/icons/glass) — they sit on a coloured background. Arrows, external, search and
   similar UI glyphs stay line SVGs. ---------- */
.i8{display:inline-block;flex:none;background-color:currentColor!important;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;vertical-align:-0.2em}
.i8-bag{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M55 160C49 158 42 152 41 146C38 139 38 41 41 36C44 30 43 30 97 30L146 30L149 34L152 37L153 89C153 148 153 147 146 155C138 162 138 162 96 162C66 162 58 162 55 160ZM137 146L140 143L140 93L140 42L96 42L52 42L51 92C51 145 51 144 57 148L60 150L97 150L134 150L137 146ZM88 91C82 89 75 83 74 77C73 75 72 69 72 65C72 57 74 54 78 54C82 54 84 57 84 65C84 73 85 76 90 79C95 82 100 81 104 77C107 74 107 73 108 65C109 56 110 54 114 54C118 54 120 58 120 65C120 75 118 81 113 86C106 93 96 95 88 91Z%22/%3E%3C/svg%3E")}
.i8-barchart{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M35 160C33 158 33 157 33 116C33 74 33 73 35 71C37 69 38 69 51 69C64 69 65 69 67 71C69 73 69 74 69 116C69 157 69 158 67 160C65 162 64 162 51 162C38 162 37 162 35 160ZM80 160C78 158 78 157 78 123C78 89 78 88 80 86C82 84 83 84 96 84C109 84 110 84 112 86C114 88 114 89 114 123C114 157 114 158 112 160C110 162 109 162 96 162C83 162 82 162 80 160ZM125 160C123 158 123 157 123 101C123 44 123 43 125 41C127 39 128 39 141 39C154 39 155 39 157 41C159 43 159 44 159 100C159 157 159 158 157 160C155 162 154 162 141 162C128 162 127 162 125 160ZM57 116L57 81L51 81L45 81L45 116L45 150L51 150L57 150L57 116ZM102 123L102 96L96 96L90 96L90 123L90 150L96 150L102 150L102 123ZM147 100L147 51L141 51L135 51L135 100L135 150L141 150L147 150L147 100Z%22/%3E%3C/svg%3E")}
.i8-car{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M32 148L30 145L30 121C30 105 31 95 31 93C32 91 35 87 37 84C41 79 42 77 46 64C48 56 50 49 51 48C55 42 71 39 96 39C121 39 137 42 141 48C142 49 144 56 146 64C150 77 150 79 155 84C158 87 160 92 161 94C162 96 162 107 162 121L162 145L160 148C158 150 156 150 152 150C144 150 141 147 141 141L141 138L96 138L51 138L51 141C51 147 48 150 40 150C36 150 34 150 32 148ZM142 124L150 124L150 110L150 96L145 91L140 85L131 86C120 87 72 87 61 86L52 85L47 91L42 96L42 110L42 124L46 124C49 124 56 125 62 125C75 126 130 125 142 124ZM77 112C75 110 74 106 77 104C78 102 81 102 96 102C112 102 113 102 115 104C116 105 117 107 117 108C117 109 116 111 115 112C113 114 112 114 96 114C80 114 79 114 77 112ZM53 109C52 107 51 105 51 104C51 100 55 96 58 96C62 96 66 100 66 104C66 107 62 111 58 111C57 111 55 110 53 109ZM128 109C127 107 126 105 126 104C126 100 130 96 134 96C137 96 141 100 141 104C141 107 137 111 134 111C132 111 130 110 128 109ZM135 74C136 73 135 69 134 64C131 54 130 53 120 52C110 51 82 51 72 52C62 53 61 54 58 64C57 69 56 73 56 73C56 74 59 74 62 74C71 75 135 75 135 74Z%22/%3E%3C/svg%3E")}
.i8-card{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M40 145C36 143 34 141 32 136C30 133 30 126 30 96C30 63 30 59 32 56C34 51 36 49 41 47C47 44 145 44 151 47C156 49 158 51 160 56C162 59 162 63 162 96C162 126 162 133 160 136C158 141 156 143 152 145C148 147 144 147 96 147C48 147 44 147 40 145ZM148 133C150 131 150 130 150 105L150 78L96 78L42 78L42 104C42 130 42 131 44 133C46 135 47 135 96 135C145 135 146 135 148 133ZM150 64C150 62 149 60 148 59C146 57 145 57 96 57C47 57 46 57 44 59C43 60 42 62 42 64L42 66L96 66L150 66L150 64Z%22/%3E%3C/svg%3E")}
.i8-cards{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M56 154C49 151 45 145 45 137L45 132L40 132C35 132 28 129 26 126C21 121 21 119 21 84C21 54 21 50 23 46C25 42 27 40 32 38C35 36 43 36 84 36C135 36 136 36 141 41C144 43 147 50 147 55L147 60L152 60C160 60 166 64 169 70C171 74 171 78 171 108C171 136 171 142 169 145C167 150 165 152 160 154C157 156 153 156 108 156C63 156 59 156 56 154ZM157 142C159 140 159 139 159 120L159 99L153 99L147 99L147 108C147 121 144 127 136 130C133 132 126 132 95 132L57 132L57 136C57 139 58 141 59 142C61 144 62 144 108 144C154 144 155 144 157 142ZM133 118C135 116 135 115 135 96L135 75L84 75L33 75L33 96C33 115 33 116 35 118C37 120 38 120 84 120C130 120 131 120 133 118ZM159 80C159 75 156 72 151 72L147 72L147 78L147 84L153 84L159 84L159 80ZM135 56C135 53 134 51 133 50C131 48 130 48 84 48C38 48 37 48 35 50C34 51 33 53 33 56L33 60L84 60L135 60L135 56Z%22/%3E%3C/svg%3E")}
.i8-cart{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M62 170C58 169 55 164 54 161C53 149 66 143 74 151C77 154 78 155 78 159C78 163 77 164 74 167C71 170 65 172 62 170ZM128 170C124 169 121 164 120 161C119 149 132 143 140 151C143 154 144 155 144 159C144 163 143 164 140 167C137 170 131 172 128 170ZM53 133C45 129 45 127 39 89C35 71 33 52 32 49L31 42L19 42C8 42 7 42 5 40C4 39 3 37 3 36C3 35 4 33 5 32C7 30 8 30 22 30C34 30 38 30 39 31C41 32 42 35 42 39L44 44L104 45C163 45 165 46 167 47C168 50 169 49 164 76C160 102 158 106 151 109C147 111 144 111 100 111C57 111 54 111 54 113C55 114 55 116 56 118C56 120 57 121 58 122C59 123 76 123 103 123C145 123 146 123 148 125C149 126 150 128 150 129C150 130 149 132 148 133C146 135 145 135 102 135C59 135 57 135 53 133ZM146 98C148 97 149 92 151 79C153 70 154 61 154 60L155 57L100 57C58 57 46 57 46 58C46 59 47 68 49 79L52 99L98 99C135 99 145 99 146 98Z%22/%3E%3C/svg%3E")}
.i8-cash{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M151 164C146 163 77 158 48 157C35 157 29 156 26 155C21 153 19 149 18 142C18 138 17 136 15 133L12 130L12 88C12 41 12 41 19 38C22 36 30 36 97 36L173 36L176 40L180 43L180 86L180 130L177 133C174 137 174 137 174 145C174 159 170 164 159 165C155 165 152 165 151 164ZM161 152C161 151 162 148 162 144L162 138L96 138L30 138L30 140C30 141 30 143 31 144C31 144 38 145 50 145C74 146 112 149 136 151C160 153 159 153 161 152ZM167 125C169 123 169 51 167 49C165 47 27 47 25 49C23 51 23 123 25 125C27 127 165 127 167 125ZM30 87L30 54L96 54L162 54L162 87L162 120L96 120L30 120L30 87ZM82 113C69 100 69 74 82 61L85 57L59 57L33 57L33 87L33 117L59 117L85 117L82 113ZM102 115C108 113 110 110 114 102C116 97 116 95 116 87C116 79 116 77 114 71C105 53 87 53 78 71C76 77 76 79 76 87C76 95 76 97 78 102C80 106 82 110 83 111C86 114 93 117 96 117C97 117 100 116 102 115ZM159 87L159 57L133 57L107 57L110 61C112 63 115 66 116 68C123 83 121 102 110 113L107 117L133 117L159 117L159 87Z%22/%3E%3C/svg%3E")}
.i8-check{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}
.i8-coffee{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M56 154C48 150 48 149 41 103C37 80 34 60 34 59C34 57 35 55 37 52L41 48L96 48C133 48 153 48 155 49C160 50 164 54 166 58C169 64 169 94 166 100C163 108 158 111 143 111L132 111L130 128C127 147 125 150 118 154C114 156 112 156 87 156C62 156 60 156 56 154ZM113 143C115 142 116 134 121 104C124 83 127 65 127 64L126 60L87 60L48 60L47 64C47 65 50 83 53 104C58 134 59 142 61 143C63 145 111 145 113 143ZM154 97C156 95 156 94 156 80C156 61 156 60 146 60C143 60 140 60 140 61C140 62 135 93 134 96L134 99L143 99C151 99 152 99 154 97ZM59 37C57 35 57 34 57 29C57 21 59 18 63 18C67 18 69 21 69 28C69 36 67 39 63 39C62 39 60 38 59 37ZM83 37C81 35 81 34 81 24C81 14 81 13 83 11C86 8 88 8 91 11C93 13 93 14 93 24C93 34 93 35 91 37C90 38 88 39 87 39C86 39 84 38 83 37ZM107 37C105 35 105 34 105 29C105 21 107 18 111 18C115 18 117 21 117 28C117 36 115 39 111 39C110 39 108 38 107 37Z%22/%3E%3C/svg%3E")}
.i8-coin{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M105 164C99 163 89 158 84 153C81 150 78 149 74 148C58 145 41 131 34 116C25 98 25 77 34 60C38 51 51 38 60 34C77 25 98 25 116 34C131 41 145 58 148 74C149 78 150 81 153 84C163 95 167 113 163 127C157 153 131 169 105 164ZM131 149C147 142 156 124 152 108C150 99 149 99 147 107C141 126 125 142 106 148C102 148 100 149 100 150C101 150 103 151 106 152C113 154 124 153 131 149ZM98 137C121 132 138 111 138 89C138 62 115 39 88 39C81 39 71 42 64 46C35 63 31 100 54 123C66 135 82 140 98 137ZM88 122C87 122 87 120 87 119C87 116 87 115 82 114C76 112 70 108 69 103C69 98 70 96 74 96C77 96 78 97 79 100C81 103 83 106 86 106C87 106 87 104 87 99L87 92L82 91C73 88 68 80 71 72C72 67 78 63 83 62C86 61 87 61 87 58C87 55 88 54 90 54C92 54 93 55 93 58C93 60 94 61 98 62C109 66 113 80 103 79C101 79 100 78 99 75C97 72 95 70 94 70C93 70 93 73 93 77L94 83L98 85C113 89 113 109 98 113C94 115 93 115 93 119C93 122 92 123 90 123C89 123 88 123 88 122ZM97 104C99 103 100 98 97 96C94 92 93 94 93 100C93 103 93 106 94 106C94 106 96 105 97 104ZM87 76L87 69L84 70C80 72 80 79 84 81C85 81 87 82 87 82C87 82 87 79 87 76Z%22/%3E%3C/svg%3E")}
.i8-compass{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M80 160C31 147 14 88 48 50C54 44 66 36 75 33C111 22 148 41 159 77C162 88 162 104 159 115C149 149 114 169 80 160ZM94 144C97 144 101 145 101 148C102 150 102 150 108 148C128 144 144 128 148 108C150 102 150 102 148 101C143 100 143 93 147 91C150 90 150 90 148 84C146 71 138 60 128 53C121 48 116 45 108 44C102 42 102 42 101 44C100 49 93 49 91 45C90 42 90 42 84 44C64 48 48 64 44 84C42 90 42 90 44 91C49 92 49 99 45 101C42 102 42 102 44 108C48 128 64 144 84 148C89 150 90 150 91 147C91 146 93 145 94 144ZM68 124C66 123 66 121 66 120C68 114 82 86 85 84C88 81 118 66 121 66C124 66 126 70 126 72C124 78 110 106 107 108C104 111 74 126 71 126C70 126 69 125 68 124ZM100 100C101 99 102 97 102 96C102 95 101 93 100 92C99 91 97 90 96 90C95 90 93 91 92 92C91 93 90 95 90 96C90 97 91 99 92 100C93 101 95 102 96 102C97 102 99 101 100 100Z%22/%3E%3C/svg%3E")}
.i8-diamond{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M91 162C83 155 19 84 18 82C18 79 18 78 35 58C45 47 49 42 52 41C56 39 60 39 96 39C132 39 136 39 140 41C143 42 147 47 157 58C174 78 174 79 174 82C173 84 109 155 101 162C99 164 97 165 96 165C95 165 93 164 91 162ZM106 115C112 101 117 88 117 88C117 87 108 87 96 87C84 87 75 87 75 88C81 103 96 141 96 141C96 141 101 129 106 115ZM70 109C66 97 62 88 62 87C61 87 56 87 50 87L38 88L58 109C69 120 78 130 78 130C78 129 74 120 70 109ZM135 108L154 88L142 87C136 87 131 87 130 87C130 88 114 129 114 130C114 131 114 131 135 108ZM73 63L83 52L72 51C66 51 60 51 58 51C57 52 52 57 47 63L37 75L50 75L64 75L73 63ZM107 67C103 63 99 59 98 57L96 54L94 57C93 59 89 63 85 67L79 75L96 75L113 75L107 67ZM145 63C140 57 135 52 134 51C132 51 126 51 120 51L109 52L119 63L128 75L142 75L155 75L145 63Z%22/%3E%3C/svg%3E")}
.i8-doc{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M52 160C48 158 46 156 44 151C42 148 42 140 42 96C42 48 42 44 44 40C46 36 48 34 53 32C59 29 95 29 101 32C106 34 146 73 148 78C150 82 150 85 150 115C150 142 150 148 148 151C146 156 144 158 140 160C136 162 132 162 96 162C60 162 56 162 52 160ZM136 148C138 146 138 145 138 118L138 90L121 90C100 90 96 88 92 80C90 76 90 73 90 59L90 42L74 42C59 42 58 42 56 44C54 46 54 47 54 96C54 145 54 146 56 148C58 150 59 150 96 150C133 150 134 150 136 148ZM68 136C66 134 65 131 68 128C69 126 69 126 96 126C121 126 122 126 124 128C125 129 126 131 126 132C126 133 125 135 124 136C122 138 121 138 96 138C71 138 70 138 68 136ZM68 112C66 110 65 107 68 104C69 102 69 102 96 102C121 102 122 102 124 104C125 105 126 107 126 108C126 109 125 111 124 112C122 114 121 114 96 114C71 114 70 114 68 112ZM132 78C132 78 125 71 117 63L102 48L102 61C102 78 102 78 119 78C126 78 132 78 132 78Z%22/%3E%3C/svg%3E")}
.i8-folder{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M40 148C36 146 34 144 32 139C30 136 30 129 30 93C30 54 30 50 32 46C36 38 41 36 55 36C66 36 70 37 79 44L84 48L116 48C142 48 148 48 151 50C159 53 162 58 162 72C162 82 162 82 165 86C167 88 168 90 168 92C168 97 153 142 151 145C146 150 147 150 94 150C48 150 44 150 40 148ZM142 137C143 135 155 97 155 95C155 93 152 93 112 93C86 93 69 93 68 94C66 95 65 99 53 135L52 138L96 138C131 138 141 138 142 137ZM57 88C58 87 61 84 63 83C67 81 68 81 109 81L150 81L150 73C150 59 152 60 114 60C83 60 82 60 78 58C75 56 70 53 68 52C63 48 62 48 54 48C41 48 42 45 42 90L42 128L48 110C52 100 55 90 57 88Z%22/%3E%3C/svg%3E")}
.i8-free{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M81 167C78 166 71 160 53 142C40 128 28 116 27 114C24 110 23 102 25 96C27 92 32 86 59 59C81 38 93 27 95 26C101 23 134 23 138 26C143 28 164 49 166 53C168 56 168 59 168 75C168 89 168 94 166 97C164 102 104 162 98 166C92 168 87 169 81 167ZM124 124L156 92L156 75L156 59L145 47L133 36L117 36L100 36L68 68L36 101L36 105C37 108 40 111 59 130C71 142 82 153 84 154C90 158 89 158 124 124ZM120 72C118 70 117 68 117 66C117 62 122 57 126 57C130 57 135 62 135 66C135 68 134 70 132 72C128 76 124 76 120 72Z%22/%3E%3C/svg%3E")}
.i8-gauge{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M48 151C38 141 32 131 29 118C25 102 27 87 35 71C46 48 70 33 96 33C122 33 146 48 157 71C168 92 168 112 157 133C153 141 151 144 144 151L136 159L96 159L56 159L48 151ZM78 145C79 143 80 141 81 140C83 138 85 138 96 138C107 138 109 138 111 140C112 141 113 143 114 145C114 147 115 147 123 147L131 147L137 141C148 130 152 118 152 102C152 86 147 73 136 62C125 51 112 46 96 46C80 46 67 51 56 62C45 73 40 86 40 102C40 118 44 130 55 141L61 147L69 147C77 147 78 147 78 145ZM64 134C62 131 61 129 64 126C65 124 71 123 73 125C75 127 74 133 72 134C69 137 67 136 64 134ZM120 134C118 133 117 127 119 125C121 123 127 124 128 126C131 129 130 131 128 134C125 136 123 137 120 134ZM90 108C86 105 86 100 89 97C91 94 99 88 117 75C133 64 134 65 122 81C112 97 103 108 101 109C97 112 93 111 90 108ZM53 106C49 102 52 96 57 96C60 96 63 99 63 102C63 103 62 105 61 106C60 107 58 108 57 108C56 108 54 107 53 106ZM131 106C127 102 130 96 135 96C138 96 141 99 141 102C141 103 140 105 139 106C138 107 136 108 135 108C134 108 132 107 131 106ZM63 77C62 75 62 74 63 72C66 66 74 68 74 74C74 78 72 80 68 80C66 80 65 79 63 77ZM92 67C88 63 91 57 96 57C99 57 102 60 102 63C102 64 101 66 100 67C99 68 97 69 96 69C95 69 93 68 92 67Z%22/%3E%3C/svg%3E")}
.i8-gift{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M52 154C46 152 39 146 38 140C36 137 36 131 36 112L36 89L33 87C28 84 27 79 27 68C28 51 31 48 50 48L62 48L61 45C57 36 63 24 73 20C80 17 89 18 94 23C96 24 96 24 98 23C103 18 112 17 119 20C129 24 135 36 131 45L130 48L142 48C161 48 164 51 165 68C165 79 164 84 159 87L156 89L156 112C156 139 155 142 149 149C142 156 141 156 96 156C63 156 55 156 52 154ZM90 117L90 90L69 90L48 90L48 112C48 137 48 138 54 142C57 144 58 144 74 144L90 144L90 117ZM140 140L144 137L144 113L144 90L123 90L102 90L102 117L102 144L119 144L137 144L140 140ZM90 69L90 60L66 60C48 60 41 60 40 61C40 62 39 65 39 69C39 73 40 76 40 77C41 78 48 78 66 78L90 78L90 69ZM152 77C152 76 153 73 153 69C153 65 152 62 152 61C151 60 144 60 126 60L102 60L102 69L102 78L126 78C144 78 151 78 152 77ZM90 42C90 37 90 36 87 33C85 31 83 30 81 30C77 30 72 35 72 39C72 41 73 43 75 45C78 48 79 48 84 48L90 48L90 42ZM117 45C121 41 121 37 117 33C113 29 109 29 105 33C102 36 102 37 102 42L102 48L108 48C113 48 114 48 117 45Z%22/%3E%3C/svg%3E")}
.i8-globe{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M80 160C31 147 14 88 48 50C54 44 66 36 75 33C111 22 148 41 159 77C162 88 162 104 159 115C149 149 114 169 80 160ZM90 138L90 128L86 128C79 128 79 129 81 135C83 139 88 147 90 147C90 147 90 143 90 138ZM111 135C113 129 113 128 106 128L102 128L102 138L102 148L105 144C107 142 110 138 111 135ZM71 139C70 136 68 133 68 133C67 133 66 134 64 135C61 136 61 136 62 138C63 139 73 145 74 145C74 145 73 142 71 139ZM130 138C131 136 131 136 128 135C126 134 125 133 124 133C124 133 122 136 121 139L118 145L123 142C126 141 129 139 130 138ZM60 125C64 123 66 121 66 120C65 120 65 116 64 113C63 101 64 102 53 102L42 102L44 108C45 115 51 128 53 128C53 128 56 127 60 125ZM143 121C145 117 148 112 148 108L150 102L139 102C129 102 129 102 129 104C128 106 127 118 127 121C126 122 137 128 139 128C139 128 141 125 143 121ZM85 118L90 117L90 109L90 102L82 102L75 102L75 109C76 118 77 119 79 119C80 118 83 118 85 118ZM115 118C116 117 116 113 117 109L117 102L110 102L102 102L102 109L102 117L107 118C109 118 112 118 112 118C114 119 115 119 115 118ZM63 88C64 87 64 83 64 79C65 76 65 72 66 72C66 71 64 69 59 67C53 64 53 64 51 66C49 69 45 78 44 84L42 90L53 90C63 90 63 90 63 88ZM90 83L90 75L85 74C83 74 80 74 79 73C77 73 76 74 75 83L75 90L82 90L90 90L90 83ZM117 83C116 74 115 73 113 73C112 74 109 74 107 74L102 75L102 83L102 90L110 90L117 90L117 83ZM148 84C147 79 143 70 140 65C139 64 138 64 133 67C128 69 126 71 126 72C127 72 127 76 128 79C129 91 128 90 139 90L150 90L148 84ZM90 54L90 44L87 48C85 50 82 54 81 57C79 63 79 64 86 64L90 64L90 54ZM111 63C113 63 113 62 111 57C110 54 107 50 105 48L102 44L102 54L102 64L106 64C108 64 110 64 111 63ZM71 53L74 47L69 50C66 51 63 53 62 54C61 56 61 56 64 57C65 58 67 59 68 59C68 59 70 56 71 53ZM128 57C131 56 131 56 130 54C129 53 126 51 123 50L118 47L121 53C122 56 124 59 124 59C125 59 126 58 128 57Z%22/%3E%3C/svg%3E")}
.i8-hourglass{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M62 161C55 158 53 150 55 138C58 127 63 119 72 108C84 96 84 96 72 84C62 73 58 66 55 54C53 44 54 38 58 34L61 30L96 30L131 30L134 34C138 38 139 44 137 54C134 66 130 73 120 84C108 96 108 96 120 108C129 119 134 127 137 138C139 148 138 154 134 158L131 162L97 162C79 162 63 162 62 161ZM124 147C124 146 121 142 112 133L99 122L99 107C99 96 99 91 101 88C101 86 106 81 110 76C116 70 118 67 118 66C118 64 117 64 96 64L74 64L74 66C74 68 76 70 82 76C86 81 91 86 91 88C93 91 93 96 93 107L93 122L80 133C69 144 67 147 69 149C69 150 82 150 96 150C123 150 124 149 124 147Z%22/%3E%3C/svg%3E")}
.i8-pencil{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M32 160C31 159 30 158 30 157C30 156 32 149 35 140L40 124L82 83C105 60 126 40 128 38C145 28 164 47 154 64C152 66 132 87 109 110L68 152L52 157C43 160 36 162 35 162C34 162 33 161 32 160ZM55 143L61 141L56 136L52 131L49 136C44 146 46 148 55 143ZM100 102L129 72L124 68L119 63L90 92L61 122L65 126C67 129 70 131 70 131C70 131 84 118 100 102ZM144 55C144 52 140 48 137 48C136 48 133 49 131 51L128 54L133 59L137 64L141 61C143 59 144 57 144 55Z%22/%3E%3C/svg%3E")}
.i8-percent{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M57 147C56 147 55 145 55 144C55 142 64 129 82 106C97 87 113 66 118 59C127 48 128 46 131 46C134 46 137 48 137 51C137 52 130 62 122 73C113 84 97 105 86 120C74 135 64 147 63 148C61 149 60 149 57 147ZM120 147C115 145 110 139 108 134C107 129 107 116 109 111C109 108 111 105 113 104C119 97 130 96 138 101C150 110 149 138 136 145C132 148 124 148 120 147ZM131 134C133 131 133 129 133 123C133 114 131 109 127 109C122 109 120 112 120 123C120 131 121 133 122 135C125 138 129 137 131 134ZM56 91C52 89 51 87 48 82C46 77 46 76 46 69C46 55 50 47 60 44C71 41 80 47 84 57C85 61 85 75 84 79C80 91 67 96 56 91ZM70 80C72 77 73 62 71 58C68 53 62 53 60 58C58 63 58 75 60 79C62 83 67 83 70 80Z%22/%3E%3C/svg%3E")}
.i8-person{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M80 160C31 147 14 88 48 50C54 44 66 36 75 33C111 22 148 41 159 77C162 88 162 104 159 115C149 149 114 169 80 160ZM60 129C68 121 78 119 96 119C114 119 124 121 132 129L136 132L138 130C139 129 142 124 144 120C165 77 124 30 78 45C69 49 59 56 53 64C39 83 39 107 52 127C54 130 56 132 56 132C56 132 58 131 60 129ZM87 105C76 100 71 85 76 74C85 55 107 55 116 74C123 89 112 107 96 107C94 107 90 106 87 105Z%22/%3E%3C/svg%3E")}
.i8-pill{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M65 161C54 158 42 150 36 140C28 126 28 108 36 94C40 88 89 39 95 36C101 32 110 30 117 30C152 30 173 68 156 98C154 101 142 113 127 129C99 156 96 158 85 161C80 162 70 162 65 161ZM89 147C92 145 98 141 104 134L115 124L92 100L69 77L58 87C45 100 43 105 43 117C43 124 43 126 45 131C50 140 58 147 68 149C73 150 83 149 89 147ZM147 89C149 84 149 82 149 75C149 68 149 66 147 61C143 54 138 49 131 45C126 43 124 43 117 43C105 43 101 45 88 58L77 68L100 92L123 115L134 105C140 98 145 93 147 89ZM101 65C97 61 100 56 109 52C118 49 131 54 132 61C132 67 127 69 121 65C119 64 117 63 116 63C114 63 112 64 110 65C106 67 103 68 101 65Z%22/%3E%3C/svg%3E")}
.i8-plane{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M26 163C25 162 24 160 24 159C24 158 25 156 26 155C28 153 29 153 96 153C163 153 164 153 166 155C167 156 168 158 168 159C168 160 167 162 166 163C164 165 163 165 96 165C29 165 28 165 26 163ZM86 145C83 142 83 143 87 124C89 115 90 107 90 107C90 106 85 108 80 111C70 116 69 116 63 116C58 116 55 116 52 114C47 111 21 83 21 80C21 77 23 75 29 72C37 68 46 68 57 73L66 77L72 74L78 70L69 63C60 56 58 53 61 50C63 47 80 39 83 39C84 39 94 41 104 43L122 48L135 41C150 33 153 33 161 36C171 40 174 53 168 62C166 65 162 67 153 72C147 75 140 79 139 80C136 81 134 85 125 107C120 121 114 134 113 135C111 138 94 147 90 147C89 147 87 146 86 145ZM103 128C104 127 109 116 113 104C128 68 124 74 142 64C158 56 160 54 158 49C156 45 152 45 144 50C109 68 67 90 66 90C65 90 61 88 57 87C47 82 42 81 39 81C37 82 37 83 47 93C57 104 61 106 66 104C67 104 75 100 83 96C99 87 101 87 103 91C105 93 104 95 102 110C100 118 99 127 99 128C98 129 98 130 99 130C100 130 102 129 103 128ZM98 60L105 56L94 54C85 52 82 51 80 52C79 53 78 54 78 54C78 55 89 64 90 64C90 64 94 62 98 60Z%22/%3E%3C/svg%3E")}
.i8-receipt{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M21 130C21 116 21 103 22 101C25 90 35 82 47 81L54 81L54 60L54 39L59 39C63 39 65 38 68 36C72 33 77 33 81 36C84 38 84 38 89 35C92 34 95 33 96 33C97 33 100 34 103 35C108 38 108 38 111 36C115 33 120 33 124 36C127 38 129 39 133 39L138 39L138 60L138 81L145 81C157 82 167 90 170 101C171 103 171 116 171 130L171 156L96 156L21 156L21 130ZM159 125C159 107 159 105 157 101C154 96 149 93 142 93L138 93L138 99C138 104 138 105 140 105C143 105 146 107 148 111C149 114 149 114 148 117C147 119 145 121 144 122C143 123 127 123 95 123L48 123L45 120C41 116 41 112 45 108C47 106 49 105 51 105L54 105L54 99L54 93L50 93C43 93 38 96 35 101C33 105 33 107 33 125L33 144L96 144L159 144L159 125ZM126 81L126 51L122 49L117 47L113 49C108 51 106 51 99 48C96 46 96 46 93 48C86 51 84 51 79 49L75 47L70 49L66 51L66 81L66 111L96 111L126 111L126 81ZM74 94C73 93 72 91 72 90C72 89 73 87 74 86C76 84 77 84 84 84C91 84 92 84 94 86C95 87 96 89 96 90C96 91 95 93 94 94C92 96 91 96 84 96C77 96 76 96 74 94ZM107 94C103 90 106 84 112 84C116 84 120 87 120 90C120 93 116 96 112 96C110 96 108 95 107 94ZM74 70C73 69 72 67 72 66C72 65 73 63 74 62C76 60 77 60 96 60C115 60 116 60 118 62C119 63 120 65 120 66C120 67 119 69 118 70C116 72 115 72 96 72C77 72 76 72 74 70Z%22/%3E%3C/svg%3E")}
.i8-rocket{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M83 163C81 161 81 160 81 153C82 148 82 144 83 143C83 142 82 141 80 141C76 140 51 114 51 111C51 109 51 109 49 109C48 110 44 110 39 111C32 111 31 111 29 109C27 107 27 104 28 97C32 82 43 72 58 69C63 68 64 67 69 62C86 43 117 30 151 27C160 27 161 27 163 29C165 31 165 32 165 41C162 75 150 105 131 122C125 128 124 129 123 134C119 149 110 160 95 164C88 165 85 165 83 163ZM38 154C34 150 36 139 42 129C46 121 46 121 51 126C55 130 55 130 54 134C53 136 53 138 53 139C54 139 56 139 58 138C62 137 62 137 66 141C71 146 71 146 63 150C53 156 42 158 38 154ZM99 149C103 147 106 144 108 139C109 138 110 136 110 136C110 135 108 136 105 137C102 138 99 139 98 139C97 139 96 139 96 140C95 141 94 151 94 151C95 151 97 150 99 149ZM98 126C105 125 114 120 120 116C130 108 142 89 147 71C150 63 153 40 153 39C153 39 149 40 144 40C126 42 109 47 96 55C77 66 68 79 64 100L63 108L73 119C85 130 83 130 98 126ZM52 96C53 96 53 95 53 94C53 93 54 90 55 87C56 84 57 82 56 82C55 82 49 86 47 87C45 89 41 96 41 98C41 98 51 97 52 96ZM116 83C112 82 109 77 108 74C107 62 120 56 128 64C131 67 132 68 132 72C132 76 131 77 128 80C125 83 119 85 116 83Z%22/%3E%3C/svg%3E")}
.i8-scale{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M42 152C35 149 30 145 27 140C24 135 21 127 21 124C21 122 26 110 32 96L43 70L38 68C34 65 30 60 30 56C30 54 33 51 36 51C37 51 40 53 42 54C44 57 46 58 48 58C49 58 54 56 59 53C63 51 69 48 73 46C78 45 79 44 81 41C84 37 91 33 96 33C101 33 108 37 111 41C113 44 114 45 119 46C123 48 129 51 133 53C138 56 143 58 144 58C146 58 148 57 150 54C152 52 154 51 156 51C158 51 162 54 162 57C162 60 158 65 154 68L149 70L160 96C172 124 172 125 168 135C165 142 160 147 154 150C150 152 148 152 141 152C133 152 132 152 127 150C121 146 118 142 114 135C110 125 110 125 122 95L134 68L128 64C125 62 120 60 118 59L113 57L111 61C108 65 101 69 96 69C91 69 84 65 81 61L79 57L74 59C72 60 67 62 64 64L58 68L70 95C82 125 82 125 78 135C73 147 65 152 53 153C48 153 44 153 42 152ZM59 139C62 138 67 132 67 130C67 129 60 129 51 129C42 129 35 129 35 130C35 130 36 132 37 134C40 138 46 141 51 141C53 141 56 140 59 139ZM149 139C152 138 157 132 157 130C157 129 150 129 141 129C132 129 125 129 125 130C125 130 126 132 127 134C130 138 136 141 141 141C143 141 146 140 149 139ZM61 106C59 100 56 93 54 89C53 86 51 83 51 83C51 83 49 86 48 89C46 93 43 100 41 106L36 117L51 117L66 117L61 106ZM151 106C149 100 146 93 144 89C143 86 141 83 141 83C141 83 139 86 138 89C136 93 133 100 131 106L126 117L141 117L156 117L151 106ZM100 55C101 54 102 52 102 51C102 48 99 45 96 45C95 45 93 46 92 47C91 48 90 50 90 51C90 52 91 54 92 55C93 56 95 57 96 57C97 57 99 56 100 55Z%22/%3E%3C/svg%3E")}
.i8-shield{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M87 164C67 152 49 136 42 121C36 110 36 106 36 73C36 46 36 43 38 41C39 40 43 39 51 37C65 35 77 31 88 27L96 24L104 27C114 31 130 35 142 38C149 39 153 40 154 41C156 43 156 45 156 73C156 106 156 110 150 121C143 135 125 152 106 164C97 169 96 169 87 164ZM103 151C120 141 133 127 140 114L144 107L144 78L144 50L140 50C131 48 112 43 104 40L96 37L87 40C78 44 61 48 52 50L48 50L48 78L48 106L52 114C57 123 64 133 75 141C82 146 95 155 96 155C96 155 99 153 103 151Z%22/%3E%3C/svg%3E")}
.i8-sofa{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M37 146C36 146 36 145 36 143C36 142 34 140 32 137C25 131 24 127 24 108C24 94 24 92 26 88C28 85 30 82 32 81L36 79L36 69C36 55 39 50 47 47C53 44 139 44 145 47C153 50 156 55 156 69L156 79L160 81C162 82 164 85 166 88C168 92 168 94 168 108C168 127 167 131 160 137C158 139 156 142 156 144L156 146L146 147C138 147 136 147 135 146C135 144 130 144 96 144C62 144 57 144 57 146C56 147 54 147 47 147C42 147 37 147 37 146ZM152 128L156 125L156 110C156 95 156 94 154 92C151 89 149 89 146 92C144 94 144 95 144 105C144 122 149 120 96 120C43 120 48 122 48 105C48 95 48 94 46 92C45 91 43 90 42 90C41 90 39 91 38 92C36 94 36 95 36 108C36 124 37 126 42 130L45 132L97 132L149 132L152 128ZM132 99C133 89 135 85 140 81L144 79L144 70C144 56 148 57 96 57C44 57 48 56 48 70L48 79L52 81C57 85 60 91 60 100C60 103 60 107 61 107C61 108 77 108 96 108L132 108L132 99Z%22/%3E%3C/svg%3E")}
.i8-spark{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M99 180C97 178 96 175 94 162C90 144 86 138 71 135C68 134 63 133 60 133C51 131 48 130 46 127C44 122 45 117 50 115C51 114 56 113 60 112C71 110 80 108 84 104C88 101 92 93 94 79C96 73 97 66 98 66C100 63 105 62 108 63C112 65 114 67 115 78C119 103 125 108 149 112C159 114 161 114 163 117C165 120 166 124 163 127C161 131 161 131 147 133C125 137 120 141 116 162C113 180 112 182 105 182C102 182 100 181 99 180ZM107 149C111 136 118 128 132 125L139 122L134 121C125 119 117 114 113 109C112 107 109 101 108 98C107 94 106 90 105 89C105 88 104 90 103 93C99 110 91 117 75 121L70 122L77 124C93 128 101 137 104 152C104 154 105 156 105 156C105 156 106 153 107 149ZM49 97C49 96 48 91 47 88C45 78 42 75 31 73C22 71 20 70 22 68C22 67 26 66 31 65C43 63 45 61 47 49C50 36 52 36 55 49C57 61 59 63 71 65C85 68 84 70 70 73C59 75 57 78 55 88C53 96 52 99 51 99C50 99 50 98 49 97ZM89 45C88 45 88 42 87 40C86 34 84 31 77 30C70 28 70 26 77 24C84 23 86 21 87 14C89 7 91 7 93 14C94 21 96 23 103 24C110 26 110 28 103 30C96 31 94 33 93 40C92 45 90 47 89 45Z%22/%3E%3C/svg%3E")}
.i8-star{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M50 163C49 162 48 160 48 160C48 159 50 148 52 136C55 125 57 114 57 113C57 112 49 105 39 96C30 88 22 80 21 79C20 77 22 73 25 72C26 72 37 70 50 69C62 68 72 67 72 66C72 66 77 56 82 45C86 34 91 24 92 23C94 21 98 21 100 23C101 24 106 34 110 45C115 56 120 66 120 66C120 66 130 68 142 69C155 70 166 72 167 72C170 73 172 77 171 79C170 80 162 88 153 96C143 105 135 112 135 113C135 114 137 125 140 136C142 148 144 159 144 160C144 162 140 165 138 165C137 165 127 159 116 153L96 140L80 150C53 167 54 167 50 163ZM82 134C89 130 95 127 96 127C97 127 105 131 113 136C122 142 129 146 129 146C129 145 127 137 125 127C123 118 122 109 122 108C123 107 129 101 136 94C144 88 150 82 150 82C149 82 142 81 134 80C110 78 112 80 104 61C100 52 97 44 97 44C97 43 97 43 96 43C95 43 95 43 95 44C95 44 92 52 88 61C80 80 82 78 58 80C50 81 43 82 42 82C42 82 48 88 56 94C63 101 69 107 70 108C70 109 66 135 63 144C63 147 61 147 82 134Z%22/%3E%3C/svg%3E")}
.i8-store{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M46 155C45 155 43 153 42 152L40 149L39 121C39 98 39 93 37 93C36 92 36 90 36 82C36 73 36 71 39 64C41 59 42 55 42 51C42 44 44 40 49 38C52 36 57 36 97 36L143 36L146 40C149 43 149 44 150 51C151 56 152 62 153 66C156 71 156 73 156 82C156 90 156 92 155 93C153 93 153 98 153 121L152 149L149 152L146 156L97 156C70 156 48 156 46 155ZM102 128C102 108 102 108 114 108C126 108 126 108 126 128L126 144L132 144C136 144 139 143 140 143C141 142 141 135 141 119L141 96L139 96C138 96 134 95 131 94C126 92 126 92 121 94C118 95 113 96 111 96C109 96 104 95 101 94C96 92 96 92 91 94C84 96 78 96 71 94C66 92 66 92 61 94C58 95 54 96 53 96L51 96L51 119C51 135 51 142 52 143C53 144 60 144 78 144L102 144L102 128ZM68 130C66 128 66 127 66 120C66 109 67 108 78 108C89 108 90 109 90 120C90 127 90 128 88 130C86 132 85 132 78 132C71 132 70 132 68 130ZM62 81C66 80 66 80 70 82C76 84 86 84 92 82C96 80 96 80 100 82C106 84 116 84 122 82C126 80 126 80 130 81C131 82 136 83 139 84L144 84L144 78C144 74 143 70 141 65C139 60 138 55 138 54C138 52 137 50 137 49C135 47 57 47 55 49C55 50 54 52 54 54C54 55 53 60 51 64C49 70 48 74 48 78L48 84L53 84C56 83 61 82 62 81Z%22/%3E%3C/svg%3E")}
.i8-target{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M80 160C31 147 14 88 48 50C54 44 66 36 75 33C82 31 85 31 96 31C104 31 109 31 114 32L120 34L120 41L120 48L116 46C94 37 67 45 52 65C29 98 48 143 88 149C112 153 136 139 146 116C149 108 151 96 149 88C149 84 147 79 146 76L144 72L151 72L158 72L160 78C162 88 162 105 159 115C149 149 114 169 80 160ZM87 134C76 131 66 123 61 112C58 106 58 105 58 96C58 87 58 86 61 80C65 71 71 65 80 61C86 58 87 58 96 58C103 58 107 58 109 59L113 61L109 65L105 69L97 69C88 70 83 71 77 77C72 83 70 88 70 96C70 104 72 109 77 115C83 120 88 122 96 122C104 122 109 120 115 115C121 109 122 104 123 95L123 87L127 83L131 79L133 83C134 85 134 89 134 96C134 105 134 106 131 112C125 126 113 134 98 135C94 135 89 134 87 134ZM92 107C80 102 84 84 97 84C99 84 102 81 114 69L129 54L129 49C129 46 130 43 130 41C132 38 140 30 142 30C144 30 147 33 147 35C147 36 148 35 151 33C155 30 157 29 160 32C163 35 162 37 159 41C157 44 156 45 157 45C159 45 162 48 162 50C162 52 154 60 151 62C149 62 146 63 143 63L137 63L123 78C109 91 108 93 108 97C107 103 103 107 97 108C95 108 93 108 92 107Z%22/%3E%3C/svg%3E")}
.i8-ticket{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M34 149C33 149 31 147 30 146C28 143 27 142 27 130C27 116 27 115 35 114C44 113 51 105 51 96C51 91 47 83 44 80C42 80 39 78 35 78C32 78 29 77 28 75C26 73 27 53 29 48C32 42 30 42 97 42L158 42L161 46L164 49L165 61C165 75 164 78 159 78C155 78 148 81 146 84C143 86 141 92 141 96C141 101 145 109 148 112C150 112 153 114 157 114C165 115 165 116 165 131L164 143L161 146L158 150L97 150C64 150 36 150 34 149ZM105 131C105 123 107 120 111 120C115 120 117 123 117 131L117 138L134 138C146 138 151 138 152 137C152 136 153 133 153 131L153 125L148 124C135 119 126 103 130 88C132 79 142 69 150 67C153 67 153 66 153 62C153 59 152 56 152 55C151 54 146 54 134 54L117 54L117 61C117 69 115 72 111 72C107 72 105 69 105 61L105 54L73 54C50 54 41 54 40 55C40 56 39 59 39 61L39 67L44 68C55 72 63 84 63 96C63 108 55 120 44 124L39 125L39 131C39 133 40 136 40 137C41 138 50 138 73 138L105 138L105 131ZM107 106C105 104 105 103 105 96C105 89 105 88 107 86C108 85 110 84 111 84C112 84 114 85 115 86C117 88 117 89 117 96C117 103 117 104 115 106C114 107 112 108 111 108C110 108 108 107 107 106Z%22/%3E%3C/svg%3E")}
.i8-train{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M49 164C47 162 48 160 53 153C56 148 57 147 56 146C55 145 54 145 53 145C52 145 50 143 47 140C39 133 39 131 39 100C39 72 40 65 43 54C47 41 52 34 60 30C64 28 66 28 96 28C126 28 128 28 132 30C140 34 145 41 149 54C152 65 153 72 153 100C153 131 153 133 145 140C142 143 140 145 139 145C138 145 137 145 136 146C135 147 136 148 139 153C144 160 145 162 143 164C141 165 136 165 133 164C132 163 129 159 126 155L120 147L96 147L72 147L66 155C63 159 60 163 59 164C56 165 51 165 49 164ZM137 131L140 128L141 110L141 92L96 92L51 92L51 109C51 127 51 129 57 133L60 135L97 135L134 134L137 131ZM63 123C61 121 60 119 60 117C60 113 65 108 69 108C73 108 78 113 78 117C78 119 77 121 75 123C71 127 67 127 63 123ZM117 123C115 121 114 119 114 117C114 113 119 108 123 108C127 108 132 113 132 117C132 119 131 121 129 123C125 127 121 127 117 123ZM139 79C141 77 141 76 139 66C137 57 134 47 131 44C128 41 123 39 119 39C117 39 115 40 113 44L109 48L96 48L83 48L79 44C77 40 75 39 73 39C69 39 64 41 61 44C58 48 54 58 52 67C51 76 51 77 53 79C55 81 56 81 96 81C136 81 137 81 139 79Z%22/%3E%3C/svg%3E")}
.i8-trend{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M35 160C33 158 33 157 33 140C33 116 32 117 51 117C70 117 69 116 69 140C69 163 70 162 51 162C38 162 37 162 35 160ZM80 160C78 158 78 157 78 123C78 89 78 88 80 86C82 84 83 84 96 84C109 84 110 84 112 86C114 88 114 89 114 123C114 157 114 158 112 160C110 162 109 162 96 162C83 162 82 162 80 160ZM125 160C123 158 123 157 123 130C123 96 121 99 141 99C161 99 159 96 159 130C159 165 161 162 141 162C128 162 127 162 125 160ZM57 140L57 129L51 129L45 129L45 140L45 150L51 150L57 150L57 140ZM102 123L102 96L96 96L90 96L90 123L90 150L96 150L102 150L102 123ZM147 130L147 111L141 111L135 111L135 130L135 150L141 150L147 150L147 130ZM44 85C35 81 33 66 42 60C46 57 53 56 57 58C60 60 60 60 70 53C80 47 81 47 81 43C84 27 107 26 111 42C111 44 112 45 121 48L130 52L134 50C149 42 164 61 151 73C145 79 137 79 131 73C129 72 127 69 126 67C126 63 125 63 116 60L107 56L103 58C99 60 94 61 90 59C87 57 87 58 77 64C67 70 66 70 66 74C64 84 54 90 44 85Z%22/%3E%3C/svg%3E")}
.i8-trophy{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M62 160C61 159 60 157 60 156C60 154 63 150 65 150C66 150 68 148 68 145C69 142 72 138 74 135L78 130L73 126C71 124 67 119 65 116C62 111 60 109 57 108C51 105 41 97 37 92C28 82 21 64 21 50C21 43 23 42 35 42L45 42L45 38C45 35 46 33 47 32C49 30 50 30 96 30C142 30 143 30 145 32C146 33 147 35 147 38L147 42L157 42C166 42 167 42 169 44C171 46 172 52 170 63C166 82 152 99 135 108C132 109 130 111 127 116C125 119 121 124 119 126L114 130L118 135C120 138 123 142 124 145C124 148 126 150 127 150C129 150 132 154 132 156C132 157 131 159 130 160C128 162 127 162 96 162C65 162 64 162 62 160ZM112 149C112 146 106 139 101 136C95 133 85 137 81 146C79 150 79 150 96 150C107 150 112 150 112 149ZM102 122C108 120 116 112 120 104C126 93 132 70 134 50L135 42L96 42L57 42L58 51C61 79 70 105 80 115C87 123 94 124 102 122ZM52 83C51 79 49 71 48 65L46 54L40 54L33 54L34 59C36 67 39 74 43 81C47 86 52 91 54 91C54 91 53 88 52 83ZM144 86C152 78 156 69 158 59L159 54L152 54L146 54L144 65C143 71 141 79 140 83C139 88 139 91 139 91C139 91 142 89 144 86ZM92 83C88 82 85 77 84 74C83 62 96 56 104 64C107 67 108 68 108 72C108 76 107 77 104 80C101 83 95 85 92 83Z%22/%3E%3C/svg%3E")}
.i8-wallet{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M44 154C39 152 37 150 35 145C33 142 33 134 33 96C33 54 33 50 35 46C37 42 39 40 44 38C47 36 55 36 94 36C139 36 140 36 142 38C145 41 145 43 142 46C140 48 139 48 95 48C50 48 49 48 47 50C46 51 45 53 45 54C45 55 46 57 47 58C49 60 50 60 97 60C137 60 145 60 148 62C153 64 155 66 157 70C159 74 159 78 159 108C159 136 159 142 157 145C155 150 153 152 148 154C145 156 141 156 96 156C51 156 47 156 44 154ZM145 142C147 140 147 139 147 108C147 77 147 76 145 74C143 72 142 72 96 72C70 72 47 72 47 71C45 71 45 74 45 105C45 139 45 140 47 142C49 144 50 144 96 144C142 144 143 144 145 142ZM120 114C118 112 117 110 117 108C117 104 122 99 126 99C130 99 135 104 135 108C135 110 134 112 132 114C128 118 124 118 120 114Z%22/%3E%3C/svg%3E")}
.i8-zap{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M75 163C74 163 73 161 73 160C73 159 77 147 82 134C87 122 91 111 91 111C91 110 83 110 72 110L54 110L53 108C51 104 50 106 79 68C109 31 112 27 114 27C116 27 119 30 119 32C119 33 115 45 110 58C105 70 101 81 101 81C101 82 109 82 120 82L138 82L139 84C140 86 140 87 138 90C136 93 90 153 84 160C80 165 77 166 75 163ZM103 92C93 92 85 92 85 91C85 91 88 84 92 76C96 68 99 61 99 61C99 61 92 69 85 80L70 100L89 100C99 100 107 100 107 100C107 101 104 107 100 116C96 124 93 131 93 131C93 131 99 123 107 112L122 92L103 92Z%22/%3E%3C/svg%3E")}
.i8-briefcase{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M38 151C33 149 31 147 29 142C27 139 27 132 27 96C27 57 27 53 29 50C33 41 38 39 55 39L69 39L70 35C71 29 74 25 79 23C85 20 107 20 113 23C118 25 121 29 122 35L123 39L137 39C155 39 160 41 163 50C166 56 166 136 163 142C161 147 159 149 154 151C151 153 147 153 96 153C45 153 41 153 38 151ZM151 139C153 137 153 136 153 115C153 95 153 94 151 94C148 95 134 97 121 98C113 99 108 99 108 100C108 101 107 102 106 103C104 105 102 105 94 105C85 105 85 105 80 100C80 99 76 98 69 98C59 97 47 96 41 94L39 94L39 115C39 136 39 137 41 139C43 141 44 141 96 141C148 141 149 141 151 139ZM130 85C135 84 143 84 146 83L153 82L153 68C153 56 153 55 151 53C149 51 148 51 96 51C44 51 43 51 41 53C39 55 39 56 39 68L39 82L45 83C49 83 56 84 62 85C69 86 75 86 78 86C84 87 121 86 130 85ZM111 38C111 37 110 36 109 35C107 33 106 33 96 33C86 33 85 33 83 35C82 36 81 37 81 38C81 39 87 39 96 39C105 39 111 39 111 38Z%22/%3E%3C/svg%3E")}
.i8-gov{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M38 154C36 153 34 151 33 150C31 147 30 146 30 118C30 87 30 85 36 81C39 79 41 78 48 78L57 78L57 72C57 69 57 66 56 66C54 66 51 62 51 60C51 57 55 54 58 54C60 54 61 54 61 51C62 46 66 40 70 36C84 21 105 20 120 33C125 38 131 48 131 52C131 54 132 54 134 54C137 54 141 57 141 60C141 62 138 66 136 66C135 66 135 69 135 72L135 78L144 78C151 78 153 79 156 81C162 85 162 87 162 118C162 146 161 147 159 150C155 156 156 156 96 156C48 156 41 156 38 154ZM54 137L54 130L60 130L66 130L66 137L66 144L72 144L78 144L78 137L78 130L84 130L90 130L90 137L90 144L96 144L102 144L102 137L102 130L108 130L114 130L114 137L114 144L120 144L126 144L126 137L126 130L132 130L138 130L138 137L138 144L143 144C145 144 148 143 149 143C151 141 151 93 149 91C147 89 45 89 43 91C41 93 41 141 43 143C44 143 47 144 49 144L54 144L54 137ZM54 116C54 115 54 112 54 108L54 102L60 102L66 102L66 110L66 116L60 117C56 117 55 117 54 116ZM78 116C78 115 78 112 78 108L78 102L84 102L90 102L90 110L90 116L84 117C80 117 79 117 78 116ZM102 116C102 115 102 112 102 108L102 102L108 102L114 102L114 110L114 116L108 117C104 117 103 117 102 116ZM126 116C126 115 126 112 126 108L126 102L132 102L138 102L138 110L138 116L132 117C128 117 127 117 126 116ZM78 72L78 66L74 66L69 66L69 72L69 78L74 78L78 78L78 72ZM102 72L102 66L96 66L90 66L90 72L90 78L96 78L102 78L102 72ZM123 72L123 66L118 66L114 66L114 72L114 78L118 78L123 78L123 72ZM119 53C119 52 115 45 112 43C108 39 101 36 96 36C91 36 84 39 80 43C77 45 73 52 73 53C73 54 83 54 96 54C109 54 119 54 119 53ZM93 20C93 19 93 17 93 15C93 13 94 12 97 12C100 12 102 11 102 10C103 9 105 9 110 9L116 10L116 14C116 17 116 18 112 18C110 18 108 19 108 20C107 22 94 22 93 20Z%22/%3E%3C/svg%3E")}
.i8-laptop{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M17 142C16 141 15 139 15 138C15 134 19 132 24 132L30 132L30 95C30 58 31 57 33 54C37 48 36 48 96 48C156 48 155 48 159 54C161 57 162 58 162 95L162 132L168 132C173 132 177 134 177 138C177 139 176 141 175 142C173 144 172 144 96 144C20 144 19 144 17 142ZM150 97C150 71 150 62 149 61C147 59 45 59 43 61C42 62 42 71 42 97L42 132L96 132L150 132L150 97Z%22/%3E%3C/svg%3E")}
.i8-calendar{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M44 154C39 152 37 150 35 145C33 142 33 134 33 96C33 54 33 50 35 46C37 42 39 40 44 38C47 36 55 36 96 36C141 36 145 36 148 38C153 40 155 42 157 47C160 53 160 139 157 145C155 150 153 152 148 154C145 156 141 156 96 156C51 156 47 156 44 154ZM145 142C147 140 147 139 147 107C147 74 147 73 145 71C143 69 142 69 96 69C50 69 49 69 47 71C45 73 45 74 45 106C45 139 45 140 47 142C49 144 50 144 96 144C142 144 143 144 145 142ZM54 131C54 130 54 127 54 125L54 120L60 120L66 120L66 126L66 132L60 132C56 132 55 132 54 131ZM78 131C78 130 78 127 78 125L78 120L84 120L90 120L90 126L90 132L84 132C80 132 79 132 78 131ZM102 131C102 130 102 127 102 125L102 120L108 120L114 120L114 126L114 132L108 132C104 132 103 132 102 131ZM54 110C54 109 54 106 54 104L54 100L60 100L66 100L66 105L66 110L60 111C56 111 55 111 54 110ZM78 110C78 109 78 106 78 104L78 100L84 100L90 100L90 105L90 110L84 111C80 111 79 111 78 110ZM102 110C102 109 102 106 102 104L102 100L108 100L114 100L114 105L114 110L108 111C104 111 103 111 102 110ZM126 110C126 109 126 106 126 104L126 100L132 100L138 100L138 105L138 110L132 111C128 111 127 111 126 110ZM78 89C78 88 78 85 78 83L78 78L84 78L90 78L90 84L90 90L84 90C80 90 79 90 78 89ZM102 89C102 88 102 85 102 83L102 78L108 78L114 78L114 84L114 90L108 90C104 90 103 90 102 89ZM126 89C126 88 126 85 126 83L126 78L132 78L138 78L138 84L138 90L132 90C128 90 127 90 126 89Z%22/%3E%3C/svg%3E")}
.i8-clock{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M80 160C31 147 14 88 48 50C54 44 66 36 75 33C111 22 148 41 159 77C162 88 162 104 159 115C149 149 114 169 80 160ZM107 149C135 143 153 116 149 88C143 48 98 29 65 52C48 64 39 86 43 105C49 136 77 155 107 149ZM56 100C53 97 53 94 56 92C58 90 62 90 74 90L90 90L90 71C90 56 90 52 92 50C94 47 97 47 100 50C102 52 102 53 102 75C102 97 102 98 100 100C98 102 97 102 78 102C59 102 58 102 56 100Z%22/%3E%3C/svg%3E")}
.i8-warn{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M35 157C32 156 30 154 29 150C25 142 22 148 68 70C86 38 88 36 96 36C104 36 106 38 124 70C160 132 164 139 165 142C166 148 162 154 157 157C153 159 151 159 96 159C41 159 38 159 35 157ZM152 146C153 144 149 136 126 96C103 57 98 48 96 48C94 48 89 57 66 96C43 136 39 144 40 146C42 148 150 148 152 146ZM91 137C88 134 88 132 89 130C92 124 100 123 103 129C105 134 102 139 96 139C94 139 92 138 91 137ZM92 116C90 114 88 76 90 72C92 68 100 68 102 72C104 75 102 114 100 116C98 117 94 117 92 116Z%22/%3E%3C/svg%3E")}
.i8-okc{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M80 160C31 147 14 88 48 50C54 44 66 36 75 33C111 22 148 41 159 77C162 88 162 104 159 115C149 149 114 169 80 160ZM107 149C135 143 153 116 149 88C143 48 98 29 65 52C48 64 39 86 43 105C49 136 77 155 107 149ZM87 130C86 130 81 124 74 117C62 102 61 99 67 96C70 94 73 96 81 106C85 110 89 114 89 114C89 114 96 104 104 92C119 69 120 67 123 67C126 67 129 70 129 73C129 75 98 124 94 129C92 131 90 131 87 130Z%22/%3E%3C/svg%3E")}
.i8-idea{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M89 159C87 158 84 156 83 156C78 154 77 150 79 147C81 144 81 144 96 144C109 144 110 144 112 146C113 147 114 149 114 150C114 152 111 156 108 156C107 156 105 157 103 159C99 163 93 163 89 159ZM77 136C76 135 75 132 75 130C74 123 72 120 64 110C60 106 55 99 53 96C39 70 55 36 85 28C119 20 151 52 142 86C140 95 137 101 128 110C120 120 118 123 117 130C116 138 116 138 96 138C81 138 79 138 77 136ZM32 124C31 123 30 121 30 120C30 117 33 114 36 114C39 114 42 117 42 120C42 121 41 123 40 124C39 125 37 126 36 126C35 126 33 125 32 124ZM106 124C106 120 111 112 118 104C129 91 132 86 131 75C131 67 131 66 128 60C124 52 118 46 110 42C105 40 103 40 96 40C89 40 87 40 82 42C74 46 67 53 63 60C61 66 61 68 61 75C60 86 63 91 74 104C81 112 86 120 86 124C86 126 87 126 96 126C105 126 106 126 106 124ZM152 124C151 123 150 121 150 120C150 117 153 114 156 114C159 114 162 117 162 120C162 121 161 123 160 124C159 125 157 126 156 126C155 126 153 125 152 124ZM20 82C18 80 17 77 20 74C22 71 25 71 28 74C31 77 31 79 28 82C27 83 25 84 24 84C23 84 21 83 20 82ZM164 82C163 81 162 79 162 78C162 75 165 72 168 72C171 72 174 75 174 78C174 79 173 81 172 82C171 83 169 84 168 84C167 84 165 83 164 82ZM32 40C31 39 30 37 30 36C30 33 33 30 36 30C39 30 42 33 42 36C42 37 41 39 40 40C39 41 37 42 36 42C35 42 33 41 32 40ZM152 40C151 39 150 37 150 36C150 33 153 30 156 30C159 30 162 33 162 36C162 37 161 39 160 40C159 41 157 42 156 42C155 42 153 41 152 40Z%22/%3E%3C/svg%3E")}
.i8-reset{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M82 161C59 155 41 140 33 116C31 109 31 107 31 96C31 85 31 83 33 76C37 65 42 57 50 49C57 42 65 37 76 33L84 31L84 26C84 20 85 18 88 18C90 18 112 32 113 34C114 36 114 36 113 38C112 40 90 54 88 54C85 54 84 52 84 48C84 43 83 43 73 47C64 52 57 58 52 66C33 94 43 130 74 145C106 160 144 139 149 103C152 86 146 69 133 57C127 52 126 50 126 47C126 46 127 44 127 43C134 37 151 55 158 75C161 83 161 85 161 96C161 107 161 109 159 116C147 149 115 168 82 161Z%22/%3E%3C/svg%3E")}
.i8-magnify{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M135 144L114 124L109 127C100 132 94 134 82 134C73 134 69 134 65 133C48 127 36 115 30 99C28 93 28 91 28 81C28 71 28 69 30 63C36 47 48 35 65 29C73 27 89 27 98 30C115 35 127 48 133 65C134 69 134 73 134 82C134 94 132 100 127 109L124 114L144 135C167 157 167 158 163 163C158 167 157 166 135 144ZM96 120C115 113 127 91 122 71C113 39 75 28 52 52C25 79 45 125 83 123C87 122 93 121 96 120Z%22/%3E%3C/svg%3E")}
.i8-moneybag{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M54 176C36 172 21 153 21 134C21 120 34 95 55 68C60 62 63 57 63 57C63 56 61 49 59 41C57 33 55 27 55 26C55 25 56 24 57 23C59 21 60 21 69 21C75 21 79 21 80 20C81 18 89 15 93 15C97 15 105 18 106 20C107 21 111 21 117 21C126 21 127 21 129 23C130 24 131 25 131 26C131 27 129 33 127 41C125 49 123 56 123 57C123 57 126 62 131 68C152 95 165 120 165 134C165 154 151 172 132 176C126 177 59 177 54 176ZM136 162C149 155 156 140 152 126C148 113 135 92 114 65L110 60L93 60L76 60L69 70C52 92 38 114 34 126C30 142 40 160 56 164C58 165 75 165 95 165L130 164L136 162ZM94 150C93 150 93 149 93 147C93 146 92 145 92 145C91 144 89 144 86 143C79 141 74 134 77 130C79 128 82 129 85 132C94 139 105 138 105 129C105 125 103 124 93 122C82 119 77 115 77 107C77 100 81 94 89 92C92 92 93 91 93 89C93 84 99 84 99 89C99 91 101 92 104 93C110 95 112 97 114 100C115 104 114 107 111 107C110 107 107 105 105 103C101 101 100 100 96 100C90 100 87 102 87 106C87 110 90 111 98 113C107 116 110 117 112 120C119 128 115 140 104 143C100 144 99 145 99 147C99 150 96 152 94 150ZM114 43C115 39 116 35 116 34C116 33 114 33 109 33C103 33 102 33 99 30C95 26 91 26 87 30C84 33 83 33 77 33C72 33 70 33 70 34C70 35 71 39 72 43L74 51L93 51L112 51L114 43Z%22/%3E%3C/svg%3E")}
.i8-bank{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M45 154C42 152 40 150 38 147C36 143 36 142 36 115C36 89 36 85 33 88C32 90 27 89 26 87C24 85 24 82 26 79C27 78 64 46 86 27C91 23 96 22 100 24C102 25 118 38 135 53C161 76 167 81 167 83C167 88 163 91 158 89C156 88 156 89 156 115C156 142 156 143 154 147C152 150 150 152 147 154L143 156L96 156L49 156L45 154ZM142 142C144 141 144 137 144 109L144 77L120 56C107 45 96 36 96 36C95 36 84 45 72 56L48 76L48 108C48 137 48 141 50 142C51 144 57 144 96 144C135 144 141 144 142 142ZM94 132C93 132 93 131 93 129C93 128 92 127 90 126C82 125 77 120 77 115C78 111 81 111 86 115C94 121 105 120 105 113C105 109 102 107 94 105C84 103 81 101 79 96C75 88 80 79 89 77C92 76 93 75 93 73C93 71 94 70 96 70C98 70 99 71 99 73C99 75 100 76 104 77C112 80 117 88 112 90C109 91 110 91 105 88C101 85 100 84 96 84C92 84 90 85 89 86C84 91 88 94 99 97C109 100 114 103 115 109C116 116 112 123 104 126C101 127 99 128 99 129C99 132 95 134 94 132Z%22/%3E%3C/svg%3E")}
.i8-home{mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 192 192%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M44 154C42 153 40 151 39 150C37 147 36 146 36 117C36 90 35 85 33 88C33 89 32 89 30 89C25 89 22 84 25 80C27 78 86 28 90 26C94 23 99 24 104 27C106 28 114 35 122 42L138 55L138 49C138 41 140 39 147 39C155 39 156 40 156 57L156 71L159 73C168 80 170 84 166 87C164 89 159 90 158 88C157 85 156 90 156 117C156 146 155 147 153 150C149 156 149 156 96 156C53 156 47 156 44 154ZM78 122C78 103 78 99 80 98C81 96 83 96 96 96C115 96 114 94 114 122L114 144L127 144C146 144 144 147 144 108L144 76L121 57C108 46 97 37 96 37C95 37 84 46 71 57L48 76L48 108C48 147 46 144 65 144L78 144L78 122Z%22/%3E%3C/svg%3E")}
.mq-choice .i8{background:center/contain no-repeat;background-color:transparent!important;-webkit-mask:none;mask:none}
.mq-choice .i8-bag{background-image:url(assets/icons/glass/bag.webp)}
.mq-choice .i8-barchart{background-image:url(assets/icons/glass/barchart.webp)}
.mq-choice .i8-car{background-image:url(assets/icons/glass/car.webp)}
.mq-choice .i8-card{background-image:url(assets/icons/glass/card.webp)}
.mq-choice .i8-cards{background-image:url(assets/icons/glass/cards.webp)}
.mq-choice .i8-cart{background-image:url(assets/icons/glass/cart.webp)}
.mq-choice .i8-cash{background-image:url(assets/icons/glass/cash.webp)}
.mq-choice .i8-check{background-image:url(assets/icons/glass/check.webp)}
.mq-choice .i8-coffee{background-image:url(assets/icons/glass/coffee.webp)}
.mq-choice .i8-coin{background-image:url(assets/icons/glass/coin.webp)}
.mq-choice .i8-compass{background-image:url(assets/icons/glass/compass.webp)}
.mq-choice .i8-diamond{background-image:url(assets/icons/glass/diamond.webp)}
.mq-choice .i8-doc{background-image:url(assets/icons/glass/doc.webp)}
.mq-choice .i8-folder{background-image:url(assets/icons/glass/folder.webp)}
.mq-choice .i8-free{background-image:url(assets/icons/glass/free.webp)}
.mq-choice .i8-gift{background-image:url(assets/icons/glass/gift.webp)}
.mq-choice .i8-globe{background-image:url(assets/icons/glass/globe.webp)}
.mq-choice .i8-hourglass{background-image:url(assets/icons/glass/hourglass.webp)}
.mq-choice .i8-pencil{background-image:url(assets/icons/glass/pencil.webp)}
.mq-choice .i8-percent{background-image:url(assets/icons/glass/percent.webp)}
.mq-choice .i8-person{background-image:url(assets/icons/glass/person.webp)}
.mq-choice .i8-pill{background-image:url(assets/icons/glass/pill.webp)}
.mq-choice .i8-plane{background-image:url(assets/icons/glass/plane.webp)}
.mq-choice .i8-receipt{background-image:url(assets/icons/glass/receipt.webp)}
.mq-choice .i8-rocket{background-image:url(assets/icons/glass/rocket.webp)}
.mq-choice .i8-scale{background-image:url(assets/icons/glass/scale.webp)}
.mq-choice .i8-shield{background-image:url(assets/icons/glass/shield.webp)}
.mq-choice .i8-sofa{background-image:url(assets/icons/glass/sofa.webp)}
.mq-choice .i8-spark{background-image:url(assets/icons/glass/spark.webp)}
.mq-choice .i8-star{background-image:url(assets/icons/glass/star.webp)}
.mq-choice .i8-store{background-image:url(assets/icons/glass/store.webp)}
.mq-choice .i8-target{background-image:url(assets/icons/glass/target.webp)}
.mq-choice .i8-ticket{background-image:url(assets/icons/glass/ticket.webp)}
.mq-choice .i8-train{background-image:url(assets/icons/glass/train.webp)}
.mq-choice .i8-trend{background-image:url(assets/icons/glass/trend.webp)}
.mq-choice .i8-trophy{background-image:url(assets/icons/glass/trophy.webp)}
.mq-choice .i8-wallet{background-image:url(assets/icons/glass/wallet.webp)}
.mq-choice .i8-zap{background-image:url(assets/icons/glass/zap.webp)}
.stat-ico .i8,.nav-ic .i8{width:24px!important;height:24px!important}
.mq-choice .i8{width:44px!important;height:44px!important}
.q-icon .i8,.el-n .i8{width:26px!important;height:26px!important}

/* — draft review pages (draft: true in data/editorial.json) + drafts.html — */
.dr-tag{display:inline-flex;align-items:center;font:600 12px/1.5 var(--body);padding:2px 10px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--warn) 14%,white);color:var(--warn)}
.dr-tag.dr-live{background:var(--accent-tint);color:var(--good)}
.draft-wrap{margin-top:16px}
.draft-note{padding:14px 18px 16px;border:1px solid color-mix(in srgb,var(--warn) 30%,white);background:color-mix(in srgb,var(--warn) 6%,white);border-radius:var(--radius-lg)}
.draft-note>p,.draft-note>details{margin:0}
.draft-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:14px}
.draft-h a{margin-left:auto;font-size:13px;font-weight:600}
.draft-note>p:not(.draft-h){margin-top:6px;font-size:13px;line-height:1.65;color:var(--ink-muted)}
.draft-note details{margin-top:10px;font-size:13px}
.draft-note summary,.dr-issues summary{cursor:pointer;font-weight:600;color:var(--warn)}
.draft-note ul,.dr-issues ul{margin:8px 0 0;padding-left:20px;line-height:1.65;color:var(--ink)}
.draft-note li+li,.dr-issues li+li{margin-top:4px}
.draft-note .draft-raw summary{color:var(--ink-muted);font-weight:500}
.draft-note .draft-raw li{color:var(--ink-muted);font-size:12.5px;overflow-wrap:anywhere}
.draft-src{margin:10px 0 0;color:var(--ink-muted);font-size:12.5px}
.pg-drafts main{padding-block:clamp(24px,5vw,48px)}
.dr-wrap h1{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.4vw,34px);letter-spacing:-.015em;line-height:1.25;margin:0 0 8px}
.dr-lead{max-width:780px;color:var(--ink-muted);margin:0 0 24px}
.dr-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dr-item{display:grid;grid-template-columns:132px 1fr;gap:18px;align-items:start;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-000)}
.dr-card img{display:block;width:100%;height:auto;aspect-ratio:600/378;object-fit:contain;border-radius:8px}
.dr-body>*{margin:0}
.dr-cat{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-muted)}
.dr-cat .i8{color:var(--brand)}
.dr-body h2{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:4px;font-family:var(--display);font-weight:700;font-size:18px;line-height:1.35}
.dr-body h2 a{color:var(--ink)}
.dr-head{margin-top:4px;font-size:14px;color:var(--ink-muted)}
.dr-issues{margin-top:10px;font-size:13px}
@media (max-width:600px){.dr-item{grid-template-columns:88px 1fr;gap:12px;padding:14px}}

/* — admin/index.html: data-health page for the maintainer — */
.pg-admin{background:var(--surface-100)}
.adm-bar{background:#fff;border-bottom:1px solid var(--line)}
.adm-bar .wrap{display:flex;align-items:center;gap:10px;padding-block:14px}
.adm-tag{font:700 11.5px/1 var(--body);color:var(--brand);background:var(--brand-tint);border-radius:999px;padding:6px 10px}
.adm{padding-block:28px 60px}
.adm-head h1{font:700 clamp(26px,3.4vw,34px)/1.25 var(--display);margin:0 0 6px}
.adm-head p{margin:0 0 4px;color:var(--ink-muted);font-size:13.5px}
.adm-how code{font:500 12px/1 var(--mono);background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 6px;color:var(--ink)}
.adm-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:20px 0 8px}
@media (max-width:820px){.adm-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.adm-tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.adm-tile b{font:700 28px/1.1 var(--display)}
.adm-tile span{font-size:12.5px;color:var(--ink-muted)}
.adm-tile.t-crit b{color:var(--crit)}.adm-tile.t-warn b{color:var(--warn)}.adm-tile.t-info b{color:var(--hue-steel)}
.adm-sec{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px;margin-top:16px}
.adm-sec h2{font:700 18px/1.3 var(--display);margin:0 0 12px}
.adm-tasks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.adm-tasks li{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.adm-tasks li > div{min-width:0}
.adm-tasks b{display:block;font:600 13.5px/1.45 var(--body)}
.adm-tasks small{display:block;font-size:12.5px;color:var(--ink-muted);margin-top:2px}
.adm-ok{color:var(--good);font-weight:600}
.adm-b{display:inline-flex;align-items:center;white-space:nowrap;font:700 11px/1 var(--body);border-radius:999px;padding:5px 9px;flex:none}
.adm-b.b-crit{background:color-mix(in srgb,var(--crit) 12%,white);color:var(--crit)}
.adm-b.b-warn{background:color-mix(in srgb,var(--warn) 13%,white);color:var(--warn)}
.adm-b.b-info{background:color-mix(in srgb,var(--hue-steel) 12%,white);color:var(--hue-steel)}
.adm-b.b-ok{background:var(--accent-tint);color:var(--good)}
.adm-tw{overflow-x:auto}
.adm-t{width:100%;border-collapse:collapse;font-size:13px;min-width:760px}
.adm-t th{text-align:left;font:600 12px/1.3 var(--body);color:var(--ink-muted);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.adm-t td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.adm-t td small{display:block;font-size:11.5px;color:var(--ink-muted)}
.adm-t td.n,.adm-t th.n{text-align:right;white-space:nowrap}
.adm-t tr:last-child td{border-bottom:0}
.adm-ul{margin:0;padding-left:16px;font-size:12.5px;line-height:1.5}
.adm-mut{color:var(--ink-faint)}
.adm-filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.adm-chips{display:flex;flex-wrap:wrap;gap:6px}
.adm-chips button{font:600 12.5px/1 var(--body);border:0;background:var(--surface-100);color:var(--ink);border-radius:999px;padding:9px 13px;cursor:pointer}
.adm-chips button.on{background:var(--brand);color:#fff}
.adm-filters input{font:500 13px/1 var(--body);border:1.5px solid var(--line);border-radius:999px;padding:9px 14px;min-width:220px}
.adm-policy{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.adm-policy div{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.adm-policy b{display:block;font:700 16px/1.2 var(--display)}
.adm-policy span{font-size:12px;color:var(--ink-muted)}
.adm-policy p{grid-column:1/-1;margin:4px 0 0;font-size:12px}

/* mockup card pages (cards without a written review yet) */
.mock-wrap{margin-top:16px}
.mock-note{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border:1px dashed color-mix(in srgb,var(--brand) 40%,white);background:var(--brand-tint);border-radius:var(--radius-lg);font-size:13.5px;line-height:1.65;color:var(--ink)}
.mock-tag{flex:none;font:600 12px/1.5 var(--body);padding:2px 10px;border-radius:var(--radius-pill);background:var(--brand);color:#fff}
.mock-note p{margin:0}
.pg-mock .ph,.pg-mock .tk-fit li,.pg-mock .tk-nofit li,.pg-mock .steps.ph li span{color:var(--ink-muted);font-style:italic}
.pg-mock .steps.ph li b{color:var(--ink-muted)}

/* ── portrait (vertical) card art ──  these 19 card images are taller than wide (corners are transparent).
   Landscape frames (white box + box-shadow) would leave blank bars on both sides, so for them the frame
   is dropped and a drop-shadow hugs the real card shape instead. Add new vertical cards to this list. */
:is(img[src*="/aeon-classic."],img[src*="/aeon-gold."],img[src*="/aeon-mgen."],img[src*="/aeon-plat."],img[src*="/aeon-world."],img[src*="/bbl-airasia."],img[src*="/cardx-jcb."],img[src*="/icbc-any."],img[src*="/kbank-blue."],img[src*="/kbank-kwave."],img[src*="/ks-firstchoice."],img[src*="/ks-now."],img[src*="/lotus-beyond."],img[src*="/lotus-reward."],img[src*="/uob-lazada."],img[src*="/uob-one."],img[src*="/uob-preferred."],img[src*="/uob-simple."],img[src*="/uob-tmrw."]){background:transparent!important;box-shadow:none!important;border-radius:0!important;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(13,17,42,.2))}
:is(.mc-slot,.pb-tile,.mc-sugg,.cardimg,.dr-card,.mq-card-img):has(:is(img[src*="/aeon-classic."],img[src*="/aeon-gold."],img[src*="/aeon-mgen."],img[src*="/aeon-plat."],img[src*="/aeon-world."],img[src*="/bbl-airasia."],img[src*="/cardx-jcb."],img[src*="/icbc-any."],img[src*="/kbank-blue."],img[src*="/kbank-kwave."],img[src*="/ks-firstchoice."],img[src*="/ks-now."],img[src*="/lotus-beyond."],img[src*="/lotus-reward."],img[src*="/uob-lazada."],img[src*="/uob-one."],img[src*="/uob-preferred."],img[src*="/uob-simple."],img[src*="/uob-tmrw."])){background:transparent!important;box-shadow:none!important}
.pb-tile img:is(img[src*="/aeon-classic."],img[src*="/aeon-gold."],img[src*="/aeon-mgen."],img[src*="/aeon-plat."],img[src*="/aeon-world."],img[src*="/bbl-airasia."],img[src*="/cardx-jcb."],img[src*="/icbc-any."],img[src*="/kbank-blue."],img[src*="/kbank-kwave."],img[src*="/ks-firstchoice."],img[src*="/ks-now."],img[src*="/lotus-beyond."],img[src*="/lotus-reward."],img[src*="/uob-lazada."],img[src*="/uob-one."],img[src*="/uob-preferred."],img[src*="/uob-simple."],img[src*="/uob-tmrw."]){filter:none}

/* portrait art: left-align inside the (landscape-sized) slot so names/text still line up row to row */
.mq-card-top img:is(img[src*="/aeon-classic."],img[src*="/aeon-gold."],img[src*="/aeon-mgen."],img[src*="/aeon-plat."],img[src*="/aeon-world."],img[src*="/bbl-airasia."],img[src*="/cardx-jcb."],img[src*="/icbc-any."],img[src*="/kbank-blue."],img[src*="/kbank-kwave."],img[src*="/ks-firstchoice."],img[src*="/ks-now."],img[src*="/lotus-beyond."],img[src*="/lotus-reward."],img[src*="/uob-lazada."],img[src*="/uob-one."],img[src*="/uob-preferred."],img[src*="/uob-simple."],img[src*="/uob-tmrw."]){object-position:left center}
/* quiz top pick: two equal columns; landscape art fills the width, portrait art fills the height, both left */
.top-pick > a > img{object-position:left top}
.top-pick > a:has(> img:is(img[src*="/aeon-classic."],img[src*="/aeon-gold."],img[src*="/aeon-mgen."],img[src*="/aeon-plat."],img[src*="/aeon-world."],img[src*="/bbl-airasia."],img[src*="/cardx-jcb."],img[src*="/icbc-any."],img[src*="/kbank-blue."],img[src*="/kbank-kwave."],img[src*="/ks-firstchoice."],img[src*="/ks-now."],img[src*="/lotus-beyond."],img[src*="/lotus-reward."],img[src*="/uob-lazada."],img[src*="/uob-one."],img[src*="/uob-preferred."],img[src*="/uob-simple."],img[src*="/uob-tmrw."])){position:relative;min-height:300px;align-self:stretch}
.top-pick > a > img:is(img[src*="/aeon-classic."],img[src*="/aeon-gold."],img[src*="/aeon-mgen."],img[src*="/aeon-plat."],img[src*="/aeon-world."],img[src*="/bbl-airasia."],img[src*="/cardx-jcb."],img[src*="/icbc-any."],img[src*="/kbank-blue."],img[src*="/kbank-kwave."],img[src*="/ks-firstchoice."],img[src*="/ks-now."],img[src*="/lotus-beyond."],img[src*="/lotus-reward."],img[src*="/uob-lazada."],img[src*="/uob-one."],img[src*="/uob-preferred."],img[src*="/uob-simple."],img[src*="/uob-tmrw."]){position:absolute;inset:0;width:auto;height:100%;max-width:100%;aspect-ratio:auto}

/* home grid: "เพิ่มเพื่อเทียบ" toggle (feeds the same compare tray as the category pages) */
.tile-add{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font:700 12.5px/1 var(--body);padding:11px 6px;color:var(--brand);background:var(--brand-tint);user-select:none}
.tile-add input{width:15px;height:15px;accent-color:var(--brand);margin:0}
.tile-add:has(input:checked){background:var(--brand);color:#fff}
.tile-add:has(input:checked) input{accent-color:#fff}
.tile-add:has(input:disabled){opacity:.45;cursor:not-allowed}

/* ---------- บัตรทั้งหมด (cards/index.html): filters left, one row per card ---------- */
.al-hero{padding-block:8px 20px}
.al-hero h1{font:700 clamp(28px,4vw,40px)/1.2 var(--display);letter-spacing:-.02em;margin:0 0 6px}
.al-hero p{margin:0;color:var(--ink-muted)}
.al-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start;padding-bottom:72px}
.al-filters{position:sticky;top:92px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-000);padding:4px 16px 8px}
.al-fhead{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.al-fhead b{font:700 15px/1 var(--display)}
.al-clear{background:none;border:0;padding:0;font:600 13px/1 var(--body);color:var(--brand);cursor:pointer;text-decoration:underline}
.al-group{border-bottom:1px solid var(--line);padding:12px 0}
.al-group:last-child{border-bottom:0}
.al-group summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;font:600 14px/1.3 var(--display)}
.al-group summary::-webkit-details-marker{display:none}
.al-group summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink-muted);border-bottom:2px solid var(--ink-muted);transform:rotate(45deg);margin-right:3px;transition:transform .15s}
.al-group[open] summary::after{transform:rotate(-135deg)}
.al-opts{display:flex;flex-direction:column;gap:2px;margin-top:10px;max-height:260px;overflow:auto}
.al-opt{display:flex;align-items:center;gap:9px;padding:5px 2px;font-size:13.5px;cursor:pointer}
.al-opt[hidden]{display:none}
.al-opt input,.al-cmp input{width:16px;height:16px;accent-color:var(--brand);flex:none}
.al-search{width:100%;box-sizing:border-box;margin-bottom:6px;font:400 13.5px var(--body);padding:9px 12px;border:1px solid var(--line-control);border-radius:var(--radius-xs);background:var(--surface-000);color:var(--ink)}
.al-ftoggle{display:none}
.al-count{font:700 18px/1.3 var(--display);margin:0 0 16px}
.al-head{position:sticky;top:calc(var(--al-bar,72px) + 12px);z-index:5;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;background:var(--surface-100);border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 18px}
.al-head button{display:flex;align-items:center;gap:6px;background:none;border:0;padding:12px 0;font:600 12.5px/1.2 var(--body);color:var(--ink-muted);cursor:pointer;text-align:left}
.al-head button:hover,.al-head button.on{color:var(--ink)}
.al-head i{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:0}
.al-head button.on i{opacity:1}
.al-head button.on.asc i{transform:rotate(-135deg);margin-top:3px}
.al-sortm{display:none;margin-bottom:12px;font-size:13px;color:var(--ink-muted)}
.al-sortm select{font:inherit;color:var(--ink);padding:8px 10px;border:1px solid var(--line-control);border-radius:var(--radius-xs);background:var(--surface-000)}
.al-list{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.al-row{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-000);padding:16px 18px 12px}
.al-row[hidden]{display:none}
.al-top{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;gap:16px}
.al-img img{display:block;width:120px;height:auto;aspect-ratio:1.586;object-fit:contain;border-radius:8px;box-shadow:var(--shadow-raise)}
.al-name h3{margin:0;font:700 16px/1.35 var(--display)}
.al-name a{color:var(--ink);text-decoration:none}
.al-name a:hover{text-decoration:underline}
.al-bank{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-muted)}
.al-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.al-cmp{display:inline-flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;white-space:nowrap}
.al-cells{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.al-cell{font-size:13px;min-width:0}
.al-cell b{display:block;font:600 13.5px/1.35 var(--display)}
.al-cell small{display:block;margin-top:2px;font-size:11.5px;line-height:1.4;color:var(--ink-muted)}
.al-note{margin:10px 0 0;font-size:12.5px;color:var(--ink-muted);line-height:1.5}
.al-note b{color:var(--ink);font-weight:600}
.al-empty{padding:32px 0;text-align:center;color:var(--ink-muted)}
.al-more{display:block;margin:22px auto 0;font:700 14px/1 var(--body);color:var(--ink);background:#fff;border:1.5px solid var(--line-control);border-radius:999px;padding:13px 22px;cursor:pointer}
.al-more:hover{border-color:var(--ink)}
.al-more[hidden]{display:none}
@media (max-width:960px){
  .al-layout{grid-template-columns:1fr;gap:12px}
  .al-ftoggle{display:inline-flex;justify-self:start}
  .al-filters{display:none;position:static;max-height:none}
  .al-filters.open{display:block}
  .al-head{display:none}
  .al-sortm{display:block}
  .al-top{grid-template-columns:96px minmax(0,1fr)}
  .al-img img{width:96px}
  .al-act{grid-column:1/-1;justify-content:flex-start}
  .al-cells{grid-template-columns:1fr 1fr}
  .al-cell[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;color:var(--ink-muted);margin-bottom:2px}
}

.al-opt img{width:18px;height:18px;object-fit:contain;border-radius:4px;flex:none}
.al-dd{position:relative;margin-top:10px}
.al-dd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;font:400 14px/1.3 var(--body);color:var(--ink);background:var(--surface-000);border:1.5px solid var(--line-control);border-radius:var(--radius-sm);padding:10px 12px;cursor:pointer}
.al-dd-btn::after{content:"";flex:none;width:7px;height:7px;border-right:2px solid var(--ink-muted);border-bottom:2px solid var(--ink-muted);transform:rotate(45deg);margin:-3px 2px 0}
.al-dd-btn[aria-expanded=true]{border-color:var(--focus)}
.al-dd-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.al-dd-panel{position:absolute;z-index:12;left:0;right:0;top:calc(100% + 6px);background:var(--surface-000);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-fan);padding:10px}
.al-dd-panel[hidden]{display:none}
.al-dd-list{display:flex;flex-direction:column;gap:2px;max-height:240px;overflow:auto}
.al-dd-panel .al-search{margin-bottom:8px}
.al-group:has(.al-dd) .al-opts{overflow:visible;max-height:none;margin-top:0}
@media (max-width:960px){.al-dd-panel{position:static;box-shadow:none;margin-top:6px}}

/* thin custom scrollbars inside the filter column */
.al-filters,.al-opts,.al-dd-list{scrollbar-width:thin;scrollbar-color:var(--line-control) transparent}
.al-filters ::-webkit-scrollbar,.al-filters::-webkit-scrollbar{width:6px;height:6px}
.al-filters ::-webkit-scrollbar-track{background:transparent}
.al-filters ::-webkit-scrollbar-thumb{background:var(--line-control);border-radius:6px;border:1px solid transparent;background-clip:padding-box}
.al-filters ::-webkit-scrollbar-thumb:hover{background:var(--ink-muted)}

.al-act{flex-direction:column;align-items:flex-end;gap:8px;flex-wrap:nowrap}
.al-btns{display:flex;align-items:center;gap:10px}
.al-dd-panel{position:static;box-shadow:none;margin-top:6px}
@media (max-width:960px){.al-act{align-items:flex-start}}

/* one table: header + rows share a frame, with column rules like a spreadsheet */
.al-table{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-000)}
.al-table .al-head{margin:0;border:0;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:0;gap:0;box-shadow:0 1px 0 var(--line)}
.al-table .al-head button{padding:14px 16px;border-right:1px solid var(--line)}
.al-table .al-head button:last-child{border-right:0}
.al-table .al-list{gap:0;margin-top:0}
.al-table .al-row{border:0;border-top:1px solid var(--line);border-radius:0;padding:0;background:transparent}
.al-table .al-head + .al-list .al-row:first-child{border-top:0}
.al-table .al-top{padding:16px 18px 14px}
.al-table .al-cells{gap:0;margin:0;padding:0;border-top:0}
.al-table .al-cell{padding:2px 16px 10px;border-right:1px solid var(--line)}
.al-table .al-cell:last-child{border-right:0}
.al-table .al-note{margin:0;padding:2px 18px 14px}
@media (max-width:960px){
  .al-table .al-cell{border-right:0;padding:2px 18px 10px}
  .al-table .al-cells{grid-template-columns:1fr 1fr;padding-bottom:4px}
  .al-table .al-top{padding:14px 18px}
}

.al-head::before{content:"";position:absolute;left:-1px;right:-1px;top:-12px;bottom:50%;background:var(--surface-000);z-index:-2}
.al-table .al-head{background:transparent}
.al-head::after{content:"";position:absolute;inset:-1px -1px 0 -1px;background:var(--surface-100);border:1px solid var(--line);border-radius:var(--radius-md) var(--radius-md) 0 0;z-index:-1}
.al-group[data-g=bank] .al-opts{max-height:clamp(120px,calc(100vh - 640px),300px)}

/* mobile: sticky filter/sort bar, filters as a right-hand drawer, heavier rules between cards */
.al-mbar,.al-close,.al-ffoot,.al-backdrop{display:none}
@media (max-width:960px){
  .al-layout{display:block}
  .al-mbar{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:calc(var(--al-bar,72px) - 6px);z-index:8;background:var(--surface-000);padding:16px 0 10px;margin-top:-4px}
  .al-mbar .al-ftoggle{display:inline-flex}
  .al-mbar .al-sortm{display:flex;align-items:center;gap:8px;margin:0}
  .al-backdrop{display:block;position:fixed;inset:0;z-index:58;background:rgba(13,17,42,.5)}
  .al-backdrop[hidden]{display:none}
  .al-filters{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;left:auto;width:min(88vw,380px);max-height:none;z-index:60;border:0;border-radius:0;padding:0;overflow-y:auto;overscroll-behavior:contain;background:var(--surface-000);transform:translateX(100%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s}
  .al-filters.open{display:flex;transform:none;visibility:visible;transition:transform .22s ease}
  .al-fhead{position:sticky;top:0;z-index:3;background:var(--surface-000);padding:14px 16px}
  .al-fhead .al-clear{display:none}
  .al-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--surface-100);font:400 24px/1 var(--body);color:var(--ink);cursor:pointer}
  .al-group{padding-inline:16px}
  .al-ffoot{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;position:sticky;bottom:0;margin-top:auto;background:var(--surface-000);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0));border-top:1px solid var(--line);z-index:3}
  .al-ffoot .btn{padding:13px 10px}
  body.al-lock{overflow:hidden}
  .al-table{border:0;border-radius:0;background:transparent}
  .al-table .al-row{border-top:10px solid var(--surface-200);background:var(--surface-000)}
  .al-table .al-list .al-row:first-child{border-top:0}
}

@media (max-width:960px){
  .al-table{margin-inline:calc(-1 * clamp(16px,4vw,32px))}
  .al-mbar{margin-inline:calc(-1 * clamp(16px,4vw,32px));padding-inline:clamp(16px,4vw,32px)}
  body.pg-all{overflow-x:clip}
  .al-table .al-top,.al-table .al-note{padding-inline:clamp(16px,4vw,32px)}
  .al-table .al-cell{padding-inline:clamp(16px,4vw,32px)}
}
@media (max-width:960px){.al-mbar{border-bottom:1px solid var(--line)}}
@media (max-width:960px){.al-count{margin-top:18px}}

/* card page welcome-offer box: what you get / spend / who, as short labelled lines (Oct 2026) */
.offer-lines{list-style:none;margin:0 0 10px;padding:0;font-size:14px;line-height:1.6;color:var(--ink-muted)}
.offer-lines li{margin:2px 0}
.offer-lines b{color:var(--ink);font-weight:600;margin-right:6px}

/* source footnotes under the card details table and the compare table (Oct 2026) */
.fn{font-size:.68em;line-height:0;vertical-align:super;margin-left:2px;font-weight:600}
.fn a{color:var(--brand);text-decoration:none}
.fnotes{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:4px;font-size:12.5px;line-height:1.55;color:var(--ink-muted)}
.fnotes sup{font-weight:600;color:var(--brand);margin-right:4px;display:inline-block;min-width:1.6em;vertical-align:baseline;font-size:.9em}

/* ---------- card-page calculators (points · miles · fuel · installment), design from the 8 ต.ค. 2569 prototype ----------
   scoped to .cc; the cashback calculator (UOB One) keeps the .calc-card rules above */
.cc-frame{display:grid;gap:16px}
.cc-sub{display:grid;gap:16px;margin-top:8px}
.cc .calc-head{display:flex;gap:14px;align-items:center}
.cc .calc-head > div{display:grid;gap:4px;min-width:0}
.cc .calc-head h2{font-size:clamp(20px,2.6vw,24px);font-weight:700;margin:0;line-height:1.3}
.cc .calc-head p{margin:0;color:var(--ink-muted);font-size:14px;max-width:70ch}
.cc .calc-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cc .calc-in{padding:clamp(16px,3vw,26px);display:grid;align-content:start;gap:4px;min-width:0}
.cc .calc-row:first-of-type,.cc .field:first-child{border-top:0}
.cc .calc-lw{display:flex;align-items:center;gap:12px;min-width:0}
.cc .calc-l{min-width:0}
.cc .calc-l b{font-size:14.5px}
.cc .calc-l small{display:block;font-weight:600;font-size:12.5px;line-height:1.45}
.cc .calc-l small.muted{color:var(--ink-muted);font-weight:500}
.cc .calc-inp input{width:118px}
.cc sup{font-size:.7em;line-height:0}
.cc .chips{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
.cc .chips button{display:inline-flex;align-items:center;gap:8px;text-align:left;font:600 13px/1.2 var(--body);padding:8px 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface-000);color:var(--ink);cursor:pointer}
.cc .chips button[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-strong)}
.cc .chips .cb{display:grid;gap:1px}
.cc .chips button small{display:block;font:500 11px/1.3 var(--body);color:var(--ink-muted)}
.cc .check{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}
.cc .check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--brand);flex:none}
.cc .check b{display:block;font:600 14px/1.35 var(--display)}
.cc .check small{display:block;font-size:12.5px;color:var(--ink-muted)}
.cc .field{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.cc .field > b{font:600 14.5px/1.35 var(--display)}
.cc .calc-out{padding:clamp(16px,3vw,26px);gap:12px;min-width:0}
.cc .big span,.cc .yr span{display:block;font-size:12.5px;color:var(--on-ink-muted)}
.cc .big b{font:700 clamp(36px,5vw,48px)/1.1 var(--display);color:var(--accent)}
.cc .big small,.cc .yr small{color:var(--on-ink-muted);font-size:12.5px;margin-inline-start:4px}
.cc .yr b{font:700 22px/1.2 var(--display)}
.cc .pair{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:end}
.cc .opts{display:grid;gap:8px;border-top:1px solid var(--on-ink-line,#262b4a);padding-top:12px}
.cc .opt{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.cc .opt span{color:var(--on-ink-muted)}
.cc .opt b{font-weight:600;text-align:right}
.cc .sum{display:grid;gap:6px;margin:0;border-top:1px solid var(--on-ink-line,#262b4a);padding-top:12px;font-size:inherit}
.cc .sum div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.cc .sum dt{color:var(--on-ink-muted)}
.cc .sum dd{margin:0;font-weight:600;text-align:right}
.cc .sum dd small{display:block;font-weight:400;font-size:12px;color:var(--on-ink-muted)}
.cc .sum .net dd{color:var(--accent)}
.cc .info{margin:0;font-size:13px;line-height:1.55;color:var(--on-ink);background:rgba(255,255,255,.06);border-radius:10px;padding:10px 12px}
.cc .info b{color:var(--accent);font-weight:600}
.cc .info.with-ico{display:flex;gap:10px;align-items:flex-start}
.cc .tips{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:13px;line-height:1.5}
.cc .tips:empty{display:none}
.cc .tips li{padding-left:16px;position:relative}
.cc .tips li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.cc .tips li.warn{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:rgba(255,255,255,.06);border-radius:10px;color:var(--on-ink)}
.cc .tips li.warn .ico{width:28px;height:28px}
.cc .tips li.warn::before{display:none}
.cc .tiers{display:grid;gap:8px;border-top:1px solid var(--on-ink-line,#262b4a);padding-top:12px}
.cc .tier{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:12.5px}
.cc .tier span{color:var(--on-ink-muted)}
.cc .tier b{font-weight:600}
.cc .meter{grid-column:1/-1;height:6px;border-radius:99px;background:var(--on-ink-line,#262b4a);overflow:hidden}
.cc .meter i{display:block;height:100%;background:var(--accent);border-radius:99px;width:0;transition:width .25s ease}
.cc .sub-block{border:1px solid var(--line);border-radius:var(--radius-xl);padding:clamp(16px,3vw,26px);display:grid;gap:14px;background:var(--surface-100)}
.cc .sub-block h3{margin:0;font:700 18px/1.3 var(--display);display:flex;align-items:center;gap:10px}
.cc .goal-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px}
.cc .goal-res{display:grid;gap:10px;align-content:start;background:var(--surface-000);border:1px solid var(--line);border-radius:var(--radius-md);padding:16px}
.cc .goal-res .need{font:700 26px/1.2 var(--display)}
.cc .goal-res .need small{font:500 13px var(--body);color:var(--ink-muted);margin-inline-start:4px}
.cc .goal-res p{margin:0;font-size:14px}
.cc .goal-res .ex{font-size:12.5px;color:var(--ink-muted)}
.cc .goal-res .when{font:600 16px/1.4 var(--display)}
.cc .goal-res .when b{color:var(--brand-strong)}
.cc .gbar{height:10px;border-radius:99px;background:var(--surface-200);overflow:hidden}
.cc .gbar i{display:block;height:100%;background:var(--brand);width:0;transition:width .25s ease}
.cc .mini{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}
.cc .mini input{width:90px;font:600 14px/1 var(--mono);text-align:right;border:1.5px solid var(--line-control);border-radius:10px;padding:8px 10px;background:var(--surface-000);color:var(--ink)}
.cc .mini input.wide{width:120px}
.cc .goal-res .alt{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:8px}
.cc .seg{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;padding:2px;background:var(--surface-000)}
.cc .seg button{display:inline-flex;align-items:center;gap:7px;font:600 13px/1.2 var(--body);border:0;background:transparent;color:var(--ink-muted);padding:8px 12px;border-radius:999px;cursor:pointer}
.cc .seg button[aria-pressed="true"]{background:var(--brand);color:var(--on-brand)}
.cc .goal-opts{display:grid;gap:12px;align-content:start}
.cc .goal-opts .row{display:flex;flex-wrap:wrap;gap:8px}
.cc .tbl-wrap{overflow-x:auto}
.cc table.cmp{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.cc .cmp th,.cc .cmp td{text-align:left;padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.cc .cmp thead th{border-top:0;font:600 12.5px var(--body);color:var(--ink-muted)}
.cc .cmp td b{font-weight:600}
.cc .cmp td.n{font-family:var(--mono);white-space:nowrap}
.cc .cmp td small{display:block;color:var(--ink-muted);font-size:12px}
.cc .cmp tr.on td{background:var(--brand-tint)}
.cc .cmp tr.bad td.n.x{color:var(--crit);font-weight:600}
.cc .fnotes{margin:0}
.cc .ico{display:inline-block;flex:none;width:32px;height:32px;background:center/contain no-repeat}
.cc .ico.s20{width:20px;height:20px}.cc .ico.s22{width:22px;height:22px}.cc .ico.s24{width:24px;height:24px}.cc .ico.s28{width:28px;height:28px}
.cc .tile{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:12px;background:radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.22),transparent 55%),linear-gradient(145deg,var(--brand),color-mix(in srgb,var(--brand) 62%,#b83ec6))}
.cc .tile .ico{width:72%;height:72%;filter:drop-shadow(0 3px 6px rgba(20,8,80,.25))}
.cc .tile.t56{width:56px;height:56px;border-radius:16px}
.cc .mi{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--brand-tint);color:var(--brand)}
.cc .mi .i8{width:23px;height:23px}
.cc .mi.s28{width:32px;height:32px}.cc .mi.s28 .i8{width:19px;height:19px}
.cc .logo{border-radius:6px;box-shadow:0 0 0 1px rgba(13,17,42,.08)}
.cc .flag{display:inline-block;flex:none;width:22px;height:16.5px;border-radius:3px;background:center/cover no-repeat;box-shadow:0 0 0 1px rgba(13,17,42,.14)}
.cc .ic-warn{background-image:url(assets/icons/calc/warn.webp)}
.cc .lg-thai{background-image:url(assets/logos/brands/thaiairways.png)}
.cc .fl-th{background-image:url(assets/icons/flags/th.svg)}.cc .fl-sg{background-image:url(assets/icons/flags/sg.svg)}.cc .fl-my{background-image:url(assets/icons/flags/my.svg)}
.cc .fl-vn{background-image:url(assets/icons/flags/vn.svg)}.cc .fl-hk{background-image:url(assets/icons/flags/hk.svg)}.cc .fl-tw{background-image:url(assets/icons/flags/tw.svg)}
.cc .fl-id{background-image:url(assets/icons/flags/id.svg)}.cc .fl-in{background-image:url(assets/icons/flags/in.svg)}.cc .fl-jp{background-image:url(assets/icons/flags/jp.svg)}
.cc .fl-kr{background-image:url(assets/icons/flags/kr.svg)}.cc .fl-au{background-image:url(assets/icons/flags/au.svg)}.cc .fl-eu{background-image:url(assets/icons/flags/eu.svg)}
.rv-specs .cc-inst{margin-top:clamp(24px,4vw,36px)}
@media (max-width:780px){.cc .calc-card,.cc .goal-grid{grid-template-columns:minmax(0,1fr)}.cc .calc-inp input{width:104px}}
@media (max-width:420px){.cc .calc-row{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.cc .meter i,.cc .gbar i{transition:none}}
a.tbrand{text-decoration:none;color:inherit}
a.tbrand img{transition:border-color .15s ease,box-shadow .15s ease}
a.tbrand:hover img,a.tbrand:focus-visible img{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
a.tbrand:hover small{color:var(--brand)}
.tier-card .tier-brands + .tier-icons{margin-top:10px}

.bank-chips button img{width:18px;height:18px;border-radius:4px;object-fit:contain;background:#fff;flex:none}

/* header search button + search dialog (assets/site.js) */
.bar-act{display:flex;align-items:center;gap:8px;flex:none}
.nav-search{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:999px;border:1px solid var(--line);background:var(--surface-100);color:var(--ink);cursor:pointer;transition:background .15s ease,color .15s ease}
.nav-search:hover{background:var(--brand-tint);color:var(--brand)}
.sx-open{overflow:hidden}
dialog.sx{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden}
dialog.sx::backdrop{background:rgba(13,17,42,.45);backdrop-filter:blur(3px)}
.sx-box{width:min(640px,calc(100% - 32px));margin:max(72px,10vh) auto 0;max-height:calc(100dvh - max(72px,10vh) - 24px);display:flex;flex-direction:column;background:var(--surface-000);border-radius:20px;box-shadow:0 24px 64px rgba(13,17,42,.28);overflow:hidden}
.sx-head{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 18px;border-bottom:1px solid var(--line);color:var(--ink-muted)}
.sx-in{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 17px/1.4 var(--body);color:var(--ink);padding:10px 0}
.sx-in::-webkit-search-cancel-button{cursor:pointer}
.sx-x{flex:none;font:600 13px/1 var(--body);color:var(--ink-muted);background:var(--surface-100);border:1px solid var(--line);border-radius:999px;padding:9px 14px;cursor:pointer}
.sx-body{overflow-y:auto;overscroll-behavior:contain;padding:6px 8px 10px}
.sx-g{padding-top:6px}
.sx-gh{margin:6px 10px 4px;font:700 11.5px/1.3 var(--body);color:var(--ink-faint);letter-spacing:.02em}
.sx-it{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;color:var(--ink);text-decoration:none}
.sx-it:hover,.sx-it[aria-selected]{background:var(--brand-tint);text-decoration:none}
.sx-card{width:48px;height:30px;flex:none;border-radius:4px;object-fit:cover;background:var(--surface-100);box-shadow:0 0 0 1px rgba(13,17,42,.08)}
.sx-logo{width:32px;height:32px;flex:none;border-radius:8px;object-fit:contain;background:#fff;box-shadow:0 0 0 1px var(--line)}
.sx-tool{display:inline-flex;align-items:center;justify-content:center;font:700 18px/1 var(--body);color:var(--brand);background:var(--brand-tint);box-shadow:none}
.sx-t{display:flex;flex-direction:column;min-width:0;flex:1}
.sx-t b{font:600 14.5px/1.35 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-t small{font-size:12.5px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-t mark{background:var(--accent-tint);color:inherit;border-radius:3px;padding:0 1px}
.sx-all{margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;color:var(--brand)}
.sx-all b{color:var(--brand)}
.sx-chips{display:flex;flex-wrap:wrap;gap:6px;padding:2px 8px 6px}
.sx-chip{display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1 var(--body);color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:7px 12px 7px 10px;text-decoration:none}
.sx-chip .i8{width:16px;height:16px;color:var(--brand)}
.sx-tool .i8{width:18px;height:18px}
.sx-chip:hover,.sx-chip[aria-selected]{border-color:var(--brand);background:var(--brand-tint);text-decoration:none}
.sx-msg{margin:18px 12px;color:var(--ink-muted);font-size:14px}
@media (max-width:640px){
  .sx-box{width:100%;margin:0;max-height:100dvh;height:100dvh;border-radius:0}
  .sx-in{font-size:16px}
}
.al-q{display:flex;align-items:center;gap:10px;background:var(--surface-000);border:1.5px solid var(--line-control);border-radius:999px;padding:0 16px;margin:0 0 14px;color:var(--ink-muted)}
.al-q:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.al-q input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 15px/1.4 var(--body);color:var(--ink);padding:12px 0}
@media (max-width:640px){.al-q input{font-size:16px}}

/* quiz: auto "hover" preview on desktop before the visitor touches the quiz (assets/mq.js) */
@media (min-width:480px) and (hover:hover){
  .mq-fan .mq-choice.demo:not(.picked){transform:translateY(-14px) rotate(0deg);z-index:1}
}
/* brand matcher: hint under the cards panel title until a brand is picked */
.pb-hint{display:block;font-size:12px;color:var(--ink-muted);font-weight:500;margin-top:2px}
.pb-hint-m{display:none}
.pb-show .pb-hint{display:none}
@media (max-width:860px){.pb-hint-d{display:none}.pb-hint-m{display:inline}}
/* homepage category carousel */
.hc{margin-block:clamp(40px,7vw,72px) 0}
.hc-box{position:relative;margin-top:20px}
.hc-box{--gl:0px;--gr:0px;margin-inline:calc(-1 * var(--gl)) calc(-1 * var(--gr))}
.hc-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gl) var(--gr);padding:18px var(--gr) 40px var(--gl);margin-block:-18px -30px;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent calc(var(--gl) - 48px),#000 var(--gl),#000 calc(100% - var(--gr)),transparent calc(100% - var(--gr) + 48px));mask-image:linear-gradient(90deg,transparent calc(var(--gl) - 48px),#000 var(--gl),#000 calc(100% - var(--gr)),transparent calc(100% - var(--gr) + 48px))}
.hc-row.dragging{cursor:grabbing;scroll-snap-type:none}
.hc-row.dragging .hc-tile{pointer-events:none}
.hc-tile,.hc-tile img{-webkit-user-drag:none;user-select:none}
.hc-row::-webkit-scrollbar{display:none}
.hc-tile{flex:0 0 156px;scroll-snap-align:start;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.hc-tile:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow-pop);text-decoration:none}
.hc-top{display:flex;align-items:center;justify-content:center;height:84px;background:radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.22),transparent 55%),linear-gradient(145deg,var(--brand),color-mix(in srgb,var(--brand) 62%,#b83ec6))}
.hc-top img{width:56px;height:56px;filter:drop-shadow(0 8px 14px rgba(20,8,80,.28));transition:transform .3s cubic-bezier(.34,1.4,.64,1)}
.hc-tile:hover .hc-top img{transform:scale(1.08) translateY(-2px)}
.hc-body{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:10px 12px 12px;flex:1}
.hc-body b{font:700 14px/1.3 var(--display)}
.hc-body small{font-size:12px;color:var(--ink-muted)}
.hc-btn{position:absolute;top:calc(50% - 25px);z-index:2;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);box-shadow:var(--shadow-raise);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.hc-btn:hover{border-color:var(--brand);color:var(--brand)}
.hc-btn.prev{left:calc(var(--gl) - 10px)}.hc-btn.next{right:calc(var(--gr) - 10px)}
.hc-btn[hidden]{display:none}
@media (hover:none){.hc-btn{display:none}}
.hc-more{text-align:center;margin:14px auto 0;font-size:13.5px;font-weight:600}
@media (max-width:560px){.hc-tile{flex-basis:132px}.hc-top{height:72px}.hc-top img{width:48px;height:48px}}

/* the BOT responsible-lending line: on every page (footer, go.html) */
.foot-warn{font-weight:600;color:var(--ink)!important}

/* homepage section titles: the category carousel uses the same h2 as the other sections */
.hc .section-head h2{font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,30px);letter-spacing:-.015em;margin:0}
/* all-cards filter panel: no rule under the last group */
.al-group:not(:has(~ .al-group)){border-bottom:0}
/* two boxes in a benefit band: the headline box takes 8/12, the second 4/12 */
@media (min-width:821px){.tier-grid:has(> .tier-card:nth-child(2):last-child){grid-template-columns:2fr 1fr}}

/* last section on category/brand pages: room before the footer */
.cat-related{margin-bottom:clamp(56px,8vw,96px)}

/* issuer hub + issuer pages (tools/bank-pages.mjs) */
.bk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:20px 0 40px}
.bk-tile{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;color:var(--ink);text-decoration:none;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.bk-tile:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow-pop);text-decoration:none}
.bk-logo{width:52px;height:52px;flex:none;display:flex;align-items:center;justify-content:center}
.bk-logo img{width:48px;height:48px;object-fit:contain;border-radius:12px}
.bk-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.bk-body b{font:700 17px/1.3 var(--display)}
.bk-body small{color:var(--ink-muted);font-size:12.5px}
.bk-actions{margin-top:14px}
.bank-chips button .i8{width:14px;height:14px;color:var(--brand)}
.bank-chips button.on .i8{color:currentColor}
.bank-links{display:flex;flex-wrap:wrap;gap:8px}
.bank-links a{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--body);color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:8px 14px 8px 8px;text-decoration:none;background:#fff}
.bank-links a:hover{border-color:var(--brand);color:var(--brand)}
.bank-links img{width:22px;height:22px;object-fit:contain;border-radius:5px}
/* issuer names that link to the issuer page */
a.pc-bank,a.al-bank,.rv-bank a,.gp-bank a,a.bankname{color:inherit;text-decoration:none}
a.pc-bank,a.al-bank{display:inline-flex;align-items:center;gap:6px}
a.pc-bank:hover,a.al-bank:hover,.rv-bank a:hover,.gp-bank a:hover,a.bankname:hover{color:var(--brand);text-decoration:underline}
.rv-bank a{display:inline-flex;align-items:center;gap:inherit}

/* toast (assets/site.js c9dToast) */
.c9-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:10px;max-width:min(440px,calc(100% - 32px));padding:11px 18px 11px 12px;border-radius:999px;font:600 14px/1.35 var(--body);color:#fff;background:#178a55;box-shadow:0 10px 30px rgba(13,17,42,.22);transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .25s cubic-bezier(.34,1.4,.64,1)}
.c9-toast.on{opacity:1;transform:translate(-50%,0)}
.c9-toast.info{background:var(--surface-ink)}
.c9-toast-ic{width:22px;height:22px;flex:none;border-radius:50%;background:rgba(255,255,255,.22);display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.c9-toast.tap.on{pointer-events:auto;cursor:pointer}
@media (max-width:560px){.c9-toast{width:calc(100% - 24px);max-width:none;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:9px 14px 9px 9px;border-radius:14px;font-size:13px;gap:8px}.c9-toast-ic{width:20px;height:20px;font-size:12px}}
@media (prefers-reduced-motion: reduce){.c9-toast{transition:opacity .2s ease;transform:translate(-50%,0)}}

/* compare tray full (3 cards): other "เพิ่มเพื่อเทียบ" boxes look inactive but still explain why when ticked */
label.is-full{opacity:.5}

/* homepage issuer strip: draggable (assets/site.js) */
.trust-marquee{cursor:grab;touch-action:pan-y;user-select:none}
.trust-marquee.dragging{cursor:grabbing}
.trust-marquee img{-webkit-user-drag:none}

/* key facts on card pages (.lined): no boxes, a thin rule between columns.
   Fixed 12-col grid: each fact is 3/12 on desktop (4 per row, even with only 2–3 facts), 4/12 on tablets, 6/12 on phones */
.rv-facts.lined{gap:18px 0;grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr))}
.rv-facts.lined .fact{background:none;border:0;border-left:1px solid var(--line);border-radius:0;padding:4px 20px}
.rv-facts.lined .fact:nth-child(4n+1){border-left:0;padding-left:0}
@media (max-width:980px){
  .rv-facts.lined{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rv-facts.lined .fact:nth-child(4n+1){border-left:1px solid var(--line);padding-left:20px}
  .rv-facts.lined .fact:nth-child(3n+1){border-left:0;padding-left:0}
}
@media (max-width:560px){
  .rv-facts.lined{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rv-facts.lined .fact{padding:4px 14px}
  .rv-facts.lined .fact:nth-child(n){border-left:1px solid var(--line);padding-left:14px}
  .rv-facts.lined .fact:nth-child(odd){border-left:0;padding-left:0}
}

/* brand pages: each card's promotions with that brand, above "เหมาะสำหรับ" */
.pc-promos{margin:2px 0 0;padding:12px 14px;border-radius:var(--radius-md);background:var(--brand-tint)}
.pc-promos > b{display:flex;align-items:center;gap:6px;font:700 13.5px/1.3 var(--display);color:var(--brand-strong);margin-bottom:6px}
.pc-promos ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pc-promos li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:13.5px;line-height:1.45}
.pc-promos li a{color:var(--ink);font-weight:600;text-decoration:none}
.pc-promos li a:hover{color:var(--brand);text-decoration:underline}
.pc-promos li small{font-size:11.5px;color:var(--ink-muted);white-space:nowrap}
.pc-promos .pp-core{color:var(--good);font-weight:600}
.pc-promos details{margin-top:6px}
.pc-promos summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--brand)}
.pc-promos details ul{margin-top:6px}

/* r23 mobile tweaks */
.pc-cta-more{display:none}
@media (max-width:975px){.bar{padding-inline:12px}} /* navbar pill no longer touches the screen edge */
@media (max-width:760px){
  /* category page: bigger card image, review + apply side by side 50/50 */
  .pg-cat-one .pc-head{grid-template-columns:auto 120px 1fr}
  .pg-cat-one .pc-img{width:120px;height:76px}
  .pg-cat-one .pc-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .pg-cat-one .pc-cta .btn{width:100%;min-width:0}
  .pg-cat-one .pc-cta-more{display:inline-flex}
  .pg-cat-one .pc-cta small{grid-column:1/-1;text-align:center}
  .pg-cat-one .pc-foot .pc-link{display:none}
  /* all cards: review + apply 50/50 */
  .al-act{align-items:stretch}
  .al-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .al-btns .btn{width:100%;min-width:0}
}

/* r24 mobile tweaks */
.cx-h{grid-template-columns:auto 104px 1fr auto}
.cx-h > img{width:104px;height:66px}
@media (max-width:760px){
  /* issuer, brand-promo and gift pages: apply button half width, centred */
  .pg-bank .pc-cta,.pg-brand .pc-cta,.pg-gift .pc-cta{flex-direction:column;align-items:center}
  .pg-bank .pc-cta .btn,.pg-brand .pc-cta .btn,.pg-gift .pc-cta .btn{width:50%;min-width:0}
  .pg-bank .pc-cta small,.pg-brand .pc-cta small,.pg-gift .pc-cta small{text-align:center}
  /* category page top summary: bigger card image, apply + eligibility 50/50 */
  .sum-img img{width:140px}
  .sum-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sum-cta .btn{width:100%;min-width:0}
  .sum-cta a:not(.btn){display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:6px 12px;border:1.5px solid var(--line-control,var(--line));border-radius:var(--radius-pill,999px);color:var(--ink);font-size:13px;text-decoration:none}
  /* all cards: bigger card image */
  .al-top{grid-template-columns:132px minmax(0,1fr)}
  .al-img img{width:132px}
}
@media (max-width:520px){
  .cx-h{grid-template-columns:auto 96px 1fr}
  .cx-h > img{width:96px;height:61px}
}
/* r24b compare tray */
@media (max-width:760px){.cmp-count{display:none}.cmp-thumbs{margin-inline-end:auto}}