/* Page hero (root) and page intro (modules) share one component */
.hero { color: #fff; background: var(--dash-hero-grad); padding-block: clamp(36px, 6vw, 72px) clamp(32px, 5vw, 56px); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset-inline-start: -120px; inset-block-end: -160px; width: 420px; height: 420px; border-radius: 50%; border: 60px solid rgba(255, 255, 255, .03); pointer-events: none; }
.hero__inner { display: grid; gap: 18px; position: relative; max-width: 960px; }
.hero--split .hero__inner { max-width: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 40px; }
@media (max-width: 1024px) { .hero--split .hero__inner { grid-template-columns: minmax(0, 1fr); } }
.hero__kicker { color: var(--shk-gold-500); font-weight: 800; font-size: 13.5px; letter-spacing: .03em; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hero__kicker .en { color: rgba(255, 255, 255, .7); }
.hero h1 { font-size: var(--shk-fs-display); font-weight: 800; line-height: 1.25; max-width: 24ch; }
.hero__sub { font-size: clamp(16px, 1rem + .5vw, 20px); color: #fff; font-weight: 600; max-width: 48ch; line-height: 1.6; }
.hero__lead { color: var(--shk-on-dark-muted); font-size: 15.5px; max-width: 76ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 6px; }
.hero__visual { display: grid; gap: 14px; justify-items: center; }
.hero__visual img { border-radius: 14px; box-shadow: var(--shk-shadow-3); border: 1px solid rgba(255, 255, 255, .15); background: #fff; }
.hero__stack { position: relative; width: min(100%, 520px); aspect-ratio: 16 / 10; isolation: isolate; }
.hero__stack img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hero__stack img:nth-child(1) { inset-inline-start: 0; inset-block-start: 0; z-index: 3; }
.hero__stack img:nth-child(2) { inset-inline-start: -5%; inset-block-start: 10%; transform: scale(.92); opacity: .9; z-index: 2; }
.hero__stack img:nth-child(3) { inset-inline-start: -10%; inset-block-start: 20%; transform: scale(.84); opacity: .75; z-index: 1; }
.hero__stack-caption { font-size: 12.5px; color: var(--shk-on-dark-muted); text-align: center; }

/* Sticky toolbar under the hero (module dashboards) */
.toolbar { position: sticky; inset-block-start: 0; z-index: 100; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-block-end: 1px solid var(--shk-line); }
.toolbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-block: 10px; min-height: var(--dash-toolbar-h); }
.toolbar .select { min-width: 250px; min-height: 40px; }
.toolbar .field { min-width: 0; }
@media (max-width: 760px) {
  .toolbar .field { flex: 1 1 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .toolbar .select { min-width: 0; width: 100%; }
  .jump { display: none; }
}

/* Journey diagram (root) */
.journey { list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); counter-reset: step; }
.journey__step { position: relative; }
.journey__link {
  display: grid; gap: 10px; height: 100%; padding: 22px 20px; border-radius: var(--shk-r-xl); background: var(--shk-surface); border: 1px solid var(--shk-line);
  text-decoration: none; color: inherit; box-shadow: var(--shk-shadow-1); transition: transform .2s var(--shk-ease), box-shadow .2s, border-color .2s;
}
.journey__link:hover { transform: translateY(-3px); box-shadow: var(--shk-shadow-2); border-color: var(--shk-green-300); color: inherit; }
.journey__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: 12px; }
.journey__num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--shk-green-900); color: var(--shk-gold-500); font-weight: 900; font-size: 15px; flex: none; }
.journey__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--shk-green-50); color: var(--shk-green-800); display: grid; place-items: center; }
.journey__icon svg { width: 24px; height: 24px; }
.journey__name { font-size: 20px; font-weight: 800; }
.journey__en { display: block; font-size: 12px; color: var(--shk-ink-500); font-weight: 700; letter-spacing: .05em; direction: ltr; unicode-bidi: isolate; text-align: end; line-height: 1.4; margin-block-start: 2px; }
.journey__desc { font-size: 14px; color: var(--shk-ink-700); }
.journey__cta { margin-block-start: auto; color: var(--shk-green-800); font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.journey__cta svg { width: 16px; height: 16px; }
.journey__step:not(:last-child)::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: -16px; width: 16px; height: 2px; background: var(--shk-green-300);
}
.journey__step:not(:last-child)::before {
  content: ""; position: absolute; inset-block-start: calc(50% - 5px); inset-inline-end: -14px; width: 8px; height: 8px; border-radius: 50%; background: var(--shk-green-500); z-index: 1;
}
/* Lifecycle layer (e.g. email) spans under the sequential steps */
.journey__layer { grid-column: 1 / -1; margin-block-start: 8px; position: relative; }
.journey__layer::before { content: ""; position: absolute; inset-inline: 10%; inset-block-start: -14px; border-top: 2px dashed var(--shk-green-300); }
.journey__link--layer { background: linear-gradient(180deg, var(--shk-green-50), var(--shk-surface)); border-color: var(--shk-green-200); }
.journey__num--layer { background: var(--shk-gold-500); color: var(--shk-green-950); }
.journey__num--layer svg { width: 20px; height: 20px; }
.journey__link--layer .journey__top .badge { margin-inline-start: auto; }
@media (max-width: 900px) {
  .journey { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .journey__step:not(:last-child)::after { inset-block-start: auto; inset-inline-end: auto; inset-block-end: -28px; inset-inline-start: 50%; width: 2px; height: 28px; }
  .journey__step:not(:last-child)::before { inset-block-start: auto; inset-inline-end: auto; inset-block-end: -18px; inset-inline-start: calc(50% - 3px); }
}

/* Module overview cards (root) */
.modules { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.module-card { display: grid; grid-template-rows: auto 1fr; background: var(--shk-surface); border: 1px solid var(--shk-line); border-radius: 22px; overflow: hidden; box-shadow: var(--shk-shadow-1); transition: box-shadow .2s, transform .2s var(--shk-ease); }
.module-card:hover { box-shadow: var(--shk-shadow-2); transform: translateY(-2px); }
.module-card__shots { position: relative; background: var(--shk-surface-sunken); aspect-ratio: 16 / 10; overflow: hidden; border-block-end: 1px solid var(--shk-line); }
.module-card__shots img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.module-card__phone { position: absolute; inset-inline-start: 14px; inset-block-end: 14px; width: 24%; max-width: 110px; height: auto; border-radius: 12px; border: 3px solid var(--shk-ink-900); box-shadow: var(--shk-shadow-3); background: #fff; object-fit: cover; }
.module-card__body { padding: 22px; display: grid; gap: 12px; align-content: start; }
.module-card__head { display: flex; align-items: flex-start; gap: 12px; }
.module-card__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--shk-green-900); color: var(--shk-gold-500); display: grid; place-items: center; flex: none; }
.module-card__icon svg { width: 24px; height: 24px; }
.module-card__name { font-size: 21px; font-weight: 800; }
.module-card__en { font-size: 12px; font-weight: 700; color: var(--shk-ink-500); letter-spacing: .05em; direction: ltr; unicode-bidi: isolate; display: inline-block; }
.module-card__order { margin-inline-start: auto; font-size: 12px; font-weight: 900; color: var(--shk-gold-700); }
.module-card__desc { font-size: 14.5px; color: var(--shk-ink-700); }
.module-card__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.module-card__concepts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--shk-ink-500); font-weight: 700; }
.module-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: auto; padding-block-start: 6px; }

