.feature-story {
  display: none;
}
.feature-story-cta-context {
  display: none;
}
@media (max-width: 991.98px) {
  .feature-story {
    --story-ink: #29343e;
    --story-muted: #65717a;
    --story-line: #eae6df;
    display: block;
    margin: 24px auto 0;
    max-width: 440px;
    text-align: left;
  }
  .feature-story-tabs {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: #f1ece4;
    border-radius: 13px;
  }
  .feature-story-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    min-height: 46px;
    padding: 9px 7px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--story-muted);
    font:
      600 14px/1.5 Pretendard,
      sans-serif;
    position: relative;
    letter-spacing: -0.35px;
    cursor: pointer;
    touch-action: manipulation;
    transition:
      background-color 180ms ease,
      color 180ms ease,
      box-shadow 180ms ease;
  }
  .feature-story-tabs img {
    display: block;
    width: 23px;
    height: 23px;
    object-fit: contain;
    flex-shrink: 0;
  }
  .feature-story-tabs button[aria-selected='true'] {
    color: var(--story-ink);
    background: #fffdf9;
    box-shadow: 0 1px 3px rgb(0 0 0 / 7%);
  }
  .feature-story-tabs button:focus-visible,
  .feature-story-panel:focus-visible {
    outline: 2px solid #535681;
    outline-offset: 3px;
  }
  .feature-story-panel {
    padding: 18px 0 0;
  }
  .feature-story-body {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 126px;
  }
  .feature-story-copy {
    flex: 1;
    min-width: 0;
  }
  .nsv-landing .feature-story .feature-story-copy h3 {
    margin: 0 0 9px;
    color: var(--story-ink);
    font:
      700 18px/1.45 Pretendard,
      sans-serif;
    letter-spacing: -0.6px;
    word-break: keep-all;
    text-wrap: balance;
  }
  .nsv-landing .feature-story .feature-story-copy p {
    margin: 0;
    font:
      400 13px/1.75 Pretendard,
      sans-serif;
    color: var(--story-muted);
    letter-spacing: -0.25px;
    white-space: pre-line;
    word-break: keep-all;
  }
  .feature-story-visual {
    display: block;
    width: 105px;
    flex-shrink: 0;
    text-align: center;
  }
  .nsv-landing.feature-story-preview .banner-cta {
    flex-direction: column;
    gap: 8px;
  }
  .nsv-landing.feature-story-preview .banner-cta .lab-btn {
    width: 100%;
    min-height: 50px;
  }
  .nsv-landing.feature-story-preview .banner-cta .lab-btn {
    transition: background-color 160ms ease;
  }
  .nsv-landing.feature-story-preview .banner-cta .lab-btn:hover {
    transform: none;
    animation: none;
    box-shadow: none;
  }
  .nsv-landing.feature-story-preview .banner-cta .lab-btn-outline {
    min-height: 44px;
    background: transparent;
    border: 0;
    gap: 8px;
    padding: 8px 0;
  }
  .nsv-landing.feature-story-preview
    .banner-cta
    .lab-btn-outline
    > span:first-child {
    color: #71665b;
    font-size: 12px;
    font-weight: 400;
  }
  .nsv-landing.feature-story-preview
    .banner-cta
    .lab-btn-outline
    > span:last-child {
    color: #755033;
    font-size: 13px;
    font-weight: 650;
  }
  .nsv-landing.feature-story-preview .feature-story-cta-context {
    display: inline;
  }
  .nsv-landing.feature-story-preview .banner-cta .lab-btn:first-child {
    background: var(--nown-brand-orange);
    border-color: var(--nown-brand-orange);
  }
  .nsv-landing.feature-story-preview .banner-cta .lab-btn:first-child:hover {
    background: var(--nown-brand-orange-hover);
    border-color: var(--nown-brand-orange-hover);
  }
}
@media (max-width: 359px) {
  .feature-story-tabs button {
    gap: 6px;
    font-size: 13px;
  }
  .feature-story-visual {
    width: 88px;
  }
  .nsv-landing .feature-story .feature-story-copy h3 {
    font-size: 17px;
  }
  .nsv-landing .feature-story .feature-story-copy p {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .feature-story-tabs button {
    transition: none;
  }
}

/* Overlay both panels in one grid cell to keep the CTA stationary when switching tabs. */
@media (max-width: 991.98px) {
  .feature-story--alternating {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    border-radius: 16px;
    background: #f6eee2;
  }
  .feature-story--alternating .feature-story-tabs {
    grid-area: 1 / 1;
    gap: 12px;
    padding: 0 14px;
    border-bottom: 1px solid rgb(0 0 0 / 5%);
    border-radius: 16px 16px 0 0;
    background: transparent;
  }
  .feature-story--alternating .feature-story-tabs button {
    min-height: 52px;
    padding: 12px 2px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: color 160ms ease;
  }
  .feature-story--alternating .feature-story-tabs button::after {
    position: absolute;
    right: 4px;
    bottom: -1px;
    left: 4px;
    height: 2px;
    border-radius: 2px;
    background: #535681;
    content: '';
    opacity: 0;
    transition: opacity 160ms ease;
  }
  .feature-story--alternating
    .feature-story-tabs
    button[aria-controls='feature-panel-diagnosis']::after {
    background: #6e9d78;
  }
  .feature-story--alternating
    .feature-story-tabs
    button[aria-selected='true']::after {
    opacity: 1;
  }
  .feature-story--alternating .feature-story-tabs img {
    opacity: 0.55;
  }
  .feature-story--alternating
    .feature-story-tabs
    button[aria-selected='true']
    img {
    opacity: 1;
  }
  .feature-story--alternating .feature-story-tabs button:focus-visible {
    outline-offset: -3px;
  }
  /* Reserve the larger panel height to avoid a page jump on tab change. */
  .feature-story--alternating .feature-story-panel {
    grid-area: 2 / 1;
    padding: 0;
    opacity: 0; /* Hide descendants together, including elements with their own visibility rule. */
    visibility: hidden;
    pointer-events: none;
    border-radius: 0 0 16px 16px;
  }
  .feature-story--alternating .feature-story-panel--active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .feature-story--alternating .feature-story-body {
    box-sizing: border-box;
    gap: 12px;
    height: 100%;
    min-height: 192px;
    padding: 14px;
  }
  .feature-story--alternating
    .feature-story-panel--diagnosis
    .feature-story-body {
    flex-direction: row-reverse;
    gap: 8px;
    padding-right: 8px;
  }
  .nsv-landing
    .feature-story--alternating
    .feature-story-panel--diagnosis
    .feature-story-copy
    h3 {
    white-space: pre-line;
    text-wrap: wrap;
  }
  .feature-story--alternating .feature-story-copy {
    padding: 0;
  }
  .feature-story--alternating .feature-story-visual {
    display: block;
    width: 96px;
  }
  .feature-story--alternating .feature-story-visual > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
  }
}
@media (max-width: 359px) {
  .feature-story--alternating .feature-story-tabs {
    gap: 8px;
    padding-inline: 12px;
  }
  .feature-story--alternating .feature-story-body {
    gap: 10px;
    min-height: 202px;
    padding: 14px 12px;
  }
  .feature-story--alternating .feature-story-visual {
    width: 80px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .feature-story--alternating .feature-story-tabs button,
  .feature-story--alternating .feature-story-tabs button::after {
    transition: none;
  }
}