/* ==========================================================================
   3ioSetu UI Polish Layer
   Generated: assembled from modular polish partials (ui-polish-pass workflow).
   Load LAST (after design-tokens.css, style.css, new-sections.css) so these
   same-specificity refinements win by source order. Token-driven, additive only.
   Modules: global, cards, home, forms, product, blog + cascade/cohesion fixes.
   ========================================================================== */


/* ====================== _polish-global.css ====================== */
/* ==========================================================================
   3ioSetu — Polish Partial: GLOBAL PRIMITIVES & CHROME  (module id: global)
   --------------------------------------------------------------------------
   Tasteful, additive refinement of cross-cutting chrome:
     • Buttons     — depth, polished sheen, universal :focus-visible rings
     • Navbar      — cleaner scrolled state, refined lang selector + mobile btn
     • Section hdr — eyebrow underline accent, balanced subtitle width/wrap
     • CTA band    — richer branded panel (gradient-primary over gradient-dark)
     • Footer      — spacing rhythm, link hover, social icon chips

   Rules: tokens only (design-tokens.css), reuse existing selectors so source
   order wins, no layout shifts/overflow, reduced-motion safe, no new hex.
   Loads AFTER css/style.css so same-specificity overrides take effect.
   ========================================================================== */

/* ==========================================================================
   1. BUTTONS — depth + focus rings
   ========================================================================== */

/* Smoother spring on every button; token-driven motion. */
.btn {
    transition: var(--transition-smooth);
    will-change: transform;
}

/* Primary: align rest/hover depth to the dedicated button-shadow tokens. */
.btn-primary {
    background: var(--gradient-primary);
    box-shadow: var(--shadow-btn);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn-hover);
}

/* Secondary: hairline + soft brand lift on hover (was flat md shadow). */
.btn-secondary {
    box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Light button (used on dark/branded bands): gentle lift instead of flat. */
.btn-light {
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.btn-light:hover {
    background-color: var(--color-bg);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Outline: keep transparent rest, add the same -2px lift on hover for parity. */
.btn-outline-primary {
    transition: var(--transition-smooth);
}

.btn-outline-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn);
}

/* Large / small size tweaks — comfortable tap targets, fluid type. */
.btn-lg {
    padding: 1rem 2.25rem;
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.125rem);
}

.btn-sm {
    letter-spacing: var(--tracking-wide);
}

/* Universal, accessible focus ring for buttons (keyboard only).
   Overrides the older outline-on-:focus so mouse clicks stay clean. */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-light:focus-visible,
.btn-outline-primary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus);
}

/* On dark/branded panels the primary ring needs a light halo to stay visible. */
.cta-section .btn:focus-visible,
.footer .btn:focus-visible {
    outline-color: var(--color-text-inverse);
    box-shadow: 0 0 0 3px var(--color-overlay-inverse-medium);
}

/* ==========================================================================
   2. NAVBAR — cleaner glass + scrolled state
   ========================================================================== */

.navbar {
    border-bottom: 1px solid var(--color-border-subtle);
    -webkit-backdrop-filter: var(--blur-sm);
    backdrop-filter: var(--blur-sm);
    background-color: var(--glass-bg-strong);
    transition: var(--transition-smooth);
}

/* Scrolled: tighter, crisper, hairline divider instead of a heavy shadow. */
.navbar.scrolled {
    background-color: var(--glass-bg-subtle);
    -webkit-backdrop-filter: var(--blur-md);
    backdrop-filter: var(--blur-md);
    box-shadow: var(--shadow-sm);
    border-bottom-color: var(--color-border);
}

.logo img {
    transition: transform var(--transition-fast);
}

.logo:hover img {
    transform: scale(1.02);
}

/* Desktop nav links: smooth pill hover, consistent radius. */
.nav-links a:not(.btn) {
    border-radius: var(--radius-md);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-links a:not(.btn):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* --- Language selector --- */
.lang-btn {
    border-color: var(--color-border);
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.lang-btn:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.lang-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Dropdown: elevated panel with token shadow + hairline. */
.lang-dropdown {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2) 0;
    overflow: hidden;
}

.lang-option {
    transition: var(--transition-fast);
}

.lang-option:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.lang-option:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Mobile menu button: comfortable hit area + accessible focus ring. */
.mobile-menu-btn {
    border-radius: var(--radius-md);
    line-height: 1;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.mobile-menu-btn:hover {
    color: var(--color-primary);
}

.mobile-menu-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   3. SECTION HEADERS — eyebrow underline + balanced subtitle
   ========================================================================== */

.section-header {
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.section-header h2 {
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    text-wrap: balance;
}

/* Refined accent underline: brand gradient sliver instead of flat bar. */
.section-header h2::after {
    width: 56px;
    height: 4px;
    margin-top: 0.75rem;
    background: var(--gradient-accent);
    border-radius: var(--radius-full);
}

/* Subtitle: a touch wider, secondary tone, pretty wrapping. */
.section-header p {
    max-width: 640px;
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    text-wrap: pretty;
}

/* Section separator: align to brand-tinted hairline token. */
.section-separator {
    background-image: linear-gradient(
        to right,
        transparent,
        var(--color-primary-light),
        transparent
    );
}

/* ==========================================================================
   4. CTA BAND — richer branded panel
   ========================================================================== */

/* Layer a deep gradient-dark base under the primary gradient for depth,
   plus a soft radial brand glow. Text already forced white in style.css. */
.cta-section {
    position: relative;
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background:
        radial-gradient(60% 120% at 80% 0%, var(--color-overlay-inverse-subtle) 0%, transparent 60%),
        var(--gradient-primary),
        var(--gradient-dark);
    overflow: hidden;
}

/* Top hairline accent — ties the band to the brand accent gradient. */
.cta-section::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--gradient-accent);
    opacity: 0.9;
}

.cta-content {
    position: relative;
    z-index: var(--z-raised);
    max-width: var(--container-narrow);
    margin-left: auto;
    margin-right: auto;
}

.cta-content h2 {
    font-size: clamp(2rem, 1.4rem + 2.4vw, 2.5rem);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    text-wrap: balance;
}

.cta-content p {
    color: var(--color-text-inverse-muted);
    line-height: var(--leading-relaxed);
    text-wrap: pretty;
}

/* ==========================================================================
   5. FOOTER — rhythm, link hover, social chips
   ========================================================================== */

.footer {
    background: var(--gradient-footer);
    padding: clamp(3.5rem, 6vw, 5rem) 0 var(--space-8);
}

.footer-grid {
    gap: clamp(2rem, 4vw, 4rem);
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.footer-logo {
    border-radius: var(--radius-md);
}

.footer h4 {
    letter-spacing: var(--tracking-wider);
}

/* Links: keep deliberate light contrast; add a subtle slide + focus ring. */
.footer ul li a {
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer ul li a:focus-visible {
    outline: 2px solid var(--color-text-inverse);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Social icons: tidy chips with a hairline; brand fill + lift on hover. */
.social-links {
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.social-links a {
    border: 1px solid var(--color-border-inverse-medium);
    background: var(--color-overlay-inverse-subtle);
    transition: var(--transition-smooth);
}

.footer .social-links a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.footer .social-links a:focus-visible {
    outline: 2px solid var(--color-text-inverse);
    outline-offset: 2px;
}

/* Contact info: align the icon hue to a lighter brand tone on the dark band. */
.contact-info i {
    color: var(--color-info);
}

/* Footer bottom: airier divider rhythm. */
.footer-bottom {
    border-top-color: var(--color-border-inverse);
    padding-top: var(--space-8);
    margin-top: var(--space-4);
}

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    /* Navbar: drop the resting glass blur cost on small screens. */
    .navbar {
        padding: 0.75rem 0;
    }

    .language-selector {
        margin-left: 0.5rem;
    }

    .section-header {
        margin-bottom: clamp(2rem, 6vw, 2.75rem);
    }

    .section-header h2::after {
        margin-top: 0.6rem;
    }

    .cta-section {
        padding: clamp(3rem, 9vw, 4rem) 0;
    }

    .footer-grid {
        gap: 2rem;
    }

    .social-links {
        margin-top: var(--space-5);
    }
}

@media (max-width: 480px) {
    .btn-lg {
        padding: 0.875rem 1.5rem;
    }

    .cta-content h2 {
        font-size: clamp(1.6rem, 1.2rem + 3vw, 2rem);
    }

    .footer {
        padding: 3rem 0 var(--space-6);
    }

    /* Social chips: stay comfortably tappable. */
    .social-links a {
        width: 40px;
        height: 40px;
    }
}

/* ==========================================================================
   7. REDUCED MOTION  (global tokens already neutralize transitions/animations;
      explicitly null transform-based lifts as a belt-and-braces guarantee)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .btn:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-light:hover,
    .btn-outline-primary:hover,
    .logo:hover img,
    .footer ul li a:hover,
    .footer .social-links a:hover {
        transform: none;
    }
}

/* ====================== _polish-cards.css ====================== */
/* ==========================================================================
   3ioSetu — Polish Partial: CARD & CONTENT-BLOCK FAMILIES (module id: cards)
   Additive, token-driven REFINEMENT (not a redesign).

   Unifies every card family to ONE depth / radius / hover language:
     - rest:  box-shadow var(--shadow-card); 1px hairline border var(--color-border)
     - hover: box-shadow var(--shadow-card-hover) + translateY(-6px);
              brand-tinted border var(--color-primary)
     - motion: var(--transition-smooth) (reduced-motion handled in design-tokens)

   Covered families:
     feature cards, core-features cards, benefit cards, USP cards
     (why-choose + testimonials reuse), trust badges, timeline,
     FAQ grid + FAQ accordion, dark "verticals" glass cards, check lists.

   Loaded AFTER style.css and new-sections.css so these overrides win.
   Selectors here match/exceed the originals' specificity on purpose.
   ========================================================================== */


/* ==========================================================================
   1. SHARED GRID RHYTHM
   ========================================================================== */
.features-grid,
.usp-grid,
.benefits-grid,
.faq-grid {
    gap: clamp(1.25rem, 2.5vw, 2rem);
}


/* ==========================================================================
   2. FEATURE CARDS (home "Features" grid)
   Original rest shadow = --shadow-md (flat-ish); unify to card depth + hairline.
   ========================================================================== */
.feature-card {
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: var(--transition-smooth);
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    background: var(--color-surface-elevated);
    border-color: var(--color-primary);
}

/* Keyboard reachability when a card wraps an anchor */
.feature-card:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card-hover);
}

/* Icon chip — consistent tinted rounded square, gentle lift on parent hover */
.feature-card .icon-box {
    background: var(--color-primary-light);
    border-radius: var(--radius-lg);
    transition: var(--transition-smooth);
}

.feature-card:hover .icon-box {
    background: var(--gradient-primary);
    color: var(--color-text-inverse);
    transform: scale(1.08) rotate(-4deg);
    box-shadow: var(--shadow-md);
}


/* ==========================================================================
   3. CORE-FEATURES SECTION (matches existing higher specificity to win)
   Was: raw 1.5rem radius, raw shadow values, translateY(-10px).
   Unify to the shared depth/radius/hover while keeping its larger feel.
   ========================================================================== */
.core-features-section .feature-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
}

.core-features-section .feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-primary);
}

