/*
 * Solutions page (/solutions/): scenario index, one mock of the enterprise app
 * per scenario, and the Studio / enterprise responsibility split.
 * Tokens and hp-* components come from public.css.
 */

/* ---------- Hero: scenario index ---------- */
.sl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.1vw, 22px); margin: clamp(40px, 4vw, 80px) 0 0; font-size: clamp(13px, .86vw, 16px); }
.sl-tile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .9em; row-gap: .3em; padding: 1.3em 1.35em; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); background: #fff; box-shadow: 0 3px 14px rgba(49, 67, 48, .025); transition: border-color .18s ease; }
.sl-tile__icon { grid-row: span 2; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; color: var(--hp-jade); background: var(--hp-tint); }
.sl-tile__icon .hp-ico { font-size: 1.2em; }
.sl-tile strong { color: var(--hp-ink); font-size: 1.04em; font-weight: 500; }
.sl-tile__q { grid-column: 2; color: var(--hp-muted); font-size: max(12px, .84em); word-break: keep-all; overflow-wrap: anywhere; }
.sl-tile__go { grid-column: 3; grid-row: 1 / span 2; color: #a9b8af; font-size: 1.05em; transform: rotate(90deg); transition: color .18s ease; }
.sl-tile:hover { border-color: #b9d6ca; }
.sl-tile:hover .sl-tile__go { color: var(--hp-jade); }
.sl-tile:focus-visible { outline: 2px solid #31866f; outline-offset: 3px; }

/* ---------- Match pricing's heading rhythm (eyebrow tracking + gaps) ---------- */
.solutions-page .hp-eyebrow, .solutions-page .hp-kicker { letter-spacing: .18em; }
.solutions-page .hp-head { gap: 12px; }
.solutions-page .hp-head .hp-lead { margin-top: 2px; }

/* ---------- Pointer to the developer docs, under the scenario cards ---------- */
.sl-docs-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4em 1.2em; margin: clamp(22px, 2vw, 32px) 0 0; color: var(--hp-muted); font-size: 14px; line-height: 1.8; text-align: center; }

/* ---------- Hero value points: three claims, filled but restrained ---------- */
.sl-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: 100%; margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hp-line); }
.sl-points li { display: grid; gap: .35em; padding: clamp(16px, 1.4vw, 22px) clamp(20px, 2vw, 32px) 0; color: var(--hp-muted); font-size: 13px; line-height: 1.7; text-align: left; }
.sl-points li + li { border-left: 1px solid var(--hp-line-soft); }
.sl-points li:first-child { padding-left: 0; }
.sl-points strong { display: block; color: var(--hp-ink); font-size: 14px; font-weight: 500; }

/* ---------- Tighten vertical rhythm across the page (denser, pricing-like) ---------- */
.solutions-page .pg-hero { padding-bottom: clamp(32px, 3.2vw, 52px); }
.solutions-page main .hp-section { padding-top: clamp(40px, 4vw, 64px); padding-bottom: clamp(40px, 4vw, 64px); }

/* ---------- Feature scenario: one deep example (copy + live mock) ---------- */
.sl-feature__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(32px, 3.4vw, 60px); }
.sl-feature .sl-case__copy { justify-self: end; }
.sl-feature .sl-mock { justify-self: start; }

