/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Avenir', 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    background-color: #ffffff;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    padding: 16px 0;
    transition: all 0.3s ease;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 32px;
    color: #1a1a1a;
    text-align: center;
}

h4 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 32px;
    color: #1a1a1a;
    text-align: center;   
}
.logo {
    font-size: 20px;
    font-weight: 600;
    color: #666;
    text-decoration: none;
}

.logo:hover {
    color: #1a1a1a;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 32px;
}

.nav-links a {
    text-decoration: none;
    color: #666;
    font-weight: 400;
    /*font-size: 14px;*/
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #1a1a1a;
}

/* Case Study Hero */
.case-hero {
    padding: 60px 0 60px; /* Reduced to 60 from 90px*/
    text-align: center;
    margin-top: 24px ;
}

.case-study-hero-image{
    display: block;
    width: 100%;
    margin: 16px auto;
    border-radius: 40px;
}

.case-tag {
    display: inline-block;
    background: #f0f0f0;
    color: #666;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.5px;
    margin-top: 32px;
    margin-bottom: 16px;
}

.case-hero h1 {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 24px;
    /*color:#764ba2;*/
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/*Project Summary Row */
.project-details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 24px;
}

.detail-item {
    text-align: center;
}

.detail-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.detail-value {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

/* Stat strip — a fast, numbers-only "at a glance" line under the hero metadata,
   for a reader who wants proof of impact before reading Overview/My Impact. */
.stat-strip-title {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 24px;
    margin-bottom: 8px;
}

.stat-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #666;
}

.stat-strip strong {
    color: #1a1a1a;
    font-weight: 700;
}

.stat-strip-divider {
    color: #ccc;
}

/* Project Overview Section */
.overview {
    padding: 40px 0;
    background-color: #fafafa;
}

.overview-content {
    text-align: center;
}

.overview-text {
    font-size: 24px;
    color: #1a1a1a;
    line-height: 1.5;
    font-weight: 400;
    max-width: 1200px; /*Inreased from 700px */
    margin: 0 auto;
}

.case-note {
    font-size: 16px;
    color: #888;
    line-height: 1.5;
    font-weight: 400;
    max-width: 700px;
    margin: 20px auto 0;
    text-align: center;
}


/* Content Sections */
.content-section {
    padding: 40px 0; /*originally set to 60px*/
}

.content-section-narrow {
    padding: 20px 0;
}

.content-section.alt-bg {
    background-color: #fafafa;
}

.content-section.black {
    background-color: #000000;
}