.core-features-section .icon-box {
    background: var(--color-primary-light);
    border-radius: var(--radius-lg);
    transition: var(--transition-smooth);
}

.core-features-section .feature-card:hover .icon-box {
    background: var(--gradient-primary);
    color: var(--color-text-inverse);
    transform: scale(1.08) rotate(-4deg);
    box-shadow: var(--shadow-md);
}


/* ==========================================================================
   4. BENEFIT CARDS (kiosk page)
   Was: raw rest shadow, no hairline, accent only via border-bottom.
   Keep the orange accent feel but unify depth + add hairline.
   ========================================================================== */
.benefit-card {
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    border-bottom-width: 4px;
    border-bottom-color: transparent;
    border-radius: var(--radius-lg);
    transition: var(--transition-smooth);
}

.benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-border);
    border-bottom-color: var(--color-secondary);
}

/* Icon chip — tinted circle, lifts with the card */
.benefit-card .icon-box {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    transition: var(--transition-smooth);
}

.benefit-card:hover .icon-box {
    background: var(--gradient-primary);
    color: var(--color-text-inverse);
    transform: scale(1.08);
    box-shadow: var(--shadow-md);
}


/* ==========================================================================
   5. USP CARDS (Why-Choose grid AND Testimonials — same class)
   Was: no rest shadow, raw border, translateY(-5px) + --shadow-lg.
   Give them resting depth so they read as cards, unify hover.
   ========================================================================== */
.usp-card {
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
}

.usp-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-primary);
}

.usp-card:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card-hover);
}

/* Icon chip — tinted circle that activates on hover */
.usp-icon {
    background: var(--color-primary-light);
    transition: var(--transition-smooth);
}

.usp-card:hover .usp-icon {
    background: var(--gradient-primary);
    color: var(--color-text-inverse);
    transform: scale(1.08);
    box-shadow: var(--shadow-md);
}

/* --- Testimonial treatment ---------------------------------------------
   Testimonials reuse .usp-card (left-aligned, contain a fa-quote-left chip).
   Enhance generically: the leading quote chip becomes a soft tinted glyph,
   and the trailing author block gets a hairline divider. We target the
   structure that ONLY testimonial cards have (left-aligned via inline style)
   without owning any new selector — the .usp-icon override above already
   styles the quote chip; here we add a subtle accent ring on hover.        */
.usp-card .usp-icon i.fa-quote-left,
.usp-card .usp-icon .fa-quote-left {
    color: var(--color-primary);
}


/* ==========================================================================
   6. TRUST BADGES — make them intentional chips (not flat low-opacity rows)
   Was: opacity:0.7 on a bare flex row. Give each a real surface chip.
   ========================================================================== */
.trust-badges-section {
    padding: clamp(2.5rem, 5vw, 3.5rem) 0;
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.trust-badges-grid {
    gap: clamp(0.75rem, 2vw, 1.25rem);
}

.trust-badges-grid .trust-badge {
    opacity: 1;
    gap: 0.65rem;
    padding: 0.75rem 1.25rem;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.trust-badges-grid .trust-badge:hover {
    opacity: 1;
    transform: translateY(-2px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card);
}

.trust-badges-grid .trust-badge i {
    font-size: 1.35rem;
    color: var(--color-primary);
}

.trust-badges-grid .trust-badge span {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text);
    letter-spacing: var(--tracking-snug);
}


/* ==========================================================================
   7. TIMELINE (onboarding steps) — connector + step numbers
   ========================================================================== */
.timeline-section {
    padding: clamp(3rem, 6vw, 5rem) 0;
}

/* Connector: subtle brand-tinted gradient track instead of flat grey */
.timeline::before {
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--color-border) 0%,
        var(--color-primary-light) 50%,
        var(--color-border) 100%
    );
    border-radius: var(--radius-full);
}

/* Step number: tinted ring, soft shadow, smooth fill on hover */
.step-number {
    border-width: 3px;
    border-color: var(--color-primary);
    background: var(--color-surface-elevated);
    color: var(--color-primary);
    box-shadow: var(--shadow-card), 0 0 0 6px var(--color-primary-lighter);
    transition: var(--transition-smooth);
}

.timeline-step:hover .step-number {
    background: var(--gradient-primary);
    color: var(--color-text-inverse);
    transform: scale(1.08);
    box-shadow: var(--shadow-md), 0 0 0 6px var(--color-primary-light);
}

.step-content h3 {
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
}

.step-content p {
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}


/* ==========================================================================
   8. FAQ GRID CARDS (SEO/home FAQ — .faq-grid > .faq-item with h3 + p)
   Was: raw --shadow-sm, raw #cbd5e1 border, no hover. Make them real cards.
   ========================================================================== */
.faq-grid .faq-item {
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
}

.faq-grid .faq-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-primary);
}

.faq-grid .faq-item:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card-hover);
}

.faq-grid .faq-item h3 {
    color: var(--color-text);
    letter-spacing: var(--tracking-snug);
    line-height: var(--leading-snug);
}

.faq-grid .faq-item p {
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}


/* ==========================================================================
   9. FAQ ACCORDION (.faq-section / .faq-item / .faq-question / .faq-answer)
   Owned & polished for consistency with the grid cards above.
   ========================================================================== */
.faq-section .faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
}

.faq-question {
    color: var(--color-text);
    transition: background var(--transition-base);
}

.faq-question:hover {
    background: var(--color-surface);
}

/* Keyboard focus for the interactive accordion header */
.faq-question:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    border-radius: var(--radius-md);
}

.faq-question i {
    color: var(--color-primary);
    transition: transform var(--transition-base);
}

.faq-answer {
    background: var(--color-surface);
}

.faq-answer p {
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    border-top: 1px solid var(--color-border);
}


/* ==========================================================================
   10. VERTICALS — dark glass cards
   Was: thin rgba border, translateY(-10px). Refine glass + unify lift.
   Dark surface: keep light-on-dark text untouched (contrast preserved).
   ========================================================================== */
.verticals-section {
    padding: clamp(3rem, 6vw, 6rem) 0;
}

