/* ==========================================================================
   课程表 · 官网样式
   想换主色调：只改下面 :root 里的 --brand 一行动就够
   ========================================================================== */

:root{
  --brand:        #458775;
  --brand-deep:   #2F6459;
  --brand-soft:   #EAF4F1;
  --ink:          #10201D;
  --ink-2:        #455A56;
  --ink-3:        #7A8C89;
  --line:         rgba(16,32,29,.10);
  --bg:           #FFFFFF;
  --bg-2:         #F5F8F7;
  --card:         #FFFFFF;
  --shadow-s:     0 1px 2px rgba(16,32,29,.06), 0 4px 14px rgba(16,32,29,.06);
  --shadow-m:     0 10px 30px rgba(16,32,29,.10), 0 2px 6px rgba(16,32,29,.05);
  --shadow-l:     0 26px 60px rgba(16,32,29,.16);
  --r-s: 12px; --r-m: 18px; --r-l: 26px;
  --wrap: 1080px;
  --nav-h: 60px;
  /* 导航 / 底部条半透明底色（旧浏览器回退用，不依赖 color-mix） */
  --bar-bg: rgba(255,255,255,.82);
}

@media (prefers-color-scheme: dark){
  :root{
    --brand:      #5FAE99;
    --brand-deep: #86CBBA;
    --brand-soft: #16241F;
    --ink:        #ECF3F1;
    --ink-2:      #B4C5C1;
    --ink-3:      #82948F;
    --line:       rgba(236,243,241,.13);
    --bg:         #0B1211;
    --bg-2:       #121B19;
    --card:       #141E1C;
    --shadow-s:   0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
    --shadow-m:   0 10px 30px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
    --shadow-l:   0 26px 60px rgba(0,0,0,.6);
    --bar-bg:     rgba(11,18,17,.84);
  }
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.7 -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
       "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ line-height:1.25; margin:0; letter-spacing:-.01em; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px; }

.icon{ flex:none; vertical-align:-.15em; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--brand); color:#fff; padding:10px 16px; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; }

/* ---------------------------------- 顶部导航 ------------------------------ */
.nav{
  position:sticky; top:0; z-index:40;
  background:var(--bar-bg);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, box-shadow .25s;
}
.nav.is-stuck{ border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(16,32,29,.05); }
.nav__in{ height:var(--nav-h); display:flex; align-items:center; gap:24px; }

.brand{ display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:-.02em; }
.brand__dot{
  width:22px; height:22px; border-radius:7px; flex:none;
  background:linear-gradient(140deg,#5FAE99,#2F6459);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.brand__name{ font-size:17px; }
.brand__sub{ font-size:12px; color:var(--ink-3); font-weight:500; }

.nav__links{ margin-left:auto; display:flex; gap:4px; }
.nav__links a{
  padding:8px 12px; border-radius:10px; font-size:14.5px; color:var(--ink-2);
  transition:background .18s, color .18s;
}
.nav__links a:hover{ background:var(--brand-soft); color:var(--brand-deep); }
.nav__links a.is-on{ color:var(--ink); font-weight:600; }

.nav__cta{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--brand); color:#fff; font-size:14.5px; font-weight:600;
  padding:11px 16px; border-radius:999px; box-shadow:var(--shadow-s);
  transition:transform .18s, filter .18s;
}
.nav__cta:hover{ transform:translateY(-1px); filter:brightness(1.06); }

/* ------------------------------------ 首页大图 ---------------------------- */
.hero{ position:relative; overflow:hidden; padding:64px 0 20px; }
.hero::before{
  content:""; position:absolute; inset:-30% -20% auto -20%; height:78%;
  background:
    radial-gradient(46% 60% at 22% 26%, rgba(69,135,117,.28), transparent 70%),
    radial-gradient(42% 56% at 78% 12%, rgba(95,174,153,.26), transparent 72%),
    radial-gradient(40% 50% at 55% 60%, rgba(226,197,90,.14), transparent 70%);
  filter:blur(6px); pointer-events:none;
}
.hero__in{ position:relative; text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--brand-soft); color:var(--brand-deep);
  font-size:13px; font-weight:600; padding:7px 14px; border-radius:999px;
  border:1px solid rgba(69,135,117,.24);
  border-color:color-mix(in srgb, var(--brand) 22%, transparent);
}
.hero h1{
  font-size:clamp(30px, 5.4vw, 52px); font-weight:800; margin:22px 0 14px;
  letter-spacing:-.03em;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(96deg, var(--brand) 10%, #6FBF9F 55%, #D9B84A 110%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lead{ font-size:clamp(15.5px, 2vw, 18px); color:var(--ink-2); max-width:640px; margin:0 auto; }

.hero__meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:22px;
}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--ink-2);
  background:var(--card); border:1px solid var(--line);
  padding:7px 13px; border-radius:999px; box-shadow:var(--shadow-s);
}

