/* AI 영문법 게임 계층 스타일 — 오늘의 모험 패널·모험 지도·마스코트 표정·스피드 라운드·짝 카드·오류 사냥·보스전·홈 링크 */

/* ── 사이트 홈 링크(HUD 맨 왼쪽) ── */
.hud { gap: 4px 6px; padding-left: 12px; padding-right: 12px; }
.hud__stat { padding: 4px 3px; }
.hud__home { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 6px 10px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); font-weight: 800; text-decoration: none; color: var(--ink); flex: none; }
.hud__home span { font-size: .875rem; }
@media (max-width: 420px) { .hud__home span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .hud__home { padding: 6px; } }
.site-home { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); font-weight: 800; text-decoration: none; color: var(--ink); }
.lesson__home { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; font-size: 1.25rem; text-decoration: none; flex: none; }

/* ── 마스코트·차분한 표시 ── */
.mascot { width: 64px; height: 64px; flex: none; overflow: visible; }
.mascot--md { width: 72px; height: 72px; }
.mm { display: none; }
.mascot[data-mood="idle"] .mm-idle, .mascot[data-mood="happy"] .mm-happy, .mascot[data-mood="cheer"] .mm-cheer, .mascot[data-mood="oops"] .mm-oops, .mascot[data-mood="think"] .mm-think, .mascot[data-mood="wave"] .mm-wave { display: inline; }
.mascot[data-mood="ok"] .mm-happy { display: inline; }
.mascot { animation: bob 2.8s ease-in-out infinite; }
.mascot.react[data-mood="happy"], .mascot.react[data-mood="ok"] { animation: hop .5s; }
.mascot.react[data-mood="cheer"] { animation: hop .45s 2; }
.mascot.react[data-mood="oops"] { animation: tilt .6s; }
.mascot[data-mood="wave"] .m-arm-r { transform-origin: 86px 98px; animation: waveArm .9s ease-in-out infinite; }
@keyframes hop { 40% { transform: translateY(-14px) scale(1.05); } }
@keyframes tilt { 30% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } }
@keyframes waveArm { 50% { transform: rotate(-35deg) translateY(-8px); } }
.calm-mark { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--line); color: var(--muted); font-weight: 900; font-size: 1.5rem; background: var(--surface); }
.calm-mark[data-mood="ok"], .calm-mark[data-mood="happy"], .calm-mark[data-mood="cheer"] { border-color: var(--primary); color: var(--primary-d); background: var(--primary-l); }
.calm-mark[data-mood="oops"] { border-color: var(--orange); color: var(--orange-d); background: var(--orange-l); }
.prompt .mascot, .prompt .calm-mark { margin-top: 2px; }