.vert-card {
    background: var(--color-overlay-inverse-light);
    -webkit-backdrop-filter: var(--blur-sm);
    backdrop-filter: var(--blur-sm);
    border: 1px solid var(--color-border-inverse-medium);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
}

.vert-card:hover {
    transform: translateY(-6px);
    background: var(--color-overlay-inverse-medium);
    border-color: var(--color-border-inverse-strong);
    box-shadow: var(--shadow-card-hover);
}

.vert-card:focus-within {
    border-color: var(--color-border-inverse-strong);
}

.vert-title {
    letter-spacing: var(--tracking-tight);
}


/* ==========================================================================
   11. CHECK LISTS (.feature-list-check) — tidy alignment + token colors
   ========================================================================== */
.feature-list-check li {
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.feature-list-check li i {
    color: var(--color-success);
}


/* ==========================================================================
   12. SUBTLE ENTRANCE (transform/opacity only; safe under reduced-motion)
   Cards remain fully visible if animation is disabled — no permanent opacity:0
   without JS: the keyframe ends at full opacity and reduced-motion forces the
   final frame (handled globally in design-tokens.css).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    @keyframes polish-card-rise {
        from { opacity: 0.001; transform: translateY(10px); }
        to   { opacity: 1;     transform: translateY(0); }
    }

    .feature-card,
    .usp-card,
    .benefit-card,
    .faq-grid .faq-item,
    .vert-card {
        animation: polish-card-rise var(--transition-slow) both;
    }
}


/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    /* Soften hover lift on touch-ish widths to avoid jumpiness */
    .feature-card:hover,
    .core-features-section .feature-card:hover,
    .benefit-card:hover,
    .usp-card:hover,
    .faq-grid .faq-item:hover,
    .vert-card:hover {
        transform: translateY(-4px);
    }

    .core-features-section .feature-card {
        border-radius: var(--radius-lg);
    }

    .trust-badges-grid {
        gap: 0.6rem;
    }

    .trust-badges-grid .trust-badge {
        padding: 0.55rem 1rem;
    }

    .trust-badges-grid .trust-badge i {
        font-size: 1.2rem;
    }

    .trust-badges-grid .trust-badge span {
        font-size: var(--text-sm);
    }

    /* Vertical timeline: connector already re-oriented in new-sections.css;
       keep the tinted gradient running top-to-bottom on mobile. */
    .timeline::before {
        width: 3px;
        background: linear-gradient(
            180deg,
            var(--color-border) 0%,
            var(--color-primary-light) 50%,
            var(--color-border) 100%
        );
    }
}

@media (max-width: 480px) {
    .feature-card,
    .core-features-section .feature-card,
    .benefit-card,
    .usp-card,
    .vert-card {
        padding: 1.5rem 1.25rem;
    }

    .faq-grid .faq-item {
        padding: 1.5rem;
    }

    .trust-badges-grid .trust-badge span {
        font-size: var(--text-sm);
    }
}

/* ====================== _polish-home.css ====================== */
/* ==========================================================================
   3ioSetu — Homepage Signature Sections Polish  (module id: home)
   Additive visual-refinement overrides. Tokens only. No layout/markup changes.

   Scope (owned selectors only):
     Hero: .hero, .hero .container, .hero-content, .hero h1/.highlight, .hero p,
           .hero-btns, .hero-stats, .stat-item, .stat-value, .hero-image-wrapper,
           .square-hero, .animate-float, .glow-effect, .badge
     Ecosystem: .ecosystem-tabs, .tab-buttons, .tab-btn(.active/::after),
           .content-flex, .text-content, .visual-content,
           .feature-list, .feature-list li, .feature-list li i
     Process: .process-flow, .step, .step-icon, .arrow
     Clients: .clients-section, .clients-marquee, .clients-track, .client-card,
           .client-image-container, .client-image, .client-info,
           .client-name, .client-detail
     Video: .video-grid, .video-card, .video-thumbnail, .play-overlay,
           .play-icon, .video-info, .video-modal

   NOTE: hero text stays dark on the light hero bg — text colors untouched.
   ========================================================================== */

/* ==========================================================================
   1) HERO — depth on the visual, decorative glow, refined badge & buttons
   ========================================================================== */

/* Comfortable, fluid above-the-fold rhythm (matches existing 8rem/4rem feel). */
.hero {
    padding: clamp(6rem, 8vw, 8rem) 0 clamp(3.5rem, 6vw, 5rem);
}

/* Let the glow-effect (empty decorative div) sit behind the grid content. */
.hero .container {
    position: relative;
    z-index: var(--z-raised);
}

/* Tighten the headline tracking and let it wrap nicely (progressive enhancement). */
.hero h1 {
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    text-wrap: balance;
}

.hero p {
    line-height: var(--leading-relaxed);
    text-wrap: pretty;
}

/* Badge: softer pill with a hairline so it reads as a chip, not flat text. */
.badge {
    border: 1px solid var(--color-primary-light);
    letter-spacing: var(--tracking-wide);
    transition: var(--transition-smooth);
}

/* Hero CTAs: consistent button depth + keyboard focus ring. */
.hero-btns .btn {
    box-shadow: var(--shadow-btn);
    transition: var(--transition-smooth);
}

.hero-btns .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn-hover);
}

.hero-btns .btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus);
}

/* Hero image: give the floating illustration a soft framed lift. */
.hero-image-wrapper {
    position: relative;
    z-index: var(--z-raised);
    filter: drop-shadow(0 24px 40px rgba(26, 86, 219, 0.12));
}

.square-hero {
    border-radius: var(--radius-xl);
}

/* Decorative ambient glow behind the hero image (empty div, no content). */
.glow-effect {
    position: absolute;
    top: 50%;
    right: 6%;
    width: min(48%, 460px);
    aspect-ratio: 1 / 1;
    transform: translateY(-50%);
    background: radial-gradient(closest-side,
            rgba(26, 86, 219, 0.18) 0%,
            rgba(249, 115, 22, 0.10) 55%,
            transparent 72%);
    filter: blur(36px);
    z-index: var(--z-base);
    pointer-events: none;
}

/* ==========================================================================
   2) HERO STATS — flat row -> polished stat cards
   ========================================================================== */

.hero-stats {
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-2);
}

.stat-item {
    flex: 1 1 auto;
    min-width: 120px;
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
}

.stat-item:hover {
    transform: translateY(-6px);
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-card-hover);
}

/* Slightly larger, tighter numerals; keep brand color (already dark-safe). */
.stat-item .stat-value {
    font-size: var(--text-3xl);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-1);
}

.stat-item p {
    line-height: var(--leading-snug);
}

/* ==========================================================================
   3) ECOSYSTEM TABS — refined pill bar + framed visual panel
   ========================================================================== */

.ecosystem-tabs {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: var(--shadow-card);
}

/* Tab bar keeps its underline baseline; we add a soft track + rounded edges. */
.tab-buttons {
    gap: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

/* Pill resting/hover state — the active underline (::after) still drives below. */
.tab-btn {
    border-radius: var(--radius-full);
    transition: var(--transition-smooth);
}

.tab-btn:hover {
    color: var(--color-primary);
    background: var(--color-primary-lighter);
}

.tab-btn.active {
    background: var(--color-primary-light);
}

.tab-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Smooth, slightly inset underline pill for the active tab. */
.tab-btn.active::after {
    height: 3px;
    left: 12%;
    width: 76%;
    border-radius: var(--radius-full);
    background: var(--gradient-accent);
}

/* Framed visual panel inside the active tab. */
.visual-content {
    position: relative;
}

/* Feature checklist: clearer rows with tinted check chips. */
.feature-list li {
    line-height: var(--leading-snug);
}

.feature-list li i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-circle);
    background: var(--color-secondary-light);
    font-size: var(--text-sm);
}

/* ==========================================================================
   4) PROCESS FLOW — disconnected circles -> connected modern stepper
   ========================================================================== */

.process-flow {
    gap: clamp(0.75rem, 2vw, 1.5rem);
}

.step {
    position: relative;
    transition: var(--transition-smooth);
}

/* Icon node: brand-tinted ring that fills on the step hover. */
.step-icon {
    background: var(--color-surface-elevated);
    border: 2px solid var(--color-primary-light);
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
}

.step:hover .step-icon {
    transform: translateY(-4px) scale(1.06);
    background: var(--gradient-primary);
    color: var(--color-text-inverse);
    border-color: transparent;
    box-shadow: var(--shadow-card-hover);
}

.step p {
    line-height: var(--leading-snug);
}

/* Connector arrows: lighter, brand-tinted, with a gentle nudge in. */
.arrow {
    color: var(--color-primary);
    opacity: 0.55;
    transition: var(--transition-smooth);
}

/* ==========================================================================
   5) CLIENTS MARQUEE — classier cards (track transform left untouched)
   ========================================================================== */

.clients-section {
    padding: clamp(3rem, 6vw, 4rem) 0;
    background-color: var(--color-surface);
}

/* Card depth recipe. The marquee animates .clients-track (not the card),
   so a hover translate here is safe and does not fight the scroll. */
.client-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
}

.client-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-card-hover);
}

.client-name {
    letter-spacing: var(--tracking-snug);
}

.client-detail {
    color: var(--color-text-secondary);
}

/* ==========================================================================
   6) VIDEO CARDS — richer cards, glassy play overlay
   ========================================================================== */

.video-grid {
    margin-top: clamp(2rem, 5vw, 3rem);
}

.video-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
}

.video-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-card-hover);
}

.video-card:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Overlay: soften from flat black to a brand-leaning wash on hover. */
.play-overlay {
    background: linear-gradient(180deg,
            var(--color-overlay-light) 0%,
            var(--color-overlay-medium) 100%);
    transition: var(--transition-smooth);
}

.video-card:hover .play-overlay {
    background: linear-gradient(180deg,
            rgba(26, 86, 219, 0.30) 0%,
            var(--color-overlay-medium) 100%);
}

/* Play button: glassy chip that pops + tints to brand on hover. */
.play-icon {
    background: var(--glass-bg-strong);
    box-shadow: var(--shadow-md);
    transition: var(--transition-bounce);
}

.video-card:hover .play-icon {
    transform: scale(1.12);
    background: var(--color-surface-elevated);
    color: var(--color-primary);
    box-shadow: var(--shadow-glow);
}

.video-info {
    border-top: 1px solid var(--color-border);
}

.video-info h3 {
    letter-spacing: var(--tracking-snug);
}

/* ==========================================================================
   7) RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    /* Stats become a tidy 2-up grid of cards. */
    .hero-stats {
        gap: var(--space-3);
    }

    .stat-item {
        flex: 1 1 40%;
        min-width: 0;
        padding: var(--space-3) var(--space-4);
    }

    .stat-item .stat-value {
        font-size: var(--text-2xl);
    }

    /* Dim the ambient glow on small screens to avoid heavy paint. */
    .glow-effect {
        width: 70%;
        opacity: 0.6;
    }

    .ecosystem-tabs {
        padding: var(--space-5);
    }

    /* Vertical stepper: connector arrow already rotated 90deg in base CSS. */
    .arrow {
        opacity: 0.5;
    }
}

@media (max-width: 480px) {
    .hero {
        padding-top: clamp(5rem, 18vw, 6rem);
    }

    .stat-item {
        flex-basis: 100%;
        text-align: center;
    }

    .play-icon {
        width: 52px;
        height: 52px;
    }
}

/* ==========================================================================
   8) REDUCED MOTION — keep everything visible, drop transform emphasis
   (global token-level reduced-motion is already handled in design-tokens.css;
    this only neutralizes the decorative transforms added above)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .stat-item:hover,
    .step:hover .step-icon,
    .client-card:hover,
    .video-card:hover,
    .hero-btns .btn:hover,
    .video-card:hover .play-icon {
        transform: none;
    }
}

/* ====================== _polish-forms.css ====================== */
/* ==========================================================================
   POLISH PARTIAL — Module: Payment + Book-a-Demo (forms)
   Owned sections: split-hero / hero-value / benefit-list / trust badge /
   hero-form / modern-form / submit-btn / partners / pos / security.

   Tasteful, additive REFINEMENT only. Token-driven (design-tokens.css).
   No layout restructuring, no hidden content, no text-color changes on
   light backgrounds (prior contrast audit respected). Overrides reuse the
   same / matching specificity so they win without !important.
   ========================================================================== */

/* ==========================================================================
   1) SPLIT HERO — value (dark) side
   ========================================================================== */

/* Slightly richer vertical rhythm + safe fluid padding (no overflow). */
.hero-value {
    padding: clamp(2.5rem, 5vw, 4.5rem);
}

/* Keep the existing subtle texture but add a soft brand glow for depth.
   Reuse the same ::before selector so we win; preserve the texture image. */
.hero-value::before {
    background:
        radial-gradient(60% 50% at 85% 0%, var(--color-primary-light) 0%, transparent 60%),
        url('https://www.transparenttextures.com/patterns/cubes.png');
    opacity: 0.5;
    pointer-events: none;
}

.hero-value-content {
    max-width: 520px;
}

/* Tighten the headline; balanced wrapping where supported. */
.hero-value h1 {
    font-size: clamp(2.25rem, 4vw, 3rem);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-6);
    text-wrap: balance;
}

.hero-value p {
    color: var(--color-text-on-dark);
    line-height: var(--leading-relaxed);
    text-wrap: pretty;
}

/* ==========================================================================
   2) BENEFIT LIST — clearer check chips + alignment for multi-line items
   ========================================================================== */

.benefit-list li {
    align-items: flex-start;
    color: var(--color-text-on-dark-strong);
    line-height: var(--leading-snug);
    gap: var(--space-3);
}

/* Brand-tinted, crisp check chips (was flat translucent white). */
.benefit-list i {
    flex: 0 0 auto;
    margin-right: 0;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border: 1px solid rgba(26, 86, 219, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.benefit-list li:hover i {
    transform: scale(1.08);
    background: rgba(26, 86, 219, 0.18);
}

/* ==========================================================================
   3) TRUST BADGE / AVATARS — softer divider + lift avatars off the bg
   ========================================================================== */

.trust-badge {
    border-top: 1px solid var(--color-border-inverse-medium);
}

.trust-avatars img {
    border-color: var(--color-surface-dark);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: transform var(--transition-fast);
}

.trust-avatars img:hover {
    transform: translateY(-2px) scale(1.05);
}

/* ==========================================================================
   4) HERO FORM (light side) + the lead form
   ========================================================================== */

.hero-form {
    padding: clamp(2.5rem, 5vw, 4.5rem);
    background: var(--color-bg);
}

.form-wrapper {
    max-width: var(--container-form);
}

.modern-form .form-group {
    margin-bottom: var(--space-5);
}

.modern-form label {
    color: var(--color-text-secondary);
    letter-spacing: var(--tracking-snug);
}

/* Refined inputs: comfortable padding, token surface/border, smooth focus. */
.modern-form .form-control {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                background var(--transition-fast);
}

.modern-form .form-control::placeholder {
    color: var(--color-text-light);
}

.modern-form .form-control:hover {
    border-color: var(--color-text-light);
}

/* Clear, confident focus ring (token-driven). */
.modern-form .form-control:focus {
    background: var(--color-bg);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus-strong);
    outline: none;
}

/* Keyboard focus parity for assistive tech. */
.modern-form .form-control:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.modern-form textarea.form-control {
    min-height: 110px;
    line-height: var(--leading-relaxed);
}

/* ==========================================================================
   5) SUBMIT BUTTON — confident, with proper shadow + focus-visible ring
   ========================================================================== */

.submit-btn {
    margin-top: var(--space-2);
    background: var(--gradient-primary);
    border-radius: var(--radius-md);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-snug);
    box-shadow: var(--shadow-btn);
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast),
                background var(--transition-fast);
}

.submit-btn:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn-hover);
}

.submit-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: var(--shadow-btn-hover);
}

.submit-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-btn);
}

/* Arrow nudge on hover (transform only; motion-safe via tokens). */
.submit-btn i {
    transition: transform var(--transition-fast);
}

.submit-btn:hover i {
    transform: translateX(3px);
}

/* ==========================================================================
   6) PARTNERS SECTION — logo tiles get hairline card + lift on hover
   (Markup uses .partner-logo as the tile wrapper; .partner-card/.partner-name
    are not present on this page — see notes.)
   ========================================================================== */

.partners-section {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: var(--gradient-features);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* Turn each logo slot into a subtle, consistent tile. */
.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: var(--space-5) var(--space-6);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
}

.partner-logo:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-6px);
}

/* Card / name variants (defensive — only apply if markup is added later). */
.partner-card {
    border-color: var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
}

.partner-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-6px);
}

.partner-name {
    color: var(--color-text-muted);
    letter-spacing: var(--tracking-tight);
}

/* ==========================================================================
   7) POS SECTION — softer section + refined image frame
   ========================================================================== */

.pos-section {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background: var(--color-surface);
}

.pos-container {
    gap: clamp(2rem, 5vw, 4rem);
}

.pos-content h2 {
    color: var(--color-text);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    text-wrap: balance;
}

.pos-content p {
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    text-wrap: pretty;
}

