.eo-preview-menu-root{display:flex;flex-direction:row;gap:var(--eden-space-6);padding:var(--eden-space-2) var(--eden-space-0) var(--eden-space-2) var(--eden-space-0);align-items:center;justify-content:center;border-radius:var(--eden-r-0);flex:0 0 auto;width:fit-content}
.eo-preview-menu-label{color:var(--eden-ink-2);font-family:var(--eden-text-action-family);font-size:var(--eden-text-action-size);font-weight:var(--eden-text-action-weight);line-height:var(--eden-text-action-line-height, normal);letter-spacing:var(--eden-text-action-tracking);text-transform:var(--eden-text-action-case, none);text-align:center;flex:0 0 auto;height:fit-content}
@media (hover:hover){.eo-preview-menu-root:hover .eo-preview-menu-label{color:var(--eden-ink)}}
.eo-preview-menu-root[data-eden-disabled] .eo-preview-menu-label{color:var(--eden-quiet)}
.eo-top-actions.eo-preview-header-menu-row{align-items:center;gap:var(--eden-space-40)}
.eo-preview-header-buttons{display:flex;flex-direction:row;align-items:center;gap:var(--eden-space-16);flex:0 0 auto;min-width:0}
.eo-preview-menu-root{height:var(--eden-space-48)}
@media(max-width:767px){.eo-top-actions.eo-preview-header-menu-row{gap:var(--eden-space-24)}.eo-preview-header-buttons{gap:var(--eden-space-8)}}

/* Header menu, constructed from Eden’s native frame and library Menu glyph. */
.eo-preview-hamburger{display:flex;flex-direction:row;gap:var(--eden-space-0);padding:var(--eden-space-12) var(--eden-space-12) var(--eden-space-12) var(--eden-space-12);align-items:center;justify-content:center;flex:0 0 auto;height:48px;width:48px}
.eo-preview-hamburger-glyph{color:var(--eden-ink);width:24px;height:24px;display:block;flex:0 0 auto}
.eo-preview-hamburger{cursor:pointer;border-radius:var(--eden-r-10)}
.eo-preview-hamburger:hover{background:var(--eden-fill-hover)}
.eo-preview-hamburger:focus-visible{outline:var(--eden-edge-2) solid var(--eden-ink);outline-offset:var(--eden-space-2)}

/* THE MENU CLOSES WITH AN X (Josh, 2026-10-31: "use x icon to close the mobile and desktop menu please vs the word"): a 44px round target,
   the icon in the menu's quiet ink, full ink on hover */
.eo-menu-x{display:flex;flex-direction:row;gap:var(--eden-space-0);padding:var(--eden-space-0);align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;border-radius:var(--eden-r-pill);color:var(--eden-ink-2);cursor:pointer;transition:color .2s,background .2s}
.eo-menu-x-i{display:block;flex:0 0 auto;width:24px;height:24px}
.eo-menu-x-i svg{display:block;width:100%;height:100%}
@media (hover:hover){.eo-menu-x:hover{color:var(--eden-ink);background:var(--eden-fill-hover)}}
.eo-menu-x:focus-visible{outline:2px solid #c9b7ff;outline-offset:2px}

/* THE GUEST DEMO IS DESKTOP'S (Josh, 2026-10-31: "no demo in mobile... available only in desktop"): on a phone its buttons step aside and
   one quiet line says where it runs */
.eo-try-note{display:none}
@media(max-width:767px){
  .eo-try-desk{display:none}
  .eo-try-note{display:block;text-align:center}
  /* the footer's links wrap and centre instead of running off the edge ("mobile footer links are getting cut off") */
  .eo-legal{align-self:stretch;flex-wrap:wrap;justify-content:center;gap:var(--eden-space-16)}
}

/* LIGHT OR DARK (Josh, 2026-10-31: "light and dark mode swapping confused"): two options at the top of the menu, the current one lit;
   the X stays at the right */
.eo-menu-top{justify-content:space-between}
.eo-scheme{display:flex;flex-direction:row;gap:var(--eden-space-4);padding:var(--eden-space-4);align-items:center;justify-content:flex-start;flex:0 0 auto;border-radius:var(--eden-r-pill);box-shadow:inset 0 0 0 var(--eden-edge-1) var(--eden-line)}
.eo-scheme-o{padding:var(--eden-space-6) var(--eden-space-14);border-radius:var(--eden-r-pill)}
.eo-scheme-o .i7-label{color:var(--eden-ink-3)}
.eo-scheme-o[aria-checked="true"]{background:var(--eden-fill-on)}
.eo-scheme-o[aria-checked="true"] .i7-label{color:var(--eden-ink)}
.eo-scheme-o:focus-visible{outline:2px solid #c9b7ff;outline-offset:2px}
/* the page dims behind the open menu, and a tap there closes it (the layer is made by app-preview.js) */
.eo-menu-scrim{position:fixed;inset:0;background:var(--eden-scrim);opacity:0;pointer-events:none;transition:opacity .25s;z-index:999}
.eo-menu-scrim.on{opacity:.6;pointer-events:auto}
.eo-menu.eden-presented{z-index:1000}
/* the hero's own dark stage, in both modes */
.eo-wh-stage{background:var(--eden-black)}
/* the footer's links stack on a phone ("mobile footer links are getting cut off"; a wrapped row misreads at 375) */
@media(max-width:767px){.eo-legal{flex-direction:column;align-items:center;gap:var(--eden-space-8)}}