/* The market illustration shares the hero surface, with no preview frame. */
.glass-header {
  position: sticky;
  top: 16px;
  z-index: 30;
  width: min(1280px, calc(100% - 48px));
  margin: 16px auto 0;
  border: 1px solid rgba(204, 218, 210, .65);
  border-radius: 23px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 12px 38px rgba(37, 65, 48, .065), inset 0 1px 0 #fff;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.glass-header .nav { width: 100%; height: 76px; padding-inline: 26px; }
.glass-header .brand img { width: 132px; max-height: none; }
.glass-header .reading-progress { bottom: 0; left: 23px; width: calc(100% - 46px); opacity: .4; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.glass-header .login { padding: 12px 22px; border: 1px solid #d6dfd9; border-radius: 30px; background: rgba(255,255,255,.6); }
.nav-join { min-height: 48px; border-radius: 30px; padding: 0 24px; background: var(--green); color: white; gap: 14px; font-size: 13px; }
.nav-join .mobile-label { display: none; }
.market-hero { background: #f6f8f5; margin-top: -94px; padding-top: 116px; overflow: hidden; }
.hero-intro { text-align: center; position: relative; }
.hero-intro .eyebrow { color: #627467; font-size: 10px; margin-bottom: 10px; }
.market-headline { font-size: 32px; line-height: 1.2; font-weight: 550; margin: 0 0 12px; }
.market-headline span { color: var(--green); }
.market-copy { font-size: 14px; line-height: 1.7; color: #647167; margin: 0; }
.hero-price { display: flex; justify-content: center; gap: 12px; font-size: 11px; align-items: center; margin: 17px 0 0; color: #657367; }
.hero-price strong { color: #213b2b; font-weight: 600; }
.hero-price>span { border-left: 1px solid #cdd6cd; padding-left: 12px; }
.market-experience { position: relative; margin-top: 4px; }
.market-stage { width: min(1440px, 100%); height: 230px; margin-inline: auto; position: relative; }
.stage-heading { position: absolute; left: 6%; right: 6%; top: 17px; display: flex; justify-content: space-between; color: #798c7e; font: 400 9px Geist Mono, monospace; pointer-events: none; z-index: 1; }
#marketCanvas { width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: crosshair; opacity: 0; transition: opacity 400ms ease; }
.canvas-ready #marketCanvas { opacity: 1; }
.market-fallback { position: absolute; inset: 70px 10%; display: flex; align-items: center; justify-content: space-around; border-bottom: 1px solid #aac1a9; color: #668569; font-size: 13px; }
.canvas-ready .market-fallback { display: none; }
.scene-label { position: absolute; pointer-events: none; display: grid; gap: 5px; color: #425d48; font-size: 11px; }
.label-kicker { font: 400 8px Geist Mono, monospace; color: #82927e; }
.label-start { left: 10%; top: 71px; }
.label-end { right: 11%; bottom: 35px; }
.motion-toggle { position: absolute; bottom: 14px; right: 3%; border: 1px solid #d4ded0; background: rgba(255,255,255,.7); width: 34px; height: 34px; border-radius: 50%; color: #456149; cursor: pointer; font-size: 14px; line-height: 1; }
.motion-toggle[hidden] { display: none; }
.market-controls { max-width: 690px; text-align: center; padding-bottom: 20px; }
.market-scrubber { display: block; appearance: none; -webkit-appearance: none; width: 170px; height: 28px; padding: 0; margin: -4px auto 11px; background: transparent; cursor: ew-resize; touch-action: pan-y; accent-color: var(--green); }
.market-scrubber::-webkit-slider-runnable-track { height: 2px; background: #cbd8c5; border-radius: 2px; }
.market-scrubber::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 10px; background: #547654; border-radius: 4px; margin-top: -4px; border: 2px solid #f6f8f5; box-shadow: 0 0 0 1px #aabb9e; }
.market-scrubber::-moz-range-track { height: 2px; background: #cbd8c5; }
.market-scrubber::-moz-range-thumb { width: 20px; height: 8px; background: #547654; border-radius: 4px; border: 2px solid #f6f8f5; }
.perspectives { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 480px; margin: 0 auto; border: 1px solid #d6dfd1; border-radius: 30px; padding: 4px; background: rgba(255,255,255,.55); }
.perspectives button { border: 0; border-radius: 24px; min-height: 39px; font-size: 12px; background: transparent; color: #67735f; cursor: pointer; transition: background 250ms cubic-bezier(0.22,1,0.36,1), color 250ms cubic-bezier(0.22,1,0.36,1); white-space: nowrap; }
.perspectives button[aria-pressed=true] { background: #244d38; color: #f6fff2; }
.mode-mark { margin-right: 6px; font-size: 15px; }
.perspective-copy { min-height: 38px; margin: 14px 0 0; font-size: 12px; color: #6a7566; text-wrap: balance; }
.perspective-copy strong { color: #36583c; font-weight: 550; }
.scene-invitation { display: flex; justify-content: center; align-items: center; gap: 18px; min-height: 52px; opacity: 0; visibility: hidden; transform: translateY(7px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), visibility 500ms; }
.scene-invitation.is-ready { opacity: 1; visibility: visible; transform: none; }
.scene-invitation>span { font-size: 11px; color: #52694e; max-width: 240px; }
.scene-invitation .button { min-height: 42px; font-size: 12px; padding-inline: 18px; gap: 22px; border-radius: 24px; }
.perspective-check { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 30px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 45px; }
.perspective-check .eyebrow { color: #687865; font-size: 9px; margin-bottom: 12px; }
.perspective-check h3 { font-size: 25px; line-height: 1.25; font-weight: 550; margin: 0; }
.check-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.check-choices button { display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #d6dfd2; border-radius: 4px; background: #fff; color: #496143; padding: 12px 14px; font-size: 11px; cursor: pointer; transition: background 250ms cubic-bezier(0.22,1,0.36,1), color 250ms cubic-bezier(0.22,1,0.36,1); }
.check-choices button[aria-pressed=true] { background: #edf3df; color: #243e20; border-color: #a8bb99; }
.check-answer { min-height: 68px; color: #64705c; font-size: 13px; margin: 16px 0 0; }
.steps article:after { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 100%; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-out); }
.steps article.is-reached:after { transform: scaleX(1); }
.word-stack>span { display: block; }
@media (hover:hover) and (pointer:fine) {
  .nav-join:hover { background: #104b36; color: white !important; }
  .glass-header .login:hover { background: #f5f8f1; }
  .perspectives button:not([aria-pressed=true]):hover { background: #e6eddd; color: #264e30; }
  .check-choices button:hover { background: #f4f7ef; }
  .motion-toggle:hover { background: white; }
}
@media (max-width:1000px) {
  .glass-header .nav { padding-inline: 20px; }
  .glass-header .brand img { width: 108px; }
  .glass-header nav { gap: 18px; font-size: 12px; }
  .nav-join { padding-inline: 18px; font-size: 12px; }
  .market-hero { padding-top: 130px; }
  .market-headline { font-size: 33px; }
  .market-stage { height: 260px; }
  .label-start { left: 7%; }
  .label-end { right: 9%; }
}
@media (max-width:700px) {
  .glass-header { top: 10px; width: calc(100% - 24px); margin-top: 10px; border-radius: 19px; }
  .glass-header .nav { height: 62px; padding-inline: 14px; gap: 12px; }
  .glass-header .brand img { width: 98px; }
  .glass-header .login { padding: 10px 13px; font-size: 11px; }
  .nav-actions { gap: 7px; }
  .nav-join { min-height: 38px; padding-inline: 15px; gap: 12px; font-size: 11px; }
  .nav-join .desktop-label { display: none; }
  .nav-join .mobile-label { display: inline; }
  .market-hero { margin-top: -74px; padding-top: 104px; }
  .hero-intro .eyebrow { font-size: 8px; margin-bottom: 12px; }
  .market-headline { font-size: 27px; line-height: 1.2; margin-bottom: 14px; }
  .market-copy { font-size: 12px; line-height: 1.7; max-width: 360px; margin-inline: auto; }
  .market-copy br { display: none; }
  .hero-price { font-size: 10px; gap: 9px; margin-top: 14px; }
  .hero-price>span { padding-left: 9px; }
  .market-stage { height: 214px; }
  .stage-heading { font-size: 7px; top: 14px; left: 7%; right: 7%; }
  .scene-label { font-size: 9px; gap: 3px; }
  .label-kicker { font-size: 6px; }
  .label-start { top: 44px; left: 8%; }
  .label-end { bottom: 29px; right: 11%; }
  .motion-toggle { width: 28px; height: 28px; bottom: 0; right: 4%; font-size: 12px; }
  .market-controls { padding-bottom: 15px; }
  .market-scrubber { width: 120px; margin-bottom: 7px; margin-top: 0; height: 25px; }
  .perspectives { padding: 3px; }
  .perspectives button { min-height: 36px; font-size: 10px; }
  .mode-mark { font-size: 12px; margin-right: 4px; }
  .perspective-copy { font-size: 11px; min-height: 36px; margin-top: 12px; }
  .scene-invitation { gap: 10px; min-height: 50px; }
  .scene-invitation>span { max-width: 170px; font-size: 10px; text-align: left; }
  .scene-invitation .button { padding-inline: 14px; gap: 15px; min-height: 38px; font-size: 10px; white-space: nowrap; }
  .perspective-check { grid-template-columns: 1fr; gap: 22px; margin-top: 36px; padding-top: 26px; }
  .perspective-check h3 { font-size: 23px; }
  .check-choices { display: grid; grid-template-columns: 1fr; }
  .check-choices button { min-height: 44px; font-size: 12px; }
  .check-answer { min-height: 80px; font-size: 12px; }
}
@media (max-width:360px) {
  .glass-header .brand img { width: 84px; }
  .glass-header .nav { padding-inline: 11px; gap: 8px; }
  .nav-join { padding-inline: 12px; gap: 8px; }
  .glass-header .login { padding-inline: 10px; }
  .market-headline { font-size: 23px; }
  .market-copy { font-size: 11px; }
  .market-stage { height: 185px; }
  .scene-invitation>span { max-width: 138px; }
}
@media (max-width:700px) and (max-height:760px) {
  .market-hero { padding-top: 94px; }
  .hero-intro .eyebrow { margin-bottom: 8px; }
  .market-headline { font-size: 23px; margin-bottom: 10px; }
  .market-copy { font-size: 11px; }
  .hero-price { margin-top: 10px; }
  .market-stage { height: 160px; }
  .label-start { top: 35px; }
  .label-end { bottom: 22px; }
  .market-controls { padding-bottom: 10px; }
  .scene-invitation { min-height: 44px; }
}
@media (max-width:700px) and (max-height:700px) {
  .market-stage { height: 130px; }
  .scene-label { display: none; }
}
@media (prefers-reduced-motion:reduce) {
  #marketCanvas, .scene-invitation, .steps article:after { transition: none; transform: none; }
}