/* Keep the existing perspective tilt; deepen the frame + add radius token. */
.pos-image img {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

/* ==========================================================================
   8) SECURITY SECTION — refined dark cards + icon chips
   (Text colors are intentionally left to the prior contrast fixes.)
   ========================================================================== */

.security-section {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: var(--gradient-dark);
}

.security-card {
    background: var(--color-overlay-inverse-subtle);
    border: 1px solid var(--color-border-inverse);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
}

.security-card:hover {
    background: var(--color-overlay-inverse-light);
    border-color: var(--color-border-inverse-medium);
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
}

/* Icon as a consistent rounded chip; gentle pop on card hover. */
.security-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-size: var(--text-3xl);
    color: var(--color-success-icon);
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.25);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.security-card:hover .security-icon {
    transform: scale(1.08);
    background: rgba(74, 222, 128, 0.18);
}

/* ==========================================================================
   9) RESPONSIVE REFINEMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .hero-value h1 {
        font-size: clamp(2rem, 7vw, 2.5rem);
    }

    .benefit-list li {
        align-items: center;
    }

    .partner-logo {
        min-height: 80px;
        padding: var(--space-4);
    }

    .security-icon {
        width: 50px;
        height: 50px;
        font-size: var(--text-2xl);
    }
}

@media (max-width: 480px) {
    .hero-value {
        padding: 2rem 1.25rem;
    }

    .hero-form {
        padding: 2rem 1.25rem;
    }

    .modern-form .form-control {
        padding: var(--space-3);
    }

    .submit-btn {
        font-size: var(--text-base);
    }
}

/* ==========================================================================
   10) MOTION-SAFE ENTRANCE (progressive enhancement; content stays visible
        when reduced-motion is on — tokens neutralize the transitions, and
        we only nudge transform, never set opacity:0 permanently).
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .partner-logo,
    .security-card {
        will-change: transform;
    }
}

/* ====================== _polish-product.css ====================== */
/* ==========================================================================
   3ioSetu — Polish Partial: PRODUCT / MARKETING PAGES
   Module id: product
   Scope: page-header heros, zig-zag feature rows, interactive kiosk feature
          tabs/panes, dark / light-gray section bands, compliance + unified
          platform media, comparison table (compare-temple-software), and the
          glossary reference page.

   Rules of engagement:
   - Additive REFINEMENT only — no layout restructuring, no hidden content,
     no text-color changes on light backgrounds (prior contrast audit respected).
   - Tokens only (var(--…)); subtle rgba() tints of brand colours allowed.
   - Specificity is intentionally raised on .compare-table* and .glossary-*
     because those base rules live in page-level inline <style> blocks
     (in <head>). This partial must therefore either load AFTER those blocks
     OR out-specify them — it is written to out-specify them so it wins
     regardless of load order. (See notes.)
   - Motion animates transform/opacity only; reduced-motion handled globally
     in design-tokens.css and reinforced locally.
   ========================================================================== */


/* ==========================================================================
   1. PAGE-HEADER HERO  (header.page-header / header.page-header-light)
   Adds depth, a soft decorative glow and breathing room without touching the
   deliberate white-on-dark / dark-on-light contrast rules in style.css.
   ========================================================================== */

header.page-header {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-block: clamp(5.5rem, 9vw, 8rem) clamp(2.5rem, 5vw, 4rem);
    box-shadow: var(--shadow-xl);
}

/* Subtle radial sheen — purely decorative, behind content, no overflow */
header.page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60% 90% at 85% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
        radial-gradient(50% 80% at 0% 100%, rgba(249, 115, 22, 0.12), transparent 55%);
    pointer-events: none;
}

header.page-header h1 {
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    text-wrap: balance;
    margin-inline: auto;
    max-width: 18ch;
}

header.page-header p {
    line-height: var(--leading-relaxed);
    text-wrap: pretty;
    margin-inline: auto;
    max-width: 760px;
}

/* Badge: keep contrast, add pill polish + soft ring */
header.page-header .badge {
    display: inline-block;
    border-radius: var(--radius-full);
    padding: 0.4rem 1rem;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wide);
    backdrop-filter: var(--blur-sm);
    box-shadow: var(--shadow-xs);
    transition: var(--transition-base);
}

/* Light-background page header variant: hairline base + gentle elevation */
header.page-header-light {
    position: relative;
    padding-block: clamp(5.5rem, 9vw, 8rem) clamp(2.5rem, 5vw, 4rem);
    border-bottom: 1px solid var(--color-border);
}

header.page-header-light h1 {
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    text-wrap: balance;
}

header.page-header-light p {
    line-height: var(--leading-relaxed);
    text-wrap: pretty;
    max-width: 760px;
    margin-inline: auto;
}


/* ==========================================================================
   2. ZIG-ZAG FEATURE ROWS  (.feature-row + .reverse / .feature-text / .feature-image)
   Give the alternating rows rhythm, a framed image with hover lift, and a
   tidy column gap that scales fluidly.
   ========================================================================== */

.feature-row {
    gap: clamp(2rem, 5vw, 4.5rem);
    margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* Text column: comfortable measure + balanced headings */
.feature-row .feature-text {
    max-width: 60ch;
}

.feature-row .feature-text h2,
.feature-row .feature-text h3 {
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
}

.feature-row .feature-text p {
    text-wrap: pretty;
}

/* Image card: token-driven depth, hairline frame, smooth lift on hover */
.feature-row .feature-image {
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-smooth),
                box-shadow var(--transition-smooth),
                border-color var(--transition-smooth);
    will-change: transform;
}

.feature-row .feature-image:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-primary);
}

.feature-row .feature-image img {
    transition: transform var(--transition-smooth);
}

/* Slightly stronger, calmer zoom than the base 1.02 */
.feature-row .feature-image:hover img {
    transform: scale(1.04);
}


/* ==========================================================================
   3. INTERACTIVE FEATURE TABS / PANES  (kiosk page)
   Modernise the tab chips and the content card; refine the active state and
   give panes a calmer entrance + readable media.
   ========================================================================== */

.feature-tabs-container {
    gap: clamp(1.75rem, 4vw, 4rem);
}

/* Tab chips: token shadow, rounded, brand-tinted hover ring */
.feature-tab {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
}

.feature-tab:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}

.feature-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus);
}

.feature-tab.active {
    background: var(--gradient-primary);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}

/* Icon: tinted chip in rest, inverts cleanly on active */
.feature-tab i {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: var(--text-lg);
    transition: transform var(--transition-base),
                background-color var(--transition-base),
                color var(--transition-base);
}

.feature-tab:hover i {
    transform: scale(1.08);
}

.feature-tab.active i {
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-text-inverse);
}

/* Content card: large radius, hairline frame, token elevation */
.feature-tab-content {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

/* Pane media + type */
.feature-pane img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-image);
}

.feature-pane h3 {
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
    line-height: var(--leading-snug);
}

.feature-pane p {
    text-wrap: pretty;
}

/* Calmer keyframe entrance for the active pane (content stays visible if
   motion is reduced — it's an enhancement on top of display:flex). */
@media (prefers-reduced-motion: no-preference) {
    .feature-pane.active {
        animation: productPaneIn var(--transition-smooth) both;
    }

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


/* ==========================================================================
   4. SECTION BANDS  (.bg-dark / .bg-light-gray — background + heading accent only)
   Richer, token-driven backgrounds and a hairline edge so stacked bands read
   as distinct rhythmic slabs. No text-colour changes beyond owned accents.
   ========================================================================== */

/* Dark band: brand gradient instead of a flat fill, soft top/bottom edge */
.bg-dark {
    background-image: var(--gradient-dark);
    border-block: 1px solid var(--color-border-inverse);
}

/* Heading underline accent already secondary in style.css — keep, just ensure
   the dark feature cards lift consistently with the rest of the site. */
.bg-dark .feature-card {
    box-shadow: var(--shadow-lg);
    transition: var(--transition-smooth);
}

.bg-dark .feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
}

/* Light-gray band: use the canonical surface token + hairline edges */
.bg-light-gray {
    background-color: var(--color-surface);
    border-block: 1px solid var(--color-border);
}


/* ==========================================================================
   5. COMPLIANCE + UNIFIED-PLATFORM MEDIA
   (.compliance-content / .compliance-image / .unified-platform-img)
   ========================================================================== */

.compliance-content {
    margin-top: clamp(2rem, 5vw, 3rem);
}

/* Frame the compliance image like the other feature media */
.compliance-image {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    transition: transform var(--transition-smooth),
                box-shadow var(--transition-smooth);
}

.compliance-image:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

/* Unified platform image: softer token radius + warmer elevation */
.unified-platform-img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-smooth),
                box-shadow var(--transition-smooth);
}

.unified-platform-img:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}


