/* Solutions and Marketplace pages */
#site-menu { display:none; position:fixed; inset:0; z-index:60; background:rgba(21,20,15,.35); backdrop-filter:blur(3px); }
#site-menu .panel { position:absolute; top:0; right:0; bottom:0; width:min(340px,88vw); background:#fff; padding:26px 28px 30px; display:flex; flex-direction:column; overflow-y:auto; box-shadow:-20px 0 60px rgba(0,0,0,.18); }
.menu-link { display:block; font-family:var(--font-display); font-size:20px; color:var(--text); text-decoration:none; padding:13px 0; border-bottom:1px solid var(--black-border); }
#menu-btn { background:none; border:1px solid var(--black-border); border-radius:10px; width:42px; height:42px; cursor:pointer; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; }
#menu-btn span { display:block; width:18px; height:1.5px; background:var(--text); }

.s-sec { padding:72px 0; }
.s-sec.tint { background:#F6F3EC; }
.s-h2 { font-size:clamp(26px,3.4vw,38px); line-height:1.15; }
.s-sub { color:var(--ink-2); font-size:16px; line-height:1.75; margin-top:12px; max-width:640px; }
.crumb { font-size:13px; color:var(--ink-3); }
.crumb a { color:var(--ink-3); text-decoration:none; } .crumb a:hover { color:var(--text); }

/* hero: words left, a piece of the product right */
.sh { padding:128px 0 56px; }
.sh-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center; }
.sh h1 { font-size:clamp(34px,4.8vw,54px); line-height:1.08; margin-top:12px; }
.sh .lede { margin-top:18px; max-width:540px; }
.sh-cta { display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.sh-cta .btn { padding:14px 26px; }
.sh-note { font-size:13px; color:var(--ink-3); margin-top:12px; }

/* product mockups */
.mk { background:#F6F3EC; border-radius:20px; padding:22px; position:relative; }
.mk-card { background:#fff; border:1px solid #E7E3D8; border-radius:12px; padding:14px; box-shadow:0 10px 26px rgba(26,23,18,.06); }
.mk-card + .mk-card { margin-top:10px; }
.mk-h { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; color:var(--ink-3); margin-bottom:8px; }
.mk-h b { color:var(--text); font-size:13px; }
.mk-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-top:1px solid #EFEBE1; font-size:13.5px; }
.mk-row:first-of-type { border-top:0; }
.mk-row span { min-width:0; } .mk-row small { display:block; color:var(--ink-3); font-size:11.5px; }
.mk-row b { flex:none; white-space:nowrap; }
.chip { display:inline-block; font-size:11.5px; font-weight:600; border-radius:999px; padding:3px 9px; background:#F1EEE6; color:var(--ink-2); white-space:nowrap; }
.chip.g { background:var(--success-bg); color:var(--success); } .chip.y { background:var(--warning-bg); color:var(--warning); } .chip.k { background:var(--gold-tint); color:var(--gold); }
.mk-btn { display:inline-block; background:var(--ink); color:#fff; border-radius:8px; font-size:12px; font-weight:600; padding:6px 11px; }
.mk-btn.gh { background:#fff; color:var(--ink); border:1px solid #D9D3C5; }
.mk-type { font-size:14px; line-height:1.55; color:var(--text); background:#FBFAF6; border:1px solid #E7E3D8; border-radius:10px; padding:12px; }
.mk-type::after { content:""; display:inline-block; width:1.5px; height:15px; background:var(--gold); margin-left:2px; vertical-align:-2px; animation:blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity:0; } }
.mk-chain { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mk-chain .mk-card { flex:1; min-width:118px; padding:11px; margin:0; }
.mk-chain .ar { color:var(--ink-3); font-size:13px; }
.mk-float { position:absolute; right:-10px; bottom:-14px; background:#fff; border:1px solid #E7E3D8; border-radius:999px; padding:8px 14px; font-size:12.5px; font-weight:600; box-shadow:0 10px 26px rgba(26,23,18,.10); }

/* where this fits: the five stages, current one marked */
.e2e { display:flex; align-items:stretch; gap:0; margin-top:26px; overflow-x:auto; scrollbar-width:none; }
.e2e::-webkit-scrollbar { display:none; }
.e2e a { flex:1 1 0; min-width:150px; display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid #E7E3D8; background:#fff; text-decoration:none; color:var(--text); position:relative; }
.e2e a + a { border-left:0; }
.e2e a:first-child { border-radius:12px 0 0 12px; } .e2e a:last-child { border-radius:0 12px 12px 0; }
.e2e a .n { font-size:12px; color:var(--ink-3); }
.e2e a b { font-size:14px; font-weight:600; line-height:1.3; }
.e2e a .ic { width:32px; height:32px; border-radius:8px; background:var(--gold-tint); color:var(--gold); display:flex; align-items:center; justify-content:center; }
.e2e a .ic svg { width:17px; height:17px; }
.e2e a:not(:last-child)::after { content:""; position:absolute; right:-7px; top:50%; width:12px; height:12px; background:#fff; border-right:1px solid #E7E3D8; border-top:1px solid #E7E3D8; transform:translateY(-50%) rotate(45deg); z-index:1; }
.e2e a.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.e2e a.on .n { color:#C9C5B8; } .e2e a.on .ic { background:rgba(255,255,255,.12); color:#E2C877; }
.e2e a.on:not(:last-child)::after { background:var(--ink); border-color:var(--ink); }
.e2e a:hover:not(.on) { background:#FBFAF6; }

/* features */
.feat { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:30px; }
.feat > div { background:#fff; border:1px solid #E7E3D8; border-radius:14px; padding:22px; }
.s-sec.tint .feat > div { border-color:#E7E3D8; }
.feat h3 { font-size:17px; display:flex; gap:10px; align-items:center; }
.feat h3::before { content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--gold-display); }
.feat p { font-size:14.5px; color:var(--ink-2); line-height:1.65; margin-top:8px; }
.feat .pl { display:inline-block; font-size:11.5px; font-weight:600; color:var(--gold); background:var(--gold-tint); border-radius:999px; padding:2px 8px; margin-left:auto; }

/* how it works */
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:30px; counter-reset:st; }
.steps > div { border-top:2px solid var(--ink); padding-top:16px; }
.steps > div::before { counter-increment:st; content:counter(st); font-family:var(--font-display); font-size:30px; color:var(--gold-display); line-height:1; }
.steps h3 { font-size:17px; margin-top:10px; } .steps p { font-size:14.5px; color:var(--ink-2); line-height:1.65; margin-top:6px; }

.fee { margin-top:30px; background:#fff; border:1px solid #E7E3D8; border-radius:14px; padding:18px 20px; font-size:14.5px; line-height:1.7; color:var(--ink-2); }
.fee b { color:var(--text); }

.next { display:flex; justify-content:space-between; align-items:center; gap:16px; text-decoration:none; color:var(--text); background:#fff; border:1px solid #E7E3D8; border-radius:14px; padding:20px 22px; margin-top:14px; }
.next small { display:block; font-size:12.5px; color:var(--ink-3); } .next b { font-size:18px; font-weight:600; }
.next::after { content:""; flex:none; width:9px; height:9px; border-right:2px solid var(--gold); border-top:2px solid var(--gold); transform:rotate(45deg); transition:transform .2s; }
.next:hover::after { transform:translateX(4px) rotate(45deg); }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.band { background:#15140F; color:#fff; padding:64px 0; text-align:center; }
.band h2 { color:#fff; font-size:clamp(26px,3.4vw,38px); }
.band p { color:#C9C5B8; margin:12px auto 0; max-width:560px; line-height:1.7; }
.band .btn-gold { background:#fff; color:var(--ink); } .band .btn-ghost { color:#fff; border-color:rgba(255,255,255,.5); }
.band .sh-cta { justify-content:center; }

/* overview page: the event, before, on the night, after */
.flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px; margin-top:34px; position:relative; }
.flow .ph { position:relative; }
.flow .ph h3 { font-size:13px; font-weight:600; color:var(--ink-3); }
.flow .ph:not(:last-child)::after { content:""; position:absolute; right:-23px; top:52%; width:12px; height:12px; border-right:2px solid var(--gold-display); border-top:2px solid var(--gold-display); transform:rotate(45deg); }
.flow a { display:flex; gap:12px; align-items:center; background:#fff; border:1px solid #E7E3D8; border-radius:12px; padding:14px; margin-top:10px; text-decoration:none; color:var(--text); }
.flow a:hover { border-color:var(--gold-display); }
.flow a .ic { flex:none; width:36px; height:36px; border-radius:9px; background:var(--gold-tint); color:var(--gold); display:flex; align-items:center; justify-content:center; }
.flow a .ic svg { width:19px; height:19px; }
.flow a b { display:block; font-size:14.5px; font-weight:600; } .flow a small { display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px; }
.flow .tag { display:flex; gap:12px; align-items:center; background:transparent; border:1px dashed #D9D3C5; border-radius:12px; padding:14px; margin-top:10px; font-size:13.5px; color:var(--ink-2); }

/* marketplace */
.mp3 { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:30px; }
.mp3 > div { background:#fff; border:1px solid #E7E3D8; border-radius:14px; padding:18px; position:relative; }
.mp3 .who { font-size:12px; font-weight:600; color:var(--gold); }
.mp3 h3 { font-size:15.5px; margin-top:8px; line-height:1.35; } .mp3 p { font-size:13.5px; color:var(--ink-2); line-height:1.6; margin-top:6px; }
.mp3 > div:not(:last-child)::after { content:""; position:absolute; right:-9px; top:50%; width:8px; height:8px; border-right:2px solid var(--gold-display); border-top:2px solid var(--gold-display); transform:translateY(-50%) rotate(45deg); z-index:1; }
.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:start; }
.need { background:#fff; border:1px solid #E7E3D8; border-radius:18px; padding:22px; box-shadow:0 16px 40px rgba(26,23,18,.06); }
.need label { margin-top:0; }
.need textarea { min-height:120px; resize:vertical; font:inherit; font-size:15px; line-height:1.6; }
.ex { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.ex button { border:1px solid #E7E3D8; background:#FBFAF6; color:var(--ink-2); border-radius:999px; padding:7px 12px; font:inherit; font-size:13px; cursor:pointer; text-align:left; }
.ex button:hover { border-color:var(--gold-display); color:var(--text); }
.need .btn { width:100%; margin-top:14px; padding:14px; }
.need .small { font-size:13px; color:var(--ink-3); margin-top:10px; line-height:1.6; }
.ticks { list-style:none; padding:0; margin:18px 0 0; }
.ticks li { display:flex; gap:10px; padding:7px 0; font-size:15px; line-height:1.55; color:var(--ink-2); }
.ticks li::before { content:""; flex:none; width:10px; height:6px; border-left:2px solid var(--gold-display); border-bottom:2px solid var(--gold-display); transform:rotate(-45deg); margin-top:7px; }
.ticks b { color:var(--text); font-weight:600; }
.money { background:#FBFAF6; border:1px solid #E7E3D8; border-radius:14px; padding:18px; margin-top:18px; font-size:14px; }
.money div { display:flex; justify-content:space-between; gap:12px; padding:5px 0; } .money div b { white-space:nowrap; }
.money .t { border-top:1px solid #E7E3D8; margin-top:6px; padding-top:9px; font-weight:600; }
.money p { font-size:12.5px; color:var(--ink-3); margin-top:8px; line-height:1.55; }
.cats { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.cats span { background:#fff; border:1px solid #E7E3D8; border-radius:999px; padding:8px 14px; font-size:14px; }
.qa { margin-top:26px; border-top:1px solid #E7E3D8; }
.qa details { border-bottom:1px solid #E7E3D8; padding:16px 0; }
.qa summary { cursor:pointer; font-weight:600; font-size:15.5px; list-style:none; display:flex; justify-content:space-between; gap:14px; }
.qa summary::-webkit-details-marker { display:none; }
.qa summary::after { content:""; flex:none; width:7px; height:7px; border-right:1.8px solid var(--ink-3); border-bottom:1.8px solid var(--ink-3); transform:rotate(45deg); margin-top:6px; transition:transform .2s; }
.qa details[open] summary::after { transform:rotate(-135deg); margin-top:10px; }
.qa p { font-size:14.5px; color:var(--ink-2); line-height:1.7; margin-top:10px; max-width:720px; }
[id] { scroll-margin-top:90px; }

@media (max-width:980px) {
  .sh-grid, .split { grid-template-columns:1fr; gap:32px; }
  .mp3 { grid-template-columns:1fr; }
  .mp3 > div:not(:last-child)::after { right:auto; left:24px; top:auto; bottom:-9px; transform:rotate(135deg); }
  .flow { grid-template-columns:1fr; gap:26px; }
  .flow .ph:not(:last-child)::after { right:auto; left:50%; top:auto; bottom:-19px; transform:translateX(-50%) rotate(135deg); }
}
@media (max-width:720px) {
  .s-sec { padding:52px 0; }
  .sh { padding:104px 0 40px; }
  .feat, .steps, .pair { grid-template-columns:1fr; }
  .steps { gap:22px; }
  .mk { padding:14px; border-radius:16px; }
  .mk-float { right:8px; bottom:-14px; }
  .e2e { margin-left:-18px; margin-right:-18px; padding:0 18px; }
  .e2e a { min-width:136px; padding:13px; }
  .sh-cta .btn { flex:1; text-align:center; }
  .mk-chain .ar { display:none; }
  .mk-chain .mk-card { min-width:0; flex:1 1 0; padding:9px; }
  .mk-chain .chip { font-size:10.5px; padding:2px 7px; }
}