@charset "UTF-8";

/* =========================================
   PR Service LP - Final Fix (v3.4 Full Restoration)
   Theme: Blue (Trust) & Orange (Accent)
   Scoping Wrapper: #report-lp-wrapper
   ========================================= */

:root {
    --pr-color-primary: #0056b3;
    --pr-color-accent: #f97316;
}

/* Base Wrapper Styles */
#report-lp-wrapper {
    font-family: 'Noto Sans JP', sans-serif;
    color: #1f2937;
    line-height: 1.75;
    background-color: #ffffff;
    width: 100%;
    overflow-x: hidden;
    position: relative;
    z-index: 2000;
}

#report-lp-wrapper * {
    box-sizing: border-box;
}

#report-lp-wrapper img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

#report-lp-wrapper a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

#report-lp-wrapper ul,
#report-lp-wrapper li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* =========================================
   Theme Conflict Reset
   ========================================= */
.mobile-overlay,
#mobile-overlay,
.site-overlay,
div[class*="overlay"]:not(.pr-mobile-overlay) {
    display: none !important;
    z-index: -9999 !important;
    pointer-events: none !important;
}

/* =========================================
   Globals
   ========================================= */
#report-lp-wrapper .container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

#report-lp-wrapper .section__title {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    text-align: center;
    margin-bottom: 60px;
    color: #003d82;
    position: relative;
    padding-bottom: 20px;
}

#report-lp-wrapper .section__title::after {
    content: none;
}

/* Triangle Separator (HTML Element) */
#report-lp-wrapper .triangle-separator {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 70px 0 70px;
    border-color: #0056b3 transparent transparent transparent;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    margin-top: -25px;
    /* Pull up 50% */
    margin-bottom: -25px;
    /* Pull next section up 50% */
}

#report-lp-wrapper .section__title--white {
    color: #ffffff;
}

/* Buttons - Revised Hover Logic */
#report-lp-wrapper .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 9999px;
    transition: all 0.3s ease;
    cursor: pointer;
    line-height: 1;
    border: 2px solid transparent;
    /* Default transparent border */
}

/* Primary: Orange Background -> White Background + Orange Text/Border */
#report-lp-wrapper .btn-primary {
    background: #f97316;
    color: #ffffff !important;
    border-color: #f97316;
    /* Force border color to match bg initially */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#report-lp-wrapper .btn-primary:hover {
    background: #ffffff;
    color: #f97316 !important;
    border-color: #f97316;
    /* Keep border visible on white */
    box-shadow: 0 6px 12px rgba(249, 115, 22, 0.3);
    transform: translateY(-2px);
    opacity: 1 !important;
    /* Prevent theme opacity change */
}

/* Secondary: White Background + Blue Border -> Blue Background + White Text */
#report-lp-wrapper .btn-secondary {
    background: #ffffff;
    color: #0056b3 !important;
    border-color: #0056b3;
}

#report-lp-wrapper .btn-secondary:hover {
    background: #0056b3;
    color: #ffffff !important;
    border-color: #ffffff;
    opacity: 1 !important;
    /* Prevent theme opacity change */
}

#report-lp-wrapper .btn-large {
    padding: 18px 48px;
    font-size: 18px;
    width: 100%;
    max-width: 300px;
}

#report-lp-wrapper .btn-small {
    padding: 8px 20px;
    font-size: 14px;
}

/* =========================================
   Header
   ========================================= */
#report-lp-wrapper .pr-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

body.admin-bar #report-lp-wrapper .pr-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar #report-lp-wrapper .pr-header {
        top: 46px;
    }
}

#report-lp-wrapper .pr-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

#report-lp-wrapper .pr-header__logo .logo-link {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 12px;
    text-decoration: none;
    line-height: 1;
}

#report-lp-wrapper .logo-main-img {
    height: 48px;
    width: auto;
}

#report-lp-wrapper .pr-header__logo .logo-sub {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
}

#report-lp-wrapper .nav__list {
    display: flex;
    gap: 32px;
}

#report-lp-wrapper .nav__link {
    font-size: 18px;
    font-weight: 500;
    color: #1f2937;
}

#report-lp-wrapper .nav__link:hover {
    color: #0056b3;
}

#report-lp-wrapper .pr-header__cta-desktop {
    display: flex;
    gap: 12px;
}

#report-lp-wrapper .pr-header__cta-desktop .btn {
    font-size: 16px;
    font-weight: 500;
    padding: 10px 24px;
}

#report-lp-wrapper .pr-header__nav-cta {
    display: none;
}

#report-lp-wrapper .pr-header__menu-toggle {
    display: none;
}

/* Hidden on desktop */

/* =========================================
   Hero Section
   ========================================= */
#report-lp-wrapper .hero {
    margin-top: 70px;
    padding: 100px 0;
    background-image: linear-gradient(135deg, #0056b3 0%, #003d82 100%) !important;
    color: #ffffff !important;
    overflow: hidden;
    min-height: 600px;
    display: flex;
    align-items: center;
}

