/* ==========================================================================
   RekordPlate — Public marketing site, brand layer
   --------------------------------------------------------------------------
   Loaded LAST, after styles.css / responsive.css, so it is the final authority
   on the public site (resources/views/web/*, layouts/web/*). It restyles the
   base marketing theme WITHOUT touching markup, CMS bindings, routes, forms
   or content fields — everything here is colour, type, spacing, hierarchy,
   component surface and motion.

   IDENTITY
     The mark is four plates on a 2x2 grid: one filled violet, three drawn as
     rings (rekordplate-brand/rekordplate-mark-transparent.svg). Two things
     follow from that and run through this whole sheet:

       - Circles are the house geometry. Icon tiles, avatars, pulse rings,
         slider nav and CTAs are round or pill; only content cards get the
         14px rounded rectangle.
       - One plate is lit, three are quiet. Violet is spent on exactly one
         thing per view — the primary action — and everything else is neutral.

   PALETTE (rekordplate-brand/README.md)
     --rp-accent-500 #7C6BF2   brand violet: decoration, marks on ink
     --rp-accent-600 #6A57E8   CTA fill; 5.07:1 on white, so button labels pass
                               AA at body size where #7C6BF2 (4.00:1) does not
     --rp-ink        #14121E   brand panel ground
     --rp-on-ink     #F2F0FA   text on ink (16.4:1)
     --rp-on-ink-mu  #8E88A8   secondary text on ink (5.49:1)

     Neutrals are lifted verbatim from the Nocturne back-office ramp
     (public/assets/css/nocturne.css) so the marketing site and the product
     share literal values rather than merely looking similar. Type is Inter for
     the same reason.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* ---- Brand violet ramp, built around the #7C6BF2 accent plate -------- */
    --rp-accent-50:  #f5f3ff;
    --rp-accent-100: #ede9fe;
    --rp-accent-200: #ddd6fe;
    --rp-accent-300: #c4b8fb;
    --rp-accent-400: #a092f6;
    --rp-accent-500: #7c6bf2;   /* the brand accent itself */
    --rp-accent-600: #6a57e8;   /* CTA fill — AA on white */
    --rp-accent-700: #5844ce;
    --rp-accent-800: #47379f;
    --rp-accent-900: #2b2741;

    /* Retheme the base theme's variable so the ~200 rules in styles.css that
       reference it come along instead of being fought one at a time. */
    --clr-primary: #6a57e8;
    --clr-secondary: #5844ce;

    /* ---- Ink: the dark plate, used for the app band and the footer ------- */
    --rp-ink: #14121e;
    --rp-ink-raised: #1e1b2c;
    --rp-ink-line: rgba(242, 240, 250, .12);
    --rp-on-ink: #f2f0fa;
    --rp-on-ink-muted: #8e88a8;

    /* ---- Neutrals — Nocturne light ramp ---------------------------------- */
    --rp-heading: #1b1d2a;
    --rp-body: #474b58;
    --rp-muted: #696d82;
    --rp-line: #dcdee7;
    --rp-hairline: rgba(27, 29, 42, .07);
    --rp-surface: #ffffff;
    --rp-surface-2: #f4f5fa;
    --rp-tint: #f5f3ff;

    /* ---- Type ------------------------------------------------------------ */
    --rp-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* ---- Geometry — 4 / 8 / 14, same scale as Nocturne ------------------- */
    --rp-radius-sm: 8px;
    --rp-radius: 14px;
    --rp-radius-lg: 20px;
    --rp-radius-pill: 999px;

    /* ---- Elevation: hairline edge + soft ambient drop -------------------- */
    --rp-shadow-sm: 0 0 0 1px #e3e5ee;
    --rp-shadow-md: 0 0 0 1px #d7dae6, 0 6px 18px rgba(24, 26, 45, .08);
    --rp-shadow-lg: 0 0 0 1px #c4c8d9, 0 16px 40px rgba(24, 26, 45, .14);
    --rp-shadow-accent: 0 8px 22px rgba(106, 87, 232, .28);
    --rp-shadow-accent-hi: 0 12px 28px rgba(106, 87, 232, .34);

    --rp-ease: .22s cubic-bezier(.2, .8, .2, 1);

    /* The mark's plate grid, as a background. One lit plate, three rings —
       used as an oversized watermark behind the hero and the app band. */
    --rp-plates: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-213 -213 426 426'%3E%3Ccircle cx='-100' cy='-100' r='91' fill='%237C6BF2'/%3E%3Ccircle cx='-100' cy='-100' r='67' fill='none' stroke='%23ffffff' stroke-width='9'/%3E%3Ccircle cx='100' cy='-100' r='91' fill='none' stroke='%237C6BF2' stroke-width='18'/%3E%3Ccircle cx='100' cy='-100' r='67' fill='none' stroke='%237C6BF2' stroke-width='9' opacity='.45'/%3E%3Ccircle cx='-100' cy='100' r='91' fill='none' stroke='%237C6BF2' stroke-width='18'/%3E%3Ccircle cx='-100' cy='100' r='67' fill='none' stroke='%237C6BF2' stroke-width='9' opacity='.45'/%3E%3Ccircle cx='100' cy='100' r='91' fill='none' stroke='%237C6BF2' stroke-width='18'/%3E%3Ccircle cx='100' cy='100' r='67' fill='none' stroke='%237C6BF2' stroke-width='9' opacity='.45'/%3E%3C/svg%3E");
}

/* ==========================================================================
   1. FOUNDATION
   ========================================================================== */

/* styles.css opens with a bare `* { font-family: Manrope }`. At specificity 0
   it loses to nothing — it beats inheritance from `body`, so every element
   that is not named by a more specific rule falls back to Manrope no matter
   what the body is set to. Matching it here, later in the cascade, is what
   actually puts the page on Inter. Rules that ask for monospace carry real
   selectors and still outrank this. */
