/* =============================================================================
   YesBOS 2.0 — Solutions page: "Questions become answers."
   Meets visitors in their own language ("I want to…"), then reveals the right
   Digital Employee for the job. Sells the business outcome, not the feature.
   Signature transformation: a question (?) becomes an answer (✓).
   Builds on design-system.css.
   ============================================================================= */

/* --- Intro (minimal, one idea) --- */
.sol-intro { padding-block: clamp(4rem, 3rem + 5vw, 7rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.sol-intro__head { max-width: 44rem; }
.sol-intro h1 { margin-top: var(--sp-3); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; }
.sol-intro h1 .soft { color: var(--text-soft); }
.sol-cue { display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--sp-6); font-size: var(--fs-sm); font-weight: 500; color: var(--text-soft); }
.sol-cue svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) { .sol-cue svg { animation: solBob 2.4s ease-in-out infinite; } @keyframes solBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } } }

/* --- The questions grid --- */
.sol-questions { padding-bottom: clamp(2rem, 1rem + 3vw, 4rem); }
.sol-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 820px) { .sol-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; } }

/* A single question card */
.sol-card {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-xl);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sol-card:hover { border-color: color-mix(in srgb, var(--forest) 32%, var(--line)); }
.sol-card[data-open="true"] { border-color: var(--forest); box-shadow: var(--shadow-lg); }

/* When one card is the focus, the rest gently step back (like opening a conversation) */
.sol-grid.is-focused .sol-card:not([data-open="true"]) { opacity: .45; }
.sol-grid.is-focused .sol-card:not([data-open="true"]):hover { opacity: .7; }

/* The question row (the button) */
.sol-card__toggle {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: clamp(1.15rem, 1rem + 1vw, 1.6rem);
}
.sol-card__want { flex: 1; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1.25; }

/* The signature glyph: ? becomes ✓ */
.sol-card__glyph { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); transition: background var(--dur) var(--ease); }
.sol-card__glyph .q, .sol-card__glyph .tick { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.sol-card__glyph .q { font-weight: 700; font-size: 1.05rem; color: var(--text-soft); }
.sol-card__glyph .tick { opacity: 0; transform: scale(.6); color: var(--forest); }
.sol-card__glyph .tick svg { width: 17px; height: 17px; }
.sol-card[data-open="true"] .sol-card__glyph { background: var(--forest-tint); }
.sol-card[data-open="true"] .sol-card__glyph .q { opacity: 0; transform: scale(.6); }
.sol-card[data-open="true"] .sol-card__glyph .tick { opacity: 1; transform: none; }

.sol-card__chev { flex: none; color: var(--text-soft); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.sol-card__chev svg { width: 20px; height: 20px; }
.sol-card[data-open="true"] .sol-card__chev { transform: rotate(180deg); color: var(--forest); }

/* The panel that opens — smooth auto-height via grid-template-rows */
.sol-card__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease); }
.sol-card[data-open="true"] .sol-card__panel { grid-template-rows: 1fr; }
.sol-card__inner { overflow: hidden; opacity: 0; transition: opacity var(--dur) var(--ease); }
.sol-card[data-open="true"] .sol-card__inner { opacity: 1; transition-delay: 120ms; }
.sol-card__panel > .sol-card__inner { padding: 0 clamp(1.15rem, 1rem + 1vw, 1.6rem); }
.sol-card[data-open="true"] .sol-card__panel > .sol-card__inner { padding-bottom: clamp(1.15rem, 1rem + 1vw, 1.6rem); }

/* The Digital Employee reveal */
.sol-de { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.sol-de__name { font-size: var(--fs-h4); font-weight: 700; color: var(--forest); letter-spacing: -0.01em; }
.sol-de__name .pre { color: var(--text-soft); font-weight: 500; }
.sol-de__cols { margin-top: var(--sp-5); display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 460px) { .sol-de__cols:has(.sol-de__col + .sol-de__col) { grid-template-columns: auto 1fr; gap: var(--sp-6); } }
.sol-de__label { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }
.sol-de__tools { margin-top: var(--sp-3); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.sol-de__list { margin-top: var(--sp-3); list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.sol-de__list li { position: relative; padding-left: 1.1rem; font-size: var(--fs-sm); color: var(--ink); }
.sol-de__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); }
.sol-de__cta { margin-top: var(--sp-6); }
.sol-de__cta svg { width: 15px; height: 15px; }

/* --- Memorable statement (questions become answers) --- */
.sol-statement { background: var(--forest-wash); border-block: 1px solid color-mix(in srgb, var(--forest) 10%, transparent); }
.sol-statement .container { text-align: center; padding-block: clamp(4rem, 3rem + 4vw, 6.5rem); }
.sol-statement p { font-size: clamp(1.8rem, 1.25rem + 2.4vw, 2.9rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.14; color: var(--ink); text-wrap: balance; max-width: 24ch; margin-inline: auto; }
.sol-statement p .soft { color: var(--text-soft); }

/* --- The workforce grows --- */
.sol-wf__head { max-width: 40rem; }
.sol-wf__head h2 { margin-top: var(--sp-3); }
.sol-wf__head .lead { margin-top: var(--sp-4); }

.wf { list-style: none; padding: 0; margin-top: var(--sp-8); display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: stretch; }
@media (min-width: 860px) { .wf { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: var(--sp-4); } }
.wf__step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-xs); height: 100%; }
.wf__when { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); margin-bottom: var(--sp-4); }
.wf__emps { display: flex; flex-direction: column; gap: var(--sp-3); }
.wf__emp { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.wf__emp--soon { color: var(--text-soft); font-weight: 500; }
.wf__future { font-size: var(--fs-h4); font-weight: 700; color: var(--forest); letter-spacing: -0.01em; text-wrap: balance; }
.wf__step--future { background: var(--forest-tint); border-color: transparent; }

.wf__arrow { display: grid; place-items: center; color: color-mix(in srgb, var(--forest) 40%, var(--line)); }
.wf__arrow svg { width: 20px; height: 20px; }
@media (max-width: 859px) { .wf__arrow { transform: rotate(90deg); } }

/* --- Final CTA --- */
.sol-cta { text-align: center; }
.sol-cta__inner { max-width: 40rem; margin-inline: auto; }
.sol-cta h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.sol-cta p { margin-top: var(--sp-5); color: var(--text-muted); font-size: var(--fs-lead); max-width: 34rem; margin-inline: auto; }
.sol-cta .btn { margin-top: var(--sp-7); }