/* x1-solutions-sales - /solutions/sales (2026-10-01). Every rule scoped under .x1-solutions-sales.
   Built on d29 (Direction A). Signature: the flag card in #flag (customer ask, highlighted words,
   source, proposed correction, exception route). */
.x1-solutions-sales {--ss-mark: rgba(245, 158, 11, .34); --ss-line: rgba(20, 20, 20, .10);}

/* hero */
.x1-solutions-sales .d29-hero .display {max-width: 13ch;}

/* flag section: two copy blocks beside a sticky card */
.x1-solutions-sales .ss-flag {align-items: start; row-gap: var(--stack-l);}
.x1-solutions-sales .ss-flag-text {grid-column: 1 / span 6; display: grid; gap: clamp(3rem, 2rem + 4vw, 6rem);}
.x1-solutions-sales .ss-flag-media {grid-column: 8 / span 5; position: sticky; top: 6rem;}
.x1-solutions-sales .ss-step .h2 {margin-bottom: var(--stack-m); max-width: 14ch;}
.x1-solutions-sales .ss-panel {padding: clamp(1rem, .6rem + 2vw, 2.25rem);}

.x1-solutions-sales .ss-card {background: var(--surface); border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 18px 48px -14px rgba(20,20,20,.20); font-size: .9375rem;}
.x1-solutions-sales .ss-card-bar {display: flex; align-items: center; gap: .5rem; padding: .8rem 1.1rem;
  background: var(--ink); color: #F2EDE3; font: 600 .78125rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase;}
.x1-solutions-sales .ss-card-bar svg {width: 18px; height: 18px; color: #F4C77A; flex: none;}
.x1-solutions-sales .ss-ask {padding: 1.25rem 1.25rem .5rem;}
.x1-solutions-sales .ss-k {display: block; font: 600 .75rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem;}
.x1-solutions-sales .ss-bubble {display: inline-block; max-width: 100%; padding: .75rem 1rem; border-radius: 4px 14px 14px 14px;
  background: var(--tint); font: italic 400 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.3 var(--serif); color: var(--ink);}
.x1-solutions-sales .ss-draft {display: grid; gap: .6rem; margin: 1rem 1.25rem 0; padding: 1rem 0 1.25rem; border-top: 1px dashed var(--ss-line);}
.x1-solutions-sales .ss-draft i, .x1-solutions-sales .ss-rec dd i {display: block; height: .55rem; width: var(--w, 80%); border-radius: 99px; background: var(--ss-line);}
.x1-solutions-sales .ss-draft-row {display: flex; align-items: center; gap: .45rem;}
.x1-solutions-sales .ss-draft-row i {flex: none;}
.x1-solutions-sales .ss-mark {display: block; height: 1.15rem; width: 40%; border-radius: 3px; background: var(--ss-mark);
  box-shadow: inset 0 -2px 0 var(--accent);}
.x1-solutions-sales .ss-why {margin: 0; border-top: 1px solid var(--rule);}
.x1-solutions-sales .ss-why > div {display: grid; grid-template-columns: 10.5rem 1fr; gap: 1rem; align-items: center;
  padding: .8rem 1.25rem; border-bottom: 1px solid var(--rule);}
.x1-solutions-sales .ss-why > div:last-child {border-bottom: 0; background: rgba(143, 82, 14, .06);}
.x1-solutions-sales .ss-why dt {font: 600 .75rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);}
.x1-solutions-sales .ss-why dd {margin: 0; color: var(--ink); font-weight: 500;}
.x1-solutions-sales .ss-why > div:last-child dd {color: var(--accent);}
.x1-solutions-sales .ss-swatch {display: inline-block; width: 3.25rem; height: 1rem; border-radius: 3px; background: var(--ss-mark);
  box-shadow: inset 0 -2px 0 var(--accent); vertical-align: middle;}

/* route */
.x1-solutions-sales .ss-route {padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);}
.x1-solutions-sales .ss-node {display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem; border-radius: 10px;
  background: var(--surface); box-shadow: 0 0 0 1px rgba(0,0,0,.07); font: 400 clamp(1.125rem, 1rem + .4vw, 1.3125rem)/1.2 var(--serif); color: var(--ink); white-space: nowrap;}
.x1-solutions-sales .ss-node-from {margin-bottom: 1.25rem;}
.x1-solutions-sales .ss-dot {width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent);}
.x1-solutions-sales .ss-lanes {list-style: none; margin: 0; padding: 0 0 0 1.25rem; border-left: 1px solid rgba(143, 82, 14, .45); display: grid; gap: 1.1rem; margin-left: 1.3rem;}
.x1-solutions-sales .ss-lanes li {display: grid; grid-template-columns: 11.5rem minmax(2rem, 1fr) auto; align-items: center; gap: .75rem; position: relative;}
.x1-solutions-sales .ss-lanes li::before {content: ""; position: absolute; left: -1.25rem; top: 50%; width: .9rem; height: 1px; background: rgba(143, 82, 14, .45);}
.x1-solutions-sales .ss-lane-k {font: 600 .78125rem/1.35 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);}
.x1-solutions-sales .ss-arrow {height: 1px; background: var(--accent); position: relative;}
.x1-solutions-sales .ss-arrow::after {content: ""; position: absolute; right: 0; top: -4px; border: 4.5px solid transparent; border-left: 7px solid var(--accent); border-right: 0;}