/* ==========================================================================
   6. COMPARISON TABLE  (compare-temple-software.html)
   Base styles live in a page-level inline <style> block, so selectors here
   are deliberately out-specified (table.compare-table … / extra class) to win.
   Adds: rounded framed table, sticky header, zebra rows, clearer hover, and a
   highlighted "3ioSetu" winner column (the first data column = nth-child(2)).
   ========================================================================== */

/* Framed, rounded table shell */
table.compare-table {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    border-collapse: separate;
    border-spacing: 0;
}

/* Sticky, branded header that survives the page-level inline rule */
table.compare-table thead th {
    position: sticky;
    top: 0;
    z-index: var(--z-raised);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-snug);
    border-bottom: 2px solid var(--color-border);
}

/* Zebra striping for scan-ability (token surfaces, contrast-safe) */
table.compare-table tbody tr:nth-child(even) td {
    background-color: var(--color-surface);
}

table.compare-table tbody tr:nth-child(odd) td {
    background-color: var(--color-bg);
}

/* Clear, brand-tinted row hover (override inline #fafafa) */
table.compare-table tbody tr:hover td {
    background-color: var(--color-primary-lighter);
}

/* Status cells already coloured inline (yes/no/partial) — keep those colours,
   just normalise weight & alignment so the column reads cleanly. */
table.compare-table tbody td.yes,
table.compare-table tbody td.no,
table.compare-table tbody td.partial {
    font-weight: var(--font-semibold);
}

/* WINNER COLUMN — 3ioSetu is the first data column (cell index 2).
   Subtle brand wash + accent rails so the eye lands on it. */
table.compare-table thead th:nth-child(2) {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    box-shadow: inset 0 -3px 0 var(--color-secondary);
}

table.compare-table tbody tr td:nth-child(2) {
    background-color: var(--color-primary-light) !important; /* must beat the inline zebra + hover rules above on the same property */
    border-inline: 1px solid rgba(26, 86, 219, 0.18);
}

table.compare-table tbody tr:hover td:nth-child(2) {
    background-color: rgba(26, 86, 219, 0.16) !important;
}


/* ==========================================================================
   7. SUPPORTING COMPARE-PAGE CARDS  (verdict-card / when-pick / stat-pill)
   Discovered in compare-temple-software.html inline <style>. Refine with
   tokens, out-specifying the inline single-class rules.
   ========================================================================== */

/* Verdict hero card: brand gradient + large radius + real depth */
div.verdict-card {
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: clamp(1.75rem, 4vw, 2.5rem);
}

div.verdict-card h3 {
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
}

/* "When to pick" callouts: token surface, accent rail, hover lift */
div.when-pick {
    background: var(--color-surface);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base),
                box-shadow var(--transition-base);
}

div.when-pick:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

div.when-pick h4 {
    color: var(--color-primary);
    letter-spacing: var(--tracking-snug);
}

/* Stat pills: tighten into branded chips */
span.stat-pill {
    border-radius: var(--radius-full);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-snug);
    transition: transform var(--transition-fast);
}

span.stat-pill:hover {
    transform: translateY(-1px);
}


/* ==========================================================================
   8. GLOSSARY REFERENCE PAGE  (glossary-temple-tech.html)
   Base styles live in the page-level inline <style>; out-specify to win.
   Cards get token depth + a satisfying hover lift; alpha-nav becomes a clean
   sticky-feeling chip rail with focus-visible states.
   ========================================================================== */

/* Term cards: hairline frame, accent rail, lift on hover */
div.glossary-term {
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-smooth),
                box-shadow var(--transition-smooth),
                border-left-color var(--transition-smooth);
}

div.glossary-term:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-left-color: var(--color-secondary);
}

div.glossary-term h3 {
    letter-spacing: var(--tracking-snug);
    text-wrap: balance;
}

div.glossary-term p {
    text-wrap: pretty;
}

/* Alpha jump-nav: framed chip rail */
div.alpha-nav {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

div.alpha-nav a {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-weight: var(--font-semibold);
    transition: var(--transition-base);
}

div.alpha-nav a:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

div.alpha-nav a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Alpha section headings: branded divider already inline; refine spacing */
div.alpha-section {
    scroll-margin-top: calc(var(--navbar-height) + 1rem);
}

div.alpha-section h2 {
    letter-spacing: var(--tracking-tight);
}


/* ==========================================================================
   9. RESPONSIVE REFINEMENTS
   ========================================================================== */

@media (max-width: 768px) {
    header.page-header,
    header.page-header-light {
        padding-block: clamp(4.5rem, 14vw, 6rem) clamp(2rem, 6vw, 3rem);
    }

    header.page-header h1 {
        max-width: none;
    }

    /* Feature image lift is subtle on touch; keep frame, drop translate */
    .feature-row .feature-image:hover {
        transform: none;
    }

    /* Comparison table: header stays sticky; ensure cells stay tappable.
       The table already lives in an overflow-x wrapper in the markup. */
    table.compare-table thead th,
    table.compare-table tbody td {
        padding: 0.7rem 0.75rem;
    }

    /* Winner column rails are quieter on small screens */
    table.compare-table tbody tr td:nth-child(2) {
        border-inline-width: 0;
    }

    div.when-pick:hover,
    div.glossary-term:hover {
        transform: none;
    }
}

@media (max-width: 480px) {
    .feature-tab {
        padding: 1.1rem;
    }

    .feature-tab i {
        width: 2rem;
        height: 2rem;
        font-size: var(--text-base);
    }

    div.verdict-card {
        padding: 1.5rem;
    }

    table.compare-table {
        font-size: var(--text-sm);
    }
}


/* ==========================================================================
   10. REDUCED-MOTION REINFORCEMENT
   (global handling exists in design-tokens.css; this neutralises the
   transform-based lifts/entrance specific to this module.)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .feature-row .feature-image:hover,
    .feature-row .feature-image:hover img,
    .feature-tab:hover,
    .feature-tab:hover i,
    .bg-dark .feature-card:hover,
    .compliance-image:hover,
    .unified-platform-img:hover,
    div.when-pick:hover,
    div.glossary-term:hover,
    span.stat-pill:hover,
    div.alpha-nav a:hover {
        transform: none;
    }
}

/* ====================== _polish-blog.css ====================== */
/* ==========================================================================
   POLISH PARTIAL — Module: Blog (index + articles)   id: blog
   Tasteful, additive refinement only. Token-driven (design-tokens.css).
   Owned selectors: blog.css rules + blog-only classes
   (blog cards/list, blog hero/header, article prose, author/meta,
    breadcrumbs inside blog, related posts).
   Does NOT touch global .section / .section-header / .btn / .footer / .navbar.
   Load AFTER blog.css so equal-specificity overrides win.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ARTICLE READING COLUMN — measured long-form line length
   -------------------------------------------------------------------------- */
.article-content {
    max-width: var(--container-narrow); /* 800px, tokenised */
    margin: 0 auto;
    padding: var(--space-8) 0 var(--space-4);
}

/* Article H1 (was unstyled) — strong, balanced headline */
.article-content h1 {
    font-size: clamp(1.9rem, 4.5vw, var(--text-5xl));
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    font-weight: var(--font-extrabold);
    margin: var(--space-2) 0 var(--space-4);
    text-wrap: balance;
}

/* --------------------------------------------------------------------------
   2. PROSE TYPOGRAPHY — refined headings, comfortable body, pretty wrap
   -------------------------------------------------------------------------- */
.article-content h2 {
    margin-top: var(--space-12);
    margin-bottom: var(--space-3);
    color: var(--primary-color);
    font-weight: var(--font-bold);
    font-size: clamp(1.5rem, 3vw, var(--text-4xl));
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
    /* subtle anchor accent under section headings */
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.article-content h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-2);
    color: var(--text-dark);
    font-weight: var(--font-semibold);
    font-size: clamp(1.2rem, 2.2vw, var(--text-2xl));
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-snug);
    text-wrap: balance;
}

.article-content p {
    font-size: var(--text-lg);
    line-height: var(--leading-spacious);
    /* token #475569 — darker/equal to prior #4a5568, contrast-safe on light */
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
    text-wrap: pretty;
}

/* Lead paragraph (first paragraph after the H1) reads a touch larger */
.article-content > p:first-of-type {
    font-size: var(--text-xl);
    line-height: var(--leading-loose);
    color: var(--color-text);
}

.article-content ul,
.article-content ol {
    margin-bottom: var(--space-8);
    padding-left: var(--space-8);
}

.article-content li {
    margin-bottom: var(--space-4);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
    text-wrap: pretty;
}

/* Brand-tinted custom marker for unordered prose lists */
.article-content > ul {
    list-style: none;
    padding-left: var(--space-6);
}

.article-content > ul > li {
    position: relative;
    padding-left: var(--space-6);
}

.article-content > ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-circle);
    background: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-light);
}

