#product .header {
    border-bottom: 0;
}

body#product {
    background: #F9F9F9;
}

.top-section {
    height: 800px;
    background: #FFFFFFE5;
    border-radius: 0 0 10px 10px;
    padding-top: 100px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-top: -80px;
}

.top-section__inner {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 788px;
    gap: 60px;
    align-items: center;
}

.top-section__content {
    color: #111;
    max-width: 700px;
}

.top-section__content h1 {
    font-size: 46px;
    line-height: 1.3;
    margin-bottom: 16px;
    color: #212121;
    font-weight: 600;
    margin-top: -70px;
    width: 600px;
}

.top-section__lead {
    font-size: 18px;
    line-height: 1.7;
    color: #1D1D1D;
    margin-bottom: 0px;
    font-weight: 400;
    padding-top: 0px;
    max-width: 627px;
}

.top-section__cta-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 87px;
    margin-left: -14px;
}

.cta-image {
    width: 75px;
    height: 75px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
}

.cta-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-label {
    font-size: 22px;
    font-weight: 600;
    color: #353535;
    margin: 0;
    margin-top: -12px;
    margin-left: -8px;
}

.top-section__brands {
    display: flex;
    /* gap: 6px; */
    margin-top: -2pxpx;
    margin-left: -20px;
    width: 600px;
}

.top-section__brands img {
    width: 110px;
    height: 110px;
    border-radius: 16px;
    object-fit: cover;
}

.signature-intro {
    margin: 120px 0 0;
    /* height: 150px; */
    display: flex;
    align-items: center;
    margin-top: 40px;
}

.signature-intro__inner {
    display: flex;
    width: 100%;
    gap: 80px;
    margin-top: 100px;
}

.signature-intro__left {
    width: 650px;
}

.signature-intro__left h2 {
    font-size: 32px;
    font-weight: 600;
    color: #212121;
    margin: 0;
    line-height: 1.4;
    width: 700px;
    margin-top: 70px;
}

.signature-intro__right {
    width: 695px;
    margin-top: 70px;
}

.signature-intro__lead {
    margin: 0 0 20px;
    font-size: 16px;
    color: #212121;
    font-weight: 400;
    /* white-space: nowrap; */
    width: 600px;
}

.signature-intro__body {
    margin: 0;
    font-size: 16px;
    color: #212121;
    font-weight: 400;
    line-height: 1.6;
}

.signature-visual {
    margin: 80px 0 0;
    width: 100%;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
}

.signature-visual img {
    width: 100%;
    height: 590px;
    object-fit: cover;
    display: block;
    margin-top: 60px;
}

.signature-visual-toggle {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.signature-detail {
    margin: 150px 0 0;
    width: 100%;
    margin-top: 160px;
}

.toggle-pill {
    width: 400px;
    height: 58px;
    border-radius: 40px;
    background: #e4e4e4;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    gap: 4px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-top: 0px;
}

.toggle-pill__option {
    flex: 1;
    height: 100%;
    border: none;
    border-radius: 40px;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: #7d7d7d;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle-pill__option.active {
    background: #fff;
    color: #333;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}


.signature-detail__media {
    position: relative;
    width: 100%;
}

.signature-video {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: opacity 0.3s ease;
    border-radius: 60px;
}

.signature-video.hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
}

.signature-video.show {
    opacity: 1;
    position: relative;
}

#signature-video-image {
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
    border-radius: 60px;
}

#signature-video-text {
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
    object-fit: cover;
    border-radius: 60px;
}