#report-lp-wrapper .hero__container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}

#report-lp-wrapper .hero__catchcopy {
    display: inline-block;
    /* background: rgba(255, 255, 255, 0.15); Removed */
    /* padding: 6px 16px; Removed */
    /* border-radius: 9999px; Removed */
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 24px;
    /* border: 1px solid rgba(255, 255, 255, 0.3); Removed */
}

#report-lp-wrapper .hero__title {
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 40px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#report-lp-wrapper .hero__cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

#report-lp-wrapper .hero__image-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   Problem Section (Updated Structure)
   ========================================= */
#report-lp-wrapper .problem {
    padding: 80px 0;
    background-color: #f0f7ff;
}

/* Checklist -> Horizontal Cards */
#report-lp-wrapper .problem__checklist {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

@media screen and (min-width: 600px) {
    #report-lp-wrapper .problem__checklist {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media screen and (min-width: 1024px) {
    #report-lp-wrapper .problem__checklist {
        grid-template-columns: repeat(4, 1fr);
    }
}

#report-lp-wrapper .problem-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Vertical Layout within card */
}

#report-lp-wrapper .problem-card__icon {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#report-lp-wrapper .problem-card__icon img {
    width: 60px;
    height: 60px;
    width: 100%;
    height: 100%;
}

#report-lp-wrapper .problem-card__text {
    font-size: 16px;
    /* PC requested 16px */
    font-weight: 700;
    color: #1f2937;
    line-height: 1.6;
}

/* Richer 'Solved' Box - REMOVED/Redesigned */


/* =========================================
   Features Section (Vertical Stack)
   ========================================= */
#report-lp-wrapper .features {
    padding: 80px 0;
    /* Standard padding */
    background: #ffffff;
    position: relative;
    z-index: 1;
}

/* Feature Title */
#report-lp-wrapper .features__title--arrow {
    background: transparent;
    color: #003d82;
    padding: 0;
    border-radius: 0;
    display: block;
    position: relative;
    margin-top: 20px;
    margin-bottom: 60px;
    box-shadow: none;
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 900;
    text-align: center;
    line-height: 1.4;
}

#report-lp-wrapper .features__title--arrow::before,
#report-lp-wrapper .features__title--arrow::after {
    display: none;
}

/* Clean up old solution box styles */


/* =========================================
   Features Grid (Zig-Zag Layout)
   ========================================= */
#report-lp-wrapper .features__grid {
    display: flex;
    flex-direction: column;
    gap: 80px;
    max-width: 1000px;
    margin: 0 auto;
}

#report-lp-wrapper .feature-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    text-align: left;
    /* Reset center align */
    background: transparent;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
}

/* Even items: Image Left, Text Right */
#report-lp-wrapper .feature-card:nth-child(even) {
    flex-direction: row-reverse;
}

/* Content Area */
#report-lp-wrapper .feature-card__content {
    flex: 1;
    min-width: 300px;
}

/* Image Area */
#report-lp-wrapper .feature-card__image {
    flex: 1;
    width: 100%;
    min-width: 300px;
    display: flex;
    /* Center the image */
    justify-content: center;
    align-items: center;
}

#report-lp-wrapper .feature-card__img {
    width: auto;
    max-width: 240px;
    /* Much smaller as requested */
    height: auto;
    border-radius: 0;
    box-shadow: none;
    display: block;
}

#report-lp-wrapper .feature-card__img--03 {
    transform: scaleX(-1);
    max-width: 200px;
}

/* Feature Header (Numbering) */
#report-lp-wrapper .feature-card__header {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    /* Optional underline like reference? */
    padding-bottom: 10px;
}

#report-lp-wrapper .feature-card__label-en {
    font-size: 14px;
    font-weight: 700;
    color: #0056b3;
    /* Primary Blue */
    letter-spacing: 0.1em;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

#report-lp-wrapper .feature-card__number {
    font-size: 60px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px #0056b3;
    /* Primary Blue Outline */
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* Title & Description */
#report-lp-wrapper .feature-card__title {
    font-size: 26px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.4;
}

#report-lp-wrapper .feature-card__description {
    font-size: 16px;
    line-height: 1.8;
    color: #666;
    text-align: justify;
}

/* Responsive (Mobile) */
@media (max-width: 768px) {
    #report-lp-wrapper .feature-card {
        flex-direction: column !important;
        /* Stack vertically */
        gap: 30px;
    }

    #report-lp-wrapper .feature-card__header {
        justify-content: flex-start;
    }
}


/* =========================================
   Work Section (Case Study) - RESTORED
   ========================================= */
/* =========================================
   Case Study Card (New Layout)
   ========================================= */
#report-lp-wrapper .work {
    padding: 80px 0;
    background: #f9fafb;
}

