/* Hallmark · macrostructure: Workbench · genre: modern-minimal · tone: utilitarian · anchor: cobalt + yellow · pre-emit critique: P4 H5 E5 S5 R4 V4 · mobile/contrast/honest-copy: pass */
/* TCD Switch opens .l-main and adds a generic title before plugin templates.
   Hide only that direct child on use-case routes; the plugin owns its H1. */
body.post-type-archive-use_case .l-main > .single-title,
body.single-use_case .l-main > .single-title,
body.tax-suc_document .l-main > .single-title,
body.tax-suc_pain .l-main > .single-title,
body.tax-suc_industry .l-main > .single-title { display: none; }

.sdx-use-cases {
  --suc-yellow: #f4cf2f;
  --suc-yellow-soft: #fff8d8;
  --suc-blue: #2059bd;
  --suc-blue-ink: #fff;
  --suc-blue-dark: #0f2c5c;
  --suc-blue-soft: #edf4ff;
  --suc-ink: #17243a;
  --suc-muted: #596579;
  --suc-line: #dce2eb;
  --suc-line-shell: #cad5e5;
  --suc-line-strong: #b8c5d8;
  --suc-line-hover: #809bc6;
  --suc-line-soft-blue: #b8c8e2;
  --suc-proof-line: #e5d36f;
  --suc-proof-fill: rgba(255, 255, 255, .86);
  --suc-disabled: #8993a2;
  --suc-surface: #f6f8fb;
  --suc-white: #fff;
  --suc-green: #147a5a;
  --suc-radius: 18px;
  --suc-shadow: 0 14px 40px rgba(15, 44, 92, .09);
  --suc-shadow-guide: 0 1rem 2.75rem rgba(15, 44, 92, .08);
  --suc-shadow-selected: 0 .4rem 1rem rgba(32, 89, 189, .18);
  --suc-sticky-offset: 4.5rem;
  color: var(--suc-ink);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  overflow: clip;
}

html:has(.sdx-use-cases), body:has(.sdx-use-cases) { overflow-x: clip; }
.sdx-use-cases *, .sdx-use-cases *::before, .sdx-use-cases *::after { box-sizing: border-box; }
.sdx-use-cases [hidden] { display: none !important; }
.sdx-use-cases img { display: block; max-width: 100%; }
.sdx-use-cases a { color: inherit; }
.sdx-use-cases button, .sdx-use-cases input, .sdx-use-cases select { font: inherit; }
.sdx-use-cases button { cursor: pointer; }
.sdx-use-cases :focus-visible { outline: 3px solid var(--suc-blue); outline-offset: 3px; }
.suc-container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.suc-kicker { margin: 0 0 10px; color: var(--suc-blue); font-size: 13px; font-weight: 900; letter-spacing: .14em; }

