/* ==========================================================================
   Late tweaks from Nikola's review, kept in their own file so they never
   collide with the section files other agents were editing at the time.
   ========================================================================== */

/* "This is just a small example of what we offer, make it seeable" */
.sol-sample {
  display: flex; align-items: flex-start; gap: 12px;
  width: fit-content; max-width: 100%;
  margin: calc(-1 * clamp(8px, 2vw, 20px)) 0 clamp(24px, 3.5vw, 36px);
  padding: 14px 20px 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(90, 168, 255, .16), rgba(90, 168, 255, .07));
  border: 1px solid rgba(140, 196, 255, .45);
  box-shadow: 0 1px 0 rgba(212, 233, 255, .10) inset, 0 12px 30px -16px rgba(90, 168, 255, .55);
  color: var(--text, #e3eefa);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
}
.sol-sample strong { color: #fff; font-weight: 500; }
.sol-sample-icon {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(90, 168, 255, .18); color: var(--blue-200, #a9d3ff);
  border: 1px solid rgba(140, 196, 255, .35);
}
@media (max-width: 700px) {
  .sol-sample { width: 100%; padding: 12px 14px; font-size: 15px; }
  .sol-sample-icon { width: 30px; height: 30px; }
}
.sol-sample a { color: var(--blue-200, #a9d3ff); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; padding: 10px 2px; margin: -10px -2px; border-radius: 6px; transition: color .18s; }
.sol-sample a:hover { color: #fff; }
.sol-sample a:active { opacity: .8; }
.sol-sample a:focus-visible { outline: 2px solid var(--blue-300, #8cc4ff); outline-offset: 2px; }