* { font-family: var(--rp-font); }

/* The theme's own font variable, repointed so `font-family: var(--ff)` sites
   come along too. */
:root { --ff: var(--rp-font); }

/* The remaining Manrope declarations in styles.css are !important, so each one
   needs a rule of at least equal specificity after it. Grouped here rather
   than scattered so the list stays checkable against styles.css. */
body .h6-line-clamp,
.footer-section .footer-title,
.home-banner-section .banner-content h1,
.card-header h4,
.customer-section .customer-card h5,
.about-section h2,
.custom-accordion-header,
.p-2nd-line-clamp strong { font-family: var(--rp-font) !important; }

body {
    background: var(--rp-surface);
    color: var(--rp-body);
    font-family: var(--rp-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.section-title h2,
.banner-content h1 {
    font-family: var(--rp-font) !important;
    color: var(--rp-heading);
    letter-spacing: -0.022em;
}

section { padding: 88px 0; }
body .section-title { margin-bottom: 56px; }
.container { max-width: 1200px; }

body .section-title h2,
.section-title h2 {
    font-weight: 700;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.15;
    letter-spacing: -0.028em;
    color: var(--rp-heading);
}

/* The one highlighted word per heading is the same move as the one lit plate
   in the mark. 700 is the deep step, so it clears AA as running text. */
.section-title .highlight-title,
.highlight-title { color: var(--rp-accent-700) !important; }

body .section-description,
.section-description {
    font-size: 18px;
    line-height: 1.7;
    color: var(--rp-muted);
    max-width: 640px;
}
.section-title.text-center .section-description { margin-inline: auto; }

/* Keyboard focus — a violet ring everywhere, on every ground. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--rp-accent-600);
    outline-offset: 2px;
    border-radius: var(--rp-radius-sm);
}
.get-app-container a:focus-visible,
.site-footer a:focus-visible { outline-color: var(--rp-accent-400); }

/* ==========================================================================
   2. BUTTONS
   ========================================================================== */

.custom-primary-btn,
.custom-btn.custom-primary-btn,
.get-in-touch-btn,
.subscribe-plan,
.submit-btn,
.download-btn,
.verify-btn {
    background: var(--rp-accent-600) !important;
    border: 1px solid var(--rp-accent-600) !important;
    color: #fff !important;
    border-radius: var(--rp-radius-pill) !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
    padding: 13px 26px !important;
    /* A pill that wraps its label reads as a mistake, and the theme sizes the
       hero CTA off its content, so a two-word label was breaking in half. */
    white-space: nowrap;
    box-shadow: var(--rp-shadow-accent);
    transition: transform var(--rp-ease), box-shadow var(--rp-ease), background var(--rp-ease);
}
.custom-primary-btn:hover,
.get-in-touch-btn:hover,
.subscribe-plan:hover,
.submit-btn:hover,
.download-btn:hover,
.verify-btn:hover {
    background: var(--rp-accent-700) !important;
    border-color: var(--rp-accent-700) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: var(--rp-shadow-accent-hi) !important;
}
/* Press returns to rest — the lift is the affordance, not a layout change. */
.custom-primary-btn:active,
.get-in-touch-btn:active,
.subscribe-plan:active,
.submit-btn:active { transform: translateY(0); box-shadow: var(--rp-shadow-accent) !important; }

/* `:not([stroke])` matters: the Watch Video icon draws its ring as an unfilled
   stroked path, and filling it turns the ring into a solid disc. */
.custom-primary-btn svg path:not([stroke]) { fill: #fff; }
/* Icons are flex children of the label row; without this they are the item
   that gives way when the row is tight, and the arrow collapses to a sliver. */
.custom-primary-btn svg,
.get-app-btn svg,
.login-btn-2 svg { flex-shrink: 0; }

/* The hero CTA is pinned to 156x52 in styles.css, which is narrower than
   "Get Started" plus its arrow — the arrow was being squeezed to nothing.
   Sizing it from its content puts it on the same footing as every other CTA. */
.home-banner-section .try-demo-button {
    width: auto !important;
    height: auto !important;
    min-height: 52px;
    border-radius: var(--rp-radius-pill) !important;
}
/* The base sheet inverts this one button to white-on-dark on hover, which is
   a different hover language from every other CTA on the page. */
.home-banner-section .try-demo-button:hover {
    background: var(--rp-accent-700) !important;
    color: #fff !important;
}
.home-banner-section .try-demo-button:hover svg path { fill: #fff; }

.cancel-btn {
    border-radius: var(--rp-radius-pill) !important;
    border: 1px solid var(--rp-line) !important;
    color: var(--rp-body) !important;
    background: #fff !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    transition: background var(--rp-ease), border-color var(--rp-ease);
}
.cancel-btn:hover { background: var(--rp-surface-2) !important; border-color: var(--rp-accent-300) !important; }

/* ==========================================================================
   3. HEADER / NAV
   ========================================================================== */

/* The frosted header paints its blur on a pseudo-element, not on the header
   itself. A non-`none` backdrop-filter makes an element a containing block for
   every `position: fixed` descendant, and the mobile menu offcanvas lives
   inside <header>: with the filter on the header, the drawer's `top: 0;
   bottom: 0` resolved against the 87px header box instead of the viewport, so
   it opened 87px tall and clipped every link out of sight. The pseudo-element
   keeps the glass and leaves the header a plain positioned box. */
.header-section.home-header {
    position: sticky !important;
    background: transparent !important;
    border-bottom: 1px solid var(--rp-hairline) !important;
    box-shadow: 0 1px 0 rgba(27, 29, 42, .04);
}
.header-section.home-header::before { background: rgba(255, 255, 255, .82); }
.header-section.home-header a { color: var(--rp-heading); }
.header-section .nav-link {
    color: var(--rp-body) !important;
    font-weight: 500;
    transition: color var(--rp-ease);
}
.header-section .nav-link:hover { color: var(--rp-accent-700) !important; }

.header-section.home-header .get-app-btn {
    background: var(--rp-accent-600) !important;
    border-radius: var(--rp-radius-pill) !important;
    padding: 10px 22px !important;
    box-shadow: var(--rp-shadow-accent);
    transition: transform var(--rp-ease), box-shadow var(--rp-ease), background var(--rp-ease);
}
.header-section.home-header .get-app-btn,
.header-section.home-header .get-app-btn .login-text { color: #fff !important; }
.header-section.home-header .get-app-btn svg path { fill: #fff !important; }
.header-section.home-header .get-app-btn:hover {
    background: var(--rp-accent-700) !important;
    transform: translateY(-2px);
    box-shadow: var(--rp-shadow-accent-hi);
}

/* Mobile off-canvas menu */
.mobile-menu .accordion-button { color: var(--rp-heading); font-weight: 600; }
.mobile-menu .accordion-button:not(.collapsed) { color: var(--rp-accent-700); }
.mobile-menu .accordion-body a { color: var(--rp-body); }
.mobile-menu .accordion-body a:hover { color: var(--rp-accent-700); }

/* ==========================================================================
   4. HERO
   --------------------------------------------------------------------------
   Light ground with the plate grid drifting behind it, one violet wash from
   the top-right where the lit plate sits in the mark.
   ========================================================================== */

.home-banner-section {
    position: relative;
    height: auto;
    min-height: auto;
    padding: 132px 0 104px;
    overflow: hidden;
    background:
        radial-gradient(circle, rgba(27, 29, 42, .045) 1px, transparent 1.5px) 0 0 / 26px 26px,
        radial-gradient(50% 58% at 92% -10%, rgba(124, 107, 242, .20), rgba(124, 107, 242, 0) 64%),
        radial-gradient(44% 54% at -8% 108%, rgba(124, 107, 242, .10), rgba(124, 107, 242, 0) 62%),
        linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
}
.home-banner-section::before { display: none !important; }

/* The mark itself, oversized and nearly invisible, anchored where the glow is. */
.home-banner-section::after {
    content: "";
    position: absolute;
    top: -8%;
    right: -6%;
    width: 460px;
    height: 460px;
    background: var(--rp-plates) center / contain no-repeat;
    opacity: .06;
    pointer-events: none;
    z-index: 0;
    animation: rpPlatesDrift 26s ease-in-out infinite;
}
.home-banner-section .container { position: relative; z-index: 1; }

.home-banner-section .banner-content h1 {
    color: var(--rp-heading);
    font-weight: 800;
    font-size: clamp(42px, 5.6vw, 66px);
    line-height: 1.04;
    letter-spacing: -0.038em;
    margin-bottom: 22px;
}
/* The typed word — the lit plate of the headline. */
.home-banner-section .banner-content h1 span { color: var(--rp-accent-600) !important; }

.home-banner-section .banner-content p {
    color: var(--rp-muted);
    opacity: 1;
    font-size: 19px;
    line-height: 1.65;
    max-width: 540px;
}
.home-banner-section .banner-content .demo-btn-group {
    margin-top: 38px;
    gap: 22px;
    align-items: center;
}
.hero-watch { color: var(--rp-heading); font-weight: 600; }

/* Watch-video control — a plate: filled centre, rings pulsing outward. */
.video-button .play-icon,
.video-button .play-icon-2 { background: var(--rp-accent-600); box-shadow: var(--rp-shadow-accent); }
.video-button .pulse-ring,
.video-button .pulse-ring-2 {
    border-color: rgba(124, 107, 242, .38) !important;
    background: rgba(124, 107, 242, .12) !important;
}

/* Product shot: flows in the grid (the theme absolutely-positions it), sits on
   a violet bloom, and floats gently. */
.home-banner-section .banner-img {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    max-width: 560px !important;
    height: auto !important;
    margin-left: auto;
}
.home-banner-section .banner-img img { height: auto !important; }
.home-banner-section .banner-img .hero-bg-shape { opacity: .38; }
.home-banner-section .banner-img img:not(.hero-bg-shape) {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 34px 64px rgba(27, 24, 60, .22));
    animation: rpHeroFloat 6.5s ease-in-out infinite;
}
.home-banner-section .banner-img .position-relative::after {
    content: "";
    position: absolute;
    inset: 2% -4% -6% -4%;
    z-index: 0;
    background: radial-gradient(58% 58% at 52% 42%, rgba(124, 107, 242, .26), rgba(124, 107, 242, 0) 70%);
    filter: blur(14px);
    pointer-events: none;
}

@keyframes rpHeroFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
@keyframes rpPlatesDrift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%      { transform: translate3d(-14px, 18px, 0) rotate(6deg); }
}

/* ==========================================================================
   5. FEATURE CARDS
   --------------------------------------------------------------------------
   The theme paints each card with a CMS-chosen pastel (inline style). Those
   predate the brand and fight it, so the card ground is neutralised here and
   the only colour left is the violet plate behind the icon.
   ========================================================================== */

.service-section { background: linear-gradient(180deg, #ffffff 0%, var(--rp-surface-2) 100%); }
.service-section .row { margin-top: 8px; }
.service-section .row > [class*="col-"] { display: flex; }

.service-section .service-card {
    position: relative;
    width: 100%;
    background: var(--rp-surface) !important;
    border-radius: var(--rp-radius);
    border: 1px solid var(--rp-line);
    box-shadow: var(--rp-shadow-sm);
    padding: 34px 22px 30px;
    overflow: hidden;
    transition: transform var(--rp-ease), box-shadow var(--rp-ease), border-color var(--rp-ease);
}
.service-section .service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--rp-shadow-lg);
    border-color: var(--rp-accent-300);
}

/* Round icon plate. Fills on hover, the way the lit plate reads in the mark. */
.service-section .service-card .image {
    width: 78px;
    height: 78px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--rp-accent-50);
    box-shadow: inset 0 0 0 1px var(--rp-accent-200);
    transition: background var(--rp-ease), box-shadow var(--rp-ease), transform var(--rp-ease);
}
.service-section .service-card:hover .image {
    transform: translateY(-2px);
    background: var(--rp-accent-100);
    box-shadow: inset 0 0 0 1px var(--rp-accent-300);
}
.service-section .service-card .image img {
    height: 38px;
    width: 38px;
    object-fit: contain;
    transition: transform var(--rp-ease);
}
.service-section .service-card:hover .image img { transform: scale(1.06); }

.service-section .service-card .service-content h6 {
    margin: 0;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.012em;
    /* The base rule paints this from --clr-dark with !important. */
    color: var(--rp-heading) !important;
}

/* ==========================================================================
   6. APP SCREEN SHOWCASE — the device wall
   --------------------------------------------------------------------------
   Replaces the Swiper carousel that used to hold these screens. See
   resources/views/web/components/app-showcase.blade.php for why.

   The track carries the uploaded set twice and travels exactly -50%, so the
   copy lands under the original and the loop has no seam. Duration comes from
   the template as --rp-marquee-duration, scaled to the number of screens, so
   the wall moves at the same speed whether there are four or fourteen.
   ========================================================================== */

/* `.swiper-wrapper { height: 100% }` in the Swiper stylesheet resolves against
   the container instead of collapsing, so a slider took a height proportional
   to the viewport rather than to its content. The showcase no longer uses
   Swiper, but the testimonial slider still does. */
.swiper .swiper-wrapper { height: auto; }

.rp-showcase-section {
    position: relative;
    /* `clip` rather than `hidden`: it contains the full-bleed strip below
       without turning the section into a scroll container. */
    overflow-x: clip;
}

.rp-showcase {
    position: relative;
    /* Full bleed out of .container — the wall reads as a band, not a widget. */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-block: 12px;
    overflow: hidden;
    /* Screens dissolve into the page at both ends instead of being cut off. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* A single violet bloom rising under the wall. The plate mark is deliberately
   absent here: the hero and the app band already carry it, and behind six
   detailed screenshots it read as clutter rather than as a watermark. */
.rp-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(42% 66% at 50% 112%, rgba(124, 107, 242, .15), rgba(124, 107, 242, 0) 72%);
    pointer-events: none;
}

.rp-showcase__track {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 28px;
    width: max-content;
    padding-inline: 14px;
    animation: rpShowcaseDrift var(--rp-marquee-duration, 36s) linear infinite;
    will-change: transform;
}

/* Pause on hover, while anything inside holds keyboard focus, and on the
   explicit control — WCAG 2.2.2 wants motion this long to be stoppable.
   `data-rp-offscreen` is the script parking it when the band scrolls away. */
.rp-showcase:hover .rp-showcase__track,
.rp-showcase:focus-within .rp-showcase__track,
.rp-showcase[data-rp-paused] .rp-showcase__track,
.rp-showcase[data-rp-offscreen] .rp-showcase__track { animation-play-state: paused; }

@keyframes rpShowcaseDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.rp-showcase__item {
    flex: 0 0 auto;
    transition: transform var(--rp-ease), filter var(--rp-ease);
}
.rp-showcase__item img {
    display: block;
    width: auto;
    height: 460px;
    max-width: none;
    object-fit: contain;
    filter: drop-shadow(0 22px 44px rgba(27, 24, 60, .18));
}
/* Individual screens still respond to the pointer while the wall is held. */
.rp-showcase__item:hover {
    transform: translateY(-10px);
    filter: drop-shadow(0 10px 26px rgba(106, 87, 232, .26));
}

/* Pause control — a plate, like every other round control on the page. */
.rp-showcase__toggle {
    position: absolute;
    z-index: 2;
    /* Parked in the right-hand fade, where the wall has already dissolved —
       the control stays reachable without covering a screen. */
    right: 22px;
    bottom: 18px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--rp-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--rp-muted);
    box-shadow: var(--rp-shadow-sm);
    cursor: pointer;
    transition: background var(--rp-ease), color var(--rp-ease), border-color var(--rp-ease), transform var(--rp-ease);
}
.rp-showcase__toggle:hover {
    background: var(--rp-accent-600);
    border-color: var(--rp-accent-600);
    color: #fff;
    transform: scale(1.06);
}
/* One icon at a time: pause while it runs, play once it is stopped. */
.rp-showcase__toggle .rp-showcase__icon-play { display: none; }
.rp-showcase__toggle[aria-pressed="true"] .rp-showcase__icon-pause { display: none; }
.rp-showcase__toggle[aria-pressed="true"] .rp-showcase__icon-play { display: block; }

@media (max-width: 991px) {
    .rp-showcase__item img { height: 360px; }
    .rp-showcase__track { gap: 20px; }
}
@media (max-width: 575px) {
    .rp-showcase__item img { height: 300px; }
    .rp-showcase__toggle { right: 16px; bottom: 10px; }
}

/* With motion off the wall stops being a wall: the echo copy goes, and what is
   left is a plain row the reader scrolls at their own pace. */
@media (prefers-reduced-motion: reduce) {
    .rp-showcase {
        overflow-x: auto;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .rp-showcase__track { animation: none; scroll-snap-type: x proximity; }
    .rp-showcase__item { scroll-snap-align: center; }
    .rp-showcase__item--echo { display: none; }
    .rp-showcase__toggle { display: none; }
}

/* ==========================================================================
   7. GET-APP BAND — the brand ink plate
   ========================================================================== */

.get-app-container {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(58% 78% at 88% -14%, rgba(124, 107, 242, .38), rgba(124, 107, 242, 0) 62%),
        linear-gradient(140deg, var(--rp-ink) 0%, var(--rp-ink-raised) 100%);
    border-radius: var(--rp-radius-lg);
    padding: 60px 24px;
    margin: 0 auto;
    max-width: 1140px;
}
/* The mark, bleeding off the left edge — same watermark as the hero, mirrored. */
.get-app-container::before {
    content: "";
    position: absolute;
    left: -80px;
    bottom: -110px;
    width: 340px;
    height: 340px;
    background: var(--rp-plates) center / contain no-repeat;
    opacity: .10;
    pointer-events: none;
}
.get-app-container .container { position: relative; z-index: 1; }
.get-app-container h2 {
    color: var(--rp-on-ink);
    font-weight: 700;
    letter-spacing: -0.028em;
}
.get-app-container p {
    color: var(--rp-on-ink-muted);
    font-size: 17px;
    line-height: 1.7;
}
.get-app-container .google-app-store {
    gap: 16px;
    margin-top: 28px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.get-app-container .google-app-store a { border-radius: var(--rp-radius-sm); }
/* The badges are operator uploads, so their pixel size is not ours to trust —
   pinning the height keeps the two of them matched and the band steady. */
.get-app-container .google-app-store img {
    height: 48px;
    width: auto;
    transition: transform var(--rp-ease);
}
.get-app-container .google-app-store a:hover img { transform: translateY(-3px); }

/* ==========================================================================
   8. WATCH DEMO
   ========================================================================== */

.watch-demo-section .video-wrapper img {
    border-radius: var(--rp-radius);
    box-shadow: var(--rp-shadow-lg);
}
.watch-demo-section .play-btn { background: var(--rp-accent-600) !important; }

/* ==========================================================================
   9. PRICING
   ========================================================================== */

.pricing-plan-section { background: var(--rp-surface-2); }
.pricing-plan-section .plans-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    align-items: stretch;
    width: 100%;
}
.pricing-plan-section .plans-card > div { margin-top: 0 !important; height: 100%; }
.pricing-plan-section .card {
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-radius);
    background: #fff;
    box-shadow: var(--rp-shadow-sm);
    padding: 8px 6px 20px;
    height: 100%;
    transition: transform var(--rp-ease), box-shadow var(--rp-ease), border-color var(--rp-ease);
}
.pricing-plan-section .card:hover {
    transform: translateY(-6px);
    box-shadow: var(--rp-shadow-lg);
    border-color: var(--rp-accent-300);
}
.pricing-plan-section .pricing-top-card { gap: 14px; padding: 22px 22px 8px; }
.pricing-plan-section .pricing-top-card img { width: 48px; height: 48px; }
.pricing-plan-section .pricing-top-card p { color: var(--rp-muted); font-weight: 600; }
.pricing-plan-section .pricing-top-card h4 {
    color: var(--rp-heading);
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -0.03em;
    /* Prices sit in a row across cards — lining figures stop them dancing. */
    font-variant-numeric: tabular-nums;
}
.pricing-plan-section .price-span { color: var(--rp-muted); font-weight: 500; font-size: 14px; }

/* The yearly tier quotes a monthly figure; this is the amount actually charged,
   set under it so the card never shows a price the customer will not see. */
.pricing-plan-section .plan-billing-note {
    margin: 2px 0 0;
    color: var(--rp-muted);
    font-size: 12.5px;
    font-weight: 500;
}
.pricing-plan-section .card-body ul li { color: var(--rp-body); padding: 7px 0; font-size: 15px; }
.pricing-plan-section .subscribe-plan { width: 100%; text-align: center; }

/* ==========================================================================
   10. FAQ
   ========================================================================== */

.faq-main-container { background: #fff; }
.faq-section-container {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 40px;
    align-items: start;
}
.faq-get-in-content {
    background: var(--rp-accent-50);
    border: 1px solid var(--rp-accent-200);
    border-radius: var(--rp-radius);
    padding: 32px;
}
.faq-get-in-content h4 { color: var(--rp-heading); font-weight: 700; letter-spacing: -0.02em; }
.faq-get-in-content p { color: var(--rp-muted); line-height: 1.7; }

.custom-accordion-item {
    background: #fff;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-radius);
    margin-bottom: 14px;
    padding: 4px 6px;
    transition: box-shadow var(--rp-ease), border-color var(--rp-ease);
}
.custom-accordion-item:hover { box-shadow: var(--rp-shadow-md); }
.custom-accordion-item.active {
    border-color: var(--rp-accent-300);
    box-shadow: var(--rp-shadow-md);
}
.custom-accordion-header {
    font-weight: 600;
    color: var(--rp-heading);
    font-size: 16px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.custom-accordion-item.active .custom-accordion-header { color: var(--rp-accent-700); }
.custom-accordion-content { color: var(--rp-muted); padding: 0 18px 16px; line-height: 1.7; }

/* The plus/minus are data-URI SVGs with the stroke colour baked in — the base theme's
   orange on the open row, flat grey on the closed ones — so recolouring means
   re-emitting both. Closed sits at the muted neutral, open goes violet. */
.custom-accordion-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='26' viewBox='0 0 24 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 10V18M8 14H16M22 14C22 19.5228 17.5228 24 12 24C6.47715 24 2 19.5228 2 14C2 8.47715 6.47715 4 12 4C17.5228 4 22 8.47715 22 14Z' stroke='%23696D82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
.custom-accordion-item.active .custom-accordion-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='26' viewBox='0 0 24 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 14H16M22 14C22 19.5228 17.5228 24 12 24C6.47715 24 2 19.5228 2 14C2 8.47715 6.47715 4 12 4C17.5228 4 22 8.47715 22 14Z' stroke='%236A57E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   11. TESTIMONIALS
   ========================================================================== */

.customer-section { background: var(--rp-surface-2); }
.customer-section .customer-card {
    background: #fff;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-radius);
    box-shadow: var(--rp-shadow-sm);
    padding: 28px;
    margin: 12px;
    transition: transform var(--rp-ease), box-shadow var(--rp-ease);
}
.customer-section .customer-card:hover { transform: translateY(-4px); box-shadow: var(--rp-shadow-lg); }
.customer-section .customer-card p { color: var(--rp-body); font-size: 16px; line-height: 1.7; }
.customer-section .customer-card h5 { color: var(--rp-heading); font-weight: 600; font-size: 16px; }
.customer-section .customer-card small { color: var(--rp-muted); }
.customer-section .customer-card .profile-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rp-accent-200);
}
/* Ratings stay amber. Violet stars would read as decoration, not as a score,
   and the star shape already carries the meaning without relying on colour. */
.customer-section .customer-card .fa-star.text-warning { color: #e0a32e !important; }
.customer-section .customer-card .fa-star.text-muted { color: var(--rp-line) !important; }

/* ==========================================================================
   12. BLOG TEASER
   ========================================================================== */

.blogs-section .section-title h2 { text-align: left; }

/* ==========================================================================
   13. FORMS & MODALS
   ========================================================================== */

.modal-content {
    border: none;
    border-radius: var(--rp-radius-lg);
    box-shadow: var(--rp-shadow-lg);
    overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--rp-line); padding: 20px 24px; }
.modal-title { color: var(--rp-heading); font-weight: 700; letter-spacing: -0.02em; }
.modal-title span { color: var(--rp-accent-700); }
/* Scrim strong enough to isolate the dialog from the page behind it. */
.modal-backdrop.show { opacity: .55; background: #0d0b16; }

.custom-top-label {
    color: var(--rp-heading);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    display: inline-block;
}
.personal-info .form-control,
.modal-body .form-control,
.modal-body .form-selected {
    border-radius: var(--rp-radius-sm) !important;
    border: 1px solid var(--rp-line) !important;
    padding: 11px 14px !important;
    color: var(--rp-heading);
    transition: border-color var(--rp-ease), box-shadow var(--rp-ease);
}
.personal-info .form-control::placeholder,
.modal-body .form-control::placeholder { color: var(--rp-muted); }
.personal-info .form-control:focus,
.modal-body .form-control:focus,
.modal-body .form-selected:focus {
    border-color: var(--rp-accent-500) !important;
    box-shadow: 0 0 0 3px rgba(124, 107, 242, .18) !important;
    outline: none;
}
.pin-input.otp-input {
    border-radius: var(--rp-radius-sm);
    border: 1px solid var(--rp-line);
    font-variant-numeric: tabular-nums;
    transition: border-color var(--rp-ease), box-shadow var(--rp-ease);
}
.pin-input.otp-input:focus {
    border-color: var(--rp-accent-500);
    box-shadow: 0 0 0 3px rgba(124, 107, 242, .18);
    outline: none;
}

/* ==========================================================================
   14. FOOTER — a slim ink bar closing the page
   --------------------------------------------------------------------------
   Two lines: the lockup and one row of links, then copyright, legal links and
   socials. It has its own class rather than the base theme's .footer-section,
   whose rules in styles.css and responsive.css fade the text, pin widths and
   drop links to 11px at some breakpoints.

   The lockup is the light-ink one (variant="dark"), so the ground stays ink.
   ========================================================================== */

.site-footer {
    position: relative;
    background: var(--rp-ink);
    color: var(--rp-on-ink-muted);
    padding: 36px 0 22px;
    font-size: 14px;
}
/* Violet hairline across the top — the lit plate, stretched. */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(124, 107, 242, 0) 0%,
        var(--rp-accent-500) 30%,
        var(--rp-accent-300) 50%,
        var(--rp-accent-500) 70%,
        rgba(124, 107, 242, 0) 100%);
}

/* Single-class selectors throughout, so the socials' auto margin below is
   not outranked by a generic `.site-footer ul`. */
.site-footer__links,
.site-footer__legal,
.site-footer__socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.site-footer a { color: inherit; text-decoration: none; transition: color var(--rp-ease); }
.site-footer a:hover { color: var(--rp-on-ink); }

.site-footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 40px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--rp-ink-line);
}
.site-footer__brand { display: inline-flex; }
.site-footer__logo { height: 32px; width: auto; }

