/* ==================================================
   01 — Light Theme: Tokens, Header, Hero and Dialogs
   ================================================== */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f8fc;
  --text: #1b2b3e;
  --muted: #5e7084;
  --line: rgba(78, 113, 156, 0.18);
  --surface: #fff;
  --nav: rgba(223, 235, 250, 0.48);
  --grid: rgba(75, 118, 170, 0.045);
}

/* Light theme */
[data-theme="light"] .page-shell {
  background: var(--bg);
}

[data-theme="light"] .hero-intro::before {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    radial-gradient(
      ellipse at 88% 14%,
      rgba(104, 205, 235, 0.21),
      transparent 48%
    ),
    radial-gradient(
      ellipse at 12% 8%,
      rgba(135, 220, 199, 0.13),
      transparent 43%
    ),
    radial-gradient(
      ellipse at 38% 70%,
      rgba(164, 158, 237, 0.14),
      transparent 43%
    ),
    radial-gradient(
      ellipse at 80% 90%,
      rgba(139, 185, 245, 0.1),
      transparent 46%
    );
  background-size:
    48px 48px,
    48px 48px,
    auto,
    auto,
    auto,
    auto;
}

[data-theme="light"] .sun-icon {
  display: none;
}

[data-theme="light"] .moon-icon {
  display: block;
}

[data-theme="light"] .theme-toggle {
  color: #42658c;
}

[data-theme="light"] .accent {
  color: var(--accent);
}