#report-lp-wrapper .case-study-card {
    background: #ffffff;
    border-radius: 8px;
    /* Slight radius */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    /* Horizontal Layout */
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto;
    border: 1px solid #eee;
}

/* Left Column: Image */
#report-lp-wrapper .case-study-card__image {
    flex: 0 0 45%;
    /* Approx 45% width */
    position: relative;
    min-height: 300px;
}

#report-lp-wrapper .case-study-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Right Column: Content */
#report-lp-wrapper .case-study-card__content {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

#report-lp-wrapper .case-study-card__title {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.5;
}

#report-lp-wrapper .case-study-card__client {
    font-size: 16px;
    color: #666;
    margin-bottom: 25px;
}

/* Tags */
#report-lp-wrapper .case-study-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

#report-lp-wrapper .case-tag {
    font-size: 14px;
    color: #555;
    border: 1px solid #ccc;
    padding: 6px 16px;
    background: #fff;
    display: inline-block;
}

/* Button Container */
#report-lp-wrapper .case-study-card__footer {
    margin-top: 20px;
    text-align: right;
}

/* Topics Box */
#report-lp-wrapper .case-study-card__topics-box {
    background: #f0f7ff;
    /* Light blue theme */
    padding: 25px;
    position: relative;
    margin-top: auto;
    /* Push to bottom if space allows */
}

#report-lp-wrapper .case-topics-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#report-lp-wrapper .case-topics-list li {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 12px;
    padding-left: 28px;
    position: relative;
}

/* Checkmark Icon */
#report-lp-wrapper .case-topics-list li::before {
    content: '\2714';
    /* Heavy Check Mark */
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 24px;
    /* border: none; Removed border */
    color: #0056b3;
    /* Primary Blue */
    font-size: 18px;
    /* Slightly larger */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Button */
#report-lp-wrapper .btn-interview {
    display: inline-block;
    background: #333;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 30px;
    text-decoration: none;
    transition: opacity 0.3s;
}

#report-lp-wrapper .btn-interview:hover {
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 768px) {
    #report-lp-wrapper .case-study-card {
        flex-direction: column;
    }

    #report-lp-wrapper .case-study-card__image {
        flex: auto;
        height: 250px;
    }

    #report-lp-wrapper .case-study-card__content {
        padding: 25px;
    }

    #report-lp-wrapper .case-study-card__footer {
        text-align: center;
        margin-top: 20px;
    }

    #report-lp-wrapper .btn-interview {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* =========================================
   Gallery Section (Thumbnail Carousel) - RESTORED
   ========================================= */
#report-lp-wrapper .gallery {
    padding: 80px 0;
    background: #ffffff;
}

#report-lp-wrapper .gallery__description {
    text-align: center;
    margin-bottom: 40px;
    color: #4b5563;
}

#report-lp-wrapper .gallery__carousel {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

#report-lp-wrapper .carousel-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 10px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

#report-lp-wrapper .carousel-item {
    flex: 0 0 300px;
    scroll-snap-align: center;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background: #eee;
    aspect-ratio: 16/9;
}

#report-lp-wrapper .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#report-lp-wrapper .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    z-index: 10;
}

#report-lp-wrapper .carousel-btn--prev {
    left: -20px;
}

#report-lp-wrapper .carousel-btn--next {
    right: -20px;
}

/* =========================================
   Plans (Richer H3, Full Width Sub)
   ========================================= */
#report-lp-wrapper .plan {
    padding: 80px 0;
    background: #f0f7ff;
}

/* Comparison Table */
#report-lp-wrapper .plan__comparison {
    margin-bottom: 60px;
}

#report-lp-wrapper .plan__subtitle {
    font-size: 24px;
    font-weight: 700;
    color: #003d82;
    text-align: center;
    margin-bottom: 30px;
}

#report-lp-wrapper .comparison__table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#report-lp-wrapper .comparison__table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}



#report-lp-wrapper .comparison__table th,
#report-lp-wrapper .comparison__table td {
    padding: 15px;
    border: 1px solid #ffffff;
    /* White borders as requested */
    text-align: center;
    vertical-align: middle;
}

/* Add border-bottom to rows for readability? User said "Delete ruled lines except Inunote". So none. */
#report-lp-wrapper .comparison__table tbody tr {
    border-bottom: 1px solid #f3f4f6;
    /* Maybe keep horizontal row lines for non-highlight? 
       "Inunote縺ｮ蝗ｲ縺ｿ莉･螟悶€∫ｽｫ邱壹・蜑企勁" -> "Remove ruled lines EXCEPT Inunote enclosure".
       Strict interpretation: No borders on A遉ｾ, B遉ｾ, etc. 
    */
    border-bottom: none;
}

/* Re-adding border-bottom to th/td specific if strictly needed, but let's go with NONE for now based on request. */

/* Re-adding border-bottom to th/td specific if strictly needed, but let's go with NONE for now based on request. */