.site-footer__links { gap: 10px 28px; }
.site-footer__links a { color: var(--rp-on-ink); font-weight: 500; font-size: 15px; opacity: .86; }
.site-footer__links a:hover { opacity: 1; }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    padding-top: 18px;
}
.site-footer__copy { margin: 0; color: var(--rp-on-ink-muted); }
.site-footer__legal { gap: 6px 20px; }
.site-footer__socials { gap: 8px; margin-inline-start: auto; }

/* Social chips. CMS icons are arbitrary artwork, so they are forced
   monochrome to sit on the ink. */
.site-footer__socials a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(242, 240, 250, .06);
    border: 1px solid var(--rp-ink-line);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--rp-ease), border-color var(--rp-ease);
}
.site-footer__socials img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .78;
}
.site-footer__socials a:hover { background: var(--rp-accent-600); border-color: var(--rp-accent-600); }
.site-footer__socials a:hover img { opacity: 1; }

@media (max-width: 575.98px) {
    .site-footer { padding-top: 30px; }
    .site-footer__links { gap: 10px 20px; }
    .site-footer__socials { margin-inline-start: 0; width: 100%; }
}

/* ==========================================================================
   15. INNER PAGES (about / pricing / blog / contact / legal)
   ========================================================================== */

.header-section:not(.home-header) {
    background: transparent !important;
    border-bottom: 1px solid var(--rp-hairline) !important;
    box-shadow: 0 1px 0 rgba(27, 29, 42, .04);
}
.header-section:not(.home-header)::before { background: rgba(255, 255, 255, .9); }