/* ---------- More scenarios: three cards, each grouped like a pricing card ---------- */
.sl-scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.sl-scene { display: grid; grid-template-rows: auto auto auto auto; align-content: start; padding: 29px 28px 27px; border: 1px solid var(--hp-line); border-radius: 14px; background: #fff; box-shadow: 0 3px 14px rgba(49, 67, 48, .024); }
/* Normalise the question block height so 返回 / 依据 rows line up across the three cards. */
.sl-scene__group:nth-of-type(1) .sl-scene__q { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.9em; }
.sl-scene__top { display: flex; align-items: center; gap: .6em; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #edf0eb; }
.sl-scene__top .sl-scene__icon { display: inline-flex; color: #7e978c; }
.sl-scene__top .hp-ico { width: 18px; height: 18px; stroke-width: 1.5; }
.sl-scene__top h3 { margin: 0; color: var(--hp-ink); font-family: var(--hp-serif); font-size: 20px; font-weight: 500; line-height: 1.4; }
.sl-scene__group + .sl-scene__group { margin-top: 0; padding-top: 19px; border-top: 1px solid #edf0eb; }
.sl-scene__label { margin: 0 0 9px; color: #7b847c; font-size: 11px; font-weight: 400; letter-spacing: .06em; }
.sl-scene__q { margin: 0; color: var(--hp-ink); font-size: 14px; font-weight: 500; line-height: 1.6; }
.sl-scene__a { margin: 0; color: #4e5850; font-size: 14px; line-height: 1.6; }
.sl-scene__tag { margin: 8px 0 0; padding: .2em .6em; border-radius: 6px; color: var(--hp-jade-deep); background: var(--hp-tint); font-family: var(--hp-mono); font-size: 12px; line-height: 18px; width: fit-content; }
.sl-scene__src { margin: 0; color: var(--hp-muted); font-size: 13px; line-height: 1.6; }
.sl-scene__next { margin: 0; color: var(--hp-text); font-size: 13px; line-height: 1.6; }

/* ---------- Scenario sections ---------- */
/* Tighten the section rhythm: the default hp-section padding (up to 124px) makes
   the page long and sparse; scoped down here for a denser, pricing-like feel. */
.solutions-page .sl-case.hp-section { padding-top: clamp(40px, 4vw, 68px); padding-bottom: clamp(40px, 4vw, 68px); }
.sl-case { scroll-margin-top: 72px; }
.sl-case + .sl-case { border-top: 1px solid var(--hp-line-soft); }
.sl-case--white { background: #fff; }
.sl-case__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 5.4vw, 128px); }
.sl-case--flip .sl-case__copy { order: 2; }
.sl-case__copy { display: grid; justify-items: start; gap: clamp(12px, 1vw, 18px); width: 100%; max-width: 38em; font-size: var(--hp-fs-body); }
.sl-case--flip .sl-case__copy { justify-self: end; }
.sl-flow { display: grid; width: 100%; margin: clamp(10px, 1vw, 20px) 0 0; padding: 0; border-top: 1px solid var(--hp-line); list-style: none; }
.sl-flow li { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 1em; padding: clamp(12px, .95vw, 17px) 0; border-bottom: 1px solid var(--hp-line-soft); }
.sl-flow span { color: var(--hp-label); font-size: var(--hp-fs-small); letter-spacing: .04em; line-height: 1.75; }
.sl-flow p { margin: 0; color: var(--hp-text); font-size: var(--hp-fs-body); line-height: 1.7; }
.sl-flow li:last-child p { color: var(--hp-muted); }

/* The enterprise application, drawn in HTML so it stays sharp at any size. */
.sl-mock { width: 100%; max-width: 36em; margin: 0; justify-self: end; font-size: clamp(13px, .9vw, 17px); }
.sl-case--flip .sl-mock { justify-self: start; }
.sl-mock__win { overflow: hidden; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); background: #fff; box-shadow: 0 3px 14px rgba(49, 67, 48, .025); }
.sl-mock__bar { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .9em 1.2em; border-bottom: 1px solid var(--hp-line-soft); background: #fbfcfa; }
.sl-mock__app { display: inline-flex; align-items: center; gap: .6em; color: var(--hp-ink); font-size: max(12px, .95em); font-weight: 500; }
.sl-mock__app .hp-ico { color: var(--hp-jade); font-size: 1.15em; }
.sl-mock__meta { color: var(--hp-faint); font-size: max(12px, .78em); white-space: nowrap; }
.sl-mock__body { display: grid; gap: .85em; padding: 1.3em 1.2em 1.25em; }
.sl-mock__body .hp-msg { max-width: 82%; }
.sl-answer { display: grid; justify-items: start; gap: .7em; width: 100%; }
.sl-answer .hp-msg { max-width: 90%; }
.sl-mock__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .55em; padding: .85em 1.2em; border-top: 1px solid var(--hp-line-soft); }
.sl-mock__hand { margin-right: auto; color: var(--hp-faint); font-size: max(12px, .76em); }
.sl-act { padding: .45em .95em; border: 1px solid #d9e4df; border-radius: 8px; color: #415e52; font-size: max(12px, .8em); font-weight: 500; white-space: nowrap; }
.sl-act--primary { border-color: transparent; color: #fff; background: var(--hp-button); }
.sl-mock figcaption { margin-top: .8em; color: var(--hp-faint); font-size: max(12px, .76em); text-align: center; }

.sl-card { width: 100%; padding: 1em 1.1em 1.05em; border: 1px solid var(--hp-line); border-radius: 12px; background: #fff; }
.sl-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-bottom: 1em; color: var(--hp-faint); font-size: max(12px, .78em); }
.sl-card__head strong { color: var(--hp-ink); font-size: 1.18em; font-weight: 500; }
.sl-ref { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin: 1em 0 0; padding-top: .85em; border-top: 1px dashed var(--hp-line); color: var(--hp-muted); font-size: max(12px, .78em); }
.sl-ref .hp-ico { color: var(--hp-icon); font-size: 1.15em; }
.sl-ref code { padding: .12em .5em; border-radius: 5px; color: var(--hp-jade-deep); background: var(--hp-tint); font-size: max(12px, .95em); }

.sl-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.sl-timeline li { position: relative; display: grid; gap: .2em; padding: 1.25em .5em 0 0; }
.sl-timeline li::before { content: ""; position: absolute; top: .3em; left: 0; right: 0; height: 2px; background: var(--hp-line); }
.sl-timeline li::after { content: ""; position: absolute; top: 0; left: 0; width: .62em; height: .62em; border: 2px solid #fff; border-radius: 50%; background: #9fc5b6; box-shadow: 0 0 0 1px #9fc5b6; }
.sl-timeline li.is-done::before { background: #b5d5c8; }
.sl-timeline li.is-current::after { background: var(--hp-jade); box-shadow: 0 0 0 1px var(--hp-jade); }
.sl-timeline strong { color: var(--hp-ink); font-size: max(12px, .92em); font-weight: 500; }
.sl-timeline small { color: var(--hp-faint); font-family: var(--hp-num); font-size: max(12px, .76em); font-variant-numeric: tabular-nums; }

.sl-products { display: grid; gap: .6em; width: 100%; }
.sl-product { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9em; padding: .75em .8em; border: 1px solid var(--hp-line); border-radius: 12px; background: #fff; }
.sl-product__img { display: grid; place-items: center; width: 3.6em; height: 3.6em; overflow: hidden; border-radius: 10px; color: #5d7a6c; background: #eef2ee; }
.sl-product__img .hp-ico { font-size: 1.85em; stroke-width: 1.3; }
.sl-product__img img { display: block; width: 100%; height: 100%; padding: 6%; object-fit: contain; }
.sl-product__info { display: grid; gap: .2em; min-width: 0; }
.sl-product__info strong { color: var(--hp-ink); font-size: max(12px, .95em); font-weight: 500; }
.sl-product__info small { color: var(--hp-faint); font-family: var(--hp-num); font-size: max(12px, .74em); font-variant-numeric: tabular-nums; }
.sl-product__info p { margin: 0; color: var(--hp-muted); font-size: max(12px, .78em); line-height: 1.55; }
.sl-product__price { align-self: start; color: var(--hp-ink); font-family: var(--hp-num); font-size: 1em; font-weight: 600; font-variant-numeric: tabular-nums; }

.sl-list { display: grid; gap: .55em; margin: 0; padding: 0; list-style: none; }
.sl-list li { display: flex; align-items: center; gap: .6em; color: var(--hp-text); font-size: max(12px, .92em); }
.sl-list .hp-ico { color: var(--hp-jade); stroke-width: 1.8; }

.sl-bars { display: grid; gap: .75em; }
.sl-bar { display: grid; grid-template-columns: 5.6em minmax(0, 1fr) 3.4em; align-items: center; gap: .8em; font-size: max(12px, .86em); }
.sl-bar span { color: var(--hp-text); white-space: nowrap; }
.sl-bar i { height: .55em; overflow: hidden; border-radius: 99px; background: var(--hp-line-soft); }
.sl-bar i::before { content: ""; display: block; width: var(--v); height: 100%; border-radius: inherit; background: #5fa58c; }
.sl-bar b { color: var(--hp-ink); font-family: var(--hp-num); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Responsibility split ---------- */
.sl-control { border-top: 1px solid var(--hp-line-soft); }
.sl-split { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: clamp(16px, 2vw, 40px); font-size: clamp(13px, .86vw, 16px); }
.sl-side { display: grid; align-content: start; gap: 1.3em; padding: clamp(24px, 2.2vw, 42px); border: 1px solid var(--hp-line); border-radius: var(--hp-radius); background: #fff; }
.sl-side--studio { border-color: var(--hp-line); background: #fff; }
.sl-side__label { display: flex; align-items: baseline; gap: .5em; margin: 0; color: var(--hp-muted); font-size: 1em; }
.sl-side__label strong { color: var(--hp-ink); font-family: var(--hp-serif); font-size: 1.5em; font-weight: 500; }
.sl-side .hp-checks { margin: 0; }
.sl-bridge { position: relative; display: grid; align-content: center; justify-items: center; gap: .6em; min-width: 7.5em; }
.sl-bridge::before { content: ""; position: absolute; top: 50%; right: calc(clamp(16px, 2vw, 40px) * -1); left: calc(clamp(16px, 2vw, 40px) * -1); height: 1px; background: #c6d4cb; }
.sl-bridge span { position: relative; padding: .45em .9em; border: 1px solid var(--hp-line); border-radius: 999px; color: var(--hp-text); background: #fff; font-size: max(12px, .82em); white-space: nowrap; }
.sl-principles { --hp-cols: 3; margin-top: clamp(20px, 2vw, 40px); }
/* Downweight the three principles to a light footnote row, so the two split
   cards above stay the focus and the section stops feeling top-heavy. */
.sl-principles.hp-grid { border: 0; border-radius: 0; background: transparent; gap: clamp(20px, 2vw, 40px); }
.sl-principles.hp-grid > * { padding: 0; background: transparent; }
.sl-principles.hp-grid > * + * { border-left: 1px solid var(--hp-line-soft); padding-left: clamp(20px, 2vw, 40px); }
.sl-principles .hp-ico { color: #7e978c; font-size: 18px; }
.sl-principles strong { font-size: 14px; }
/* Data-security promises: the trust anchor enterprises look for, in plain terms. */
.sl-trust { margin-top: clamp(20px, 2vw, 36px); padding: clamp(20px, 1.8vw, 28px) clamp(22px, 2vw, 32px); border: 1px solid #d6e7de; border-radius: var(--hp-radius); background: #f6faf7; }
.sl-trust__label { margin: 0 0 14px; color: var(--hp-jade-deep); font-size: 11px; font-weight: 400; letter-spacing: .12em; }
.sl-trust__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; margin: 0; padding: 0; list-style: none; }
.sl-trust__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6em; color: var(--hp-text); font-size: 14px; line-height: 1.6; }
.sl-trust__list .hp-ico { margin-top: .28em; color: var(--hp-jade); stroke-width: 1.8; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .sl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-case__grid, .sl-feature__grid { grid-template-columns: minmax(0, 1fr); }
  .sl-case--flip .sl-case__copy { order: 0; justify-self: start; }
  .sl-case__copy { max-width: 680px; }
  .sl-mock, .sl-case--flip .sl-mock, .sl-feature .sl-mock { justify-self: start; }
  .sl-scenes { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
}
@media (max-width: 900px) {
  .sl-split { grid-template-columns: minmax(0, 1fr); }
  .sl-bridge { grid-auto-flow: column; min-width: 0; padding: .4em 0; }
  .sl-bridge::before { top: calc(clamp(16px, 2vw, 40px) * -1); bottom: calc(clamp(16px, 2vw, 40px) * -1); right: auto; left: 50%; width: 1px; height: auto; }
  .sl-principles { --hp-cols: 1; }
  .sl-trust__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sl-tiles { grid-template-columns: minmax(0, 1fr); }
  .sl-flow li { grid-template-columns: 6em minmax(0, 1fr); gap: .8em; }
  .sl-mock__meta { display: none; }
  .sl-timeline li { padding-right: .3em; }
}