.content-section.goal-section {
    /*background-color: #fafafa;*/
    background: linear-gradient(125deg, var(--token-7271da1b-9f0a-41bd-91b9-d7098d8944de, #f4edff) 0%, var(--token-a37e6c3e-a10c-437b-b258-07d1d49555da, rgb(252, 235, 239)) 100%);
}

.content-section h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #1a1a1a;
}

.content-section h4 {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin: 48px;
}

.content-section p {
    font-size: 18px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
}

.content-section-narrow p {
    font-size: 18px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Goal Section */
.goal-text {
    font-size: 20px;
    font-weight: 400;
    color: white;
    margin-bottom: 32px;
}

/* Process steps */
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin: auto;
    padding: 24px 0px; /* Top and bottom padding only */
    width: 80%;
}

/* UNUSED (audit 2026-07-31): .process-grid-2 not applied by any HTML element
.process-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin: auto;
    padding: 24px;
    width: 100%;
}
*/

/* Solution Overview */
.solution-overview {
    padding: 80px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
}

.solution-content {
    max-width: 1200px;
    margin: 0 auto;
}

.solution-text {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.6;
}

.solution-goal {
    font-size: 18px;
    font-weight: 400;
    opacity: 0.9;
    line-height: 1.6;
}

/* Project Use Case Grid */

/* UNUSED (audit 2026-07-31): .project-usecase-row not applied by any HTML element
.project-usecase-row{
    display: flex;
    margin: auto;
    align-items: center;
    gap: 40px;
}
*/

/* UNUSED (audit 2026-07-31): .project-usecase-row-v1 not applied by any HTML element
.project-usecase-row-v1{
    display: flex;
    margin: auto;
}
*/

.project-usecase-image{
    display: block;
    width: 100%;
    margin: 32px auto;
    border-radius: 16px;
}

.project-usecase-image-narrow{
    display: block;
    width: 50%;
    margin: 16px auto;
    padding: 20px;
}

/* UNUSED (audit 2026-07-31): .project-usecase-column-left/-right not applied by any HTML element
.project-usecase-column-left{
     width: 50%;
     padding: 20px;
}


.project-usecase-column-right{
     width: 50%;
     padding: 20px;
}
*/


/* Features Section */
.features {
    padding: 80px 0;
    background-color: #ffffff;
}


.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.feature-card {
    text-align: center;
    padding: 40px 24px;
    background: linear-gradient(130deg, var(--token-7271da1b-9f0a-41bd-91b9-d7098d8944de, #f4edff) 0%, var(--token-a37e6c3e-a10c-437b-b258-07d1d49555da, rgb(252, 235, 239)) 100%);
    border-radius: 40px;
    box-shadow: 0 .6021873017743928px 1.8065619053231785px -1.25px #0000002e, 0 2.288533303243457px 6.8655999097303715px -2.5px #00000029, 0 10px 30px -3.75px #0000000f;  
}


.feature-card img {
    display: block;
    width: 100%;
    margin: 16px auto;
    padding: 16px;
}

.feature-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1a1a1a;
}

.feature-card p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

.feature-text {
    font-size: 18px;
    font-weight: 400;
    color: #666;
    line-height: 1.7;
    margin-bottom: 32px;
}


/* UNUSED (audit 2026-07-31): .feature-card-v1 not applied by any HTML element
.feature-card-v1 {
    text-align: center;
    padding: 40px 24px;
    background: linear-gradient(130deg, var(--token-7271da1b-9f0a-41bd-91b9-d7098d8944de, #f4edff) 0%, var(--token-a37e6c3e-a10c-437b-b258-07d1d49555da, rgb(252, 235, 239)) 100%);
    border-radius: 40px;
    box-shadow: 0 .6021873017743928px 1.8065619053231785px -1.25px #0000002e, 0 2.288533303243457px 6.8655999097303715px -2.5px #00000029, 0 10px 30px -3.75px #0000000f;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 40px;
    height: 720px;
    justify-content: flex-start;
    overflow: hidden;
    padding: 40px;
    position: relative;
    width: 1080px;
    will-change: var(--framer-will-change-override, transform);
    z-index: 0;
}
*/

/* Results Section */
.results {
    padding: 40px 0; /* reduced from 80 to 40*/
    background-color: #fafafa;
}

.results h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #1a1a1a;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

/* UNUSED (audit 2026-07-31): .results-intro not applied by any HTML element
.results-intro {
    margin-top: 64px;
    margin-bottom: 64px;
}
*/

.results p {
    font-size: 18px;
    color: #666;
    line-height: 1.7;
    max-width: 1200px;
    margin: 0 auto;
}

/* UNUSED (audit 2026-07-31): .results-image not applied by any HTML element
.results-image{
    display: block;
    width: 100%;
    margin: 16px auto;
}
*/

.result-card {
    background: white;
    padding: 40px 32px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.result-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.result-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1a1a1a;
}

.result-card p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

/*Metics and numbers */

.numbers-grid {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));*/
    grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
    gap: 16px;
    text-align: center;
}

.number-card {
    background: white;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-top: 24px;
}

.number-card h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1a1a1a;
}

.number-card p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

/* Grad-accent: opt-in modifier giving a closing Results grid more visual weight — gradient
   number text + top accent bar, matching the hero h1 / homepage highlights-strip gradient
   treatment elsewhere on the site, so the case study's final numbers read as a deliberate close. */
.number-card.grad-accent {
    position: relative;
    overflow: hidden;
}
.number-card.grad-accent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.number-card.grad-accent h2 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.number-card a {
    color: #05A0D1;
    text-decoration: none;
    font-weight: 500;
}

/* Concept-tint: soft lavender/pink gradient Results treatment, applied sitewide 2026-07-31,
   superseding .metric-band (too loud/heavy per feedback) as the default closing-numbers component
   on all 6 case studies. No top accent bar, no box-shadow — a quieter alternative to both
   .grad-accent (bar + white bg) and .metric-band (solid full-bleed gradient block). */
.number-card.concept-tint {
    background: linear-gradient(135deg, #f4edff 0%, #fcebef 100%);
    box-shadow: none;
}
.number-card.concept-tint h2 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Metric band: solid-gradient Results treatment — applied sitewide 2026-07-31, then superseded the
   same day by .number-card.concept-tint above per feedback that the full gradient block was too
   loud. Kept defined (unused on live pages) since theme-cards-variations-2026-07-31.html still
   documents it as a historical variant. */
.metric-band {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    text-align: center;
    margin: 40px 0;
}
.metric-band-item h2 {
    color: white;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}
.metric-band-item p {
    color: rgba(255,255,255,0.85);
    font-size: 16px;
    margin: 0;
}

/* Image caption: small muted italic label under a content image, for images that need a
   title/description beyond what surrounding prose already gives them. Qualified with the parent
   type+class (.content-section p.image-caption) so it reliably beats .content-section p's
   font-size/color/margin-bottom (0,1,1 specificity) — a bare .image-caption class (0,1,0) was
   being silently overridden by that rule whenever the caption sat inside a .content-section. */
.content-section p.image-caption {
    font-size: 14px;
    color: #999;
    font-style: italic;
    text-align: center;
    margin: 8px 0 0;
    padding-bottom: 20px;
}



/*Launch Announcements*/

.launch-hero {
    padding: 0px; /* Reduced to 90 from 120px*/
    text-align: center;
}

.launch-hero-image{
    display: block;
    width: 50%;
    margin: 16px auto;
    border-radius: 8px;
}

/* UNUSED (audit 2026-07-31): old announcements-list layout, superseded by .number-card + .announcement-source
.launch-announcements {
    margin: 60px 0;
    width: 80%;
}

.launch-announcements a{
    text-decoration: none;
}

.section-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 32px;
    padding: 60px;
    color: #1a1a1a;
    text-align: center;
}


.announcements-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
*/

.announcement-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid #f0f0f0;
}