/* ----------------------------------- 卡片 -------------------------------- */
.cards{
  display:grid; gap:22px; margin-top:46px; text-align:left;
  grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.card{
  --app:var(--brand);
  --app-soft:var(--brand-soft);
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:28px;
  box-shadow:var(--shadow-m);
  overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.card::after{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--app);
  background:linear-gradient(90deg, var(--app), color-mix(in srgb, var(--app) 35%, #E2C55A));
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-l); }

.card__top{ display:flex; gap:16px; align-items:center; }
.card__icon{
  width:74px; height:74px; border-radius:19px; flex:none;
  box-shadow:0 6px 18px rgba(16,32,29,.18), inset 0 0 0 1px rgba(255,255,255,.18);
}
.card__title{ font-size:20px; font-weight:750; }
.card__en{ font-size:12.5px; color:var(--ink-3); letter-spacing:.02em; margin-top:2px; }
.card__tag{ margin:16px 0 0; color:var(--ink-2); font-size:15px; }

.card__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px;
  margin-top:13px; font-size:13.5px; color:var(--ink-3);
}
.card__meta span{ display:inline-flex; align-items:center; gap:5px; }
.card__meta b{ color:var(--ink); font-weight:650; }
.card__meta .icon{ color:#E0A63A; }

.card__points{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:12px; }
.card__points li{ display:flex; gap:11px; font-size:14.5px; color:var(--ink-2); }
.card__points .icon{ color:var(--app); margin-top:2px; }
.card__points b{ color:var(--ink); font-weight:650; }

.card__foot{ margin-top:24px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.card__link{
  display:inline-flex; align-items:center; gap:6px;
  padding:11px 2px;   /* 手机上给足手指点击高度 */
  color:var(--app); font-weight:650; font-size:14.5px;
}
.card__link:hover{ gap:10px; }
.card__link .icon{ transition:transform .2s; }
.card__link:hover .icon{ transform:translateX(2px); }

.card__soon{
  display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink-3);
}

/* --------------------------- App Store 徽章按钮 -------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:10px;
  background:#0E1715; color:#fff;
  padding:10px 18px 10px 15px; border-radius:13px;
  box-shadow:0 6px 18px rgba(14,23,21,.28);
  transition:transform .18s, filter .18s;
}
.badge:hover{ transform:translateY(-2px); filter:brightness(1.12); }
.badge__txt{ display:flex; flex-direction:column; line-height:1.12; text-align:left; }
.badge__txt small{ font-size:10.5px; opacity:.8; letter-spacing:.02em; }
.badge__txt b{ font-size:17px; font-weight:650; letter-spacing:-.01em; }
.badge--soon{
  background:var(--bg-2); color:var(--ink-3); box-shadow:none;
  border:1px dashed var(--line); cursor:default;
}
.badge--soon:hover{ transform:none; filter:none; }
.badge--lg{ padding:13px 24px 13px 20px; border-radius:15px; }
.badge--lg .icon{ width:30px; height:30px; }
.badge--lg .badge__txt b{ font-size:20px; }

/* --------------------------------- 区块标题 ------------------------------ */
.sec{ padding:76px 0; }
.sec--alt{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sec__head{ text-align:center; max-width:640px; margin:0 auto 44px; }
.sec__head h2{ font-size:clamp(23px, 3.4vw, 34px); font-weight:780; letter-spacing:-.02em; }
.sec__head p{ color:var(--ink-2); margin:12px 0 0; font-size:15.5px; }

/* --------------------------------- 功能列表 ------------------------------ */
.app-block{ margin-bottom:56px; }
.app-block:last-child{ margin-bottom:0; }
.app-block__head{ display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.app-block__icon{ width:46px; height:46px; border-radius:13px; box-shadow:var(--shadow-s); }
.app-block__head h3{ font-size:19px; font-weight:750; }
.app-block__head span{ color:var(--ink-3); font-size:13.5px; }
.app-block__head .badge{ margin-left:auto; }

.feats{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(min(258px, 100%), 1fr));
}
.feat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  padding:20px; box-shadow:var(--shadow-s);
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s;
}
.feat:hover{
  transform:translateY(-3px); box-shadow:var(--shadow-m);
  border-color:var(--app, var(--brand));
  border-color:color-mix(in srgb, var(--app, var(--brand)) 35%, var(--line));
}
.feat__ico{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--app-soft, var(--brand-soft)); color:var(--app, var(--brand));
  margin-bottom:13px;
}
.feat h4{ font-size:15.5px; font-weight:680; }
.feat p{ margin:7px 0 0; font-size:14px; color:var(--ink-2); line-height:1.65; }

/* --------------------------------- 截图 ---------------------------------- */
.tabs{ display:flex; justify-content:center; gap:8px; margin-bottom:26px; }
.tab{
  border:1px solid var(--line); background:var(--card); color:var(--ink-2);
  padding:11px 20px; border-radius:999px; font-size:14.5px; font-weight:600; cursor:pointer;
  transition:.2s; font-family:inherit;
  min-height:44px;
}
.tab:hover{ color:var(--ink); }
.tab.is-on{ background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:var(--shadow-s); }

.shots{ display:none; }
.shots.is-on{ display:block; }

.shots__rail{
  display:flex; gap:18px; overflow-x:auto; padding:6px 4px 20px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.shots__rail::-webkit-scrollbar{ height:8px; }
.shots__rail::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }

.shot{
  flex:none; width:min(74vw, 268px); scroll-snap-align:center;
  border-radius:var(--r-m); overflow:hidden; cursor:zoom-in;
  background:var(--bg-2); border:1px solid var(--line);
  box-shadow:var(--shadow-m);
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.shot:hover{ transform:translateY(-4px) scale(1.012); }
.shot img{ width:100%; height:auto; }
.shot--wide{ width:min(88vw, 520px); }

.shots__empty{
  border:2px dashed var(--line); border-radius:var(--r-m);
  padding:40px 22px; text-align:center; color:var(--ink-3); font-size:14.5px;
}
.shots__empty code{ background:var(--bg-2); padding:2px 6px; border-radius:6px; font-size:13px; }

/* --------------------------------- 对比表 -------------------------------- */
.tablewrap{
  overflow-x:auto; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-m); box-shadow:var(--shadow-m);
}
table.cmp{ width:100%; border-collapse:collapse; min-width:560px; font-size:14.5px; }
table.cmp th, table.cmp td{ padding:14px 18px; text-align:left; border-bottom:1px solid var(--line); }
table.cmp thead th{ font-weight:700; font-size:15px; }
table.cmp thead th:nth-child(2){ color:#458775; }
table.cmp thead th:nth-child(3){ color:#2F6E63; }
table.cmp tbody tr:last-child td{ border-bottom:0; }
table.cmp tbody tr:hover{ background:var(--bg-2); }
table.cmp td:first-child{ color:var(--ink-2); }
table.cmp td:nth-child(2), table.cmp td:nth-child(3){ font-weight:600; }
table.cmp td:not(:first-child){ white-space:nowrap; }
/* 手机版才显示的小标签（宽屏有表头，不需要） */
.cmp__tag{ display:none; }

/* ---------------------------------- FAQ ---------------------------------- */
.faq{ display:grid; gap:12px; max-width:820px; margin:0 auto; }
details.qa{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  padding:4px 20px; box-shadow:var(--shadow-s); transition:box-shadow .2s;
}
details.qa[open]{ box-shadow:var(--shadow-m); }
details.qa summary{
  cursor:pointer; list-style:none; padding:16px 0; font-weight:650; font-size:15.5px;
  display:flex; align-items:center; gap:12px;
}
details.qa summary::-webkit-details-marker{ display:none; }
details.qa summary::after{
  content:"+"; margin-left:auto; color:var(--brand); font-size:20px; font-weight:400;
  transition:transform .22s;
}
details.qa[open] summary::after{ transform:rotate(45deg); }
details.qa .qa__body{ padding:0 0 18px; color:var(--ink-2); font-size:14.8px; }
.faq__group{
  grid-column:1/-1; margin:22px 0 4px; font-size:13px; font-weight:700;
  color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase;
}

/* --------------------------------- 下载区 -------------------------------- */
.dl{
  position:relative; overflow:hidden; border-radius:var(--r-l);
  background:linear-gradient(135deg, #2F6459, #458775 46%, #6FA98F);
  color:#fff; padding:52px 34px; text-align:center;
  box-shadow:var(--shadow-l);
}
.dl::before{
  content:""; position:absolute; inset:-40% -10% auto auto; width:60%; height:180%;
  background:radial-gradient(closest-side, rgba(255,255,255,.22), transparent);
}
.dl__in{ position:relative; }
.dl h2{ font-size:clamp(23px,3.2vw,32px); font-weight:780; }
.dl p{ color:rgba(255,255,255,.86); margin:12px auto 0; max-width:560px; font-size:15.5px; }
.dl__btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.dl__btns .badge{ background:#08110F; box-shadow:0 10px 26px rgba(0,0,0,.28); }
.dl__notes{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
.dl__notes span{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2);
  padding:6px 13px; border-radius:999px; font-size:13px;
}

/* --------------------------------- 页脚 ---------------------------------- */
.foot{ border-top:1px solid var(--line); background:var(--bg-2); padding:52px 0 26px; margin-top:70px; }
.foot__in{ display:grid; gap:30px; grid-template-columns:1.6fr repeat(3, 1fr); }
.foot__brand{ display:flex; align-items:center; gap:9px; font-size:16px; font-weight:700; }
.foot__brand span:last-child{ color:var(--ink-3); font-size:12.5px; font-weight:500; }
.foot__desc{ color:var(--ink-2); font-size:14px; margin:12px 0 14px; max-width:300px; }
.foot__mail a{ display:inline-flex; align-items:center; gap:7px; color:var(--brand); font-size:14px; font-weight:600; }
.foot__col h4{ font-size:13px; color:var(--ink-3); font-weight:700; letter-spacing:.06em; margin-bottom:14px; text-transform:uppercase; }
.foot__col a, .foot__col .foot__soon{ display:block; font-size:14.2px; color:var(--ink-2); margin-bottom:10px; }
.foot__col a:hover{ color:var(--brand); }
.foot__bar{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line);
  color:var(--ink-3); font-size:13px;
}
.foot__bar a{ color:var(--ink-3); }
.foot__bar a:hover{ color:var(--brand); }

/* ------------------------------- 底部下载条 ------------------------------ */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  background:var(--bar-bg);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--line);
  transform:translateY(105%); transition:transform .32s cubic-bezier(.22,1,.36,1);
  /* 底部留出 iPhone 的 Home 指示条，避免按钮被盖住 */
  padding:10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
}
.dock.is-on{ transform:translateY(0); }
.dock__in{ display:flex; align-items:center; gap:16px; }
.dock__txt{ font-size:14.5px; color:var(--ink-2); }
.dock__btns{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:650;
  padding:10px 17px; border-radius:999px; transition:transform .18s, filter .18s, background .18s;
}
.btn--brand{ background:var(--brand); color:#fff; box-shadow:var(--shadow-s); }
.btn--brand:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.btn--ghost{ border:1px solid var(--line); color:var(--ink-2); }
.btn--ghost:hover{ background:var(--bg-2); color:var(--ink); }

/* -------------------------------- 内页正文 ------------------------------- */
.doc{ padding:52px 0 20px; }
.doc__head{ max-width:760px; }
.doc__head h1{ font-size:clamp(26px,4vw,38px); font-weight:800; }
.doc__head p{ color:var(--ink-2); margin:14px 0 0; }
.doc__switch{ display:flex; gap:8px; margin:24px 0 0; flex-wrap:wrap; }
.doc__body{ max-width:760px; margin-top:36px; }
.doc__body h2{ font-size:19px; font-weight:720; margin:34px 0 10px; }
.doc__body p{ color:var(--ink-2); margin:0 0 12px; font-size:15.5px; }
.doc__body ul{ color:var(--ink-2); padding-left:22px; font-size:15.5px; }
.doc__body li{ margin:8px 0; }
.doc__note{
  background:var(--brand-soft); border:1px solid rgba(69,135,117,.26);
  border-color:color-mix(in srgb, var(--brand) 24%, transparent);
  color:var(--brand-deep); border-radius:var(--r-m); padding:18px 20px; font-size:15px; font-weight:600;
}
.doc__updated{ color:var(--ink-3); font-size:13.5px; margin-top:10px; }
.doc__back{ display:inline-flex; align-items:center; gap:6px; color:var(--brand); font-weight:650; font-size:14.5px; }

/* -------------------------------- 灯箱 ---------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:80; display:none; place-items:center;
  background:rgba(6,14,12,.82); backdrop-filter:blur(6px); padding:26px;
}
.lightbox.is-on{ display:grid; }
.lightbox img{
  max-width:100%; max-height:88vh; border-radius:var(--r-m);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lightbox__close{
  position:absolute; top:18px; right:20px; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12); color:#fff;
  font-size:22px; line-height:1; cursor:pointer;
}

/* -------------------------------- 进入动画 ------------------------------- */
.rise{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.rise.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rise{ opacity:1; transform:none; transition:none; }
  .card:hover, .feat:hover, .shot:hover{ transform:none; }
}

/* -------------------------------- 响应式 -------------------------------- */
@media (max-width: 900px){
  .foot__in{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 760px){
  .nav__links{ display:none; }
  .nav__cta{ margin-left:auto; }
  .sec{ padding:56px 0; }
  .hero{ padding:44px 0 10px; }
  .card{ padding:22px; }
  .card__icon{ width:62px; height:62px; border-radius:16px; }
  .dl{ padding:40px 22px; border-radius:var(--r-m); }
  .app-block__head .badge{ margin-left:0; }
  /* 手机上徽章按钮铺满一行，手指好点 */
  .card__foot .badge, .app-block .badge, .dl__btns .badge{ justify-content:center; }
  .dock__txt{ display:none; }
  .dock__btns{ margin:0 auto; }
  .foot__in{ grid-template-columns:1fr; gap:22px; }
  .foot__bar{ justify-content:center; text-align:center; }

  /* 对比表：手机上变卡片式，不用左右拖 */
  .tablewrap{ overflow:visible; }
  table.cmp{ min-width:0; }
  table.cmp thead{ display:none; }
  table.cmp tbody tr{
    display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:start;
    padding:14px 16px; border-bottom:1px solid var(--line);
  }
  table.cmp tbody tr:last-child{ border-bottom:0; }
  table.cmp td{ border:0; padding:0; white-space:normal; font-size:14.5px; overflow-wrap:anywhere; }
  table.cmp td:first-child{
    grid-column:1 / -1; margin-bottom:8px;
    font-size:13px; color:var(--ink-3); font-weight:650; letter-spacing:.02em;
  }
  .cmp__tag{
    display:block; font-size:12px; font-weight:500;
    color:var(--ink-3); margin-bottom:3px; letter-spacing:0;
  }
}