#report-lp-wrapper .comparison__table thead th {
    background: #f3f4f6;
    color: #4b5563;
    border-top: 1px solid #f3f4f6;
    border-left: 1px solid #f3f4f6;
    border-right: 1px solid #f3f4f6;
    /* Match background gray */
}

/* Highlight Column (Inunote) - Header */
/* Highlight Column (Inunote) - Header */
#report-lp-wrapper .comparison__table th.highlight {
    background: #f97316;
    /* Orange Background */
    color: #ffffff;
    /* White Text */
    font-weight: 700;
    border-top: 2px solid #ea580c !important;
    border-left: 2px solid #ea580c !important;
    border-right: 2px solid #ea580c !important;
    border-bottom: 1px solid #ffffff;
    /* White inner divider */
}

/* Highlight Column (Inunote) - Body */
#report-lp-wrapper .comparison__table td.highlight {
    background: #fff7ed;
    /* Light Orange (Restored) */
    color: #c2410c;
    /* Dark Orange Text (Restored) */
    font-weight: 700;
    border-left: 2px solid #ea580c;
    border-right: 2px solid #ea580c;
    border-bottom: 1px solid #ffffff;
    /* White inner divider */
}

#report-lp-wrapper .comparison__table tbody tr:last-child td.highlight {
    border-bottom: 2px solid #ea580c;
    /* Closing border (Keep Orange Enclosure) */
}

#report-lp-wrapper .table-note {
    font-size: 12px;
    color: #6b7280;
    display: block;
    margin-top: 4px;
}

#report-lp-wrapper .comparison__note {
    font-size: 12px;
    color: #6b7280;
    text-align: right;
    margin-top: 10px;
}

/* Plans Grid */
#report-lp-wrapper .plan__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Plan Card Base */
/* Plan Card Base */
#report-lp-wrapper .plan-card {
    background: #ffffff;
    border-radius: 16px;
    /* Softer corners */
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
    /* layered shadow */
    display: flex;
    flex-direction: column;
    border: 1px solid #f3f4f6;
    /* Subtle border */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#report-lp-wrapper .plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Recommended / Subscription Plan Full Width */
#report-lp-wrapper .plan-card--recommended {
    grid-column: 1 / -1;
    /* Full width */
    border: 2px solid #f97316;
    position: relative;
    max-width: 100%;
    /* Override auto-fit limit */
    box-shadow: 0 10px 25px rgba(249, 115, 22, 0.15);
    /* Richer shadow for recommended */
}

#report-lp-wrapper .plan-card__badge {
    background: #f97316;
    color: white;
    padding: 5px 20px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0 0 10px 10px;
    font-weight: 700;
}

/* Richer Plan Title (H3) */
#report-lp-wrapper .plan-card__name {
    background: #0056b3;
    color: #ffffff;
    text-align: center;
    padding: 20px;
    /* Increased padding */
    font-size: 22px;
    /* Larger font */
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.05em;
    /* Elegant spacing */
}

#report-lp-wrapper .plan-card--recommended .plan-card__name {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    font-size: 24px;
    /* Even larger for recommended */
}

/* Price removed as requested */
/*
#report-lp-wrapper .plan-card__price {
    ...
}
*/

#report-lp-wrapper .plan-card__body {
    padding: 30px;
    flex-grow: 1;
}

#report-lp-wrapper .plan-card__body h5 {
    text-align: center;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1f2937;
}

#report-lp-wrapper .plan-card__features li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
    font-size: 15px;
}

#report-lp-wrapper .plan-card__features li::before {
    content: '笨・;
 position: absolute;
    left: 0;
    color: #f97316;
}


/* Feature Title (Merihari - Underline) */
.plan-card__feature-title {
    text-align: left;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 5px;
    /* Space for underline */
    font-size: 16px;
    background: transparent;
    color: inherit;
    border: none;
    border-bottom: 2px solid #f97316;
    /* Orange underline for contrast */
}

/* Feature Tags (3-column layout for Grade 3) */
.plan-card__feature-title.feature-tags {
    border-bottom: none;
    /* No underline for tags */
    display: flex;
    justify-content: flex-start;
    gap: 4px;
    /* Tight gap */
    white-space: nowrap;
}

.plan-card__feature-title.feature-tags span {
    border: 1px solid #d1d5db;
    padding: 2px 4px;
    font-size: 10px;
    /* Small font to fit 1 line */
    border-radius: 4px;
    color: #4b5563;
    display: inline-block;
}

/* Grading System (Pine, Bamboo, Plum) */

/* Grade 1: Creation (Gray Header) */
#report-lp-wrapper .plan-card--grade-1 {
    background: #ffffff;
    border-color: #e5e7eb;
}

#report-lp-wrapper .plan-card--grade-1 .plan-card__name {
    background: #d1d5db;
    /* Gray 300 */
    color: #1f2937;
    /* Gray 800 */
}

#report-lp-wrapper .plan-card--grade-1 .plan-card__feature-title {
    color: #1f2937;
    border-bottom-color: #9ca3af;
    /* Gray underline */
}

/* Grade 2: Delivery (Light Blue Header) */
#report-lp-wrapper .plan-card--grade-2 {
    background: #ffffff;
    border-color: #e5e7eb;
}

#report-lp-wrapper .plan-card--grade-2 .plan-card__name {
    background: #7dd3fc;
    /* Sky 300 */
    color: #0c4a6e;
    /* Sky 900 */
}

#report-lp-wrapper .plan-card--grade-2 .plan-card__feature-title {
    color: #0c4a6e;
    border-bottom-color: #38bdf8;
    /* Blue underline */
}

/* Grade 3: Sales (Blue Header) */
#report-lp-wrapper .plan-card--grade-3 {
    background: #ffffff;
    border-color: #e5e7eb;
    color: #1f2937;
    /* Reset to dark text */
}

#report-lp-wrapper .plan-card--grade-3 .plan-card__name {
    background: #1e40af;
    /* Blue 800 */
    color: #ffffff;
}

#report-lp-wrapper .plan-card--grade-3 .plan-card__feature-title {
    background: transparent;
    color: #1e3a8a;
    border-bottom-color: #1d4ed8;
    /* Dark Blue underline */
}

#report-lp-wrapper .plan-card--grade-3 .plan-card__features li {
    color: #1f2937;
    /* Reset to dark text */
}

#report-lp-wrapper .plan-card--grade-3 .plan-card__features li::before {
    color: #f97316;
    /* Orange checkmark */
}


/* Subscription Plan (Infographic Layout) */
/* Subscription Plan (Infographic Layout - Ton-Mana Refined) */
#report-lp-wrapper .plan-card--sub {
    grid-column: 1 / -1;
    display: block;
    background: #ffffff;
    border: 2px solid #1e40af;
    /* Navy Border */
    border-radius: 12px;
    padding: 0;
    /* Reset padding for header */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    /* For header bg */
    margin-top: 20px;
}

/* Remove Recommended Badge */
#report-lp-wrapper .plan-card--sub .plan-card__badge {
    display: none;
}

/* Header */
#report-lp-wrapper .sub-plan__header {
    text-align: center;
    padding: 25px 20px;
    background: #f0f9ff;
    /* Light Blue Background */
    border-bottom: 1px solid #dbeafe;
}

#report-lp-wrapper .sub-plan__catch {
    font-size: 14px;
    color: #f97316;
    /* Orange Accent */
    margin-bottom: 8px;
    font-weight: 700;
}

#report-lp-wrapper .sub-plan__title {
    font-size: 28px;
    font-weight: 700;
    color: #1e40af;
    /* Navy Title */
    margin: 0;
}

/* Top Row: Base Services */
/* Top Row: Base Services */
#report-lp-wrapper .sub-plan__base-services {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    /* Equal height cards */
    padding: 30px 30px 10px;
    gap: 15px;
}

#report-lp-wrapper .base-service-item {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

#report-lp-wrapper .base-service-icon {
    font-size: 24px;
}

#report-lp-wrapper .base-service-text {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
}

#report-lp-wrapper .service-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 20px;
    font-weight: 300;
}

#report-lp-wrapper .service-divider::after {
    content: '笆ｶ';
    font-size: 12px;
}


/* Plus Divider */
#report-lp-wrapper .sub-plan__plus {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #f97316;
    /* Orange Plus */
    margin: 5px auto 15px;
    line-height: 1;
}


/* Bottom Row: Benefits */
#report-lp-wrapper .sub-plan__benefits {
    display: grid;
    margin-top: 40px;
    grid-template-columns: repeat(3, 1fr);
    /* 3 equal columns for Grade 1-3 */
    gap: 20px;
}

/* Subscription Wrapper (Spans all columns or sits below) */
#report-lp-wrapper .subscription-wrapper {
    grid-column: 1 / -1;
    margin-top: 40px;
    max-width: 700px;
    /* Increased width */
    margin-left: auto;
    margin-right: auto;
}

#report-lp-wrapper .sub-plan__intro {
    text-align: center;
    font-weight: 700;
    color: #f97316;
    font-size: 22px;
    /* Increased size */
    margin-bottom: 5px;
    letter-spacing: 1px;
}

/* Subscription Card - Match Grade 1-3 but with Orange Header */
#report-lp-wrapper .plan-card--sub-standard {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    /* Standard Border */
    border-radius: 12px;
    /* Deep Rounding (Match Grade 3) */
    overflow: hidden;
    /* Ensure header clipping */
}

/* Header - Orange Background (Reset Wrapper) */
#report-lp-wrapper .plan-card--sub-standard .plan-card__header {
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

/* Header Title - Apply Orange Here */
#report-lp-wrapper .plan-card--sub-standard .plan-card__name {
    background: #f97316;
    color: #ffffff;
    padding: 24px;
    /* Increased padding */
    font-size: 24px;
    /* Increased size */
    font-weight: 700;
    margin: 0;
}

