/* v11 — staggered arrivals, pipe pulses. */
.pin {
  animation: page-in 0.85s cubic-bezier(0.22, 0.7, 0.2, 1) backwards !important;
  animation-delay: calc(var(--k, 0) * 70ms + 40ms) !important;
}
.motion-reduced .pin {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .pin {
    animation: none !important;
  }
}
:root {
  --flow-blue: #8fb4ff;
}
[data-theme="light"] {
  --flow-blue: #3a6fd6;
}
.energy-lines path.hot.blue {
  stroke: var(--flow-blue);
}
.pulse {
  fill: none;
  stroke-linecap: round;
  stroke-width: 2.4;
}
.pulse.gold {
  stroke: var(--warm);
  filter: drop-shadow(0 0 4px var(--warm));
}
.pulse.blue {
  stroke: var(--flow-blue);
  filter: drop-shadow(0 0 4px var(--flow-blue));
}
.nav-core.fed[data-feed="blue"] {
  animation-name: fed-glow-blue;
}
@keyframes fed-glow-blue {
  40% {
    box-shadow:
      0 0 42px color-mix(in srgb, var(--flow-blue) 45%, transparent),
      inset 0 0 22px color-mix(in srgb, var(--flow-blue) 25%, transparent);
  }
}


/* v13 — live theme glide (no frozen snapshot), brighter flows in light mode. */
@property --bg {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --panel {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --panel2 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --ink {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --muted {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --line {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --control {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --purple {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --pink {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --gold {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --button {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --button-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --warm {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --glow-soft {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --gold-soft {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --hover-blue {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --flow-blue {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --p1 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --p2 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --p3 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --shadow {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
html.theme-gliding,
html.theme-gliding body {
  transition:
    --bg 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --panel 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --panel2 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --ink 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --muted 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --line 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --control 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --purple 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --pink 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --gold 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --button 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --button-ink 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --warm 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --glow-soft 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --gold-soft 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --hover-blue 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --flow-blue 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --p1 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --p2 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --p3 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --accent 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    --shadow 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    background-color 0.75s,
    color 0.75s !important;
}
.theme-wave {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
[data-theme="light"] {
  --flow-blue: #4f7dff;
  --flow-gold: #f0a91e;
}
:root {
  --flow-gold: var(--warm);
}
[data-theme="light"] .pulse.gold {
  stroke: var(--flow-gold);
  filter: drop-shadow(0 0 5px #ffc24d);
}
[data-theme="light"] .pulse.blue {
  filter: drop-shadow(0 0 5px #7fa4ff);
}
[data-theme="light"] .energy-lines path.hot {
  stroke: var(--flow-gold);
}
[data-theme="light"] .energy-lines path.hot.blue {
  stroke: var(--flow-blue);
}
[data-theme="light"] .nav-core.fed {
  animation-name: fed-glow-light;
}
[data-theme="light"] .nav-core.fed[data-feed="blue"] {
  animation-name: fed-glow-blue;
}
@keyframes fed-glow-light {
  40% {
    box-shadow:
      0 0 42px #f0a91e70,
      inset 0 0 22px #f0a91e40;
  }
}


/* v14 — every colour glides: themed gradients use variables; gentle wave; tidy mobile footer. */
@property --brand-a {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --brand-b {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --brand-c {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --glow-a {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --glow-b {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --dg1 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --dg2 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --dg3 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
:root {
  --brand-a: #ece6fa;
  --brand-b: #9a6bff;
  --brand-c: #d36bff;
  --glow-a: #8b5cf600;
  --glow-b: #f5c46100;
  --dg1: #7b3fe03a;
  --dg2: #c24fd930;
  --dg3: #e9bf7514;
}
[data-theme="light"] {
  --brand-a: #1b1331;
  --brand-b: #6b40dc;
  --brand-c: #6b40dc;
  --glow-a: #8b5cf633;
  --glow-b: #f5c46138;
  --dg1: #8b5cf640;
  --dg2: #d45fe133;
  --dg3: #f5c46133;
}
.brand-letters,
[data-theme="light"] .brand-letters {
  background-image: linear-gradient(
    170deg,
    var(--brand-a) 25%,
    var(--brand-b) 72%,
    var(--brand-c)
  ) !important;
}
body,
[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 60% 40% at 88% 0%, var(--glow-a), transparent 70%),
    radial-gradient(ellipse 45% 35% at 0% 100%, var(--glow-b), transparent 70%),
    radial-gradient(ellipse at 50% 220px, var(--glow-soft), transparent 530px);
}
body.diagnostic-page,
[data-theme="light"] body.diagnostic-page {
  background-image:
    radial-gradient(ellipse 50% 45% at 18% 42%, var(--dg1), transparent 70%),
    radial-gradient(ellipse 42% 40% at 88% 18%, var(--dg2), transparent 70%),
    radial-gradient(ellipse 45% 35% at 70% 105%, var(--dg3), transparent 70%);
}
[data-theme="light"] .minimal-home .orbit-node {
  background: linear-gradient(130deg, var(--panel2), var(--panel));
}
[data-theme="light"] .demo-station {
  background: var(--panel);
}
[data-theme="light"] .diagnostic-page .diagnostic-panel {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--purple) 17%, var(--panel)) 0%,
    color-mix(in srgb, var(--panel) 78%, transparent) 55%,
    color-mix(in srgb, var(--pink) 8%, var(--panel)) 100%
  );
}
html.theme-gliding *,
html.theme-gliding *:before,
html.theme-gliding *:after {
  transition:
    background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.6s,
    color 0.6s,
    box-shadow 0.6s,
    fill 0.6s,
    stroke 0.6s !important;
}
html.theme-gliding {
  transition-property:
    --brand-a, --brand-b, --brand-c, --glow-a, --glow-b, --dg1, --dg2, --dg3, --bg, --panel, --panel2, --ink,
    --muted, --line, --control, --purple, --pink, --gold, --button, --button-ink, --warm, --glow-soft,
    --gold-soft, --hover-blue, --flow-blue, --p1, --p2, --p3, --accent, --shadow !important;
  transition-duration: 0.6s !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}
@media (max-width: 700px) {
  .footer-bottom {
    text-align: center;
    padding: 16px 0 24px !important;
  }
  .footer-bottom > span {
    display: block;
    font-size: 12px;
    color: var(--muted);
  }
  .footer-bottom > div {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 16px !important;
    margin-top: 10px !important;
  }
  .footer-bottom button,
  .footer-bottom .cookie-link {
    font-size: 12px !important;
    min-height: 34px !important;
    padding: 6px 2px !important;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--muted) 40%, transparent) !important;
    text-underline-offset: 5px;
    justify-content: center !important;
  }
}


/* v15 — colours follow the variables only, so text and cards change together. */
html.theme-gliding *,
html.theme-gliding *:before,
html.theme-gliding *:after {
  transition: none !important;
}
html.theme-gliding body {
  transition-property: --accent !important;
  transition-duration: 0.5s !important;
}
html.theme-gliding {
  transition-duration: 0.5s !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}
[data-theme="light"] .faq-list details,
[data-theme="light"] .help-card,
[data-theme="light"] .privacy-card,
[data-theme="light"] .identity-principles details,
[data-theme="light"] .meeting-prep details,
[data-theme="light"] .meeting-card,
[data-theme="light"] .tile,
[data-theme="light"] .demo-caption details {
  background: color-mix(in srgb, var(--panel) 52%, transparent) !important;
}


/* v16 — second wave: a glowing ring sweeps while text and cards change. */
html.theme-gliding {
  transition-duration: 0.7s !important;
}
.theme-ring {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  translate: -50% -50%;
  border: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--accent) 45%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--warm) 25%, transparent);
}


/* v18 — one wave: everything fades to the other theme while the circle spreads. */
html.theme-gliding {
  transition-duration: 0.8s !important;
  transition-timing-function: cubic-bezier(0.45, 0, 0.25, 1) !important;
}
.theme-ring {
  display: none;
}


/* v19 — light mode gold: amber instead of brown. */
[data-theme="light"] {
  --warm: #c7870a;
  --gold: #c7870a;
  --gold-soft: #e3a93a73;
  --flow-gold: #f0a91e;
}
[data-theme="light"] .brand-apostrophe {
  color: #d9960f;
  -webkit-text-fill-color: #d9960f;
}


/* v20 — orderly choices, clearly separated navigation, discreet mode switch. */
.chips {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 8px !important;
}
.chip {
  justify-content: center;
  text-align: center;
  min-height: 44px;
  border-radius: var(--r-btn) !important;
  corner-shape: var(--kx-shape) !important;
  padding: 9px 12px !important;
  line-height: 1.3;
}
.wizard-actions {
  margin-top: 26px !important;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  align-items: center;
}
.wizard-actions .button.secondary {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--muted);
  min-width: 0 !important;
  padding-inline: 4px !important;
}
.wizard-actions .button.secondary:hover {
  color: var(--ink);
}
.wizard-actions .button.secondary:before {
  content: "← ";
}
.wizard-actions .button:not(.secondary) {
  min-width: 160px;
}
.wizard-switch {
  margin-top: 18px !important;
  text-align: center;
}
.wizard-switch .text-link {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: 4px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
  opacity: 0.65;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--muted) 35%, transparent);
  text-underline-offset: 4px;
}
.wizard-switch .text-link:after {
  display: none;
}
.wizard-switch .text-link:hover {
  opacity: 1;
}
@media (max-width: 540px) {
  .chips {
    grid-template-columns: 1fr 1fr;
  }
}


body:not(.home-page) .living-halo {
  top: 114px;
  width: 340px;
  height: 340px;
  translate: calc(-50% + var(--halo-x, 0px) * 1.4) calc(var(--halo-y, 0px) * 1.4);
  background: radial-gradient(
    circle,
    #030108 0 7%,
    #0a0416e6 9%,
    #f0c46a70 11.5%,
    #c4934148 14%,
    #b27cff3d 21%,
    #9b51ef24 34%,
    transparent 64%
  ) !important;
}
[data-theme="light"] body:not(.home-page) .living-halo {
  background: radial-gradient(
    circle,
    #140a24 0 7%,
    #1d1030d9 9%,
    #e2a53a80 11.5%,
    #d9a04a4d 14%,
    #8b5cf647 21%,
    #8b5cf626 34%,
    transparent 64%
  ) !important;
}
@media (max-width: 700px) {
  body:not(.home-page) .living-halo {
    top: 83px;
    width: 240px;
    height: 240px;
  }
}
.motion-reduced body:not(.home-page) .living-halo {
  translate: -50% 0 !important;
}


body:not(.home-page) .living-halo {
  background: radial-gradient(
    circle,
    #03010866 0 7%,
    #0a041640 9%,
    #f0c46a26 11.5%,
    #c4934118 14%,
    #b27cff14 21%,
    #9b51ef0c 34%,
    transparent 64%
  ) !important;
}
[data-theme="light"] body:not(.home-page) .living-halo {
  background: radial-gradient(
    circle,
    #140a2440 0 7%,
    #1d103026 9%,
    #e2a53a2e 11.5%,
    #d9a04a1c 14%,
    #8b5cf61a 21%,
    #8b5cf60e 34%,
    transparent 64%
  ) !important;
}


body:not(.home-page) .living-halo {
  background: radial-gradient(
    circle,
    #03010866 0 7%,
    #0a041640 9%,
    #ffd98a5c 11%,
    #f0c46a38 13.5%,
    #c4934126 17%,
    #b27cff2a 24%,
    #9b51ef1a 38%,
    #9b51ef0b 55%,
    transparent 72%
  ) !important;
}
[data-theme="light"] body:not(.home-page) .living-halo {
  background: radial-gradient(
    circle,
    #140a2440 0 7%,
    #1d103026 9%,
    #f0b54a66 11%,
    #e2a53a3d 13.5%,
    #d9a04a24 17%,
    #8b5cf630 24%,
    #8b5cf61c 38%,
    #8b5cf60b 55%,
    transparent 72%
  ) !important;
}


body:not(.home-page) .living-halo {
  translate: calc(-50% + var(--halo-x, 0px) * 0.45) calc(var(--halo-y, 0px) * 0.45);
  background: radial-gradient(
    circle,
    #03010833 0 7%,
    #0a04161f 9%,
    #ffd98a40 11%,
    #f0c46a29 13.5%,
    #c493411c 17%,
    #b27cff20 24%,
    #9b51ef14 38%,
    #9b51ef08 55%,
    transparent 72%
  ) !important;
}
[data-theme="light"] body:not(.home-page) .living-halo {
  background: radial-gradient(
    circle,
    #140a2424 0 7%,
    #1d103014 9%,
    #f0b54a4a 11%,
    #e2a53a2e 13.5%,
    #d9a04a1c 17%,
    #8b5cf624 24%,
    #8b5cf615 38%,
    #8b5cf608 55%,
    transparent 72%
  ) !important;
}