/*
 * /bible/soul-shop: the Soul Shop guide's rift look (a dark page, glowing cyan accents, glass cards, the page edges
 * torn open onto violet space), ported from .scratch/soul-shop-guide/{build,rift}.py in the luniac workspace and
 * scoped under .ss-guide so it never touches the rest of the site. Linked only by
 * views/partials/head-extras/bible-soul-shop.ejs. The page's palette is not the site's theme, so its colours are page
 * tokens below (one literal per line, marked for test/css/design-tokens.spec.ts).
 * Anton and Lexend are latin subsets: Chinese, Japanese and Korean use the system's own fonts (see the end).
 */

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("/fonts/anton-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0300-0309, U+0323;
}

@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("/fonts/lexend-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0300-0309, U+0323;
}

@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("/fonts/lexend-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0300-0309, U+0323;
}

.ss-guide {
  --ss-bg: #07070d; /* literal-ok */
  --ss-ink: #ecebf5; /* literal-ok */
  --ss-ink-strong: #f4f3ff; /* literal-ok */
  --ss-mute: #a3a2ba; /* literal-ok */
  --ss-line: #2a2a3d; /* literal-ok */
  --ss-rift: #7fdcff; /* literal-ok */
  --ss-rift-2: #b69cff; /* literal-ok */
  --ss-stage: #000000; /* literal-ok */
  --ss-no: #ff8fa3; /* literal-ok */
  --ss-no-bg: rgba(255, 77, 109, 0.14); /* literal-ok */
  --ss-no-ring: rgba(255, 77, 109, 0.35); /* literal-ok */
  --ss-ok-bg: rgba(127, 220, 255, 0.12); /* literal-ok */
  --ss-ok-ring: rgba(127, 220, 255, 0.35); /* literal-ok */
  --ss-days: #d4d3e6; /* literal-ok */
  --ss-days-bg: rgba(255, 255, 255, 0.08); /* literal-ok */
  --ss-days-ring: rgba(255, 255, 255, 0.14); /* literal-ok */
  --ss-card-top: rgba(255, 255, 255, 0.06); /* literal-ok */
  --ss-card-bottom: rgba(255, 255, 255, 0.02); /* literal-ok */
  --ss-card-line: rgba(140, 190, 255, 0.18); /* literal-ok */
  --ss-card-inner: rgba(120, 150, 255, 0.06); /* literal-ok */
  --ss-icon-ring: rgba(255, 255, 255, 0.08); /* literal-ok */
  --ss-glow: rgba(127, 220, 255, 0.65); /* literal-ok */
  --ss-glow-soft: rgba(127, 220, 255, 0.35); /* literal-ok */
  --ss-glow-faint: rgba(127, 220, 255, 0.12); /* literal-ok */
  --ss-glow-violet: rgba(127, 140, 255, 0.45); /* literal-ok */
  --ss-glow-violet-soft: rgba(140, 110, 255, 0.18); /* literal-ok */
  --ss-glow-violet-faint: rgba(127, 140, 255, 0.12); /* literal-ok */
  --ss-fade: rgba(7, 7, 13, 0); /* literal-ok */
  --ss-rift-0: rgba(127, 220, 255, 0); /* literal-ok */
  --ss-rift-2-0: rgba(182, 156, 255, 0); /* literal-ok */
  --ss-rule: rgba(127, 220, 255, 0.7); /* literal-ok */
  --ss-rule-mid: rgba(182, 156, 255, 0.35); /* literal-ok */
  --ss-top: #1b1640; /* literal-ok */
  --ss-bottom: #0f1f3a; /* literal-ok */
  --ss-display: "Anton", Impact, "Arial Narrow", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ss-body: "Lexend", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  color: var(--ss-ink);
  background:
    radial-gradient(1200px 700px at 50% -8%, var(--ss-top) 0%, var(--ss-fade) 70%),
    radial-gradient(900px 900px at 50% 100%, var(--ss-bottom) 0%, var(--ss-fade) 70%),
    var(--ss-bg);
  border-color: var(--ss-line);
  text-align: left;
  letter-spacing: normal;
  font: 400 19px/1.6 var(--ss-body);
  counter-reset: ss;
  min-width: 0;
  max-width: 100%;
}

