/* /app-development only (body.theme-apps): one dark purple background from the hero to the footer (Max, 4 Nov 2026).
   The gradient is the Inside the Full App band's colours, run left→right on <main> so it never seams between sections.
   Sections go transparent; brightness comes from white cards and panels inside them. */

.theme-apps main.svx{position:relative;isolation:isolate;background:linear-gradient(90deg,#170b2e 0%,#25104f 45%,#3f1a80 100%)}
/* soft glows that fade out inside each section, so there are no bands */
.theme-apps main.svx>section{position:relative;background:transparent!important;border-top:0!important}
.theme-apps main.svx>section::after{content:"";position:absolute;z-index:-1;inset:8% 10%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(167,139,250,.13),transparent 100%)}
.theme-apps main.svx>.adh::after,.theme-apps main.svx>.sc-section::after{display:none}
.theme-apps .adh,.theme-apps .adh.adh--still{background:transparent!important}
.theme-apps .adh .aur--dark{background:transparent!important}
.theme-apps .adh .aur--dark::after{display:none}
.theme-apps .adh::before,.theme-apps .adh::after{background:none!important}

/* recent work: list in a white panel */
.theme-apps .wl-kicker{color:#c4b5fd}
.ap-inner-page.theme-apps main .wl-title{color:#fff}
.ap-inner-page.theme-apps main .wl-title em{color:#c4b5fd;-webkit-text-fill-color:#c4b5fd;background:none}
.theme-apps .wl-lead{color:#d6ccea}
.theme-apps .wl-list{background:#fff;border-radius:28px;padding:8px 34px;box-shadow:0 40px 90px -50px rgba(6,2,16,.7)}
.theme-apps .wl-row:first-child{border-top:0}
.theme-apps .wl-row:hover .wl-link,.theme-apps .wl-link:focus-visible{background:#f8f5fd}

/* stack: keep the diagram, lose its own band */
.theme-apps .sh-section{background:transparent!important}

/* inside the full app: no own band or top line */
.theme-apps .sc-section{background:transparent;border-top:0}
.theme-apps .sc-section::before{display:none}

/* pricing: light heading on purple, white cards */
.theme-apps .pr-section{background:transparent!important}
.theme-apps .pr-head .pr-kicker{color:#c4b5fd}
.ap-inner-page.theme-apps main .pr-head .pr-title{color:#fff}
.theme-apps .pr-head .pr-title em{background-image:linear-gradient(110deg,#e9d5ff,#c4b5fd 50%,#f0abfc)}
.theme-apps .pr-sub{color:#d6ccea}
.theme-apps .pr-card{border-color:transparent;box-shadow:0 40px 90px -50px rgba(6,2,16,.75)}
.theme-apps .pr-section a:not(.pr-cta):not([class*=btn]){color:#e9d5ff}
.theme-apps .pr-section .pr-card a:not(.pr-cta):not([class*=btn]){color:#6d28d9}

/* compare: Appro column white, the usual route a translucent panel */
.theme-apps .cp-col--us{background:#fff;color:#1b1235;box-shadow:0 40px 90px -50px rgba(6,2,16,.75)}
.theme-apps .cp-col--us .cp-tag{background:#f1ecfa;color:#6d28d9}
.theme-apps .cp-col--us>p{color:#6b6280}
.theme-apps .cp-col--us .cp-cta{color:#fff;background:#6d28d9}
.theme-apps .cp-col--them{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}

/* FAQ: light heading, each question a white box */
.theme-apps .svx-faq{padding:110px 0}
.theme-apps .svx-faq .svx-kicker{color:#c4b5fd}
.ap-inner-page.theme-apps main .svx-faq .svx-h2{color:#fff}
.ap-inner-page.theme-apps main .svx-faq .svx-h2 em{color:#c4b5fd;-webkit-text-fill-color:#c4b5fd;background:none}
.theme-apps .svx-faq-list{border-top:0;display:grid;gap:10px}
.theme-apps .svx-faq-list details{background:#fff;border:0;border-radius:18px;padding:20px 24px;box-shadow:0 24px 50px -36px rgba(6,2,16,.7)}
.theme-apps .svx-faq-list summary{color:#1b1235}
.theme-apps .svx-faq-list p{color:#5d526e}
.theme-apps .svx-faq-list p a{color:#6d28d9}
.theme-apps .svx-faq .faq-more-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}

/* app guides: light heading, each guide a white card */
.theme-apps .gd-section{--gd-ink:#fff;--gd-mute:#d6ccea;--gd-accent:#c4b5fd;--gd-line:rgba(255,255,255,.18);background:transparent;border-top:0}
.theme-apps .gd-card{background:#fff;border-radius:26px;padding:10px 10px 22px;box-shadow:0 40px 90px -50px rgba(6,2,16,.75)}
.theme-apps .gd-card .gd-media{border-radius:18px}
.theme-apps .gd-card .gd-excerpt{margin:16px 12px 0;color:#5d526e}
.theme-apps .gd-card .gd-link{margin:14px 12px 0;color:#1b1235}
.theme-apps .gd-card .gd-link span{color:#6d28d9}
.theme-apps .gd-card .gd-link::after{border-radius:26px}

/* booking box: back on the purple, white card stands out */
.theme-apps .svx-enquiry{background:#fff!important;padding:110px 0 120px}
.theme-apps .svx-enquiry .svx-enquiry-inner{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 110px -50px rgba(6,2,16,.85)}

@media (max-width:860px){
  .theme-apps .wl-list{padding:4px 18px;border-radius:22px}
  .theme-apps .svx-faq{padding:72px 0}
  .theme-apps .svx-faq-list details{padding:16px 18px}
  .theme-apps .svx-enquiry{padding:72px 0 72px}
}
.theme-apps .pr-help{color:#d6ccea}
.theme-apps .pr-help a{color:#fff}

/* White bands to break up the purple (Max, 4 Nov 2026): toolkit, pricing and FAQ sit on white with dark text */
.theme-apps main.svx>section.sh-section{background:#fff!important}
.theme-apps main.svx>section.sh-section::after{display:none}
.theme-apps .sh-section.sh-section--lilac{--sh-bg:#fff;padding:96px 0}

/* Appro wordmark at the top of the "with Appro" comparison card (Max, 4 Nov 2026) */
.cp-brand{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.cp-brand .cp-tag{margin:0}
.cp-logo{display:block;height:34px;width:auto;flex:none}
@media (max-width:640px){.cp-logo{height:28px}.cp-brand{margin-bottom:18px}}
@media (min-width:861px){.cp-col--them h3{padding-top:14px}}


/* 4 Nov (late): pricing (white) · estimator (purple) · FAQ (white) · guides (purple) · booking box (white) */
.theme-apps main.svx>section.svx-faq,.theme-apps main.svx>section.svx-enquiry{background:#fff!important}
.theme-apps main.svx>section.svx-faq::after,.theme-apps main.svx>section.svx-enquiry::after{display:none}
.theme-apps .svx-faq .svx-kicker{color:#6d28d9}
.ap-inner-page.theme-apps main .svx-faq .svx-h2{color:#0e0a17}
.ap-inner-page.theme-apps main .svx-faq .svx-h2 em{color:#6d28d9;-webkit-text-fill-color:#6d28d9}
.theme-apps .svx-faq-list details{background:#f7f3fd;box-shadow:none}
.theme-apps .svx-faq .faq-more-btn{background:#fff;border-color:#e4dcf2;color:#1b1235}
.theme-apps .svx-enquiry .svx-enquiry-inner{box-shadow:0 0 0 1px rgba(76,29,149,.08),0 50px 100px -50px rgba(59,26,98,.45)}

.theme-apps .pr-helper{background:rgba(255,255,255,.1);color:#e9e2fb;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.theme-apps .pr-helper b,.theme-apps .pr-helper-arr{color:#fff}