/* case-study.css — extracted from project-neon-nights.body.html */

:root {
      --bg-soft: #f7f7f5;
      --ink-soft: #5f5f5f;
      --nn-bg: #f4f4f2;
      --nn-surface: #ffffff;
      --nn-text: #0b0b0b;
      --nn-muted: #4d4d4d;
      --nn-border: #000000;
      --nn-primary: #ec4899;
      --nn-accent: #0891b2;
      --nn-cta: #f7f000;
      --nn-focus: #1d1dff;
    }

    .section-kicker {
      letter-spacing: .12em;
      text-transform: uppercase;
      font-weight: 700;
      font-size: .75rem;
    }

    .lead {
      font-size: 1.06rem;
      line-height: 1.7;
      color: var(--nn-muted);
      max-width: 64ch;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .35rem .7rem;
      border: 3px solid #000;
      font-weight: 700;
      text-transform: uppercase;
      font-size: .72rem;
    }

    .cta-rail {
      border: 3px solid #000;
      box-shadow: 8px 8px 0 #000;
    }

    .table-qual {
      width: 100%;
      border-collapse: collapse;
      min-width: 640px;
    }

    .table-qual th,
    .table-qual td {
      border: 3px solid var(--nn-border);
      padding: .8rem;
      text-align: left;
      vertical-align: top;
    }

    .table-qual th {
      text-transform: uppercase;
      font-size: .74rem;
      letter-spacing: .08em;
      background: #f3f3f3;
    }

    .case-shell {
      background: var(--nn-bg);
      color: var(--nn-text);
    }

    .case-main {
      padding-top: 6.25rem;
    }

    .case-wrap {
      max-width: 83rem;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    .case-section {
      padding: clamp(2.8rem, 5vw, 5rem) 0;
      border-top: 3px solid var(--nn-border);
    }

    .case-section h2 {
      font-size: clamp(2rem, 4.8vw, 3.6rem);
      font-weight: 800;
      letter-spacing: -.02em;
      margin-top: .4rem;
      margin-bottom: 1rem;
    }

    .hero-grid {
      display: grid;
      gap: 1.5rem;
      align-items: start;
    }

    .hero-title {
      font-size: clamp(2.5rem, 8.5vw, 5.8rem);
      line-height: .95;
      letter-spacing: -.03em;
      margin: 1rem 0;
      font-weight: 800;
    }

    .hero-sub {
      font-size: 1.08rem;
      line-height: 1.7;
      max-width: 62ch;
      color: var(--nn-muted);
    }

    .facts-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .7rem;
      margin-top: 1.1rem;
    }

    .fact-chip {
      border: 3px solid #000;
      background: #fff;
      padding: .65rem .7rem;
      font-size: .74rem;
      text-transform: uppercase;
      letter-spacing: .07em;
      font-weight: 700;
      min-height: 44px;
      display: flex;
      align-items: center;
    }

    .fact-chip strong {
      color: var(--nn-primary);
      margin-right: .35rem;
    }

    .hero-media {
      display: grid;
      gap: .75rem;
    }

    .hero-media-main,
    .hero-media-mini {
      border: 3px solid #000;
      overflow: hidden;
      background: #000;
    }

    .hero-media-main {
      aspect-ratio: 4 / 3;
    }

    .hero-media-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .75rem;
    }

    .hero-media-mini {
      aspect-ratio: 1 / 1;
    }

    .hero-media img,
    .compare-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .section-divider {
      height: 8px;
      width: 100%;
      margin-top: 1rem;
      background: linear-gradient(90deg, var(--nn-primary) 0%, var(--nn-accent) 48%, var(--nn-cta) 100%);
    }

    .case-anchors-wrap {
      position: sticky;
      top: 5.75rem;
      z-index: 30;
      background: var(--nn-bg);
      border-top: 3px solid #000;
      border-bottom: 3px solid #000;
      margin-top: .75rem;
    }

    .case-anchors {
      display: flex;
      gap: .55rem;
      overflow-x: auto;
      padding: .65rem 0;
      scrollbar-width: none;
    }

    .case-anchors::-webkit-scrollbar {
      display: none;
    }

    .case-anchors a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: .5rem .88rem;
      border: 3px solid #000;
      background: #fff;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: .67rem;
      font-weight: 800;
      white-space: nowrap;
      color: #000;
      transition: transform .18s ease, background-color .18s ease, color .18s ease;
    }

    .case-anchors a:hover {
      background: var(--nn-cta);
    }

    .case-anchors a:active {
      transform: translate(1px, 1px);
    }

    .panel-grid {
      display: grid;
      gap: .9rem;
    }

    .panel {
      border: 3px solid #000;
      background: var(--nn-surface);
      padding: 1rem;
      box-shadow: var(--shadow-mid);
      transition: transform 180ms ease, box-shadow 180ms ease;
    }

    .panel:hover {
      transform: translate(1px, 1px);
      box-shadow: var(--shadow-soft);
    }

    .panel h3 {
      font-size: 1.3rem;
      font-weight: 800;
      margin-bottom: .35rem;
    }

    .timeline {
      display: grid;
      gap: .85rem;
    }

    .timeline-step {
      border: 3px solid #000;
      background: #fff;
      padding: 1rem;
      position: relative;
      box-shadow: var(--shadow-mid);
    }

    .timeline-step h3 {
      font-size: 1.2rem;
      font-weight: 800;
      margin-bottom: .35rem;
    }

    .timeline-step .stamp {
      display: inline-block;
      border: 3px solid #000;
      background: var(--nn-cta);
      font-size: .67rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      padding: .3rem .55rem;
      margin-bottom: .6rem;
      min-height: 44px;
      line-height: 1.4;
    }

    .metrics {
      display: grid;
      gap: .8rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .metric {
      border: 3px solid #000;
      background: #fff;
      padding: .95rem;
    }

    .metric .value {
      display: block;
      font-size: clamp(1.8rem, 4.8vw, 2.8rem);
      line-height: .95;
      font-weight: 900;
      color: var(--nn-primary);
    }

    .metric p {
      margin-top: .35rem;
      color: var(--nn-muted);
      font-size: .95rem;
      line-height: 1.45;
    }

    .compare-grid {
      display: grid;
      gap: .9rem;
    }

    .compare-card {
      border: 3px solid #000;
      background: #fff;
      overflow: hidden;
      box-shadow: var(--shadow-mid);
    }

    .compare-label {
      border-bottom: 3px solid #000;
      padding: .65rem .75rem;
      font-size: .68rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .compare-card.before .compare-label {
      background: #ffe5eb;
    }

    .compare-card.after .compare-label {
      background: #ddf7ff;
    }

    .compare-img {
      aspect-ratio: 4 / 3;
      border-bottom: 3px solid #000;
    }

    .compare-copy {
      padding: .8rem;
      color: var(--nn-muted);
      line-height: 1.55;
      font-size: .95rem;
    }

    .learn-list {
      display: grid;
      gap: .8rem;
    }

    .learn-item {
      border: 3px solid #000;
      background: #fff;
      padding: .95rem;
      box-shadow: var(--shadow-mid);
    }

    .learn-item h3 {
      font-size: 1.14rem;
      font-weight: 800;
    }

    .faq-grid {
      display: grid;
      gap: .7rem;
    }

    .faq-item {
      border: 3px solid #000;
      background: #fff;
      padding: .2rem .75rem;
    }

    .faq-item summary {
      cursor: pointer;
      font-weight: 800;
      min-height: 44px;
      display: flex;
      align-items: center;
      line-height: 1.35;
      padding: .55rem 0;
    }

    .faq-item[open] summary {
      color: var(--nn-primary);
    }

    .faq-item p {
      color: var(--nn-muted);
      line-height: 1.6;
      margin-bottom: .7rem;
    }

    .cta-neon {
      border: 3px solid #000;
      box-shadow: 8px 8px 0 #000;
      background: var(--nn-cta);
      padding: clamp(1.2rem, 3vw, 2rem);
    }
    .btn-brutal {
      min-height: var(--btn-min-h-mobile);
      transition: transform .18s ease, background-color .18s ease, color .18s ease;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    @media (min-width: 768px) {
      .panel-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .compare-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .learn-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 1024px) {
      .case-main {
        padding-top: 5.9rem;
      }

      .home-nav-top {
        padding: 1rem 0;
      }

      .home-nav-inline {
        display: flex;
      }

      .home-nav-scroll {
        display: none;
      }

      .hero-grid {
        grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
        gap: 1.8rem;
      }
    }

    @media (max-width: 768px) {
      .facts-grid {
        grid-template-columns: 1fr;
      }

      .case-wrap {
        padding: 0 1rem;
      }

      .case-anchors-wrap {
        top: 5.85rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }