/* Custom CSS variables for Radical theme */
:root {
    --radical-orange: #e93c1d;
    --radical-dark: #2C3E50;
    --radical-light-grey: #f5f5f5;
    --radical-grey: #4a5c6a;
    --radical-light: #ecf0f1;
    --radical-tab-grey: #f8f9fa;
    --radical-tab-border: #dee2e6;
    --radical-hover-grey: #e9ecef;
}

/* Base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: white;
    min-height: 100vh;
    padding: 0;
}

/* Component styles using Tailwind classes */
.container {
    max-width: 1400px;
    margin: 0 auto;
    background: white;
}

.header {
    padding: 2.5rem;
    border-bottom: 4px solid var(--radical-orange);
    background-color: var(--radical-light-grey);
    color: var(--radical-dark);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Tighten the header at intermediate widths so logo + menu stay on
   one line without overlapping. Below ~640px the menu can stack
   beneath the logo. */
@media (max-width: 1320px) {
    .header-content {
        flex-wrap: nowrap;
        gap: 0.75rem;
    }

    .main-nav {
        gap: 0.2rem !important;
        flex-wrap: nowrap;
    }

    .nav-link {
        padding: 0.35rem 0.55rem;
        font-size: 0.88rem;
        gap: 0.3rem;
        white-space: nowrap;
    }

    .nav-link i {
        font-size: 0.88rem;
    }

    .robot-mascot {
        width: 32px !important;
    }

    .logo-main-text {
        font-size: 2.1rem !important;
        margin-bottom: 0.15rem !important;
    }

    .logo-sub-text {
        font-size: 0.78rem !important;
        letter-spacing: 1.6px !important;
        margin-bottom: 0.3rem !important;
    }

    .tagline {
        display: none;
    }
}

@media (max-width: 1024px) {
    .nav-link {
        padding: 0.45rem 0.6rem;
        font-size: 1rem;
        position: relative;
    }

    .nav-link i {
        font-size: 1.05rem;
    }

    .nav-link span {
        display: none;
    }

    /* Tooltip: reveal the hidden label on hover / focus as a floating
       chip below the icon. */
    .nav-link:hover span,
    .nav-link:focus-visible span {
        display: block;
        position: absolute;
        top: calc(100% + 0.4rem);
        left: 50%;
        transform: translateX(-50%);
        background: var(--radical-dark);
        color: white;
        padding: 0.3rem 0.6rem;
        border-radius: 4px;
        font-size: 0.8rem;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
        z-index: 50;
        pointer-events: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }
}

@media (max-width: 640px) {
    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .header-nav {
        align-items: flex-start !important;
        width: 100%;
    }

    .main-nav {
        flex-wrap: wrap;
    }
}

.header-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.main-nav {
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: var(--radical-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-link i {
    font-size: 1rem;
}

.nav-link:hover {
    background-color: rgba(255, 107, 53, 0.1);
    color: var(--radical-orange);
}

.nav-link.active {
    background-color: var(--radical-orange);
    color: white;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-with-robot {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.robot-mascot {
    width: 50px;
    height: auto;
}

.logo-redesign {
    text-align: left;
    position: relative;
    display: inline-block;
}

.logo-main-text {
    font-family: 'Arial', 'Helvetica Neue', sans-serif;
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--radical-orange);
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.logo-sub-text {
    font-family: 'Arial', 'Helvetica Neue', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--radical-dark);
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.logo-sub-text-light {
    font-family: 'Arial', 'Helvetica Neue', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--radical-light);
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}


.logo-accent-line {
    width: 100%;
    height: 0.25rem;
    background: linear-gradient(90deg, var(--radical-orange) 0%, var(--radical-orange) 30%, transparent 100%);
    border-radius: 0.125rem;
}

.tagline {
    font-size: 1.125rem;
    font-weight: bold;
    opacity: 0.9;
    color: var(--radical-dark);
}

.nav-tabs {
    display: flex;
    border-bottom: 1px solid var(--radical-tab-border);
    background-color: var(--radical-tab-grey);
}

.nav-tab {
    flex: 1;
    padding: 1.25rem;
    text-align: center;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: var(--radical-dark);
    transition: all 0.3s ease;
}

.nav-tab.active {
    background-color: var(--radical-orange);
    color: white;
}

.nav-tab:hover:not(.active) {
    background-color: var(--radical-hover-grey);
}

/* Tab icon and text styling */
.nav-tab .tab-icon {
    font-size: 1.1rem;
    margin-right: 0.5rem;
    display: inline-block;
    vertical-align: middle;
}

.nav-tab i.tab-icon {
    font-size: 1rem;
    width: 1.2rem;
    text-align: center;
}

.nav-tab .tab-text {
    display: inline-block;
    vertical-align: middle;
}

/* Responsive: hide text on smaller screens, show only icons */
@media (max-width: 768px) {
    .nav-tab .tab-text {
        display: none;
    }
    
    .nav-tab .tab-icon {
        margin-right: 0;
        font-size: 1.3rem;
    }
    
    .nav-tab i.tab-icon {
        font-size: 1.2rem;
        width: auto;
    }
    
    .nav-tab {
        min-width: 60px;
        padding: 1rem 0.75rem;
    }
}

.tab-content {
    display: none;
    padding: 2.5rem;
    background-color: var(--radical-light-grey);
    animation: fadeIn 0.5s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.positioning-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 1.25rem;
}

/* Robot T200 Header with Image Layout */
.header-with-image {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2rem;
}

.header-content-area {
    flex: 1;
}

.header-image {
    flex-shrink: 0;
}

.robot-image-header {
    width: 120px !important;
    max-width: 120px !important;
    height: auto;
    border-radius: 0.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .header-with-image {
        flex-direction: column;
        gap: 1rem;
    }
    
    .robot-image-header {
        width: 100px !important;
        max-width: 100px !important;
        align-self: center;
    }
}

.positioning-card {
    background-color: var(--radical-dark);
    color: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.positioning-card:hover {
    transform: translateY(-0.25rem);
}

.card-title {
    font-size: 1.25rem;
    color: var(--radical-orange);
    margin-bottom: 1rem;
    font-weight: 600;
}

.card-content {
    color: var(--radical-light);
    line-height: 1.6;
}

.highlight {
    background-color: var(--radical-orange);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.value-prop {
    background: linear-gradient(135deg, var(--radical-orange) 0%, #e55a2b 100%);
    color: white;
    padding: 3rem 2.5rem;
    border-radius: 1.5rem;
    margin: 2rem 0;
    text-align: center;
    box-shadow: 0 15px 35px rgba(255, 107, 53, 0.2);
    position: relative;
    overflow: hidden;
}

.value-prop::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.value-prop h3 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.value-prop p {
    font-size: 1.125rem;
    line-height: 1.7;
    font-weight: 400;
    opacity: 0.95;
}

.competitive-advantages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
    margin: 1.25rem 0;
}

.advantage-item {
    background-color: var(--radical-dark);
    color: white;
    padding: 1.25rem;
    border-radius: 0.625rem;
    border-left: 4px solid var(--radical-orange);
}

.messaging-pillar {
    background: white;
    border: 2px solid var(--radical-dark);
    border-radius: 0.625rem;
    padding: 1.5rem;
    margin: 1rem 0;
    transition: all 0.3s ease;
}

.messaging-pillar:hover {
    border-color: var(--radical-orange);
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.1);
}

.pillar-title {
    font-size: 1.125rem;
    color: var(--radical-orange);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.implementation-checklist {
    background-color: var(--radical-dark);
    color: white;
    padding: 2rem;
    border-radius: 1rem;
    margin: 1.25rem 0;
}

.checklist-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--radical-grey);
    color: var(--radical-light);
}

.checklist-item:last-child {
    border-bottom: none;
}

.checkbox {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--radical-orange);
    border-radius: 0.25rem;
    margin-right: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkbox.checked {
    background-color: var(--radical-orange);
    position: relative;
}

.checkbox.checked::after {
    content: '✓';
    color: white;
    position: absolute;
    top: -2px;
    left: 3px;
    font-weight: bold;
}

.competitive-note {
    margin-top: 2rem;
    padding: 1.25rem;
    background-color: var(--radical-orange);
    color: white;
    border-radius: 0.625rem;
}

/* About Page Styles */
.about-page {
    padding: 0;
}

.about-content {
    padding: 2rem 0;
}

.about-section {
    margin-bottom: 3rem;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 1.5rem;
}

.about-card {
    background: white;
    border: 2px solid var(--radical-dark);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.3s ease;
}

.about-card:hover {
    border-color: var(--radical-orange);
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.1);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 1.5rem;
}

.team-member {
    background: white;
    border: 2px solid var(--radical-light-grey);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.team-member:hover {
    border-color: var(--radical-orange);
    transform: translateY(-2px);
}

.member-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--radical-dark);
    margin-bottom: 0.5rem;
}

.member-role {
    font-size: 1rem;
    color: var(--radical-orange);
    font-weight: 600;
    margin-bottom: 1rem;
}

.member-bio {
    color: var(--radical-dark);
    line-height: 1.6;
    opacity: 0.8;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.value-item {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.value-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.value-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.value-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--radical-orange);
    margin-bottom: 0.75rem;
}

.value-description {
    color: var(--radical-dark);
    line-height: 1.6;
    opacity: 0.8;
}

.contact-section {
    background: var(--radical-light-grey);
    border-radius: 1rem;
    padding: 2rem;
    margin-top: 2rem;
}

.contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.contact-item {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: white;
    border-radius: 0.5rem;
}

.contact-label {
    font-weight: 600;
    color: var(--radical-orange);
    margin-bottom: 0.25rem;
}

.contact-value {
    color: var(--radical-dark);
    font-weight: 500;
}

/* Single Page Styles */
.single-page {
    background-color: var(--radical-light-grey);
    padding: 2rem 0;
}

.content-container {
    max-width: 90%;
    width: 90%;
    margin: 0 auto;
    background: white;
    padding: 3rem;
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.content-container h1 {
    color: var(--radical-dark);
    margin-bottom: 2rem;
    font-size: 2.5rem;
}

.content-container .content {
    color: var(--radical-dark);
    line-height: 1.8;
    font-size: 1.1rem;
}

/* Fix positioning-grid within content-container */
.content-container .positioning-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.content-container .positioning-card {
    background-color: var(--radical-dark);
    color: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.content-container .positioning-card:hover {
    transform: translateY(-0.25rem);
}


/* Cookie notice — sticky bar at the bottom of the viewport. */
.cookie-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #1a1a1a;
    color: #f0f0f0;
    border-top: 3px solid var(--radical-accent, #d4351c);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.18);
}

.cookie-notice-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.cookie-notice-text {
    margin: 0;
    flex: 1 1 320px;
    font-size: 0.92rem;
    line-height: 1.5;
}

.cookie-notice-text i {
    color: var(--radical-accent, #d4351c);
    margin-right: 0.4rem;
}

.cookie-notice-text a {
    color: #ffb3a8;
    text-decoration: underline;
}

.cookie-notice-dismiss {
    flex: 0 0 auto;
    padding: 0.5rem 1.2rem;
    border: 0;
    border-radius: 6px;
    background: var(--radical-accent, #d4351c);
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 120ms ease;
}

.cookie-notice-dismiss:hover { background: #b32a13; }

@media (max-width: 600px) {
    .cookie-notice-inner { padding: 0.75rem 1rem; }
    .cookie-notice-dismiss { width: 100%; }
}

/* Footer Styles */
.site-footer {
    background: var(--radical-dark);
    color: white;
    margin-top: 3rem;
}

/* Newsletter archive list (on /newsletters/) */
.newsletter-archive {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.newsletter-archive-item a {
    display: block;
    padding: 1rem 1.25rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    border-left: 4px solid var(--radical-accent, #d4351c);
    text-decoration: none;
    color: inherit;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.newsletter-archive-item a:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}

.newsletter-archive-date {
    color: var(--radical-accent, #d4351c);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.newsletter-archive-title {
    color: var(--radical-dark);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.newsletter-archive-preview {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    padding: 3rem 2rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Logo / branding section spans the full row; expertise + contact
       sit on the row beneath, side by side. */
    .footer-content .footer-section:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-content .footer-section:first-child {
        grid-column: auto;
    }
}

.footer-section {
    display: flex;
    flex-direction: column;
}

.footer-logo {
    margin-bottom: 1rem;
}

.footer-logo .logo-redesign {
    margin-bottom: 1rem;
    transform: scale(0.8);
    transform-origin: left;
}

.footer-logo .logo-main-text {
    font-size: 2.2rem;
}

.footer-logo .logo-sub-text {
    font-size: 0.75rem;
}

.footer-tagline {
    color: var(--radical-light);
    opacity: 0.9;
    line-height: 1.5;
    font-size: 0.95rem;
}

.footer-title {
    color: var(--radical-orange);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-title i {
    font-size: 1rem;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.contact-details-block {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
}

.contact-details-block:last-child {
    margin-bottom: 0;
}


.site-footer .contact-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    color: var(--radical-light);
    font-size: 0.88rem;
    line-height: 1.3;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.site-footer .contact-item i {
    color: var(--radical-orange);
    width: 16px;
    text-align: center;
}

.expertise-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 0.85rem 1rem;
}

.expertise-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--radical-light);
    font-size: 0.9rem;
}

.expertise-item i {
    color: var(--radical-orange);
    font-size: 0.8rem;
    width: 16px;
    text-align: center;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 2rem;
}

.footer-bottom-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
}

@media (max-width: 1280px) {
    .footer-bottom-content {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem 2rem;
    }

    .footer-link-group {
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-link-group + .footer-link-group {
        padding-left: 0;
        border-left: none;
    }
}

@media (max-width: 900px) {
    .footer-links {
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100%;
    }

    .footer-link-group {
        gap: 0.75rem 1.25rem !important;
        width: 100%;
    }
}

.footer-bottom p {
    color: var(--radical-light);
    opacity: 0.8;
    font-size: 0.9rem;
}

.footer-links {
    display: flex;
    flex-direction: row;
    gap: 2.5rem;
    flex-wrap: nowrap;
    align-items: center;
}

.footer-link-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1.5rem;
    align-items: center;
}

.footer-link-group + .footer-link-group {
    padding-left: 2.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
    .footer-link-group + .footer-link-group {
        padding-left: 0;
        border-left: none;
    }
}

.footer-link {
    color: var(--radical-light);
    text-decoration: none;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.footer-link:hover {
    color: var(--radical-orange);
}

.footer-link i {
    font-size: 0.8rem;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        padding: 2rem 1rem;
        text-align: center;
    }
    
    .footer-logo .logo-redesign {
        transform: scale(1);
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-links {
        justify-content: center;
    }
}

/* Scroll-snap product image carousel */
.carousel-frame {
    position: relative;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.15s ease;
}

.carousel-btn:hover {
    background: var(--radical-accent, #d4351c);
}

.carousel-prev { left: 0.5rem; }
.carousel-next { right: 0.5rem; }

.image-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    gap: 1rem;
    padding: 0 3.5rem 0.5rem 3.5rem;
    -webkit-overflow-scrolling: touch;
}

.image-carousel::-webkit-scrollbar {
    height: 8px;
}

.image-carousel::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.image-slide {
    flex: 0 0 80%;
    scroll-snap-align: start;
    margin: 0;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

.image-slide img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
    background: #fafafa;
    padding: 1rem 0;
    box-sizing: border-box;
}

.image-slide figcaption {
    padding: 0.7rem 1rem;
    color: #444;
    font-size: 0.9rem;
    line-height: 1.45;
    border-top: 1px solid #eee;
}

@media (min-width: 700px) {
    .image-slide {
        flex: 0 0 calc(50% - 0.5rem);
    }
}

@media (min-width: 1100px) {
    .image-slide {
        flex: 0 0 calc(33.333% - 0.7rem);
    }
}

/* Single-image variant — always one image per view, used in the
   features-gallery split row */
.image-carousel-single {
    padding: 0 !important;
}

.image-carousel-single .image-slide {
    flex: 0 0 100% !important;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Stretch the gallery column to match the features column height,
   then vertically centre the carousel image within the slide */
.product-gallery {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.product-gallery .carousel-frame {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.product-gallery .image-carousel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.image-carousel-single .image-slide {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.image-carousel-single .image-slide img {
    flex: 1 1 0;
    min-height: 0;
    height: 0;
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    align-self: stretch;
}

.features-gallery-row {
    /* falls back to single-column on narrower viewports */
}

@media (max-width: 900px) {
    .features-gallery-row {
        grid-template-columns: 1fr !important;
    }
}

/* Scenario illustration — used on /applications/weighing/ to show
   a Robot T202 with scale, scanner, and HTTP/JSON transaction flow */
.scenario-diagram {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-top: 4px solid var(--radical-accent, #d4351c);
    padding: 1.25rem 1.5rem 1rem;
    margin: 0 0 1.5rem 0;
}
.scenario-diagram svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
}
.scenario-caption {
    margin: 0.5rem 0 0;
    color: #555;
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.55;
    text-align: center;
}

/* Pallet + cartons */
.scenario-diagram .carton           { fill: #f4d6a8; stroke: #b88a3c; stroke-width: 1; }
.scenario-diagram .pallet-board     { fill: #c79661; stroke: #8a5e2e; stroke-width: 1; }
.scenario-diagram .pallet-spacer    { fill: #8a5e2e; }

/* Scale */
.scenario-diagram .scale-deck       { fill: #cfd2d6; stroke: #8a8d92; stroke-width: 1; }
.scenario-diagram .scale-base       { fill: #8a8d92; }
.scenario-diagram .scale-display-bg { fill: #1a1a1a; stroke: #444; stroke-width: 1; }
.scenario-diagram .scale-display    { fill: #ff7755; font-family: 'Courier New', monospace; font-size: 22px; font-weight: bold; }
.scenario-diagram .scale-display-unit { fill: #ff7755; font-family: 'Courier New', monospace; font-size: 11px; }

/* Robot T202 */
.scenario-diagram .robot-body       { fill: var(--radical-dark, #222); stroke: #444; stroke-width: 1; }
.scenario-diagram .robot-screen     { fill: #062b2b; stroke: #0a4a4a; stroke-width: 1; }
.scenario-diagram .robot-screen-line  { fill: #4adcb0; font-family: 'Courier New', monospace; font-size: 13px; font-weight: bold; }
.scenario-diagram .robot-screen-line2 { fill: #2da080; font-family: 'Courier New', monospace; font-size: 11px; }
.scenario-diagram .robot-led        { fill: #4adcb0; filter: drop-shadow(0 0 4px #4adcb0); animation: scenLedPulse 2s ease-in-out infinite; }
.scenario-diagram .robot-key        { fill: #2a2a2a; stroke: #444; stroke-width: 1; }
.scenario-diagram .robot-key.key-accent { fill: var(--radical-accent, #d4351c); }

/* Scanner */
.scenario-diagram .scanner-body     { fill: #2a2a2a; stroke: #555; stroke-width: 1; }
.scenario-diagram .scanner-handle   { fill: #1a1a1a; stroke: #555; stroke-width: 1; }
.scenario-diagram .scanner-window   { fill: var(--radical-accent, #d4351c); filter: drop-shadow(0 0 3px rgba(212,53,28,0.6)); }
.scenario-diagram .barcode-beam     { fill: #d4351c; opacity: 0.7; }

/* Server */
.scenario-diagram .server-slot      { fill: #2a2a2a; stroke: #555; stroke-width: 1; }
.scenario-diagram .server-led       { fill: #4adcb0; }
.scenario-diagram .server-led.pulse { animation: scenLedPulse 1.4s ease-in-out infinite; }
.scenario-diagram .server-label     { fill: white; font-size: 13px; font-weight: 600; }

/* Labels */
.scenario-diagram .scen-label       { fill: var(--radical-dark, #222); font-size: 14px; font-weight: 600; }
.scenario-diagram .scen-mini-label  { font-size: 11px; font-style: italic; }

/* Flow lines + tags */
.scenario-diagram .scen-flow        { fill: none; stroke: var(--radical-accent, #d4351c); stroke-width: 2; stroke-dasharray: 4 4; opacity: 0.55; }
.scenario-diagram .scen-flow-strong { stroke-width: 3; stroke-dasharray: none; opacity: 0.85; }
.scenario-diagram .flow-tag         { fill: var(--radical-accent, #d4351c); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.scenario-diagram .flow-tag-strong  { font-size: 12px; }

/* Animated flow dots */
.scenario-diagram .scen-dot         { fill: var(--radical-accent, #d4351c); filter: drop-shadow(0 0 4px rgba(212,53,28,0.55)); }
.scenario-diagram .scen-dot-tx      { fill: var(--radical-accent, #d4351c); }

/* Home page redesigned hero — clean slogan + animated diagram */
.home-hero-v2 {
    position: relative;
    display: grid;
    grid-template-columns: 0.9fr 1.4fr;
    gap: 2.5rem;
    align-items: center;
    min-height: 520px;
    margin-bottom: 3rem;
    padding: 1.5rem 1.75rem;
    overflow: hidden;
    border-radius: 12px;
}

/* Subtle packhouse floor-plan background behind the hero */
.home-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.home-hero-bg svg {
    width: 100%;
    height: 100%;
    opacity: 0.09;
    color: var(--radical-accent, #d4351c);
}

.home-hero-bg svg rect,
.home-hero-bg svg line,
.home-hero-bg svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.home-hero-bg svg .pallet-grid rect {
    fill: currentColor;
    fill-opacity: 0.3;
    stroke: currentColor;
    stroke-width: 0.6;
}

.home-hero-bg svg .zone-label {
    fill: currentColor;
    stroke: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    font-family: 'Courier New', monospace;
}

.home-hero-bg svg .bay-num {
    fill: currentColor;
    stroke: none;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
}

.home-hero-text,
.home-hero-visual {
    position: relative;
    z-index: 1;
}

/* Below the first big breakpoint: visual still fits beside text but is
   shorter — drop centre-alignment so the text doesn't sit pushed
   halfway down a tall row. */
@media (max-width: 1280px) {
    .home-hero-v2 {
        align-items: start;
        min-height: 0;
        padding-top: 1rem;
    }
}

/* At tablet width and below, stack to a single column. */
@media (max-width: 960px) {
    .home-hero-v2 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.home-hero-eyebrow {
    margin: 0 0 1rem 0;
    color: var(--radical-accent, #d4351c);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.home-hero-slogan {
    margin: 0 0 1.25rem 0;
    color: var(--radical-dark, #222);
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.home-hero-slogan .accent {
    color: var(--radical-accent, #d4351c);
    position: relative;
    white-space: nowrap;
}

.home-hero-slogan .accent::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.05em;
    height: 0.18em;
    background: rgba(212, 53, 28, 0.18);
    z-index: -1;
}

.home-hero-subtitle {
    margin: 0 0 2rem 0;
    color: #555;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.55;
    max-width: 28em;
}

.home-hero-scroll {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--radical-dark, #222);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid #d6d8dc;
    background: white;
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.home-hero-scroll:hover {
    background: var(--radical-accent, #d4351c);
    border-color: var(--radical-accent, #d4351c);
    color: white;
}

.home-hero-scroll i {
    animation: heroArrowBounce 1.8s ease-in-out infinite;
    font-size: 0.85rem;
}

@keyframes heroArrowBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

/* Hero SVG diagram */
.home-hero-visual {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}

.home-hero-visual svg {
    width: 100%;
    height: auto;
    display: block;
}

.home-hero-visual .hero-titlebar         { fill: #14171c; }
.home-hero-visual .hero-card-title       { fill: #cfd2d6; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; }
.home-hero-visual .hero-led              { fill: #4adcb0; opacity: 0.8; }
.home-hero-visual .hero-spark            { fill: none; stroke: #4adcb0; stroke-width: 1.5; stroke-linejoin: round; }
.home-hero-visual .hero-spark-warn       { stroke: #ffb86b; }
.home-hero-visual .hero-card-value       { fill: #4adcb0; font-family: 'Courier New', monospace; font-size: 14px; font-weight: 700; }
.home-hero-visual .hero-card-warn        { fill: #ffb86b; }
.home-hero-visual .hero-card-sub         { fill: #888; font-family: 'Courier New', monospace; font-size: 7px; letter-spacing: 0.08em; }

/* Capability tiles (2x2 grid) */
.home-hero-visual .cap-tile-link         { cursor: pointer; }
.home-hero-visual .cap-tile-bg {
    fill: rgba(255, 255, 255, 0.45);
    stroke: rgba(0, 0, 0, 0.08);
    stroke-width: 1;
    transition: fill 0.15s ease, stroke 0.15s ease;
}
.home-hero-visual .cap-tile-link:hover .cap-tile-bg {
    stroke: var(--radical-accent, #d4351c);
    stroke-width: 2;
    fill: rgba(255, 250, 250, 0.85);
}
.home-hero-visual .cap-tile-label {
    fill: var(--radical-dark, #222);
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
}
.home-hero-visual .cap-tile-link:hover .cap-tile-label {
    fill: var(--radical-accent, #d4351c);
}

/* RoboX module label inside the AUTOMATION tile */
.home-hero-visual .hero-robox-text {
    fill: #4adcb0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* Conveyor in SOLUTIONS tile */
.home-hero-visual .hero-conveyor        { fill: #4a4a4a; stroke: #2a2a2a; stroke-width: 1; }
.home-hero-visual .hero-conveyor-roller { fill: #999; stroke: #555; stroke-width: 1; }

/* Sensor pulse-wave animation (for sensor tile) */
.home-hero-visual .hero-sensor-wave {
    fill: none;
    stroke: var(--radical-accent, #d4351c);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0;
}
.home-hero-visual .hero-sensor-wave.w1 { animation: heroSensorPulse 2s ease-out infinite 0s; }
.home-hero-visual .hero-sensor-wave.w2 { animation: heroSensorPulse 2s ease-out infinite 0.4s; }
.home-hero-visual .hero-sensor-wave.w3 { animation: heroSensorPulse 2s ease-out infinite 0.8s; }
@keyframes heroSensorPulse {
    0%   { opacity: 0; }
    20%  { opacity: 0.85; }
    100% { opacity: 0; }
}

.home-hero-visual .hero-server-slot      { fill: #2a2a2a; }
.home-hero-visual .hero-led-on           { fill: #4adcb0; }
.home-hero-visual .hero-led-pulse        { fill: #4adcb0; animation: heroLedPulse 1.4s ease-in-out infinite; }
.home-hero-visual .hero-server-label     { fill: white; font-size: 11px; font-weight: 600; }

@keyframes heroLedPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

.home-hero-visual .hero-connector        { stroke: var(--radical-accent, #d4351c); stroke-width: 2; stroke-dasharray: 4 4; opacity: 0.5; }

.home-hero-visual .hero-floor            { stroke: #ccc; stroke-width: 1.5; stroke-dasharray: 3 5; }
.home-hero-visual .hero-robot-body       { fill: var(--radical-dark, #222); stroke: #444; stroke-width: 1; }
.home-hero-visual .hero-robot-screen     { fill: #062b2b; }
.home-hero-visual .hero-robot-key        { fill: #2a2a2a; }

/* Forklift / vehicle terminal */
.home-hero-visual .hero-vehicle-body     { fill: #f5b53a; stroke: #b8801c; stroke-width: 1; }
.home-hero-visual .hero-vehicle-wheel    { fill: #1a1a1a; stroke: #444; stroke-width: 1; }
.home-hero-visual .hero-vehicle-mast     { stroke: #444; stroke-width: 1.5; stroke-linecap: round; fill: none; }

/* Wireless sensor */
.home-hero-visual .hero-sensor-body      { fill: #e8eaee; stroke: #888; stroke-width: 1; }
.home-hero-visual .hero-sensor-tip       { fill: var(--radical-accent, #d4351c); filter: drop-shadow(0 0 3px rgba(212, 53, 28, 0.6)); }
.home-hero-visual .hero-sensor-led       { fill: #4adcb0; animation: heroLedPulse 1.6s ease-in-out infinite; }

/* Reefer container */
.home-hero-visual .hero-reefer-body      { fill: #f4f5f7; stroke: #888; stroke-width: 1; }
.home-hero-visual .hero-reefer-corr      { stroke: #c4c6cb; stroke-width: 0.8; }
.home-hero-visual .hero-reefer-cooling   { fill: #d8dcd6; stroke: #888; stroke-width: 1; }

@media (prefers-reduced-motion: reduce) {
    .home-hero-scroll i,
    .home-hero-visual .hero-led-pulse,
    .home-hero-visual .hero-sensor-wave { animation: none; }
}

/* Scroll reveal — sections fade and slide up as they enter the viewport */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Contact section (About page): form on the left, contact info on the right */
.contact-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-info-block {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    border-left: 3px solid var(--radical-accent, #d4351c);
    padding: 1.1rem 1.4rem;
}

.contact-info-heading {
    margin: 0 0 0.75rem 0;
    color: var(--radical-dark, #222);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.contact-info-heading i {
    color: var(--radical-accent, #d4351c);
    font-size: 0.9rem;
}

.contact-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: #333;
    font-size: 0.94rem;
    line-height: 1.5;
}

.contact-info-list li > i {
    color: var(--radical-accent, #d4351c);
    width: 1rem;
    text-align: center;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.contact-info-list a {
    color: #333;
    text-decoration: none;
    border-bottom: 1px dotted rgba(212, 53, 28, 0.4);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.contact-info-list a:hover {
    color: var(--radical-accent, #d4351c);
    border-bottom-color: var(--radical-accent, #d4351c);
}

/* Contact form (About page) */
.contact-form {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--radical-accent, #d4351c);
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.contact-field > span {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--radical-dark, #222);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact-field > span em {
    color: #888;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.3rem;
}

.contact-field input,
.contact-field textarea {
    font: inherit;
    color: #222;
    padding: 0.6rem 0.85rem;
    background: #fafafa;
    border: 1px solid #d6d8dc;
    border-radius: 6px;
    font-size: 0.97rem;
    line-height: 1.45;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.contact-field input:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--radical-accent, #d4351c);
    background: white;
    box-shadow: 0 0 0 3px rgba(212, 53, 28, 0.15);
}

.contact-field textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

.contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.contact-captcha {
    margin-top: 0.25rem;
}

.contact-form-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.contact-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    background: var(--radical-accent, #d4351c);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.97rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.contact-submit:hover  { background: #b32e18; }
.contact-submit:active { transform: translateY(1px); }
.contact-submit:disabled {
    background: #aaa;
    cursor: not-allowed;
    transform: none;
}

.contact-status {
    flex: 1;
    min-width: 220px;
    font-size: 0.93rem;
    line-height: 1.5;
    color: #555;
}

.contact-status.success {
    color: #1f7a3a;
    font-weight: 600;
}

.contact-status.error {
    color: var(--radical-accent, #d4351c);
    font-weight: 600;
}

/* Mailing-list subscribe form (variation on contact form) */
.subscribe-form {
    max-width: 640px;
}

.subscribe-privacy {
    margin: 0;
    color: #888;
    font-size: 0.82rem;
    line-height: 1.5;
}

.subscribe-privacy a {
    color: var(--radical-accent, #d4351c);
    text-decoration: none;
    border-bottom: 1px dotted rgba(212, 53, 28, 0.4);
}

.subscribe-privacy a:hover {
    border-bottom-style: solid;
}

/* Palletizing scenario — mixed cartons, fixed scanner, pallet stack, progress display */
.scenario-diagram .pal-carton            { animation: qcCartonSlide 11s linear infinite; }
.scenario-diagram .pal-carton-1          { animation-delay: 0s; }
.scenario-diagram .pal-carton-2          { animation-delay: -2.75s; }
.scenario-diagram .pal-carton-3          { animation-delay: -5.5s; }
.scenario-diagram .pal-carton-4          { animation-delay: -8.25s; }

.scenario-diagram .pal-carton-red        { fill: #e8946a; stroke: #b86034; stroke-width: 1; }
.scenario-diagram .pal-carton-red-top    { fill: #f4b58c; stroke: #b86034; stroke-width: 1; }
.scenario-diagram .pal-carton-red-side   { fill: #c97a4d; stroke: #b86034; stroke-width: 1; }

.scenario-diagram .pal-carton-green      { fill: #8eb968; stroke: #5e8a3e; stroke-width: 1; }
.scenario-diagram .pal-carton-green-top  { fill: #b8d49a; stroke: #5e8a3e; stroke-width: 1; }
.scenario-diagram .pal-carton-green-side { fill: #6f9a4c; stroke: #5e8a3e; stroke-width: 1; }

.scenario-diagram .pal-carton-yellow     { fill: #e6c869; stroke: #b8983e; stroke-width: 1; }
.scenario-diagram .pal-carton-yellow-top { fill: #f4dc92; stroke: #b8983e; stroke-width: 1; }
.scenario-diagram .pal-carton-yellow-side{ fill: #c4a64c; stroke: #b8983e; stroke-width: 1; }

.scenario-diagram .pal-carton-text       { fill: #333; font-family: 'Courier New', monospace; font-size: 9px; font-weight: bold; letter-spacing: 0.04em; }

/* Fixed scanner pillar + window + pulsing beam */
.scenario-diagram .pal-scanner-post      { fill: #888; stroke: #555; stroke-width: 1; }
.scenario-diagram .pal-scanner-window    { fill: var(--radical-accent, #d4351c); filter: drop-shadow(0 0 4px rgba(212,53,28,0.6)); }
.scenario-diagram .pal-scanner-beam      { fill: var(--radical-accent, #d4351c); filter: drop-shadow(0 0 4px rgba(212,53,28,0.7)); animation: qcBeamPulse 1.4s ease-in-out infinite; }

/* Carton being scanned (held in front of the scanner) */
.scenario-diagram .pal-scan-carton       { animation: palScanGlow 2.4s ease-in-out infinite; transform-origin: 513px 275px; }

@keyframes palScanGlow {
    0%, 100% { filter: none; }
    40%, 60% { filter: drop-shadow(0 0 8px rgba(212, 53, 28, 0.7)); }
}

/* Robot terminal progress display */
.scenario-diagram .pal-progress-line     { fill: #4adcb0; font-family: 'Courier New', monospace; font-size: 18px; font-weight: bold; letter-spacing: 0.04em; }
.scenario-diagram .pal-progress-count    { fill: #4adcb0; font-family: 'Courier New', monospace; font-size: 36px; font-weight: bold; letter-spacing: 0.04em; }
.scenario-diagram .pal-status-ok         { fill: var(--radical-accent, #d4351c); font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; letter-spacing: 0.05em; }

/* Pallet stack + dropping carton animation */
.scenario-diagram .pal-floor             { stroke: #aaa; stroke-width: 1.5; stroke-dasharray: 3 4; }
.scenario-diagram .pal-carton-dropping   { animation: palCartonDrop 4s ease-in infinite; }

@keyframes palCartonDrop {
    0%, 10%   { transform: translateY(-180px); opacity: 0; }
    25%       { transform: translateY(-180px); opacity: 1; }
    55%       { transform: translateY(0); opacity: 1; }
    80%, 100% { transform: translateY(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .scenario-diagram .pal-carton            { animation: none; }
    .scenario-diagram .pal-carton-dropping   { animation: none; opacity: 0; }
    .scenario-diagram .pal-scan-carton       { animation: none; }
    .scenario-diagram .pal-scanner-beam      { animation: none; opacity: 0.6; }
}

/* IOT scenario — 20ft reefer, RS-232, Grafana */
.scenario-diagram .reefer-body          { fill: #f4f5f7; stroke: #888; stroke-width: 1.5; }
.scenario-diagram .reefer-rail          { fill: #6a6c70; }
.scenario-diagram .reefer-corrugation line { stroke: #c4c6cb; stroke-width: 1; }
.scenario-diagram .reefer-id            { fill: #555; font-family: 'Courier New', monospace; font-size: 16px; font-weight: bold; letter-spacing: 0.08em; }
.scenario-diagram .reefer-id-sub        { fill: #888; font-family: 'Courier New', monospace; font-size: 11px; letter-spacing: 0.2em; }
.scenario-diagram .reefer-cooling       { fill: #d8dcd6; stroke: #888; stroke-width: 1.5; }
.scenario-diagram .reefer-vent          { stroke: #5a5d62; stroke-width: 2; }
.scenario-diagram .reefer-display-bg    { fill: #062b2b; stroke: #0a4a4a; stroke-width: 1; }
.scenario-diagram .reefer-display-text  { fill: #4adcb0; font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold; }
.scenario-diagram .reefer-fan           { fill: #2a2a2a; stroke: #555; stroke-width: 1.5; animation: reeferFanSpin 4s linear infinite; transform-origin: 270px 370px; }
.scenario-diagram .reefer-fan-blade     { stroke: #aaa; stroke-width: 2; stroke-linecap: round; transform-origin: 270px 370px; animation: reeferFanSpin 4s linear infinite; }
.scenario-diagram .reefer-wheel         { fill: #1a1a1a; stroke: #555; stroke-width: 1; }

@keyframes reeferFanSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Robot T205 antenna */
.scenario-diagram .robot-antenna     { stroke: #888; stroke-width: 2.5; stroke-linecap: round; }
.scenario-diagram .robot-antenna-tip { fill: var(--radical-accent, #d4351c); filter: drop-shadow(0 0 4px rgba(212, 53, 28, 0.6)); }

/* RS-232 cable */
.scenario-diagram .rs232-cable          { fill: none; stroke: #2a2a2a; stroke-width: 4; stroke-linecap: round; }
.scenario-diagram .rs232-connector      { fill: #888; stroke: #444; stroke-width: 1; }

/* Server tags inside the IOT server */
.scenario-diagram .iot-tag              { stroke-width: 0; }
.scenario-diagram .iot-tag-mqtt         { fill: rgba(212, 53, 28, 0.85); }
.scenario-diagram .iot-tag-tsdb         { fill: rgba(74, 220, 176, 0.85); }
.scenario-diagram .iot-tag-text         { fill: white; font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold; letter-spacing: 0.06em; }

/* Grafana mock dashboard */
.scenario-diagram .iot-grafana          { /* dark window */ }
.scenario-diagram .grafana-titlebar     { fill: #14171c; }
.scenario-diagram .grafana-title        { fill: #cfd2d6; font-size: 11px; font-weight: bold; letter-spacing: 0.04em; }
.scenario-diagram .grafana-dot          { fill: #4adcb0; opacity: 0.6; }
.scenario-diagram .grafana-panel        { fill: #2c2f36; stroke: #3a3e46; stroke-width: 1; }
.scenario-diagram .grafana-panel-label  { fill: #9aa0a6; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; }
.scenario-diagram .grafana-panel-value  { fill: #4adcb0; font-family: 'Courier New', monospace; font-size: 22px; font-weight: bold; }
.scenario-diagram .grafana-panel-warn   { fill: #ffb86b; }
.scenario-diagram .grafana-spark        { fill: none; stroke: #4adcb0; stroke-width: 2; stroke-linejoin: round; opacity: 0.85; }
.scenario-diagram .grafana-spark-warn   { stroke: #ffb86b; }
.scenario-diagram .grafana-foot         { fill: #888; font-size: 10px; font-style: italic; letter-spacing: 0.04em; }

.scenario-diagram .iot-hidden-path      { fill: none; stroke: none; }

@media (prefers-reduced-motion: reduce) {
    .scenario-diagram .reefer-fan,
    .scenario-diagram .reefer-fan-blade { animation: none; }
}

/* QC scenario — conveyor, inline scale, scanner, sliding cartons */
.scenario-diagram .qc-conveyor              { fill: #4a4a4a; stroke: #2a2a2a; stroke-width: 1; }
.scenario-diagram .qc-conveyor-frame        { fill: #2a2a2a; stroke: #1a1a1a; stroke-width: 1; }
.scenario-diagram .qc-roller                { fill: #999; stroke: #555; stroke-width: 1.5; }
.scenario-diagram .qc-leg                   { fill: #2a2a2a; }
.scenario-diagram .qc-direction-label       { fill: #888; font-size: 11px; font-style: italic; letter-spacing: 0.04em; }

.scenario-diagram .qc-scale-section         { fill: rgba(212, 53, 28, 0.18); stroke: var(--radical-accent, #d4351c); stroke-width: 1.5; stroke-dasharray: 4 3; }
.scenario-diagram .qc-scale-loadcell        { fill: var(--radical-accent, #d4351c); }
.scenario-diagram .qc-scale-link            { stroke: #888; stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.6; }

.scenario-diagram .qc-scanner-mast          { stroke: #555; stroke-width: 5; stroke-linecap: round; }
.scenario-diagram .qc-scanner-head          { fill: #1a1a1a; stroke: #444; stroke-width: 1; }
.scenario-diagram .qc-scanner-window        { fill: var(--radical-accent, #d4351c); filter: drop-shadow(0 0 3px rgba(212, 53, 28, 0.6)); }
.scenario-diagram .qc-scanner-beam          { fill: var(--radical-accent, #d4351c); filter: drop-shadow(0 0 4px rgba(212, 53, 28, 0.7)); animation: qcBeamPulse 1.4s ease-in-out infinite; }
.scenario-diagram .qc-scanner-beam-tip      { fill: var(--radical-accent, #d4351c); animation: qcBeamPulse 1.4s ease-in-out infinite; }

@keyframes qcBeamPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* Sliding cartons on the QC conveyor */
.scenario-diagram .qc-carton                { animation: qcCartonSlide 9s linear infinite; }
.scenario-diagram .qc-carton-1              { animation-delay: 0s; }
.scenario-diagram .qc-carton-2              { animation-delay: -3s; }
.scenario-diagram .qc-carton-3              { animation-delay: -6s; }

@keyframes qcCartonSlide {
    0%   { transform: translateX(-90px); opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translateX(720px); opacity: 0; }
}

/* QC Robot pedestal */
.scenario-diagram .qc-robot-pedestal        { fill: #555; stroke: #2a2a2a; stroke-width: 1; }
.scenario-diagram .qc-robot-pedestal-base   { fill: #2a2a2a; rx: 2; }

@media (prefers-reduced-motion: reduce) {
    .scenario-diagram .qc-carton             { animation: none; }
    .scenario-diagram .qc-scanner-beam,
    .scenario-diagram .qc-scanner-beam-tip   { animation: none; opacity: 0.6; }
}

/* Vehicle / forklift scenario */
.scenario-diagram .forklift-ground        { stroke: #ccc; stroke-width: 1.5; stroke-dasharray: 4 6; }
.scenario-diagram .forklift-detail        { stroke: rgba(0,0,0,0.18); stroke-width: 1; }
.scenario-diagram .forklift-hood          { fill: #d49a26; stroke: #8a5e10; stroke-width: 1; }
.scenario-diagram .forklift-body          { fill: #f5b53a; stroke: #b8801c; stroke-width: 1.5; }
.scenario-diagram .forklift-counterweight { fill: #d49a26; stroke: #8a5e10; stroke-width: 1.5; }
.scenario-diagram .forklift-seat          { fill: #2a2a2a; stroke: #555; stroke-width: 1; }
.scenario-diagram .forklift-pillar        { fill: #2a2a2a; stroke: #555; stroke-width: 1; }
.scenario-diagram .forklift-roof          { fill: #2a2a2a; stroke: #555; stroke-width: 1; }
.scenario-diagram .forklift-mast          { fill: #444; stroke: #2a2a2a; stroke-width: 1; }
.scenario-diagram .forklift-fork          { fill: #555; stroke: #2a2a2a; stroke-width: 1; }
.scenario-diagram .forklift-wheel         { fill: #1a1a1a; stroke: #444; stroke-width: 2; }
.scenario-diagram .forklift-hub           { fill: #888; }

.scenario-diagram .vehicle-bin            { fill: #6fa0e0; stroke: #3a6fb0; stroke-width: 1.5; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)); }
.scenario-diagram .bin-label-text         { fill: white; font-family: 'Courier New', monospace; font-size: 13px; font-weight: bold; letter-spacing: 0.05em; }

.scenario-diagram .vehicle-terminal .robot-body   { fill: var(--radical-dark, #222); stroke: #444; stroke-width: 1; }
.scenario-diagram .vehicle-terminal .robot-screen { fill: #062b2b; stroke: #0a4a4a; stroke-width: 1; }
.scenario-diagram .vt-screen-line   { fill: #4adcb0; font-family: 'Courier New', monospace; font-size: 10px; font-weight: bold; }
.scenario-diagram .vt-screen-line2  { fill: #2da080; font-family: 'Courier New', monospace; font-size: 9px; }
.scenario-diagram .vt-mount-label   { fill: var(--radical-accent, #d4351c); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; }

.scenario-diagram .ap-body         { fill: white; stroke: #888; stroke-width: 1.5; }
.scenario-diagram .ap-antenna      { stroke: #555; stroke-width: 2; stroke-linecap: round; }
.scenario-diagram .wifi-arc        { fill: none; stroke: var(--radical-accent, #d4351c); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.scenario-diagram .wifi-arc.w1     { animation: wifiPulse 2s ease-out infinite; animation-delay: 0s; }
.scenario-diagram .wifi-arc.w2     { animation: wifiPulse 2s ease-out infinite; animation-delay: 0.4s; }
.scenario-diagram .wifi-arc.w3     { animation: wifiPulse 2s ease-out infinite; animation-delay: 0.8s; }
.scenario-diagram .ap-2 .wifi-arc.w1 { animation-delay: 0.6s; }
.scenario-diagram .ap-2 .wifi-arc.w2 { animation-delay: 1s; }
.scenario-diagram .ap-2 .wifi-arc.w3 { animation-delay: 1.4s; }

.scenario-diagram .roaming-path    { fill: none; stroke: #888; stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0.55; }
.scenario-diagram .wifi-link       { fill: none; stroke: var(--radical-accent, #d4351c); stroke-width: 2; stroke-linecap: round; }
.scenario-diagram .wifi-link.active { stroke-dasharray: 6 3; opacity: 0.85; }
.scenario-diagram .wifi-link.weak  { stroke-dasharray: 2 5; opacity: 0.35; }

@keyframes wifiPulse {
    0%   { opacity: 0; }
    20%  { opacity: 0.85; }
    100% { opacity: 0; }
}

/* RFID reader on the Robot terminal */
.scenario-diagram .rfid-reader       { fill: #1a1a1a; stroke: var(--radical-accent, #d4351c); stroke-width: 1.5; }
.scenario-diagram .rfid-label        { fill: var(--radical-accent, #d4351c); font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; letter-spacing: 0.1em; }
.scenario-diagram .rfid-wave         { fill: none; stroke: var(--radical-accent, #d4351c); stroke-width: 1.5; opacity: 0; }
.scenario-diagram .rfid-wave.w1      { animation: rfidWave 2s ease-out infinite; animation-delay: 0s; }
.scenario-diagram .rfid-wave.w2      { animation: rfidWave 2s ease-out infinite; animation-delay: 0.4s; }
.scenario-diagram .rfid-wave.w3      { animation: rfidWave 2s ease-out infinite; animation-delay: 0.8s; }
.scenario-diagram .rfid-card-body    { fill: var(--radical-accent, #d4351c); stroke: #8c2412; stroke-width: 1; }
.scenario-diagram .rfid-card-chip    { fill: #ffd577; stroke: #b88a3c; stroke-width: 0.5; }
.scenario-diagram .rfid-card-line    { fill: rgba(255,255,255,0.7); }

@keyframes rfidWave {
    0%   { transform: scale(0.3); opacity: 0.85; }
    100% { transform: scale(1.3); opacity: 0; }
}

/* Labelling scenario extras */
.scenario-diagram .conveyor          { fill: #b0b3b8; stroke: #6a6c70; stroke-width: 1; }
.scenario-diagram .conveyor-shadow   { fill: rgba(0,0,0,0.18); }
.scenario-diagram .carton-front      { fill: #f4d6a8; stroke: #b88a3c; stroke-width: 1; }
.scenario-diagram .carton-side       { fill: #d8b478; stroke: #b88a3c; stroke-width: 1; }
.scenario-diagram .carton-top        { fill: #fbe5be; stroke: #b88a3c; stroke-width: 1; }
.scenario-diagram .carton-label      { fill: white; stroke: #999; stroke-width: 0.5; }
.scenario-diagram .carton-label-text { fill: #333; font-size: 9px; font-weight: bold; font-family: 'Courier New', monospace; }
.scenario-diagram .barcode-stripe    { fill: #111; }

.scenario-diagram .scen-label-or     { fill: #888; font-style: italic; font-size: 12px; font-weight: 400; }
.scenario-diagram .server-or-tag     { fill: #888; font-style: italic; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.scenario-diagram .server-3rd        { fill: #f0f0f0; stroke: #b0b3b8; stroke-width: 1.5; stroke-dasharray: 5 4; }
.scenario-diagram .server-slot-3rd   { fill: #ddd; stroke: #b0b3b8; stroke-width: 0.5; }
.scenario-diagram .server-led-3rd    { fill: #aaa; }
.scenario-diagram .server-label-3rd  { fill: #555; font-size: 13px; font-weight: 600; }

.scenario-diagram .printer-body      { fill: #2a2a2a; stroke: #555; stroke-width: 1; }
.scenario-diagram .printer-roll      { fill: #444; stroke: #666; stroke-width: 1; }
.scenario-diagram .printer-roll-bar  { fill: #1a1a1a; }
.scenario-diagram .printer-slot      { fill: #1a1a1a; stroke: #444; stroke-width: 1; }
.scenario-diagram .printer-led       { fill: #4adcb0; filter: drop-shadow(0 0 3px #4adcb0); animation: scenLedPulse 1.4s ease-in-out infinite; }
.scenario-diagram .printer-display   { fill: #062b2b; stroke: #0a4a4a; stroke-width: 1; }
.scenario-diagram .printer-display-text { fill: #4adcb0; font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold; }

.scenario-diagram .emerging-label-paper { fill: white; stroke: #999; stroke-width: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18)); animation: labelEmerge 5s ease-in-out infinite; transform-origin: center top; }
.scenario-diagram .emerging-label-text  { fill: #333; font-size: 10px; font-weight: bold; font-family: 'Courier New', monospace; }
.scenario-diagram .emerging-label-cultivar { fill: var(--radical-accent, #d4351c); font-size: 12px; letter-spacing: 0.04em; }
.scenario-diagram .emerging-label-grade    { fill: #333; font-size: 9px; letter-spacing: 0.06em; font-weight: 600; }
.scenario-diagram .barcode-stripe-emerging { fill: #111; }

@keyframes labelEmerge {
    0%, 8%   { transform: translateY(-50px); opacity: 0; }
    20%, 80% { transform: translateY(0); opacity: 1; }
    92%, 100% { transform: translateY(40px); opacity: 0; }
}

@keyframes scenLedPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .scenario-diagram .scen-dot,
    .scenario-diagram .robot-led,
    .scenario-diagram .server-led.pulse { animation: none; }
}

@media (max-width: 600px) {
    .scenario-diagram .scen-label { font-size: 11px; }
    .scenario-diagram .flow-tag   { font-size: 9px; }
}

/* Animated stack diagram on the Technology page */
.stack-diagram {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-top: 4px solid var(--radical-accent, #d4351c);
    padding: 1.5rem 1.75rem;
    margin-bottom: 2rem;
}

.stack-diagram svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 720px;
    margin: 0 auto;
}

.stack-diagram .stack-band rect {
    stroke: rgba(0, 0, 0, 0.08);
    stroke-width: 1;
    transition: transform 0.2s ease;
}

.stack-diagram .stack-band.sensing rect    { fill: #fef3f0; }
.stack-diagram .stack-band.gateway rect    { fill: #fef0e8; }
.stack-diagram .stack-band.network rect    { fill: #fee9dd; }
.stack-diagram .stack-band.platform rect   { fill: var(--radical-dark, #222); stroke: rgba(255,255,255,0.1); }

.stack-diagram .band-title {
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    fill: var(--radical-dark, #222);
}

.stack-diagram .band-title.platform-title { fill: white; }

.stack-diagram .band-items {
    font-family: inherit;
    font-size: 16px;
    fill: #555;
}

.stack-diagram .stack-band.platform .band-items { fill: rgba(255, 255, 255, 0.85); }

.stack-diagram .band-hint {
    font-family: inherit;
    font-size: 13px;
    font-style: italic;
    fill: var(--radical-accent, #d4351c);
    letter-spacing: 0.04em;
}

.stack-diagram .connector {
    stroke: var(--radical-accent, #d4351c);
    stroke-width: 2;
    stroke-dasharray: 4 4;
    opacity: 0.5;
}

.stack-diagram .flow-dot {
    fill: var(--radical-accent, #d4351c);
    filter: drop-shadow(0 0 4px rgba(212, 53, 28, 0.6));
    animation: stackFlowDown 4s linear infinite;
    transform-box: fill-box;
}

.stack-diagram .flow-dot.d1 { animation-delay: 0s; }
.stack-diagram .flow-dot.d2 { animation-delay: 1s; }
.stack-diagram .flow-dot.d3 { animation-delay: 2s; }
.stack-diagram .flow-dot.d4 { animation-delay: 3s; }

/* Robot edge entity on the right of the stack */
.stack-diagram .stack-robot rect {
    fill: white;
    stroke: var(--radical-accent, #d4351c);
    stroke-width: 2;
}

.stack-diagram .stack-robot .robot-glyph-bg {
    fill: rgba(212, 53, 28, 0.08);
    stroke: var(--radical-accent, #d4351c);
    stroke-width: 1.5;
}

.stack-diagram .stack-robot .robot-glyph {
    font-size: 36px;
    fill: var(--radical-dark, #222);
}

.stack-diagram .stack-robot .robot-foot {
    fill: #888;
    font-size: 13px;
    font-style: italic;
}

.stack-diagram .robot-flow {
    fill: none;
    stroke: var(--radical-accent, #d4351c);
    stroke-width: 2;
    stroke-dasharray: 4 4;
    opacity: 0.55;
}

.stack-diagram .robot-flow-http {
    stroke-dasharray: 1 5;
}

.stack-diagram .flow-label {
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    fill: var(--radical-accent, #d4351c);
    letter-spacing: 0.03em;
}

.stack-diagram .robot-dot {
    fill: var(--radical-accent, #d4351c);
    filter: drop-shadow(0 0 4px rgba(212, 53, 28, 0.55));
}

@media (prefers-reduced-motion: reduce) {
    .stack-diagram .robot-dot { display: none; }
}

@keyframes stackFlowDown {
    0%   { transform: translateY(120px); opacity: 0; }
    8%   { opacity: 1; }
    25%  { transform: translateY(195px); }
    27%  { transform: translateY(300px); }
    50%  { transform: translateY(375px); }
    52%  { transform: translateY(480px); }
    75%  { transform: translateY(555px); }
    77%  { transform: translateY(630px); opacity: 1; }
    100% { transform: translateY(630px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .stack-diagram .flow-dot { animation: none; opacity: 0.6; }
}

@media (max-width: 700px) {
    .stack-diagram .band-title  { font-size: 18px; }
    .stack-diagram .band-items  { font-size: 13px; }
    .stack-diagram .band-hint   { font-size: 11px; }
}

/* Home page showcase row — text + auto-rotating carousel side by side.
   Stacks at the same first responsive breakpoint as the header. */
@media (max-width: 1320px) {
    .home-showcase {
        grid-template-columns: 1fr !important;
    }

    /* Reset the height-via-flex chain that's only meaningful when the
       carousel column is stretching to match a sibling. Stacked, the
       slides need to size to their content. */
    .home-showcase-gallery,
    .home-showcase-gallery .carousel-frame,
    .home-showcase-gallery .image-carousel,
    .home-showcase-gallery .image-carousel-single .image-slide {
        flex: initial !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .home-showcase-gallery .image-carousel-single .image-slide img {
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: 380px !important;
        width: 100% !important;
    }
}

.home-showcase-gallery {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.home-showcase-gallery .carousel-frame {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.home-showcase-gallery .image-carousel {
    flex: 1;
    min-height: 0;
}

/* Grid of screenshot figures inside markdown body — 2-up at typical
   widths, falls back to one column on mobile */
.screenshot-pair {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

@media (max-width: 700px) {
    .screenshot-pair {
        grid-template-columns: 1fr;
    }
}

.screenshot-pair .screenshot-figure {
    margin: 0;
}

/* Inline screenshot figure used inside markdown body sections */
.screenshot-figure {
    margin: 1.5rem 0;
    padding: 0.75rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-left: 3px solid var(--radical-accent, #d4351c);
    display: block;
}

.screenshot-figure a {
    display: block;
    line-height: 0;
}

.screenshot-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    background: #fafafa;
}

.screenshot-figure figcaption {
    margin-top: 0.65rem;
    color: #666;
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.5;
    padding: 0 0.25rem 0.25rem;
}

/* Reusable two-column feature list (used via the feature-list / feature
   shortcodes — typography only, no card chrome) */
.feature-list-section {
    margin: 1.5rem 0 0 0;
}

.feature-list-title {
    margin: 0 0 0.4rem 0;
    color: var(--radical-dark, #222);
    font-size: 1.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--radical-accent, #d4351c);
    display: inline-block;
}

.feature-list-intro {
    margin: 0 0 1.5rem 0;
    color: #555;
    font-size: 0.97rem;
    line-height: 1.6;
}

.feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem 2.5rem;
    margin: 0;
}

.feature-list .feature-item dt {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--radical-dark, #222);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.feature-list .feature-item dt i {
    color: var(--radical-accent, #d4351c);
    font-size: 0.95rem;
    width: 1rem;
    text-align: center;
}

.feature-list .feature-item dd {
    margin: 0;
    color: #555;
    line-height: 1.55;
    font-size: 0.93rem;
}

.feature-list .feature-item dd p {
    margin: 0;
}

/* Legal page typography overrides — slightly tighter than software-body */
.legal-body h2 {
    font-size: 1.35rem;
    margin: 2.25rem 0 0.75rem 0;
    border-bottom: none;
    padding-bottom: 0;
    color: var(--radical-dark, #222);
}
.legal-body h2:first-child {
    margin-top: 0;
}
.legal-body h3 {
    font-size: 1.05rem;
    margin: 1.25rem 0 0.5rem 0;
}
.legal-body p {
    margin: 0 0 1rem 0;
}
.legal-body ul {
    margin: 0 0 1.25rem 0;
}
.legal-body ul li {
    margin-bottom: 0.5rem;
}

/* Software body typography (markdown-rendered .Content) */
.software-body h2 {
    font-size: 1.6rem;
    color: var(--radical-dark, #222);
    margin: 2rem 0 0.75rem 0;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--radical-accent, #d4351c);
    letter-spacing: -0.01em;
}
.software-body h2:first-child {
    margin-top: 0;
}
.software-body h3 {
    font-size: 1.2rem;
    color: var(--radical-dark, #222);
    margin: 1.5rem 0 0.5rem 0;
    font-weight: 600;
}
.software-body h4 {
    font-size: 1.05rem;
    color: var(--radical-dark, #222);
    margin: 1.25rem 0 0.4rem 0;
    font-weight: 600;
}
.software-body p {
    margin: 0 0 1rem 0;
}
.software-body ul,
.software-body ol {
    margin: 0 0 1rem 0;
    padding-left: 1.4rem;
}
.software-body li {
    margin-bottom: 0.4rem;
    line-height: 1.65;
}
.software-body strong {
    color: var(--radical-dark, #222);
}
.software-body code {
    background: #f4f4f4;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.92em;
    color: #c0392b;
}
.software-body pre {
    background: #f7f7f7;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 1rem 1.1rem;
    overflow-x: auto;
    line-height: 1.5;
    font-size: 0.9rem;
    margin: 0 0 1.25rem 0;
}
.software-body pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}
.software-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.25rem 0;
    font-size: 0.95rem;
}
.software-body th,
.software-body td {
    text-align: left;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid #eaeaea;
    vertical-align: top;
}
.software-body th {
    background: #fafafa;
    color: var(--radical-dark, #222);
    font-weight: 600;
    border-bottom: 2px solid #ddd;
}
.software-body tr:last-child td {
    border-bottom: none;
}
.software-body a {
    color: var(--radical-accent, #d4351c);
    text-decoration: none;
    font-weight: 600;
}
.software-body a:hover {
    text-decoration: underline;
}
.software-body blockquote {
    margin: 0 0 1.25rem 0;
    padding: 0.75rem 1.1rem;
    border-left: 4px solid var(--radical-accent, #d4351c);
    background: #fafafa;
    color: #444;
    font-style: italic;
}