/* Nav guide wizard + results UI. Loaded via ../s5-rebrand.css only. */
  /* — Header: Getting started guide wizard (two columns) — */
  .s5-nav-guide-wizard-root {
      min-width: 0;
      width: 100%;
      font-family: var(--s5-nav-font-family);
      -webkit-font-smoothing: antialiased;
      color: var(--s5-text-on-dark, #fff);
  }
  
  /* Guide wizard lives in panel body only (no featured rail) so questions stay in the first column. */
  .s5-nav-panel-body .s5-nav-section--guide {
      width: 100%;
      min-width: 0;
  }
  
  .s5-nav-guide-wizard-layout {
      --s5-nav-guide-radius: 10px;
      --s5-nav-guide-sidebar-radius: 8px;
      --s5-nav-guide-sidebar-pad: 16px;
      --s5-nav-guide-yellow: var(--s5-color-yellow, #fbc72f);
      --s5-nav-guide-yellow-soft: rgba(251, 199, 47, 0.14);
      --s5-nav-guide-line: rgba(255, 255, 255, 0.1);
  
      display: grid;
      grid-template-columns: 1fr;
      gap: 22px;
      min-width: 0;
  
      @media (min-width: 768px) {
          grid-template-columns: minmax(12.5rem, 17.5rem) minmax(0, 1fr);
          gap: 32px;
          --s5-nav-guide-sidebar-pad: 18px;
      }
  
      @media (min-width: 1100px) {
          grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
          gap: 40px;
      }
  }
  
  .s5-nav-guide-sidebar {
      position: relative;
      margin: 0;
      min-width: 0;
      color: var(--s5-text-on-dark);
      background: var(--s5-color-gray-900);
      border: 0;
      border-radius: var(--s5-nav-guide-sidebar-radius, 8px);
      overflow: hidden;
      box-shadow: none;
      padding: var(--s5-nav-guide-sidebar-pad);
      border-bottom: 1px solid var(--s5-nav-guide-line);
    border-radius: var(--s5-nav-guide-sidebar-radius, 8px);
  
      @media (min-width: 768px) {
          padding: var(--s5-nav-guide-sidebar-pad);
          margin: 0;
          border-bottom: 0;
      border-right: 1px solid var(--s5-color-yellow);
      }
  }
  
  .s5-nav-guide-sidebar-header {
      margin: 0 0 4px;
  }
  
  .s5-nav-guide-sidebar-header-inner {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
  }
  
  .s5-nav-guide-sidebar-titles {
      flex: 1 1 auto;
      min-width: 0;
  }
  
  .s5-nav-guide-sidebar-title {
      margin: 0;
      font-size: 18px;
      font-weight: 500;
      line-height: 1.3;
      letter-spacing: -0.01em;
      color: var(--s5-text-on-dark, #fff);
  }
  
  .s5-nav-guide-sidebar-lead {
      margin: 6px 0 0;
      font-size: 18px;
      font-weight: 600;
      line-height: 1.4;
      color: rgba(255, 255, 255, 0.9);
  }
  
  .s5-nav-guide-reset {
      flex: 0 0 auto;
      align-self: flex-start;
      margin: 0;
      padding: 0 8px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      font: inherit;
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--s5-color-gray-400, #bebebe);
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
      white-space: nowrap;
      transition: color 0.18s ease, background-color 0.18s ease;
  
      &:hover {
          color: var(--s5-nav-guide-yellow);
      }
  
      &:focus-visible {
          outline: 2px solid var(--s5-focus-ring);
          outline-offset: 2px;
          color: var(--s5-nav-guide-yellow);
      }
  }
  
  .s5-nav-guide-qlist {
      list-style: none;
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
  }
  
  .s5-nav-guide-qlist > li {
      list-style: none;
      list-style-type: none;
  }
  
  .s5-nav-guide-qlist > li::marker {
      content: none;
  }
  
  .s5-nav-guide-qblock {
      margin: 0;
      padding: 16px 0;
      border-top: 1px solid var(--s5-nav-guide-line);
    display: flex;
    flex-direction: column;
    gap: 4px;
  
      &:first-of-type {
          border-top: 0;
          padding-top: 0;
      }
  
      &.is-pending {
          .s5-nav-guide-qblock-head {
              opacity: 0.42;
          }
      }
  
    .s5-nav-guide-qtext {
      font-size: 18px;
      font-weight: 700;
    }
  
      &.is-done {
          .s5-nav-guide-qtext {
              color: rgba(255, 255, 255, 0.92);
          }
      }
  
      &.is-active {
          .s5-nav-guide-qtext {
              color: var(--s5-nav-guide-yellow);
          }
  
          .s5-nav-guide-qnum {
              color: var(--s5-color-yellow);
          }
      }
  
      &.is-done .s5-nav-guide-qnum {
          color: var(--s5-color-yellow);
      }
  }
  
  .s5-nav-guide-qblock-head {
      margin: 0;
      font-size: 0.875rem;
      line-height: 1.4;
      color: var(--s5-text-on-dark);
  }
  
  .s5-nav-guide-qnum {
      font-size: 20px;
      font-weight: 700;
      margin-right: 3px;
      color: var(--s5-color-white);
  }
  
  .s5-nav-guide-qanswer {
    margin: 0;
      padding: 0 0 0 24px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--s5-nav-guide-yellow);
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex-wrap: wrap;
  }

  .s5-nav-guide-qanswer-text {
      min-width: 0;
  }

  /* Re-opens this step. Deliberately quieter than .s5-nav-guide-reset (gray, underlined) so the
     narrower action doesn't read as the more destructive one sitting a few pixels away. */
  .s5-nav-guide-change {
      flex: 0 0 auto;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      font: inherit;
      font-size: 11px;
      font-weight: 600;
      color: var(--s5-color-gray-400, #bebebe);
      text-decoration: underline;
      text-underline-offset: 2px;
      cursor: pointer;
      white-space: nowrap;
      transition: color 0.18s ease;

      &:hover {
          color: var(--s5-color-white, #fff);
      }

      &:focus-visible {
          outline: 2px solid var(--s5-focus-ring);
          outline-offset: 2px;
          color: var(--s5-color-white, #fff);
      }
  }
  
  .s5-nav-guide-option-list {
      list-style: none;
      margin: 14px 0 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
  }
  
  .s5-nav-guide-option {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 12px;
      width: 100%;
      min-height: 44px;
      margin: 0;
      padding: 8px 10px 8px 8px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--s5-text-on-dark);
      font: inherit;
      font-size: 0.875rem;
      font-weight: 600;
      text-align: left;
      cursor: pointer;
      border-left: 3px solid transparent;
      transition:
          background-color 0.18s ease,
          color 0.18s ease,
          border-color 0.18s ease,
          box-shadow 0.18s ease;
  
      &:hover {
          background: var(--s5-nav-guide-yellow-soft);
          color: var(--s5-nav-guide-yellow);
          border-left-color: var(--s5-nav-guide-yellow);
      }
  
      &:focus-visible {
          outline: 2px solid var(--s5-focus-ring);
          outline-offset: 1px;
          background: var(--s5-nav-guide-yellow-soft);
          color: var(--s5-nav-guide-yellow);
          border-left-color: var(--s5-nav-guide-yellow);
      }

      &.is-selected {
          background: var(--s5-nav-guide-yellow-soft);
          color: var(--s5-nav-guide-yellow);
          border-left-color: var(--s5-nav-guide-yellow);
      }
  }
  
  .s5-nav-guide-option-icon {
      flex: 0 0 auto;
      width: 2.25rem;
      height: 2.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.92);
      font-size: 0.9375rem;
      line-height: 1;
      transition: background-color 0.18s ease, color 0.18s ease;
  
      .s5-nav-guide-option:hover &,
      .s5-nav-guide-option:focus-visible & {
          background: rgba(251, 199, 47, 0.12);
          color: var(--s5-nav-guide-yellow);
      }
  }
  
  .s5-nav-guide-option-label {
      flex: 1 1 auto;
      min-width: 0;
      line-height: 1.35;
  }
  
  .s5-nav-guide-main {
      display: flex;
      flex-direction: column;
      gap: 22px;
      min-width: 0;
  
      @media (min-width: 768px) {
          gap: 26px;
      }
  }
  
  .s5-nav-guide-cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      min-width: 0;

      @media (min-width: 520px) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 10px;
      }

      @media (min-width: 768px) {
          gap: 14px;
      }
  }
  
  .s5-nav-guide-card {
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      border-radius: var(--s5-nav-guide-radius);
      overflow: hidden;
      border: 2px solid rgba(255, 255, 255, 0.12);
      background: var(--s5-color-gray-900, #1f1f1f);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
      transition:
          border-color 0.22s ease,
          box-shadow 0.22s ease,
          transform 0.22s ease;
  
      &.is-filled {
          border-color: var(--s5-nav-guide-yellow);
          box-shadow:
              0 0 0 1px rgba(251, 199, 47, 0.12),
              0 14px 36px rgba(0, 0, 0, 0.5);
      }
  
      &.is-placeholder {
          .s5-nav-guide-card-media.is-fallback {
              opacity: 0.5;
              filter: grayscale(0.35) contrast(0.92);
          }
  
          .s5-nav-guide-card-label {
              color: var(--s5-color-gray-500, #8d8d8d);
          }
      }
  
      /* An answered card is a <button> that reopens its question. Reset the UA button styling that
         the rest of the card's layout assumes it does not have. Placeholders stay inert divs — there
         is nothing to go back to, and clicking the step you are already on does nothing. */
      &.is-filled {
          appearance: none;
          margin: 0;
          padding: 0;
          font: inherit;
          text-align: inherit;
          color: inherit;
          cursor: pointer;
      }

      /* The step still waiting on an answer. Draws the eye to where the flow continues, so an empty
         card reads as "your next choice lands here" rather than a broken image. */
      &.is-active {
          border-color: rgba(251, 199, 47, 0.55);

          .s5-nav-guide-card-step {
              color: var(--s5-nav-guide-yellow);
              border-color: rgba(251, 199, 47, 0.5);
          }

          .s5-nav-guide-card-label {
              color: var(--s5-nav-guide-yellow);
          }
      }

      &:focus-visible {
          outline: 2px solid var(--s5-focus-ring, rgba(251, 199, 47, 0.55));
          outline-offset: 2px;
      }

      /* Hover only where there is something to click. */
      @media (hover: hover) {
          &.is-filled:hover {
              transform: translateY(-2px);
              border-color: rgba(251, 199, 47, 0.7);
          }
      }
  }

  /* Numbered so an empty card is legibly step 1/2/3 of the questions beside it. */
  .s5-nav-guide-card-step {
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.75rem;
      height: 1.75rem;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 50%;
      font-size: 0.8125rem;
      font-weight: 700;
      line-height: 1;
      color: var(--s5-color-gray-400, #bebebe);
      font-variant-numeric: tabular-nums;
  }
  
  .s5-nav-guide-card-media {
      position: relative;
      min-height: 5.5rem;
      aspect-ratio: 16 / 10;
      background: var(--s5-color-gray-800, #2a2a2a);
  
      &.is-fallback {
          background:
              radial-gradient(ellipse 120% 80% at 50% 100%, rgba(251, 199, 47, 0.06) 0%, transparent 55%),
              linear-gradient(165deg, var(--s5-color-gray-800, #3a3a3a) 0%, var(--s5-color-gray-950, #111) 100%);
      }
  
      &::after {
          content: "";
          position: absolute;
          inset: 0;
          pointer-events: none;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
          opacity: 0.85;
      }
  
      img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
      }
  }
  
  .s5-nav-guide-card-cap {
      position: relative;
      z-index: 1;
      padding: 10px 12px 12px;
      background: linear-gradient(180deg, rgba(17, 17, 17, 0.92) 0%, rgba(17, 17, 17, 0.98) 100%);
      border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  
  /* Filled caps become a row: label left, the same quiet Change link the sidebar answers get, right. */
  .s5-nav-guide-card.is-filled .s5-nav-guide-card-cap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: linear-gradient(180deg, rgba(31, 31, 31, 0.95) 0%, rgba(17, 17, 17, 0.99) 100%);
      border-top-color: rgba(251, 199, 47, 0.2);
  }
  
  .s5-nav-guide-card-label {
      display: block;
      font-size: 0.6875rem;
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--s5-text-on-dark);
  }
  
  .s5-nav-guide-welcome {
      min-width: 0;
      padding-top: 2px;
  }
  
  .s5-nav-guide-welcome-title {
      margin: 0;
      font-size: clamp(1.625rem, 1.5vw + 1.1rem, 2.375rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -0.02em;
      color: var(--s5-text-on-dark);
  }
  
  .s5-nav-guide-welcome-intro {
      margin: 14px 0 0;
      max-width: 38rem;
      font-size: 0.9375rem;
      line-height: 1.6;
      color: var(--s5-color-gray-300, #d8d8d8);
  }
  
  .s5-nav-guide-results {
      min-width: 0;
      padding-top: 4px;
  }

  /* Mobile nav: results follow the questionnaire directly once all three answers are chosen. */
  @media (max-width: 1023.98px) {
      .s5-nav-guide-wizard-layout.is-mobile-nav.has-results > .s5-nav-guide-results {
          padding-top: 8px;
          border-top: 1px solid var(--s5-nav-guide-line);
      }
  }
  
  .s5-nav-guide-result-columns {
      display: grid;
      grid-template-columns: 1fr;
      gap: 22px;
      min-width: 0;
  
      /* Two columns once there is room; three only when the panel body is wide enough
         (featured + wizard sidebar already consume width below ~1100px). */
      @media (min-width: 640px) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 16px 20px;
          align-items: start;
      }
  
      @media (min-width: 1100px) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 12px 20px;
      }
  }
  
  .s5-nav-guide-result-col {
      min-width: 0;
  
      @media (min-width: 640px) and (max-width: 1099.98px) {
          padding-left: 16px;
          border-left: 1px solid var(--s5-nav-guide-line);
  
          &:nth-child(odd) {
              padding-left: 0;
              border-left: 0;
          }
      }
  
      @media (min-width: 1100px) {
          padding-left: 16px;
          border-left: 1px solid var(--s5-nav-guide-line);
  
          &:first-child {
              padding-left: 0;
              border-left: 0;
          }
      }
  }
  
  .s5-nav-guide-result-heading {
      margin: 0 0 10px;
      padding: 0 2px;
      font-size: 0.8125rem;
      font-weight: 700;
      line-height: 1.25;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--s5-nav-guide-yellow);
      overflow-wrap: break-word;
  }
  
  .s5-nav-guide-result-links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
  }
  
  .s5-nav-guide-result-link {
      display: block;
      padding: 7px 2px;
      font-size: 0.875rem;
      font-weight: 600;
      line-height: 1.35;
      color: var(--s5-text-on-dark);
      text-decoration: none;
      border-radius: 6px;
      transition: color 0.15s ease, background-color 0.15s ease;
  
      &:hover {
          color: var(--s5-nav-guide-yellow);
          background: rgba(255, 255, 255, 0.04);
      }
  
      &:focus-visible {
          outline: 2px solid var(--s5-focus-ring);
          outline-offset: 1px;
          color: var(--s5-nav-guide-yellow);
      }
  }
  
  .s5-nav-muted {
      color: var(--s5-color-gray-500);
      font-size: 0.875rem;
  }
  
  .s5-nav-hub-empty {
      margin: 0;
      color: var(--s5-color-gray-500);
      font-size: 0.875rem;
  }

  /* Sub-headers inside a results link list (IMP-panel product groups):
     same accent family as the result heading, one step smaller. */
  .s5-nav-guide-result-links .s5-nav-guide-result-subhead {
      margin: 16px 0 2px;
      padding: 0 2px;
      font-size: 0.6875rem;
      font-weight: 700;
      line-height: 1.2;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--s5-nav-guide-yellow);
  }

  .s5-nav-guide-result-links .s5-nav-guide-result-subhead:first-child {
      margin-top: 0;
  }