/* pull line */
.x1-solutions-sales .ss-aha {background: var(--tint); border-top: 0 !important;}
.x1-solutions-sales .ss-aha + .sec {border-top: 0;}
.x1-solutions-sales .ss-pull {max-width: 24ch; margin-inline: auto; text-align: center; text-wrap: balance;
  font: italic 400 clamp(2rem, 1.3rem + 2.8vw, 3.5rem)/1.15 var(--serif); letter-spacing: -.015em; color: var(--ink);}
.x1-solutions-sales .ss-pull::before {content: ""; display: block; width: 3rem; height: 2px; margin: 0 auto 1.75rem; background: var(--accent);}

/* written vs spoken */
.x1-solutions-sales .ss-modes {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap);}
.x1-solutions-sales .ss-mode {background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  display: grid; gap: 1rem; align-content: start;}
.x1-solutions-sales .ss-mode + .ss-mode {background: var(--tint); border-color: transparent;}
.x1-solutions-sales .ss-mode-i {width: 2.5rem; height: 2.5rem; color: var(--accent);}
.x1-solutions-sales .ss-mode-i svg {width: 100%; height: 100%;}
.x1-solutions-sales .ss-mode h3 {font: 400 clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem)/1.1 var(--serif); color: var(--ink);}
.x1-solutions-sales .ss-chips {display: flex; flex-wrap: wrap; gap: .5rem;}
.x1-solutions-sales .ss-chips span {padding: .3rem .75rem; border-radius: 99px; border: 1px solid rgba(0,0,0,.12); font-size: .875rem; color: var(--text); background: var(--bg);}
.x1-solutions-sales .ss-mode-a {padding-top: 1rem; border-top: 1px solid var(--rule); font: 600 .8125rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent);}

/* record */
.x1-solutions-sales .ss-rec-wrap {padding: clamp(1.25rem, .8rem + 2vw, 2.5rem);}
.x1-solutions-sales .ss-rec {margin: 0; background: var(--surface); border-radius: 12px; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 14px 36px -14px rgba(20,20,20,.16);}
.x1-solutions-sales .ss-rec > div {display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; align-items: center; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--rule);}
.x1-solutions-sales .ss-rec > div:last-child {border-bottom: 0;}
.x1-solutions-sales .ss-rec dt {font: 600 .75rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);}
.x1-solutions-sales .ss-rec dd {margin: 0; display: grid; gap: .5rem;}
.x1-solutions-sales .ss-rec > div:first-child dd i:first-child {background: var(--ss-mark);}

/* films */
.x1-solutions-sales .ss-films-head {align-items: end; row-gap: var(--stack-m); margin-bottom: var(--stack-l);}
.x1-solutions-sales .ss-films-h {grid-column: 1 / span 6;}
.x1-solutions-sales .ss-films-h .h2 {max-width: 14ch;}
.x1-solutions-sales .ss-films-s {grid-column: 8 / span 5;}
.x1-solutions-sales .ss-films-s .d29-cta-row {margin-top: var(--stack-m);}
.x1-solutions-sales .ss-films {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); align-items: start;}
.x1-solutions-sales .ss-film {margin: 0;}
.x1-solutions-sales .ss-screen {background: var(--tint); border-radius: var(--radius); padding: clamp(.6rem, .3rem + 1vw, 1.25rem);}
.x1-solutions-sales .ss-screen video {display: block; width: 100%; height: auto; border-radius: 10px; background: #000;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 18px 48px -12px rgba(20,20,20,.18);}
.x1-solutions-sales .ss-film figcaption {margin-bottom: .85rem; font: 600 .78125rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);}

/* FAQ */
.x1-solutions-sales .ss-faq-wrap {max-width: 52rem; margin-inline: auto;}

/* tablet / phone */
@media (max-width: 960px) {
  .x1-solutions-sales .ss-flag-text, .x1-solutions-sales .ss-flag-media,
  .x1-solutions-sales .ss-films-h, .x1-solutions-sales .ss-films-s {grid-column: 1 / -1;}
  .x1-solutions-sales .ss-flag-media {position: static;}
}
@media (max-width: 700px) {
  .x1-solutions-sales .ss-modes, .x1-solutions-sales .ss-films {grid-template-columns: 1fr;}
  .x1-solutions-sales .ss-why > div, .x1-solutions-sales .ss-rec > div {grid-template-columns: 1fr; gap: .4rem;}
  .x1-solutions-sales .ss-lanes li {grid-template-columns: 1fr; gap: .4rem;}
  .x1-solutions-sales .ss-arrow {display: none;}
  .x1-solutions-sales .ss-node {white-space: normal;}
  .x1-solutions-sales .ss-panel {padding: .6rem;}
}
@media (prefers-reduced-motion: reduce) {
  .x1-solutions-sales * {transition: none !important; animation: none !important;}
}