/* ==================== Desktop layout fix for Signature Detail Section ==================== */
@media (min-width: 992px) {
    body#product .signature-detail {
        display: block;
        margin-top: 160px;
    }

    /* CFI Callout Section: Fixed dimensions for desktop, centered */
    body#product .cfi-callout {
        width: 1560px;
        height: 539px;
        border-radius: 60px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 295px; /* 160px visual gap + 135px image extension above */
        overflow: visible; /* Allow image top to extend above section */
        padding: 0 0 80px; /* move top padding away so image top is visible */
    }

    /* CFI Callout content: add top spacing instead of section padding */
    body#product .cfi-callout__content {
        margin-top: 80px;
    }

    /* CFI Callout Image: Show top part, keep bottom positioning */
    body#product .cfi-callout__visual {
        position: absolute;
        right: 80px;
        bottom: 30px; /* 30px gap from background bottom */
        width: 565px; /* Updated width */
        height: 644px; /* Taller than background to extend above */
        object-fit: contain;
        object-position: top;
        margin-bottom: 0;
    }

    /* Blockchain Image Section: Fixed dimensions for consistent size on bigger screens */
    body#product .blockchain-image {
        width: 1148px; /* Fixed width (was max-width: 1145px) */
        height: 895px;
        max-width: none; /* Override base max-width */
    }

    /* Blockchain Cert Section: 200px gap from blockchain-image */
    body#product .blockchain-cert {
        display: block;
        margin-top: 200px; /* 200px gap from blockchain-image section */
    }

    /* Blockchain Cert GIF: Fixed dimensions and border-radius */
    body#product .blockchain-cert > .container > .row > .col-12.col-lg-6:last-child img {
        width: 600px;
        height: 600px;
        border-radius: 25px;
        object-fit: cover;
    }

    /* Blockchain Text Section: 200px gap from CFI-callout, Figma gaps for internal elements */
    body#product .blockchain-text {
        margin-top: 200px; /* 200px gap from CFI-callout section */
    }

    body#product .blockchain-text h2 {
        margin-bottom: 16px; /* Figma: 16px gap to description */
        display: block; /* Stack vertically, not inline */
        white-space: normal; /* Allow text to wrap if needed */
    }

    body#product .blockchain-text p:not(.blockchain-text__sub) {
        display: block; /* Stack vertically, not inline */
        white-space: normal; /* Allow text to wrap if needed */
    }

    body#product .blockchain-text p.blockchain-text__sub {
        margin-top: 60px; /* Figma: 60px gap from description */
    }
}

.cfi-callout {
    margin: 180px 0 0;
    width: 100%;
    height: 539px;
    border-radius: 60px;
    background: #212121;
    color: #fff;
    position: relative;
    padding: 80px 0;
    box-sizing: border-box;
    margin-top: 300px;
}

.cfi-callout__inner {
    display: flex;
    height: 100%;
    align-items: flex-start;
    justify-content: center;
    position: relative;
}

.cfi-callout .section-label.light {
    color: #bcbcbc;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    margin-left: -62px;
}

.cfi-callout h2 {
    font-size: 42px;
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
    max-width: 960px;
    margin-top: 27px;
    font-style: bold;
    margin-left: -62px;
}

.cfi-callout__body {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    max-width: 900px;
    margin: 0;
    color: #e5e5e5;
    margin-top: 100px;
    margin-left: -62px;
}

.cfi-callout__content {
    width: 743px;
    height: 379px;
    display: flex;
    flex-direction: column;
    margin-right: 680px;
}

.cfi-callout__visual {
    position: absolute;
    right: 60px;
    bottom: -100px;
    width: 535px;
    height: 644px;
    object-fit: contain;
    margin-bottom: 50px;
}

.blockchain-text {
    margin: 120px 0 0;
    width: 100%;
    text-align: center;
    margin-top: 200px;
}

.blockchain-text h2 {
    font-size: 42px;
    font-weight: 700;
    color: #212121;
    margin: 0 0 24px;
    white-space: nowrap;
    display: inline-block;
}

.blockchain-text p {
    font-size: 18px;
    font-weight: 400;
    color: #212121;
    margin: 0;
    white-space: nowrap;
    display: inline-block;
}

.blockchain-text__sub {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    white-space: normal;
    display: inline-block;
}

.blockchain-text p.blockchain-text__sub {
    color: #6EA1FF;
    margin-top: 40px;
}

.blockchain-image {
    margin: 80px 0 0;
    width: 100%;
    max-width: 1145px;
    height: 895px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: -35px;
}

.blockchain-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Blockchain frames: hide on desktop by default (mobile overlay only) */
.blockchain-frames {
    display: none;
}

.blockchain-cert {
    margin: 120px 0 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 120px;
}

.blockchain-cert .section-label {
    font-size: 18px;
    font-weight: 700;
    color: #767676;
    margin: 0 0 30px;
}

.blockchain-cert h3 {
    font-size: 38px;
    width: 587px;
    font-weight: 600;
    color: #212121;
    margin: 0 0 40px;
    line-height: 1.3;
    margin-top: -130px;
}

.blockchain-cert__description {
    font-size: 16px;
    font-weight: 400;
    color: #1D1D1D;
    line-height: 1.7;
    width: 700px;
}

.blockchain-cert__right {
    width: 600px;
    height: 600px;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -8px;
}

.blockchain-cert__right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top-section__visual {
    display: flex;
    justify-content: flex-end;
}

