@font-face { font-family: 'din-round'; font-weight: 500; src: url('din500.woff2') format('woff2'); }
@font-face { font-family: 'din-round'; font-weight: 700; src: url('din700.woff2') format('woff2'); }
@font-face { font-family: 'feather'; font-weight: 700; src: url('feather.woff2') format('woff2'); }

body { font-family: 'din-round', sans-serif; overflow-x: hidden; }

.speech-bubble { position: relative; }
.speech-bubble::after {
    /* White fill for the pointer */
    content: '';
    position: absolute;
    top: 25px;
    left: -19px;
    width: 0; height: 0;
    border-style: solid;
    border-width: 10px 20px 10px 0;
    border-color: transparent white transparent transparent;
}
.speech-bubble::before {
    /* Gray border for the pointer */
    content: '';
    position: absolute;
    top: 22px;
    left: -26px;
    width: 0; height: 0;
    border-style: solid;
    border-width: 13px 26px 13px 0;
    border-color: transparent #E5E5E5 transparent transparent;
}
::-webkit-scrollbar-track { background: #E5E5E5; }
::-webkit-scrollbar-thumb { background: #AFAFAF; border-radius: 4px; }

/* Path Animations */
.node-path { stroke: #E5E5E5; stroke-width: 12; stroke-linecap: round; fill: none; stroke-dasharray: 20 10; }

/* Progress Ring */
.progress-ring__circle {
    transition: stroke-dashoffset 0.5s ease-in-out;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* Modal Content Styling (Converted from Tailwind @apply for standard CSS support) */
.case-content h1 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-family: 'feather', sans-serif;
    color: #58CC02;
    text-align: center;
    margin-bottom: 2rem;
}
@media (min-width: 768px) {
    .case-content h1 { font-size: 3rem; line-height: 1; }
}

/* Hero Image (First Image) */
.case-content img.case-hero {
    width: 100%;
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    margin-bottom: 2rem;
    height: auto;
}

.case-content ul {
    display: block;
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
    gap: 0;
}

.case-content ul li {
    background-color: transparent;
    color: #4B4B4B;
    font-weight: 400;
    padding: 0;
    border-radius: 0;
    font-size: 1.125rem;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 0.5rem;
}

/* Special Bubble Style for Tags and Nested Lists */
.case-content ul.tags-list,
.case-content ul ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    padding-left: 0;
    justify-content: flex-start;
}

.case-content ul.tags-list li,
.case-content ul ul li {
    background-color: #E5E5E5;
    color: #777777;
    font-weight: 700;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 0;
    display: inline-block;
}

/* Tags specific adjustment */
.case-content ul.tags-list {
    justify-content: center;
    margin-bottom: 2rem;
}

.case-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #58CC02;
    margin-top: 4rem;
    margin-bottom: 1.5rem;
    border-bottom: 4px solid #58CC02;
    padding-bottom: 0.5rem;
}

.case-content h3 {
    font-family: 'din-round';
    font-weight: 700;
    font-size: 1.25rem;
}

.case-content p {
    font-size: 1.125rem;
    color: #4B4B4B;
    line-height: 1.625;
    margin-bottom: 1.5rem;
}

.case-content table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.case-content tr:nth-child(even) { background-color: #F7F7F7; }

.case-content td {
    padding: 1rem;
    border-bottom: 1px solid #E5E5E5;
    color: #4B4B4B;
}

.case-content td:first-child {
    font-weight: 700;
    color: #777777;
    width: 33.333333%;
}

.case-content hr {
    border: 0;
    height: 4rem;
}

/* Content Screenshots (Subsequent Images) */
.case-content img.case-screenshot {
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    margin-top: 3rem;
    margin-bottom: 3rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    /* Fix for tall images: Limit height to 70% of viewport */
    max-height: 70vh;
    width: auto;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform 0.2s;
}

.case-content img.case-screenshot:hover { transform: scale(1.01); }

/* Utility for images that need breathing room */
.img-padded {
    padding: 1rem 2rem;
    box-sizing: border-box;
}

.case-content em {
    display: block;
    text-align: center;
    color: #777777;
    font-size: 0.875rem;
    font-style: italic;
    margin-top: -1.5rem;
    margin-bottom: 2rem;
}

.case-content a {
    color: #1CB0F6;
    font-weight: 700;
}
.case-content a:hover { text-decoration: underline; }

/* Insights List Styling */
.case-content ul.insights-list {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.case-content ul.insights-list li {
    display: flex;
    align-items: center; /* Vertically align icon and text */
    gap: 1rem;
    background: #F7F7F7;
    border: 2px solid #E5E5E5;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 0;
}

.case-content ul.insights-list li span {
    flex: 1;
}

.insight-icon, .insight-chest {
    flex-shrink: 0;
}

/* Duo Card Box (for Updates/Notes) */
.duo-card {
    background-color: #FFFFFF;
    border: 2px solid #E5E5E5;
    border-bottom-width: 4px;
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 2rem 0;
}

/* Survey Group Layout */
.survey-group {
    margin-bottom: 2rem;
}
.survey-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.survey-header h4 {
    margin: 0;
    font-family: 'din-round', sans-serif;
    font-size: 1.25rem;
    color: #4B4B4B;
}

/* Confetti Canvas */
#confetti { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 100; }

/* Wiggle animation for trophy */
@keyframes wiggle {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}
.animate-wiggle { animation: wiggle 0.4s ease-in-out infinite; }

@keyframes pop-success {
    0% { transform: scale(1); }
    50% { transform: scale(1.6); filter: brightness(1.5); }
    100% { transform: scale(1); }
}
.animate-pop { animation: pop-success 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* GLightbox Overrides if needed */
.glightbox-clean .gslide-description { background: #202F36; color: white; font-family: 'din-round', sans-serif; text-align: center; }