/* v4 (2026-10-04, James picked option 3): a white light-bulb glyph replaces the ring.
   v3 (2026-10-04): the colour button loses its glow and wears the call to action (neon-button-v2.js).
   v2 (2026-10-04): the neon dial leaves the header; a lit round button in the experience panel takes its place
   (neon-button-v1.js). v1 below unchanged. */
/* Experience switch on the live site (2026-10-04, James: "add experience control to main site"): Studio, Editorial,
   Neon, the same list and order as neonstudio.ai/editorial/ and /neon/ (see experience-switch-2026-10-04/). Drawn on
   the site's own segmented control (the phone's Mobile / tablet switch): a grey track, the current one a raised key. */
.xp{display:flex;align-items:center;gap:10px}
.xp-label{font:700 12px/1 Manrope,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#5d6066}
.xp-opts{display:flex;gap:3px;padding:3px;border:1px solid #cccac3;border-radius:9px;background:#d9d8d1}
.xp-opts a{display:flex;align-items:center;min-height:30px;padding:0 12px;border-radius:6px;font:600 13px/1 Manrope,Arial,sans-serif;color:#24272a;text-decoration:none;white-space:nowrap;transition:background .15s}
.xp-opts a[aria-current]{background:linear-gradient(#fff,#ededE6);box-shadow:0 2px 3px rgba(0,0,0,.13)}
.xp-opts a:not([aria-current]):hover{background:rgba(255,255,255,.45)}
.xp-opts a:focus-visible{outline:2px solid #6441d9;outline-offset:2px}
/* desktop: in the header between the logo and the menu where it fits */
header.nav .xp{margin:0 auto 0 32px}
@media (max-width:1399px){
  /* the header's backdrop filter makes it the containing block, so this hangs off the header itself */
  header.nav .xp{position:absolute;top:calc(100% + 10px);right:-1px;margin:0;padding:6px 6px 6px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.72);
    background:linear-gradient(145deg,rgba(253,253,253,.93),rgba(244,244,244,.86));backdrop-filter:blur(26px) saturate(1.15);-webkit-backdrop-filter:blur(26px) saturate(1.15);
    box-shadow:0 1px 3px rgba(39,42,43,.02),0 7px 20px rgba(39,42,43,.07);transition:opacity .25s,transform .25s;z-index:60}
  header.nav .xp.away{opacity:0;transform:translateY(-8px);pointer-events:none}
}
@media (prefers-reduced-motion:reduce){header.nav .xp{transition:none}}
/* phone: its own row above the Mobile / tablet switch */
.xp-row{display:flex;padding:10px 22px 0;background:#eeede8}
.xp-row .xp{width:100%;justify-content:space-between}
.xp-row .xp-opts a{min-height:36px;padding:0 14px}
@media (max-width:360px){.xp-row .xp-opts a{padding:0 11px}.xp-row .xp-label{letter-spacing:.08em}}
/* the colour button: the call to action's construction (neon-button-v2.js copies its surface), round, no glow, a bulb glyph */
html.has-xp-light .light-ctl{display:none!important}
.xp-light{flex:none;position:relative;display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid transparent;
  background:linear-gradient(165deg,#d1427f,#c50f66 43%,#8e0b4a);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 65ms ease-out}
.xp-bulb{position:absolute;left:50%;top:50%;display:block;width:18px;height:18px;margin:0;background:currentColor;transform:translate(-50%,-50%);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.5%2018h5M10.5%2021h3M12%203a6%206%200%200%200-3.6%2010.8c.7.6%201.1%201.3%201.1%202.1V16h5v-.1c0-.8.4-1.5%201.1-2.1A6%206%200%200%200%2012%203z%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.5%2018h5M10.5%2021h3M12%203a6%206%200%200%200-3.6%2010.8c.7.6%201.1%201.3%201.1%202.1V16h5v-.1c0-.8.4-1.5%201.1-2.1A6%206%200%200%200%2012%203z%22/%3E%3C/svg%3E") center/contain no-repeat}
.xp-light:active,.xp-light.is-pressed{transform:translateY(2px)}
.xp-light.pop .xp-bulb{animation:xp-pop .3s ease-out}
@keyframes xp-pop{40%{transform:translate(-50%,-50%) scale(1.25)}100%{transform:translate(-50%,-50%) scale(1)}}
.xp-light:focus-visible{outline:2px solid #6441d9;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.xp-light.pop .xp-bulb{animation:none}.xp-light{transition:none}}
/* desktop: it is a .button, so the site's CTA sheets paint it; keep only the round shape and size */
:root body .xp .xp-light.button{width:36px!important;height:36px!important;min-width:0!important;min-height:0!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center;font-size:0}
/* the phone row: drop the visible word "Experience" to make room (the panel keeps its aria-label) */
@media (max-width:420px){html.has-xp-light .xp-row .xp-label{display:none}html.has-xp-light .xp-row .xp{justify-content:space-between}}