/* The glass itself — see the note on .header-section.home-header above. */
.header-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
}
.header-section .nav-link.active { color: var(--rp-accent-700) !important; font-weight: 600; }

.login-btn-2 {
    background: var(--rp-accent-600) !important;
    color: #fff !important;
    border-radius: var(--rp-radius-pill) !important;
    padding: 10px 22px !important;
    font-weight: 600;
    box-shadow: var(--rp-shadow-accent);
    transition: transform var(--rp-ease), box-shadow var(--rp-ease), background var(--rp-ease);
}
.login-btn-2:hover {
    background: var(--rp-accent-700) !important;
    transform: translateY(-2px);
    box-shadow: var(--rp-shadow-accent-hi);
    color: #fff !important;
}
.login-btn-2 svg path { fill: #fff; }

/* Breadcrumb band */
.banner-bg {
    background: var(--rp-surface-2) !important;
    border-bottom: 1px solid var(--rp-line);
    padding: 22px 0 !important;
}
.banner-bg .custom-clr-dark { color: var(--rp-muted) !important; font-weight: 500; font-size: 14px; }
/* At the hairline colour this separator sat at 1.2:1 on the band — present in
   the markup, invisible on screen. It takes the muted text colour and steps
   back on weight instead. */
.banner-bg .font-monospace { color: var(--rp-muted); font-weight: 400; margin: 0 6px; }

/* About */
.about-section h6 .custom-clr-primary {
    color: var(--rp-accent-700);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 13px;
}
.about-section h2 {
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--rp-heading);
}
.about-section p { color: var(--rp-body); font-size: 17px; line-height: 1.75; }
.about-section .about-img { border-radius: var(--rp-radius); box-shadow: var(--rp-shadow-lg); width: 100%; }
.about-section ul li {
    position: relative;
    /* The violet tick replaces the native marker rather than joining it —
       otherwise each line carries a check and a bullet. */
    list-style: none;
    padding-left: 30px;
    margin: 10px 0;
    color: var(--rp-body);
    line-height: 1.6;
}
.about-section ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--rp-accent-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235844CE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
    box-shadow: inset 0 0 0 1px var(--rp-accent-200);
}