/* Revert to Standard List Items (Match Grade 1-3) */
#report-lp-wrapper .plan-card__features--rich {
    margin-top: 0;
}

/* Remove overrides so it inherits .plan-card__features li styles (Checkmarks) */
/* Remove overrides so it inherits .plan-card__features li styles (Checkmarks) */
#report-lp-wrapper .plan-card__features--rich li {
    background: transparent;
    border: none;
    padding-left: 20px;
    /* Align with standard items */
    margin-bottom: 12px;
    /* Increased spacing */
    font-weight: 700;
    /* Bold all items */
    font-size: 18px;
    /* Increased font size */
    position: relative;
    color: #374151;
    list-style: none;
}

/* Ensure Checkmark is visible */
#report-lp-wrapper .plan-card__features--rich li::before {
    content: '笨・;
 position: absolute;
    left: 0;
    color: #f97316;
    font-weight: 700;
}

#report-lp-wrapper .benefit-box {
    border: 2px solid #f97316;
    /* Orange border */
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    background: #fff;
}

#report-lp-wrapper .benefit-number {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: #f97316;
    border-right: none;
    padding: 2px 10px;
    border-radius: 20px;
    line-height: 1.4;
    margin-bottom: 5px;
}

#report-lp-wrapper .benefit-text {
    font-size: 13px;
    margin: 0;
    font-weight: 700;
    color: #374151;
}

/* Emphasis Dots */
#report-lp-wrapper .emphasis-dots {
    color: #f97316;
    /* Orange text */
    font-weight: 700;
    position: relative;
}

/* CSS Dots above text */
#report-lp-wrapper .emphasis-dots::before {
    content: '窶｢窶｢窶｢';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    color: #f97316;
    font-size: 10px;
    letter-spacing: 2px;
}

@supports (text-emphasis: filled circle) {
    #report-lp-wrapper .emphasis-dots::before {
        content: none;
    }

    #report-lp-wrapper .emphasis-dots {
        text-emphasis: filled circle #f97316;
        -webkit-text-emphasis: filled circle #f97316;
        text-emphasis-position: over right;
    }
}


/* Responsive adjustment for infographic */
@media (max-width: 768px) {
    #report-lp-wrapper .plan-card--sub {
        padding: 20px;
    }

    #report-lp-wrapper .sub-plan__base-services {
        flex-direction: column;
        border: none;
        gap: 15px;
    }

    #report-lp-wrapper .base-service-item {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        border: 1px solid #e5e7eb;
        /* Ensure border is light gray on mobile */
    }

    #report-lp-wrapper .service-divider {
        transform: rotate(90deg);
        /* Point down */
        margin: 5px 0;
    }

    #report-lp-wrapper .sub-plan__benefits {
        grid-template-columns: 1fr;
        padding: 0 20px 30px;
    }

    #report-lp-wrapper .benefit-box {
        flex-direction: row;
        text-align: left;
    }

    #report-lp-wrapper .benefit-number {
        margin-bottom: 0;
    }
}


/* Options (App Grid Layout) */
#report-lp-wrapper .plan__options {
    margin-top: 60px;
    grid-column: 1 / -1;
    /* Force full width to prevent side-by-side layout */
    width: 100%;
}

#report-lp-wrapper .options__grid-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

#report-lp-wrapper .category-title {
    font-size: 20px;
    color: #003d82;
    border-left: 4px solid #f97316;
    padding-left: 15px;
    margin-bottom: 20px;
}

#report-lp-wrapper .options__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
}

#report-lp-wrapper .option-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 15px 10px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s;
}

#report-lp-wrapper .option-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

#report-lp-wrapper .option-icon {
    font-size: 28px;
    margin-bottom: 5px;
    background: #f3f4f6;
    width: 60px;
    /* Increased size for image */
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Clip image */
}

#report-lp-wrapper .option-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

#report-lp-wrapper .option-label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: #374151;
}

#report-lp-wrapper .option-desc {
    font-size: 10px;
    color: #6b7280;
    margin-top: auto;
    /* Push to bottom */
    border-top: 1px dashed #eee;
    padding-top: 5px;
    width: 100%;
}

/* =========================================
   Flow Section (Horizontal Steps 6-step)
   ========================================= */
#report-lp-wrapper .section.flow {
    background: #ffffff;
    padding: 80px 0;
}

#report-lp-wrapper .flow-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    padding-top: 20px;
}

#report-lp-wrapper .flow-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    z-index: 2;
    /* Bring above connector lines */
}

/* Number Circle */
#report-lp-wrapper .flow-step__number-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #d1d5db;
    /* Gray border */
    color: #374151;
    /* Dark gray text */
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