/* ── 오늘의 모험 패널 ── */
.home-top:empty { display: none; }
.gpanel { margin: 0 0 14px; padding: 14px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.gp-top { display: flex; align-items: center; gap: 12px; }
.gp-face { flex: none; }
.gp-lv { flex: 1; min-width: 0; }
.gp-lv b { display: block; font-size: 1.0625rem; font-weight: 900; }
.gp-lv span { display: block; font-size: .8125rem; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.gp-msg { margin: 8px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--blue-l); font-weight: 700; }
.gp-streak { margin: 10px 0 6px; font-size: .9375rem; }
.gp-streak b { color: var(--orange-d); }
.gp-streak span { color: var(--muted); font-weight: 600; }
.gp-quests { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.gp-quests li { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 10px; border-radius: 12px; background: var(--surface-2); font-weight: 700; }
.gp-quests li > span:nth-child(2) { flex: 1; min-width: 0; }
.gp-quests em { font-style: normal; color: var(--muted); font-size: .8125rem; font-weight: 800; }
.gp-quests .ck { flex: none; width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--gray); display: grid; place-items: center; font-weight: 900; color: #fff; font-size: .875rem; }
.gp-quests li.done { background: var(--primary-l); }
.gp-quests li.done .ck { background: var(--primary); border-color: var(--primary); }
.gp-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.gpanel--calm { border-radius: 12px; }
.gpanel--calm .gp-quests li { border-radius: 8px; }
.gpanel--calm .gp-streak b { color: var(--ink); }
.gpanel--light { background: var(--blue-l); border-color: transparent; }
.gpanel--light .gp-games { margin-top: 10px; }
.hud__stat--lv { color: var(--purple-d); }
.combo.hot { color: var(--red-d); }

/* ── 모험 지도 ── */
.map { margin-top: 6px; }
/* 지도 배경 그림 자리: :root 에 --art-zone-1 … --art-zone-5, --art-boss 를 url(/ai-grammer/art/…) 로 정하면 그 지역에 끼워진다. 없으면 그라데이션. */
.zone { --zc: var(--primary); --zone-grad: linear-gradient(180deg, color-mix(in srgb, var(--zc) 16%, var(--surface)), color-mix(in srgb, var(--zc) 34%, var(--surface))); position: relative; margin: 16px 0 0; padding: 14px 4px 10px; border-radius: 24px; overflow: hidden; background: var(--zone-grad); background-size: cover; background-position: center; border: 2px solid color-mix(in srgb, var(--zc) 35%, var(--line)); }
.zone--1 { --zc: #2bb673; background: var(--art-zone-1, var(--zone-grad)); background-size: cover; }
.zone--2 { --zc: #3aa7f0; background: var(--art-zone-2, var(--zone-grad)); background-size: cover; }
.zone--3 { --zc: #ff9f43; background: var(--art-zone-3, var(--zone-grad)); background-size: cover; }
.zone--4 { --zc: #8aa2c9; background: var(--art-zone-4, var(--zone-grad)); background-size: cover; }
.zone--5 { --zc: #8b6cf6; background: var(--art-zone-5, var(--zone-grad)); background-size: cover; }
.zone--boss { --zc: #8b6cf6; background: var(--art-boss, var(--zone-grad)); background-size: cover; text-align: center; padding: 18px 12px 16px; }
.zone--open { box-shadow: 0 0 0 4px color-mix(in srgb, var(--purple) 30%, transparent); }
.zone--clear { border-color: var(--gold); }
.zone__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 0 12px; }
.zone__head b { font-size: 1.0625rem; font-weight: 900; }
.zone__head small { color: var(--muted); font-weight: 700; flex: 1; min-width: 0; }
.zone__prog { font-size: .8125rem; font-weight: 900; color: var(--ink); background: color-mix(in srgb, var(--surface) 80%, transparent); border-radius: 999px; padding: 2px 10px; }
.zone__path { padding: 30px 0 4px; }
.mstep { position: relative; height: 132px; }
.mstep .node { position: absolute; z-index: 2; left: calc(50% + var(--x, 0px) - 37px); top: 0; }
.mstep .node-label { position: absolute; z-index: 2; left: calc(50% + var(--x, 0px)); transform: translateX(-50%); top: 78px; width: max-content; margin: 0; max-width: 150px; padding: 2px 8px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 86%, transparent); color: var(--ink); }
.mstep .node-tip { z-index: 3; left: calc(50% + var(--x, 0px)); bottom: auto; top: -30px; transform: translateX(-50%); }
.mstep.now .node { animation: pulse 1.6s ease-in-out infinite; }
.road { position: absolute; z-index: 1; left: calc(50% + var(--x, 0px) - 3px); top: 35px; width: 6px; height: var(--len, 132px); transform-origin: 50% 0; transform: rotate(var(--ang, 0deg)); border-radius: 3px; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--muted) 55%, transparent) 0 8px, transparent 8px 16px); }
.road--done { background: var(--gold); box-shadow: 0 0 0 1px var(--gold-d) inset; }
.node--just { animation: popin .6s 2; box-shadow: 0 7px 0 var(--ncd, var(--gold-d)), 0 0 0 8px color-mix(in srgb, var(--gold) 55%, transparent); }
.node--boss { width: 96px; height: 90px; font-size: 2.5rem; border-radius: 28px; margin: 0 auto; display: grid; }
.node--boss[aria-disabled="true"] { --nc: var(--gray); --ncd: var(--gray-d); }
.node-label--boss { max-width: none; margin-top: 12px; font-size: .9375rem; color: var(--ink); }
.boss-meter { max-width: 240px; margin: 10px auto 0; }
.boss-meter > i { background: var(--purple); }
.map--calm .zone { background: var(--surface); border-color: var(--line); border-radius: 14px; }
.map--calm .zone__prog { background: var(--surface-2); }
.map--calm .node { box-shadow: 0 4px 0 var(--ncd, var(--primary-d)); font-size: 1.125rem; font-weight: 900; color: #fff; }
.map--calm .node--boss { font-size: 1.125rem; border-radius: 14px; }
.map--calm .mstep.now .node { animation: none; outline: 3px solid var(--blue); outline-offset: 3px; }
.map--calm .road--done { background: var(--primary); box-shadow: none; }

/* ── 보스전 · 클리어 ── */
.bar--boss > i { background: linear-gradient(90deg, #8b6cf6, #ff5f8a); }
.boss-ico { font-size: 1.5rem; line-height: 1; flex: none; }
.bar--time > i { background: var(--blue); transition: width .12s linear; }
.bar--time.bar--late > i { background: var(--orange); }
.boss-intro { text-align: center; }
.boss-face { font-size: 4.5rem; line-height: 1.2; animation: bob 2.2s ease-in-out infinite; }
.clear-banner { margin: 6px auto 14px; padding: 12px 16px; border-radius: 18px; max-width: 420px; background: linear-gradient(135deg, var(--gold-l), var(--primary-l)); border: 2px solid var(--gold); animation: popin .5s; }
.clear-banner b { display: block; font-size: 1.1875rem; font-weight: 900; }
.clear-banner small { display: block; color: var(--muted); font-weight: 700; }
.clear-banner--calm { background: var(--surface-2); border-color: var(--line); animation: none; }
.new-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0 14px; }
.new-badges .cbadge { animation: popin .5s; }

/* ── 개념 배지 ── */
.cbadges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 104px), 1fr)); gap: 10px; }
.cbadge { text-align: center; padding: 10px 6px; border-radius: 16px; background: var(--gold-l); border: 2px solid var(--gold); font-size: .8125rem; font-weight: 800; display: grid; gap: 2px; justify-items: center; }
.cbadge b { font-size: 1.75rem; line-height: 1.2; }
.cbadge small { color: var(--muted); font-weight: 600; }

/* ── 오류 사냥(손전등) · 문장 빌더(블록) ── */
.hunt-tag { margin: 0 0 6px; font-size: .8125rem; font-weight: 800; color: var(--orange-d); }
.tokens.hunt { position: relative; padding: 14px 10px; border-radius: 18px; background: color-mix(in srgb, var(--ink) 5%, var(--surface)); isolation: isolate; touch-action: manipulation; }
.tokens.hunt::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; background: radial-gradient(circle 90px at var(--mx, 50%) var(--my, 50%), rgba(255, 226, 120, .75), transparent 70%); transition: opacity .2s; }
.tokens.hunt.lit::before { opacity: 1; }
.tok.found { border-color: var(--primary); background: var(--primary-l); animation: popin .4s; }
.found-pop { align-self: center; font-weight: 900; color: var(--primary-d); animation: rise 1.2s ease-out forwards; }
.answer-line .tile { border-bottom-width: 6px; border-color: var(--blue); background: var(--blue-l); }
.answer-line .tile:nth-child(3n+2) { border-color: var(--orange); background: var(--orange-l); }
.answer-line .tile:nth-child(3n) { border-color: var(--purple); background: var(--purple-l); }
.answer-line .tile { animation: drop .22s ease-out; }
.answer-line .tile.wave { animation: wavehop .5s ease-out both; }
@keyframes drop { from { transform: translateY(-18px); opacity: .4; } }
@keyframes wavehop { 40% { transform: translateY(-10px); } }