[data-theme="light"] .accent-highlight {
  background: #101b2b;
  padding: 0.02em 0 0.04em;
  border-radius: 0.06em;
  box-shadow:
    0.1em 0 0 #101b2b,
    -0.1em 0 0 #101b2b;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

[data-theme="light"] .desktop-nav :is(a, button):hover {
  color: #275b94;
  background: rgba(129, 180, 235, 0.15);
}

[data-theme="light"] .orbit-secondary {
  border-color: #8ca7c5;
  background: transparent;
}

[data-theme="light"] .orbit-secondary .button-arrow {
  color: #42658c;
}

[data-theme="light"] .brand {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

[data-theme="light"] .brand .logo-dark {
  display: none;
}

[data-theme="light"] .brand .logo-light {
  display: block;
}

[data-theme="light"] .nav-indicator {
  background: rgba(129, 180, 235, 0.2);
  box-shadow: inset 0 0 0 1px rgba(92, 142, 198, 0.12);
}

[data-theme="light"] .mobile-nav {
  background: rgba(249, 252, 255, 0.98);
  box-shadow: 0 20px 55px rgba(45, 80, 125, 0.15);
}

[data-theme="light"] .mobile-nav .nav-arrow {
  color: #42658c;
}

/* ==================================================
   02 — Light Theme: Hero Animation Panels and Charts
   ================================================== */
/* Cool blue light surfaces inspired by the supplied reference. */
[data-theme="light"] .flxrv-unit {
  --visual-ink: #25384f;
  --visual-muted: #63788e;
  --visual-border: rgba(99, 137, 181, 0.24);
  --visual-chart: #4b86c6;
  color: var(--visual-ink);
}

[data-theme="light"] .flxrv-unit .flxrv-board {
  background: linear-gradient(145deg, #fff, #eef5fe);
  border-color: var(--visual-border);
  box-shadow:
    0 25px 65px #345b8b1c,
    0 0 40px #8bbcf51a,
    inset 0 1px #fff;
}

[data-theme="light"] .flxrv-unit .flxrv-art-glow {
  background: radial-gradient(
    circle,
    #8cccf52b,
    #bedcfb1c 48%,
    transparent 72%
  );
}

[data-theme="light"] .flxrv-unit .flxrv-browser {
  background: #e8f0fc;
  border-color: var(--visual-border);
}

[data-theme="light"] .flxrv-unit .flxrv-address {
  color: var(--visual-muted);
  background: #ffffffc9;
  border-color: #8caed12e;
}

[data-theme="light"] .flxrv-unit .flxrv-preview {
  background:
    radial-gradient(ellipse at 55% 34%, #a7d2fb1c, transparent 63%),
    linear-gradient(145deg, #fff, #f1f6fd);
}

[data-theme="light"] .flxrv-unit .flxrv-float,
[data-theme="light"] .flxrv-unit .flxscene-seo-card {
  color: var(--visual-ink);
  background: linear-gradient(145deg, #fff, #f1f6ff);
  border-color: var(--visual-border);
  box-shadow:
    0 12px 32px #345b8b1c,
    inset 0 1px #fff;
}

[data-theme="light"] .flxrv-unit .flxscene-site {
  background: linear-gradient(150deg, #fff, #f6f9ff);
  border-color: var(--visual-border);
  box-shadow:
    0 12px 28px #345b8b14,
    inset 0 1px #fff;
}

[data-theme="light"] .flxrv-unit .flxscene-site-bar {
  background: #e7f0fc;
  border-color: var(--visual-border);
}

[data-theme="light"] .flxrv-unit .flxscene,
[data-theme="light"] .flxrv-unit .flxrv-ai-title,
[data-theme="light"] .flxrv-unit .flxrv-perf-head,
[data-theme="light"] .flxrv-unit .flxscene-kicker,
[data-theme="light"] .flxrv-unit .flxscene-page-brand,
[data-theme="light"] .flxrv-unit .flxscene-headline,
[data-theme="light"] .flxrv-unit .flxscene-seo-head {
  color: var(--visual-ink);
}

[data-theme="light"] .flxrv-unit .flxscene-seo-description,
[data-theme="light"] .flxrv-unit .flxrv-ai-small,
[data-theme="light"] .flxrv-unit .flxrv-perf-caption,
[data-theme="light"] .flxrv-unit .flxscene-url,
[data-theme="light"] .flxrv-unit .flxscene-eyebrow,
[data-theme="light"] .flxrv-unit .flxscene-bottom-status,
[data-theme="light"] .flxrv-unit .flxscene-seo-foot {
  color: var(--visual-muted);
}

[data-theme="light"] .flxrv-unit .flxscene-chip,
[data-theme="light"] .flxrv-unit .flxscene-live-tag,
[data-theme="light"] .flxrv-unit .flxscene-bot-label,
[data-theme="light"] .flxrv-unit .flxrv-flow-icons span {
  color: #3c638e;
  background: #e7f1ff;
  border-color: var(--visual-border);
}

[data-theme="light"] .flxrv-unit .flxscene-floating-token {
  color: #3b72af;
  background: #fff;
  border-color: var(--visual-border);
  box-shadow: 0 5px 12px #345b8b1a;
}

[data-theme="light"] .flxrv-unit .flxscene-bot-image {
  filter: drop-shadow(0 8px 10px #3b67992b);
}

[data-theme="light"] .flxrv-unit .flxscene-page-art {
  background: linear-gradient(145deg, #edf7ff, #dcecff);
  border-color: var(--visual-border);
}

[data-theme="light"] .flxrv-unit .flxscene-page-card {
  background: #edf4fe;
  border-color: var(--visual-border);
}

[data-theme="light"] .flxrv-unit .flxscene-page-card i {
  background: #cef317a6;
}

[data-theme="light"] .flxrv-unit .flxscene-copy-lines i,
[data-theme="light"] .flxrv-unit .flxscene-page-card b {
  background: #9eb6d2;
}

[data-theme="light"] .flxrv-unit .flxscene-page-card span,
[data-theme="light"] .flxrv-unit .flxscene-nav-lines i {
  background: #c1d2e6;
}

[data-theme="light"] .flxrv-unit .flxscene-nav-lines i:nth-child(3) {
  background: #a6c82b;
}

[data-theme="light"] .flxrv-unit .flxscene-seo-head strong,
[data-theme="light"] .flxrv-unit .flxscene-seo-foot strong,
[data-theme="light"] .flxrv-unit .flxrv-perf-caption strong,
[data-theme="light"] .flxrv-unit .flxscene-headline em {
  color: #3b72af;
}

[data-theme="light"] .flxrv-unit .flxrv-ai-icon,
[data-theme="light"] .flxrv-unit .flxscene-seo-icon {
  color: #3b72af;
  background: #e2edfc;
}

[data-theme="light"] .flxrv-unit .flxrv-ai-icon svg {
  stroke: #3b72af;
}

[data-theme="light"] .flxrv-unit .flxscene-chart-line,
[data-theme="light"] .flxrv-unit .flxrv-perf-line path {
  stroke: var(--visual-chart);
  filter: none;
}

[data-theme="light"] .flxrv-unit .flxscene-chart-grid {
  stroke: #4b86c626;
}

[data-theme="light"] .flxrv-unit .flxscene-chart-area {
  fill: #79b4ef;
  fill-opacity: 0.15;
}

[data-theme="light"] .flxrv-unit .flxscene-chart-point {
  fill: #cef317;
  stroke: var(--visual-chart);
}

[data-theme="light"] .flxrv-unit .flxrv-ring,
[data-theme="light"] .flxrv-unit .flxrv-ring::after {
  border-color: #7dace138;
}

[data-theme="light"] .flxrv-unit .flxscene-progress {
  background: #dce8f6;
}

/* ==================================================
   03 — Light Theme: Full-width Logo Strip
   ================================================== */
/* The shared transparent logo mask reveals the actual light hero background. */
[data-theme="light"] .toolkit-section::before {
  background: radial-gradient(
    ellipse 30% 160px at 50% 45%,
    #fff9,
    transparent 80%
  );
}

[data-theme="light"] .toolkit-card img {
  filter: none;
}

/* ==================================================
   04 — Light Theme: Interactive States
   Keep shared menu and CTA behaviour after theme overrides.
   ================================================== */
[data-theme="light"]
  .desktop-nav.nav-motion-ready
  :is(a, button):is(:hover, :focus-visible),
[data-theme="light"]
  .mobile-nav.nav-motion-ready
  :is(a, button):is(:hover, :focus-visible) {
  background: transparent;
}

[data-theme="light"] .orbit-secondary:is(:hover, :focus-visible) {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #101500;
}

[data-theme="light"] .orbit-secondary:is(:hover, :focus-visible) .button-arrow {
  color: #101500;
}

/* ==================================================
   05 — Full Website: Light Tokens and Shared Components
   ================================================== */
:root[data-theme="light"] {
  --panel: #f9fcff;
  --panel-alt: #eaf2fc;
  --panel-glass: rgba(248, 252, 255, 0.9);
}
[data-theme="light"] .site-header {
  background: rgba(245, 248, 252, 0.9);
}
[data-theme="light"] .section-kicker {
  color: #587213;
}
[data-theme="light"] .section .accent {
  background: #101b2b;
  border-radius: 0.065em;
  padding: 0 0.025em;
  box-shadow:
    0.07em 0 0 #101b2b,
    -0.07em 0 0 #101b2b;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
[data-theme="light"] .round-control:hover {
  color: #496f22;
  border-color: #88a044;
}

[data-theme="light"] .carousel-dot::after {
  background: #b2c2d3;
}
[data-theme="light"] .carousel-dot.is-active::after {
  background: #9fbc17;
}

/* ==================================================
   06 — Light Theme: Challenges
   ================================================== */
[data-theme="light"] .challenge-card {
  background:
    linear-gradient(145deg, #f7f9edee, #f7fbf5f5 70%) padding-box,
    linear-gradient(140deg, #8ca34380, #c1cea35c 52%, #8fa75c80) border-box;
  box-shadow:
    inset 0 1px 0 #ffffffa1,
    0 12px 30px #60753a0b;
}
[data-theme="light"] .challenge-card .icon-box {
  color: #607b13;
  border-color: #9bae647a;
  background: radial-gradient(circle at 50% 78%, #dce9b7b3, #eef4dcbd 75%);
}
[data-theme="light"] .challenge-card .card-number {
  color: #60743c;
  opacity: 0.35;
}
[data-theme="light"] .challenge-card p {
  color: #53614e;
}
[data-theme="light"] .icon-box {
  color: #658114;
  background: #eef4dd;
}

/* ==================================================
   07 — Light Theme: Remote Globe and Project Process
   ================================================== */

[data-theme="light"] .globe-shell {
  background: radial-gradient(ellipse at 60% 35%, #94c6ff18, transparent 62%);
}
[data-theme="light"] .globe-orbit {
  border-color: #75a8dc30;
}
[data-theme="light"] .process-timeline::before {
  background: linear-gradient(#89a630, #9cb8d324);
}
[data-theme="light"] .step-number {
  border-color: #96ac50;
}
[data-theme="light"] .process-step.is-current .step-number {
  border-color: var(--accent);
}
[data-theme="light"] .process-icon {
  color: #658114;
}
[data-theme="light"] .process-rings {
  opacity: 0.5;
}

/* ==================================================
   08 — Light Theme: Right Fit and Why Fluxoral
   ================================================== */

[data-theme="light"] .fit-card {
  box-shadow: 0 -7px 24px #253a4b16;
}
[data-theme="light"] .why-list .ui-icon {
  color: #658114;
}

/* ==================================================
   09 — Light Theme: Curved Team Carousel
   ================================================== */

[data-theme="light"] .team-section {
  background: #ffffff;
}

[data-theme="light"] .team-card {
  background: linear-gradient(145deg, #f9fcff, #e5eef9);
  box-shadow: 0 12px 24px #46638c16;
}
[data-theme="light"] .team-card.is-active {
  box-shadow:
    inset 0 0 18px #cef31722,
    0 8px 28px #47699118;
}

[data-theme="light"] .team-orbit {
  border-color: #87a84455;
  border-top-color: transparent;
}

/* ==================================================
   10 — Light Theme: Project Cost and Client Feedback
   ================================================== */

[data-theme="light"] .feedback-section {
  background: #e8f4f2;
}
[data-theme="light"] .cost-factors > li > .ui-icon {
  color: #658114;
}
[data-theme="light"] .cost-factors ul li::before {
  color: #82981b;
}
[data-theme="light"] .scope-card {
  background: linear-gradient(140deg, #eaf2fd88, transparent), var(--panel);
}
[data-theme="light"] .scope-card > .ui-icon {
  color: #658114;
}
[data-theme="light"] .feedback-card {
  border-color: #9dafc780;
  background:
    radial-gradient(ellipse at 0% 100%, #cef31716, transparent 65%),
    linear-gradient(145deg, #fff, #f1f6fc);
}
[data-theme="light"] .feedback-card::before {
  color: #6684320a;
}
[data-theme="light"] .feedback-card::after {
  border-color: #8fa829;
}
[data-theme="light"] .feedback-card .quote-mark,
[data-theme="light"] .feedback-initials {
  color: #718918;
}
[data-theme="light"] .feedback-initials {
  border-color: #91aa2e;
  background: #eaf0d7;
}
[data-theme="light"] .feedback-card-top small,
[data-theme="light"] .feedback-country {
  color: #637485;
}
[data-theme="light"] .feedback-card blockquote {
  color: #425161;
}
[data-theme="light"] .feedback-card blockquote strong {
  color: #1d3028;
}
[data-theme="light"] .feedback-person {
  border-top-color: #a4b7c85c;
}
[data-theme="light"] .feedback-country svg {
  color: #7d9453;
}

/* ==================================================
   11 — Light Theme: FAQ and Split CTA
   ================================================== */
[data-theme="light"] .cta-section {
  background: #ffffff;
}
[data-theme="light"] .pill-label {
  color: #627e16;
  border-color: #91a946;
}
[data-theme="light"] .faq-item {
  background: linear-gradient(145deg, #fff, #f1f7ff);
}
[data-theme="light"] .faq-item[open] .faq-symbol {
  border-color: #89a435;
}
[data-theme="light"] .faq-item[open] .faq-symbol::before,
[data-theme="light"] .faq-item[open] .faq-symbol::after {
  background: #617b1c;
}

/* ==================================================
   12 — Light Theme: Contact and Footer
   ================================================== */
[data-theme="light"] .contact-section {
  --contact-lamp-source: rgba(154, 180, 73, 0.13);
  --contact-lamp-spill: rgba(154, 180, 73, 0.06);
}

[data-theme="light"] .contact-watermark {
  background:
    radial-gradient(ellipse 36% 110% at 50% 0, #859e594a, transparent 75%),
    linear-gradient(#73826b20, #73826b03 90%);
  -webkit-background-clip: text;
  background-clip: text;
}
[data-theme="light"] .contact-method > .ui-icon {
  background: #e7f0fc;
  color: #4d729e;
}
[data-theme="light"] a.contact-method:is(:hover, :focus-visible) {
  border-color: #8ba74495;
  box-shadow:
    0 12px 28px #60753a12,
    0 0 22px #8ba74409;
}
[data-theme="light"] a.contact-method:is(:hover, :focus-visible) > .ui-icon {
  color: #607b13;
  border-color: #9bae647a;
  background: #eef4dd;
}
[data-theme="light"] .contact-form {
  background: linear-gradient(145deg, #fff, #f1f7ff);
  box-shadow: 0 15px 50px #456c9610;
}
[data-theme="light"] .contact-form :is(input, textarea, select) {
  background: #e8f0fa65;
}
[data-theme="light"] .contact-form select {
  color-scheme: light;
}
[data-theme="light"] .enquiry-consent a {
  color: #607b13;
}
[data-theme="light"] .enquiry-consent input[type="checkbox"] {
  accent-color: #738c1e;
}
/* Footer content keeps the light hero palette; the brand layer stays solid. */

[data-theme="light"] .footer-content {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    radial-gradient(
      ellipse at 88% 14%,
      rgba(104, 205, 235, 0.21),
      transparent 48%
    ),
    radial-gradient(
      ellipse at 12% 8%,
      rgba(135, 220, 199, 0.13),
      transparent 43%
    ),
    radial-gradient(
      ellipse at 38% 70%,
      rgba(164, 158, 237, 0.14),
      transparent 43%
    ),
    radial-gradient(
      ellipse at 80% 90%,
      rgba(139, 185, 245, 0.1),
      transparent 46%
    );
  background-size:
    48px 48px,
    48px 48px,
    auto,
    auto,
    auto,
    auto;
}

[data-theme="light"] .site-footer {
  --footer-outline: rgba(74, 92, 51, 0.3);
  --footer-highlight: #7c9526;
  --footer-light: 122, 148, 43;
}
[data-theme="light"] .footer-social-icon:hover {
  color: #587213;
}

/* ==================================================
   13 — Light Theme: Editorial Portfolio and Portfolio Page
   ================================================== */
[data-theme="light"] .portfolio-section {
  background: #f8fbff;
}
[data-theme="light"] .portfolio-slide-number {
  -webkit-text-stroke-color: #758aa878;
}
[data-theme="light"] .portfolio-card {
  box-shadow: 0 22px 45px #36567822;
}
[data-theme="light"] .is-carousel-ready .portfolio-card.is-current {
  box-shadow: 0 24px 48px #36567826;
}
[data-theme="light"]
  .is-carousel-ready
  .portfolio-card.is-current
  .portfolio-browser-bar {
  color: #4c5968;
  background: #e8ecf1;
  border-bottom-color: #78889733;
}
[data-theme="light"] .portfolio-browser-address {
  background: #f8fafc;
  border-color: #7c8a9b26;
}
[data-theme="light"] .portfolio-progress {
  background: #a3b4c37d;
}
[data-theme="light"] .portfolio-progress span {
  background: #9cb91b;
}

/* ==================================================
   14 — Light Theme: Typographic About Fluxoral
   ================================================== */
[data-theme="light"] .agency-about {
  color: #17231c;
}
[data-theme="light"] .agency-about .agency-about-label {
  color: #657384;
}
[data-theme="light"] .agency-about .agency-about-summary,
[data-theme="light"] .agency-about .agency-about-proof,
[data-theme="light"] .agency-about-stat span,
[data-theme="light"] .agency-about-proof-stat > span {
  color: #4b5b6b;
}
[data-theme="light"] .agency-about-emblem {
  -webkit-text-stroke-color: #8da82b30;
}
[data-theme="light"] .agency-about-stat + .agency-about-stat,
[data-theme="light"] .agency-about .agency-about-proof,
[data-theme="light"] .agency-about-wordmark {
  border-top-color: #9cabb66b;
}
[data-theme="light"] .agency-about-stat + .agency-about-stat strong,
[data-theme="light"] .agency-about-proof .agency-about-project-count {
  color: #819c16;
}
[data-theme="light"] .agency-about-proof .agency-about-year-count {
  color: #17231c;
}
[data-theme="light"] .agency-about-wordmark {
  -webkit-text-stroke-color: #8da82b42;
}

/* ==================================================
   15 — Light Theme: Globe Capabilities Carousel
   ================================================== */
[data-theme="light"] .capability-section {
  --cap-panel: #f5f8fd;
}
[data-theme="light"] .capability-globe {
  opacity: 0.28;
  mix-blend-mode: multiply;
  filter: grayscale(0.6);
}
[data-theme="light"] .capability-globe > span {
  background: linear-gradient(
    #f8fbff,
    transparent 25%,
    transparent 75%,
    #f8fbff
  );
}
[data-theme="light"] .capability-card .capability-description {
  color: #536477;
}
[data-theme="light"] .capability-card-top p,
[data-theme="light"] .capability-card-top .ui-icon {
  color: #788f16;
}
[data-theme="light"] .capability-chips li {
  border-color: #8699ac35;
  background: #e9eff7;
}
[data-theme="light"] .capability-chips li::before {
  background: #8aa41b;
}
[data-theme="light"] .is-interactive .capability-card.is-active {
  background: linear-gradient(120deg, #eef4e7, #fafdff);
  border-color: #97ab3b90;
  box-shadow: 0 16px 40px #42628d16;
}
[data-theme="light"] .capability-nav button {
  color: #344455;
}
[data-theme="light"] .capability-nav button[aria-pressed="true"] > span {
  color: #788f16;
}
[data-theme="light"] .capability-controls .round-control {
  background: #f3f7fce8;
  border-color: #8191a45e;
}
[data-theme="light"] .capability-progress-step.is-complete > i,
[data-theme="light"] .capability-dots button[aria-pressed="true"] {
  background: #8ba51b;
}
[data-theme="light"] .capability-progress-step.is-current {
  color: #788f16;
}

/* ==================================================
   16 — Light Theme: Subtle Dot Pattern and Alternating Lamp Glow
   ================================================== */
[data-theme="light"] .section-pattern {
  --section-pattern-ink: rgba(112, 136, 35, 0.06);
  background: #eaf2fc;
}

/* ==================================================
   17 — Light Theme: Shared Particle Sections
   ================================================== */
[data-theme="light"] .particle-section {
  background: #f8fbff;
  --particle-colour: 70, 84, 64;
  --particle-accent: 112, 136, 35;
}

/* ==================================================
   18 — Light Theme: Subdued Olive Corner Rays
   ================================================== */
:root[data-theme="light"] {
  --ray-colour: 122, 148, 43;
  --ray-opacity: 0.58;
}

/* ==================================================
   19 — Light Theme: Terms & Conditions and Privacy Policy
   ================================================== */
[data-theme="light"] .legal-hero::before {
  background: radial-gradient(
    ellipse 53% 110% at 100% 0%,
    #c8d9a354,
    transparent 75%
  );
}
[data-theme="light"] .legal-title-accent {
  color: #637d18;
}
[data-theme="light"]
  :is(
    .legal-breadcrumb,
    .legal-date,
    .legal-toc nav a,
    .legal-chapter .legal-section-number,
    .legal-chapter p,
    .legal-chapter li,
    .legal-contact-card,
    .legal-footer nav
  ) {
  color: #53624e;
}
[data-theme="light"] :is(.legal-toc, .legal-contact-card, .legal-help) {
  background: #ffffffa6;
}
[data-theme="light"] .legal-toc nav a:is(:hover, [aria-current="location"]),
[data-theme="light"] .legal-article a:hover {
  color: #607b13;
}

/* Contact — direct email delivery feedback. */
[data-theme="light"] .enquiry-status[data-state="error"] {
  color: #9a281a;
}

/* ==================================================
   24 — Light Theme: Thank You and 404 Pages
   ================================================== */
[data-theme="light"] .outcome-shell {
  --outcome-lamp: 104, 150, 200;
  --outcome-accent: #607b13;
  background-image:
    radial-gradient(ellipse 35% 30% at 100% 0%, #9fbee038, transparent 72%),
    radial-gradient(ellipse 35% 24% at 50% 34%, #cef31710, transparent 76%);
}
[data-theme="light"] .confirmation-glass {
  border-color: #7a8b5c8c;
  background:
    linear-gradient(135deg, #ffffffee, #eff4de6b 40%, #b2c88836),
    radial-gradient(ellipse at 100% 0%, #c9e7636b, transparent 45%);
  box-shadow:
    inset 3px 2px 5px #fff,
    inset -3px -3px 6px #a9ba813d,
    4px 3px 0 #a8b5804d,
    0 18px 50px #2f45221a;
}
[data-theme="light"] .confirmation-glass svg {
  filter: drop-shadow(0 5px 4px #455b1b25);
}
[data-theme="light"] .confirmation-steps li::before {
  background: #b0b9ac;
}
[data-theme="light"] .confirmation-steps li[aria-current="step"]::before {
  background: #99b819;
  border-color: #99b819;
}
[data-theme="light"] .error-digit {
  -webkit-text-stroke-color: #626c5b80;
}
[data-theme="light"] .error-digit--lime {
  -webkit-text-stroke-color: #829c1a;
}