/* Dashed Connector Line */
#report-lp-wrapper .flow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 30px;
    /* Center of 60px circle */
    left: 50%;
    width: 100%;
    height: 2px;
    border-top: 2px dashed #9ca3af;
    z-index: 1;
}

/* Step Title */
#report-lp-wrapper .flow-step__title {
    font-size: 16px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 20px;
    min-height: 1.5em;
    /* Ensure alignment even if line wraps (though short text shouldn't) */
    white-space: nowrap;
}

/* Icon Container */
#report-lp-wrapper .flow-step__icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#report-lp-wrapper .flow-step__icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Responsive: Stack on Mobile */
@media (max-width: 768px) {
    #report-lp-wrapper .flow-grid {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 20px;
        /* Space for vertical line if needed */
        gap: 40px;
    }

    #report-lp-wrapper .flow-step {
        flex-direction: row;
        /* Horizontal on mobile step: Number | Text */
        align-items: center;
        width: 100%;
        text-align: left;
        gap: 20px;
    }

    /* Dashed Line Vertical */
    #report-lp-wrapper .flow-step:not(:last-child)::after {
        top: 60px;
        /* Below circle */
        left: 30px;
        /* Center of circle */
        width: 0;
        height: calc(100% + 40px);
        /* Reach next step */
        border-top: none;
        border-left: 2px dashed #9ca3af;
        transform: translateX(-50%);
    }

    #report-lp-wrapper .flow-step__number-circle {
        margin-bottom: 0;
        flex-shrink: 0;
        /* Prevent shrinking */
    }

    #report-lp-wrapper .flow-step__title {
        margin-bottom: 5px;
        /* Adjust spacing */
        font-size: 18px;
        white-space: normal;
    }

    #report-lp-wrapper .flow-step__icon {
        width: 50px;
        height: 50px;
        margin-left: auto;
        /* Push to right */
    }
}

font-weight: 700;
margin: 0;
padding: 0;
border: none;
}

/* Milestone highlight (optional) */
#report-lp-wrapper .flow-step--milestone {
    border-color: #1e40af;
    background: #eff6ff;
}

/* Arrow between steps (Desktop: Right arrow) */
#report-lp-wrapper .flow-step::after {
    content: '笆ｶ';
    position: absolute;
    right: -23px;
    top: 50%;
    transform: translateY(-50%);
    color: #d1d5db;
    font-size: 14px;
}

/* Remove arrow from last item */
#report-lp-wrapper .flow-step:last-child::after {
    display: none;
}

/* Responsive: Vertical on Mobile */
@media (max-width: 768px) {
    #report-lp-wrapper .flow__plan-note p {
        display: block;
        margin: 5px 0;
    }

    #report-lp-wrapper .flow-grid {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    #report-lp-wrapper .flow-step {
        width: 100%;
        max-width: 320px;
        min-height: auto;
        padding: 20px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 15px;
        text-align: left;
    }

    #report-lp-wrapper .flow-step__number {
        position: static;
        /* Reset absolute */
        width: 24px;
        height: 24px;
        font-size: 12px;
        margin-right: 0;
    }

    /* Mobile Arrow: Down */
    #report-lp-wrapper .flow-step::after {
        content: '笆ｼ';
        right: auto;
        left: 50%;
        top: auto;
        bottom: -28px;
        transform: translateX(-50%);
    }
}

/* CENTER BUTTONS */
/* CENTER BUTTONS */
#report-lp-wrapper .plan__cta,
#report-lp-wrapper .faq__cta,
#report-lp-wrapper .cta-wrapper {
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 40px;
    width: 100%;
    /* Ensure full width */
    grid-column: 1 / -1;
    /* Force full width in grid */
}


/* =========================================
   FAQ (Blue Icon)
   ========================================= */
#report-lp-wrapper .faq {
    padding: 80px 0;
    background: #f9fafb;
}

#report-lp-wrapper .faq__list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#report-lp-wrapper .faq-item {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: block !important;
    /* Force block layout */
}

#report-lp-wrapper .faq-item__question {
    width: 100%;
    border: none;
    background: none;
    padding: 20px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    color: #1f2937;
    font-size: 16px;
}

#report-lp-wrapper .faq-item__icon {
    color: #0056b3 !important;
    /* Blue Request */
    font-weight: 700;
    font-size: 24px;
}

#report-lp-wrapper .faq-item__answer {
    padding: 0 20px;
    /* Horizontal padding only initially */
    padding-bottom: 0;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.6;
    border-top: 1px solid transparent;
    /* Hide border initially */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out, padding-bottom 0.3s ease, border-color 0.3s ease;
}

#report-lp-wrapper .faq-item__answer>* {
    overflow: hidden;
    min-height: 0;
}

#report-lp-wrapper .faq-item.active .faq-item__answer {
    grid-template-rows: 1fr;
    padding-bottom: 20px;
    border-top-color: #f3f4f6;
    /* Show border */
}