.suc-breadcrumbs { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 34px; color: var(--suc-muted); font-size: 13px; }
.suc-breadcrumbs a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.suc-breadcrumbs span:last-child { max-width: min(60ch, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.suc-hero { position: relative; padding: 42px 0 60px; background: linear-gradient(145deg, #fffdf5 0 54%, #f7f9fc 54%); border-bottom: 1px solid var(--suc-line); }
.suc-hero .suc-container { container: suc-hero / inline-size; }
.suc-hero::after { position: absolute; right: max(4vw, 20px); bottom: -35px; width: 150px; height: 150px; border: 26px solid rgba(244, 207, 47, .36); border-radius: 50%; content: ""; pointer-events: none; }
.suc-hero h1, .suc-single h1, .suc-taxonomy h1 { min-width: 0; max-width: 900px; margin: 0; color: var(--suc-blue-dark); font-size: clamp(34px, 5vw, 62px); font-weight: 900; letter-spacing: -.04em; line-height: 1.18; overflow-wrap: anywhere; }
.suc-hero__lead { max-width: 770px; margin: 22px 0 0; color: var(--suc-muted); font-size: clamp(16px, 2vw, 19px); font-weight: 600; line-height: 1.9; }
.suc-proof-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .625rem; max-inline-size: 48rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.suc-proof-list li { display: flex; min-width: 0; min-block-size: 3.25rem; align-items: center; justify-content: center; padding: .625rem 1rem; border: 1px solid var(--suc-proof-line); border-radius: 999px; background: var(--suc-proof-fill); color: var(--suc-blue-dark); font-size: .8125rem; font-weight: 800; line-height: 1.45; text-align: center; overflow-wrap: anywhere; }
.suc-proof-list b { margin-right: .125rem; font-size: 1.25em; font-variant-numeric: tabular-nums; line-height: 1; }

.suc-search-section { padding: 48px 0 90px; background: var(--suc-white); }
.suc-search-box { position: relative; z-index: 2; margin: 0 0 32px; padding: 26px; border: 1px solid var(--suc-line); border-radius: var(--suc-radius); background: var(--suc-white); box-shadow: var(--suc-shadow); }
.suc-search-box > label { display: block; margin-bottom: 8px; color: var(--suc-blue-dark); font-size: 14px; font-weight: 900; }
.suc-search-builder { container: suc-guide / inline-size; overflow: hidden; padding: clamp(1.25rem, 2.7vw, 2rem); border-color: var(--suc-line-shell); box-shadow: var(--suc-shadow-guide); }
.suc-search-builder::before { position: absolute; inset: 0 0 auto; block-size: .25rem; background: linear-gradient(90deg, var(--suc-yellow) 0 24%, var(--suc-blue) 24% 100%); content: ""; }
.suc-search-builder__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: end; }
.suc-search-builder__head h2 { margin: 0; color: var(--suc-blue-dark); font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.35; }
.suc-search-builder__head p:not(.suc-kicker, .suc-search-builder__count) { max-width: 44rem; margin: .65rem 0 0; color: var(--suc-muted); font-size: .9375rem; line-height: 1.7; }
.suc-search-builder__count { min-width: max-content; margin: 0; padding: .55rem .8rem; border-radius: .625rem; background: var(--suc-blue-soft); color: var(--suc-blue-dark); font-size: .8125rem; font-weight: 800; line-height: 1.3; }
.suc-search-builder__count strong { margin-right: .125rem; color: var(--suc-blue); font-size: 1.35em; font-variant-numeric: tabular-nums; }
.suc-guide-mode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .375rem; margin-top: 1.5rem; padding: .375rem; border: 1px solid var(--suc-line); border-radius: .875rem; background: var(--suc-surface); }
.suc-guide-mode button { display: inline-flex; min-width: 0; min-block-size: 3rem; align-items: center; justify-content: center; padding: .65rem .8rem; border: 1px solid transparent; border-radius: .625rem; background: transparent; color: var(--suc-muted); font-size: .875rem; font-weight: 900; line-height: 1.2; text-align: center; white-space: nowrap; }
.suc-guide-mode button:hover:not(:disabled) { border-color: var(--suc-line-soft-blue); background: var(--suc-white); color: var(--suc-blue-dark); }
.suc-guide-mode button:active:not(:disabled) { border-color: var(--suc-blue); background: var(--suc-blue-soft); color: var(--suc-blue-dark); }
.suc-guide-mode button:disabled { opacity: .55; cursor: not-allowed; }
.suc-guide-mode button[aria-selected="true"] { border-color: var(--suc-blue); background: var(--suc-blue); color: var(--suc-blue-ink); box-shadow: var(--suc-shadow-selected); }
.suc-guide-mode button[aria-selected="true"]:active { background: var(--suc-blue-dark); color: var(--suc-blue-ink); }
.suc-guide-selects { display: grid; grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr) 2rem minmax(0, 1fr); gap: .75rem; align-items: end; margin-top: 1.35rem; }
.suc-guide-field { display: flex; min-width: 0; flex-direction: column; gap: .55rem; color: var(--suc-blue-dark); font-size: .8125rem; font-weight: 900; line-height: 1.45; }
.suc-guide-field > span { display: block; min-width: 0; overflow-wrap: anywhere; }
.suc-guide-field select { width: 100%; min-width: 0; min-block-size: 3.5rem; padding: .65rem 2.75rem .65rem .875rem; border: 1px solid var(--suc-line-strong); border-radius: .75rem; outline: 2px solid transparent; outline-offset: 1px; background-color: var(--suc-white); color: var(--suc-ink); font-size: 1rem; line-height: 1.45; text-overflow: ellipsis; transition: border-color .18s, background-color .18s; }
.suc-guide-field select:hover:not(:disabled) { border-color: var(--suc-line-hover); }
.suc-guide-field select:focus-visible { border-color: var(--suc-blue); outline-color: var(--suc-blue); }
.suc-guide-field select:active:not(:disabled) { border-color: var(--suc-blue-dark); }
.suc-guide-field select:disabled { border-color: var(--suc-line); background-color: var(--suc-surface); color: var(--suc-disabled); opacity: .55; cursor: not-allowed; }
.suc-guide-arrow { display: grid; min-block-size: 3.5rem; place-items: center; color: var(--suc-blue); font-size: 1.35rem; font-weight: 900; line-height: 1; }
.suc-guide-help { margin: 1rem 0 0; color: var(--suc-muted); font-size: .8125rem; line-height: 1.65; }
.suc-keyword-details { margin-top: 1rem; border-top: 1px solid var(--suc-line); }
.suc-keyword-details summary { width: fit-content; padding: 1rem 0 .25rem; color: var(--suc-blue-dark); font-size: .875rem; font-weight: 900; cursor: pointer; }
.suc-keyword-details > label { display: block; margin: 1rem 0 .5rem; color: var(--suc-blue-dark); font-size: .875rem; font-weight: 900; }
.suc-keyword-details .suc-popular { margin-bottom: .25rem; }
.suc-search-input { position: relative; display: flex; align-items: center; }
.suc-search-input svg { position: absolute; left: 18px; width: 24px; height: 24px; fill: none; stroke: var(--suc-blue); stroke-linecap: round; stroke-width: 2; pointer-events: none; }
.suc-search-input input { width: 100%; height: 60px; padding: 0 54px; border: 2px solid #b8c5d8; border-radius: 12px; background: #fff; color: var(--suc-ink); font-size: 17px; transition: border-color .18s, box-shadow .18s; }
.suc-search-input input:focus { border-color: var(--suc-blue); box-shadow: 0 0 0 4px rgba(32, 89, 189, .12); outline: 0; }
.suc-input-clear { position: absolute; right: 12px; display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; background: var(--suc-surface); color: var(--suc-muted); font-size: 22px; line-height: 1; }
.suc-popular { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 13px; color: var(--suc-muted); font-size: 13px; }
.suc-popular button { padding: 4px 10px; border: 1px solid var(--suc-line); border-radius: 999px; background: #fff; color: var(--suc-blue); font-size: 13px; font-weight: 700; }
.suc-popular button:hover { border-color: var(--suc-blue); background: var(--suc-blue-soft); }

@container suc-guide (max-width: 56rem) {
  .suc-search-builder__head { grid-template-columns: 1fr; align-items: start; }
  .suc-search-builder__count { width: fit-content; min-width: 0; }
  .suc-guide-selects { grid-template-columns: 1fr; gap: .75rem; align-items: stretch; }
  .suc-guide-arrow { min-block-size: auto; transform: rotate(90deg); }
}

@container suc-guide (max-width: 36rem) {
  .suc-guide-mode { grid-template-columns: 1fr; }
  .suc-guide-mode button { justify-content: flex-start; padding-inline: .65rem; font-size: .75rem; text-align: left; }
}

@container suc-hero (max-width: 42rem) {
  .suc-proof-list { grid-template-columns: 1fr; max-inline-size: 27rem; }
}

.suc-search-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 34px; align-items: start; }
.suc-filter-panel { position: sticky; top: calc(var(--suc-sticky-offset) + 1.5rem); max-height: calc(100vh - var(--suc-sticky-offset) - 3rem); padding: 22px; overflow-y: auto; border: 1px solid var(--suc-line); border-radius: 16px; background: var(--suc-surface); scrollbar-width: thin; }
.suc-filter-panel__head { display: flex; justify-content: space-between; align-items: center; }
.suc-filter-panel__head h2 { margin: 0; color: var(--suc-blue-dark); font-size: 19px; }
.suc-filter-panel__head button { display: none; border: 0; background: transparent; color: var(--suc-muted); font-size: 28px; }
.suc-filter-help { margin: 8px 0 18px; color: var(--suc-muted); font-size: 12px; line-height: 1.6; }
.suc-filter-group { margin: 0; padding: 18px 0; border: 0; border-top: 1px solid var(--suc-line); }
.suc-filter-group legend { margin-bottom: 10px; color: var(--suc-blue-dark); font-size: 14px; font-weight: 900; }
.suc-filter-group > div { display: grid; gap: 3px; }
.suc-filter-group label { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: start; min-height: 35px; padding: 5px 2px; border-radius: 6px; color: #324157; font-size: 13px; line-height: 1.45; cursor: pointer; }
.suc-filter-group label:hover { background: #fff; }
.suc-filter-group input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--suc-blue); }
.suc-filter-group input:disabled + span { color: #9aa3b1; }
.suc-filter-group small { min-width: 24px; color: #788396; text-align: right; }
.suc-advanced { border-top: 1px solid var(--suc-line); }
.suc-advanced summary { padding: 17px 0 12px; color: var(--suc-blue); font-size: 14px; font-weight: 900; cursor: pointer; }
.suc-filter-actions { display: grid; gap: 9px; padding-top: 16px; border-top: 1px solid var(--suc-line); }
.suc-filter-apply { display: none !important; }
.suc-mobile-filter-button { display: none; }

.suc-results { min-width: 0; }
.suc-results__head { display: flex; gap: 20px; justify-content: space-between; align-items: flex-start; min-height: 58px; margin-bottom: 18px; }
.suc-result-count { margin: 0; color: var(--suc-muted); }
.suc-result-count strong { margin-right: 4px; color: var(--suc-blue-dark); font-size: 28px; }
.suc-sort { display: flex; gap: 8px; align-items: center; color: var(--suc-muted); font-size: 13px; white-space: nowrap; }
.suc-sort select { min-width: 150px; height: 42px; padding: 0 34px 0 12px; border: 1px solid var(--suc-line); border-radius: 8px; background: #fff; color: var(--suc-ink); }
.suc-selected { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.suc-selected button { padding: 4px 9px; border: 1px solid #a9bee4; border-radius: 999px; background: var(--suc-blue-soft); color: var(--suc-blue-dark); font-size: 12px; font-weight: 700; }
.suc-selected button span { margin-left: 5px; }
.suc-selected .suc-copy-url { border-style: dashed; background: #fff; color: var(--suc-blue); }

.suc-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.suc-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--suc-line); border-radius: var(--suc-radius); background: #fff; box-shadow: 0 5px 20px rgba(15, 44, 92, .055); transition: transform .2s, border-color .2s, box-shadow .2s; }
.suc-card:hover { transform: translateY(-3px); border-color: #b9c9e5; box-shadow: var(--suc-shadow); }
.suc-card__media { display: block; padding: 24px; background: linear-gradient(135deg, #edf3fb, #fff8d8); text-decoration: none; }
.suc-card__body { display: flex; flex: 1; flex-direction: column; padding: 22px; }
.suc-evidence { display: flex; gap: 7px; align-items: center; margin-bottom: 14px; color: var(--suc-green); font-size: 11px; font-weight: 900; letter-spacing: .02em; }
.suc-evidence span { width: 8px; height: 8px; border-radius: 50%; background: #29a97d; box-shadow: 0 0 0 4px #ddf5ec; }
.suc-card__eyebrow { margin: 0 0 5px; color: var(--suc-blue); font-size: 12px; font-weight: 900; }
.suc-card__title { margin: 0; color: var(--suc-blue-dark); font-size: 20px; line-height: 1.48; }
.suc-card__title a { text-decoration: none; }
.suc-card__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.suc-card__situation { display: -webkit-box; min-height: 78px; margin: 12px 0 14px; overflow: hidden; color: var(--suc-muted); font-size: 14px; line-height: 1.75; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.suc-tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 15px; padding: 0; list-style: none; }
.suc-tag-list li { padding: 4px 8px; border-radius: 5px; background: var(--suc-surface); color: #4f5c70; font-size: 11px; font-weight: 700; }
.suc-mini-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 5px; align-items: center; margin: auto 0 14px; padding: 10px; border-radius: 9px; background: var(--suc-yellow-soft); color: #4a4b43; font-size: 10px; line-height: 1.35; }
.suc-mini-flow span { overflow-wrap: anywhere; }
.suc-mini-flow b { color: var(--suc-blue); }
.suc-card__related { margin: 0 0 8px; color: var(--suc-green); font-size: 11px; font-weight: 700; }
.suc-text-link { width: fit-content; color: var(--suc-blue) !important; font-size: 14px; font-weight: 900; text-decoration: none; }
.suc-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.suc-doc-thumb { position: relative; display: grid; min-height: 185px; place-items: center; overflow: hidden; border-radius: 12px; background: rgba(255, 255, 255, .58); }
.suc-doc-thumb::before, .suc-doc-thumb::after { position: absolute; border-radius: 50%; content: ""; opacity: .65; }
.suc-doc-thumb::before { top: -35px; right: -25px; width: 115px; height: 115px; background: var(--suc-yellow); }
.suc-doc-thumb::after { bottom: -50px; left: -25px; width: 125px; height: 125px; border: 22px solid var(--suc-blue); }
.suc-doc-thumb--has-image { padding: 12px; background: linear-gradient(145deg, #edf3fb, #fff8d6); }
.suc-doc-thumb--has-image::before, .suc-doc-thumb--has-image::after { opacity: .24; }
.suc-doc-thumb img { position: relative; z-index: 1; width: 100%; height: 220px; border: 1px solid #d7dde7; border-radius: 4px; background: #fff; box-shadow: 0 10px 22px rgba(15, 44, 92, .16); object-fit: contain; object-position: center; }
.suc-doc-paper { position: relative; z-index: 1; width: 58%; min-width: 150px; max-width: 205px; padding: 20px 16px 15px; transform: rotate(-2deg); border: 1px solid #cbd3df; border-radius: 3px; background: #fff; box-shadow: 0 13px 30px rgba(15, 44, 92, .18); }
.suc-doc-mark { position: absolute; top: 10px; right: 10px; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--suc-yellow); color: var(--suc-blue-dark); font-size: 9px; font-weight: 900; }
.suc-doc-line { display: block; width: 100%; height: 5px; margin: 9px 0; border-radius: 3px; background: #dce3ec; }
.suc-doc-line--title { width: 58%; height: 8px; margin: 1px 0 17px; background: var(--suc-blue-dark); }
.suc-doc-line--short { width: 64%; }
.suc-doc-grid { display: block; height: 48px; margin: 12px 0; background: repeating-linear-gradient(0deg, #cbd3df 0 1px, transparent 1px 16px), repeating-linear-gradient(90deg, #cbd3df 0 1px, transparent 1px 34%); border: solid #cbd3df; border-width: 0 1px 1px 0; }
.suc-doc-thumb--checklist .suc-doc-grid, .suc-doc-thumb--quality .suc-doc-grid { background: repeating-linear-gradient(0deg, #cbd3df 0 1px, transparent 1px 16px), radial-gradient(circle at 9px 8px, var(--suc-blue) 0 3px, transparent 4px); }
.suc-doc-thumb--approval .suc-doc-mark { border-radius: 3px; background: #ef7b63; color: #fff; }
.suc-doc-thumb--order .suc-doc-line--title, .suc-doc-thumb--grid .suc-doc-line--title { background: #157860; }
.suc-doc-thumb--safety::before { background: #f3a82f; }
.suc-doc-thumb--customer::after, .suc-doc-thumb--training::after { border-color: #694fc4; }

.suc-loading { display: flex; gap: 10px; align-items: center; justify-content: center; min-height: 260px; color: var(--suc-muted); font-weight: 700; }
.suc-loading span { width: 22px; height: 22px; border: 3px solid var(--suc-line); border-top-color: var(--suc-blue); border-radius: 50%; animation: suc-spin .8s linear infinite; }
@keyframes suc-spin { to { transform: rotate(360deg); } }
.suc-load-failed .suc-loading { display: none; }
.suc-zero { padding: 45px; border: 1px dashed #aab7ca; border-radius: var(--suc-radius); background: var(--suc-surface); text-align: center; }
.suc-zero h2 { margin: 0 0 10px; color: var(--suc-blue-dark); font-size: 22px; }
.suc-zero p { color: var(--suc-muted); }
.suc-zero__options { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; align-items: center; margin: 14px 0; font-size: 13px; }
.suc-zero__options button { padding: 6px 10px; border: 1px solid #b8c8e2; border-radius: 999px; background: #fff; color: var(--suc-blue); font-weight: 700; }
.suc-noscript { padding: 14px; background: #fff3cd; }

.suc-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 11px 20px; border: 2px solid transparent; border-radius: 9px; font-weight: 900; line-height: 1.4; text-align: center; text-decoration: none; transition: transform .18s, box-shadow .18s, background .18s; }
.suc-button:hover { transform: translateY(-1px); }
.suc-button--primary { border-color: var(--suc-blue); background: var(--suc-blue); color: #fff !important; box-shadow: 0 8px 20px rgba(32, 89, 189, .18); }
.suc-button--primary:hover { background: var(--suc-blue-dark); }
.suc-button--secondary { border-color: #b7c2d2; background: #fff; color: var(--suc-blue-dark) !important; }
.suc-button--more { width: 100%; margin-top: 26px; border-color: var(--suc-blue); background: #fff; color: var(--suc-blue); }

.suc-bottom-cta { padding: 58px 0; background: var(--suc-blue-dark); color: #fff; }
.suc-bottom-cta__inner { display: flex; gap: 35px; justify-content: space-between; align-items: center; }
.suc-bottom-cta h2 { max-width: 720px; margin: 0; font-size: clamp(24px, 3vw, 36px); line-height: 1.45; }
.suc-bottom-cta p:not(.suc-kicker) { margin: 10px 0 0; color: #d8e3f5; }
.suc-bottom-cta .suc-kicker { color: var(--suc-yellow); }
.suc-bottom-cta .suc-button--primary { flex: 0 0 auto; border-color: var(--suc-yellow); background: var(--suc-yellow); color: var(--suc-blue-dark) !important; box-shadow: none; }

/* Single case */
.suc-single { padding: 42px 0 90px; background: #fff; }
.suc-single-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 60px; align-items: center; padding: 24px 0 65px; }
.suc-single-hero h1 { max-width: 800px; font-size: clamp(32px, 4.7vw, 56px); }
.suc-single-lead { max-width: 720px; margin: 22px 0; color: var(--suc-muted); font-size: 18px; font-weight: 600; }
.suc-case-id { margin: -4px 0 20px; color: var(--suc-muted); font-size: 12px; }
.suc-doc-thumb--single { min-height: 370px; background: linear-gradient(145deg, var(--suc-blue-soft), var(--suc-yellow-soft)); }
.suc-doc-thumb--single .suc-doc-paper { width: 70%; max-width: 260px; padding: 30px 22px 20px; }
.suc-doc-thumb--single.suc-doc-thumb--has-image { padding: 18px; }
.suc-doc-thumb--single.suc-doc-thumb--has-image img { height: 330px; }
.suc-detail-section { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 25px; align-items: start; margin: 0 0 24px; padding: 36px; border: 1px solid var(--suc-line); border-radius: var(--suc-radius); background: #fff; }
.suc-detail-section h2, .suc-related h2, .suc-case-cta h2 { margin: 0 0 12px; color: var(--suc-blue-dark); font-size: clamp(22px, 3vw, 31px); line-height: 1.4; }
.suc-detail-section p:not(.suc-section-number) { margin: 0; color: var(--suc-muted); font-size: 17px; }
.suc-section-number { display: block; margin: 0; padding-top: 0; color: var(--suc-yellow); font-size: 30px; font-variant-numeric: tabular-nums; font-weight: 900; line-height: 1.4; transform: translateY(-.22em); }
.suc-use-when { border-left: 7px solid var(--suc-yellow); background: var(--suc-yellow-soft); }
.suc-flow-section { grid-template-columns: 60px minmax(0, 1fr); }
.suc-flow-arrow { grid-column: 2; width: 40px; margin: 8px auto; color: var(--suc-blue); font-size: 28px; font-weight: 900; text-align: center; }
.suc-flow-after { grid-column: 2; padding: 24px; border-radius: 12px; background: var(--suc-blue-soft); }
.suc-flow-after > span { display: block; margin-bottom: 7px; color: var(--suc-blue); font-size: 13px; font-weight: 900; }
.suc-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.suc-detail-grid .suc-detail-section { height: calc(100% - 24px); }
.suc-feature-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 5px 0 0; padding: 0; list-style: none; }
.suc-feature-list li { padding: 7px 11px; border-radius: 6px; background: var(--suc-blue-soft); color: var(--suc-blue-dark); font-size: 13px; font-weight: 800; }
.suc-caution { border-color: #e9d77e; background: #fffdf3; }
.suc-related { padding: 65px 0; }
.suc-related__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 24px; }
.suc-related__grid a { display: flex; min-height: 150px; flex-direction: column; align-items: flex-start; padding: 25px; border: 1px solid var(--suc-line); border-radius: 14px; background: #fff; text-decoration: none; }
.suc-related__grid a:hover { border-color: var(--suc-blue); box-shadow: var(--suc-shadow); }
.suc-related__grid small { color: var(--suc-blue); font-weight: 900; }
.suc-related__grid strong { margin: 9px 0 auto; color: var(--suc-blue-dark); font-size: 19px; }
.suc-related__grid span { margin-top: 15px; color: var(--suc-blue); font-weight: 900; }
.suc-case-cta { margin-top: 25px; padding: 52px; border-radius: 24px; background: var(--suc-blue-dark); color: #fff; text-align: center; }
.suc-case-cta h2 { color: #fff; }
.suc-case-cta > p:not(.suc-kicker) { margin: 12px 0 28px; color: #d7e1f3; }
.suc-case-cta .suc-kicker { color: var(--suc-yellow); }
.suc-case-cta__buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.suc-case-cta .suc-button--primary { border-color: var(--suc-yellow); background: var(--suc-yellow); color: var(--suc-blue-dark) !important; }
.suc-case-cta .suc-button--secondary { border-color: #8293ae; background: transparent; color: #fff !important; }

/* Free-demo handoff */
.suc-demo-panel { max-width: 780px; margin: 42px auto 86px; padding: clamp(28px, 5vw, 56px); border: 1px solid var(--suc-line); border-radius: 24px; background: linear-gradient(145deg, #fff, #f4f8ff); box-shadow: var(--suc-shadow); }
.suc-demo-panel h1 { max-width: 18em; margin: 0; color: var(--suc-blue-dark); font-size: clamp(30px, 4vw, 46px); line-height: 1.3; }
.suc-demo-panel > p:not(.suc-kicker) { max-width: 46rem; margin: 18px 0 0; color: var(--suc-muted); font-size: 17px; }
.suc-demo-case { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; align-items: center; margin: 30px 0; padding: 20px; border: 1px solid #cdd9ea; border-radius: 14px; background: #fff; }
.suc-demo-case span { color: var(--suc-blue); font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.suc-demo-case strong { color: var(--suc-blue-dark); font-size: 18px; }
.suc-demo-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 30px 0; }
.suc-demo-step { min-height: 132px; padding: 18px; border-radius: 12px; background: var(--suc-blue-soft); }
.suc-demo-step b { display: block; color: var(--suc-yellow); font-size: 18px; line-height: 1.4; }
.suc-demo-step strong { display: block; margin-top: 7px; color: var(--suc-blue-dark); font-size: 15px; line-height: 1.5; }
.suc-demo-step span { display: block; margin-top: 7px; color: var(--suc-muted); font-size: 13px; line-height: 1.6; }
.suc-demo-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Curated taxonomy pages */
.suc-taxonomy-hero { padding: 42px 0 58px; background: linear-gradient(145deg, #fffdf5, #f1f6ff); }
.suc-taxonomy h1 { font-size: clamp(32px, 4.5vw, 54px); }
.suc-taxonomy-description { max-width: 760px; margin: 20px 0 25px; color: var(--suc-muted); font-size: 17px; }
.suc-taxonomy-results { padding: 55px 0 85px; }
.suc-taxonomy-results .suc-result-count { margin-bottom: 20px; }
.suc-taxonomy-results .suc-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.suc-taxonomy-results .nav-links { display: flex; gap: 8px; justify-content: center; margin-top: 35px; }
.suc-taxonomy-results .page-numbers { display: grid; min-width: 42px; height: 42px; place-items: center; padding: 0 9px; border: 1px solid var(--suc-line); border-radius: 7px; text-decoration: none; }
.suc-taxonomy-results .page-numbers.current { border-color: var(--suc-blue); background: var(--suc-blue); color: #fff; }

@media (max-width: 980px) {
  .suc-card-grid, .suc-taxonomy-results .suc-card-grid { grid-template-columns: 1fr; }
  .suc-search-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 22px; }
  .suc-single-hero { gap: 30px; }
  .suc-bottom-cta__inner { align-items: flex-start; }
}

@media (max-width: 760px) {
  .suc-container { width: min(100% - 28px, 620px); }
  .suc-hero { padding: 24px 0 46px; background: #fffdf5; }
  .suc-hero::after { width: 90px; height: 90px; border-width: 16px; }
  .suc-hero h1, .suc-single h1, .suc-taxonomy h1 { font-size: 34px; }
  .suc-hero__lead { font-size: 15px; }
  .suc-breadcrumbs { margin-bottom: 24px; }
  .suc-search-section { padding: 30px 0 65px; }
  .suc-search-box { padding: 16px; border-radius: 14px; }
  .suc-search-input input { height: 54px; padding-left: 47px; font-size: 16px; }
  .suc-search-input svg { left: 15px; width: 21px; }
  .suc-popular > span { width: 100%; }
  .suc-popular button, .suc-selected button, .suc-zero__options button { min-height: 44px; }
  .suc-input-clear { right: 5px; width: 44px; height: 44px; }
  .suc-search-layout { display: block; }
  .suc-mobile-filter-button { display: flex; width: 100%; min-height: 48px; gap: 9px; align-items: center; justify-content: center; margin: 0 0 18px; border: 2px solid var(--suc-blue); border-radius: 9px; background: #fff; color: var(--suc-blue); font-weight: 900; }
  .suc-mobile-filter-button b { display: grid; min-width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--suc-blue); color: #fff; font-size: 11px; }
  .suc-filter-panel { position: fixed; z-index: 100001; inset: 0 0 0 auto; width: min(90vw, 380px); max-height: 100dvh; padding: 20px; transform: translateX(105%); border: 0; border-radius: 0; background: #fff; box-shadow: -16px 0 50px rgba(5, 20, 45, .24); transition: transform .24s ease; }
  .suc-filter-panel::before { position: fixed; z-index: -1; inset: 0 100% 0 -100vw; background: rgba(10, 25, 50, .48); content: ""; opacity: 0; pointer-events: none; transition: opacity .24s; }
  .suc-filter-panel.is-open { transform: translateX(0); }
  .suc-filter-panel.is-open::before { opacity: 1; pointer-events: auto; }
  .suc-filter-panel__head { position: sticky; z-index: 2; top: -20px; margin: -20px -20px 0; padding: 16px 20px; border-bottom: 1px solid var(--suc-line); background: #fff; }
  .suc-filter-panel__head button { display: grid; width: 44px; height: 44px; place-items: center; }
  .suc-filter-group label { min-height: 44px; align-items: center; }
  .suc-filter-group input { width: 20px; height: 20px; margin-top: 0; }
  .suc-filter-actions { position: sticky; bottom: -20px; grid-template-columns: 1fr 1fr; margin: 0 -20px -20px; padding: 14px 20px max(14px, env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -8px 18px rgba(15, 44, 92, .08); }
  .suc-filter-apply { display: inline-flex !important; }
  html.suc-filter-lock { overflow: hidden; }
  .suc-results__head { display: block; }
  .suc-sort { justify-content: space-between; margin-top: 13px; }
  .suc-sort select { flex: 1; }
  .suc-card-grid { gap: 16px; }
  .suc-card__media { padding: 18px; }
  .suc-card__body { padding: 18px; }
  .suc-card__situation { min-height: 0; }
  .suc-mini-flow { overflow-x: auto; }
  .suc-doc-thumb { min-height: 165px; }
  .suc-zero { padding: 28px 18px; }
  .suc-bottom-cta__inner { display: block; }
  .suc-bottom-cta .suc-button { width: 100%; margin-top: 24px; }
  .suc-single { padding: 25px 0 65px; }
  .suc-single-hero { display: flex; flex-direction: column; gap: 28px; padding: 10px 0 42px; }
  .suc-single-hero__copy { order: 1; }
  .suc-single-hero > .suc-doc-thumb { order: 2; width: 100%; min-height: 260px; }
  .suc-doc-thumb--single.suc-doc-thumb--has-image img { height: 240px; }
  .suc-single-lead { font-size: 16px; }
  .suc-detail-section { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 24px 18px; }
  .suc-section-number { font-size: 22px; }
  .suc-detail-section p:not(.suc-section-number) { font-size: 15px; }
  .suc-detail-grid { grid-template-columns: 1fr; gap: 0; }
  .suc-flow-arrow, .suc-flow-after { grid-column: 1 / -1; }
  .suc-related { padding: 42px 0; }
  .suc-related__grid { grid-template-columns: 1fr; }
  .suc-case-cta { padding: 34px 18px; }
  .suc-case-cta__buttons { display: grid; }
  .suc-demo-panel { margin: 28px auto 54px; }
  .suc-demo-case { grid-template-columns: 1fr; gap: 5px; }
  .suc-demo-steps { grid-template-columns: 1fr; }
  .suc-demo-actions { display: grid; }
  .suc-taxonomy-hero { padding: 26px 0 44px; }
  .suc-taxonomy-results { padding: 40px 0 65px; }
}

@media (prefers-reduced-motion: reduce) {
  .sdx-use-cases *, .sdx-use-cases *::before, .sdx-use-cases *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}