/* /judging/ — WLSC 2026 scoring standard, score sheet V1.0.

   Desktop: a 1:1 build of wlsc-scoring-standard-desktop-mockup-2026.png
   (941px wide; sizes × 1.53 at 1440): hero 330 · tabs 120 · lash 632 ·
   brow 550 · extension 206 · process 206 · CTA 200.
   Phone (≤760): wlsc-scoring-standard-mobile-mockup-2026.png — ring beside
   a 4 × 2 grid, the brow sum with bars, the four steps on a wave. Sizes are
   the design's × 0.415 raised to a readable minimum.
   .sx-d = desktop-only piece, .sx-m = phone-only piece. */

@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-scoring {
  --sx-bg: #0a0807;
  --sx-panel: #14100d;
  --sx-gold: #d8b479;
  --sx-gold-2: #efd3a0;
  --sx-cream: #f2e7d6;
  --sx-dim: rgba(242, 231, 214, .66);
  --sx-line: rgba(216, 180, 121, .3);
  --sx-pad: clamp(16px, 3.2vw, 46px);
  --sx-serif: "Cormorant Garamond", var(--font-display);
  --sx-latin: "Cormorant Garamond", Georgia, serif;
  --sx-script: "Great Vibes", cursive;
  background: var(--sx-bg);
}
html:lang(zh-Hant) body.is-scoring { --sx-serif: "Cormorant Garamond", "WLSC Serif TC", var(--font-display); }

.sx { background: var(--sx-bg); color: var(--sx-cream); font-family: var(--font-body); line-height: 1.55; overflow-x: clip; }
:where(.sx) a { color: inherit; text-decoration: none; }
:where(.sx) p { max-width: none; margin: 0; }
:where(.sx) :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.sx) img { display: block; width: 100%; height: auto; }
.sx [id] { scroll-margin-top: 90px; }
/* Screen-specific pieces. Specific enough (0,3,1) to beat any component rule
   that sets its own display, so a phone-only line never leaks onto the
   desktop or the other way round. */