#report-lp-wrapper .faq-item.active .faq-item__icon {
    transform: rotate(45deg);
    /* Rotate icon when active */
    transition: transform 0.3s ease;
}


/* =========================================
   Contact Form (Layout Fix)
   ========================================= */
#report-lp-wrapper .cta {
    background: #0056b3;
    padding: 80px 0;
    color: white;
    margin-bottom: 0 !important;
    /* Remove white space */
}

#report-lp-wrapper .cta__form-wrapper {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px;
    max-width: 680px;
    /* Narrowed to match text width */
    margin: 40px auto 0;
    color: #1f2937;
    width: 100%;
}

/* Force WPForms to behave */
#report-lp-wrapper .wpforms-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* =========================================
   Footer
   ========================================= */
#report-lp-wrapper .footer {
    background: #1f2937;
    color: #f3f4f6;
    padding: 60px 0 20px;
    font-size: 14px;
    margin-top: 0 !important;
    /* Remove white space */
}

#report-lp-wrapper .footer__main {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid #374151;
    padding-bottom: 40px;
}

#report-lp-wrapper .footer__logo {
    font-size: 24px;
    /* Increased size */
    margin-bottom: 15px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 15px;
}

#report-lp-wrapper .footer-logo-img {
    width: 60px;
    /* Logo size */
    height: auto;
    object-fit: contain;
}

#report-lp-wrapper .footer__links {
    display: flex;
    gap: 30px;
}

#report-lp-wrapper .footer__copyright {
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
}

/* Responsive */
@media (max-width: 768px) {
    #report-lp-wrapper .hero__container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #report-lp-wrapper .hero__cta {
        justify-content: center;
    }

    #report-lp-wrapper .problem__checklist {
        grid-template-columns: 1fr;
    }

    #report-lp-wrapper .plan__grid {
        grid-template-columns: 1fr;
    }

    /* Hide Desktop CTA on Mobile */
    #report-lp-wrapper .pr-header__cta-desktop {
        display: none;
    }

    /* Mobile Menu Container */
    #report-lp-wrapper .pr-header__nav {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: 0;
        /* Closed */
        background: rgba(255, 255, 255, 0.98);
        overflow: hidden;
        transition: height 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }

    #report-lp-wrapper .pr-header__nav.active {
        height: calc(100vh - 70px);
        padding: 40px 20px;
        overflow-y: auto;
    }

    #report-lp-wrapper .nav__list {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
        width: 100%;
        text-align: center;
    }

    /* Show CTA inside Nav */
    #report-lp-wrapper .pr-header__nav-cta {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        max-width: 300px;
    }

    /* Hamburger Styles */
    #report-lp-wrapper .pr-header__menu-toggle {
        display: flex;
        flex-direction: column;
        width: 30px;
        height: 24px;
        justify-content: space-between;
        border: none;
        background: none;
        cursor: pointer;
        z-index: 1001;
    }

    #report-lp-wrapper .pr-header__menu-toggle span {
        width: 100%;
        height: 3px;
        background: #0056b3;
        border-radius: 3px;
        transition: all 0.3s ease;
    }

    /* Hamburger Animation */
    #report-lp-wrapper .pr-header__menu-toggle.active span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }

    #report-lp-wrapper .pr-header__menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    #report-lp-wrapper .pr-header__menu-toggle.active span:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
    }

    #report-lp-wrapper .footer__links {
        flex-direction: column;
        gap: 20px;
    }

    #report-lp-wrapper .carousel-btn--prev {
        left: 0;
    }

    #report-lp-wrapper .carousel-btn--next {
        right: 0;
    }
}

/* =========================================
   Sample Section (Grid & Lightbox)
   ========================================= */
#report-lp-wrapper .section.sample {
    padding: 80px 0;
    background-color: #f9fafb;
}

#report-lp-wrapper .sample__grid-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

#report-lp-wrapper .sample-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Mobile: 2 columns */
    gap: 15px;
}

@media (min-width: 768px) {
    #report-lp-wrapper .sample-grid {
        grid-template-columns: repeat(4, 1fr);
        /* PC: 4 columns */
        gap: 20px;
    }
}

#report-lp-wrapper .sample-grid__item {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#report-lp-wrapper .sample-grid__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#report-lp-wrapper .sample-img {
    width: 100%;
    height: auto;
    display: block;
    /* object-fit: cover; & aspect-ratio moved to allow natural height */
}

/* Lightbox Modal */
#report-lp-wrapper .sample-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 9999;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.85);
    /* Black w/ opacity */
}

#report-lp-wrapper .sample-modal__content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 900px;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    animation-name: zoom;
    animation-duration: 0.3s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

#report-lp-wrapper .sample-modal__close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 10000;
}

#report-lp-wrapper .sample-modal__close:hover,
#report-lp-wrapper .sample-modal__close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Responsive Modal */
@media only screen and (max-width: 700px) {
    #report-lp-wrapper .sample-modal__content {
        width: 95%;
    }
}