/* ── 스피드 라운드 ── */
.gm .lesson__body { display: flex; flex-direction: column; }
.sp-card { margin: 8px 0 10px; padding: 26px 16px; min-height: 120px; display: grid; place-items: center; text-align: center; border-radius: 22px; border: 3px solid var(--line); background: var(--surface); box-shadow: 0 6px 0 var(--line); font-size: 1.5rem; font-weight: 800; line-height: 1.45; }
.sp-card.sp-ok { border-color: var(--primary); background: var(--primary-l); }
.sp-card.sp-no { border-color: var(--red); background: var(--red-l); animation: shake .35s; }
.sp-recap { min-height: 2.4em; color: var(--red-d); font-weight: 700; font-size: .9375rem; }
.sp-btn { min-height: 72px; font-size: 2rem; }
.sp-miss { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sp-miss li { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; }
.sp-miss .x { grid-column: 1; text-decoration: line-through; text-decoration-color: var(--red); color: var(--muted); }
.sp-miss .o { grid-column: 1; font-weight: 800; }
.sp-miss .say-btn { grid-column: 2; grid-row: 1 / span 2; }
.gm .done img, .gm .done svg { margin: 0 auto; }

/* ── 짝 카드 ── */
.pairs-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.pcard { position: relative; min-height: 78px; border-radius: 16px; border: 2px solid var(--line); background: var(--purple); color: #fff; box-shadow: 0 4px 0 var(--purple-d); font-weight: 900; font-size: 1rem; padding: 4px; display: grid; place-items: center; overflow-wrap: anywhere; line-height: 1.2; }
.pcard__f { display: none; }
.pcard__b { font-size: 1.75rem; }
.pcard.face { background: var(--surface); color: var(--ink); box-shadow: 0 4px 0 var(--line); animation: popin .25s; }
.pcard.face .pcard__f { display: inline; }
.pcard.face .pcard__b { display: none; }
.pcard.done { background: var(--primary-l); border-color: var(--primary); box-shadow: 0 4px 0 var(--primary); }
.pair-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pair-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 800; }
.pair-list i { font-style: normal; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .mascot, .boss-face, .mstep.now .node, .node--just { animation: none !important; }
}
.mascot--lg { display: block; width: 150px; height: 150px; margin: 0 auto 6px; }
/* 글자 200% 확대에서 상단 줄이 1px 넘치던 것 방지 */
.hud > :not(.hud__home) { min-width: 0; }
.hud__home, .ring { flex: none; }
@media (max-width: 420px) { .hud { padding-left: 10px; padding-right: 10px; } }

/* 승인된 지도 그림을 지역에 끼운다(art/map-1~3, boss-arena). 글자가 읽히도록 흰 막을 덮는다 */
:root {
  --art-zone-1: linear-gradient(rgba(255,255,255,.58), rgba(255,255,255,.4)), url(/ai-grammer/art/map-1.webp) center / cover no-repeat;
  --art-zone-2: linear-gradient(rgba(255,255,255,.58), rgba(255,255,255,.4)), url(/ai-grammer/art/map-2.webp) center / cover no-repeat;
  --art-zone-3: linear-gradient(rgba(255,255,255,.58), rgba(255,255,255,.4)), url(/ai-grammer/art/map-3.webp) center / cover no-repeat;
  --art-zone-4: linear-gradient(rgba(255,255,255,.58), rgba(255,255,255,.4)), url(/ai-grammer/art/map-2.webp) center / cover no-repeat;
  --art-zone-5: linear-gradient(rgba(255,255,255,.58), rgba(255,255,255,.4)), url(/ai-grammer/art/map-3.webp) center / cover no-repeat;
  --art-boss: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.34)), url(/ai-grammer/art/boss-arena.webp) center / cover no-repeat;
}
.cbadge__img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 4px; }