/* Ordered list numerals echo brand colour */
.article-content > ol {
    list-style: none;
    counter-reset: prose-counter;
    padding-left: var(--space-2);
}

.article-content > ol > li {
    position: relative;
    counter-increment: prose-counter;
    padding-left: var(--space-10);
}

.article-content > ol > li::before {
    content: counter(prose-counter);
    position: absolute;
    left: 0;
    top: 0.1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-circle);
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    line-height: 1;
}

/* Emphasis inside prose */
.article-content strong {
    color: var(--color-text);
    font-weight: var(--font-semibold);
}

/* Inline links inside prose body (NOT the card-title links, which set their
   own colour inline). Brand colour with an animated underline. */
.article-content p a,
.article-content li a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-primary-light);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    font-weight: var(--font-medium);
    transition: var(--transition-fast);
    border-radius: var(--radius-sm);
}

.article-content p a:hover,
.article-content li a:hover {
    color: var(--color-primary-hover);
    text-decoration-color: var(--color-primary);
}

.article-content p a:focus-visible,
.article-content li a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Inline code & blockquote (progressive — appear in future articles) */
.article-content code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: var(--color-primary-lighter);
    color: var(--color-primary-hover);
    padding: 0.15em 0.45em;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-primary-light);
}

.article-content pre {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    overflow-x: auto;
    margin: 0 0 var(--space-6);
}

.article-content pre code {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-text);
}

.article-content blockquote {
    margin: var(--space-8) 0;
    padding: var(--space-4) var(--space-6);
    border-left: 4px solid var(--color-primary);
    background: var(--color-primary-lighter);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-text);
    font-style: italic;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

.article-content blockquote p {
    margin-bottom: 0;
    color: inherit;
}

/* Prose / inline images inside the article body */
.article-content img {
    border-radius: var(--radius-lg);
}

/* --------------------------------------------------------------------------
   3. ARTICLE HERO — softer, tokenised depth
   -------------------------------------------------------------------------- */
.article-hero {
    margin: 0 -1rem var(--space-8);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
}

.blog-hero-image {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    display: block;
}

@media (min-width: 768px) {
    .article-hero {
        margin: 0 0 var(--space-10);
        border-radius: var(--radius-xl);
    }

    .blog-hero-image {
        max-height: 450px;
    }
}

/* --------------------------------------------------------------------------
   4. ARTICLE META ROW + PRINT BUTTON (date / reading time)
   -------------------------------------------------------------------------- */
.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    letter-spacing: var(--tracking-wide);
}

.article-meta i {
    color: var(--color-primary);
    margin-right: var(--space-1);
}

/* Lightweight, blog-only "Download as PDF" control (not a global .btn) */
.btn-print {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-primary);
    background: var(--color-primary-light);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-print:hover {
    background: var(--color-bg);
    border-color: var(--color-primary-light);
    color: var(--color-primary-hover);
    box-shadow: var(--shadow-sm);
}

.btn-print:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. CALLOUT BOXES — Key Takeaways / Checklist / Case Study
   -------------------------------------------------------------------------- */
.key-takeaways,
.checklist-box {
    background: var(--color-primary-lighter);
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-primary-light);
    border-left: 5px solid var(--color-primary);
    box-shadow: var(--shadow-card);
    margin: var(--space-8) 0;
}

.key-takeaways h3,
.checklist-box h3 {
    margin-top: 0;
    color: var(--primary-color);
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
    border-bottom: none;
    padding-bottom: 0;
}

/* Keep gradient flourish from blog.css but tokenise the depth */
.key-takeaways {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary-lighter) 100%);
    border: 1px solid var(--color-primary-light);
    box-shadow: var(--shadow-card);
}

.checklist-box {
    position: relative;
    overflow: hidden;
}

/* Checklist items: brand-tinted check icons, comfortable rhythm */
.checklist-box ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.checklist-box li i.fa-check-circle,
.checklist-box li i.fas {
    color: var(--color-success);
    margin-right: var(--space-2);
}

.case-study-box {
    background: var(--color-accent-pink-bg);
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-accent-pink-border);
    margin: var(--space-8) 0;
    position: relative;
    box-shadow: var(--shadow-card);
}

.case-study-box h3 {
    margin-top: 0;
    color: var(--color-accent-pink);
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
    border-bottom: none;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.case-study-box p:last-child {
    margin-bottom: 0;
}

/* Callout list items — tokenised colour, comfortable spacing */
.key-takeaways li,
.checklist-box li {
    margin-bottom: var(--space-3);
    color: var(--color-text);
    line-height: var(--leading-relaxed);
}

.key-takeaways li:last-child,
.checklist-box li:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   6. ARTICLE CTA BLOCK (.article-cta) — tokenised
   NOTE: representative article wraps its CTA in a bare <div> with no class,
   so this refinement only reaches articles that use .article-cta. See notes.
   -------------------------------------------------------------------------- */
.article-cta {
    background: var(--gradient-hero);
    padding: clamp(1.75rem, 4vw, 2.5rem);
    border-radius: var(--radius-xl);
    text-align: center;
    margin: var(--space-12) 0;
    border: 1px solid var(--color-primary-light);
    box-shadow: var(--shadow-card);
}

.article-cta h3 {
    margin-top: 0;
    color: var(--text-dark);
    border-bottom: none;
    padding-bottom: 0;
}

.article-cta p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
    margin-left: auto;
    margin-right: auto;
    max-width: 48ch;
}

/* --------------------------------------------------------------------------
   7. AUTHOR BIO ROW
   NOTE: inner <h4>/<p> carry inline colours in the article markup, so those
   stay as-is; container + avatar are refined here (avatar inline styles on
   one article still win for that page — see notes).
   -------------------------------------------------------------------------- */
.author-bio {
    margin-top: var(--space-12);
    padding: var(--space-6);
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

.author-bio img {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    object-fit: contain;
    background: var(--color-bg);
    padding: 5px;
    border-radius: var(--radius-circle);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.author-bio h4 {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   8. BREADCRUMBS (inside blog articles)
   -------------------------------------------------------------------------- */
.breadcrumbs {
    padding: var(--space-4) 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.breadcrumbs a {
    color: var(--color-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.breadcrumbs a:hover {
    text-decoration: underline;
    color: var(--color-primary-hover);
}

.breadcrumbs a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.breadcrumbs span {
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   9. BLOG INDEX — card-image treatment (cards themselves are global
   .feature-card; only the blog image wrapper is owned here)
   -------------------------------------------------------------------------- */
.blog-card-image {
    margin: 0 0 var(--space-5);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    background: var(--color-surface);
}

.blog-card-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-smooth);
}

/* Subtle brand veil that lifts on card hover for a touch of depth */
.blog-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(26, 86, 219, 0.18) 100%);
    opacity: 0;
    transition: opacity var(--transition-smooth);
    pointer-events: none;
}

.feature-card:hover .blog-card-image img {
    transform: scale(1.06);
}

.feature-card:hover .blog-card-image::after {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   10. RELATED POSTS / RECOMMENDED READING
   NOTE: in current article markup these cards carry heavy INLINE styles plus
   an inline <style> hover that uses !important on box-shadow — those win over
   this file. The rules below add what inline cannot: a :focus-visible ring,
   a brand-tinted hover border, and tokenised section spacing. See notes.
   -------------------------------------------------------------------------- */
.related-posts {
    margin-top: var(--space-16);
    padding-top: var(--space-12);
    border-top: 1px solid var(--color-border);
}

.related-posts > h3 {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-text);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-8);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-8);
}

.related-card {
    transition: var(--transition-smooth);
    border: 1px solid var(--color-border);
}

.related-card:hover {
    border-color: var(--color-primary-light);
    transform: translateY(-6px);
}

/* Keyboard focus ring (no inline equivalent, so this wins) */
.related-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-lg);
}

.related-card img {
    transition: transform var(--transition-smooth);
}