/* the rift edge (rift.py's bleed(), stretched to the page); the masks fade it out before the text */
.ss-guide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("/images/bible/soul-shop/rift-bleed.svg") 0 0 / 100% 100% no-repeat;
  -webkit-mask-image:
    linear-gradient(90deg, #000 0, #000 18px, rgba(0, 0, 0, 0.45) 60px, rgba(0, 0, 0, 0.12) 120px, transparent 200px, transparent calc(100% - 200px), rgba(0, 0, 0, 0.12) calc(100% - 120px), rgba(0, 0, 0, 0.45) calc(100% - 60px), #000 calc(100% - 18px), #000 100%), /* literal-ok */
    linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0.3) 50px, transparent 160px, transparent calc(100% - 140px), rgba(0, 0, 0, 0.3) calc(100% - 50px), #000 100%); /* literal-ok */
  mask-image:
    linear-gradient(90deg, #000 0, #000 18px, rgba(0, 0, 0, 0.45) 60px, rgba(0, 0, 0, 0.12) 120px, transparent 200px, transparent calc(100% - 200px), rgba(0, 0, 0, 0.12) calc(100% - 120px), rgba(0, 0, 0, 0.45) calc(100% - 60px), #000 calc(100% - 18px), #000 100%), /* literal-ok */
    linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0.3) 50px, transparent 160px, transparent calc(100% - 140px), rgba(0, 0, 0, 0.3) calc(100% - 50px), #000 100%); /* literal-ok */
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

.ss-guide > .main-inner {
  padding: 64px clamp(28px, 6vw, 72px) 72px;
}

.ss-guide * {
  box-sizing: border-box;
}

/* the site's own element rules (heading colours, image borders) stay out */
.ss-guide h1,
.ss-guide h2,
.ss-guide h3,
.ss-guide p {
  color: inherit;
  background: none;
  border: 0;
  text-shadow: none;
}

.ss-guide img {
  border: 0;
  box-shadow: none;
  max-width: 100%;
  padding: 0;
}

.ss-guide ul,
.ss-guide ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss-guide h1,
.ss-guide h2,
.ss-guide h3 {
  text-wrap: balance;
}

.ss-guide p {
  text-wrap: pretty;
}

/* --- the Bible's breadcrumb and section bar, on the dark page --- */

.ss-guide .bible-crumbs,
.ss-guide .bible-sections {
  font-family: var(--font-body);
  line-height: 1.5;
}

.ss-guide .bible-crumbs {
  color: var(--ss-mute);
}

.ss-guide .bible-crumbs a {
  color: var(--ss-ink);
}

.ss-guide .bible-sections a {
  color: var(--ss-ink);
  border-color: var(--ss-line);
}

.ss-guide .bible-sections a:hover,
.ss-guide .bible-sections a[aria-current="page"] {
  background: var(--ss-ok-bg);
  border-color: var(--ss-rift);
}

.ss-guide a:focus-visible {
  outline: 2px solid var(--ss-rift);
  outline-offset: 2px;
}

/* --- title --- */

.ss-guide h1 {
  margin: 24px 0 20px;
  font: 400 96px/0.95 var(--ss-display);
  text-transform: uppercase;
  color: var(--ss-ink-strong);
}

.ss-guide h1 em {
  font-style: normal;
  color: var(--ss-rift);
  text-shadow: 0 0 18px var(--ss-glow), 0 0 46px var(--ss-glow-violet);
}

.ss-guide .ss-lead {
  margin: 0;
  max-width: 1000px;
  font: 400 32px/1.35 var(--ss-body);
  letter-spacing: -0.02em;
}

.ss-guide .ss-lead b {
  font-weight: 700;
}

.ss-guide .ss-hi {
  color: var(--ss-rift);
}

/* --- section headings: "01 What it sells" --- */

.ss-guide section {
  margin-top: 64px;
}

.ss-guide h2 {
  counter-increment: ss;
  display: flex;
  gap: 24px;
  align-items: center;
  margin: 0 0 26px;
  padding-top: 24px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--ss-rule), var(--ss-rule-mid) 40%, var(--ss-rift-0)) 1;
  font: 400 46px/1 var(--ss-display);
  text-transform: uppercase;
}

.ss-guide h2::before {
  content: "0" counter(ss);
  font: 400 64px/1 var(--ss-display);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ss-rift);
  text-shadow: 0 0 14px var(--ss-glow-soft);
}

.ss-guide h3 {
  margin: 0 0 10px;
  font: 400 30px/1.05 var(--ss-display);
  text-transform: uppercase;
}

