/* Aura skin: light pages tinted with the page's own theme colour, soft glass cards and colour blooms.
   Main colour --pa, second --pb, plus two related "content" colours per theme (--px, --py). */
body:has(.skin-aura) {
    --px: #14b8a6; --py: #f59e0b;
    --au-bg: color-mix(in srgb, var(--pa) 6%, #fbfbfd); --au-bg2: color-mix(in srgb, var(--pa) 11%, #fff);
    --au-ink: color-mix(in srgb, var(--pd) 92%, var(--pa)); --au-mute: color-mix(in srgb, var(--pd) 58%, #fff);
    --au-line: color-mix(in srgb, var(--pa) 16%, rgba(0,0,0,.06)); --au-text-a: color-mix(in srgb, var(--pa) 78%, #000);
    --au-head: "Sora", system-ui, sans-serif; --au-body: "Inter", system-ui, sans-serif; --au-ease: cubic-bezier(.22, 1, .36, 1);
    --sk-band: color-mix(in srgb, var(--pa) 14%, #fff); --sk-accent: var(--pa); --sk-display: "Sora", sans-serif;
    background: var(--au-bg);
}
/* Related content colours per theme */
body:has(.skin-aura.theme-headx) { --px: #14b8a6; --py: #f59e0b; }   /* monitoring: secure teal, alert amber */
body:has(.skin-aura.theme-ride) { --px: #2563eb; --py: #16a34a; --au-text-a: #a16207; }   /* taxi: route blue, go green */
body:has(.skin-aura.theme-studio) { --px: #3b82f6; --py: #8b5cf6; }  /* web: code blue, design violet */
body:has(.skin-aura.theme-fit) { --px: #f97316; --py: #22c55e; }     /* fitness: energy orange, progress green */

body:has(.skin-aura) main { color: var(--au-ink); font-family: var(--au-body); background:
    radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--pb) 10%, transparent), transparent 70%),
    radial-gradient(800px 500px at 0% 40%, color-mix(in srgb, var(--px) 8%, transparent), transparent 70%), var(--au-bg); }
body:has(.skin-aura) main .sv-wrap, body:has(.skin-aura) main section:not(.pp-hero) { background: transparent !important; }
body:has(.skin-aura) main .sv-sec { position: relative; padding-block: clamp(40px, 5vw, 72px) !important; }
body:has(.skin-aura) main :is(h1, h2, h3, h4, .sv-title) { font-family: var(--au-head); color: var(--au-ink); letter-spacing: -.025em; }
body:has(.skin-aura) main :is(p, li, dd, .sv-intro) { color: var(--au-mute); }
body:has(.skin-aura) main .sv-title { font-weight: 700; font-size: clamp(1.6rem, 2.8vw, 2.25rem) !important; line-height: 1.12; text-align: center; max-width: 28ch; margin-inline: auto; }
body:has(.skin-aura) main .sv-intro { text-align: center; max-width: 60ch; margin: 10px auto 0; background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }

/* Numbered section chip with a status dot */
body:has(.skin-aura) main { counter-reset: au; }
body:has(.skin-aura) main .sv-sec .sv-title::before { counter-increment: au; content: counter(au, decimal-leading-zero); display: table; margin: 0 auto 12px; padding: 5px 12px 5px 26px; border-radius: 999px; border: 1px solid var(--au-line); background: #fff radial-gradient(circle at 13px 50%, var(--pa) 3px, transparent 4px); font: 600 .7rem/1.2 var(--au-body); letter-spacing: .14em; color: var(--au-text-a); box-shadow: 0 2px 8px -4px color-mix(in srgb, var(--pa) 40%, transparent); }
body:has(.skin-aura) main :is(.pp-tracker-sec, .pp-numlist-sec) .sv-title::before { margin-left: 0; }
body:has(.skin-aura) main .pp-eyebrow { display: inline-block; color: var(--au-text-a) !important; background: color-mix(in srgb, var(--pa) 12%, #fff) !important; border: 1px solid color-mix(in srgb, var(--pa) 28%, transparent); border-radius: 999px; padding: 6px 13px; font: 600 .72rem/1.2 var(--au-body); letter-spacing: .1em; text-transform: uppercase; }

/* Section rhythm: alternate sections sit on a tinted band, thin gradient divider */
body:has(.skin-aura) main > .sv-wrap:nth-of-type(even) > section:not(.pp-hero) { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pa) 5%, transparent) 30%, color-mix(in srgb, var(--pa) 5%, transparent) 70%, transparent) !important; }
body:has(.skin-aura) main > .sv-wrap + .sv-wrap > section::after { content: ""; position: absolute; top: 0; left: 50%; width: min(720px, 70%); height: 1px; translate: -50% 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pa) 40%, transparent), color-mix(in srgb, var(--px) 40%, transparent), transparent); }

/* Hero: light with drifting colour blooms in the theme + related colours */
.pp-hero.skin-aura { position: relative; overflow: hidden; color: var(--au-ink); padding-block: clamp(44px, 6vw, 76px) !important; background:
    radial-gradient(at 12% 18%, color-mix(in srgb, var(--pa) 22%, transparent) 0, transparent 42%),
    radial-gradient(at 88% 10%, color-mix(in srgb, var(--px) 18%, transparent) 0, transparent 40%),
    radial-gradient(at 75% 90%, color-mix(in srgb, var(--py) 14%, transparent) 0, transparent 45%),
    color-mix(in srgb, var(--pa) 5%, #fff) !important; background-size: 150% 150% !important; animation: auDrift 22s ease-in-out infinite; }
.pp-hero.skin-aura::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--pa) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--pa) 9%, transparent) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 30% 30%, #000 10%, transparent 70%); }
.pp-hero.skin-aura > .wrap { position: relative; }
@keyframes auDrift { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 50%; } }
.skin-aura h1 { font: 800 clamp(2rem, 3.8vw, 3.1rem)/1.08 var(--au-head) !important; letter-spacing: -.035em; color: var(--au-ink) !important; }
.skin-aura h1::after { background: linear-gradient(90deg, var(--pa), var(--px)) !important; }
.skin-aura .pp-lead { color: var(--au-mute) !important; font-size: 1.02rem !important; }
.skin-aura .pp-stats { gap: 10px !important; border: 0 !important; }
.skin-aura .pp-stats li { background: rgba(255,255,255,.75) !important; border: 1px solid var(--au-line) !important; border-radius: 14px; padding: 10px 14px !important; backdrop-filter: blur(8px); }
.skin-aura .pp-stats li:nth-child(2) strong { color: color-mix(in srgb, var(--px) 80%, #000) !important; }
.skin-aura .pp-stats li:nth-child(3) strong { color: color-mix(in srgb, var(--py) 80%, #000) !important; }
.skin-aura .pp-stats strong { font: 700 1.4rem/1.1 var(--au-head) !important; color: var(--au-text-a) !important; }
.skin-aura .pp-stats span { color: var(--au-mute) !important; }
.skin-aura :is(.pp-trust li) { background: #fff !important; border: 1px solid var(--au-line) !important; color: var(--au-ink) !important; }
/* Taxi map: dark streets become light roads */
.pp-hero.skin-aura.lay-map svg g[stroke] { stroke: color-mix(in srgb, var(--pd) 8%, transparent) !important; }
.pp-hero.skin-aura.lay-map .pp-hero-copy { background: rgba(255,255,255,.7); backdrop-filter: blur(10px); border: 1px solid var(--au-line); border-radius: 24px; padding: 28px; }
/* Estimate form in the custom web hero */
.skin-aura .pp-estimate { background: rgba(255,255,255,.9) !important; border: 1px solid var(--au-line) !important; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--pa) 45%, transparent) !important; backdrop-filter: blur(12px); }
.skin-aura .pp-estimate :is(h2, label, b) { color: var(--au-ink) !important; }

/* Buttons */
body:has(.skin-aura) main :is(.pp-btn, .sv-btn) { background: linear-gradient(135deg, var(--pa), color-mix(in srgb, var(--pa) 70%, var(--px))) !important; color: var(--pi) !important; border: 0; border-radius: 999px; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--pa) 70%, transparent); font-weight: 600; transition: transform .15s var(--au-ease), box-shadow .3s; }
body:has(.skin-aura) main :is(.pp-btn, .sv-btn):hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--pa) 80%, transparent); }
body:has(.skin-aura) main :is(.pp-btn, .sv-btn):active { transform: scale(.98); }
body:has(.skin-aura) main :is(.pp-btn-ghost, .pp-btn-line) { color: var(--au-ink) !important; background: rgba(255,255,255,.8) !important; border: 1px solid var(--au-line) !important; border-radius: 999px; }
body:has(.skin-aura) main :is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid color-mix(in srgb, var(--pa) 70%, #000); outline-offset: 3px; }

/* Cards: white glass, colour edge on hover; icon tints rotate through the related colours */
body:has(.skin-aura) main :is(.pp-tile, .pp-opts li, .pp-numlist li, .pp-svc-card, .pp-plans > *, .pp-result, .pp-case, .pp-panel, .pp-roles-box, .pp-tracker, .pp-show, .sv-faq details, .sv-form, .pp-steps li, .pp-show-copy dl > div, .pp-result-metrics li) {
    position: relative; background: rgba(255,255,255,.82) !important; border: 1px solid var(--au-line) !important; border-radius: 20px; color: var(--au-ink);
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 36px -28px color-mix(in srgb, var(--pd) 40%, transparent) !important; backdrop-filter: blur(10px);
    transition: transform .4s var(--au-ease), box-shadow .4s var(--au-ease), border-color .3s !important;
}
body:has(.skin-aura) main :is(.pp-tile, .pp-opts li, .pp-numlist li, .pp-svc-card, .pp-plans > *, .pp-result, .pp-case) :is(h3, b, strong) { color: var(--au-ink) !important; }
body:has(.skin-aura) main :is(.pp-tile, .pp-opts li, .pp-numlist li, .pp-svc-card, .pp-plans > *, .pp-result, .pp-case)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: linear-gradient(135deg, var(--pa), var(--px), var(--py)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s; }
body:has(.skin-aura) main :is(.pp-tile, .pp-opts li, .pp-numlist li, .pp-svc-card, .pp-plans > *, .pp-result, .pp-case):hover { transform: translateY(-4px); box-shadow: 0 30px 50px -28px color-mix(in srgb, var(--pa) 55%, transparent) !important; }
body:has(.skin-aura) main :is(.pp-tile, .pp-opts li, .pp-numlist li, .pp-svc-card, .pp-plans > *, .pp-result, .pp-case):hover::before { opacity: 1; }
body:has(.skin-aura) main :is(.pp-tile-ic, .pp-svc-ic) { background: color-mix(in srgb, var(--pa) 13%, #fff) !important; border-radius: 12px; }
body:has(.skin-aura) main :is(.pp-tile, .pp-svc-card):nth-child(3n+2) :is(.pp-tile-ic, .pp-svc-ic) { background: color-mix(in srgb, var(--px) 15%, #fff) !important; }
body:has(.skin-aura) main :is(.pp-tile, .pp-svc-card):nth-child(3n) :is(.pp-tile-ic, .pp-svc-ic) { background: color-mix(in srgb, var(--py) 16%, #fff) !important; }
body:has(.skin-aura) main :is(.pp-opts li, .pp-tile, .pp-svc-card) img { filter: none !important; }
body:has(.skin-aura) main .pp-tile.size-big { background: radial-gradient(420px 300px at 100% 100%, color-mix(in srgb, var(--px) 18%, transparent), transparent 70%), linear-gradient(150deg, color-mix(in srgb, var(--pa) 14%, #fff), #fff) !important; }
body:has(.skin-aura) main .pp-fig { color: var(--au-text-a) !important; font-family: var(--au-head); }
body:has(.skin-aura) main .pp-svc-no { color: color-mix(in srgb, var(--pa) 16%, transparent) !important; -webkit-text-stroke: 0; }
body:has(.skin-aura) main :is(.pp-svc-tag, em) { background: color-mix(in srgb, var(--pa) 14%, #fff) !important; color: var(--au-text-a) !important; font-style: normal; border: 1px solid color-mix(in srgb, var(--pa) 25%, transparent); }
body:has(.skin-aura) main .pp-svc-card.popular, body:has(.skin-aura) .pp-plans > :has(em) { background: radial-gradient(320px 200px at 100% 0%, color-mix(in srgb, var(--pa) 16%, transparent), transparent 70%), #fff !important; }
body:has(.skin-aura) .pp-plans > :has(em)::before { opacity: 1; }
body:has(.skin-aura) main :is(.pp-checks, .pp-show-points) li::before { background-color: color-mix(in srgb, var(--pa) 18%, #fff) !important; color: var(--au-text-a) !important; }
body:has(.skin-aura) main :is(.pp-price, .pp-metrics strong) { color: var(--au-ink) !important; }

/* Tabs */
body:has(.skin-aura) :is(.pp-roles-tabs, .pp-show-tabs) { background: #fff; border: 1px solid var(--au-line); border-radius: 999px; padding: 5px; display: inline-flex; flex-wrap: wrap; gap: 4px; }
body:has(.skin-aura) :is(.pp-roles-tabs, .pp-show-tabs) button { background: transparent !important; color: var(--au-mute) !important; border: 0 !important; border-radius: 999px; }
body:has(.skin-aura) :is(.pp-roles-tabs, .pp-show-tabs) button:is([aria-selected="true"], [aria-pressed="true"], .is-active, .active) { background: var(--pa) !important; color: var(--pi) !important; }
body:has(.skin-aura) .pp-show-copy dt { color: var(--au-text-a) !important; }

/* Tracker and steps */
body:has(.skin-aura) .pp-tracker :is(b, strong) { color: var(--au-ink) !important; }
body:has(.skin-aura) .pp-tracker li { border-color: var(--au-line) !important; }
body:has(.skin-aura) .pp-tracker .is-current em, body:has(.skin-aura) .pp-tracker-head span { background: var(--pa) !important; color: var(--pi) !important; }
body:has(.skin-aura) .pp-steps span, body:has(.skin-aura) .pp-numlist li > span { background: linear-gradient(135deg, var(--pa), var(--px)) !important; color: #fff !important; -webkit-text-fill-color: #fff; border-radius: 999px; font: 700 .78rem/1 var(--au-body) !important; padding: 7px 10px; width: auto !important; height: auto !important; box-shadow: none !important; }
body:has(.skin-aura) .pp-steps::before { background: linear-gradient(90deg, var(--pa), var(--px), var(--py)) !important; opacity: .35; }

/* FAQ */
body:has(.skin-aura) .sv-faq details { margin-bottom: 10px; padding: 0 22px; }
body:has(.skin-aura) .sv-faq summary { color: var(--au-ink); font-weight: 600; padding: 18px 0; }
body:has(.skin-aura) .sv-faq details[open] { border-color: color-mix(in srgb, var(--pa) 40%, transparent) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--pa) 7%, #fff), #fff) !important; }

/* CTA: theme gradient panel */
body:has(.skin-aura) .pp-cta { position: relative; overflow: hidden; display: block; text-align: center; border-radius: 28px; padding: clamp(36px, 5vw, 60px) 24px !important; color: var(--pi);
    background: radial-gradient(at 15% 120%, color-mix(in srgb, var(--px) 60%, transparent), transparent 55%), radial-gradient(at 90% -20%, color-mix(in srgb, var(--py) 50%, transparent), transparent 50%), linear-gradient(135deg, var(--pa), color-mix(in srgb, var(--pa) 65%, var(--pd))) !important;
    background-size: 150% 150% !important; animation: auDrift 18s ease-in-out infinite; box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--pa) 70%, transparent); }
body:has(.skin-aura) .pp-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 75%); }
body:has(.skin-aura) .pp-cta > * { position: relative; z-index: 1; }
body:has(.skin-aura) .pp-cta :is(h2, p) { color: var(--pi) !important; margin-inline: auto; }
body:has(.skin-aura) .pp-cta h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem) !important; max-width: 20ch; }
body:has(.skin-aura) .pp-cta .pp-actions { justify-content: center; margin-top: 22px; }
body:has(.skin-aura) .pp-cta .pp-btn-inv { background: #fff !important; color: var(--pd) !important; border-radius: 999px; }
body:has(.skin-aura) .pp-cta .pp-btn-line { color: var(--pi) !important; background: transparent !important; border-color: color-mix(in srgb, var(--pi) 40%, transparent) !important; }

/* Contact */
body:has(.skin-aura) .sv-contact-big { color: var(--au-text-a) !important; font-family: var(--au-head); font-size: clamp(1.8rem, 3.4vw, 2.6rem) !important; }
body:has(.skin-aura) .sv-form :is(input, select, textarea) { background: #fff !important; border-color: var(--au-line) !important; border-radius: 12px; color: var(--au-ink) !important; }

/* Marquee: light band with coloured separators */
body:has(.skin-aura) .at-marquee { background: #fff !important; color: var(--au-ink) !important; border-block: 1px solid var(--au-line) !important; padding: 14px 0 !important; }
body:has(.skin-aura) .at-marquee span { font-size: clamp(1.1rem, 2vw, 1.5rem) !important; }
body:has(.skin-aura) .at-marquee span:nth-of-type(even) { color: var(--au-text-a) !important; }

/* Sizes kept moderate */
body:has(.skin-aura) main :is(.pp-tile h3, .pp-opts b, .pp-numlist h3, .pp-steps h3, .pp-svc-card h3, .pp-roles-copy h3, .pp-show-copy h3) { font-size: clamp(1.05rem, 1.5vw, 1.25rem) !important; line-height: 1.25 !important; }
body:has(.skin-aura) main :is(.pp-bento, .pp-opts, .pp-steps, .pp-show, .sv-faq, .pp-svc, .pp-plans) { margin-top: 28px !important; }

@media (prefers-reduced-motion: reduce) { .pp-hero.skin-aura, body:has(.skin-aura) .pp-cta { animation: none; } }

/* Product mock-ups keep a dark screen so their UI stays readable on the light page */
.skin-aura :is(.pp-dash, .pp-rings-card, .pp-rings) { background: linear-gradient(160deg, color-mix(in srgb, var(--pd) 92%, var(--pa)), var(--pd)) !important; color: #fff; box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--pa) 70%, transparent) !important; }

/* Sections authored as "dark" render light in this skin */
body:has(.skin-aura) main .style-dark :is(.sv-title, h2, h3, b, strong) { color: var(--au-ink) !important; -webkit-text-fill-color: currentColor; }
body:has(.skin-aura) main .style-dark :is(.sv-intro, p, span, li) { color: var(--au-mute) !important; }
body:has(.skin-aura) main .pp-fig { font-size: clamp(1.6rem, 2.6vw, 2.1rem) !important; line-height: 1.1; }

body:has(.skin-aura) main .pp-svc-no { font-size: clamp(2rem, 3.4vw, 2.8rem) !important; }

/* Photo hero: keep text light over the photograph */
.pp-hero.skin-aura.lay-photo { background: #111 !important; animation: none; color: #fff; }
.pp-hero.skin-aura.lay-photo::before { display: none; }
.pp-hero.skin-aura.lay-photo :is(h1, .pp-stats strong) { color: #fff !important; }
.pp-hero.skin-aura.lay-photo :is(.pp-lead, .pp-highlights li) { color: rgba(255,255,255,.88) !important; }
.pp-hero.skin-aura.lay-photo .pp-eyebrow { background: rgba(255,255,255,.14) !important; color: #fff !important; border-color: rgba(255,255,255,.3); }
.pp-hero.skin-aura.lay-photo .pp-btn-ghost { color: #fff !important; background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.35) !important; }
body:has(.skin-aura.theme-zest) { --px: #16a34a; --py: #e11d48; }   /* food: fresh green, chilli red */
.pp-hero.skin-aura.lay-photo::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10,8,6,.88) 0%, rgba(10,8,6,.7) 40%, rgba(10,8,6,.15) 75%, transparent), linear-gradient(0deg, rgba(10,8,6,.5), transparent 40%); }
.pp-hero.skin-aura.lay-photo > .wrap { position: relative; z-index: 1; }