/* Landing page (index.html) only. Layers on marketing.css — the other public
   pages (about, how-it-works, links) keep that file's narrow 720px column; the
   landing page is the one place that needs room for a bento grid and the demo
   frame, so it widens everything under body.landing. */

body.landing {
  --catclr-queer: #DA2F76; --catclr-cultural: #CD1D23; --catclr-market: #D4431E;
  --catclr-theater: #F5D15C; --catclr-music: #117845; --catclr-artsy: #177EB2;
  --catclr-game: #2D4ED2; --catclr-nightlife: #972FB1; --catclr-film: #78695E;
  --catclr-class: #603BCE; --catclr-outdoor: #2FBE5E; --catclr-deals: #198383;
  --catclr-misc: #7C6EA2;
  --inkfix: #221D1A;
  scroll-behavior: smooth;
}
html { scroll-behavior: smooth; scroll-padding-top: 12px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.l-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.l-section { padding-top: 64px; padding-bottom: 8px; }
.l-head { margin-bottom: 34px; }
.l-head h2 { font-size: clamp(24px, 4vw, 36px); text-wrap: balance; }

.landing .m-nav-in { max-width: 1120px; }
.landing .m-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
@media (max-width: 720px) { .l-nav-hide { display: none; } }

/* ---------- Hero ---------- */
.l-hero { min-height: 78vh; min-height: 78svh; }
.l-hero .m-hero-content { max-width: 860px; padding: 110px 20px 90px; gap: 20px; }
.l-hero .m-hero-content h1 { font-size: clamp(40px, 8vw, 84px); max-width: 14ch; }
.l-hero .m-hero-content p.lede { font-size: clamp(16px, 1.9vw, 19px); max-width: 52ch; }
.l-btn-yellow { background: var(--yellow); color: #221D1A; border-color: var(--yellow); font-size: 16px; padding: 15px 30px; box-shadow: 0 8px 22px -8px rgba(0,0,0,.55); }
.l-btn-yellow:hover { background: #FFE97F; border-color: #FFE97F; transform: translateY(-1px); }
.l-btn-ghost { background: rgba(20,13,9,.35); color: #fff; border-color: rgba(255,255,255,.7); font-size: 16px; padding: 15px 30px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.l-btn-ghost:hover { background: rgba(255,255,255,.16); }
.l-hero-fine { margin: 2px 0 0; font-size: 13px; color: #E7DFD3; text-shadow: 0 1px 3px rgba(0,0,0,.85); }

/* ---------- Ticker of real events ---------- */
.l-ticker-sec { padding: 8px 0 0; }
.l-ticker { overflow: hidden; padding: 10px 0 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.l-ticker-track { display: flex; width: max-content; animation: l-scroll 200s linear infinite; }
.l-ticker:hover .l-ticker-track, .l-ticker:focus-within .l-ticker-track { animation-play-state: paused; }
@keyframes l-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .l-ticker { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .l-ticker-track { animation: none; }
}
/* Phones: a CSS-animated, masked, max-content track renders blank on some mobile
   browsers, so use a plain swipeable row instead (no mask, no loop, no duplicate set). */
@media (max-width: 760px), (hover: none) {
  .l-ticker { overflow-x: auto; -webkit-overflow-scrolling: touch; -webkit-mask-image: none; mask-image: none; padding-left: 20px; padding-right: 20px; scroll-snap-type: x proximity; }
  .l-ticker-track { animation: none; width: max-content; }
  .l-ticker .l-card { scroll-snap-align: start; }
  .l-ticker .l-card[aria-hidden="true"] { display: none; }
}
.l-ticker-note { text-align: center; color: var(--muted); font-size: 13px; margin: 0; padding: 0 20px; }

.l-ticker-note-lead { font-size: 15px; color: var(--ink); margin-bottom: 4px; }

.l-card {
  --cat-color: var(--catclr-misc);
  flex: none; width: 262px; margin-right: 16px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; padding: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-2); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex; flex-direction: column;
}
.l-card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--shadow-3); border-color: var(--rust); }
.l-card-photo { height: 132px; background: var(--border) center/cover no-repeat; position: relative; }
.l-card-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--cat-color); }
.l-card-body { padding: 13px 15px 16px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.l-card-when { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--rust); }
.l-card-title { font-weight: 700; font-size: 15px; line-height: 1.28; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.l-card-where { font-size: 12.5px; color: var(--muted); margin: 0; }
.l-card-tags { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; }
.l-pill { font-size: 10.5px; font-weight: 800; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; background: var(--cat-color); color: #fff; }
.l-pill.free { background: var(--yellow); color: #221D1A; }
.l-card.cat-theater .l-pill:not(.free), .l-card.cat-outdoor .l-pill:not(.free) { color: var(--inkfix); }

/* ---------- Stats ---------- */
.l-stats-sec { padding-top: 40px; }
.l-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.l-stat { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 24px 18px; text-align: center; box-shadow: var(--shadow-2); }
.l-stat-num { display: block; font-family: var(--font-headline); font-size: clamp(28px, 4vw, 40px); color: var(--rust); line-height: 1; margin-bottom: 8px; }
.l-stat-label { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
@media (max-width: 760px) { .l-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Bento ---------- */
.l-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.l-bento > .l-tile { grid-column: span 2; }
.l-bento > .l-tile:nth-child(n+5) { grid-column: span 3; }
.l-tile {
  background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 26px 24px 24px;
  box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.l-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.l-bento > .l-tile-wide { grid-column: 1 / -1; flex-direction: row; align-items: stretch; gap: 32px; background: linear-gradient(135deg, var(--card) 55%, color-mix(in srgb, var(--yellow) 22%, var(--card))); }
.l-tile-text { flex: 1 1 0; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.l-tile-tag { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--rust); background: rgba(178,58,46,.1); padding: 4px 10px; border-radius: 999px; }
.l-tile h3 { font-family: "Source Serif 4", Georgia, serif; font-size: clamp(19px, 2.2vw, 23px); line-height: 1.22; margin: 0; }
.l-tile-wide h3 { font-size: clamp(22px, 3vw, 30px); }
.l-tile p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.l-try {
  align-self: flex-start; margin-top: auto; font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer;
  color: var(--rust); background: none; border: none; padding: 6px 0 0; border-bottom: 2px solid transparent;
}
.l-try:hover { color: var(--rust-dim); text-decoration: underline; text-underline-offset: 3px; }
/* Touch screens: the text link is 26px tall, so give it a 44px tap height. */
@media (pointer: coarse) { .l-try { min-height: 44px; display: inline-flex; align-items: center; } }
@media (max-width: 900px) { .l-bento { grid-template-columns: repeat(2, 1fr); } .l-bento > .l-tile, .l-bento > .l-tile:nth-child(n+5) { grid-column: span 1; } .l-bento > .l-tile-wide { grid-column: 1 / -1; } }
@media (max-width: 620px) { .l-bento { grid-template-columns: 1fr; } .l-bento > .l-tile, .l-bento > .l-tile:nth-child(n+5), .l-bento > .l-tile-wide { grid-column: auto; } .l-tile-wide { flex-direction: column; } }

/* mini calendar */
.l-mini-cal { flex: 1.1 1 0; min-width: 0; background: var(--cream); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; align-self: center; width: 100%; box-shadow: var(--shadow-1, none); }
.l-mini-cal-head { display: grid; grid-template-columns: repeat(4, 1fr); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 9px 0; border-bottom: 1px solid var(--border); background: var(--card); }
.l-mini-cal-body { display: grid; grid-template-columns: repeat(4, 1fr); height: 190px; }
.l-mini-col { position: relative; border-left: 1px solid var(--border); }
.l-mini-col:first-child { border-left: none; }
.mc { position: absolute; left: 4px; right: 4px; top: var(--t); height: var(--h); border-radius: 7px; background: var(--c); padding: 3px 5px; overflow: hidden; font-style: normal; display: block; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.mc b { font-size: 10px; font-weight: 700; line-height: 1.15; color: #fff; display: block; }
.mc-outdoor { --c: var(--catclr-outdoor); } .mc-outdoor b { color: var(--inkfix); }
.mc-music { --c: var(--catclr-music); } .mc-artsy { --c: var(--catclr-artsy); } .mc-class { --c: var(--catclr-class); }
.mc-queer { --c: var(--catclr-queer); } .mc-game { --c: var(--catclr-game); } .mc-film { --c: var(--catclr-film); }
.mc-market { --c: var(--catclr-market); }
@media (max-width: 420px) { .mc b { font-size: 9px; } }

/* mini search / chips / map / venues / lists */
.l-mock-search { display: flex; align-items: center; gap: 8px; background: var(--cream); border: 1px solid var(--border); border-radius: 999px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.l-mock-search svg { color: var(--muted); flex: none; }
.l-mock-search span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.l-chips span { font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--cream); color: var(--ink); }
.l-chips span.on { background: var(--rust); border-color: var(--rust); color: var(--card); }
.l-mock-map { position: relative; height: 104px; border-radius: 14px; border: 1px solid var(--border); overflow: hidden;
  background:
    linear-gradient(115deg, transparent 47%, rgba(110,98,89,.18) 47.4%, rgba(110,98,89,.18) 48.6%, transparent 49%),
    linear-gradient(20deg, transparent 58%, rgba(110,98,89,.14) 58.4%, rgba(110,98,89,.14) 59.4%, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(110,98,89,.09) 22px 23px),
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(110,98,89,.09) 26px 27px),
    var(--cream); }
.l-mock-map i { position: absolute; left: var(--x); top: var(--y); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--rust); border: 2px solid var(--card); box-shadow: 0 1px 4px rgba(0,0,0,.3); color: var(--card); font: 700 11px/14px "Public Sans", sans-serif; text-align: center; font-style: normal; }
.l-mock-map i.big { width: 28px; height: 28px; margin: -14px 0 0 -14px; line-height: 24px; }
.l-venue-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.l-venue-photos a { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--border); text-decoration: none; }
.l-venue-photos a:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }
.l-venue-photos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.l-venue-photos a:hover img { transform: scale(1.07); }
.l-venue-photos span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 7px; font-size: 10.5px; font-weight: 700; line-height: 1.2; color: #fff; background: linear-gradient(0deg, rgba(20,13,9,.78), transparent); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.l-mock-lists { display: flex; flex-direction: column; gap: 7px; }
.l-mock-lists span { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; background: var(--cream); border: 1px solid var(--border); border-radius: 12px; padding: 9px 13px; }
.l-mock-lists span:first-child { color: var(--rust); }
.l-mock-lists em { font-style: normal; font-size: 11.5px; font-weight: 800; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; color: var(--muted); }

/* ---------- Demo ---------- */
.l-demo-sec {
  margin-top: 72px; padding: 72px 0 64px; position: relative;
  background:
    radial-gradient(ellipse 800px 380px at 85% 0%, rgba(255,222,89,.22), transparent 65%),
    radial-gradient(ellipse 800px 420px at 8% 100%, rgba(178,58,46,.14), transparent 65%),
    color-mix(in srgb, var(--cream) 82%, #E0D2BE);
  border-block: 1px solid var(--border);
  scroll-margin-top: 54px;
}
:root[data-theme="dark"] .l-demo-sec { background: radial-gradient(ellipse 800px 400px at 85% 0%, rgba(255,222,89,.07), transparent 65%), #151210; }
.l-demo-sub { margin: 12px auto 0; max-width: 58ch; color: var(--muted); font-size: 16px; line-height: 1.55; }
.l-demo-picks { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 0 0 22px; }
.l-demo-picks-label { font-size: 13px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.l-demo-picks button { font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--ink); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 8px 15px; box-shadow: var(--shadow-1, none); transition: all .15s ease; }
.l-demo-picks button:hover { border-color: var(--rust); color: var(--rust); transform: translateY(-1px); }

.l-browser { border-radius: 18px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 40px 80px -30px rgba(34,29,26,.5), 0 6px 18px rgba(34,29,26,.1); overflow: hidden; max-width: 1080px; margin: 0 auto; }
.l-browser-bar { display: flex; align-items: center; gap: 14px; padding: 11px 16px; background: var(--cream); border-bottom: 1px solid var(--border); }
.l-dots { display: flex; gap: 7px; }
.l-dots i { width: 11px; height: 11px; border-radius: 50%; background: #D9CBB9; display: block; }
.l-dots i:nth-child(1) { background: #E8786C; } .l-dots i:nth-child(2) { background: #F0C45A; } .l-dots i:nth-child(3) { background: #7FBF7A; }
.l-url { flex: 1; min-width: 0; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-fullscreen { font-size: 12.5px; font-weight: 700; color: var(--rust); text-decoration: none; white-space: nowrap; }
.l-fullscreen:hover { text-decoration: underline; }
.l-demo-frame { display: block; width: 100%; height: min(780px, 82vh); min-height: 520px; border: 0; background: var(--cream); }
.l-demo-foot { text-align: center; font-size: 13.5px; color: var(--muted); margin: 18px 0 0; }
@media (max-width: 560px) {
  .l-dots { display: none; }
  .l-demo-frame { height: 74vh; }
}

/* ---------- Steps ---------- */
.l-steps { max-width: 880px; margin: 0 auto; }
.l-steps .m-step-num { width: 48px; height: 48px; font-size: 20px; }
.l-steps .m-step-connector { top: 24px; }
.l-steps .m-step-title { font-size: 16px; }
.l-steps .m-step-desc { font-size: 14px; max-width: 26ch; margin: 0 auto; }

/* ---------- Pricing ---------- */
.l-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 720px; margin: 0 auto; }
.l-plan { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 30px 26px 28px; text-align: center; box-shadow: var(--shadow-2); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.l-plan-best { border: 2px solid var(--rust); box-shadow: var(--shadow-3); }
.l-plan-flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--yellow); color: #221D1A; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 13px; border-radius: 999px; box-shadow: var(--shadow-2); white-space: nowrap; }
.l-plan-name { margin: 0; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.l-plan-price { margin: 0; font-size: 15px; color: var(--muted); }
.l-plan-price span { font-family: var(--font-headline); font-size: 52px; color: var(--rust); line-height: 1.1; margin-right: 4px; }
.l-plan-note { margin: 0 0 12px; font-size: 14px; color: var(--muted); min-height: 1.4em; }
@media (max-width: 560px) { .l-plans { grid-template-columns: 1fr; } }
.l-includes { list-style: none; padding: 0; margin: 28px auto 0; max-width: 720px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.l-includes li { font-size: 14px; color: var(--ink); padding-left: 24px; position: relative; }
.l-includes li::before { content: ""; position: absolute; left: 0; top: .28em; width: 14px; height: 14px; border-radius: 50%; background: var(--rust); }
.l-includes li::after { content: ""; position: absolute; left: 4.5px; top: calc(.28em + 3px); width: 4px; height: 7px; border: solid var(--card); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.9); }

/* ---------- FAQ + final ---------- */
.l-faq { max-width: 760px; margin: 0 auto; }
.l-faq-more { text-align: center; margin: 22px 0 0; font-size: 14px; font-weight: 600; }
.l-final { padding-bottom: 0; }
.l-cta { padding: 64px 28px 54px; }
.l-cta h2 { font-size: clamp(30px, 5vw, 48px); }
.l-cta p { font-size: 16px; }
.l-cta-login { margin: 22px auto 0 !important; font-size: 13.5px !important; color: #F3E3D9; }
.l-cta-login a { color: var(--yellow); font-weight: 700; }
.landing .m-footer { padding-top: 40px; max-width: 1120px; }

/* ---------- Scroll reveal (only when JS is on, so nothing is ever hidden without it) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.js [data-reveal].in { opacity: 1; transform: none; }
.js .l-bento [data-reveal]:nth-child(2n).in { transition-delay: .06s; }
.js .l-bento [data-reveal]:nth-child(3n).in { transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- Phone tweaks (<=620px) ----------
   The wide "Google Calendar" tile is styled as a row by `.l-bento > .l-tile-wide`,
   which outranks the stacking rule in the bento breakpoint above, so on phones
   the mini calendar was squeezed beside the text and its event names got cut off.
   Stack it here with enough specificity to win. */
@media (max-width: 620px) {
  .l-bento > .l-tile-wide { flex-direction: column; gap: 20px; }
  .l-bento > .l-tile-wide .l-mini-cal { flex: none; width: 100%; }
  .l-tile { padding: 22px 20px 20px; }
}