@media (min-width: 761px) { body.is-scoring .sx .sx-m { display: none; } }
@media (max-width: 760px) { body.is-scoring .sx .sx-d { display: none; } }
.sx-i { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: var(--sx-gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sx-words { color: var(--sx-dim); font: 500 12.5px/1.95 var(--sx-latin); letter-spacing: .26em; text-transform: uppercase; }
.sx-rule { display: block; width: 44px; height: 1px; background: var(--sx-gold); }
.sx-no { font: 500 1em/1 var(--sx-latin); color: var(--sx-gold-2); }
.sx-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.sx-sec, .sx-ext, .sx-proc, .sx-cta, .sx-hero { position: relative; }
.sx-sec > :not(.sx-bg), .sx-ext > :not(.sx-bg), .sx-proc > :not(.sx-bg), .sx-cta > :not(.sx-bg) { position: relative; z-index: 1; }

/* ---------------------------------------------------------- header */
body.is-scoring .hd { position: sticky; top: 0; background: var(--sx-bg); border-bottom: 1px solid var(--sx-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 */
.sx-hero { overflow: hidden; min-height: clamp(290px, 23vw, 350px); display: flex; align-items: center; border-bottom: 1px solid var(--sx-line); }
.sx-hero picture, .sx-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sx-hero__img { object-fit: cover; object-position: 62% 40%; }
.sx-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 8, 7, .94) 0%, rgba(10, 8, 7, .6) 36%, rgba(10, 8, 7, 0) 60%); pointer-events: none; }
.sx-hero__copy { position: relative; z-index: 1; padding: 26px var(--sx-pad) 30px calc(var(--sx-pad) + 22px); }
.sx-hero .crumb { margin: 0 0 12px; font-size: 13px; color: var(--sx-dim); }
.sx-hero .crumb ol { display: flex; gap: .5em; list-style: none; margin: 0; padding: 0; }
.sx-hero .crumb li + li::before { content: "/"; margin-right: .5em; }
.sx-hero .crumb a { color: var(--sx-gold-2); }
.sx-hero h1 { margin: 0; font: 600 clamp(3rem, 5.6vw, 5.1rem)/1.1 var(--sx-serif); letter-spacing: .08em; background: linear-gradient(180deg, #fffaf0 0%, #f1e2c6 70%, #dcc091 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-std { margin-top: 6px; color: var(--sx-gold-2); font: 500 clamp(1.05rem, 1.65vw, 1.5rem)/1.2 var(--sx-latin); letter-spacing: .12em; }
.sx-line { margin-top: 10px; font: 500 clamp(1.05rem, 1.7vw, 1.55rem)/1.4 var(--sx-serif); letter-spacing: .08em; }
.sx-pill { display: inline-block; margin-top: 16px; padding: 2px 16px; border: 1px solid var(--sx-cream); border-radius: 999px; font: 500 14px/1.6 var(--sx-latin); letter-spacing: .26em; }
.sx-hero__side { position: absolute; z-index: 1; right: var(--sx-pad); top: 50%; transform: translateY(-50%); text-align: right; }
.sx-hero__side .sx-rule { margin: 18px 0 18px auto; width: 34px; }
.sx-words--mark { color: var(--sx-cream); font-size: 14px; letter-spacing: .22em; }

/* ---------------------------------------------------------- tabs */
.sx-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .8fr); gap: 12px; align-items: center; padding: 18px var(--sx-pad); border-bottom: 1px solid var(--sx-line); }
.sx-tab { position: relative; display: block; height: 118px; overflow: hidden; border: 1px solid var(--sx-line); background: var(--sx-panel); padding: 22px 22px; }
.sx-tab img { position: absolute; inset: 0 0 0 38%; width: 62%; height: 100%; object-fit: cover; opacity: .85; }
.sx-tab::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--sx-panel) 30%, rgba(20, 16, 13, .25) 70%, rgba(20, 16, 13, .1)); }
.sx-tab > span { position: relative; z-index: 1; display: block; }
.sx-tab.is-on { border: 2px solid var(--sx-gold); background: #2a2016; }
.sx-tab.is-on::after { background: linear-gradient(90deg, rgba(58, 42, 26, .96) 30%, rgba(58, 42, 26, .2) 72%, transparent); }
.sx-tab.is-soon { opacity: .75; }
.sx-tab__t { font: 500 clamp(1.2rem, 1.8vw, 1.65rem)/1.25 var(--sx-serif); letter-spacing: .06em; }
.sx-tab__en { margin-top: 10px; font: 500 11px var(--sx-latin); letter-spacing: .2em; color: var(--sx-dim); }
.sx-badge { display: flex; align-items: center; gap: 16px; padding-left: 18px; font-size: 40px; }
.sx-badge p { font-size: 14px; line-height: 1.6; color: var(--sx-dim); }
.sx-badge b { font-weight: 500; font-size: 17px; color: var(--sx-cream); }

/* ---------------------------------------------------------- lash / brow */
.sx-sec { overflow: hidden; padding: 20px var(--sx-pad) 26px; border-bottom: 1px solid var(--sx-line); }
.sx-sec .sx-bg { opacity: .6; object-position: center top; height: 38%; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
.sx-h { display: flex; align-items: flex-end; gap: 22px; margin-bottom: 16px; }
.sx-h h2 { margin: 0; font: 600 clamp(1.8rem, 3.2vw, 2.9rem)/1.2 var(--sx-serif); letter-spacing: .08em; color: var(--sx-cream); }
.sx-en { margin-top: 4px; font: 500 13px var(--sx-latin); letter-spacing: .22em; color: var(--sx-dim); }
.sx-h__line { flex: 1; height: 1px; margin-bottom: 12px; background: var(--sx-line); }
.sx-h__right { margin-bottom: 8px; color: var(--sx-gold-2); font-size: 13px; letter-spacing: .14em; white-space: nowrap; }
.sx-brow .sx-h { flex-wrap: wrap; }
.sx-brow .sx-h__right { order: -1; flex-basis: 100%; text-align: right; font-size: 11px; color: var(--sx-cream); }
.sx-body { display: grid; grid-template-columns: minmax(0, .33fr) minmax(0, .67fr); gap: 20px; align-items: start; }
.sx-chart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 16px; align-items: center; padding-top: 20px; }
.sx-ring { width: 100%; height: auto; overflow: visible; }
.sx-ring__halo { fill: none; stroke: rgba(216, 180, 121, .35); stroke-width: 1; }
.sx-ring__segs path { stroke: #140d07; stroke-width: 1.6; }
/* Dark figures on the light segments, as drawn. */
.sx-ring__n { fill: #2a1d10; font: 600 18px var(--sx-latin); text-anchor: middle; dominant-baseline: middle; }
.sx-ring__hub { fill: #0e0b09; stroke: #c9a46c; stroke-width: 1.2; }
.sx-ring__big { fill: #fff2d9; font: 600 38px var(--sx-latin); text-anchor: middle; dominant-baseline: middle; }
.sx-ring__cap { fill: var(--sx-gold-2); font: 500 9px var(--sx-latin); letter-spacing: .2em; text-anchor: middle; }
.sx-legend { position: relative; display: grid; gap: 7px; }
.sx-legend::before { content: ""; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, rgba(239, 211, 160, .2), rgba(239, 211, 160, .75), rgba(239, 211, 160, .2)); }
.sx-legend li { display: grid; grid-template-columns: auto minmax(0, 6.5em) auto; gap: 10px; align-items: center; font-size: 14px; }
.sx-legend i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #f6e1b8; box-shadow: 0 0 6px var(--sx-gold); }
.sx-legend b { font: 500 16px var(--sx-latin); color: var(--sx-cream); }
.sx-chart__words { grid-column: 1 / -1; margin-top: 18px; font-size: 11px; }
.sx-chart__words::before { content: ""; display: block; width: 36px; height: 1px; margin-bottom: 14px; background: var(--sx-gold); }

.sx-more > summary { display: none; }
.sx-cards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.sx-card { grid-column: span 4; padding: 12px 14px; border: 1px solid var(--sx-line); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)), rgba(20, 16, 13, .92); }
.sx-cards--lash .sx-card--hi { grid-column: span 8; }
.sx-cards--brow .sx-card:nth-child(4) { grid-column: span 5; }
.sx-cards--brow .sx-card--hi { grid-column: span 7; }
.sx-card__h { display: flex; align-items: center; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(216, 180, 121, .18); }
.sx-card__h .sx-no { font-size: clamp(1.6rem, 2.3vw, 2.15rem); }
.sx-card h3 { flex: 1; min-width: 0; margin: 0; font: 600 clamp(.95rem, 1.2vw, 1.15rem)/1.3 var(--sx-serif); letter-spacing: .04em; color: var(--sx-cream); overflow-wrap: anywhere; }
.sx-chev { width: 7px; height: 7px; border-right: 1.5px solid var(--sx-cream); border-bottom: 1.5px solid var(--sx-cream); transform: rotate(45deg) translateY(-3px); flex: 0 0 auto; }
.sx-card__s { margin: 8px 0 10px; padding-left: 4px; text-align: center; font-size: 13px; color: var(--sx-dim); }
.sx-card__s b { font: 500 1.35em var(--sx-latin); color: var(--sx-gold-2); margin: 0 2px; }
.sx-card__s i { margin: 0 12px; font-style: normal; opacity: .5; }
.sx-ded { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-ded li { flex: 1 1 auto; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid rgba(216, 180, 121, .55); border-radius: 3px; font-size: 12.5px; background: rgba(10, 8, 7, .6); }
.sx-ded b { font: 500 1.2em var(--sx-latin); color: var(--sx-gold-2); }
.sx-card--hi { position: relative; overflow: hidden; border: 1.5px solid var(--sx-gold); background: radial-gradient(ellipse at 90% 20%, rgba(216, 180, 121, .28), transparent 55%), linear-gradient(120deg, rgba(58, 42, 26, .9), rgba(20, 16, 13, .95)); padding: 16px 22px; }
.sx-card--hi .sx-card__h { border-color: rgba(216, 180, 121, .3); }
.sx-card--hi .sx-no { font-size: clamp(2rem, 2.8vw, 2.6rem); }
.sx-card--hi h3 { font-size: clamp(1.15rem, 1.6vw, 1.5rem); }
.sx-card--hi .sx-card__s { text-align: left; font-size: 15px; }
.sx-card__note { margin-top: 8px; font-size: 12.5px; color: var(--sx-dim); letter-spacing: .04em; }
.sx-card__note::before { content: "※ "; color: var(--sx-gold); }

/* ---------------------------------------------------------- extension */
.sx-ext { overflow: hidden; display: grid; grid-template-columns: minmax(0, .44fr) minmax(0, .12fr) minmax(0, .44fr); align-items: center; gap: 20px; min-height: 200px; margin: 18px var(--sx-pad); padding: 24px 32px; border: 1px solid var(--sx-line); }
.sx-ext .sx-bg { opacity: .9; }
.sx-ext h2 { margin: 0; font: 600 clamp(1.6rem, 2.9vw, 2.6rem)/1.2 var(--sx-serif); letter-spacing: .08em; color: var(--sx-gold-2); }
.sx-soon { display: inline-block; margin-top: 16px; padding: 3px 14px; border: 1px solid var(--sx-dim); font: 500 12px var(--sx-latin); letter-spacing: .26em; color: var(--sx-dim); }
.sx-ext__ic { font-size: 70px; text-align: center; }
.sx-ext__ic .sx-i { stroke: var(--sx-cream); stroke-width: 1; }
.sx-ext__state h3 { margin: 0 0 8px; font: 600 clamp(1.1rem, 1.6vw, 1.45rem)/1.3 var(--sx-serif); letter-spacing: .08em; color: var(--sx-cream); }
.sx-ext__state p { font-size: 14px; color: var(--sx-dim); }
.sx-notify { display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 26px; border: 1.5px solid var(--sx-gold); border-radius: 999px; font-size: 15px; background: rgba(10, 8, 7, .5); transition: background .3s; }
.sx-notify .sx-i { font-size: 1.3em; }
.sx-notify:hover { background: rgba(216, 180, 121, .18); }

/* ---------------------------------------------------------- process */
.sx-proc { overflow: hidden; padding: 16px var(--sx-pad) 22px; border-top: 1px solid var(--sx-line); border-bottom: 1px solid var(--sx-line); }
.sx-proc .sx-bg { opacity: .7; }
.sx-proc__h { display: flex; align-items: baseline; gap: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--sx-line); }
.sx-proc__h h2 { margin: 0; font: 600 clamp(1.5rem, 2.4vw, 2.2rem)/1.2 var(--sx-serif); letter-spacing: .08em; color: var(--sx-cream); }
.sx-proc__h p { font: 500 12px var(--sx-latin); letter-spacing: .2em; color: var(--sx-gold); }
.sx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 18px 0 0; padding-right: 180px; }
.sx-steps li { position: relative; display: flex; align-items: center; gap: 18px; }
.sx-steps li + li::before { content: ""; position: absolute; left: -16px; top: 50%; width: 10px; height: 10px; border-right: 1.2px solid var(--sx-dim); border-top: 1.2px solid var(--sx-dim); transform: translateY(-50%) rotate(45deg); }
.sx-steps__ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 1px solid var(--sx-gold); border-radius: 50%; font-size: 30px; }
.sx-steps p { min-width: 0; }
.sx-steps .sx-no { display: block; font-size: 1.6rem; }
.sx-steps strong { display: block; margin-top: 2px; font-weight: 500; font-size: clamp(.95rem, 1.2vw, 1.12rem); }
.sx-steps span:not(.sx-steps__ic) { display: block; margin-top: 4px; font-size: 12.5px; color: var(--sx-dim); }
.sx-proc > .sx-proc__side { position: absolute; right: var(--sx-pad); bottom: 22px; padding-left: 22px; border-left: 1px solid var(--sx-line); font-size: 11px; line-height: 1.9; }