/* Contact */
.contact-section .contact-image img { border-radius: var(--rp-radius); box-shadow: var(--rp-shadow-lg); }
.contact-section .col-form-label { color: var(--rp-heading); font-weight: 600; font-size: 14px; }
.contact-section .text-orange { color: var(--rp-accent-700); }
.contact-section .form-control {
    border-radius: var(--rp-radius-sm) !important;
    border: 1px solid var(--rp-line) !important;
    padding: 12px 14px !important;
    transition: border-color var(--rp-ease), box-shadow var(--rp-ease);
}
.contact-section .form-control:focus {
    border-color: var(--rp-accent-500) !important;
    box-shadow: 0 0 0 3px rgba(124, 107, 242, .18) !important;
    outline: none;
}
.custom-message-btn { width: 100%; }

/* Blog cards */
.blog-shadow {
    background: #fff;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-radius) !important;
    box-shadow: var(--rp-shadow-sm);
    overflow: hidden;
    transition: transform var(--rp-ease), box-shadow var(--rp-ease), border-color var(--rp-ease);
    height: 100%;
}
.blog-shadow:hover {
    transform: translateY(-5px);
    box-shadow: var(--rp-shadow-lg);
    border-color: var(--rp-accent-300);
}
.blog-section .landing-blog-img { width: 100%; height: 200px; object-fit: cover; }
.blog-section .blog-sm-img { width: 92px; height: 92px; object-fit: cover; border-radius: var(--rp-radius-sm); }
.blog-shadow h6 { color: var(--rp-heading); font-weight: 600; letter-spacing: -0.015em; }
.blog-shadow p { color: var(--rp-muted); font-size: 14px; line-height: 1.6; }
.blog-shadow .custom-clr-primary { color: var(--rp-accent-700) !important; font-weight: 600; }