/* Goals per module (root) */
.goals { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.goal-card { background: var(--shk-surface); border: 1px solid var(--shk-line); border-radius: var(--shk-r-xl); padding: 20px; display: grid; gap: 12px; align-content: start; }
.goal-card__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; }
.goal-card__head svg { width: 22px; height: 22px; color: var(--shk-green-800); }
.goal-card__title { font-size: 17px; font-weight: 800; }
.goal-card__en { grid-column: 2; font-size: 11.5px; color: var(--shk-ink-500); font-weight: 700; letter-spacing: .05em; direction: ltr; unicode-bidi: isolate; text-align: end; white-space: nowrap; }
.goal-list { list-style: none; display: grid; gap: 6px; }
.goal-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 8px 0; border-block-end: 1px solid var(--shk-line); font-size: 14px; }
.goal-card > .btn { white-space: normal; height: auto; padding-block: 8px; justify-self: start; text-align: start; }
.goal-list li:last-child { border-block-end: 0; }
.goal-list small { display: block; color: var(--shk-ink-500); font-size: 12.5px; line-height: 1.5; }
.goal-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; color: var(--shk-ink-500); align-items: center; }

/* Concept index (root): every concept of every module */
.concept-index { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.concept-index__group { background: var(--shk-surface); border: 1px solid var(--shk-line); border-radius: var(--shk-r-xl); padding: 18px; display: grid; gap: 10px; align-content: start; }
.concept-index__title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; }
.concept-index__title svg { width: 20px; height: 20px; color: var(--shk-green-800); }
.concept-index__title a { margin-inline-start: auto; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; min-height: 32px; padding-inline: 4px; }
.concept-index__list { list-style: none; display: grid; gap: 6px; }
.concept-index__list a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--shk-r-md); border: 1px solid var(--shk-line); text-decoration: none; color: inherit; min-height: 52px; transition: border-color .15s, background-color .15s; }
.concept-index__list a:hover { border-color: var(--shk-green-800); background: var(--shk-green-50); color: inherit; }
.concept-index__num { font-size: 12px; font-weight: 900; color: var(--shk-gold-700); }
.concept-index__name { font-weight: 700; font-size: 14.5px; }
.concept-index__name small { display: block; font-size: 11.5px; color: var(--shk-ink-500); font-weight: 700; letter-spacing: .04em; direction: ltr; unicode-bidi: isolate; text-align: end; }
.concept-index__list svg { width: 16px; height: 16px; color: var(--shk-ink-300); }

