/* /categories/ — the four 2026 competition tracks.

   Desktop: 1:1 to wlsc-categories-desktop-mockup-2026.png (1672px wide; sizes
   × 0.86 at 1440): hero 270 · track tabs 40 · four cards 226 tall, dark /
   light / dark / light · quick comparison 73 · steps on a gold wave 78 ·
   CTA 113.  Phone (≤760): …-mobile-mockup-2026.png — pills, full-width cards
   with text and photograph alternating sides, a folding comparison, four
   steps, CTA and the tag line.  .cx-d = desktop-only, .cx-m = phone-only. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+0300-0309, U+0323, U+1E00-1EFF, U+2000-206F, U+20AB, U+2122, U+2190-2194;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020, U+0030-0039, U+00B7;
}
/* Only the Han characters the zh-hant archive copy uses (see
   tools/build-history-fonts.py). Any other character falls through to the
   locale serif, and the test suite fails before that can happen to the copy. */
@font-face {
  font-family: "WLSC Serif TC";
  src: url("/assets/fonts/noto-serif-tc-history.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3000-303F, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}

@font-face {
  font-family: "Great Vibes";
  src: url("/assets/fonts/great-vibes-script.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020, U+0041-005A, U+0061-007A;
}



body.is-categories {
  --cx-bg: #0a0807; --cx-panel: #14100d; --cx-gold: #d8b479; --cx-gold-2: #efd3a0;
  --cx-cream: #f2e7d6; --cx-dim: rgba(242, 231, 214, .66); --cx-line: rgba(216, 180, 121, .3);
  --cx-ink: #2a1d10; --cx-paper: #efe2cc;
  --cx-pad: clamp(16px, 2.2vw, 34px);
  --cx-serif: "Cormorant Garamond", var(--font-display); --cx-latin: "Cormorant Garamond", Georgia, serif;
  background: var(--cx-bg);
}
html:lang(zh-Hant) body.is-categories { --cx-serif: "Cormorant Garamond", "WLSC Serif TC", var(--font-display); }
@media (min-width: 761px) { body.is-categories .cx .cx-m { display: none; } }
@media (max-width: 760px) { body.is-categories .cx .cx-d { display: none; } }

.cx { background: var(--cx-bg); color: var(--cx-cream); font-family: var(--font-body); line-height: 1.55; overflow-x: clip; }
:where(.cx) a { color: inherit; text-decoration: none; }
:where(.cx) p { max-width: none; margin: 0; }
:where(.cx) :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.cx) img { display: block; width: 100%; height: auto; }
:where(.cx) h2 { margin: 0; color: inherit; }
.cx [id] { scroll-margin-top: 96px; }
.cx-i { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: var(--cx-gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cx-words { color: var(--cx-dim); font: 500 11.5px/1.9 var(--cx-latin); letter-spacing: .24em; text-transform: uppercase; }
.cx-rule { display: block; width: 40px; height: 1px; background: var(--cx-gold); }
.cx-no { font: 500 1em/1 var(--cx-latin); }
.cx-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* header, as on the other designed pages */
body.is-categories .hd { position: sticky; top: 0; background: var(--cx-bg); border-bottom: 1px solid var(--cx-line); backdrop-filter: none; }
/* The bar's layout is the site's own on every page (links, language and
   register pushed to the right, as on the home page); this page only gives it
   a solid ground and a gold hairline. */

/* ---------------------------------------------------------- hero */
.cx-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .11fr) minmax(0, .69fr) minmax(0, .2fr); align-items: center; min-height: clamp(260px, 18.8vw, 320px); border-bottom: 1px solid var(--cx-line); }
.cx-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 56%; }
.cx-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 8, 7, .96) 0%, rgba(10, 8, 7, .8) 30%, rgba(10, 8, 7, .1) 58%, rgba(10, 8, 7, .15) 100%); pointer-events: none; }
.cx-hero > div { position: relative; z-index: 1; }
.cx-hero__left { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 26px; padding-left: var(--cx-pad); }
.cx-hero__left i { display: block; width: 1px; height: 46px; background: var(--cx-gold); }
.cx-hero__left .cx-words { font-size: 10.5px; color: var(--cx-gold); }
.cx-hero__copy { padding: 26px 0 26px; }
.cx-kick { font: 500 13.5px var(--cx-latin); letter-spacing: .16em; color: var(--cx-gold-2); }
.cx-hero h1 { margin: 6px 0 0; font: 600 clamp(2.9rem, 4.6vw, 4.3rem)/1.1 var(--cx-serif); letter-spacing: .1em; background: linear-gradient(180deg, #fffaf0 0%, #f1e2c6 70%, #dcc091 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cx-track { margin-top: 6px; font: 500 clamp(1.05rem, 1.55vw, 1.4rem)/1.2 var(--cx-latin); letter-spacing: .16em; }
.cx-lead { margin-top: 8px; font: 500 clamp(1rem, 1.45vw, 1.3rem)/1.4 var(--cx-serif); letter-spacing: .08em; }
.cx-scroll { display: inline-flex; align-items: center; gap: 12px; margin-top: 16px; font: 500 10.5px var(--cx-latin); letter-spacing: .2em; color: var(--cx-dim); }
.cx-scroll i { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--cx-dim); border-radius: 50%; font-size: 16px; }
.cx-scroll .cx-i { stroke: var(--cx-cream); }
.cx-hero__right { justify-self: end; padding-right: calc(var(--cx-pad) + 22px); text-align: right; }
.cx-hero__right .cx-words { font-size: 10.5px; color: var(--cx-cream); }
.cx-hero__right .cx-rule { margin: 14px 0 0 auto; width: 32px; }

/* ---------------------------------------------------------- tabs */
.cx-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 8px calc(var(--cx-pad) + 110px) 6px; }
.cx-tabs a { position: relative; display: flex; align-items: center; gap: 12px; padding: 6px 0; font: 500 16px var(--cx-serif); letter-spacing: .04em; color: var(--cx-cream); }
.cx-tabs a::after { content: ""; flex: 1; height: 1px; margin-left: 10px; background: var(--cx-line); }
.cx-tabs b { font: 500 24px var(--cx-latin); color: var(--cx-gold-2); }
.cx-tabs a.is-on::before { content: ""; position: absolute; left: 0; top: -8px; width: 26px; height: 2px; background: var(--cx-gold); }
.cx-tabs a:hover span { color: var(--cx-gold-2); }