.tags-btns .tags-btn {
    border-radius: var(--rp-radius-pill) !important;
    background: var(--rp-surface-2) !important;
    color: var(--rp-body) !important;
    border: 1px solid var(--rp-line) !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    transition: background var(--rp-ease), color var(--rp-ease), border-color var(--rp-ease);
}
.tags-btns .tags-btn:hover {
    background: var(--rp-accent-600) !important;
    color: #fff !important;
    border-color: var(--rp-accent-600) !important;
}

/* Legal / long-form */
.terms-policy-section { font-size: 16px; line-height: 1.85; color: var(--rp-body); }
.terms-policy-section .container { max-width: 860px; }
.terms-policy-section h2 {
    color: var(--rp-heading);
    font-weight: 800;
    font-size: clamp(26px, 3vw, 36px);
    letter-spacing: -0.03em;
    margin-bottom: 18px;
}
.terms-policy-section p { color: var(--rp-body); margin-bottom: 18px; }

/* The terms and privacy bodies are CMS-authored HTML: headed sections, lists
   and inline links. Everything below styles what those pages can contain. */
.legal-content h3 {
    color: var(--rp-heading);
    font-weight: 700;
    font-size: clamp(18px, 1.6vw, 21px);
    letter-spacing: -0.015em;
    margin: 40px 0 12px;
}
.legal-content h3:first-child { margin-top: 0; }
.legal-content ul {
    margin: 0 0 18px;
    padding-left: 22px;
    list-style: disc;
}
/* styles.css sizes and strips every li on the site; editor lists read as
   part of the text, at its size and with their markers. */