/* Scope */
.scope { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.scope__item { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--shk-r-lg); background: var(--shk-surface); border: 1px solid var(--shk-line); font-size: 14px; }
.scope__item svg { width: 22px; height: 22px; flex: none; color: var(--shk-green-800); margin-block-start: 2px; }
.scope__item--no svg { color: var(--shk-error); }
.scope__item strong { display: block; font-size: 15px; margin-block-end: 2px; }
.scope__item span { color: var(--shk-ink-700); }

/* Concept cards (module dashboards) */
.concepts { display: grid; gap: 24px; }
.concept-card { display: grid; border: 1px solid var(--shk-line); border-radius: 22px; overflow: hidden; background: var(--shk-surface); box-shadow: var(--shk-shadow-1); }
@media (min-width: 1024px) { .concept-card { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.concept-card__shots { position: relative; background: var(--shk-bg); padding: 20px 20px 20px 96px; min-height: 260px; display: grid; align-items: start; border-inline-end: 1px solid var(--shk-line); }
@media (max-width: 1023px) { .concept-card__shots { border-inline-end: 0; border-block-end: 1px solid var(--shk-line); } }
.concept-card__desk { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 12px; box-shadow: var(--shk-shadow-2); border: 1px solid var(--shk-line); background: #fff; }
.concept-card__mob { position: absolute; inset-block-end: 16px; inset-inline-end: 16px; width: 26%; max-width: 150px; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border-radius: 16px; border: 4px solid var(--shk-ink-900); box-shadow: var(--shk-shadow-3); background: #fff; }
.concept-card__body { padding: 24px; display: grid; gap: 12px; align-content: start; }
.concept-card__num { font-size: 13px; font-weight: 900; color: var(--shk-gold-700); display: flex; align-items: center; gap: 10px; }
.concept-card__num .en { color: var(--shk-ink-500); }
.concept-card h3 { font-size: 24px; font-weight: 800; }
.concept-card__desc { font-size: 14.5px; color: var(--shk-ink-700); }
.concept-card__phil { background: var(--shk-green-50); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.concept-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 6px; }
@media (max-width: 480px) { .concept-card__shots { padding: 14px 14px 14px 70px; min-height: 0; } .concept-card__body { padding: 18px; } .concept-card h3 { font-size: 21px; } }

/* Interactive preview */
.pv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 12px; }
.pv-note { color: var(--shk-ink-500); font-size: 14px; margin-block-end: 14px; min-height: 1.5em; }
.pv-note strong { color: var(--shk-green-800); }
.pv-frames { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.pv-frames[data-count="1"][data-device="mobile"] { --frame-max: 430px; }
.pv-frames[data-count="1"][data-device="tablet"] { --frame-max: 860px; }
.pv-frames > * { width: 100%; max-width: var(--frame-max, none); min-width: 0; }
@media (min-width: 760px) {
  .pv-frames[data-device="mobile"][data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-frames[data-device="mobile"][data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pv-frames[data-device="mobile"]:not([data-count="1"]) > * { max-width: 430px; }
}
@media (min-width: 1000px) {
  .pv-frames[data-device="tablet"][data-count="2"], .pv-frames[data-device="tablet"][data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .pv-frames[data-device="desktop"][data-count="2"], .pv-frames[data-device="desktop"][data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-frames[data-device="tablet"][data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.device-frame { display: grid; gap: 8px; margin: 0; }
.device-frame__bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 800; color: var(--shk-ink-700); flex-wrap: wrap; }
.device-frame__bar a { font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; padding-block: 6px; }
.device-frame__bar a svg { width: 14px; height: 14px; }
.device-frame__meta { font-size: 12px; color: var(--shk-ink-500); font-weight: 600; direction: ltr; unicode-bidi: isolate; }
.device-frame__viewport { position: relative; overflow: hidden; width: 100%; background: transparent; }
.device-frame__viewport iframe {
  position: absolute; inset-block-start: 0; inset-inline-start: calc(50% - var(--frame-w, 100%) / 2);
  transform-origin: top right; border: 0; background: #fff;
  box-shadow: 0 0 0 1px var(--shk-line-strong), var(--shk-shadow-3); border-radius: 6px;
}
.device-frame--mobile .device-frame__viewport iframe { border-radius: 26px; box-shadow: 0 0 0 10px #1B1F1D, var(--shk-shadow-3); inset-block-start: 10px; }
.device-frame--tablet .device-frame__viewport iframe { border-radius: 18px; box-shadow: 0 0 0 10px #1B1F1D, var(--shk-shadow-3); inset-block-start: 10px; }

/* Feature cards (module-specific explanations) */
.fcards { display: grid; gap: 16px; }
@media (min-width: 1100px) { .fcards--3 { grid-template-columns: 1.2fr 1fr .9fr; } }
@media (min-width: 760px) and (max-width: 1099px) { .fcards--3 { grid-template-columns: 1fr 1fr; } }
.fcard { border: 1px solid var(--shk-line); border-radius: 18px; padding: 20px; display: grid; gap: 10px; align-content: start; background: var(--shk-surface); }
.fcard h3 { font-size: 17px; font-weight: 800; }
.fcard ul { padding-inline-start: 18px; display: grid; gap: 6px; font-size: 14px; color: var(--shk-ink-700); }
.try-list { list-style: none; padding: 0 !important; }
.try-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-block: 6px; border-block-end: 1px solid var(--shk-line); }
.try-list li:last-child { border-block-end: 0; }
.sub-title { font-size: var(--shk-fs-2xl); font-weight: 800; margin-block: 36px 8px; }

/* Evaluation matrix */
.matrix { min-width: 760px; font-size: 14px; background: #fff; }
.matrix th, .matrix td { padding: 12px; border-block-end: 1px solid var(--shk-line); text-align: start; vertical-align: middle; }
.matrix thead th { background: var(--shk-green-900); color: #fff; font-weight: 800; position: sticky; top: 0; z-index: 1; }
.matrix tbody th { font-weight: 700; width: 24%; }
.matrix td.is-best { background: var(--shk-green-50); }
.matrix__note { color: var(--shk-ink-500); font-size: 13px; width: 34%; }
.matrix tfoot th, .matrix tfoot td { font-size: 15px; background: var(--shk-surface-sunken); font-weight: 800; }
.matrix tr.is-group th[scope="row"] { background: var(--shk-gold-100); }
.matrix--text td { font-size: 13.5px; vertical-align: top; }
.matrix--text tbody th { width: 18%; }
.matrix-legend { font-size: 13px; color: var(--shk-ink-500); margin-block-start: 8px; }

/* Recommendation */
.rec { display: grid; gap: 32px; }
@media (min-width: 1024px) { .rec { grid-template-columns: 1.4fr 1fr; } }
.rec h2 { font-size: var(--shk-fs-3xl); }
.rec__title { font-size: var(--shk-fs-xl); color: var(--shk-gold-500); font-weight: 800; }
.rec p, .rec li { color: var(--shk-on-dark-muted); font-size: 15.5px; line-height: 1.9; }
.rec strong { color: #fff; }
.rec ol { padding-inline-start: 22px; margin-block: 12px; display: grid; gap: 8px; }
.rec__main { display: grid; gap: 12px; align-content: start; }
.rec__side { border: 1px solid rgba(209, 191, 112, .35); border-radius: 20px; padding: 22px; display: grid; gap: 12px; align-content: start; background: rgba(255, 255, 255, .03); }
.rec__side h3 { color: var(--shk-gold-500); font-size: 16px; font-weight: 800; }
.rec__side ul { padding-inline-start: 18px; display: grid; gap: 6px; }
.rec__side li { font-size: 14px; }
.rec__fine { font-size: 14px; background: rgba(209, 191, 112, .12); border-radius: var(--shk-r-md); padding: 10px 12px; color: #fff; }

/* Root page: thin stage strip under header on module pages */
.stage-strip { background: var(--shk-green-950); color: var(--shk-on-dark-muted); font-size: 13px; }
.stage-strip__inner { display: flex; align-items: center; gap: 6px 14px; min-height: 40px; overflow-x: auto; scrollbar-width: none; }
.stage-strip__inner::-webkit-scrollbar { display: none; }
.stage-strip a { color: var(--shk-on-dark-muted); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px; font-weight: 700; }
.stage-strip a:hover { color: #fff; }
.stage-strip a[aria-current="page"] { color: var(--shk-gold-500); }
.stage-strip svg { width: 14px; height: 14px; opacity: .6; }