/* cybex-solution.css (2026-09-20)
   Solution-page skin modelled on solutions-cxmpos-mobile-pos.html: light gradient page,
   split hero with badge, chips and a visual, rounded white cards, gradient buttons.
   Loaded after cybex-insights.css and cybex-platform.css on body.solution-skin pages. */
body.solution-skin {
    --sk-ink: #0F172A; --sk-text: #1F2937; --sk-sub: #6B7280; --sk-line: #E5E7EB; --sk-card: #FFFFFF;
    --sk-accent: #6366f1; --sk-accent-2: #8b5cf6; --sk-emerald: #10B981;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    color: var(--sk-text);
}
body.solution-skin main { max-width: var(--shell, 1440px); margin-inline: auto; padding: 0 32px 32px; }

/* ---------- hero ---------- */
body.solution-skin .sol-hero { position: relative; overflow: hidden; padding: 2.5rem 0 1.5rem; margin-bottom: 1.5rem; }
body.solution-skin .sol-hero::before { content: ''; position: absolute; top: -50%; right: -20%; width: 800px; height: 800px; background: radial-gradient(circle, rgba(167,139,250,.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
body.solution-skin .sol-hero::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(134,239,172,.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
body.solution-skin .sol-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
body.solution-skin .sol-badge { display: inline-block; padding: .5rem 1rem; background: linear-gradient(135deg, #e0e7ff 0%, #ddd6fe 100%); color: var(--sk-accent); border-radius: 50px; font-size: .875rem; font-weight: 600; letter-spacing: .5px; }
body.solution-skin .sol-hero h1 { margin: 1rem 0 .75rem; font-size: clamp(2.4rem, 3.2vw, 3.2rem); font-weight: 400; line-height: 1.2; color: #2d3748; letter-spacing: -.01em; max-width: none; }
body.solution-skin .sol-hero p.sub { margin: 0 0 1.25rem; color: #64748b; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.7; max-width: 640px; }
body.solution-skin .chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.25rem 0; }
body.solution-skin .chip { border-radius: 999px; padding: 8px 14px; font-size: 13px; background: rgba(255,255,255,.9); color: var(--sk-ink); font-weight: 500; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
body.solution-skin .sol-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; align-items: center; }
body.solution-skin .sol-visual img { width: 100%; height: auto; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.15); border: 3px solid #fff; transition: transform .3s ease, box-shadow .3s ease; }
body.solution-skin .sol-visual img:hover { transform: translateY(-10px); box-shadow: 0 30px 80px rgba(0,0,0,.2); }

/* ---------- buttons ---------- */
body.solution-skin .btn-primary, body.solution-skin .platform-btn.primary, body.solution-skin .cta-banner .btn-primary {
    display: inline-flex; align-items: center; gap: 10px; padding: .9rem 1.8rem; border-radius: 12px; border: none; font-weight: 600;
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%); color: #fff; text-transform: none; letter-spacing: 0; font-family: inherit; font-size: .95rem; transition: transform .3s ease;
}
body.solution-skin .btn-primary:hover, body.solution-skin .platform-btn.primary:hover { transform: translateY(-2px); color: #fff; background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%); }
body.solution-skin .btn-secondary, body.solution-skin .platform-btn.secondary, body.solution-skin .cta-banner .btn-secondary {
    display: inline-flex; align-items: center; gap: 10px; padding: .9rem 1.8rem; border-radius: 12px; border: 1px solid var(--sk-line); font-weight: 600;
    background: #fff; color: var(--sk-accent); text-transform: none; letter-spacing: 0; font-family: inherit; font-size: .95rem; transition: transform .3s ease;
}
body.solution-skin .btn-secondary:hover, body.solution-skin .platform-btn.secondary:hover { transform: translateY(-2px); background: #fff; color: var(--sk-accent-2); }

/* ---------- sections as cards ---------- */
body.solution-skin .page-section, body.solution-skin .continue-reading, body.solution-skin section.section-card {
    background: var(--sk-card); border: 1px solid var(--sk-line); border-radius: 16px; padding: 28px 28px 24px; margin: 20px 0;
}
body.solution-skin .page-section .shell, body.solution-skin .continue-reading .shell { padding-inline: 0; max-width: none; }
body.solution-skin .page-section h2, body.solution-skin .continue-reading h2 { color: var(--sk-ink); font-size: 1.5rem !important; font-weight: 600 !important; margin: 0 0 12px; }
body.solution-skin .page-section > .shell > p, body.solution-skin .section-intro { color: var(--sk-sub); }
body.solution-skin .module-card, body.solution-skin .capability-card, body.solution-skin .benefit-card, body.solution-skin .deploy-option, body.solution-skin .continue-card, body.solution-skin .phase-card {
    background: #FAFAFB; border: 1px solid var(--sk-line); border-radius: 16px; padding: 22px;
}
body.solution-skin .module-card h3, body.solution-skin .capability-card h3, body.solution-skin .capability-card h4, body.solution-skin .continue-card h3 { color: var(--sk-ink); font-size: 1.1rem !important; margin: 0 0 8px; }
body.solution-skin .module-card p, body.solution-skin .module-card li, body.solution-skin .capability-card p { color: var(--sk-text); }
body.solution-skin .module-steps li { background: #FAFAFB; border: 1px solid var(--sk-line); border-radius: 16px; padding: 16px 18px; }
body.solution-skin .stack-table, body.solution-skin .audit-table-scroll table { border: 1px solid var(--sk-line); border-radius: 14px; overflow: hidden; border-collapse: separate; border-spacing: 0; background: #fff; }
body.solution-skin thead th { background: linear-gradient(180deg, #F8FAFF, #FFFFFF); color: #111827; }
body.solution-skin tbody tr:nth-child(odd) { background: #FAFAFB; }
body.solution-skin .audit-family-nav, body.solution-skin .module-nav { padding: 6px 0 14px; border: 0; }
body.solution-skin .cta-banner { background: var(--sk-card); border: 1px solid var(--sk-line); border-radius: 16px; color: var(--sk-ink); padding: 28px; }
body.solution-skin .cta-banner h2, body.solution-skin .cta-banner p, body.solution-skin .cta-banner .eyebrow { color: var(--sk-ink) !important; }
body.solution-skin .cta-banner p { color: var(--sk-sub) !important; }
body.solution-skin .site-footer { background: transparent; border-top: 1px solid var(--sk-line); color: var(--sk-sub); font-size: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    body.solution-skin .sol-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
    body.solution-skin main { padding: 0 16px 24px; }
    body.solution-skin .page-section, body.solution-skin .continue-reading { padding: 20px 18px; }
}

/* ---------- prose sections: two columns ----------
   The section card fills the shell, but .page-section p/ul/ol cap at 75ch
   (cybex-insights.css), so a prose-only section left roughly half the card
   empty on the right. Those sections now set their prose in two columns.
   Sections that already carry their own full-width block -- any *-grid,
   the implementation timeline, module steps, a table or an image -- are
   left alone: they fill the card themselves, and their short intro line
   keeps the 75ch reading measure. */
body.solution-skin .page-section > .shell { --prose-w: 75ch; }
body.solution-skin .page-section > .shell:not(:has([class*="grid"], [class*="timeline"], .module-steps, .fact-row, table, img, iframe, figure)) {
    --prose-w: none;
    column-count: 2;
    column-gap: 48px;
}
body.solution-skin .page-section > .shell:not(:has([class*="grid"], [class*="timeline"], .module-steps, .fact-row, table, img, iframe, figure)) > h2 {
    column-span: all;
    max-width: none;
}
body.solution-skin .page-section > .shell > :is(p, ul, ol) { max-width: var(--prose-w); }
body.solution-skin .page-section > .shell > h3 { break-after: avoid; }
body.solution-skin .page-section > .shell > :is(ul, ol) { break-inside: avoid; }

/* One column again once the card is too narrow for two readable measures. */
@media (max-width: 1100px) {
    body.solution-skin .page-section > .shell:not(:has([class*="grid"], [class*="timeline"], .module-steps, .fact-row, table, img, iframe, figure)) {
        --prose-w: 75ch;
        column-count: 1;
    }
}

/* ---------- lightbox (cybex-lightbox.js) ----------
   The hero visual pops out full size over a dimmed backdrop. The <dialog>
   is appended to <body>, so these rules sit outside the .solution-skin
   scope; only .cx-zoomable (set by the script) is on the page image. */
.cx-zoomable { cursor: zoom-in; }
.cx-zoomable:focus-visible { outline: 3px solid var(--sk-accent, #6366f1); outline-offset: 4px; }

dialog.cx-lightbox {
    /* The site stylesheets zero out margins, which kills the UA's own
       centering for a modal dialog -- restate it here. */
    position: fixed;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    border: 0;
    padding: 0;
    background: transparent;
    max-width: 100vw;
    max-height: 100vh;
    overflow: visible;
}
dialog.cx-lightbox::backdrop { background: rgba(15, 23, 42, .75); }
.cx-lightbox-frame { position: relative; display: inline-block; line-height: 0; }
.cx-lightbox-frame img {
    display: block;
    max-width: 94vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    border-radius: 16px;
    border: 3px solid #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
    cursor: zoom-out;
}
.cx-lightbox-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--sk-line, #E5E7EB);
    background: #fff;
    color: #0F172A;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.cx-lightbox-close:hover { color: var(--sk-accent, #6366f1); }

@media (max-width: 720px) {
    .cx-lightbox-close { top: 6px; right: 6px; }
}

/* Edge-to-edge CTA banner (2026-09-23): the width lives in cybex-insights.css;
   this only drops the card corners and side borders the skin adds above,
   which would otherwise show as a 1px line down each edge of the screen. */
body.solution-skin .cta-banner { border-radius: 0; border-left: 0; border-right: 0; }