.legal-content p,
.legal-content li {
    font-size: 16px;
    line-height: 1.75;
    color: var(--rp-body);
}
.legal-content li { margin-bottom: 8px; }
.legal-content ul > li { list-style: disc; }
.legal-content ol > li { list-style: decimal; }
.legal-content li::marker { color: var(--rp-accent-500); }
.legal-content strong { color: var(--rp-heading); font-weight: 650; }
.legal-content a {
    color: var(--rp-accent-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal-content a:hover { color: var(--rp-accent-700); }

/* Editor headings: the page title is the only h2 the layout sets, so an h2
   typed into the body reads as a section head, like h3. */
.legal-content h2 {
    color: var(--rp-heading);
    font-weight: 700;
    font-size: clamp(20px, 1.8vw, 24px);
    letter-spacing: -0.02em;
    margin: 44px 0 12px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h4 {
    color: var(--rp-heading);
    font-weight: 650;
    font-size: 17px;
    margin: 28px 0 8px;
}
.legal-content ol { margin: 0 0 18px; padding-left: 22px; }
.legal-content blockquote {
    margin: 0 0 18px;
    padding: 12px 18px;
    border-left: 3px solid var(--rp-accent-300);
    background: var(--rp-surface-2);
    border-radius: 0 var(--rp-radius-sm) var(--rp-radius-sm) 0;
}
.legal-content table { width: 100%; margin: 0 0 18px; border-collapse: collapse; }
.legal-content th,
.legal-content td { border: 1px solid var(--rp-line); padding: 8px 12px; vertical-align: top; }

/* Summary under a standard page's title, and its optional image. */
.terms-policy-section .page-lead { font-size: 18px; color: var(--rp-muted); margin-bottom: 28px; }
.terms-policy-section .page-hero-img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--rp-radius);
    margin-bottom: 32px;
}

/* About: the lead beside the image, then the editor body at reading width. */
.about-section .about-lead { font-size: 19px; line-height: 1.7; color: var(--rp-body); }
.about-section .about-body { max-width: 860px; font-size: 17px; line-height: 1.8; }
.about-section .about-body ul { padding-left: 0; }
/* About keeps its violet ticks instead of the legal pages' bullets. */
.about-section .about-body ul > li { list-style: none; }
.about-section .about-body p,
.about-section .about-body li { font-size: 17px; }

/* Dateline under a legal page's title. */
.terms-policy-section .legal-updated,
.legal-content .legal-updated {
    color: var(--rp-muted);
    font-size: 14px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rp-line);
}