/* --- 01 the shop --- */

.ss-guide .ss-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ss-guide .ss-card {
  display: flex;
  gap: 16px;
  align-items: center;
  min-width: 0;
  padding: 14px 16px;
  background: linear-gradient(160deg, var(--ss-card-top), var(--ss-card-bottom));
  border: 1px solid var(--ss-card-line);
  border-radius: 10px;
  box-shadow: inset 0 0 22px var(--ss-card-inner);
}

.ss-guide .ss-card--wide {
  grid-column: span 2;
  border-color: var(--ss-glow);
  box-shadow: 0 0 18px var(--ss-glow-soft), inset 0 0 26px var(--ss-glow-faint);
}

.ss-guide .ss-card__txt {
  min-width: 0;
}

.ss-guide .ss-ic {
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--ss-icon-ring);
}

.ss-guide .ss-nm {
  font: 700 18px/1.25 var(--ss-body);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.ss-guide .ss-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font: 400 30px/1 var(--ss-display);
}

.ss-guide .ss-price img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0 0 10px var(--ss-glow);
}

.ss-guide .ss-meta {
  margin-top: 4px;
  font-size: 14px;
  color: var(--ss-mute);
}

.ss-guide .ss-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.ss-guide .ss-tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font: 700 12px/1 var(--ss-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ss-guide .ss-tag--no {
  color: var(--ss-no);
  background: var(--ss-no-bg);
  box-shadow: inset 0 0 0 1px var(--ss-no-ring);
}

.ss-guide .ss-tag--ok {
  color: var(--ss-rift);
  background: var(--ss-ok-bg);
  box-shadow: inset 0 0 0 1px var(--ss-ok-ring);
}

.ss-guide .ss-tag--days {
  color: var(--ss-days);
  background: var(--ss-days-bg);
  box-shadow: inset 0 0 0 1px var(--ss-days-ring);
}

.ss-guide .ss-foot {
  margin: 16px 0 0;
  font-size: 16px;
  color: var(--ss-mute);
}

/* --- 02 the rift strip: shrine -> 20% -> lost souls x5 -> Lost Soul x5 --- */

.ss-guide .ss-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 300fr) minmax(0, 180fr) minmax(0, 330fr) minmax(0, 120fr);
  gap: 8px;
  align-items: center;
  padding: 46px 32px 28px;
  background: var(--ss-stage);
  border: 1px solid var(--ss-glow);
  border-radius: 4px;
  box-shadow: 0 0 28px var(--ss-glow-soft), 0 0 90px var(--ss-glow-violet-soft), inset 0 0 60px var(--ss-glow-violet-faint);
}

.ss-guide .ss-where {
  position: absolute;
  left: 32px;
  top: 20px;
  font: 700 14px/1 var(--ss-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ss-mute);
}

.ss-guide .ss-fig {
  position: relative;
  margin: 0;
  text-align: center;
}

.ss-guide .ss-fig img {
  display: block;
  margin: 0 auto;
  height: auto;
}

.ss-guide .ss-fig figcaption {
  margin-top: 8px;
  font: 400 26px/1.1 var(--ss-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ss-ink-strong);
}

.ss-guide .ss-x {
  position: absolute;
  right: 8%;
  top: 6%;
  font: 400 64px/1 var(--ss-display);
  color: var(--ss-ink-strong);
}

.ss-guide .ss-odds {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ss-ink-strong);
}

.ss-guide .ss-odds b {
  font: 400 88px/1 var(--ss-display);
  color: var(--ss-rift);
  text-shadow: 0 0 22px var(--ss-glow);
}

.ss-guide .ss-odds span {
  margin: 4px 0 14px;
  font: 400 22px/1 var(--ss-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ss-guide .ss-arrow {
  max-width: 100%;
  height: auto;
  stroke: var(--ss-rift);
  fill: var(--ss-rift);
}

.ss-guide .ss-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font: 400 40px/1 var(--ss-display);
  color: var(--ss-ink-strong);
}

.ss-guide .ss-drop img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
}

.ss-guide .ss-steps,
.ss-guide .ss-ways {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 28px;
}

.ss-guide .ss-ways {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
}

.ss-guide .ss-steps > li,
.ss-guide .ss-ways > li {
  padding: 0 24px;
}

.ss-guide .ss-steps > li:first-child,
.ss-guide .ss-ways > li:first-child {
  padding-left: 0;
}

