/* Livvent brand colours and artwork. The larger reading sizes follow the
   user's accessibility/readability update and apply in both languages. */
:root {
    --brand-navy: #004B87;
    --brand-gold: #C59B27;
    --brand-gold-light: #E8C872;
    --brand-gold-hover: #B38A1F;
    --brand-dark: #1A2530;
    --brand-surface: #FCFAF5;
    --brand-warm: #F8EED5;
    --card-gradient: linear-gradient(145deg, #FFFFFF 12%, #FCFAF5 60%, #E8C87230 100%);
    --gold-halo: radial-gradient(circle at 35% 24%, #FFF6D8 0%, #E8C87288 66%, #C59B2728 100%);
    --brand-border: #E0E6ED;
    --brand-white: #FFFFFF;
    --ink: var(--brand-dark);
    --muted: #616B78;
    --yellow: var(--brand-gold);
    --gold: var(--brand-gold);
    --cream: var(--brand-surface);
    --deep: var(--brand-navy);
    --line: var(--brand-border);
    --shadow: 0 8px 24px #004B8708;
    --text-body: 17px;
    --text-caption: 15px;
    --text-card: 18px;
}
body, html[lang=ar] body {
    background: var(--brand-surface);
    color: var(--brand-dark);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: var(--text-body);
    font-weight: 400;
}
body h1 {
    font-size: clamp(38px, 3.8vw, 54px) !important;
    font-weight: 700 !important;
    color: var(--brand-navy);
    line-height: 1.15 !important;
    letter-spacing: -.02em;
}
body h2 {
    font-size: clamp(26px, 2.5vw, 36px) !important;
    font-weight: 600 !important;
    color: var(--brand-dark);
    line-height: 1.3 !important;
    letter-spacing: -.015em;
}
body h3, .journey-step-title, .managed-visual-card h3, .flow-step>b {
    font-size: var(--text-card) !important;
    font-weight: 600 !important;
    color: var(--brand-dark);
    line-height: 1.45 !important;
    letter-spacing: 0;
}
body p, .hero-description, .hero-promise, .story-copy>p,
.detail-copy>p, .check-list>li, .business-card p, .journey-step-description,
.managed-visual-card p, .flow-caption, .ecosystem-description p,
.hardware-price-card p, .footer-column>a {
    font-size: var(--text-body) !important;
    font-weight: 400;
    color: var(--brand-dark);
    line-height: 1.7;
}
body .hero-promise { font-weight: 600; }
.eyebrow, .hero-kicker, .pricing-small, .annual-note, .hardware-art-note,
.footer-bottom, .partners-label, .journey-number, .flow-number,
.hero-businesses>span, .category-chip, .ecosystem-centre>span,
.launch-inclusions>span, .zero-commission, .pricing-navigation>a {
    font-size: var(--text-caption) !important;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: .02em;
}
.eyebrow, .hero-kicker { color: var(--brand-navy); }
.feature-strip>a, .language-toggle, .region-label, .breadcrumb,
.ecosystem-node>span, .journey-detail-title, .carousel-controls>span,
.plan-heading .eyebrow, .pos-starting-price>span {
    font-size: var(--text-caption) !important;
    font-weight: 500;
}
.hero-kicker, .eyebrow.label { background: var(--brand-surface); box-shadow: none; }
body h1>span, .hero-copy h1>span { color: var(--brand-gold); }
::selection { background: var(--brand-gold-light); color: var(--brand-dark); }
:is(a,button,summary):focus-visible { outline-color: var(--brand-navy); }

/* Only supplied artwork represents Livvent. Keep its colours, proportions,
   clear space and a white/light neutral backing; never animate the logo. */
.brand-link, .footer-brand>a { display: inline-flex; flex: 0 0 auto; background: white; }
.brand-logo {
    display: block;
    width: 195px;
    height: auto;
    min-width: 175px;
    object-fit: contain;
    direction: ltr;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
}
.site-header { background: #FCFAF5F5; border-color: var(--brand-border); }
.site-header.is-scrolled { box-shadow: 0 4px 16px #004B8708; border-color: var(--brand-border); }
.navbar { min-height: 86px; gap: 20px; }
.desktop-nav { gap: 18px; }
.desktop-nav>a, .nav-trigger { color: var(--brand-navy); font-size: 16px; font-weight: 600; }
.desktop-nav>a, .nav-trigger { border-bottom: 4px solid transparent; border-radius: 0; }
.desktop-nav>a:hover, .nav-trigger[aria-expanded=true] { border-bottom-color: var(--brand-gold); }
.dropdown-menu, .mobile-nav { background: white; border-color: var(--brand-border); border-radius: 8px; }
.dropdown-menu a:hover, .mobile-nav a:hover { background: var(--brand-surface); color: var(--brand-navy); }
.nav-actions { gap: 10px; }
.language-toggle { border-color: var(--brand-border); color: var(--brand-navy); background: white; border-radius: 6px; }
.region-flag { background: var(--brand-surface); color: var(--brand-navy); }
.reading-progress { background: var(--brand-gold); }
.back-to-top { background: var(--brand-navy); box-shadow: 0 4px 16px #004B8715; }

.button, .button.small {
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    padding: 12px 20px;
    min-height: 48px;
    box-shadow: none;
}
.button.primary { background: var(--brand-gold); border-color: var(--brand-gold); color: white; }
.button.primary:hover { background: var(--brand-gold-hover); border-color: var(--brand-gold-hover); }
.button.dark { background: var(--brand-navy); border-color: var(--brand-navy); color: white; }
.button.dark:hover { background: #003D6E; }
.button.outline, .button.white { background: white; border-color: var(--brand-border); color: var(--brand-navy); }
.button.outline:hover, .button.white:hover { background: var(--brand-surface); border-color: var(--brand-navy); }
.text-link, .text-link:hover, .round-arrow { color: var(--brand-navy); }
.icon-badge { background: linear-gradient(135deg, #FFF6DC, #E8C87285); color: var(--brand-navy); border-radius: 8px; }
.icon-svg, .livvent-icon { color: inherit; }
.check-list .icon-svg { color: var(--brand-navy); }

/* Warm ivory cards with a soft gold wash keep text and imagery clear. */
.business-card, .feature-card, .growth-card, .detail-card, .service-card,
.managed-visual-card, .ownership-card, .product-card, .pos-solution-card,
.pos-resource-card, .why-grid article, .visual-pos-plan,
.hardware-price-card, .launch-pricing, .ecosystem-description,
.flow-step, .journey-detail, .faq-list details {
    background: var(--card-gradient);
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    box-shadow: 0 6px 20px #004B8706;
}
.managed-visual-card, .visual-pos-plan, .ownership-card, .why-grid article,
.growth-card, .hardware-price-card, .launch-pricing, .journey-detail {
    padding: 20px;
}
.business-card-body, .detail-copy, .service-card>div, .pos-resource-card>div { padding: 20px; }
.category-chip, .pricing-navigation>a, .flow-modes button, .pos-feature-tabs button {
    background: white;
    border-color: var(--brand-border);
    border-radius: 6px;
    color: var(--brand-navy);
    min-height: 42px;
}
.category-chip[aria-pressed=true], .ecosystem-node.is-active, .flow-step.is-active,
.journey-step.is-active, .pricing-navigation>a:hover {
    background: linear-gradient(145deg, #FFFCF4, #E8C87255);
    border-color: var(--brand-gold);
    box-shadow: 0 6px 20px #004B8708;
}
.flow-modes button[aria-pressed=true], .pos-feature-tabs button[aria-selected=true] {
    background: var(--brand-navy);
    color: white;
    border-color: var(--brand-navy);
    border-bottom: 4px solid var(--brand-gold);
}
.pos-hero-band, .soft-section, .pos-solutions { background: var(--brand-surface); }
.live-flow-section, .ownership-section {
    background: radial-gradient(ellipse at 85% 20%, #E8C87245, transparent 62%),
        linear-gradient(120deg, #FCFAF5, #F8EED5);
}
.visual-pricing {
    background: radial-gradient(ellipse at 12% 10%, #E8C87238, transparent 48%),
        linear-gradient(160deg, #FCFAF5, #F4F6F8);
}
.pos-definition { background: linear-gradient(120deg, #F4F6F8, #FCFAF5); }
.managed-section, .ecosystem-section {
    background: url('../livvent-background.svg') center/cover,
        radial-gradient(ellipse at 50% 45%, #E8C87228, transparent 65%), var(--brand-surface);
}
.journey-section {
    background: radial-gradient(ellipse at 50% 65%, #E8C87235, transparent 70%), var(--brand-surface);
}
.faq-section { background: linear-gradient(150deg, #FCFAF5, #F8EED5); }
.flow-bottom, .ecosystem-description, .journey-detail { background: var(--card-gradient); }
.flow-step { border-radius: 8px; }
.flow-track { background: var(--brand-border); }
.flow-track span, .flow-track span::after, .orbit-particle { background: var(--brand-gold); }
.ecosystem-lines, .journey-route .route-track { stroke: var(--brand-border); }
.journey-route .route-live { stroke: var(--brand-gold); }
.ecosystem-node { background: var(--card-gradient); border-color: var(--brand-border); border-radius: 8px; }
.ecosystem-centre {
    background: white;
    border: 1px solid var(--brand-border);
    box-shadow: 0 12px 32px #004B8708;
}
.ecosystem-centre::before { border-color: var(--brand-border); }
.ecosystem-centre .livvent-mark {
    width: 84px;
    height: auto;
    object-fit: contain;
    background: white;
    filter: none;
    animation: none;
    transform: none;
}
.ecosystem-centre>b { color: var(--brand-navy); font-size: 18px; }
.stage-orbit.orbit-one { background: var(--gold-halo); box-shadow: inset 0 0 65px #FFFFFF30; }
.stage-orbit.orbit-two { border-color: #C59B2738; }
.stage-spark { color: var(--brand-gold); font-size: 18px; }
.interactive-art::before, .cta-ring { opacity: .25; }
.illustrated-points>li { background: linear-gradient(135deg, #FFFEFA, #E8C87220); border-radius: 8px; border-color: #C59B2728; }
.illustrated-points>li:hover { background: white; border-color: var(--brand-gold); }

/* Richer gold surfaces bring focus to product showcases and calls to action. */
.ownership-banner, .experience-cta, .experience-cta-dark {
    background: radial-gradient(ellipse at 85% 30%, #E8C87290, transparent 65%),
        linear-gradient(120deg, #FCFAF5 12%, #F8EED5 65%, #E8C87265);
    color: var(--brand-dark);
    border: 1px solid var(--brand-border);
    border-top: 4px solid var(--brand-gold);
    border-radius: 8px;
    box-shadow: 0 8px 24px #004B8708;
}
.ownership-banner h2, .experience-cta h2, .experience-cta-dark h2 { color: var(--brand-dark); }
.ownership-banner p, .experience-cta p, .experience-cta-dark p { color: var(--brand-dark); }
.ownership-banner .eyebrow, .experience-cta .eyebrow, .experience-cta-dark .eyebrow { color: var(--brand-navy); }
.ownership-pillars .icon-svg { color: var(--brand-gold); }
.ownership-pillars b { font-size: 17px; }
.ownership-pillars span { color: var(--muted); font-size: 15px; }
.launch-pricing { background: linear-gradient(120deg, #FFFFFF, #FCFAF5 45%, #E8C87245); border-top: 4px solid var(--brand-gold); }
.visual-pos-plan.recommended { background: linear-gradient(155deg, #FFFFFF, #FFF7DF 50%, #E8C87265); border-color: var(--brand-gold); border-top-width: 4px; box-shadow: 0 8px 24px #C59B2718; }
.rate-pills>span { background: linear-gradient(135deg, #FFFCF3, #E8C87235); color: var(--brand-navy); border-radius: 6px; }
.launch-price>b, .plan-rate>b, .hardware-price>b { color: var(--brand-navy); }
.zero-commission { background: var(--brand-surface); color: var(--brand-navy); }
.plan-rate>small, .launch-price>small, .hardware-art-note { color: var(--muted); font-size: 15px; }
.launch-inclusions>span { background: var(--brand-surface); color: var(--brand-dark); border-radius: 6px; }
.launch-inclusions .icon-svg { color: var(--brand-navy); }
.pricing-group-title { border-inline-start: 4px solid var(--brand-gold); padding-inline-start: 12px; }
.faq-list summary { color: var(--brand-navy); font-size: 18px; font-weight: 600; }
.site-footer { background: linear-gradient(180deg, #FCFAF5, #FFFFFF); }
.footer-column h3 { color: var(--brand-navy); }
.footer-brand p, .footer-bottom { color: var(--muted); }
.footer-brand .brand-logo { margin-bottom: 12px; }
.social-links a { border-color: var(--brand-border); color: var(--brand-navy); }

/* Colour lives behind existing transparent artwork, without changing images. */
.feature-strip, .ownership-benefits { background: var(--card-gradient); border-color: #C59B2728; }
.transparent-visual, .feature-visual.transparent-visual,
.detail-image:has(img[src*="transparent-"]),
.pos-resource-card>img[src*="transparent-"] {
    background: radial-gradient(ellipse at 50% 65%, #E8C87260, #FCFAF5 78%);
}
.managed-visual-card>img, .plan-illustration, .hardware-art,
.ownership-banner-art, .cta-cutout {
    background: radial-gradient(ellipse at 50% 55%, #E8C87250, transparent 70%);
}
.journey-illustration, .flow-illustration {
    background: radial-gradient(ellipse at 50% 60%, #E8C87238, transparent 70%);
}
.why-grid .icon-badge { background: linear-gradient(135deg, #FFF6DC, #E8C87285); }

/* Enlarge the labels that previously had independent 8–12px sizes. */
.illustrated-points li>span, .journey-detail p, .flow-caption,
.ecosystem-description p, .feature-copy p, .business-card p {
    font-size: var(--text-body) !important;
    line-height: 1.6;
}
.illustrated-points li { padding: 12px; min-width: 0; }
.illustrated-points li>span { min-width: 0; overflow-wrap: break-word; }
.ecosystem-description>b, .journey-detail-title { font-size: 18px !important; }
.ecosystem-node>span { font-size: 16px !important; line-height: 1.4; }
.ecosystem-centre>span { font-size: 14px !important; }
.text-link, .hero-category-controls>a, .category-chip,
.pricing-navigation>a, .flow-modes button, .pos-feature-tabs button,
.dropdown-menu a, .mobile-nav a, .zero-commission, .launch-inclusions>span {
    font-size: 16px !important;
}
.dropdown-menu small, .region-flag, .pos-starting-price small,
.rate-pills>span, .annual-note, .footer-bottom, .partners-label,
.hardware-art-note, .pricing-small, .plan-rate>span,
.plan-rate>small, .hardware-price>span, .launch-price>span {
    font-size: 15px !important;
}
.dropdown-menu { width: 300px; }
.button, .button.small, .hero-copy .button, .flow-bottom .button {
    font-size: 16px !important;
    max-width: 100%;
    white-space: normal;
    text-align: center;
}
.feature-strip>a { font-size: 16px !important; line-height: 1.45; }
.point-art, .detail-copy .point-art, .visual-pos-plan .point-art {
    width: 52px;
    height: 52px;
}
.icon-svg, .livvent-icon { width: 28px; height: 28px; }
.icon-badge { width: 56px; height: 56px; }
.icon-badge .icon-svg { width: 32px; height: 32px; }
.service-card .icon-badge, .ownership-card .icon-badge,
.feature-copy .icon-badge { width: 56px; height: 56px; }
.service-card .icon-badge .icon-svg, .ownership-card .icon-badge .icon-svg,
.feature-copy .icon-svg, .pos-benefits .icon-svg { width: 32px; height: 32px; }
.check-list .icon-svg, .zero-commission .icon-svg,
.launch-inclusions .icon-svg, .ownership-pillars .icon-svg,
.journey-detail .icon-svg, .carousel-controls .icon-svg,
.wallet-payment .icon-svg, .cash-payment .icon-svg {
    width: 28px; height: 28px;
}
.hero-category-controls>a .icon-svg { width: 22px; height: 22px; }
.feature-strip .icon-badge { width: 52px; height: 52px; }
.feature-strip .icon-badge .icon-svg { width: 28px; height: 28px; }
.button .icon-svg, .text-link .icon-svg, .language-globe .icon-svg {
    width: 24px;
    height: 24px;
}
.nav-trigger .icon-svg { width: 20px; height: 20px; }
.round-arrow .icon-svg, .back-to-top .icon-svg { width: 26px; height: 26px; }
.round-arrow { width: 36px; height: 36px; flex-shrink: 0; }
.social-links a { width: 42px; height: 42px; font-size: 18px; }
.social-links svg { width: 24px; height: 24px; }
.footer-column, .story-copy, .hero-copy, .flow-step, .ownership-banner-copy,
.journey-step, .ownership-pillars>div { min-width: 0; }
.footer-column>a { overflow-wrap: break-word; }
.visual-pos-plan .illustrated-points { grid-template-columns: minmax(0, 1fr); }
.ecosystem-centre { padding: 22px; }

@media (max-width: 1100px) {
    .navbar { gap: 14px; }
    .desktop-nav { gap: 12px; }
    .desktop-nav>a, .nav-trigger { font-size: 14px; }
    .region-label { display: none; }
    .nav-actions>.button { display: none; }
    .hero-cutout, html[dir=rtl] .hero-cutout { margin-inline: 0; }
    .hero-cutout .cutout-image { width: 100%; max-width: 100%; }
    .stage-orbit.orbit-two { width: 78%; left: 11%; }
    .ownership-banner-art, html[dir=rtl] .ownership-banner-art { margin-inline: 0; }
    .ownership-banner-art img { width: 100%; max-width: 100%; }
    .illustrated-points { grid-template-columns: minmax(0, 1fr); }
    .story-row, .pos-tabpanel { gap: 28px; }
}
@media (max-width: 760px) {
    .brand-logo { width: 175px; min-width: 175px; }
    .navbar { gap: 8px; min-height: 76px; }
    .nav-actions { gap: 6px; }
    .nav-actions>.button { display: none; }
    .language-toggle { min-width: 54px; min-height: 42px; padding: 6px; font-size: 14px !important; }
    .language-globe { display: none; }
    .mobile-toggle { width: 38px; height: 42px; padding: 6px; }
    .mobile-toggle .icon-svg { width: 26px; height: 26px; }
    .ecosystem-centre .livvent-mark { width: 62px; }
    .ownership-pillars { gap: 16px; }
    .hardware-price-card { padding: 20px; }
    .illustrated-points>li { min-height: 78px; }
    .ownership-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .benefit, .ownership-layout>div, .ownership-card>div { min-width: 0; }
    .launch-pricing { grid-template-columns: minmax(0, 1fr); }
    .launch-pricing>div { min-width: 0; }
    .launch-price { flex-wrap: wrap; }
    .launch-price>small { flex-basis: 100%; min-width: 0; white-space: normal; }
    .launch-price-copy>.button { max-width: 100%; white-space: normal; text-align: center; }
    .ecosystem-centre { padding: 14px; }
    .ecosystem-centre {
        box-sizing: border-box;
        gap: 2px;
    }
    .ecosystem-centre .livvent-mark {
        width: 48px;
        height: 40px;
        flex: 0 0 auto;
        margin: 0 0 2px;
        object-fit: contain;
    }
    .ecosystem-centre>b {
        font-size: 15px;
        line-height: 1.1;
        text-align: center;
    }
    .ecosystem-centre>span {
        margin-top: 1px;
        font-size: 10px !important;
        line-height: 1.15;
        text-align: center;
    }
    .ownership-banner { grid-template-columns: minmax(0, 1fr); }
    .ownership-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-kicker { max-width: 100%; }
    .journey-detail>span { flex-wrap: wrap; }
    .pos-feature-tabs { flex-wrap: wrap; }
    .pricing-navigation { flex-wrap: wrap; }
    .footer-column>a { font-size: 16px !important; }
}
@media (max-width: 600px) {
    .flow-stage, .managed-visual-grid { grid-template-columns: minmax(0, 1fr); }
    .journey-step-title { font-size: 18px !important; }
    .journey-step-description { font-size: 16px !important; }
    .growth-card { grid-template-columns: minmax(0, 1fr); }
    .growth-cutout, html[dir=rtl] .growth-cutout {
        width: 100%; max-width: 100%; left: auto; right: auto;
    }
    .ecosystem-node>span { font-size: 16px !important; }
    .ecosystem-node { min-height: 164px; }
}
@media (max-width: 480px) {
    .ownership-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ownership-card p { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
    .livvent-icon .icon-glyph { animation: none !important; }
}