/* ── 12단계 학습 길(stagepath.js): 단계 N · M월 주제 구역. 배경은 월별 계절 그림 위에 막을 덮는다(글자가 먼저). ── */
.zone--st { --zc: var(--primary); background: var(--surface); isolation: isolate; scroll-margin-top: 84px; padding: 12px 4px 12px; }
.zone--st .zone__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.zone--st::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--surface) 74%, transparent); }
.zone--st:focus { outline: none; }
.zone--st:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.zone--st .zone__head { margin: 0 8px; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 90%, transparent); }
.zone--st .zone__head small { flex-basis: 100%; }
.zone--now { border-color: var(--primary); border-width: 3px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent); }
.zone__tag { display: inline-flex; align-items: center; min-height: 24px; padding: 1px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 900; white-space: nowrap; }
.zone__tag--now { background: var(--primary-d); color: #fff; }
.zone__tag--behind { background: var(--gold-l); color: var(--ink); border: 1px solid var(--gold); }
.zone__behind { margin: 8px 12px 0; }
.zone__goal { margin: 8px 12px 0; padding: 6px 10px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 88%, transparent); font-weight: 700; }
.zone__areas { margin: 8px 12px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.zone__media { margin: 8px 12px 0; padding: 4px 10px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 88%, transparent); font-weight: 700; font-size: .9375rem; overflow-wrap: anywhere; }
.zrows { margin: 8px 8px 0; display: grid; gap: 8px; }
.zrow { padding: 8px 10px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 90%, transparent); }
.zrow__t { display: block; margin-bottom: 6px; font-size: .8125rem; font-weight: 900; color: var(--muted); overflow-wrap: anywhere; }
.zrow__b { display: flex; flex-wrap: wrap; gap: 6px; }
.zcell { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; max-width: 100%; padding: 6px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font-weight: 800; font-size: .9375rem; text-align: left; overflow-wrap: anywhere; }
.zcell[data-s="locked"] { color: var(--muted); }
.zcell[data-s="mastered"] { border-color: var(--gold); }
.zcell[data-s="due"] { border-color: var(--blue); }
.zcell--more, .zcell--text { border-style: dashed; background: transparent; color: var(--muted); }
.zcheck { display: block; width: calc(100% - 16px); margin: 10px 8px 0; min-height: 56px; padding: 10px 14px; border-radius: 16px; border: 2px dashed var(--purple); background: color-mix(in srgb, var(--surface) 92%, transparent); text-align: left; }
.zcheck b { display: block; font-weight: 900; }
.zcheck small { display: block; color: var(--muted); font-weight: 700; overflow-wrap: anywhere; }
.zcheck--off { border-color: var(--gray); }
.zone--st .mstep .node-label { overflow-wrap: anywhere; }
.map--calm .zone--st { border-color: var(--line); }
.map--calm .zone--now { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 30%, transparent); }
.map--calm .zone__tag--now { background: var(--blue-d); }
.map--calm .zone--st::before { display: none; }

