/* --- SUS discovery paragraph --- */
    .sus-transition-text {
      font-size: 1rem; line-height: 1.75; color: rgba(255,255,255,0.5);
      max-width: 600px; margin: 0 0 5rem 0;
      font-family: 'Inter', sans-serif;
    }
    .sus-transition-text strong { color: #FF5C8D; font-weight: 600; }

    /* --- SUS section wrapper — matches editorial container rhythm --- */
    .sus-section-wrapper {
      width: 100%;
      padding-top: 4rem;
      border-top: 1px solid rgba(255,255,255,0.08);
      margin-bottom: 2rem;
    }

    /* --- SUS Questionnaire Section --- */
    #sus-section {
      display: flex; flex-direction: column; align-items: flex-start;
      width: 100%;
    }
    #sus-section h3 {
      font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 4px; margin: 0 0 3rem 0; text-align: left;
      color: rgba(255,255,255,0.35); font-family: 'Inter', sans-serif;
    }
    .sus-boxes-container {
      display: flex; flex-direction: column; gap: 20px;
      width: 100%; max-width: 720px;
    }
    .sus-box {
      display: flex; flex-direction: column; gap: 28px;
      padding: 32px 36px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 2px;
      opacity: 0; transform: translateX(-30px);
      transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .q-text {
      font-size: 1rem; font-weight: 500; text-align: center;
      line-height: 1.6; color: rgba(255,255,255,0.85);
      font-family: 'Inter', sans-serif;
    }
    .q-type {
      font-family: 'DM Serif Display', Georgia, serif; font-style: italic;
      font-weight: 400; color: rgba(255,255,255,0.35); font-size: 0.9rem;
    }
    .scale-container {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%; margin-top: 4px;
    }
    .scale-label {
      font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
      letter-spacing: 1px; color: rgba(255,255,255,0.3); width: 130px;
      font-family: 'Inter', sans-serif;
    }
    .scale-label.left { text-align: right; }
    .scale-label.right { text-align: left; }
    .options { display: flex; gap: 20px; justify-content: center; flex: 1; }
    .options span {
      display: block; width: 24px; height: 24px;
      border: 1px solid rgba(255,255,255,0.3); border-radius: 50%;
      background-color: transparent; transform: scale(0);
      transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                  background-color 0.4s ease, border-color 0.4s ease;
    }
    #sus-section.is-visible .sus-box { opacity: 1; transform: translateX(0); }
    #sus-section.is-visible .sus-box:nth-child(1) .options span { transition-delay: 0.3s; transform: scale(1); }
    #sus-section.is-visible .sus-box:nth-child(2) .options span { transition-delay: 0.5s; transform: scale(1); }
    #sus-section.is-visible .sus-box:nth-child(1) .options span.selected {
      transition-delay: 0.3s, 0.9s, 0.9s;
      background-color: #FF5C8D; border-color: #FF5C8D;
    }
    #sus-section.is-visible .sus-box:nth-child(2) .options span.selected {
      transition-delay: 0.5s, 1.1s, 1.1s;
      background-color: #FF5C8D; border-color: #FF5C8D;
    }

    @media (max-width: 768px) {
      .sus-box { padding: 24px 20px; }
      .scale-container { flex-direction: column; gap: 14px; }
      .scale-label { text-align: center !important; width: 100%; }
      .options { gap: 14px; }
    }

    /* --- Schematic section --- */
    .schematic-section {
      width: 100%;
      padding-top: 4rem;
      margin-bottom: 8rem;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .schematic-label {
      font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 4px; color: rgba(255,255,255,0.35);
      font-family: 'Inter', sans-serif; margin: 0 0 0.75rem 0;
    }
    .schematic-subtitle {
      font-size: 0.9rem; line-height: 1.7; color: rgba(255,255,255,0.45);
      margin: 0 0 2rem 0; font-family: 'Inter', sans-serif; max-width: 560px;
    }
    .schematic-wrapper {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 4px;
      padding: 48px 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 280px;
      background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
      background-size: 20px 20px;
      overflow: hidden;
    }
    #schematic-container { width: 100%; max-width: 860px; }
    #schematic-container svg { width: 100%; height: auto; }

    /* SVG dark theme overrides */
    #schematic-container svg .cls-1 { stroke: rgba(255,255,255,0.7) !important; }
    #schematic-container svg .cls-2 { stroke: #ff6b6b !important; }
    #schematic-container svg .cls-3 { stroke: rgba(255,180,200,0.7) !important; }
    #schematic-container svg .cls-4 { stroke: rgba(255,255,255,0.2) !important; }
    #schematic-container svg .cls-5,
    #schematic-container svg .cls-6 { stroke: #7eb8f7 !important; }
    #schematic-container svg .cls-7 { stroke: #ff6b6b !important; }
    #schematic-container svg .cls-8 { fill: rgba(255,255,255,0.85) !important; }
    #schematic-container svg .cls-9 { fill: rgba(255,255,255,0.75) !important; }

    /* Draw animation — lines */
    .sch-draw {
      stroke-linecap: round; stroke-linejoin: round;
      animation: schDraw 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }
    @keyframes schDraw { to { stroke-dashoffset: 0; } }

    /* Fade-in for filled elements and text */
    .sch-fade {
      opacity: 0;
      animation: schFade 0.6s ease-out forwards;
    }
    @keyframes schFade { to { opacity: 1; } }

    .schematic-loading {
      font-family: 'Inter', sans-serif; font-size: 0.85rem;
      color: rgba(255,255,255,0.3); font-style: italic;
    }

.cls-1{stroke:#231f20}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7{fill:none;stroke-miterlimit:10}.cls-8,.cls-9{fill:#231f20}.cls-2,.cls-5{stroke-width:4px}.cls-2,.cls-7{stroke:#ed2024}.cls-3{stroke:#f1b3d1}.cls-4{stroke:#3e5caa;stroke-dasharray:5.01 5.01}.cls-5,.cls-6{stroke:#1c75bc}.cls-9{font-family:DMSans-Regular,'DM Sans';font-size:15.52px}