.ss-guide .ss-steps > li + li,
.ss-guide .ss-ways > li + li {
  border-left: 1px solid var(--ss-line);
}

.ss-guide .ss-n {
  display: block;
  font: 400 56px/1 var(--ss-display);
  color: var(--ss-rift);
  text-shadow: 0 0 16px var(--ss-glow-soft);
}

.ss-guide .ss-steps p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}

.ss-guide .ss-steps b,
.ss-guide .ss-ways b,
.ss-guide .ss-rew b,
.ss-guide .ss-lic b {
  font-weight: 700;
}

/* --- 03 invasion rewards --- */

.ss-guide .ss-rew {
  display: grid;
  gap: 18px;
}

.ss-guide .ss-rew li,
.ss-guide .ss-lic {
  display: flex;
  gap: 22px;
  align-items: center;
}

.ss-guide .ss-rew .ss-ic,
.ss-guide .ss-lic .ss-ic {
  width: 84px;
  height: 84px;
}

.ss-guide .ss-rew p,
.ss-guide .ss-lic p {
  margin: 0;
  font-size: 22px;
  line-height: 1.45;
}

.ss-guide .ss-q {
  display: block;
  margin-top: 4px;
  font-size: 17px;
  font-style: italic;
  color: var(--ss-mute);
}

/* --- 04 Chaos Rift Keys --- */

.ss-guide .ss-lic {
  margin: 0 0 26px;
}

.ss-guide .ss-ways p {
  margin: 0;
  font-size: 19px;
}

.ss-guide .ss-ways .ss-tag {
  margin-top: 12px;
}

.ss-guide .ss-last {
  margin: 26px 0 0;
  font-size: 19px;
}

.ss-guide .ss-closer {
  height: 3px;
  margin-top: 56px;
  background: linear-gradient(90deg, var(--ss-rift-0), var(--ss-rift) 20%, var(--ss-rift-2) 80%, var(--ss-rift-2-0));
  box-shadow: 0 0 16px var(--ss-glow);
}

/*
 * Chinese, Japanese, Korean: Anton and Lexend have no glyphs there, so the text falls back to the system's own CJK
 * face (the infographic's Yu Gothic, Microsoft YaHei / JhengHei, Malgun Gothic first). The display type asks for bold:
 * at weight 400 the fallback looks thin next to Anton; font-synthesis: none keeps the Latin glyphs (numbers, x5) in
 * real Anton instead of a faked bold.
 */
.ss-guide:lang(ja) {
  --ss-cjk: "Yu Gothic", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "Noto Sans JP", "Noto Sans CJK JP";
}

.ss-guide:lang(zh-CN) {
  --ss-cjk: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC";
}

.ss-guide:lang(zh-TW) {
  --ss-cjk: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC";
}

.ss-guide:lang(ko) {
  --ss-cjk: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR";
}

.ss-guide:is(:lang(zh), :lang(ja), :lang(ko)) {
  --ss-display: "Anton", var(--ss-cjk), sans-serif;
  --ss-body: "Lexend", var(--ss-cjk), sans-serif;
}

.ss-guide:is(:lang(zh), :lang(ja), :lang(ko)) :is(h1, h2, h3, .ss-fig figcaption, .ss-odds span) {
  font-weight: 700;
  font-synthesis: none;
}

/* a pseudo-element cannot sit inside :is(), so the section number gets its own rule */
.ss-guide:is(:lang(zh), :lang(ja), :lang(ko)) h2::before {
  font-weight: 400;
  font-synthesis: none;
}

.ss-guide:is(:lang(zh), :lang(ja), :lang(ko)) h1 {
  font-size: 84px;
  line-height: 1.1;
  letter-spacing: 0;
}

.ss-guide:is(:lang(zh), :lang(ja), :lang(ko)) h2 {
  font-size: 42px;
}

.ss-guide:is(:lang(zh), :lang(ja), :lang(ko)) h3 {
  line-height: 1.2;
}

.ss-guide:is(:lang(zh), :lang(ja), :lang(ko)) .ss-lead {
  letter-spacing: 0;
}

.ss-guide:is(:lang(zh), :lang(ja), :lang(ko)) :is(.ss-steps p, .ss-ways p) {
  line-height: 1.7;
}

/* Korean breaks lines between words, never inside one */
.ss-guide:lang(ko) {
  word-break: keep-all;
}

