/* css/mk-light.css */
/* R25A: the "Light" homepage design (marketing/light/home + art/hl-*). Airy white canvas, faint grid paper, soft
   mint/lilac/peach glows, floating tilted UI cards, pill chips, rotating badge, marquees. Prefix .hl-.
   Motion: transform/opacity only; runs only while on screen ([data-hl].hl-on from js/mk-light.js); none with reduced motion. */
.hl-body { background: #FCFCFA; }
.hl {
  --hl-ink: var(--ink-raw, #0B0F0D);
  --hl-text: #262C28;
  --hl-muted: #5F6761;
  --hl-line: #E8EAE5;
  --hl-panel: #F4F5F1;
  --hl-card: #FFFFFF;
  --hl-brand: var(--emerald-500, #0BC284);
  --hl-brand-ink: var(--emerald-700, #067C55);
  --hl-mint: #DDF8EC;
  --hl-lilac: #ECE6FF;
  --hl-peach: #FFE9DB;
  --hl-violet: var(--violet-500, #7C5CFF);
  --hl-lime: var(--lime-400, #C2F45B);
  --hl-shadow: 0 1px 2px rgb(16 24 20 / .05), 0 18px 40px -14px rgb(16 24 20 / .18);
  --hl-shadow-lg: 0 2px 4px rgb(16 24 20 / .04), 0 30px 70px -24px rgb(16 24 20 / .28);
  color: var(--hl-text);
  overflow-x: clip;
}
.hl-wrap { inline-size: min(1200px, 100% - 32px); margin-inline: auto; position: relative; }
.hl-sec { padding-block: clamp(56px, 8vw, 112px); position: relative; }
.hl em { font-style: normal; color: var(--hl-brand-ink); }
.hl em.is-violet { color: var(--violet-600, #6441F2); }
.hl-m { color: var(--hl-muted); }
.hl-num { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hl-up { color: var(--hl-brand-ink); font-weight: 700; font-size: .8em; }
.hl-row { display: flex; align-items: center; gap: 10px; min-inline-size: 0; }
.hl-row > span { display: grid; min-inline-size: 0; }
.hl-between { justify-content: space-between; }
.hl svg { inline-size: 1em; block-size: 1em; flex: none; }

/* ---------- Primitives ---------- */
.hl-kicker, .hl-tag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgb(255 255 255 / .8); border: 1px solid var(--hl-line); font-size: 13px; font-weight: 600; color: var(--hl-text); box-shadow: 0 1px 2px rgb(16 24 20 / .04); }
.hl-tag svg { color: var(--hl-brand); }
.hl-tag.is-violet svg { color: var(--hl-violet); }
.hl-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--hl-brand); box-shadow: 0 0 0 4px rgb(11 194 132 / .18); }
.hl-h1 { font-size: clamp(44px, 7.8vw, 100px); line-height: .98; letter-spacing: -.045em; font-weight: 800; color: var(--hl-ink); margin: 22px 0 0; display: grid; justify-items: center; }
.hl-h1 > span { display: block; }
.hl-h1.is-final { font-size: clamp(36px, 6.4vw, 76px); display: block; text-align: center; max-inline-size: 15ch; margin-inline: auto; }
.hl-h2 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; color: var(--hl-ink); margin: 16px 0 0; }
.hl-h3 { font-size: clamp(26px, 3vw, 38px); line-height: 1.08; letter-spacing: -.03em; font-weight: 800; color: var(--hl-ink); margin: 14px 0 0; }
.hl-lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--hl-muted); max-inline-size: 60ch; margin: 22px auto 0; }
.hl-sub { font-size: 17px; line-height: 1.6; color: var(--hl-muted); max-inline-size: 58ch; margin: 14px auto 0; }
.hl-head { text-align: center; margin-block-end: clamp(32px, 5vw, 56px); }
.hl-cta { display: inline-flex; align-items: center; gap: 10px; min-block-size: 52px; padding: 6px 8px 6px 24px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.hl-cta.is-ink { background: var(--hl-ink); color: #fff; box-shadow: 0 12px 26px -12px rgb(11 15 13 / .6); }
.hl-cta.is-ghost { background: #fff; color: var(--hl-ink); border: 1px solid var(--hl-line); padding-inline-end: 24px; }
.hl-cta.is-sm { min-block-size: 46px; font-size: 15px; }
.hl-cta:hover { transform: translateY(-2px); }
.hl-cta:focus-visible, .hl-round:focus-visible, .hl-switch:focus-visible, .hl-chip-link:focus-visible, .hl-badge:focus-visible, .hl-seg button:focus-visible { outline: 3px solid var(--hl-brand); outline-offset: 3px; }
.hl-cta-ico { display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 50%; background: var(--hl-lime); color: var(--hl-ink); }
.hl-cta-ico svg { inline-size: 18px; block-size: 18px; }
.hl-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-block-start: 30px; }
.hl-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-block-start: 18px; font-size: 14px; color: var(--hl-muted); }
.hl-note span { display: inline-flex; gap: 6px; align-items: center; }
.hl-note svg { color: var(--hl-brand); }

.hl-card, .hl-toast, .hl-fc, .hl-flow, .hl-cert, .hl-ticket, .hl-wallet { background: var(--hl-card); border: 1px solid rgb(16 24 20 / .06); border-radius: 18px; box-shadow: var(--hl-shadow); }
.hl-card { display: grid; gap: 8px; padding: 14px; font-size: 13px; }
.hl-toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; font-size: 13px; white-space: nowrap; }
.hl-toast > span:last-child, .hl-fc-sale > span:last-child, .hl-cert > span:last-child { display: grid; line-height: 1.25; }
.hl-toast small, .hl-fc small { font-size: 11.5px; color: var(--hl-muted); }
.hl-ico { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 11px; flex: none; background: var(--hl-panel); color: var(--hl-ink); }
.hl-ico svg { inline-size: 17px; block-size: 17px; }
.hl-ico.is-ok { background: var(--hl-mint); color: var(--hl-brand-ink); }
.hl-ico.is-brand { background: var(--hl-mint); color: var(--hl-brand-ink); }
.hl-ico.is-violet { background: var(--hl-lilac); color: var(--violet-600, #6441F2); }
.hl-ico.is-peach { background: var(--hl-peach); color: var(--tangerine-600, #E85D1E); }
.hl-ico.is-light { background: rgb(255 255 255 / .85); }
.hl-av { display: inline-grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; font-weight: 800; font-size: 13px; color: var(--hl-ink); background: linear-gradient(135deg, #FFD9C2, #F9B7D4); flex: none; }
.hl-av.is-mint { background: linear-gradient(135deg, #C9F6E2, #8BE8C3); }
.hl-av.is-peach { background: linear-gradient(135deg, #FFE3CC, #FFB98C); }
.hl-av.is-violet { background: linear-gradient(135deg, #E3DBFF, #B9A6FF); }
.hl-av.is-brand { background: linear-gradient(135deg, #D9FB8F, #8BE8C3); }
.hl-av-lg { inline-size: 46px; block-size: 46px; font-size: 18px; }
.hl-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-block-size: 30px; padding: 6px 10px; border-radius: 999px; background: var(--hl-panel); font-size: 11.5px; font-weight: 600; color: var(--hl-ink); text-align: center; }
.hl-btn.is-ink { background: var(--hl-ink); color: #fff; }
.hl-btn.is-ink svg { color: var(--hl-lime); }
.hl-btn.is-brand { background: var(--hl-brand); color: #fff; }
.hl-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--hl-line); background: #fff; font-size: 11px; font-weight: 600; color: var(--hl-text); white-space: nowrap; }
.hl-chip.is-on { background: var(--hl-ink); border-color: var(--hl-ink); color: #fff; }
.hl-chip.is-on svg { color: var(--hl-lime); }
.hl-chip.is-glass { background: rgb(255 255 255 / .18); border-color: rgb(255 255 255 / .3); color: #fff; }
.hl-pill-row { display: flex; flex-wrap: wrap; gap: 5px; }
.hl-live { margin-inline-start: auto; padding: 3px 8px; border-radius: 999px; background: var(--hl-mint); color: var(--hl-brand-ink); font-size: 11px; font-weight: 700; transition: opacity .3s ease; }
.hl-spark { display: flex; align-items: flex-end; gap: 4px; block-size: 34px; }
.hl-spark i { flex: 1; block-size: 100%; border-radius: 4px; background: linear-gradient(var(--hl-brand), #8BE8C3); transform: scaleY(var(--h)); transform-origin: bottom; opacity: .9; }
.hl-meter { display: block; block-size: 8px; border-radius: 99px; background: var(--hl-panel); overflow: hidden; }
.hl-meter i { display: block; block-size: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hl-brand), var(--hl-lime)); transform: scaleX(var(--v)); transform-origin: left; }
[dir="rtl"] .hl-meter i { transform-origin: right; }
.hl-qr-mini { inline-size: 28px; block-size: 28px; border-radius: 6px; background: repeating-conic-gradient(var(--hl-ink) 0 25%, #fff 0 50%) 0 0 / 7px 7px; border: 3px solid #fff; outline: 1px solid var(--hl-line); }

/* ---------- Hero ---------- */
.hl-hero { position: relative; padding-block: clamp(104px, 11vw, 136px) 0; text-align: center; overflow: hidden; isolation: isolate; }
.hl-grid-bg { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgb(16 24 20 / .055) 1px, transparent 1px), linear-gradient(90deg, rgb(16 24 20 / .055) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, #000 30%, transparent 78%); }
.hl-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .75; pointer-events: none; }
.hl-glow.g1 { inline-size: 520px; block-size: 420px; background: #CFF6E4; inset-block-start: 6%; inset-inline-start: -8%; }
.hl-glow.g2 { inline-size: 560px; block-size: 460px; background: #E5DCFF; inset-block-start: 0; inset-inline-end: -10%; }
.hl-glow.g3 { inline-size: 440px; block-size: 360px; background: #FFE2CC; inset-block-end: 4%; inset-inline-start: 30%; opacity: .6; }
.hl-hero-in { position: relative; z-index: 2; }
.hl-l2 { display: inline-flex !important; align-items: center; white-space: nowrap; }
.hl-l3 em { position: relative; }
.hl-l3 em::after { content: ""; position: absolute; inset-inline: 2%; inset-block-end: .02em; block-size: .12em; border-radius: 99px; background: var(--hl-lime); z-index: -1; transform: scaleX(.98); }
.hl-switch { --sw-h: .74em; position: relative; display: inline-flex; align-items: center; inline-size: 1.62em; block-size: var(--sw-h); margin-inline: .04em; padding: 0; border: 0; border-radius: 999px; cursor: pointer; vertical-align: middle; background: linear-gradient(90deg, #E8E4FF, #D8F7E9); box-shadow: inset 0 2px 6px rgb(16 24 20 / .12), 0 10px 30px -10px rgb(124 92 255 / .55); transition: background .4s ease; font: inherit; }
.hl-switch::before { content: ""; position: absolute; inset: .07em; border-radius: inherit; background: linear-gradient(90deg, rgb(124 92 255 / .25), rgb(11 194 132 / .25)); opacity: 0; transition: opacity .4s ease; }
.hl-switch[aria-pressed="true"] { background: linear-gradient(90deg, var(--hl-brand), #6EE7B7); }
.hl-switch-knob { position: absolute; inset-block-start: .06em; inset-inline-start: .06em; display: grid; place-items: center; inline-size: calc(var(--sw-h) - .12em); block-size: calc(var(--sw-h) - .12em); border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgb(16 24 20 / .25); transition: transform .45s cubic-bezier(.5, 1.6, .4, 1); }
.hl-switch[aria-pressed="true"] .hl-switch-knob { transform: translateX(calc(1.62em - var(--sw-h))); }
[dir="rtl"] .hl-switch[aria-pressed="true"] .hl-switch-knob { transform: translateX(calc(var(--sw-h) - 1.62em)); }
.hl-switch-knob .hl-av { inline-size: 74%; block-size: 74%; font-size: .22em; }
.hl-switch-on { position: absolute; inset-inline-start: .26em; font-size: .17em; font-weight: 800; letter-spacing: .04em; color: #fff; text-transform: uppercase; opacity: 0; transition: opacity .3s ease; }
.hl-switch[aria-pressed="true"] .hl-switch-on { opacity: 1; }
.hl-hero:not(.is-live-on) [data-hl-live] { opacity: .35; }

.hl-floats { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hl-fc { position: absolute; display: grid; gap: 8px; padding: 12px; text-align: start; font-size: 13px; inline-size: 210px; pointer-events: auto; transform: rotate(var(--r, 0deg)); transition: transform .35s ease, box-shadow .35s ease; }
.hl-fc:hover { transform: rotate(0deg) translateY(-4px) scale(1.03); box-shadow: var(--hl-shadow-lg); }
.hl-fc-bio { --r: -7deg; inset-block-start: 47%; inset-inline-start: 3%; }
.hl-fc-ticket { --r: 6deg; inset-block-start: 44%; inset-inline-end: 4%; inline-size: 180px; background: linear-gradient(160deg, #fff 55%, var(--hl-lilac)); }
.hl-fc-sale { --r: 4deg; display: flex; align-items: center; gap: 10px; inline-size: auto; inset-block-start: 70%; inset-inline-start: 9%; white-space: nowrap; }
.hl-fc-stats { --r: -5deg; inset-block-start: 66%; inset-inline-end: 8%; inline-size: 190px; }
.hl-fc-stats .hl-num { font-size: 22px; font-weight: 800; }
.hl-fc-bio .hl-btn { font-size: 11px; }
.hl-badge { position: absolute; z-index: 3; inset-block-start: 17%; inset-inline-start: 4%; display: grid; place-items: center; inline-size: 112px; block-size: 112px; border-radius: 50%; background: rgb(255 255 255 / .85); backdrop-filter: blur(8px); box-shadow: var(--hl-shadow); color: var(--hl-ink); text-decoration: none; }
.hl-badge svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.hl-badge text { font-size: 10.4px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; fill: currentColor; }
.hl-badge-ico { position: relative; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--hl-ink); color: var(--hl-lime); }
.hl-badge-ico svg { position: static; inline-size: 20px; block-size: 20px; }
.hl-marquee { position: relative; z-index: 2; margin-block-start: clamp(48px, 7vw, 88px); padding-block: 18px; border-block: 1px solid var(--hl-line); background: rgb(255 255 255 / .6); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.hl-marquee-track { display: flex; inline-size: max-content; }
.hl-marquee-list { display: flex; gap: 44px; padding-inline-end: 44px; margin: 0; list-style: none; }
.hl-marquee-list li { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: #8A918B; white-space: nowrap; }
.hl-marquee-list svg { inline-size: 22px; block-size: 22px; }

/* ---------- Stats ---------- */
.hl-stats-sec { padding-block: clamp(40px, 5vw, 64px); }
.hl-stats { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 24px; align-items: center; padding-block-end: 36px; border-block-end: 1px solid var(--hl-line); }
.hl-stats-lead { display: flex; gap: 14px; align-items: center; margin: 0; font-size: 17px; font-weight: 600; color: var(--hl-ink); line-height: 1.4; }
.hl-stat { display: grid; gap: 4px; }
.hl-stat b { font-size: clamp(34px, 3.6vw, 48px); font-weight: 800; letter-spacing: -.04em; color: var(--hl-ink); line-height: 1; }
.hl-stat span { font-size: 14px; color: var(--hl-muted); }

/* ---------- How it works ---------- */
.hl-how { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.hl-how-card { position: relative; display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: 28px; background: var(--hl-panel); overflow: hidden; }
.hl-how-card h3 { margin: 6px 0 0; font-size: 22px; letter-spacing: -.02em; color: var(--hl-ink); }
.hl-how-card p { margin: 0; color: var(--hl-muted); line-height: 1.55; max-inline-size: 44ch; }
.hl-how-n { position: absolute; inset-block-start: 22px; inset-inline-end: 26px; font-size: 44px; font-weight: 800; letter-spacing: -.04em; color: rgb(16 24 20 / .08); }
.hl-how-art { position: relative; block-size: 170px; margin-block-start: 14px; border-radius: 20px; background: #fff; box-shadow: var(--hl-shadow); display: grid; place-items: center; overflow: hidden; }
.hl-how-art > .hl-chip.hl-float { position: absolute; inset-block-end: 14px; inset-inline-end: 14px; }
.hl-mini-page { display: grid; justify-items: center; gap: 6px; inline-size: 140px; padding: 14px; border-radius: 16px; background: linear-gradient(180deg, #FFF4EC, #fff); border: 1px solid var(--hl-line); }
.hl-mini-page i { display: block; inline-size: 70%; block-size: 6px; border-radius: 4px; background: #E7E9E4; }
.hl-mini-page i.w6 { inline-size: 50%; }
.hl-mini-page .hl-btn { inline-size: 100%; min-block-size: 16px; padding: 0; }
.hl-people { position: absolute; inset-block-start: 16px; inset-inline-start: 16px; display: flex; align-items: center; }
.hl-people .hl-av { margin-inline-end: -8px; border: 2px solid #fff; }
.hl-people b { margin-inline-start: 18px; font-size: 18px; color: var(--hl-ink); }
.hl-hub { position: relative; inline-size: 150px; block-size: 110px; margin-block-start: 30px; }
.hl-hub-c, .hl-hub-n { position: absolute; display: grid; place-items: center; border-radius: 50%; }
.hl-hub-c { inset: 50% auto auto 50%; translate: -50% -50%; inline-size: 48px; block-size: 48px; background: var(--hl-ink); color: var(--hl-lime); box-shadow: 0 0 0 10px rgb(11 194 132 / .12), 0 0 0 22px rgb(11 194 132 / .06); }
.hl-hub-n { inline-size: 32px; block-size: 32px; background: #fff; border: 1px solid var(--hl-line); color: var(--hl-brand-ink); box-shadow: var(--hl-shadow); }
.hl-hub-n.n0 { inset-block-start: 0; inset-inline-start: 0; } .hl-hub-n.n1 { inset-block-start: 0; inset-inline-end: 0; } .hl-hub-n.n2 { inset-block-end: 0; inset-inline-start: 0; } .hl-hub-n.n3 { inset-block-end: 0; inset-inline-end: 0; }
.hl-pay-row { display: flex; align-items: flex-end; gap: 12px; }
.hl-pay-row > span:first-child { display: grid; text-align: start; }
.hl-pay-row b { font-size: 30px; font-weight: 800; color: var(--hl-ink); }
.hl-how-art:has(.hl-pay-row) { align-content: center; gap: 12px; }
.hl-bars { display: flex; align-items: flex-end; gap: 8px; block-size: 140px; }
.hl-bars.sm { block-size: 100px; inline-size: 70%; }
.hl-bars i { flex: 1; block-size: 100%; border-radius: 8px; background: var(--hl-panel); transform: scaleY(var(--h)); transform-origin: bottom; }
.hl-bars i.is-hi { background: linear-gradient(180deg, var(--hl-lime), var(--hl-brand) 60%, var(--hl-violet)); }

/* ---------- Module chips + panels ---------- */
.hl-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-block-end: 36px; }
.hl-chip-link { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--hl-line); background: #fff; font-weight: 600; font-size: 14px; color: var(--hl-ink); text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease; }
.hl-chip-link svg { color: var(--hl-brand); }
.hl-chip-link:hover { background: var(--hl-ink); color: #fff; transform: translateY(-2px); }
.hl-chip-link:hover svg { color: var(--hl-lime); }
.hl-panels { display: grid; gap: 20px; }
.hl-panel { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(20px, 3.4vw, 44px); border-radius: 36px; background: var(--hl-panel); scroll-margin-block-start: 90px; }
.hl-panel.is-flip .hl-panel-art { order: 2; }
.hl-panel.tone-mint { background: linear-gradient(135deg, #F1FBF6, var(--hl-panel) 60%); }
.hl-panel.tone-lilac { background: linear-gradient(135deg, #F5F2FF, var(--hl-panel) 60%); }
.hl-panel.tone-peach { background: linear-gradient(135deg, #FFF5EE, var(--hl-panel) 60%); }
.hl-panel-copy p { color: var(--hl-muted); font-size: 17px; line-height: 1.6; margin: 14px 0 0; max-inline-size: 48ch; }
.hl-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 22px 0 26px; padding: 22px 0 0; list-style: none; border-block-start: 1px solid var(--hl-line); }
.hl-checks li { display: flex; gap: 8px; align-items: center; font-size: 14.5px; font-weight: 600; color: var(--hl-ink); }
.hl-checks svg { inline-size: 18px; block-size: 18px; padding: 3px; border-radius: 50%; background: var(--hl-ink); color: var(--hl-lime); stroke-width: 3; }
.hl-more { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-block-start: 20px; }
.hl-more-card { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 24px; border: 1px solid var(--hl-line); background: #fff; }
.hl-more-card b { font-size: 17px; color: var(--hl-ink); margin-block-start: 6px; }
.hl-more-card p { margin: 0; color: var(--hl-muted); font-size: 14.5px; line-height: 1.5; }

/* ---------- Spot arts (art/hl-*) ---------- */
.hl-art { position: relative; aspect-ratio: 5 / 4; inline-size: 100%; border-radius: 26px; background: #fff; overflow: hidden; isolation: isolate; box-shadow: inset 0 0 0 1px rgb(16 24 20 / .05); }
.hl-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgb(16 24 20 / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(16 24 20 / .045) 1px, transparent 1px); background-size: 28px 28px; }
.hl-art::after { content: ""; position: absolute; z-index: -1; inline-size: 70%; block-size: 70%; inset-block-start: 15%; inset-inline-start: 15%; border-radius: 50%; background: radial-gradient(closest-side, var(--hl-glow-c, #DDF8EC), transparent); }
.tone-lilac .hl-art { --hl-glow-c: #EAE3FF; }
.tone-peach .hl-art { --hl-glow-c: #FFE7D6; }
.hl-pos { position: absolute; inset-block-start: var(--y); inset-inline-start: var(--x); inline-size: var(--w, auto); transform: rotate(var(--r, 0deg)); transition: transform .4s ease; }
.hl-art:hover .hl-pos, .hl-panel:focus-within .hl-pos { transform: rotate(0deg) translateY(-3px); }
.hl-art .hl-card b, .hl-art .hl-toast b { color: var(--hl-ink); }
.hl-art .hl-num { font-size: 22px; font-weight: 800; color: var(--hl-ink); }
.hl-phone { position: absolute; inset-block-start: 7%; inset-inline-start: 36%; inline-size: 34%; padding: 22px 10px 12px; border-radius: 26px; background: #fff; border: 5px solid var(--hl-ink); display: grid; justify-items: center; gap: 6px; box-shadow: var(--hl-shadow-lg); }
.hl-phone-notch { position: absolute; inset-block-start: 6px; inline-size: 34%; block-size: 6px; border-radius: 99px; background: var(--hl-ink); }
.hl-phone .hl-t { font-size: 13px; color: var(--hl-ink); }
.hl-phone small { font-size: 9.5px; text-align: center; }
.hl-phone .hl-btn { inline-size: 100%; font-size: 9.5px; min-block-size: 24px; }
.hl-phone-sm { inset-block-start: var(--y); inset-inline-start: var(--x); inline-size: var(--w); }
.hl-socials { display: flex; gap: 6px; }
.hl-socials i { inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--hl-panel); }
.hl-swatches { display: flex; gap: 6px; }
.hl-swatches i { flex: 1; aspect-ratio: 1; border-radius: 10px; }
.hl-swatches .s1 { background: linear-gradient(135deg, #FFB98C, #F9B7D4); } .hl-swatches .s2 { background: linear-gradient(135deg, #8BE8C3, #C2F45B); } .hl-swatches .s3 { background: linear-gradient(135deg, #B9A6FF, #7C5CFF); } .hl-swatches .s4 { background: var(--hl-ink); }
.hl-art-links b em { color: var(--hl-brand-ink); }
.hl-qr { justify-items: center; }
.hl-qr-grid { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; inline-size: 100%; aspect-ratio: 1; }
.hl-qr-grid i { border-radius: 2px; background: transparent; }
.hl-qr-grid i.on { background: var(--hl-ink); }
.hl-scan { position: absolute; inset-inline: 10px; inset-block-start: 14px; block-size: 2px; border-radius: 2px; background: var(--hl-brand); box-shadow: 0 0 12px 2px rgb(11 194 132 / .6); }
.hl-cart { position: relative; display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--hl-panel); }
.hl-cart em { position: absolute; inset-block-start: -4px; inset-inline-end: -4px; display: grid; place-items: center; inline-size: 16px; block-size: 16px; border-radius: 50%; background: var(--hl-brand); color: #fff; font-size: 9.5px; font-weight: 800; }
.hl-prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hl-prod { display: grid; gap: 2px; font-size: 11px; }
.hl-prod small { color: var(--hl-muted); }
.hl-ph { aspect-ratio: 1; border-radius: 12px; margin-block-end: 4px; }
.hl-ph.p1 { background: linear-gradient(135deg, #F6E7D7, #E8C9A6); } .hl-ph.p2 { background: linear-gradient(135deg, #E3DBFF, #B9A6FF); } .hl-ph.p3 { background: linear-gradient(135deg, #C9F6E2, #8BE8C3); }
.hl-mini { justify-items: start; }
.hl-ticket { display: flex; overflow: hidden; padding: 0; }
.hl-ticket-main { display: grid; gap: 4px; flex: 1; padding: 14px; font-size: 12px; background: linear-gradient(160deg, #fff 50%, var(--hl-mint)); }
.hl-ticket-main b { font-size: 16px; color: var(--hl-ink); letter-spacing: -.02em; }
.hl-ticket-stub { display: grid; place-items: center; gap: 6px; padding: 12px; border-inline-start: 2px dashed var(--hl-line); font-size: 10px; font-weight: 700; color: var(--hl-muted); }
.hl-ticket-stub .hl-qr-mini { inline-size: 40px; block-size: 40px; }
.hl-lines { display: grid; gap: 6px; }
.hl-lines i { display: block; block-size: 7px; border-radius: 4px; background: var(--hl-panel); inline-size: calc(var(--w, 1) * 100%); }
.hl-flow { display: grid; justify-items: center; gap: 0; padding: 12px; }
.hl-node { display: flex; align-items: center; gap: 8px; inline-size: 100%; padding: 6px; border-radius: 12px; background: var(--hl-panel); font-size: 11.5px; font-weight: 600; color: var(--hl-ink); }
.hl-node .hl-ico { inline-size: 26px; block-size: 26px; border-radius: 8px; }
.hl-wire { position: relative; inline-size: 2px; block-size: 18px; background: var(--hl-line); overflow: hidden; }
.hl-wire i { position: absolute; inset-inline: 0; block-size: 8px; border-radius: 2px; background: var(--hl-brand); }
.hl-cover { display: grid; place-items: center; aspect-ratio: 16 / 7; border-radius: 12px; background: linear-gradient(135deg, #FFE3CC, #E3DBFF); }
.hl-lesson { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; }
.hl-lesson svg { inline-size: 15px; block-size: 15px; }
.hl-lesson.is-done svg { color: var(--hl-brand); }
.hl-lesson.is-now { background: var(--hl-ink); color: #fff; }
.hl-lesson.is-now svg { color: var(--hl-lime); }
.hl-ring-card { justify-items: center; text-align: center; }
.hl-ring { display: grid; place-items: center; inline-size: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, #fff 76%, transparent 78%), conic-gradient(var(--hl-brand) calc(var(--v) * 1%), var(--hl-panel) 0); }
.hl-ring b { font-size: 18px; }
.hl-cert { display: flex; align-items: center; gap: 10px; padding: 12px; background: linear-gradient(135deg, #fff 60%, var(--hl-peach)); font-size: 13px; }
.hl-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hl-cal i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--hl-ink); background: var(--hl-panel); }
.hl-cal i.h { background: none; color: var(--hl-muted); font-size: 9.5px; }
.hl-cal i.busy { opacity: .35; text-decoration: line-through; }
.hl-cal i.sel { background: var(--hl-ink); color: #fff; box-shadow: 0 0 0 3px rgb(11 194 132 / .35); }
.hl-slot { display: block; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--hl-line); font-size: 12px; font-weight: 700; text-align: center; color: var(--hl-ink); }
.hl-slot.is-pick { background: var(--hl-brand); border-color: var(--hl-brand); color: #fff; }
.hl-lock { display: inline-flex; gap: 5px; align-items: center; font-size: 11px; }
.hl-wallet { display: grid; gap: 6px; padding: 16px; color: #fff; background: linear-gradient(145deg, #0E3B2B, var(--hl-ink) 70%); border: 0; box-shadow: var(--hl-shadow-lg); font-size: 12px; }
.hl-wallet .hl-num { color: #fff !important; font-size: 26px !important; }
.hl-wallet small { color: rgb(255 255 255 / .7); }
.hl-chart { padding-block-start: 70px; }
.hl-chart .hl-bars { block-size: 150px; }
.hl-axis { display: flex; justify-content: space-between; color: var(--hl-muted); font-size: 10px; }
.hl-lime { background: var(--hl-lime); border: 0; }
.hl-lime small { color: rgb(11 15 13 / .7); }
.hl-src { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; }
.hl-src i { display: block; block-size: 6px; border-radius: 4px; background: var(--hl-brand); transform: scaleX(calc(var(--v) * 2)); transform-origin: left; }
[dir="rtl"] .hl-src i { transform-origin: right; }
.hl-prompt { position: relative; display: block; padding: 10px 12px; border-radius: 12px; background: var(--hl-panel); font-size: 12px; line-height: 1.45; color: var(--hl-ink); overflow: hidden; }
.hl-type { display: block; }
.hl-prompt::after { content: ""; position: absolute; inset: 0; background: var(--hl-panel); transform-origin: right; transform: scaleX(0); }
.hl-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.hl-steps span { padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--hl-lilac); color: var(--violet-700, #4B2BC9); }
.hl-menu { display: grid; gap: 3px; inline-size: 100%; font-size: 9.5px; }
.hl-menu span { display: flex; justify-content: space-between; padding: 3px 6px; border-radius: 6px; background: var(--hl-panel); }

/* ---------- Assist ---------- */
.hl-assist { overflow: hidden; }
.hl-assist .hl-glow.g2 { inset-block-start: 20%; }
.hl-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.hl-split .hl-h2, .hl-split .hl-sub { text-align: start; margin-inline: 0; }
.hl-assist .hl-art { --hl-glow-c: #EAE3FF; }

/* ---------- Compare ---------- */
.hl-cmp { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; padding: clamp(20px, 3.4vw, 40px); border-radius: 36px; background: var(--hl-panel); }
.hl-cmp-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-block-end: 14px; font-weight: 800; color: var(--hl-ink); }
.hl-cmp-label small { color: var(--hl-muted); font-weight: 600; }
.hl-cmp-label.is-on { color: var(--hl-brand-ink); }
.hl-cmp-jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.hl-cmp-jobs li { display: flex; align-items: center; gap: 8px; min-inline-size: 0; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--hl-line); font-size: 13.5px; font-weight: 600; color: var(--hl-ink); }
.hl-cmp-jobs li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-cmp-jobs li em { padding: 2px 7px; border-radius: 999px; background: #FFF1E9; color: var(--tangerine-600, #E85D1E); font-size: 10.5px; font-weight: 700; }
.hl-cmp-jobs svg { color: var(--hl-muted); }
.hl-cmp-arrow { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 50%; background: var(--hl-ink); color: var(--hl-lime); }
.hl-cmp-arrow svg { inline-size: 24px; block-size: 24px; }
.hl-cmp-card { display: grid; gap: 10px; padding: 18px; border-radius: 22px; background: #fff; box-shadow: var(--hl-shadow-lg); transform: rotate(-1.5deg); }
.hl-big { font-size: 36px !important; font-weight: 800; color: var(--hl-ink); }
.hl-cmp-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.hl-cmp-icons span { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 11px; background: var(--hl-mint); color: var(--hl-brand-ink); }
.hl-cmp-one .hl-checks { grid-template-columns: 1fr; border: 0; margin-block-end: 0; }

/* ---------- Templates ---------- */
.hl-chiprows { display: grid; gap: 12px; margin-block-end: 40px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hl-chiprow-track { display: flex; gap: 12px; inline-size: max-content; }
.hl-tchip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 999px; border: 1.5px solid var(--hl-ink); background: #fff; font-weight: 700; font-size: 15px; color: var(--hl-ink); white-space: nowrap; }
.hl-tchip .sw { inline-size: 26px; block-size: 26px; border-radius: 50%; }
.sw0 { background: linear-gradient(135deg, #FFB98C, #F9B7D4); } .sw1 { background: linear-gradient(135deg, #B9A6FF, #7C5CFF); } .sw2 { background: linear-gradient(135deg, #8BE8C3, #0BC284); } .sw3 { background: linear-gradient(135deg, #C2F45B, #8BE8C3); } .sw4 { background: linear-gradient(135deg, #333A35, #0B0F0D); }
.hl-carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, calc((100% - 60px) / 4)); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 6px 12px; outline: none; }
.hl-carousel-track::-webkit-scrollbar { display: none; }
.hl-carousel-track:focus-visible { outline: 3px solid var(--hl-brand); outline-offset: 4px; border-radius: 20px; }
.hl-tcard { scroll-snap-align: start; border-radius: 24px; border: 1.5px solid var(--hl-ink); background: #fff; overflow: hidden; transition: transform .3s ease; }
.hl-tcard:hover { transform: translateY(-4px); }
.hl-tcard-art { display: grid; justify-items: center; gap: 7px; padding: 26px 22px; min-block-size: 270px; align-content: start; text-align: center; }
.hl-tcard-art b { font-size: 17px; color: var(--hl-ink); }
.hl-tcard-art small { font-size: 12px; color: var(--hl-muted); margin-block-end: 6px; }
.hl-tcard-art .hl-av { inline-size: 54px; block-size: 54px; font-size: 20px; border: 3px solid #fff; box-shadow: var(--hl-shadow); }
.hl-tcard-art .hl-btn { inline-size: 100%; background: rgb(255 255 255 / .8); font-size: 12px; min-block-size: 34px; }
.hl-tcard-art.tone-sunset { background: linear-gradient(180deg, #FFE9DB, #FFF6F0); }
.hl-tcard-art.tone-lilac { background: linear-gradient(180deg, #ECE6FF, #F8F6FF); }
.hl-tcard-art.tone-aurora { background: linear-gradient(160deg, #DDF8EC, #ECE6FF); }
.hl-tcard-art.tone-canopy { background: linear-gradient(180deg, #E8F7D0, #F7FCEF); }
.hl-tcard-art.tone-midnight { background: linear-gradient(180deg, #1E2420, #333A35); }
.hl-tcard-art.tone-midnight b { color: #fff; } .hl-tcard-art.tone-midnight small { color: rgb(255 255 255 / .7); }
.hl-tcard-art.tone-midnight .hl-btn { background: rgb(255 255 255 / .12); color: #fff; }
.hl-tcard-art.tone-mint { background: linear-gradient(180deg, #DDF8EC, #F4FCF8); }
.hl-tcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-block-start: 1.5px solid var(--hl-ink); }
.hl-tcard-foot > span { display: grid; }
.hl-tcard-foot b { color: var(--hl-ink); }
.hl-tcard-foot small { font-size: 12px; }
.hl-round { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; border: 1px solid var(--hl-line); background: #fff; color: var(--hl-ink); cursor: pointer; transition: transform .2s ease; flex: none; }
.hl-round:hover { transform: scale(1.06); }
.hl-round.is-ink { background: var(--hl-ink); border-color: var(--hl-ink); color: #fff; }
.hl-round svg { inline-size: 18px; block-size: 18px; }
.hl-carousel-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-block-start: 14px; }
.hl-progress { flex: 1; max-inline-size: 200px; margin-inline-end: auto; block-size: 2px; background: var(--hl-line); overflow: hidden; }
.hl-progress i { display: block; block-size: 100%; inline-size: 100%; background: var(--hl-ink); transform: scaleX(var(--p, .25)); transform-origin: left; transition: transform .3s ease; }
[dir="rtl"] .hl-progress i { transform-origin: right; }

/* ---------- Leaderboard ---------- */
.hl-board-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-block-end: 28px; }
.hl-board-head .hl-h2 { max-inline-size: 18ch; }
.hl-seg { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--hl-line); background: #fff; }
.hl-seg button { min-block-size: 40px; padding: 6px 16px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--hl-muted); cursor: pointer; }
.hl-seg button[aria-pressed="true"] { background: var(--hl-ink); color: #fff; }
.hl-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hl-board li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; border: 1px solid var(--hl-line); background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.hl-board li:hover { transform: translateY(-2px); box-shadow: var(--hl-shadow); }
.hl-rank { inline-size: 18px; font-weight: 700; color: var(--hl-muted); }
.hl-board .hl-av { inline-size: 42px; block-size: 42px; font-size: 15px; }
.hl-board-n { display: grid; flex: 1; min-inline-size: 0; }
.hl-board-n b, .hl-board-v b { color: var(--hl-ink); }
.hl-board-n small { font-size: 13px; }
.hl-board-v { display: grid; text-align: end; }
.hl-fine { margin: 14px 0 0; font-size: 13px; color: var(--hl-muted); }

/* ---------- Pricing / FAQ / Final ---------- */
.hl-pricing { background: linear-gradient(180deg, transparent, #F4F5F1 30%, #F4F5F1 70%, transparent); }
.hl-faq { background: #FCFCFA; }
.hl-final { position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 9vw, 120px) clamp(20px, 4vw, 48px); border-radius: 40px; background: #F7F8F5; border: 1px solid var(--hl-line); text-align: center; }
.hl-final .hl-grid-bg { mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 30%, transparent 80%); }
.hl-final-f1, .hl-final-f2 { position: absolute; inset: auto; inline-size: auto; }
.hl-final-f1 { inset-block-start: 12%; inset-inline-start: 5%; --r: -6deg; }
.hl-final-f2 { inset-block-end: 12%; inset-inline-end: 5%; --r: 5deg; }
.hl .mk-pricing-more { text-align: center; }
.hl .mk-pricing-more a { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Motion (only while on screen, never with reduced motion) ---------- */
@keyframes hl-float { 50% { translate: 0 -8px; } }
@keyframes hl-blink { 0%, 100% { opacity: 1; } 40% { opacity: .45; } }
@keyframes hl-pop { 0%, 12% { opacity: 0; translate: 0 10px; scale: .94; } 20%, 85% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; translate: 0 -6px; } }
@keyframes hl-spin { to { rotate: 360deg; } }
@keyframes hl-marq { to { transform: translateX(-50%); } }
@keyframes hl-marq-rtl { to { transform: translateX(50%); } }
@keyframes hl-scan { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--scan, 120px)); } }
@keyframes hl-grow { 0%, 100% { scale: 1 .55; } 50% { scale: 1 1; } }
@keyframes hl-wire { from { translate: 0 -10px; } to { translate: 0 20px; } }
@keyframes hl-type { 0% { transform: scaleX(1); } 45%, 100% { transform: scaleX(0); } }
@keyframes hl-step { 0%, 10% { opacity: .3; } 25%, 100% { opacity: 1; } }
@keyframes hl-bump { 0%, 70%, 100% { scale: 1; } 80% { scale: 1.35; } }
@keyframes hl-pulse { 50% { box-shadow: 0 0 0 7px rgb(11 194 132 / .15); } }
@keyframes hl-drift { 50% { translate: 0 -10px; } }

@media (prefers-reduced-motion: no-preference) {
  .hl-on .hl-float { animation: hl-float 5s ease-in-out infinite; }
  .hl-on .hl-blink { animation: hl-blink 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
  .hl-on .hl-pop { animation: hl-pop 6s ease-in-out infinite; }
  .hl-on .hl-scan { --scan: 120px; animation: hl-scan 3s ease-in-out infinite; }
  .hl-on .hl-bars i.is-hi, .hl-on .hl-spark i:last-child { animation: hl-grow 3.2s ease-in-out infinite; transform-origin: bottom; }
  .hl-on .hl-wire i { animation: hl-wire 1.4s linear infinite; }
  .hl-on .hl-prompt::after { animation: hl-type 6s steps(28) infinite; }
  .hl-on .hl-steps span { animation: hl-step 6s ease infinite; animation-delay: var(--d); }
  .hl-on .hl-bump { animation: hl-bump 3s ease infinite; }
  .hl-on .hl-cal i.sel, .hl-on .hl-slot.is-pick { animation: hl-pulse 2.2s ease-in-out infinite; }
  .hl-hero.hl-on .hl-fc { animation: hl-drift 7s ease-in-out infinite; }
  .hl-hero.hl-on .hl-fc-ticket { animation-delay: -2s; } .hl-hero.hl-on .hl-fc-sale { animation-delay: -4s; } .hl-hero.hl-on .hl-fc-stats { animation-delay: -5.5s; }
  .hl-hero.hl-on .hl-badge svg { animation: hl-spin 18s linear infinite; }
  .hl-hero.hl-on .hl-marquee-track { animation: hl-marq 40s linear infinite; }
  [dir="rtl"] .hl-hero.hl-on .hl-marquee-track { animation-name: hl-marq-rtl; }
  .hl-marquee:hover .hl-marquee-track, .hl-chiprows:hover .hl-chiprow-track { animation-play-state: paused !important; }
  .hl-tpl-sec.hl-on .hl-chiprow-track { animation: hl-marq 46s linear infinite; }
  .hl-tpl-sec.hl-on .hl-chiprow.is-rev .hl-chiprow-track { animation-direction: reverse; }
  [dir="rtl"] .hl-tpl-sec.hl-on .hl-chiprow-track { animation-name: hl-marq-rtl; }
  .hl-final.hl-on .hl-fc { animation: hl-drift 6s ease-in-out infinite; }
  .hl-final.hl-on .hl-final-f2 { animation-delay: -3s; }
  .hl-cmp.hl-on .hl-cmp-arrow { animation: hl-pulse 2.4s ease-in-out infinite; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hl-fc-bio { inset-inline-start: 1%; } .hl-fc-ticket { inset-inline-end: 1%; }
  .hl-fc-sale { inset-inline-start: 2%; } .hl-fc-stats { inset-inline-end: 2%; }
  .hl-badge { inset-inline-start: 2%; inset-block-start: 15%; inline-size: 96px; block-size: 96px; }
  .hl-stats { grid-template-columns: repeat(4, 1fr); }
  .hl-stats-lead { grid-column: 1 / -1; justify-content: center; text-align: center; }
  .hl-carousel-track { grid-auto-columns: minmax(250px, calc((100% - 40px) / 3)); }
}
@media (max-width: 900px) {
  .hl-hero { padding-block-start: 96px; }
  .hl-floats { position: relative; inset: auto; display: block; block-size: 300px; margin-block-start: 34px; inline-size: min(560px, 100% - 32px); margin-inline: auto; }
  .hl-fc-bio { inset-block-start: 0; inset-inline-start: 0; }
  .hl-fc-ticket { inset-block-start: 10px; inset-inline-end: 0; }
  .hl-fc-sale { inset-block-start: auto; inset-block-end: 70px; inset-inline-start: 6%; }
  .hl-fc-stats { inset-block-start: auto; inset-block-end: 0; inset-inline-end: 4%; }
  .hl-badge { inset-block-start: auto; inset-block-end: 120px; inset-inline-start: calc(50% - 46px); inline-size: 92px; block-size: 92px; }
  .hl-badge-ico { inline-size: 36px; block-size: 36px; }
  .hl-panel, .hl-split, .hl-cmp { grid-template-columns: 1fr; }
  .hl-panel.is-flip .hl-panel-art { order: 0; }
  .hl-cmp-arrow { justify-self: center; rotate: 90deg; }
  .hl-more { grid-template-columns: repeat(2, 1fr); }
  .hl-board { grid-template-columns: 1fr; }
  .hl-carousel-track { grid-auto-columns: minmax(240px, 46%); }
}
@media (max-width: 640px) {
  .hl-h1 { font-size: clamp(38px, 11.4vw, 60px); }
  .hl-how { grid-template-columns: 1fr; }
  .hl-how-card { padding: 22px; }
  .hl-stats { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
  .hl-checks { grid-template-columns: 1fr; }
  .hl-more { grid-template-columns: 1fr; }
  .hl-panel { border-radius: 28px; padding: 14px 14px 26px; }
  .hl-panel-copy { padding-inline: 8px; }
  .hl-art { aspect-ratio: 4 / 4.1; border-radius: 20px; }
  .hl-card, .hl-toast { font-size: 11.5px; }
  .hl-card { padding: 10px; gap: 6px; }
  .hl-toast { padding: 7px 10px 7px 7px; }
  .hl-toast .hl-ico { inline-size: 28px; block-size: 28px; }
  .hl-art .hl-num { font-size: 17px; }
  .hl-phone { inline-size: 40%; inset-inline-start: 32%; }
  .hl-fc { inline-size: 176px; font-size: 12px; }
  .hl-fc-ticket { inline-size: 150px; }
  .hl-fc-stats { inline-size: 160px; }
  .hl-floats { block-size: 290px; }
  .hl-cmp-jobs { grid-template-columns: 1fr; }
  .hl-carousel-track { grid-auto-columns: 78%; }
  .hl-final-f1, .hl-final-f2 { display: none; }
  .hl-final { border-radius: 28px; }
  .hl-cta { font-size: 15px; }
  .hl-marquee-list li { font-size: 16px; }
  .hl-kicker { font-size: 12px; }
  .hl-floats { block-size: 330px; }
  .hl-fc-sale { inset-block-end: 96px; }
  .hl-badge { inset-block-end: 96px; inset-inline-start: 20px; inline-size: 84px; block-size: 84px; }
  .hl-badge text { font-size: 11px; }
  .hl-art-events .hl-ticket { inline-size: 84%; }
  .hl-art-links .hl-qr { inset-block-start: 54%; inline-size: 30%; }
  .hl-art-links .hl-card:first-child { inline-size: 72%; }
  .hl-art-assist .hl-phone-sm { inset-block-start: 30%; inset-inline-start: 56%; inline-size: 40%; }
  .hl-art-assist .hl-card { inline-size: 66%; }
}

/* R29 · the "o" switch: a sleek white pill with a violet-blue gradient rim and a pearl knob that glides (no letter). */
.hl-switch { --sw-h: .74em; --sw-w: 1.62em; --sw-b: .075em; inline-size: var(--sw-w); block-size: var(--sw-h);
  border: var(--sw-b) solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #D8F7E9 0%, #3DDC97 55%, #0B9F6C 100%) border-box;
  box-shadow: 0 .06em .22em -.04em rgb(11 194 132 / .45), inset 0 .03em .08em rgb(16 24 40 / .06); transition: background .45s ease, box-shadow .45s ease; }
.hl-switch::before { content: none; }
.hl-switch[aria-pressed="true"] { background: linear-gradient(90deg, #F2FCF7, #E3F8EE) padding-box, linear-gradient(90deg, #C2F45B 0%, #0BC284 50%, #087A53 100%) border-box;
  box-shadow: 0 .08em .3em -.04em rgb(11 194 132 / .6), inset 0 .03em .08em rgb(16 24 40 / .06); }
.hl-switch-knob { inset-block-start: .02em; inset-inline-start: .02em; inline-size: calc(var(--sw-h) - 2 * var(--sw-b) - .04em); block-size: calc(var(--sw-h) - 2 * var(--sw-b) - .04em);
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #F3F3F6 45%, #DADAE2 100%);
  box-shadow: 0 .05em .12em rgb(30 30 60 / .28), inset 0 -.02em .05em rgb(30 30 60 / .12), inset 0 .02em .04em #fff;
  transition: transform .6s cubic-bezier(.5, 1.5, .4, 1); }
.hl-switch[aria-pressed="true"] .hl-switch-knob { transform: translateX(calc(var(--sw-w) - var(--sw-h))); }
[dir="rtl"] .hl-switch[aria-pressed="true"] .hl-switch-knob { transform: translateX(calc(var(--sw-h) - var(--sw-w))); }
.hl-switch:hover .hl-switch-knob { box-shadow: 0 .07em .18em rgb(30 30 60 / .32), inset 0 -.02em .05em rgb(30 30 60 / .12), inset 0 .02em .04em #fff; }