.announcement-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    border-color: #e0e0e0;
}

/* UNUSED (audit 2026-07-31): old announcements-list layout, superseded by .number-card + .announcement-source
.announcement-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

.announcement-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo-placeholder {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
}

.announcement-content {
    flex: 1;
    min-width: 0;
}
*/

.announcement-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
    line-height: 1.4;
}

/* UNUSED (audit 2026-07-31): old announcements-list layout, superseded by .number-card + .announcement-source
.announcement-subtitle {
    font-size: 16px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 8px;
}

.announcement-meta {
    font-size: 14px;
    color: #999;
    font-weight: 500;
}
*/

.announcement-source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
}

.external-link-icon {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

/* UNUSED (audit 2026-07-31): .link-icon-arrow not applied by any HTML element (also malformed: stroke::currentColor)
.link-icon-arrow{
     viewBox:0 0 24 24;
    fill:none;
    stroke::currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
*/


/* Back to Portfolio */
.back-to-portfolio {
    padding: 60px 0;
    text-align: center;
}

.back-button {
    display: inline-block;
    padding: 16px 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.back-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-on-scroll {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

.animate-on-scroll.visible {
    opacity: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    .case-hero h1 {
        font-size: 40px;
    }

    .project-details {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .overview-text {
        font-size: 20px;
    }

    .content-section h2 {
        font-size: 28px;
    }

    .content-section p {
        font-size: 16px;
    }

    .solution-text {
        font-size: 20px;
    }

    .features-grid,
    .results-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .nav-links {
        display: none;
    }
}

@media (max-width: 480px) {
    .case-hero h1 {
        font-size: 32px;
    }

    .project-details {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .overview-text {
        font-size: 18px;
    }

    .content-section h2 {
        font-size: 24px;
    }

    .solution-text {
        font-size: 18px;
    }
}


/* Responsive Design */
@media (max-width: 768px) {
body {
    padding: 20px;
}

/* UNUSED (audit 2026-07-31): .section-title base is dead, override is inert
.section-title {
    font-size: 28px;
}
*/

.announcement-item {
    padding: 20px;
    gap: 12px;
}

/* UNUSED (audit 2026-07-31): .announcement-logo/.logo-placeholder base is dead, overrides are inert
.announcement-logo {
    width: 40px;
    height: 40px;
}

.logo-placeholder {
    width: 28px;
    height: 28px;
    font-size: 16px;
}
*/

.announcement-title {
    font-size: 16px;
}
}

/* UNUSED (audit 2026-07-31): loading-skeleton shimmer, never applied by any HTML element
@keyframes shimmer {
0% { background-position: -200px 0; }
100% { background-position: calc(200px + 100%) 0; }
}

.shimmer {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200px 100%;
animation: shimmer 1.5s infinite;
}
*/


/* Newly added - Solution Section - incorporates slidedeck controls */

.solutions {
    padding: 80px 0;
    background-color: #ffffff;
}

/* UNUSED (audit 2026-07-31): abandoned slider scaffold, superseded by .solutions > .container > .slider-frame/.controls
.solution-container {
    max-width: 1200px;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.solution-header {
    text-align: center;
    margin-bottom: 3rem;
}

.solution-title {
    font-size: 3rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.solution-subtitle {
    font-size: 1.2rem;
    color: #6b7280;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}
*/

.slider-frame {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-bottom: 2rem;
    width: 100%;
    max-width: 100%;
    /*background: #f8fafc;*/
    /*border: 2px solid #e2e8f0;*/
}

.cards-container {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
}

/* Each .solution-card is one carousel "slide slot" — always exactly 100% of .slider-frame's width, with zero margin, so the JS's translateX(-100% * index) math lines up perfectly and nothing overflows .slider-frame's overflow:hidden. */
.solution-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

/* .card-visual is the actual visible card: 80% wide and centered within its slide slot. All card styling (background, shadow, rounded corners) lives here instead of on .solution-card. */
.card-visual {
    width: 80%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    background: linear-gradient(135deg, #fef3f2 0%, #fef2f2 100%);
}

.solution-card:nth-child(1) .card-visual {
    background: linear-gradient(135deg, #fef3f2 0%, #fef2f2 100%);
}

.solution-card:nth-child(2) .card-visual {
    background: linear-gradient(135deg, #f0fdf4 0%, #f0f9ff 100%);
}

.solution-card:nth-child(3) .card-visual {
    background: linear-gradient(135deg, #fefce8 0%, #fdf4ff 100%);
}

.card-image {
    width: 100%;
    max-width: 720px; /* initial 400px */
    height: auto; /* initial 250px */
    object-fit: contain;
    border-radius: 12px;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    /*box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);*/
}

/* UNUSED (audit 2026-07-31): .card-content not applied by any HTML element (markup uses .card-title/.card-description directly)
.card-content {
    width: 100%;
    max-width: 500px;
}
*/

.card-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.card-description {
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 0.75rem;
    max-width: 100%;
}

.controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 40px;
}

.control-btn {
    width: 25px; /* reduced it from 50px */
    height: 25px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.control-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.indicators {
    display: flex;
    gap: 0.5rem;
}

.indicator {
    width: 8px; /* reduced it from 12px */
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    transform: scale(1.2);
}

.card-number {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .solution-container {
        padding: 1.5rem;
        margin: 1rem;
    }

    .solution-title {
        font-size: 2rem;
    }

    .card-visual {
        width: 90%;
        padding: 1.5rem;
    }

    .card-image {
        height: 200px;
    }

    .card-title {
        font-size: 1.5rem;
    }

    .card-description {
        font-size: 0.95rem;
    }
}

/* Skills/Process list — dedicated case-study classes, decoupled from the homepage's .ways-* classes (Section 2/12 finding: reusing homepage classes here meant a homepage
   redesign could silently break every case study, and vice versa). Same visuals as before. */
section.skills-list {
    padding-bottom: 60px;
}

.skill-item {
    align-content: flex-start;
    align-items: flex-start;
    align-self: start;
    background-color: #fff;
    border-radius: 24px;
    display: flex;
    flex: none;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;
    height: min-content;
    justify-content: flex-start;
    justify-self: start;
    overflow: hidden;
    padding: 24px;
    position: relative;
    width: 100%;
    outline: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 16px;
}

.skill-icon-box {
    aspect-ratio: 1 / 1;
    background: linear-gradient(152deg, #f4edff 0%, rgb(252, 235, 239) 141%);
    border-radius: 24px;
    flex: none;
    overflow: hidden;
    position: relative;
    width: 100px;
}

.skill-icon {
    flex: none;
    height: 42px;
    left: calc(50% - 42px / 2);
    position: absolute;
    top: calc(48.75% - 42px / 2);
    width: 42px;
}

.skill-image {
    width: 100%;
    height: 48px;
    position: relative;
    overflow: hidden;
}

.skill-title {
    color: #1a1a1a;
    flex: none;
    height: auto;
    position: relative;
    white-space: pre-wrap;
    width: 100%;
    word-break: break-word;
    word-wrap: break-word;
    outline: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-shrink: 0;
}

.skill-item p {
    font-size: 18px;
    color: #666;
    line-height: 1.7;
}

/* Process sub-items — nested under a single parent section (e.g. "What it takes to build a chatbot").
   Title is deliberately smaller than .content-section h2 (32px) so the section-title vs sub-item-title
   hierarchy reads clearly at a glance. */
.process-subitem {
    margin-top: 32px;
}

.process-subitem-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
}

/* =========================================================
   Reusable components from the NFL Bot concept exploration
   (nfl-bot-visual-concept.html) — added for adoption across
   other case studies once patterns are approved per-page.
   ========================================================= */

/* Icon badge row: soft pill treatment for a row of impact metrics */
.stat-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.stat-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f7f5ff;
    border-radius: 30px;
    padding: 10px 18px;
    font-size: 14px;
    color: #444;
}

.stat-badge svg { width: 18px; height: 18px; flex-shrink: 0; color: #764ba2; }
.stat-badge strong { color: #1a1a1a; font-weight: 700; }

/* Hero metadata divider: separates a primary metadata group from a secondary one below it */
.meta-divider {
    border: none;
    border-top: 1px solid #eee;
    max-width: 900px;
    margin: 0 auto 28px;
}

/* Overview: emphasized-phrase treatment for the 1-line project summary under the hero image */
.overview-emphasis {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    font-size: 24px;
    line-height: 1.5;
    color: #1a1a1a;
}

/* Brand-gradient text highlight — usable inside any paragraph, not just .overview-emphasis */
.highlight {
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section heading eyebrow: small colored label naming a section's narrative role above its h2/h3 */
.heading-eyebrow { margin-bottom: 24px; text-align: center; }
.heading-eyebrow .eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    color: #764ba2;
}
.heading-eyebrow h2, .heading-eyebrow h3 { margin-bottom: 0; }

/* Role chips: scannable pill tags, an alternative to a dense run-on responsibilities sentence */
.role-intro {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 20px;
}
.role-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.role-chip {
    background: #f7f5ff;
    color: #4a3a70;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
}

/* Approach mini-cards: quiet clickable jump-links to matching detail sections further down the page */
.approach-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}
.approach-toc-item {
    flex: 1 1 200px;
    display: block;
    text-decoration: none;
    background: #faf9ff;
    border: 1px solid #ece6fb;
    border-radius: 14px;
    padding: 16px 18px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.approach-toc-item:hover {
    border-color: #764ba2;
    background: #f4edff;
}
.approach-toc-number {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #764ba2;
    letter-spacing: .5px;
    margin-bottom: 6px;
}
.approach-toc-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #444;
}

/* Skills: scannable card — small icon + title row, description centered underneath */
.skills-scannable {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    padding-bottom: 20px; /* Added a padding at the bottom to make sure there is space underneath when used in between paragraphs */
}
.skill-card-v2 {
    background: #fff;
    border-radius: 20px;
    outline: 1px solid #f0f0f0;
    padding: 24px;
    text-align: center;
}
.skill-card-v2-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}
.skill-card-v2-icon { width: 28px; height: 28px; flex-shrink: 0; }
.skill-card-v2-head h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}
.skill-card-v2 p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Process sub-item number badge, and an opt-in vertical-line accent for .process-subitem.
   Kept as an additional ".subitem-line" modifier rather than changing the base .process-subitem
   rule above, so pages already using the plain spacing-only .process-subitem are unaffected. */
.process-subitem-number {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #764ba2;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}
.process-subitem.subitem-line {
    margin-top: 0;
    border-left: 3px solid #764ba2;
    padding: 4px 0 4px 24px;
    margin-bottom: 28px;
    /* Keeps the anchor target clear of the fixed header when a mini-card jump-link scrolls here */
    scroll-margin-top: 100px;
}
.process-subitem.subitem-line:last-child { margin-bottom: 0; }
/* The base .process-subitem-title rule above assumes a block-level heading (e.g. <h3>) — this variant
   uses a <span> instead, so display:block must be set explicitly here rather than relying on the tag default. */
.process-subitem.subitem-line .process-subitem-title {
    display: block;
    margin-bottom: 8px;
}
.process-subitem.subitem-line p { margin-bottom: 0; }

/* Light-to-dark 5-step palette for a numbered sequence, applied alongside .subitem-line via .step-1–.step-5 */
.process-subitem.subitem-line.step-1 { border-left-color: #c3aef0; }
.process-subitem.subitem-line.step-1 .process-subitem-number { color: #c3aef0; }
.process-subitem.subitem-line.step-2 { border-left-color: #a688e6; }
.process-subitem.subitem-line.step-2 .process-subitem-number { color: #a688e6; }
.process-subitem.subitem-line.step-3 { border-left-color: #8c68d9; }
.process-subitem.subitem-line.step-3 .process-subitem-number { color: #8c68d9; }
.process-subitem.subitem-line.step-4 { border-left-color: #7350c9; }
.process-subitem.subitem-line.step-4 .process-subitem-number { color: #7350c9; }
.process-subitem.subitem-line.step-5 { border-left-color: #5b3aa8; }
.process-subitem.subitem-line.step-5 .process-subitem-number { color: #5b3aa8; }

/* =========================================================
   Reusable components from the Amazon Shopping case study
   rewrite — added for adoption across other case studies.
   ========================================================= */

/* Tiles-fill: opt-in modifier for .results-grid/.numbers-grid/.skills-scannable so the last row's
   cards stretch to fill the row instead of leaving empty space when the item count doesn't
   evenly divide into the fitted column count (same problem the NFL concept file hit). */
.results-grid.tiles-fill, .numbers-grid.tiles-fill, .skills-scannable.tiles-fill {
    display: flex;
    flex-wrap: wrap;
}
.results-grid.tiles-fill .result-card,
.numbers-grid.tiles-fill .number-card {
    flex: 1 1 280px;
}
.skills-scannable.tiles-fill .skill-card-v2 {
    flex: 1 1 220px;
}

/* Tiles-fill-3: opt-in wider basis so a 5-item tiles-fill grid wraps 3-then-2 instead of the
   default 4-then-1 (a single lonely full-width card on its own row looks odd). */
.skills-scannable.tiles-fill-3 .skill-card-v2,
.results-grid.tiles-fill-3 .result-card {
    flex-basis: 300px;
}

/* Single-row-4: forces exactly 4 columns in one row on wide screens (instead of the default
   auto-fit/minmax wrapping to 3+1), falling back to the normal responsive grid below 900px
   so mobile/tablet don't get squeezed into 4 cramped columns. */
@media (min-width: 900px) {
    .results-grid.single-row-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Grid-2x2: balanced 2-column, 2-row layout for exactly 4 items — avoids both a cramped
   4-across single row and an orphan stretched card left over from tiles-fill-3. */
@media (min-width: 640px) {
    .results-grid.grid-2x2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Area cards: icon-topped pair layout for a 2-item "areas of ownership" summary — echoes
   the icon+title language of .skill-card-v2 immediately below it in the Role section,
   instead of stretching 2 items across the auto-fit .results-grid built for 3-item sets. */
.area-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
.area-card {
    background: white;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.area-card svg {
    width: 26px;
    height: 26px;
    color: #764ba2;
    margin-bottom: 14px;
}
.area-card .area-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #764ba2;
    margin-bottom: 10px;
}
.area-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.5;
}
@media (max-width: 640px) {
    .area-grid {
        grid-template-columns: 1fr;
    }
}

/* Area split: alternate 2-item "areas of ownership" layout — a plain vertical divider
   between two panels instead of icon-topped cards. Description font-size kept lower
   (16px vs. the icon-card variant's 18px) so the split-panel's larger overall footprint
   doesn't read heavier than the rest of the page. */
.area-split {
    display: flex;
    align-items: stretch;
}
.area-split-item {
    flex: 1;
    padding: 0 40px;
}
.area-split-item:first-child {
    padding-left: 0;
}
.area-split-item:last-child {
    padding-right: 0;
}
.area-split-divider {
    width: 1px;
    background: #e5e5e5;
    margin: 4px 0;
}
.area-split-item .area-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #764ba2;
    margin-bottom: 12px;
}
.area-split-item h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.5;
}
@media (max-width: 640px) {
    .area-split {
        flex-direction: column;
        gap: 24px;
    }
    .area-split-divider {
        display: none;
    }
    .area-split-item {
        padding: 0 !important;
    }
}

/* Numbered: opt-in modifier for .result-card that adds a left accent bar + a small numbered
   label above the existing label/heading pair. Useful for an enumerated set of pain
   points/themes where some items don't cleanly map to a single icon (e.g. "fragmented
   context" has no obvious universal icon) — numbering signals "these are N distinct things"
   without forcing icon semantics that would feel arbitrary on a subset of the cards. */
.result-card.numbered {
    border-left: 4px solid #764ba2;
}
.result-card.numbered .result-card-number {
    font-size: 13px;
    font-weight: 700;
    color: #764ba2;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

/* Problem pair: presents a linked user-problem/business-problem pair as two panels
   joined by a connector, instead of two visually-identical, unrelated-looking cards. */
.problem-pair {
    display: flex;
    align-items: stretch;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto 32px;
}
.problem-pair-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eee;
    padding: 28px;
    text-align: center;
}
.problem-pair-icon svg { width: 28px; height: 28px; color: #764ba2; margin-bottom: 12px; }
.problem-pair-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 10px;
}
.problem-pair-question {
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.4;
}
.problem-pair-link {
    flex-shrink: 0;
    align-self: center;
    font-size: 20px;
    color: #764ba2;
    font-weight: 700;
}
@media (max-width: 700px) {
    .problem-pair { flex-direction: column; }
    .problem-pair-link { transform: rotate(90deg); }
}

/* =========================================================
   Reusable components from the Sumo Logic case study rewrite
   ========================================================= */

/* Persona card: bordered card with a role tag, name, description, and use-case image —
   for individual user personas, as opposed to .skill-card-v2 (skills) or .result-card (facts). */
.persona-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
}
.persona-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 24px;
    padding: 32px;
}
.persona-role-tag {
    display: inline-block;
    background: #f7f5ff;
    color: #4a3a70;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}
.persona-card h3 { font-size: 18px; margin-bottom: 12px; }
.persona-card p { font-size: 16px; color: #666; line-height: 1.6; margin-bottom: 20px; }
.persona-card img { display: block; width: 70%; margin: 0 auto; border-radius: 16px; }

/* User quote: a dedicated component for direct customer quotes (e.g. NPS verbatims),
   distinct from .result-card, which is meant for label + fact tiles, not quoted speech. */
.user-quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.user-quote {
    background: #f7f5ff;
    border-radius: 20px;
    padding: 24px;
}

/* Example query: reuses .user-quote's quiet visual language (same background, radius, italic
   treatment) for a single centered illustrative query/example — not a real attributed quote, so
   kept as its own class rather than reusing .user-quote directly, but intentionally styled to
   match it. Built for Samsung's "Remind me to stop at the grocery store..." example, which
   previously sat in a full-bleed gradient hero band (.solution-overview) — too loud for an
   illustrative aside inside "The Approach" section. */
.example-query {
    background: #f7f5ff;
    border-radius: 20px;
    padding: 24px 32px;
    max-width: 640px;
    margin: 0 auto 24px;
    text-align: center;
    font-size: 17px;
    font-style: italic;
    color: #1a1a1a;
    line-height: 1.6;
}
.user-quote p.quote-text {
    font-size: 16px;
    color: #1a1a1a;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 16px;
}
.user-quote-source {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #764ba2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Media photo frame: a bordered/shadowed mat around launch-event photos in Media Coverage sections
   (e.g. alexa-plus-launch.png, lets-chat-launch.png, sumo-ipo-story.png), so the photo reads as
   part of the Media Coverage section's visual language instead of a bare full-bleed image reused
   from elsewhere on the page. Matches .media-mention's own border/radius so the two feel related. */
.media-photo-frame {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin: 24px 0;
}
.media-photo-frame img {
    display: block;
    width: 100%;
    border-radius: 12px;
}
/* Compact modifier: for tall/portrait source images (e.g. a screenshotted LinkedIn post) that would
   otherwise dominate the page at full width — caps the frame's width and centers it instead of
   cropping or distorting the image. */
.media-photo-frame.compact {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* Media mention: a press/media coverage tile that shows a paraphrased snippet (not a verbatim
   quote) plus an explicit link to the source article — distinct from .user-quote (first-person
   customer speech) and .number-card (big numbers), neither of which fit a paraphrased press mention. */
.media-mention-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.media-mention {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 24px;
}
.media-mention-source {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #764ba2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.media-mention p.snippet {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 16px;
}
.media-mention-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #764ba2;
    text-decoration: none;
}
.media-mention-link img { width: 14px; height: 14px; }

/* Process sub-item with image: extends .subitem-line (vertical-line detail block) to support a
   title + description + screenshot, for feature walkthroughs (title cards on top via .approach-toc,
   detail below via this) — reusable anywhere a numbered/vertical-line breakdown needs visual proof
   per item, not just text (the base .subitem-line pattern from the NFL case study is text-only). */
.process-subitem.subitem-line.has-image img {
    display: block;
    width: 100%;
    margin-top: 16px;
    border-radius: 12px;
}

/* Password Gate — shared across all gated case studies (alexa-plus, alexa-nfl-bot, amazon-shopping) */
.content-section.fade-bottom {
    position: relative;
}
.content-section.fade-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 1) 90%);
}
.protected-gate {
    padding: 64px 0 80px;
}
.gate-card {
    max-width: 460px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(130deg, #f4edff 0%, rgb(252, 235, 239) 100%);
    border-radius: 24px;
    box-shadow: 0 .6021873017743928px 1.8065619053231785px -1.25px #0000002e, 0 2.288533303243457px 6.8655999097303715px -2.5px #00000029, 0 10px 30px -3.75px #0000000f;
    padding: 48px 40px;
}
.gate-icon {
    font-size: 28px;
    margin-bottom: 16px;
}
.gate-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
}
.gate-card p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 24px;
}
.gate-card p:last-of-type {
    margin-bottom: 0;
}
.gate-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.gate-input {
    flex: 1;
    min-width: 180px;
    padding: 14px 20px;
    border: 1px solid #ddd;
    border-radius: 50px;
    font-size: 16px;
    font-family: inherit;
    color: #1a1a1a;
    outline: none;
    background: #ffffff;
    transition: border-color 0.3s ease;
}
.gate-input:focus {
    border-color: #764ba2;
}
.gate-button {
    padding: 14px 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gate-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.gate-error {
    margin-top: 16px;
    color: #c0392b;
    font-size: 14px;
    font-weight: 600;
}
/* Inline text link — shared style for links that appear inline within body copy
   (as opposed to nav links, buttons, or media-mention links, which have their own treatments) */
.inline-text-link {
    color: #764ba2;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.inline-text-link:hover {
    color: #667eea;
}
.inline-text-link .external-link-icon {
    margin-left: 2px;
    vertical-align: -2px;
}
@media (max-width: 600px) {
    .gate-card {
        padding: 36px 24px;
    }
    .gate-form {
        flex-direction: column;
    }
}


/* ---- Moved from page-level <style> blocks ---- */
      /* Hobby case-study additions: keep every image inside the column, no horizontal scroll */
      .story-page img, .story-page video { max-width: 100%; height: auto; display: block; }
      .story-page .hobby-cover { width: 100%; border-radius: 16px; }
      .story-page .shot-caption { font-size: 0.9rem; color: #6b6b80; margin: 0 0 24px; }
      .story-page .shot-pair img { width: 100%; border-radius: 16px; }
      .story-page video.demo { width: 100%; border-radius: 16px; margin: 24px 0 8px; }
      @media (max-width: 768px) { .story-page .shot-pair { grid-template-columns: 1fr; } }
      html, body { overflow-x: hidden; }
          .story-page .learnings-list { list-style: none; counter-reset: learn; margin: 24px 0 0; padding: 0; }
      .story-page .learnings-list li { counter-increment: learn; border-left: 2px solid #764ba2; padding: 4px 0 4px 20px; margin: 0 0 24px; line-height: 1.6; color: #444; }
      .story-page .learnings-list li strong { display: block; color: #1a1a1a; margin-bottom: 2px; }
      .story-page .learnings-list li strong::before { content: "0" counter(learn); display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: #764ba2; margin-bottom: 4px; }
      .story-page .decision { margin: 16px 0; }
      .story-page .decision p { margin: 4px 0; }
      .story-page .timeline li { margin-bottom: 12px; line-height: 1.6; }
      .story-page img { max-width: 100%; height: auto; display: block; }
    .story-page .solution-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 24px 0; }
      .story-page .solution-grid .solution-card { width: 100%; }
      .hobby-page img, .hobby-page video { max-width: 100%; height: auto; display: block; }
      .hobby-page .hobby-cover { width: 100%; border-radius: 16px; }
      .hobby-page .shot { width: 100%; border-radius: 16px; margin: 24px 0 8px; }
      .hobby-page .shot-caption { font-size: 0.9rem; color: #6b6b80; margin: 0 0 24px; }
      .hobby-page .shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
      .hobby-page .shot-pair img { width: 100%; border-radius: 16px; }
      .hobby-page video.demo { width: 100%; border-radius: 16px; margin: 24px 0 8px; }
      @media (max-width: 768px) { .hobby-page .shot-pair { grid-template-columns: 1fr; } }
          .center-img { margin-left:auto !important; margin-right:auto !important; }
      .hobby-page .shot-trio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; margin: 24px 0; }
      .hobby-page .shot-trio-row img { width: 100%; border-radius: 16px; }
      .hobby-page .shot-trio-row img.shot-gif { width: auto; height: 260px; max-width: 100%; margin: 0 auto; object-fit: contain; }
      @media (max-width: 768px) { .hobby-page .shot-trio-row { grid-template-columns: 1fr; } }
      .hobby-page .magic-row { display: grid; grid-template-columns: auto auto; gap: 8px; justify-content: center; align-items: center; margin: 24px 0; }
      .hobby-page .magic-row img.shot-gif { height: 280px; width: auto; max-width: 100%; object-fit: contain; border-radius: 16px; }
      @media (max-width: 768px) { .hobby-page .magic-row { grid-template-columns: 1fr; } }
          .hobby-page .text-spaced p { margin: 0 0 24px; }
      .learnings-list { list-style: none; counter-reset: learn; margin: 24px 0 0; padding: 0; }
      .learnings-list li { counter-increment: learn; border-left: 2px solid #764ba2; padding: 4px 0 4px 20px; margin: 0 0 24px; line-height: 1.6; color: #444; }
      .learnings-list li strong { display: block; color: #1a1a1a; margin-bottom: 2px; }
      .learnings-list li strong::before { content: "0" counter(learn); display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: #764ba2; margin-bottom: 4px; }
          .hobby-page .caption { text-align: center; font-size: 0.9rem; color: #6b6b80; margin: 8px 0 24px; }
      .hobby-page .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
      .hobby-page .pair img { width: 100%; border-radius: 16px; }
      .hobby-page .solo { width: 100%; border-radius: 16px; margin: 24px 0; }
      @media (max-width: 768px) { .hobby-page .pair { grid-template-columns: 1fr; } }
          .hobby-page .decision-list { list-style: none; counter-reset: decision; margin: 24px 0 0; padding: 0; }
      .hobby-page .decision-list li { counter-increment: decision; border-left: 2px solid #764ba2; padding: 4px 0 4px 20px; margin: 0 0 24px; line-height: 1.6; color: #444; }
      .hobby-page .decision-list li strong { display: block; color: #1a1a1a; margin-bottom: 2px; }
      .hobby-page .decision-list li strong::before { content: "0" counter(decision); display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: #764ba2; margin-bottom: 4px; }
          .hobby-page .decision-list li { font-size: 1.15rem; padding: 6px 0 6px 24px; margin-bottom: 32px; }
      .hobby-page .decision-list li strong { font-size: 1.45rem; }
      .hobby-page .decision-list li strong::before { font-size: 0.85rem; }

/* Learnings list: body text size (18px, as .content-section p) with a smaller title */
.learnings-list li { font-size: 18px; line-height: 1.7; padding: 6px 0 6px 24px; margin-bottom: 28px; }
.learnings-list li strong { font-size: 20px; }
.learnings-list li strong::before { font-size: 0.85rem; }
.story-page .learnings-list li { font-size: 18px; line-height: 1.7; padding: 6px 0 6px 24px; margin-bottom: 28px; }
.story-page .learnings-list li strong { font-size: 20px; }
.story-page .learnings-list li strong::before { font-size: 0.85rem; }