/* 유아(4~7세반)·초1 놀이길: 점수·진도 숫자 없이 달 주제와 말덩이 카드 */
.stagemap--quiet .zone__head b { font-size: 1.125rem; }
.qrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: 10px; margin: 12px 8px 4px; }
.qnode { position: relative; display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 8px 12px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); box-shadow: 0 3px 0 var(--line); text-align: left; font-weight: 800; }
.qnode__ic { flex: none; font-size: 1.75rem; line-height: 1; }
.qnode__t { min-width: 0; overflow-wrap: anywhere; }
.qnode[data-s="locked"] { opacity: .7; }
.qnode.now { border-color: var(--primary); background: var(--primary-l); }
.qnode__tip { position: absolute; top: -10px; right: 8px; padding: 0 8px; border-radius: 999px; background: var(--primary-d); color: #fff; font-style: normal; font-size: .75rem; font-weight: 900; }
.qnode--just { box-shadow: 0 3px 0 var(--gold-d), 0 0 0 4px color-mix(in srgb, var(--gold) 55%, transparent); }

/* 0~3세반: 12달 일과 줄 */
.ycare__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.ycare__row { display: flex; gap: 10px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); scroll-margin-top: 84px; }
.ycare__row:focus { outline: none; }
.ycare__row:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.ycare__row--now { border-color: var(--primary); background: var(--primary-l); }
.ycare__n { flex: none; width: 56px; text-align: center; }
.ycare__n b { display: block; font-size: .9375rem; }
.ycare__n small { color: var(--muted); font-weight: 700; }
.ycare__b { flex: 1; min-width: 0; }
.ycare__t, .ycare__sit, .ycare__g { margin: 0 0 4px; overflow-wrap: anywhere; }

/* 홈의 12단계 진행 띠(annual-ui.js) — 칸 12개, 지금 단계가 채워진다. 글자를 키우면 줄이 늘어난다. */
.stepstrip__hint { margin: 0 0 6px; }
.stepstrip { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.stepstrip__li { flex: 1 1 calc(100% / 6 - 6px); min-width: 2.75rem; display: flex; }
.stepstrip__c { position: relative; width: 100%; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 2px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface-2); line-height: 1.15; }
.stepstrip__c b { font-size: 1.0625rem; font-weight: 900; }
.stepstrip__c small { font-size: .75rem; font-weight: 700; color: var(--muted); }
.stepstrip__c--past { background: var(--surface); }
.stepstrip__c--now { border-color: var(--primary-d); background: var(--primary-d); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); }
.stepstrip__c--now small { color: #fff; }
.stepstrip__c--done i { position: absolute; top: -6px; right: -4px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #3b2a00; font-style: normal; font-size: .6875rem; font-weight: 900; }
.annual__head .chip { font-size: 1rem; font-weight: 900; }
.annual__back { margin-top: 6px; }