/* Morality demo. Shares style.css (pane, frost, rim, glyphs, GlassButton glass, social discs, badge) and signup.css
   (waitlist form). Question screen = QuestionGlassView; dials = GlassRotarySwitch; card = the Pricing/Overview card. */
@font-face { font-family: 'MPSRounded'; src: url('assets/fonts/Nunito-VariableFont_wght.ttf') format('truetype'); font-weight: 200 1000; font-display: block; }
:root { --rounded: ui-rounded, 'SF Pro Rounded', 'MPSRounded', system-ui, sans-serif; }

#scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; outline: none;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent; }
.sblabel { font-family: 'RammettoOne', sans-serif; font-weight: normal; text-transform: uppercase; color: var(--sbFill); text-shadow: var(--sbShadow); margin: 0; }
.sblabel.lit { color: var(--sbLitFill); text-shadow: var(--sbLitShadow); }
.ph { font-family: var(--rounded); font-weight: 600; line-height: 1.42; color: var(--phFill); text-shadow: var(--phShadow); margin: 0; }

/* ---- question scene (QuestionGlassView): fills the first pane-height of the scroller ---- */
#qscene { position: relative; width: 100%; overflow: hidden; }
#qscene[hidden], #board[hidden] { display: none; }
/* ProgressView, LinearProgressViewStyle(tint: amethyst / white in dark), .padding(.leading 80, .trailing 28, .top 14) */
#progress { position: absolute; left: 80px; right: 28px; top: 14px; height: 4px; border-radius: 2px; background: var(--progTrack); overflow: hidden; }
#progFill { height: 100%; width: 0; border-radius: 2px; background: var(--progTint); transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
/* step chips: Switchboard position pills (SwitchboardGlassSurface + SwitchboardPositionLabel) */
#steps { position: absolute; left: 0; right: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 16px; }
.step[hidden] { display: none; }
.step { position: relative; height: 34px; border-radius: 17px; padding: 0 14px; border: 0; background: none; cursor: pointer; outline: none;
  display: grid; place-items: center; -webkit-user-select: none; user-select: none; }
.step:focus-visible > svg.sgsvg { outline: 2px solid rgba(255,255,255,0.85); outline-offset: 3px; border-radius: 17px; }
.poslabel { font-family: var(--rounded); font-weight: 600; font-stretch: condensed; font-size: 15px; line-height: 1.15; white-space: nowrap;
  color: var(--posFill); text-shadow: var(--posShadow); transition: color 0.25s ease-in-out, text-shadow 0.25s ease-in-out; }
.poslabel.sel { color: var(--posSelFill); text-shadow: var(--posSelShadow); }

#qtitle { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; font-weight: normal; margin: 0; }
#qtitle .tline { display: flex; flex-direction: row; }
#qtitle .sr, .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#answers { position: absolute; display: flex; flex-direction: column; gap: 14px; }
/* AnswerGlassButton = the title-button glass box (style.css .gbtn), multiline FittedGlassButtonLabel, corner 34 */
.ans { height: auto; width: 100%; border: 0; padding: 0; background: none; font: inherit; text-align: center; }
.ans .label { left: 22px; right: 22px; top: 16px; bottom: 16px; height: auto; white-space: normal; display: flex; align-items: center; justify-content: center; }
.ans .label span { position: static; display: block; text-wrap: balance; line-height: 1.16; }
.ans.is-sel .lit { opacity: 1; }
.ans.is-sel { box-shadow: 8px -8px 10px var(--glow16), 11px -11px 18px var(--glow08), 0 0 28px var(--glow70); filter: brightness(1.18); }
#answers.locked .ans { pointer-events: none; }

/* ---- board (card view): ONE glass card + its control pills, the slim LIVE dial rail on the RIGHT ---- */
#board { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 auto; }
#boardGrid { display: grid; width: 100%; align-items: center; justify-content: center; }
#cardCol { display: flex; flex-direction: column; min-width: 0; }
/* the app's Live rail: a tall narrow glass capsule, chevron + LIVE on top, one knob per axis */
#bank { position: relative; border-radius: var(--railR, 34px); padding: 12px 6px 14px; background: var(--bankFill);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45), 2px 8px 24px rgba(0,0,0,0.10);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
#bank[hidden] { display: none; }
/* phone: the rail runs the card's full height, chevron over LIVE, the three knobs spread down it (the app's Live rail) */
#bank.phone { padding: 10px 4px 12px; gap: 4px; }
#bank.phone #bankHead { flex-direction: column; gap: 3px; padding: 0; }
#bank.phone #liveChev { width: 30px; height: 30px; }
#bank.phone .liveTag { font-size: 12px; }
#bank.phone #dials { flex: 1; justify-content: space-evenly; }
#bank.phone .ctl { padding-top: 4px; }
#bankHead { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 4px 2px; }
#liveChev { width: 34px; height: 34px; border-radius: 17px; }
#liveChev svg:not(.sgsvg) { width: 15px; height: 15px; }
.liveTag { font-family: 'RammettoOne', sans-serif; text-transform: uppercase; font-size: 13px; letter-spacing: 0.04em; color: var(--sbLitFill); text-shadow: var(--sbLitShadow); }
#dials { display: flex; flex-direction: column; gap: 4px; }
.ctl { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 6px; }
.ctl + .ctl { border-top: 1px solid rgba(255,255,255,0.32); }
.ctl .ctitle { font-size: var(--ctitle, 10px); line-height: 1.6; letter-spacing: 0.06em; text-align: center; transition: color 0.25s, text-shadow 0.25s; }
/* GlassRotarySwitch knob (94 pt) scaled into the rail; position label under the knob (the rail shows the current one) */
.dial { position: relative; width: 100%; outline: none; }
.dial:focus-visible .knob > svg.sgsvg { outline: 2px solid rgba(255,255,255,0.85); outline-offset: 4px; border-radius: 50%; }
.knob { position: absolute; width: 94px; height: 94px; border-radius: 50%; top: 0; cursor: pointer; transform-origin: 0 0; }
.knob .tick { position: absolute; left: 45.5px; top: 43.5px; width: 3px; height: 7px; border-radius: 1.5px; background: rgba(255,255,255,0.7); }
.knob .tick.on { background: var(--aqua); }
.knob .inner { position: absolute; left: 11px; top: 11px; width: 72px; height: 72px; border-radius: 50%; pointer-events: none; }
.knob .ring { position: absolute; inset: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); pointer-events: none; }
.knob .needle { position: absolute; left: 34.5px; top: 7.5px; width: 3px; height: 15px; border-radius: 1.5px; background: rgba(255,255,255,0.95);
  transform-origin: 1.5px 28.5px; opacity: 0; transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.2s; }