/* ==========================================================================
   16. MOTION
   ========================================================================== */

a, button, .card, .service-card, .customer-card {
    transition: color var(--rp-ease), background var(--rp-ease), transform var(--rp-ease), box-shadow var(--rp-ease);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    /* AOS reveals leave elements at opacity 0 until their animation runs; with
       motion off they must simply be present. */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */

@media (max-width: 991px) {
    section { padding: 60px 0; }
    .faq-section-container { grid-template-columns: 1fr; gap: 24px; }
    .home-banner-section { padding: 104px 0 64px; text-align: center; }
    .home-banner-section .banner-content p { margin-inline: auto; }
    .home-banner-section .banner-content .demo-btn-group { justify-content: center; }
    .home-banner-section::after { width: 300px; height: 300px; opacity: .045; }
    .get-app-container::before { opacity: .07; }

    /* The base sheet hides the hero artwork below 992px
       (`.banner-img.text-center img { display: none }`), which drops the
       product shot for every phone visitor — the one image on the page that
       shows what is being sold. It comes back, sized for the column. */
    .home-banner-section .banner-img {
        display: block;
        max-width: 420px !important;
        height: auto !important;
        margin: 0 auto 34px !important;
    }
    .banner-img.text-center img { display: block; }
    .home-banner-section .banner-img img:not(.hero-bg-shape) {
        width: 100% !important;
        height: auto !important;
    }
    /* The decorative backdrop shape is positioned for the desktop composition
       and only adds noise once the column is this narrow. */
    .home-banner-section .banner-img .hero-bg-shape { display: none !important; }

    /* The menu button was drawn white for the theme's dark mobile header. The
       header is white now, so the icon has to be ink — and it gets a full
       44px target while we are here. */
    .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .navbar-toggler i { color: var(--rp-heading) !important; font-size: 24px; }

    /* Wrapping beats an ellipsis: the base sheet clips these labels to one
       line, so "Order Management" arrived as "Order Manag…". */
    .service-section .service-content h6 {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

@media (max-width: 575px) {
    .section-title h2 { font-size: 28px; }
    /* Keep the hero's two actions on one row: "Watch Video" was breaking
       across two lines beside the play button. */
    .home-banner-section .demo-btn-group { gap: 14px !important; }
    .hero-watch { white-space: nowrap; font-size: 15px; }
    .get-app-container { padding: 44px 20px; border-radius: var(--rp-radius); }
    .custom-primary-btn,
    .subscribe-plan,
    .submit-btn { width: 100%; justify-content: center; }
    /* Touch targets stay at or above 44px once the buttons go full width. */
    .custom-primary-btn,
    .subscribe-plan,
    .submit-btn,
    .login-btn-2,
    .get-app-btn { min-height: 46px; align-items: center; }
    .footer-section .social-link li a { width: 46px; height: 46px; }
}