/* ---------------------------------------------------------- cards */
.cx-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 4px var(--cx-pad) 14px; border-bottom: 1px solid var(--cx-line); }
.cx-card { position: relative; overflow: hidden; aspect-ratio: 393 / 262; border: 1px solid var(--cx-line); background: var(--cx-panel); }
.cx-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.cx-card:hover > img { transform: scale(1.03); }
.cx-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 10, 8, .92) 0%, rgba(14, 10, 8, .55) 42%, rgba(14, 10, 8, .05) 75%), linear-gradient(0deg, rgba(14, 10, 8, .8) 0%, transparent 45%); }
.cx-card--light { background: var(--cx-paper); color: var(--cx-ink); border-color: rgba(216, 180, 121, .7); }
.cx-card--light::after { background: linear-gradient(90deg, #efe2cc 0%, rgba(239, 226, 204, .92) 34%, rgba(239, 226, 204, .1) 72%), linear-gradient(0deg, rgba(239, 226, 204, .95) 0%, transparent 42%); }
.cx-card__body { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; padding: 16px 18px 14px; }
.cx-card__head { display: flex; flex-direction: column; }
.cx-card__head .cx-no { font-size: clamp(2.3rem, 3.6vw, 3.4rem); color: var(--cx-gold-2); }
.cx-card--light .cx-no { color: var(--cx-ink); }
.cx-card h2 { margin-top: 6px; font: 600 clamp(1.15rem, 1.75vw, 1.6rem)/1.25 var(--cx-serif); letter-spacing: .08em; }
.cx-card__en { margin-top: 4px; font: 500 11px var(--cx-latin); letter-spacing: .16em; color: var(--cx-dim); }
.cx-card--light .cx-card__en { color: rgba(42, 29, 16, .72); }
.cx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
.cx-chips li { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid rgba(242, 231, 214, .55); border-radius: 999px; font: 600 10.5px var(--font-body); letter-spacing: .02em; white-space: nowrap; background: rgba(10, 8, 7, .35); }
.cx-chips .cx-i { display: none; }
.cx-card--light .cx-chips li { border-color: rgba(42, 29, 16, .55); background: rgba(255, 255, 255, .3); }
.cx-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 12px; }
.cx-card__words { font-size: 9.5px; line-height: 1.6; letter-spacing: .18em; }
.cx-card--light .cx-card__words { color: rgba(42, 29, 16, .75); }
.cx-view { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; padding: 9px 22px; border: 1px solid var(--cx-gold-2); border-radius: 999px; font-size: 13.5px; background: rgba(10, 8, 7, .55); transition: background .3s, color .3s; }
.cx-view:hover { background: var(--cx-gold-2); color: var(--cx-ink); }
.cx-card--light .cx-view { border-color: var(--cx-ink); background: transparent; }
.cx-card--light .cx-view:hover { background: var(--cx-ink); color: var(--cx-paper); }

/* ---------------------------------------------------------- quick comparison */
.cx-compare { display: grid; grid-template-columns: minmax(0, .2fr) repeat(4, minmax(0, .2fr)); align-items: center; padding: 14px var(--cx-pad); border-bottom: 1px solid var(--cx-line); }
.cx-compare__list { display: contents; }
.cx-compare__t { display: flex; flex-direction: column; padding: 0 10px 0 12px; }
.cx-compare__t h2 { position: relative; font: 600 clamp(1.4rem, 2.1vw, 1.9rem)/1.2 var(--cx-serif); letter-spacing: .14em; }
.cx-compare__t h2::after { content: ""; display: inline-block; width: 30px; height: 1px; margin-left: 14px; vertical-align: middle; background: var(--cx-cream); }
.cx-compare__t p { margin-top: 4px; font: 500 12.5px var(--cx-latin); letter-spacing: .2em; color: var(--cx-gold-2); }
.cx-compare__list li { display: flex; align-items: center; gap: 18px; padding: 4px 26px; border-left: 1px solid var(--cx-line); font-size: 34px; }
.cx-compare__list b { display: block; font: 600 15px var(--cx-serif); letter-spacing: .06em; }
.cx-compare__list span { display: block; margin-top: 2px; font-size: 13px; color: var(--cx-dim); }

/* ---------------------------------------------------------- steps */
.cx-steps { position: relative; padding: 14px var(--cx-pad) 16px; border-bottom: 1px solid var(--cx-line); }
/* The wave runs under the text line, from icon to icon, as drawn. */
.cx-wave { position: absolute; left: 8%; right: 6%; top: 62%; width: 86%; height: 44px; transform: translateY(-50%); overflow: visible; }
.cx-wave path { opacity: .8; }
.cx-wave path { fill: none; stroke: rgba(216, 180, 121, .75); stroke-width: 1.3; filter: drop-shadow(0 0 4px rgba(239, 211, 160, .6)); }
.cx-steps ol { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-left: 90px; }
.cx-steps li { display: flex; align-items: center; gap: 18px; }
.cx-steps__ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border: 1.3px solid var(--cx-gold); border-radius: 50%; font-size: 26px; background: var(--cx-bg); box-shadow: 0 0 14px rgba(216, 180, 121, .25); }
.cx-steps__ic > span { display: inline-flex; }
.cx-steps p { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
.cx-steps .cx-no { font-size: 20px; color: var(--cx-gold-2); }
.cx-steps strong { font: 600 16px var(--cx-serif); letter-spacing: .08em; }
.cx-steps p > span { grid-column: 2; margin-top: 4px; font-size: 13px; color: var(--cx-dim); }

/* ---------------------------------------------------------- CTA */
.cx-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .44fr) minmax(0, .4fr) minmax(0, .16fr); align-items: center; gap: 20px; min-height: 120px; padding: 18px var(--cx-pad) 18px calc(var(--cx-pad) + 12%); }
.cx-cta > :not(.cx-bg) { position: relative; z-index: 1; }
.cx-cta .cx-bg { opacity: .9; }
.cx-cta h2 { margin-top: 4px; font: 600 clamp(1.8rem, 3.1vw, 2.85rem)/1.2 var(--cx-serif); letter-spacing: .14em; }
.cx-cta .cx-kick { font-size: 12.5px; letter-spacing: .22em; }
.cx-cta__btns { display: flex; gap: 14px; }
.cx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 6px 30px; border-radius: 999px; font-size: 16px; font-weight: 500; letter-spacing: .06em; text-align: center; transition: filter .3s, background .3s, color .3s; }
.cx-btn--gold { background: linear-gradient(180deg, #f3dfb6 0%, #dcb57a 100%); color: var(--cx-ink); }
.cx-btn--gold:hover { filter: brightness(1.06); }
.cx-btn--line { border: 1.3px solid var(--cx-gold-2); color: var(--cx-cream); background: rgba(10, 8, 7, .45); }
.cx-btn--line .cx-i { font-size: 1.25em; stroke: var(--cx-cream); }
.cx-btn[aria-disabled="true"] { cursor: default; }
.cx-cta__sign { justify-self: end; text-align: center; }
.cx-cta__sign .cx-words { font-size: 10px; color: var(--cx-cream); }
.cx-cta__sign .cx-rule { margin: 12px auto; width: 34px; }
.cx-cta__mark { font: 500 13px var(--cx-latin); letter-spacing: .14em; }

.cx :focus-visible { outline: 2px solid var(--cx-gold-2); outline-offset: 3px; }
html:is(:lang(th), :lang(my)) .cx h1, html:is(:lang(th), :lang(my)) .cx h2 { letter-spacing: 0; line-height: 1.45; }
html:is(:lang(en), :lang(vi)) .cx-hero h1 { letter-spacing: .01em; font-size: clamp(2.3rem, 3.8vw, 3.6rem); }

/* ---------------------------------------------------------- 761–1100 */
@media (max-width: 1100px) {
  .cx-hero { grid-template-columns: minmax(0, 1fr); padding-left: var(--cx-pad); }
  .cx-hero__left, .cx-hero__right { display: none; }
  .cx-tabs { padding-inline: var(--cx-pad); }
  .cx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .cx-compare__t { grid-column: 1 / -1; }
  .cx-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 0; }
  .cx-wave { display: none; }
  .cx-cta { grid-template-columns: minmax(0, 1fr); padding-left: var(--cx-pad); text-align: center; }
  .cx-cta__btns { justify-content: center; }
  .cx-cta__sign { justify-self: center; }
}

/* ---------------------------------------------------------- ≤760 · phone */
@media (max-width: 760px) {
  .cx-hero { display: block; padding: 0; min-height: 0; }
  .cx-hero__img { object-position: 78% 40%; }
  .cx-hero::after { background: linear-gradient(90deg, rgba(10, 8, 7, .92) 0%, rgba(10, 8, 7, .62) 48%, rgba(10, 8, 7, .05) 85%); }
  .cx-hero__copy { padding: 22px 16px 18px; }
  .cx-kick { font-size: 10.5px; letter-spacing: .12em; }
  .cx-hero h1 { font-size: clamp(2.5rem, 12vw, 3rem); }
  .cx-track { font-size: 12px; letter-spacing: .12em; }
  .cx-lead { font-size: 13px; letter-spacing: .06em; }

  .cx-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 10px 12px; border-bottom: 0; }
  .cx-tabs::-webkit-scrollbar { display: none; }
  .cx-tabs a { justify-content: center; min-width: 0; gap: 5px; padding: 6px 4px; border: 1px solid var(--cx-gold); border-radius: 999px; font-size: 12px; line-height: 1.2; text-align: center; }
  .cx-tabs a::after, .cx-tabs a.is-on::before { display: none; }
  .cx-tabs b { font-size: 14px; }
  .cx-tabs a.is-on { background: linear-gradient(180deg, #8a6a3e, #4a3520); border-color: var(--cx-gold-2); }

  .cx-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0 12px 10px; border: 0; }
  .cx-card, .cx-card--light { aspect-ratio: auto; min-height: 164px; background: var(--cx-panel); color: var(--cx-cream); border-color: var(--cx-line); display: grid; grid-template-columns: minmax(0, .64fr) minmax(0, .36fr); }
  .cx-card > img { left: 36%; width: 64%; object-position: 50% 50%; }
  .cx-card::after, .cx-card--light::after { background: linear-gradient(90deg, rgba(14, 10, 8, 1) 42%, rgba(14, 10, 8, .5) 62%, rgba(14, 10, 8, 0) 85%); }
  .cx-card--light { grid-template-columns: minmax(0, .36fr) minmax(0, .64fr); }
  .cx-card--light > img { left: 0; }
  .cx-card--light::after { background: linear-gradient(270deg, rgba(14, 10, 8, 1) 42%, rgba(14, 10, 8, .5) 62%, rgba(14, 10, 8, 0) 85%); }
  .cx-card--light .cx-card__body { grid-column: 2; }
  .cx-card__body { padding: 12px 0 12px 14px; }
  .cx-card--light .cx-card__body { padding: 12px 12px 12px 0; }
  .cx-card__head { flex-direction: row; align-items: center; gap: 10px; }
  .cx-card__head .cx-no, .cx-card--light .cx-no { font-size: 38px; color: var(--cx-gold-2); }
  .cx-card h2 { margin: 0; font-size: 16px; }
  .cx-card__en, .cx-card--light .cx-card__en { font-size: 8.5px; letter-spacing: .12em; color: var(--cx-dim); }
  /* One row of four, as drawn: the row may run past the text column over the
     photograph, but never past the card. */
  .cx-chips { gap: 2px; padding-top: 8px; margin-top: 4px; flex-wrap: nowrap; width: max-content; max-width: calc(100vw - 50px); }
  .cx-chips li, .cx-card--light .cx-chips li { gap: 3px; padding: 2px 4px; border-color: rgba(242, 231, 214, .45); border-radius: 4px; font-size: 7px; letter-spacing: 0; background: rgba(10, 8, 7, .5); }
  .cx-chips .cx-i { display: block; font-size: 9px; stroke: var(--cx-cream); }
  .cx-card__foot { margin-top: 8px; }
  .cx-view, .cx-card--light .cx-view { width: 100%; justify-content: center; padding: 8px 10px; border: 0; background: linear-gradient(180deg, #f3dfb6 0%, #dcb57a 100%); color: var(--cx-ink); font-weight: 600; font-size: 13px; }
  .cx-card__mwords { position: absolute; z-index: 1; right: 12px; bottom: 12px; text-align: right; }
  .cx-card--light .cx-card__mwords { right: auto; left: 12px; text-align: left; }
  .cx-card__mwords .cx-words { font-size: 7.5px; line-height: 1.7; letter-spacing: .14em; color: var(--cx-cream); }
  .cx-card__mwords .cx-rule { width: 22px; margin: 8px 0 0 auto; }
  .cx-card--light .cx-card__mwords .cx-rule { margin-left: 0; }

  .cx-compare { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 2px 12px 0; padding: 12px 14px; border: 1px solid var(--cx-line); }
  .cx-compare__t { grid-column: auto; flex-direction: row; align-items: baseline; gap: 12px; padding: 0; }
  .cx-compare__t h2 { font-size: 20px; }
  .cx-compare__t h2::after { display: none; }
  .cx-compare__t p { font-size: 8.5px; white-space: nowrap; }
  .cx-compare__line { display: block; height: 1px; background: linear-gradient(90deg, var(--cx-line), rgba(216, 180, 121, .7)); }
  .cx-compare__btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--cx-gold-2); border-radius: 50%; background: none; font-size: 18px; cursor: pointer; transition: transform .3s; }
  .cx-compare__btn .cx-i { stroke: var(--cx-cream); }
  .cx-compare__btn[aria-expanded="true"] { transform: rotate(180deg); }
  .cx-compare__list { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cx-compare__list[hidden] { display: none; }
  .cx-compare__list li { padding: 6px 8px; border: 1px solid var(--cx-line); font-size: 24px; gap: 10px; }
  .cx-compare__list b { font-size: 13px; }
  .cx-compare__list span { font-size: 11px; }

  .cx-steps { padding: 12px 12px 14px; border-bottom: 0; }
  .cx-steps__t { display: flex; align-items: center; gap: 12px; font: 600 19px var(--cx-serif); letter-spacing: .1em; margin-bottom: 12px; }
  .cx-steps__t i { flex: 1; height: 1px; background: var(--cx-line); }
  .cx-steps ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 0; }
  .cx-steps li { position: relative; gap: 6px; }
  .cx-steps li + li::before { content: ""; position: absolute; left: -6px; top: 50%; width: 6px; height: 6px; border-right: 1px solid var(--cx-dim); border-top: 1px solid var(--cx-dim); transform: translateY(-50%) rotate(45deg); }
  .cx-steps__ic { width: 34px; height: 34px; font-size: 16px; }
  .cx-steps p { display: block; }
  .cx-steps .cx-no { display: block; font-size: 14px; }
  .cx-steps strong { display: block; font-size: 11px; letter-spacing: .02em; line-height: 1.3; }
  .cx-steps p { min-width: 0; overflow-wrap: anywhere; }

  .cx-cta { display: block; min-height: 0; padding: 14px 12px 12px; text-align: center; }
  .cx-cta__t h2 { display: flex; align-items: center; gap: 14px; font-size: 20px; letter-spacing: .12em; justify-content: center; }
  .cx-cta__t h2::before, .cx-cta__t h2::after { content: ""; flex: 1; max-width: 70px; height: 1px; background: var(--cx-cream); opacity: .6; }
  .cx-cta__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
  .cx-btn { min-height: 46px; padding: 6px 10px; font-size: 14px; }
  .cx-cta__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--cx-line); text-align: left; }
  .cx-cta__foot > p { font: 500 9px var(--cx-latin); letter-spacing: .1em; }
  .cx-cta__foot .cx-words { font-size: 7.5px; line-height: 1.6; letter-spacing: .1em; text-align: right; color: var(--cx-cream); }
}

/* Four characters on one line where there is room, as drawn; below 380px
   they wrap rather than run out of the step. */
@media (min-width: 380px) and (max-width: 760px) { html:lang(zh-Hant) .cx-steps strong { white-space: nowrap; } }
@media (max-width: 379px) { .cx-steps__ic { width: 30px; height: 30px; font-size: 14px; } }

.cx, .cx * { font-variant-numeric: lining-nums !important; }
@media (prefers-reduced-motion: reduce) { .cx *, .cx *::before, .cx *::after { transition-duration: .01ms !important; } }