/* --------------------------------------------------------------------------
   11. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .article-content {
        padding: var(--space-6) 0 var(--space-2);
    }

    .article-content > ol > li {
        padding-left: var(--space-8);
    }

    .author-bio {
        gap: var(--space-3);
        padding: var(--space-5);
    }

    .blog-card-image img {
        height: 170px;
    }

    .related-posts {
        margin-top: var(--space-12);
        padding-top: var(--space-8);
    }

    .related-grid {
        gap: var(--space-5);
    }
}

@media (max-width: 480px) {
    .article-content p {
        font-size: var(--text-base);
        line-height: var(--leading-loose);
    }

    .article-content > p:first-of-type {
        font-size: var(--text-lg);
    }

    .article-content li {
        font-size: var(--text-base);
    }

    .key-takeaways,
    .checklist-box,
    .case-study-box,
    .article-cta {
        padding: var(--space-5);
    }

    .article-meta {
        font-size: var(--text-xs);
    }

    .author-bio {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   12. MOTION SAFETY
   Global reduced-motion is handled in design-tokens.css; this is a belt-and
   -braces guard so no blog hover transform/opacity animates when disabled.
   All animated properties are transform/opacity only and content is always
   fully visible (no entrance opacity:0 states used).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .blog-card-image img,
    .feature-card:hover .blog-card-image img,
    .related-card,
    .related-card:hover,
    .related-card img {
        transition: none;
        transform: none;
    }

    .blog-card-image::after {
        transition: none;
    }
}

/* ====================== _polish-fix-cascade.css ====================== */
/* ==========================================================================
   3ioSetu — Polish CORRECTIVE Partial: CASCADE & CORRECTNESS  (fix-cascade)
   --------------------------------------------------------------------------
   Appended LAST (after all _polish-*.css partials, style.css, new-sections.css)
   so these rules win at the point of conflict. This block ONLY repairs real,
   verified cascade bugs — it does not restyle anything that already works.

   Tokens only (design-tokens.css); no new raw hex. No layout restructuring,
   no hidden content, no !important.

   FIX 1 (HIGH, live bug): .partner-logo — orphaned base rule bleed.
     css/style.css:1893 `.partner-logo {…}` was authored for the OLD <img>
     logo (max-width:150px; max-height:60px; object-fit:contain;
     filter:grayscale(100%); opacity:0.7). The live markup
     (payment-solution.html + hi/kn/te/ta/mr mirrors) now uses
     <div class="partner-logo"> as the TILE WRAPPER, with the grayscale/opacity
     applied to the inner <img> via inline style.
     _polish-forms.css:212 restyles `.partner-logo` as a white elevated tile but
     (same 0,1,0 specificity, later) only overrides display/padding/bg/border/
     radius/shadow/min-height — it does NOT reset the base's max-width,
     max-height, filter or opacity. Net result on the tile DIV:
        • opacity:0.7        -> entire tile (card + border + shadow) washed out
        • filter:grayscale() -> entire tile desaturated
        • max-width:150px    -> tile clamped narrow, fighting the new padding
     Reset those four orphaned properties on the tile. Scoped to
     `.partners-section .partner-logo` (0,2,0) to cleanly beat the base
     `.partner-logo` (0,1,0) regardless of order. The inner <img> keeps its
     own inline grayscale/opacity, exactly as designed.
   ========================================================================== */

.partners-section .partner-logo {
    max-width: none;
    max-height: none;
    opacity: 1;
    filter: none;
}

/* ==========================================================================
   NOTES — issues observed but intentionally NOT patched here
   --------------------------------------------------------------------------
   • DORMANT (no fix emitted): `.bg-dark .feature-card`.
     _polish-cards.css `.feature-card:hover` (0,2,0) sets
     background:var(--color-surface-elevated) (white) + border-color:primary.
     _polish-product.css `.bg-dark .feature-card:hover` (0,3,0) sets only
     transform/box-shadow and does NOT re-assert a dark background, so on a
     dark band a hovered feature card would flip to a WHITE bg while its text
     stays white (style.css:1133 `.bg-dark .feature-card h3,p{color:white}`) =>
     white-on-white / hidden content. VERIFIED no live page uses `bg-dark`
     (0 literal matches across all *.html incl. i18n mirrors — the 52-file
     hit was `bg-light-gray`), so this is currently unreachable. If `bg-dark`
     markup is ever added, the OWNER of that selector (product partial) should
     add: `.bg-dark .feature-card:hover { background: var(--color-overlay-inverse-light);
     border-color: var(--color-border-inverse-medium); }`. Not emitted now to
     avoid shipping rules for non-existent DOM.

   • NO-OP confirmed clean: every other polish override reuses the same (or a
     higher) selector than its base and loads after style.css / new-sections.css
     / blog.css, so it wins by order at equal specificity. Spot-checked:
     .feature-card / .usp-card / .benefit-card / .faq-grid .faq-item /
     .faq-section .faq-item / .vert-card / .step-number / .trust-badges-grid
     .trust-badge / .security-card / .security-icon / .modern-form .form-control /
     .submit-btn / .navbar(.scrolled) / .btn* focus rings (override the older
     style.css:2118 `.btn:focus` outline with :focus-visible) / blog prose
     (#475569 is darker-or-equal to base #4a5568 — contrast preserved).

   • CROSS-PARTIAL `.trust-badge`: defined in _polish-cards.css as
     `.trust-badges-grid .trust-badge` (home pill chips) and in _polish-forms.css
     as bare `.trust-badge` (split-hero divider). Different elements on
     different pages — no real collision.

   • `!important` audit: only _polish-product.css:380/385 (compare-table winner
     column) — justified (must beat same-file zebra/:hover + inline #fafafa on
     background-color). All other "!important" tokens are inside comments.

   • Brace balance verified ({ == }) for all six partials; no malformed values;
     no raw hex outside comments; tokens-only respected.
   ========================================================================== */

/* ====================== _polish-fix-cohesion.css ====================== */
/* ==========================================================================
   3ioSetu — Polish FIX: COHESION / RESPONSIVE / A11Y  (module id: fix-cohesion)
   --------------------------------------------------------------------------
   Appended LAST in the merged stylesheet, so these harmonizing overrides win.
   Tokens only (design-tokens.css); additive; no layout/markup/text-color
   changes; reduced-motion safe. Fixes only REAL cross-partial inconsistencies
   and a11y/responsive gaps found while reviewing the six polish partials.

   What this corrects:
     1. Entrance keyframes can leave content invisible in edge cases — pin a
        visible end-state guarantee independent of fill-mode / reduced-motion.
     2. Hover-lift magnitude was softened to -4px on mobile only in _polish-
        cards.css; home / forms / product cards kept a -6px lift on small
        screens. Harmonize the touch-width lift to -4px everywhere.
     3. Focus visibility: cards that expose state only via :focus-within get a
        matching, consistent keyboard ring; normalize the focus-ring language
        (2px solid primary + soft halo) across mismatched controls.
   ========================================================================== */


/* ==========================================================================
   1. ENTRANCE ANIMATIONS — never leave content permanently invisible
   --------------------------------------------------------------------------
   _polish-cards.css (polish-card-rise) and _polish-product.css (productPaneIn)
   start from opacity:0 / 0.001. They rely on fill-mode `both` + the global
   reduced-motion neutralizer to land on the visible final frame. Belt-and-
   braces: when motion is reduced, drop the entrance animation entirely so the
   element renders at its natural (fully visible) state regardless of how a
   given engine resolves a 0.01ms `both` animation.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .feature-card,
    .usp-card,
    .benefit-card,
    .faq-grid .faq-item,
    .vert-card,
    .feature-pane.active {
        animation: none !important; /* unavoidable: must beat the keyframe shorthand set in the partials */
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ==========================================================================
   2. HOVER-LIFT PARITY ON TOUCH-ISH WIDTHS
   --------------------------------------------------------------------------
   _polish-cards.css already calms its hover lift to -4px at <=768px. Bring the
   home / forms / product card families to the SAME calmer lift so the whole
   site moves with one hand on small screens (and avoids jumpy hovers on touch).
   Only the translate magnitude is touched; depth/shadow stay as authored.
   ========================================================================== */
@media (max-width: 768px) {
    .stat-item:hover,
    .client-card:hover,
    .video-card:hover,
    .partner-logo:hover,
    .partner-card:hover,
    .security-card:hover,
    .related-card:hover {
        transform: translateY(-4px);
    }
}


/* ==========================================================================
   3. FOCUS-VISIBLE COHESION
   --------------------------------------------------------------------------
   Standard ring across the site = 2px solid var(--color-primary) + 2px offset,
   with a soft var(--shadow-focus) halo on raised/interactive surfaces.
   ========================================================================== */

/* .video-card surfaced focus only via :focus-within (which also fires on mouse
   click). Add a true keyboard ring so the language matches every other card,
   and round it to sit on the card radius. */
.video-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-focus);
}

/* Normalize the submit button's focus halo to the dedicated focus token so it
   reads identically to the global .btn focus ring (was reusing the hover
   shadow, a slightly different glow). */
.submit-btn:focus-visible {
    box-shadow: var(--shadow-focus);
}

/* Trust badge chips that are anchors/buttons on some pages get a ring for
   parity with the other chip rails (lang options, alpha-nav). Inert badges are
   unaffected — :focus-visible only matches focusable elements. */
.trust-badges-grid .trust-badge:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-full);
}

/* The ecosystem tab bar's active underline pill (.tab-btn.active::after) and
   the product feature-tab share the brand accent; nothing to change — noted
   only to confirm the two tab systems already use one focus language. */