.top-section__visual-box {
    width: 788px;
    height: 565px;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-section__visual-box img {
    width: 86%;
    height: 86%;
    object-fit: cover;
    margin-left: 96px;
    margin-top: -95px;
}

@media (max-width: 1200px) {
    .top-section {
        padding-top: 0;
        height: auto;
    }

    .top-section__inner {
        grid-template-columns: 1fr;
    }

    .top-section__visual,
    .top-section__visual-box {
        width: 100%;
        height: auto;
    }

    .top-section__visual-box img {
        height: auto;
    }
}

@media (max-width: 837px) {
    /* Main element: Remove any desktop padding/margin */
    main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* First article (wrapper for top section) - add gap below navbar (header height + 50px spacing) */
    /* Mobile header is fixed position, auto-height with 2-row layout:
       - Header padding: 20px (10px top + 10px bottom)
       - Row 1 (logo + actions): ~50px
       - Gap between rows: 10px
       - Row 2 (navigation menu): ~50px
       - Total navbar height: ~130px
       - Plus 50px desired gap below navbar = 180px total */
    article:first-of-type {
        padding-top: 180px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        background-color: #FFFFFFE5 !important;  /* Match navbar background color */
        border-radius: 0 !important;
        border-bottom-left-radius: 50px !important;  /* 50px on bottom-left corner */
        border-bottom-right-radius: 50px !important;  /* 50px on bottom-right corner */
        overflow: hidden !important;  /* Ensure border-radius is visible */
    }
    
    /* Top Section: Override desktop negative margin, remove top padding (handled by article) */
    /* Bootstrap container handles 24px padding automatically on mobile (from main.css) */
    .top-section {
        margin-top: 0 !important;  /* Remove negative -80px from desktop */
        margin-left: 0 !important;  /* Remove negative -180px from desktop */
        margin-right: 0 !important;  /* Remove negative -180px from desktop */
        padding-top: 0 !important;  /* Top padding handled by article */
        padding-bottom: 40px !important;  /* Slight height/padding at bottom */
        padding-left: 0 !important;  /* Remove desktop padding, container handles it */
        padding-right: 0 !important;  /* Remove desktop padding, container handles it */
        height: auto !important;  /* Remove fixed 800px height on mobile */
        min-height: auto !important;
        background-color: transparent !important;  /* Background handled by article */
        border-radius: 0 !important;  /* Border-radius handled by article */
    }
    
    /* Allow overflow for top section container and inner on mobile so image can extend outside */
    .top-section .container {
        overflow-x: visible !important;
    }
    
    /* Top Section Inner: Ensure it respects container boundaries on mobile */
    .top-section__inner {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;  /* Change from grid to flex on mobile */
        flex-direction: column !important;  /* Stack content and visual vertically */
        align-items: center !important;  /* Center all children */
        overflow-x: visible !important;
    }
    
    /* Top Section Content: Remove fixed width constraints on mobile */
    .top-section__content {
        max-width: 100% !important;  /* Remove 700px max-width */
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Heading: Remove fixed width and negative margin, make responsive */
    .top-section__content h1 {
        width: 100% !important;  /* Remove fixed 600px width */
        max-width: 100% !important;
        margin-top: 0 !important;  /* Remove negative -70px margin */
        margin-bottom: 22px !important;
        font-size: clamp(24px, 6vw, 36px) !important;  /* Responsive font size */
        line-height: 1.3 !important;
    }
    
    /* Lead text: Remove fixed max-width, ensure it stays within container, fit in 2 rows */
    .top-section__lead {
        max-width: 100% !important;  /* Remove 627px max-width for mobile */
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: -30px !important;  /* 50px gap above CTA row */
        box-sizing: border-box !important;
        font-size: clamp(16px, 5vw, 22px) !important;  /* Larger font size to fit in 2 rows */
        line-height: 1.4 !important;  /* Tighter line height */
    }
    
    /* CTA row: Ensure it stays within container and maintains flex layout */
    .top-section__cta-row {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: -15 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        display: flex !important; /* Maintain flex layout */
        align-items: center !important; /* Center items vertically */
        gap: 12px !important; /* Reduced gap for mobile (was 20px) */
    }
    
    /* CTA image: Maintain size, prevent shrinking */
    .cta-image {
        width: 75px !important;
        height: 75px !important;
        flex-shrink: 0 !important; /* Prevent image from shrinking */
    }
    
    /* CTA label: Smaller font for mobile, allow wrapping */
    .cta-label {
        font-size: 18px !important; /* Reduced from 22px for mobile */
        font-weight: 600 !important;
        margin: 0 !important;
        margin-top: 0 !important; /* Remove negative margin on mobile */
        margin-left: 0 !important; /* Remove negative margin on mobile */
        flex: 1 1 auto !important; /* Allow text to take remaining space */
        min-width: 0 !important; /* Allow text to wrap if needed */
        white-space: normal !important; /* Allow text wrapping */
    }
    
    /* Brands section: Full width inside container - 5 images evenly distributed */
    /* Container has 24px padding on each side, content spans full width inside container */
    /* 5 images with 4 gaps of 4px = 16px total gap space */
    .top-section__brands {
        width: 100% !important;
        display: flex !important;
        gap: 4px !important;  /* 4 gaps × 4px = 16px total */
        justify-content: flex-start !important;
        align-items: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    .top-section__brands img {
        width: calc((100% - 16px) / 5) !important;  /* 5 images, 16px total gap (4 × 4px) */
        height: 74px !important;
        flex-shrink: 0 !important;
        object-fit: cover !important;
        border-radius: 16px !important;
    }
    
    /* CTA row: 23px gap below */
    .top-section__cta-row {
        margin-bottom: 23px !important;
    }
    
    /* CFI Callout Section: Ensure container padding is respected on mobile */
    .cfi-callout {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* CFI Callout Visual: Adjust absolute positioning to respect container padding */
    .cfi-callout__visual {
        right: 24px !important;  /* Match container padding instead of 60px */
    }
    
    /* Top Section Visual: Remove padding and allow overflow (like column pattern) - stays at container edge */
    /* Override parent's align-items: center to allow full width */
    .top-section__visual {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: none !important;
        overflow: visible !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        align-self: stretch !important;  /* Override parent's align-items: center to allow full width */
    }
    
    /* Visual box: Full width within visual container */
    .top-section__visual-box {
        width: 100% !important;
        height: 268px !important;
        border-radius: 4px !important;
        border: 2px solid transparent !important;
        opacity: 1 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: visible !important;
        max-width: none !important;
    }
    
    /* Top Section Visual image: Extends outside container to be 8px from screen edge on both sides (same as conference image) */
    .top-section__visual-box img {
        max-width: none !important;
        margin-left: -16px !important;  /* 24px container padding - 16px = 8px from screen edge */
        margin-right: -16px !important;  /* 24px container padding - 16px = 8px from screen edge */
        width: calc(100% + 32px) !important;
        height: 100% !important;
        object-fit: cover !important;
        margin-top: 0 !important;
    }
    
    /* Signature Intro Section: Stack in column layout on mobile */
    .signature-intro {
        height: auto !important;  /* Remove fixed desktop height */
        min-height: auto !important;
        overflow: visible !important;  /* Prevent scrolling */
    }
    
    .signature-intro__inner {
        display: flex !important;
        flex-direction: column !important;  /* Stack left and right in column */
        gap: 30px !important;  /* Gap between sections */
        width: 100% !important;
        margin-top: 0 !important;  /* Remove desktop margin */
        height: auto !important;  /* Auto height to fit content */
        overflow: visible !important;  /* Prevent scrolling */
    }
    
    .signature-intro__left {
        width: 100% !important;  /* Full width in column */
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Signature Intro Section: Fix text to exactly 2 rows - "Signature-Point Object Detection" (row 1) and "Solution for Luxury Authentication" (row 2) */
    .signature-intro__left h2 {
        font-size: clamp(20px, 6vw, 20px) !important;  /* Larger font so "Signature-Point Object Detection" fits on row 1 */
        width: 100% !important;  /* Remove fixed 700px width */
        max-width: 100% !important;
        line-height: 1.3 !important;  /* Line height for 2 rows */
        margin-top: 10 !important;  /* Remove desktop margin */
        margin-bottom: 20px !important;  /* 50px gap below text */
        height: auto !important;  /* Auto height to fit 2 rows */
        min-height: auto !important;
        white-space: normal !important;  /* Allow text to wrap naturally */
        overflow: visible !important;  /* Prevent scrolling */
        text-overflow: clip !important;  /* No ellipsis */
        word-break: normal !important;
        hyphens: none !important;
    }
    
    /* Hide the <br> tag and let text wrap naturally to break after "Detection" */
    .signature-intro__left h2 br {
        display: none !important;  /* Hide the <br> tag so text wraps naturally */
    }
    
    /* Force break after "Detection" by using a non-breaking space before "Solution" */
    /* This requires JavaScript or HTML change, but we can try with CSS */
    .signature-intro__left h2::before {
        content: "" !important;
    }
    
    .signature-intro__right {
        height: auto !important;
        overflow: visible !important;
        width: 100% !important;  /* Full width in column */
        max-width: 100% !important;
        margin-top: 0 !important;  /* Remove desktop margin */
    }
    
    .signature-intro__lead {
        width: 100% !important;  /* Remove fixed 600px width */
        max-width: 100% !important;
    }
    
    .signature-intro__body {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 50px !important;  /* 30px gap below text */
    }
    
    /* Signature Visual Toggle: Full width buttons, positioned right below text */
    .signature-visual-toggle {
        position: static !important;  /* Remove absolute positioning */
        width: 100% !important;  /* Full width inside container */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-top: 0 !important;  /* No extra margin, gap handled by text above */
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        z-index: auto !important;
    }
    
    .toggle-pill {
        width: 100% !important;  /* Full width inside container */
        max-width: 100% !important;
        height: 58px !important;
    }
    
    .toggle-pill__option {
        font-size: clamp(13px, 3vw, 15px) !important;  /* Responsive font size */
    }
    
    /* Signature Visual: Show buttons above image with 30px gap */
    /* MOBILE ONLY - Does not affect desktop */
    .signature-visual {
        position: static !important;  /* Remove relative positioning */
        margin-top: 0 !important;  /* Remove desktop margin */
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }
    
    /* Allow overflow for signature-visual container on mobile so image can extend outside */
    .signature-visual .container {
        overflow-x: visible !important;
        padding-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;  /* Normal column direction */
        align-items: center !important;
    }
    
    /* Signature-visual image: Extends outside container to be 8px from screen edge on both sides (same as images section) */
    .signature-visual img {
        display: block !important;
        max-width: none !important;
        margin-left: -16px !important;  /* 24px container padding - 16px = 8px from screen edge */
        margin-right: -16px !important;  /* 24px container padding - 16px = 8px from screen edge */
        width: calc(100% + 32px) !important;
        height: 282px !important;
        border-radius: 30px !important;
        border: 2px solid transparent !important;
        opacity: 1 !important;
        margin-top: 0 !important;
        margin-bottom: 80px !important;  /* 80px gap below image */
        object-fit: cover !important;
        order: 2 !important;  /* Image appears second (below buttons) */
    }
    
    /* Toggle buttons: Order 1 (appears first/above image) */
    .signature-visual-toggle {
        order: 1 !important;  /* Buttons appear first (above image) */
        margin-bottom: 30px !important;  /* 30px gap below buttons */
        position: static !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        z-index: auto !important;
    }
    
    /* Signature Detail Section: Ensure proper spacing from image above */
    .signature-detail {
        margin-top: 0 !important;  /* Remove desktop margin */
        display: flex !important;
        flex-direction: column !important;  /* Stack left and right in column */
        gap: 0 !important;
        align-items: center !important;
    }
    
    /* Allow overflow for signature-detail container on mobile so video can extend outside */
    .signature-detail .container {
        overflow-x: visible !important;
        padding-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    .signature-detail__left {
        width: 100% !important;
        max-width: 100% !important;
        order: 1 !important;  /* Text content appears first */
    }
    
    .signature-detail__right {
        width: 100% !important;
        max-width: 100% !important;
        order: 2 !important;  /* Video appears second */
        height: auto !important;  /* Remove fixed height */
        box-shadow: none !important;  /* Remove desktop shadow */
    }
    
    /* Authentication AI label: 40px gap below */
    .signature-detail__left .section-label {
        margin-top: 0 !important;  /* Gap handled by image margin-bottom */
        margin-bottom: 40px !important;  /* 40px gap below Authentication AI */
    }
    
    /* Image-Based Luxury Authentication Solution: 2 rows with smaller font */
    .signature-detail__left h3 {
        font-size: clamp(24px, 5vw, 24px) !important;  /* Smaller responsive font size */
        width: 100% !important;  /* Remove fixed 458px width */
        max-width: 100% !important;
        line-height: 1.3 !important;  /* Tighter line height for 2 rows */
        margin-top: 0 !important;
        margin-bottom: 20 !important;
        white-space: normal !important;  /* Allow text to wrap naturally */
        overflow: visible !important;
    }
    
    /* Description text: 14px font size, 3 rows, fixed dimensions */
    .signature-detail__left .section-description {
        font-size: 14px !important;  /* Fixed 14px font size */
        width: 342px !important;  /* Fixed width */
        height: 60px !important;  /* Fixed height for 3 rows */
        max-width: 342px !important;
        line-height: 1.4 !important;  /* Line height for 3 rows */
        margin-top: 0 !important;
        margin-bottom: 0 !important;  /* Gap handled by toggle buttons margin-top */
        white-space: normal !important;  /* Allow text to wrap naturally into 3 rows */
        overflow: visible !important;
    }
    
    /* Image/Text toggle buttons: 40px margin top and bottom */
    .signature-detail__left .toggle-pill {
        margin-top: 70px !important;  /* 40px gap above toggle buttons */
        margin-bottom: 40px !important;  /* 40px gap below toggle buttons */
        width: 100% !important;  /* Full width inside container */
        max-width: 100% !important;
    }
    
    /* Signature Detail Right: Remove padding and allow overflow so video can extend outside */
    .signature-detail__right {
        width: 100% !important;
        max-width: none !important;
        margin-top: 0 !important;
        height: auto !important;
        position: static !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Media wrapper: Allow overflow */
    .signature-detail__media {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        overflow: visible !important;
        max-width: none !important;
    }
    
    /* Signature-detail video: Extends outside container to be 8px from screen edge on both sides (same as images section) */
    .signature-video,
    .signature-detail__media video,
    .signature-detail__media img {
        max-width: none !important;
        margin-left: -16px !important;  /* 24px container padding - 16px = 8px from screen edge */
        margin-right: -16px !important;  /* 24px container padding - 16px = 8px from screen edge */
        width: calc(100% + 32px) !important;
        height: 286px !important;
        border-radius: 30px !important;
        opacity: 1 !important;
        object-fit: cover !important;
        margin-bottom: 80px !important;  /* 80px gap below video */
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }
    
    .signature-video.hidden {
        display: none !important;  /* Hide hidden videos completely */
    }
    
    .signature-video.show {
        display: block !important;  /* Show active video */
    }
    
    /* CFI Callout Section: Fixed dimensions and column layout */
    .cfi-callout {
        width: 374px !important;
        height: 798px !important;
        border-radius: 30px !important;
        opacity: 1 !important;
        margin-left: auto !important;  /* Center horizontally */
        margin-right: auto !important;
        margin-top: 0 !important;  /* Gap handled by video margin-bottom */
        padding: 0 !important;  /* Remove desktop padding */
    }
    
    /* CFI Callout Container: Slight left padding for texts */
    .cfi-callout .container {
        padding-left: 20px !important;  /* Slight left padding for texts */
        padding-right: 20px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* CFI Callout Inner: Column layout */
    .cfi-callout__inner {
        display: flex !important;
        flex-direction: column !important;  /* Stack all content in column */
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: 100% !important;
        gap: 0 !important;
        position: static !important;
    }
    
    /* CFI Callout Content: Order 1 (appears first), left aligned with slight gap */
    .cfi-callout__content {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;  /* Left align content */
        margin-right: 0 !important;
        order: 1 !important;
        padding: 20px 0 !important;  /* Top/bottom padding, no left/right (handled by container) */
        box-sizing: border-box !important;
    }
    
    /* Authentication AI label: 30px margin top, 38px gap below, left aligned */
    .cfi-callout .section-label.light {
        margin-left: 0 !important;  /* Remove desktop margin */
        margin-top: 30px !important;  /* 30px margin top */
        margin-bottom: 38px !important;  /* 38px gap below */
        text-align: left !important;  /* Left aligned */
        align-self: flex-start !important;  /* Align to left side */
    }
    
    /* Advanced CFI-Based heading: 2 rows, 28px gap below, left aligned */
    .cfi-callout h2 {
        font-size: clamp(18px, 4.5vw, 22px) !important;  /* Smaller font for 2 rows */
        width: 100% !important;
        max-width: 100% !important;
        line-height: 1.3 !important;  /* Tighter line height for 2 rows */
        margin-left: 0 !important;  /* Remove desktop margin */
        margin-top: 0 !important;
        margin-bottom: 28px !important;  /* 28px gap below */
        text-align: left !important;  /* Left aligned */
        white-space: normal !important;
        align-self: flex-start !important;  /* Align to left side */
    }
    
    /* Body text: 75px gap below, left aligned */
    .cfi-callout__body {
        font-size: clamp(14px, 3.5vw, 16px) !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;  /* Remove desktop margin */
        margin-top: 0 !important;
        margin-bottom: 75px !important;  /* 75px gap below */
        text-align: left !important;  /* Left aligned */
        align-self: flex-start !important;  /* Align to left side */
    }
    
    /* CFI Visual Image: Order 2 (appears last/bottom), centered */
    .cfi-callout__visual {
        order: 2 !important;  /* Image appears at bottom */
        position: static !important;  /* Remove absolute positioning */
        width: 100% !important;
        max-width: 374px !important;
        height: auto !important;
        object-fit: contain !important;
        margin-left: auto !important;  /* Center horizontally */
        margin-right: auto !important;  /* Center horizontally */
        margin-bottom: 0 !important;
        bottom: auto !important;
    }


    /* Blockchain Image Section: mobile layout with background and overlay frames */
    /* Override global rules from main.css to allow section to extend outside (mobile only, safe - only affects blockchain-image) */
    
    /* Override global * { max-width: 100%; } rule ONLY for blockchain-image section */
    section.blockchain-image {
        max-width: none !important;  /* Override global * { max-width: 100%; } */
        overflow-x: visible !important;  /* Override global section { overflow-x: hidden; } */
    }
    
    /* Override article parent overflow (mobile only) */
    article:has(> section.blockchain-image) {
        overflow-x: visible !important;  /* Override global article { overflow-x: hidden; } */
    }
    
    /* Additional specificity: Target article that directly contains blockchain-image */
    article > section.blockchain-image {
        overflow-x: visible !important;
        max-width: none !important;
    }
    
    /* Allow overflow for blockchain-image container on mobile so section can extend outside */
    .blockchain-image .container {
        overflow-x: visible !important;
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Blockchain-image section: Extends outside container to be 8px from screen edge on both sides (same pattern as other sections) */
    .blockchain-image {
        margin-top: 16px !important;  /* Combined with blue text bottom margin (~24px) ≈ 40px visual gap */
        margin-bottom: 0 !important;
        margin-left: -16px !important;  /* 24px container padding - 16px = 8px from screen edge */
        margin-right: -16px !important;  /* 24px container padding - 16px = 8px from screen edge */
        width: calc(100% + 32px) !important;
        max-width: none !important;  /* Override global * { max-width: 100%; } */
        height: 924px !important;  /* Match mobile image height */
        position: relative !important;
        background-image: url('../assets/product_page/mobile_product.png') !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        background-position: top center !important;
    }

    /* Hide inline image on mobile (we use background instead) */
    .blockchain-image picture,
    .blockchain-image img {
        display: none !important;
    }

    /* Overlay frames INSIDE the image area */
    .blockchain-frames {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 16px !important;
        position: absolute !important;
        top: 360px !important;              /* Approximate vertical position inside image */
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .blockchain-frame {
        width: 166px !important;
        height: 322px !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center !important;
        flex-shrink: 0 !important;
    }

    .blockchain-frame--left {
        background-image: url('../assets/product_page/Frame1.png') !important;
    }

    .blockchain-frame--right {
        background-image: url('../assets/product_page/Frame2.png') !important;
    }

    /* Blockchain Cert Section: mobile spacing to footer, inherit page background */
    /* Allow overflow for blockchain-cert container on mobile so GIF can extend outside */
    .blockchain-cert .container {
        overflow-x: visible !important;
    }
    
    .blockchain-cert {
        margin-top: 84px !important;
        margin-bottom: 0 !important;              /* Remove large bottom gap before footer */
        padding-bottom: 46px !important;          /* Controlled inner spacing */
        width: 100% !important;
        background-color: transparent !important; /* Use page background so section matches others */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Blockchain Cert Heading: fixed dimensions on mobile, 2 rows, add gap below */
    .blockchain-cert h3 {
        width: 340px !important;
        max-width: 340px !important;
        height: 62px !important;
        min-height: 62px !important;
        margin-left: auto !important;
        margin-right: auto !important;  /* Center within container */
        margin-bottom: 24px !important;  /* Gap between heading and description */
        margin-top: 0 !important;  /* Remove desktop negative margin */
        font-size: clamp(18px, 4vw, 22px) !important;  /* Responsive font size for 2 rows */
        line-height: 1.3 !important;  /* Tight line height to fit 2 rows in 62px */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: hidden !important;
    }

    /* Blockchain Text Section: 40px gap below CFI callout (mobile only) */
    .blockchain-text {
        margin-top: 80px !important;  /* Gap below previous section */
        width: 100% !important;
        text-align: center !important;  /* Center text in section */
    }

    /* Blockchain heading: fixed dimensions on mobile, centered */
    .blockchain-text h2 {
        font-size: clamp(25px, 4.5vw, 24px) !important;
        width: 341px !important;
        height: 62px !important;
        max-width: 341px !important;
        margin: 0 auto 24px auto !important;  /* Center block horizontally */
        white-space: normal !important;  /* Allow wrapping within fixed width */
        display: block !important;
    }

    /* Blockchain description: fixed dimensions on mobile, centered, no word breaking */
    .blockchain-text p:not(.blockchain-text__sub) {
        width: 341px !important;
        height: 60px !important;
        max-width: 341px !important;
        margin: 0 auto 90px auto !important;  /* Center block horizontally, 40px gap below */
        white-space: normal !important;  /* Allow wrapping within fixed width */
        display: block !important;
        word-break: normal !important;  /* Prevent breaking words, only break at spaces */
        hyphens: none !important;  /* Disable automatic hyphenation */
        overflow-wrap: normal !important;  /* Only break at spaces, don't break words */
    }

    /* Blockchain blue subtext: center on mobile and keep in a column */
    .blockchain-text__sub {
        display: block !important;
        width: 100% !important;
        max-width: 341px !important;
        margin: 30px auto 24px auto !important;  /* 30px top margin, centered, 24px bottom */
        text-align: center !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
    }

    /* Blockchain Cert Description: smaller font size on mobile, centered */
    .blockchain-cert__description {
        font-size: 16px !important;  /* Smaller font for mobile */
        line-height: 1.6 !important;  /* Slightly tighter line height */
        width: 100% !important;  /* Remove fixed 700px width */
        max-width: 341px !important;  /* Consistent with other mobile text widths */
        margin: 0 auto !important;  /* Center block horizontally */
    }
    
    /* Blockchain Cert Row: Remove negative margins on mobile */
    .blockchain-cert > .container > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Blockchain Cert Column (GIF): Remove padding on mobile so GIF can extend same as signature-visual image */
    .blockchain-cert > .container > .row > .col-12.col-lg-6:last-child {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Blockchain Cert GIF: Extends outside container to be 8px from screen edge on both sides (same as signature-visual image) */
    .blockchain-cert > .container > .row > .col-12.col-lg-6:last-child img {
        display: block !important;
        max-width: none !important;
        margin-left: -16px !important;  /* 24px container padding - 16px = 8px from screen edge */
        margin-right: -16px !important;  /* 24px container padding - 16px = 8px from screen edge */
        width: calc(100% + 32px) !important;
        height: auto !important;  /* Keep GIF height as is */
        border-radius: 30px !important;
        border: 2px solid transparent !important;
        opacity: 1 !important;
        margin-top: 0 !important;
        margin-bottom: 80px !important;  /* 80px gap below image */
        object-fit: cover !important;
    }
}

/* ==================== Desktop-only layout for product hero (>= 1200px) ==================== */
/* Desktop-only layout for product page (>= 992px) */
@media (min-width: 992px) {
    /* Top Section: Match index.html hero pattern */
    body#product .top-section {
        height: auto;
        margin-top: 0;
    }

    body#product .top-section > .container > .row {
        margin-left: 0;
        margin-right: 0;
    }

    body#product .top-section > .container > .row > .col-12.col-lg-6:last-child {
        padding-right: 0;
        display: flex;
        justify-content: flex-end;
    }

    body#product .top-section__content h1 {
        margin-top: 0;
    }

    body#product .top-section__cta-row {
        margin-left: 0;
    }

    body#product .top-section__brands {
        margin-left: 0;
    }

    /* Signature Visual Image: Border-radius 40px */
    body#product .signature-visual img,
    body#product #signature-visual-image {
        border-radius: 40px !important;
    }

    /* Signature Detail: Match index.html property pattern */
    body#product .signature-detail > .container > .row {
        margin-left: 0;
        margin-right: 0;
    }

    /*  */

    body#product .signature-detail > .container > .row > .col-12.col-lg-6:first-child .section-label {
        font-size: 18px;
        font-weight: 700;
        color: #767676;
        margin: 0 0 30px;
        margin-bottom: 50px;
    }

    body#product .signature-detail > .container > .row > .col-12.col-lg-6:first-child h3 {
        font-size: 42px;
        font-weight: 600;
        color: #212121;
        margin: 0 0 30px;
        line-height: 1.4;
    }

    body#product .signature-detail > .container > .row > .col-12.col-lg-6:first-child .section-description {
        font-size: 18px;
        color: #1D1D1D;
        font-weight: 400;
        margin: 0 0 30px;
        line-height: 1.7;
    }

    body#product .signature-detail > .container > .row > .col-12.col-lg-6:first-child .toggle-pill {
        width: 400px;
        margin-top: 60px;
    }

    body#product .signature-detail > .container > .row > .col-12.col-lg-6:last-child {
        padding-right: 0;
        display: flex;
        justify-content: flex-end;
    }

    body#product .signature-detail > .container > .row > .col-12.col-lg-6:last-child .signature-detail__media {
        width: 100%;
        max-width: 908px;
        aspect-ratio: 908 / 692;
    }

    body#product .signature-detail > .container > .row > .col-12.col-lg-6:last-child .signature-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 60px !important;
    }

    body#product .signature-detail > .container > .row > .col-12.col-lg-6:last-child #signature-video-image,
    body#product .signature-detail > .container > .row > .col-12.col-lg-6:last-child #signature-video-text {
        border-radius: 60px !important;
    }

    /* Blockchain Cert: Match index.html property pattern */
    body#product .blockchain-cert > .container > .row {
        margin-left: 0;
        margin-right: 0;
    }

    body#product .blockchain-cert > .container > .row > .col-12.col-lg-6:last-child {
        padding-right: 0;
        display: flex;
        justify-content: flex-end;
    }
}