.dial.set .needle { opacity: 1; }
.dlabel { position: absolute; left: 0; right: 0; height: 24px; display: grid; place-items: center; border: 0; padding: 0; background: none; cursor: pointer; outline: none;
  opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.dlabel.cur { opacity: 1; pointer-events: auto; }
.dlabel .poslabel { font-size: var(--dlabel, 12px); }
.dlabel:focus-visible .poslabel { outline: 2px solid rgba(255,255,255,0.85); outline-offset: 2px; border-radius: 6px; }

/* the card = CardShared GlassSlabBody (frost + milk + deck colour flooding up from the bottom + spot highlights) */
.pcard { position: relative; flex: none; }
.pcard > .cfrost, .pcard > canvas.cglass { position: absolute; left: 0; top: 0; pointer-events: none; }
.pcard > canvas.cglass { z-index: 1; }
.pcard > .pin { position: relative; z-index: 2; height: 100%; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; outline: none;
  scrollbar-width: none; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fadeB, 40px)), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fadeB, 40px)), transparent); }
.pcard > .pin::-webkit-scrollbar { display: none; }
/* CardLabel: Rammetto One caps, CardPrintInk (slate ink, crisp up-lift shadow); CardBodyText: Avenir Next Condensed */
.cardTitle { font-family: 'RammettoOne', sans-serif; font-weight: normal; text-transform: uppercase; margin: 0; line-height: 1.22; letter-spacing: 0.01em;
  color: var(--cardInk); text-shadow: var(--titleInk); }
#cardBody { display: flex; flex-direction: column; }
.cbody { margin: 0; font-family: 'Avenir Next Condensed', 'AvenirNextCondensed-Regular', 'Roboto Condensed', 'Arial Narrow', var(--rounded);
  font-stretch: condensed; font-weight: 400; line-height: 1.5; color: var(--cardInk); text-shadow: var(--bodyInk); text-align: left; }
#cardBody .placeholder { opacity: 0.8; }
/* round glass control pills under the card (the app's flip / expand / deck buttons) */
#cardCtl { display: flex; justify-content: space-between; align-items: center; padding: 0 6px; }
.pill { position: relative; width: 46px; height: 46px; border-radius: 23px; border: 0; padding: 0; background: none; cursor: pointer; outline: none;
  display: grid; place-items: center; color: var(--chipIcon); -webkit-tap-highlight-color: transparent; }
.pill[hidden] { visibility: hidden; display: grid; }
.pill svg:not(.sgsvg) { width: 21px; height: 21px; filter: drop-shadow(0.56px -1.4px 0 rgba(0,0,0,0.24)); }
.pill:focus-visible > svg.sgsvg { outline: 2px solid rgba(255,255,255,0.85); outline-offset: 3px; border-radius: 50%; }

/* waitlist = the homepage signup (signup.css / signup.js), heading + form only; the column already clears the bar */
#signup { padding: 6px 0 0; width: min(440px, 100%); }
#signup[hidden] { display: none; }
/* card-view disclaimer: last line of the waitlist block (shows/hides with it), small muted type that never competes with the card */
.cardNote { margin: 4px 0 0; font-family: var(--rounded); font-weight: 600; font-size: 12px; line-height: 1.35; letter-spacing: 0.01em;
  text-align: center; color: var(--suText); opacity: 0.5; }

/* ---- shared SwitchboardGlassSurface host (= faq.css / pricing.css) ---- */
.sgs { position: relative; flex: none; isolation: isolate; }
.sgs > svg.sgsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: -1; }
#back { position: absolute; left: 16px; top: 12px; width: 46px; height: 46px; border-radius: 23px; display: grid; place-items: center;
  color: var(--chipIcon); text-decoration: none; outline: none; z-index: 5; -webkit-tap-highlight-color: transparent; }
#back svg:not(.sgsvg) { width: 19px; height: 19px; filter: drop-shadow(0.56px -1.4px 0 rgba(0,0,0,0.24)); }
#back:focus-visible > svg.sgsvg { outline: 2px solid rgba(255,255,255,0.85); outline-offset: 3px; border-radius: 23px; }
#appstore, #social { z-index: 4; }