/* ---------------------------------------------------------- CTA */
.sx-cta { overflow: hidden; display: grid; grid-template-columns: minmax(0, .22fr) minmax(0, .56fr) minmax(0, .22fr); align-items: center; min-height: 200px; padding: 20px var(--sx-pad); border-bottom: 1px solid var(--sx-line); }
.sx-cta__brand b { display: block; font: 500 clamp(1.5rem, 2.1vw, 1.9rem)/1 var(--sx-latin); letter-spacing: .2em; }
.sx-cta__brand span { display: block; margin-top: 12px; font: 500 12.5px/1.6 var(--sx-latin); letter-spacing: .12em; }
.sx-cta__btns { display: flex; justify-content: center; gap: 26px; }
.sx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: min(310px, 40vw); max-width: 100%; min-height: 74px; padding: 6px 36px; border-radius: 999px; font-size: clamp(1rem, 1.45vw, 1.35rem); font-weight: 500; line-height: 1.25; text-align: center; transition: filter .3s, background .3s, color .3s; }
.sx-btn--gold { background: linear-gradient(180deg, #f3dfb6 0%, #dcb57a 100%); color: #2a1c0e; }
.sx-btn--gold .sx-i { stroke: #2a1c0e; font-size: 1.2em; stroke-width: 1.8; }
.sx-btn--gold[aria-disabled="true"] { cursor: default; }
.sx-btn--line { border: 1.5px solid var(--sx-gold-2); color: var(--sx-cream); background: rgba(10, 8, 7, .35); }
.sx-btn--line:hover { background: var(--sx-cream); color: var(--sx-bg); }
.sx-cta__sign { justify-self: end; text-align: right; }
.sx-script { font: 400 clamp(1.6rem, 2.4vw, 2.3rem)/1.05 var(--sx-script); color: var(--sx-gold-2); transform: rotate(-14deg); text-align: left; }
.sx-cta__mark { margin-top: 18px; font: 500 13px var(--sx-latin); letter-spacing: .14em; }

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

/* ---------------------------------------------------------- 761–1100 */
@media (max-width: 1100px) {
  .sx-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sx-badge { grid-column: 1 / -1; padding: 6px 0 0; }
  .sx-body { grid-template-columns: minmax(0, 1fr); }
  .sx-chart { max-width: 560px; }
  .sx-cards .sx-card, .sx-cards--lash .sx-card--hi, .sx-cards--brow .sx-card:nth-child(4), .sx-cards--brow .sx-card--hi { grid-column: span 6; }
  .sx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 0; }
  .sx-steps li + li::before { display: none; }
  .sx-proc__side { display: none; }
  .sx-ext { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sx-ext__ic { display: none; }
  .sx-cta { grid-template-columns: minmax(0, 1fr); gap: 20px; text-align: center; }
  .sx-cta__sign { justify-self: center; }
}

/* ---------------------------------------------------------- ≤760 · phone */
@media (max-width: 760px) {

  .sx-hero { min-height: 0; display: block; border-bottom: 1px solid var(--sx-line); }
  .sx-hero__img { object-position: 50% 30%; }
  .sx-hero::after { background: linear-gradient(90deg, rgba(10, 8, 7, .9) 0%, rgba(10, 8, 7, .5) 55%, rgba(10, 8, 7, .05) 90%); }
  .sx-hero__copy { padding: 26px 18px 22px 24px; }
  .sx-kick { font: 500 11px var(--sx-latin); letter-spacing: .14em; color: var(--sx-cream); }
  .sx-hero h1 { margin-top: 8px; font-size: clamp(2.6rem, 12vw, 3.1rem); letter-spacing: .1em; }
  .sx-std { font-size: 16px; letter-spacing: .2em; }
  .sx-line { margin-top: 8px; font-size: 13px; letter-spacing: .06em; }
  .sx-scroll { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font: 500 10px var(--sx-latin); letter-spacing: .2em; color: var(--sx-dim); }
  .sx-scroll i { position: relative; width: 26px; height: 26px; border: 1px solid var(--sx-dim); border-radius: 50%; }
  .sx-scroll i::after { content: ""; position: absolute; left: 50%; top: 42%; width: 6px; height: 6px; border-right: 1.3px solid var(--sx-cream); border-bottom: 1.3px solid var(--sx-cream); transform: translate(-50%, -50%) rotate(45deg); }

  .sx-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 12px; }
  .sx-tab { height: 64px; padding: 8px 10px; }
  .sx-tab img { inset: 0 0 0 42%; width: 58%; }
  .sx-tab__t { font-size: 14px; }
  .sx-tab__v { margin-top: 4px; display: flex; align-items: center; gap: 8px; font: 500 18px var(--sx-latin); color: var(--sx-gold-2); }
  .sx-tab.is-soon .sx-tab__v { font: 400 12px var(--font-body); color: var(--sx-dim); }
  .sx-tab__v i { width: 6px; height: 6px; border-right: 1.3px solid currentColor; border-top: 1.3px solid currentColor; transform: rotate(45deg); }

  .sx-sec { padding: 14px 16px 16px; }
  .sx-sec .sx-bg { height: 100%; opacity: .45; }
  .sx-kicker { font: 500 11px var(--sx-latin); letter-spacing: .16em; color: var(--sx-cream); }
  .sx-kicker::first-letter { color: var(--sx-gold-2); }
  .sx-h { gap: 10px; margin-bottom: 10px; }
  .sx-h h2 { font-size: 20px; letter-spacing: .08em; }
  .sx-h__line { margin-bottom: 9px; }
  .sx-h__right.sx-words { margin-bottom: 4px; font-size: 7.5px; line-height: 1.7; letter-spacing: .12em; text-align: right; color: var(--sx-cream); }
  .sx-brow .sx-h { flex-wrap: nowrap; }
  .sx-brow .sx-h__right { order: 0; flex-basis: auto; font-size: 7.5px; }

  /* lash: ring beside the 4 × 2 grid */
  .sx-lash .sx-body { grid-template-columns: minmax(0, .34fr) minmax(0, .66fr); gap: 8px; align-items: center; }
  .sx-chart { display: block; padding: 0; }
  .sx-ring__n { display: none; }
  /* The phone ring is one lit gold band with a soft outer glow. */
  .sx-ring--glow { filter: drop-shadow(0 0 14px rgba(240, 185, 100, .7)); }
  .sx-ring--glow .sx-ring__segs path { fill: url(#sxgm); stroke: #3a2714; stroke-width: 1.4; }
  .sx-ring--glow .sx-ring__halo { stroke: #ffd79a; stroke-width: 2.6; }
  .sx-ring__big { font-size: 44px; }
  .sx-ring__cap { font-size: 11px; }
  .sx-mgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .sx-mgrid li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 58px; padding: 5px 2px; border: 1px solid var(--sx-line); background: rgba(20, 16, 13, .9); text-align: center; }
  .sx-mgrid span { font-size: 10.5px; line-height: 1.25; }
  .sx-mgrid b { font: 500 17px/1.15 var(--sx-latin); color: var(--sx-gold-2); }
  .sx-mgrid em { max-width: 100%; margin-top: 2px; padding: 0 3px; border: 1px solid rgba(216, 180, 121, .5); font-style: normal; font-size: 8.5px; line-height: 1.25; overflow-wrap: anywhere; }
  .sx-mgrid li.is-hi { border: 1.5px solid var(--sx-gold); background: radial-gradient(ellipse at 80% 20%, rgba(216, 180, 121, .3), transparent 60%), #2a2016; }
  .sx-mgrid li.is-hi span { font: 600 11px var(--sx-serif); }
  .sx-mgrid li.is-hi b { font-size: 21px; }
  .sx-mgrid li.is-hi i { position: absolute; right: 6px; top: 55%; width: 5px; height: 5px; border-right: 1.2px solid var(--sx-cream); border-top: 1.2px solid var(--sx-cream); transform: rotate(45deg); }

  /* brow: the sum with bars */
  .sx-brow .sx-body { display: block; }
  .sx-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 6px; align-items: end; }
  .sx-sum li { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
  .sx-sum li + li::before { content: "+"; position: absolute; left: -7px; top: 20px; color: var(--sx-cream); font-size: 12px; }
  .sx-sum span { font-size: 10.5px; line-height: 1.25; min-height: 2.5em; display: flex; align-items: flex-end; }
  .sx-sum b { font: 500 18px/1.2 var(--sx-latin); color: var(--sx-gold-2); }
  .sx-sum i { display: block; width: 100%; height: 5px; margin-top: 4px; border-radius: 3px; background: rgba(242, 231, 214, .2); overflow: hidden; }
  .sx-sum s { display: block; height: 100%; background: linear-gradient(90deg, #dcb57a, #f3dfb6); }
  .sx-sum__eq::before { content: "=" !important; }
  .sx-sum__eq::before { top: auto !important; bottom: 12px; }
  .sx-sum__eq b { font-size: 24px; color: var(--sx-cream); margin-bottom: 6px; padding-left: 6px; }

  /* the full deduction list, folded under the grid on a phone */
  .sx-more { grid-column: 1 / -1; margin-top: 10px; }
  .sx-more > summary { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border: 1px solid var(--sx-line); border-radius: 999px; font-size: 13px; color: var(--sx-gold-2); cursor: pointer; list-style: none; }
  .sx-more > summary::-webkit-details-marker { display: none; }
  .sx-more > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: rotate(45deg) translateY(-2px); }
  .sx-more[open] > summary::after { transform: rotate(-135deg); }
  .sx-cards { grid-template-columns: minmax(0, 1fr); margin-top: 10px; }
  .sx-cards .sx-card, .sx-cards--lash .sx-card--hi, .sx-cards--brow .sx-card:nth-child(4), .sx-cards--brow .sx-card--hi { grid-column: 1 / -1; }
  .sx-ded li { flex: 1 1 auto; min-width: 0; }

  /* extension */
  .sx-ext { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 0; margin: 12px; padding: 14px 16px; }
  .sx-ext h2 { font-size: 20px; color: var(--sx-cream); }
  .sx-ext .sx-en { font-size: 10px; }
  .sx-mpill { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 8px 14px; border: 1.3px solid var(--sx-gold); border-radius: 999px; font-size: 14px; color: var(--sx-gold-2); font-size: 14px; }
  .sx-mpill .sx-i { font-size: 18px; }

  /* process on a wave */
  .sx-proc { padding: 10px 14px 16px; border-bottom: 0; }
  .sx-proc__h { align-items: center; padding: 0; border: 0; }
  .sx-proc__h h2 { font-size: 20px; flex: 0 0 auto; }
  .sx-proc__h .sx-h__line { margin: 0; }
  .sx-msteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; position: relative; }
  .sx-msteps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--sx-gold) 15%, var(--sx-gold) 85%, transparent); }
  .sx-msteps li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 4px; align-content: start; }
  .sx-msteps .sx-steps__ic { width: 44px; height: 44px; font-size: 20px; background: var(--sx-bg); grid-row: span 1; }
  .sx-msteps .sx-no { align-self: end; font-size: 13px; }
  .sx-msteps strong { grid-column: 1 / -1; margin-top: 6px; padding-left: 10px; border-left: 1px dashed rgba(216, 180, 121, .5); font-weight: 500; font-size: 13px; }
  .sx-msteps span:not(.sx-steps__ic) { grid-column: 1 / -1; padding-left: 10px; border-left: 1px dashed rgba(216, 180, 121, .5); font-size: 10px; line-height: 1.45; color: var(--sx-dim); }

  .sx-cta { display: block; min-height: 0; padding: 12px 14px 14px; text-align: left; }
  .sx-cta__btns { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 10px; }
  .sx-btn { min-width: 0; min-height: 48px; padding: 6px 12px; gap: 8px; font-size: 13.5px; }
  .sx-cta__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--sx-line); }
  .sx-cta__foot > p { font: 500 9px var(--sx-latin); letter-spacing: .1em; }
  .sx-cta__foot .sx-words { font-size: 7.5px; line-height: 1.6; letter-spacing: .1em; text-align: right; color: var(--sx-cream); }
}

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