/* --- narrower screens --- */

@media (max-width: 1000px) {
  .ss-guide .ss-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ss-guide .ss-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
  }

  .ss-guide .ss-steps > li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

/* --- phones --- */

@media (max-width: 720px) {
  .ss-guide {
    font-size: 16px;
  }

  /* on a phone the edge is squeezed sideways, so its teeth grow tall: fade them out sooner */
  .ss-guide::before {
    -webkit-mask-image:
    linear-gradient(90deg, #000 0, #000 10px, rgba(0, 0, 0, 0.45) 30px, rgba(0, 0, 0, 0.12) 56px, transparent 90px, transparent calc(100% - 90px), rgba(0, 0, 0, 0.12) calc(100% - 56px), rgba(0, 0, 0, 0.45) calc(100% - 30px), #000 calc(100% - 10px), #000 100%), /* literal-ok */
    linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0.3) 20px, transparent 64px, transparent calc(100% - 64px), rgba(0, 0, 0, 0.3) calc(100% - 20px), #000 100%); /* literal-ok */
    mask-image:
    linear-gradient(90deg, #000 0, #000 10px, rgba(0, 0, 0, 0.45) 30px, rgba(0, 0, 0, 0.12) 56px, transparent 90px, transparent calc(100% - 90px), rgba(0, 0, 0, 0.12) calc(100% - 56px), rgba(0, 0, 0, 0.45) calc(100% - 30px), #000 calc(100% - 10px), #000 100%), /* literal-ok */
    linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0.3) 20px, transparent 64px, transparent calc(100% - 64px), rgba(0, 0, 0, 0.3) calc(100% - 20px), #000 100%); /* literal-ok */
  }

  .ss-guide > .main-inner {
    padding: 40px 22px 48px;
  }

  .ss-guide h1,
  .ss-guide:is(:lang(zh), :lang(ja), :lang(ko)) h1 {
    margin-top: 12px;
    font-size: 52px;
  }

  .ss-guide .ss-lead {
    font-size: 22px;
  }

  .ss-guide section {
    margin-top: 48px;
  }

  .ss-guide h2,
  .ss-guide:is(:lang(zh), :lang(ja), :lang(ko)) h2 {
    gap: 14px;
    font-size: 30px;
  }

  .ss-guide h2::before {
    font-size: 42px;
  }

  .ss-guide h3 {
    font-size: 26px;
  }

  .ss-guide .ss-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ss-guide .ss-card--wide {
    grid-column: auto;
  }

  /* the strip wraps: shrine and souls side by side, the odds and the drop under them */
  .ss-guide .ss-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 20px;
    padding: 44px 16px 20px;
  }

  .ss-guide .ss-where {
    left: 16px;
    top: 18px;
    font-size: 12px;
  }

  .ss-guide .ss-fig--shrine {
    grid-column: 1;
    grid-row: 1;
  }

  .ss-guide .ss-fig--souls {
    grid-column: 2;
    grid-row: 1;
  }

  .ss-guide .ss-fig figcaption {
    font-size: 18px;
  }

  .ss-guide .ss-x {
    font-size: 36px;
  }

  .ss-guide .ss-odds b {
    font-size: 56px;
  }

  .ss-guide .ss-odds span {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .ss-guide .ss-drop {
    font-size: 30px;
  }

  .ss-guide .ss-drop img {
    width: 64px;
    height: 64px;
  }

  .ss-guide .ss-steps,
  .ss-guide .ss-ways {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  .ss-guide .ss-steps > li,
  .ss-guide .ss-ways > li,
  .ss-guide .ss-steps > li:nth-child(3) {
    padding: 20px 0 0;
    border-left: 0;
    border-top: 1px solid var(--ss-line);
  }

  .ss-guide .ss-steps > li:first-child,
  .ss-guide .ss-ways > li:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .ss-guide .ss-n {
    font-size: 44px;
  }

  .ss-guide .ss-rew li,
  .ss-guide .ss-lic {
    align-items: flex-start;
    gap: 16px;
  }

  .ss-guide .ss-rew .ss-ic,
  .ss-guide .ss-lic .ss-ic {
    width: 60px;
    height: 60px;
  }

  .ss-guide .ss-rew p,
  .ss-guide .ss-lic p {
    font-size: 18px;
  }

  .ss-guide .ss-ways p,
  .ss-guide .ss-last {
    font-size: 17px;
  }
}