/* ===========================================================================
   SolutionsSales -- SHARED product-UI language for every AVATAR SALES
   picture on the page: hero film, 画面イメージ mockup, 特長 crops, 選ばれる理由
   micro-UI. One product, drawn one way. Component files (sales-*.css) build on
   these classes and tokens; they never redefine them.
   Contrast: every text/background pair below is >= 4.5:1 (measured 2026-09-30).
   =========================================================================== */

/* .sec--dark (navy コンセプト band) lives in home-prototype.css. */

:root {
  --sa-acc: #805496;        /* AVATAR SALES accent. #FFF on it 5.79:1; on #FFF 5.79:1 */
  --sa-acc-ink: #6E4585;    /* accent text on tints (#F4EAF6 6.29:1) */
  --sa-tint: #F4EAF6;       /* AI tint: AI chip, AI suggestion, AI score cell */
  --sa-chrome: #102A43;     /* product top bar (navy, like every Solutions mock) */
  --sa-chrome-tx: #C6D3E0;  /* text on the top bar 9.62:1 */
  --sa-rail: #F7F9FB;       /* left menu */
  --sa-hair: #E2E8EE;       /* hairlines inside a window */
  --sa-rule: #C6D3E0;       /* rules between rows outside a window */
  --sa-flat: #F1F3F5;       /* flat decoration chip, --muted on it 4.93:1 */
  --sa-stage: linear-gradient(145deg, #E9DDF0 0%, #E6EAF2 60%, #E4EAF1 100%);
  /* pipeline stages: fill + text, all >= 4.5:1 */
  --st-lead: #F2B705;  --st-lead-tx: #3D2C00;
  --st-cont: #E08A1E;  --st-cont-tx: #3D2C00;
  --st-repl: #C2542A;  --st-repl-tx: #FFFFFF;
  --st-deal: #A8477F;  --st-deal-tx: #FFFFFF;
  --st-nego: #805496;  --st-nego-tx: #FFFFFF;
  --st-won:  #1B6FB3;  --st-won-tx:  #FFFFFF;
  --st-nur:  #237A52;  --st-nur-tx:  #FFFFFF;
}

/* ---- window: white app frame, product bar on top ------------------------- */
.sa-win { overflow: hidden; background: var(--white); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.6; color: var(--ink); word-break: auto-phrase; }
.sa-win p, .sa-win ul, .sa-win ol, .sa-win h4 { margin: 0; }
.sa-win ul, .sa-win ol { padding: 0; list-style: none; }
.sa-top { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; background: var(--sa-chrome); color: var(--sa-chrome-tx); white-space: nowrap; }
.sa-brand { display: inline-flex; align-items: center; gap: 7px; font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--white); }
.sa-brand::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--sa-acc); box-shadow: inset 0 0 0 3px #A88BBA; }
.sa-find { flex: 0 1 180px; min-width: 0; height: 24px; margin-left: 10px; padding: 0 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); font-size: 13px; line-height: 24px; color: var(--sa-chrome-tx); overflow: hidden; text-overflow: ellipsis; }

/* ---- AI marks: the only place the accent tint appears ----------------------- */
.sa-ai { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; background: var(--sa-tint); font-size: 13px; font-weight: 700; line-height: 20px; color: var(--sa-acc-ink); white-space: nowrap; }
.sa-ai::before { content: ""; width: 9px; height: 9px; background: currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.sa-score { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 4px; background: var(--sa-tint); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sa-acc-ink); }

/* ---- company square + stage pill ------------------------------------------- */
.sa-co { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; background: var(--sa-flat); font-size: 12px; font-weight: 700; color: var(--navy); }
.sa-pill { display: inline-block; padding: 0 7px; border-radius: 3px; font-size: 13px; font-weight: 700; line-height: 20px; white-space: nowrap; }
.sa-pill--lead { background: var(--st-lead); color: var(--st-lead-tx); }
.sa-pill--cont { background: var(--st-cont); color: var(--st-cont-tx); }
.sa-pill--repl { background: var(--st-repl); color: var(--st-repl-tx); }
.sa-pill--deal { background: var(--st-deal); color: var(--st-deal-tx); }
.sa-pill--nego { background: var(--st-nego); color: var(--st-nego-tx); }
.sa-pill--won  { background: var(--st-won);  color: var(--st-won-tx); }
.sa-pill--nur  { background: var(--st-nur);  color: var(--st-nur-tx); }

/* ---- crop stage: a window cut from a larger screen (特長, 選ばれる理由) ------ */
.sa-stage { --inset: 16px; position: relative; overflow: hidden; padding: var(--inset) 0 0 var(--inset); border-radius: 12px; background: var(--sa-stage); pointer-events: none; user-select: none; -webkit-user-select: none; }
.sa-stage > .sa-win { border-radius: 8px 0 0 0; }
@media (min-width: 760px) { .sa-stage { --inset: 24px; border-radius: 14px; } }
@media (min-width: 1024px) { .sa-stage { --inset: 32px; border-radius: 16px; } }

/* ---- required caption under every product picture -------------------------- */
.sa-cap { margin: 14px 0 0; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.9; color: var(--muted); }

/* ---- screen-reader only ------------------------------------------------------ */
.sa-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sa-nw { white-space: nowrap; }

/* ---- section eyebrow in the product accent (Solutions pages colour it) ----- */
.sa-eb { color: var(--sa-acc); }