/* ==========================================================================
   PHLIP — publish.css for Obsidian Publish
   Design language: the app's ticket-stub Events board.
   Perforated dividers, punched-notch cards, stamped serial codes.
   Palette: Paper #FFFFFF · Ink #20242B · Raffle Blue #2F52B5 · Stamp Red #D8442E
   Type: Manrope (display) · Instrument Sans (body) · IBM Plex Mono (utility)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- Theme tokens ---------- */

.theme-light {
  --background-primary: #FFFFFF;
  --background-primary-alt: #F5F6F8;
  --background-secondary: #F6F7F9;
  --background-secondary-alt: #ECEEF1;
  --text-normal: #20242B;
  --text-muted: #5B616C;
  --text-faint: #8A8F98;
  --text-accent: #2F52B5;
  --text-accent-hover: #24408F;
  --interactive-accent: #2F52B5;
  --dp-paper: #FFFFFF;
  --dp-ink: #20242B;
  --dp-blue: #2F52B5;
  --dp-blue-soft: #E4EAFA;
  --dp-red: #D8442E;
  --dp-line: #D7D9DE;
  --dp-card: #FFFFFF;
}

.theme-dark {
  --background-primary: #14181D;
  --background-primary-alt: #1B2027;
  --background-secondary: #1B2027;
  --background-secondary-alt: #232935;
  --text-normal: #E8E6E0;
  --text-muted: #A2A8B3;
  --text-faint: #6C7280;
  --text-accent: #8AA3F0;
  --text-accent-hover: #AABDF5;
  --interactive-accent: #8AA3F0;
  --dp-paper: #14181D;
  --dp-ink: #E8E6E0;
  --dp-blue: #8AA3F0;
  --dp-blue-soft: #232B44;
  --dp-red: #F07862;
  --dp-line: #333A46;
  --dp-card: #1B2027;
}

/* ---------- Base type ---------- */

body {
  --font-text: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --font-text-theme: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --font-monospace: 'IBM Plex Mono', ui-monospace, monospace;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
}

.markdown-preview-view h1,
.markdown-rendered h1,
.markdown-preview-view h2,
.markdown-rendered h2,
.markdown-preview-view h3,
.markdown-rendered h3 {
  font-family: 'Manrope', var(--font-text);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.markdown-preview-view h1, .markdown-rendered h1 {
  font-weight: 800;
  font-size: 2.3em;
}

.markdown-preview-view h2, .markdown-rendered h2 {
  font-weight: 800;
  font-size: 1.55em;
  margin-top: 2.2em;
}

.markdown-preview-view h3, .markdown-rendered h3 {
  font-weight: 600;
  font-size: 1.18em;
  color: var(--text-muted);
}

/* Links: underline like a stamped mark, no default blue mush */
.markdown-preview-view a, .markdown-rendered a {
  color: var(--text-accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--dp-blue) 45%, transparent);
}
.markdown-preview-view a:hover, .markdown-rendered a:hover {
  color: var(--text-accent-hover);
  text-decoration-color: currentColor;
}

/* ---------- Perforated divider (hr) ----------
   Every horizontal rule reads as a ticket tear line. */

.markdown-preview-view hr, .markdown-rendered hr {
  border: none;
  height: 0;
  border-top: 2px dashed var(--dp-line);
  margin: 3em auto;
  position: relative;
}

/* ---------- Hero ---------- */

.dp-hero {
  text-align: center;
  padding: 2.5rem 0 1rem;
}
.dp-hero .dp-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dp-red);
  margin-bottom: 0.9rem;
}
.dp-hero h1, .dp-hero .dp-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.8rem;
  color: var(--text-normal);
}
.dp-hero .dp-sub {
  font-size: 1.08rem;
  color: var(--text-muted);
  max-width: 34em;
  margin: 0 auto;
}

/* ---------- Buttons ---------- */

.dp-btn {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff !important;
  background: var(--dp-blue);
  border: 2px solid var(--dp-blue);
  border-radius: 6px;
  padding: 0.65em 1.3em;
  margin: 0.3em 0.25em;
  text-decoration: none !important;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--dp-ink) 18%, transparent);
}
.dp-btn:hover {
  transform: translateY(-1px);
  background: var(--text-accent-hover);
  border-color: var(--text-accent-hover);
  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--dp-blue) 45%, transparent);
}
.dp-btn:active { transform: translateY(0); box-shadow: 0 1px 2px color-mix(in srgb, var(--dp-ink) 18%, transparent); }
.dp-btn.ghost:hover { background: var(--dp-blue-soft); }
.dp-btn.ghost {
  background: transparent;
  color: var(--text-accent) !important;
}
.theme-dark .dp-btn { color: #14181D !important; }
.theme-dark .dp-btn.ghost { color: var(--text-accent) !important; }

/* ---------- Card grid ---------- */

.dp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem 1.4rem;
  margin: 1.6rem 0;
}

/* ---------- Trading cards ----------
   Styled after the app logo: a heavy rounded outline, a mono corner "index",
   a framed inner text panel, and a blue card peeking behind like a deck.
   The deck card is a hard (0-blur) offset box-shadow so it always sits behind
   the card and follows its border-radius — no z-index stacking headaches. */

.dp-ticket {
  position: relative;
  background: var(--dp-card);
  border: 2px solid var(--dp-ink);
  border-radius: 14px;
  padding: 1.15rem 1.25rem 1.3rem;
  box-shadow:
    5px 6px 0 0 var(--dp-blue),
    5px 6px 0 2px var(--dp-ink);
}

/* Mono corner index, like a card's type line */
.dp-ticket .dp-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dp-blue);
  padding-bottom: 0.5rem;
  margin-bottom: 0.7rem;
  border-bottom: 1.5px solid var(--dp-line);
}
.dp-ticket h3, .dp-ticket .dp-ticket-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  margin: 0 0 0.7rem;
  color: var(--text-normal) !important;
}
/* Framed inner text panel — echoes the boxed art window on the logo card */
.dp-ticket p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-muted);
  border: 1.5px solid var(--dp-ink);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  background: color-mix(in srgb, var(--dp-ink) 3%, transparent);
}

/* ---------- Serial / invite-code styling ---------- */

.dp-code, .markdown-preview-view code:not(pre code), .markdown-rendered code:not(pre code) {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.86em;
  background: var(--background-secondary-alt);
  border: 1px solid var(--dp-line);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  color: var(--text-normal);
}

.dp-serial {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  letter-spacing: 0.28em;
  font-size: 0.9rem;
  color: var(--dp-red);
  border: 1.5px dashed var(--dp-red);
  border-radius: 4px;
  padding: 0.25em 0.7em 0.25em 0.9em;
}

/* ---------- Code blocks ---------- */

.markdown-preview-view pre, .markdown-rendered pre {
  background: var(--dp-ink);
  border-radius: 8px;
  border: 1px solid var(--dp-line);
  padding: 1em 1.2em;
}
.theme-dark .markdown-preview-view pre, .theme-dark .markdown-rendered pre {
  background: #0D1014;
}
.markdown-preview-view pre code, .markdown-rendered pre code {
  background: transparent;
  border: none;
  color: #E8E6E0;
  font-size: 0.86em;
}

/* ---------- Images ---------- */

.markdown-preview-view img, .markdown-rendered img {
  border-radius: 8px;
  border: 1.5px solid var(--dp-line);
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--dp-ink) 28%, transparent);
}

/* ---------- Callouts ---------- */

.callout {
  border-radius: 8px;
  border: 1.5px solid var(--dp-line);
  border-left: 4px solid var(--dp-blue);
  background: var(--dp-card);
}
.callout[data-callout="warning"], .callout[data-callout="caution"] {
  border-left-color: var(--dp-red);
}
.callout-title { font-family: 'Manrope', sans-serif; font-weight: 600; }

/* ---------- Tables ---------- */

.markdown-preview-view table, .markdown-rendered table {
  border-collapse: collapse;
  width: 100%;
}
.markdown-preview-view th, .markdown-rendered th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--text-muted);
  border-bottom: 2px solid var(--dp-line);
  padding: 0.5em 0.8em;
}
.markdown-preview-view td, .markdown-rendered td {
  border-bottom: 1px dashed var(--dp-line);
  padding: 0.55em 0.8em;
  font-size: 0.95rem;
}

/* ---------- Site chrome ---------- */

.site-body-left-column, .site-header {
  font-family: 'Instrument Sans', sans-serif;
}
.site-body-left-column .tree-item-self.is-active {
  color: var(--text-accent);
  font-weight: 600;
}
.published-container {
  --page-width: 780px;
}

/* ---------- Footer strip ---------- */

.dp-footer {
  margin-top: 3rem;
  padding-top: 1.2rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .dp-btn, .dp-btn:hover, .dp-btn:active { transition: none; transform: none; }
}

/* ==========================================================================
   V2 — EXCITEMENT LAYER: ticket tape, louder hero, 3D phone scroll showcase
   ========================================================================== */

/* ---------- Louder hero ---------- */

.dp-hero .dp-title {
  font-size: clamp(2.4rem, 7.5vw, 4.2rem);
  line-height: 1.02;
}
.dp-hero .dp-title .hl {
  color: var(--dp-blue);
  position: relative;
  white-space: nowrap;
}
.dp-hero .dp-title .hl::after {
  content: "";
  position: absolute;
  left: -0.08em; right: -0.08em; bottom: 0.02em;
  height: 0.28em;
  background: color-mix(in srgb, var(--dp-blue) 22%, transparent);
  z-index: -1;
  transform: rotate(-0.8deg);
}

/* Ticket cards: quiet lift on hover */
.dp-grid .dp-ticket { transition: transform 160ms ease, box-shadow 160ms ease; }
.dp-grid .dp-ticket:hover {
  transform: translateY(-3px);
  box-shadow:
    7px 9px 0 0 var(--dp-blue),
    7px 9px 0 2px var(--dp-ink),
    0 16px 30px -14px color-mix(in srgb, var(--dp-ink) 35%, transparent);
}

/* ---------- 3D phone scroll showcase ----------
   Structure:
   .dp-showcase                 tall scroll region (JS sets height)
     .dp-stage   (sticky)      viewport-pinned stage
       .dp-captions            feature captions, one .on at a time
       .dp-phone-scene         perspective wrapper
         .dp-phone             3D device (JS drives rotation)
           .dp-screen > .dp-track > .dp-slide × N
*/

.dp-showcase { position: relative; margin: 1rem -2rem 2rem; }
.dp-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  overflow: hidden;
  padding: 0 1.5rem;
}

.dp-captions { max-width: 21rem; }
.dp-caption {
  position: relative;
  padding: 0.9rem 0 0.9rem 1.1rem;
  border-left: 2px dashed var(--dp-line);
  opacity: 0.32;
  transition: opacity 300ms ease, border-color 300ms ease;
}
.dp-caption.on { opacity: 1; border-left: 3px solid var(--dp-blue); padding-left: calc(1.1rem - 1px); }
.dp-caption .dp-label { 
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dp-blue); margin-bottom: 0.25rem;
}
.dp-caption h3 {
  font-family: 'Manrope', sans-serif;
  font-weight: 700; font-size: 1.25rem;
  margin: 0 0 0.25rem; line-height: 1.15;
}
.dp-caption p { margin: 0; font-size: 0.92rem; color: var(--text-muted); }

.dp-phone-scene { perspective: 1200px; flex-shrink: 0; }
.dp-phone {
  position: relative;
  width: min(300px, 66vw);
  aspect-ratio: 9 / 19;
  border-radius: 38px;
  background: linear-gradient(145deg, #2A2F38, #14181D);
  border: 2px solid #3A414D;
  box-shadow:
    0 40px 80px -20px color-mix(in srgb, var(--dp-ink) 45%, transparent),
    inset 0 0 0 5px #0D1014;
  transform-style: preserve-3d;
  transform: rotateY(-18deg) rotateX(6deg);
  will-change: transform;
}
/* side buttons + notch */
.dp-phone::before {
  content: "";
  position: absolute;
  right: -4px; top: 18%;
  width: 3px; height: 12%;
  border-radius: 2px;
  background: #3A414D;
}
.dp-phone::after {
  content: "";
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 34%; height: 22px;
  border-radius: 12px;
  background: #0D1014;
  z-index: 3;
}
.dp-screen {
  position: absolute;
  inset: 9px;
  border-radius: 30px;
  overflow: hidden;
  background: #0D1014;
}
.dp-track {
  display: flex;
  height: 100%;
  transition: transform 450ms cubic-bezier(.22,.9,.3,1);
  will-change: transform;
}
.dp-slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--dp-paper);
  color: var(--dp-ink);
  overflow: hidden;
}
.dp-slide img { width: 100%; height: 100%; object-fit: cover; border: none !important; border-radius: 0 !important; box-shadow: none !important; }

/* progress dots on the stage */
.dp-dots {
  position: absolute;
  bottom: 1.4rem; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 0.5rem;
}
.dp-dots i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dp-line);
  transition: background 250ms ease, transform 250ms ease;
}
.dp-dots i.on { background: var(--dp-blue); transform: scale(1.35); }

/* ---------- Mock app UI inside the slides (until real screenshots land) ---------- */

.mock-bar {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 34px 14px 8px;
  border-bottom: 1px dashed var(--dp-line);
}
.mock-body { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.mock-chan { font-family: 'IBM Plex Mono', monospace; font-size: 10px; padding: 7px 10px; border-radius: 6px; color: var(--text-muted); }
.mock-chan.on { background: var(--dp-blue-soft); color: var(--dp-blue); font-weight: 600; }
.mock-msg { max-width: 82%; font-size: 10px; line-height: 1.45; background: var(--dp-card); border: 1px solid var(--dp-line); border-radius: 10px; padding: 6px 9px; }
.mock-msg b { font-size: 9px; color: var(--dp-blue); display: block; font-family: 'IBM Plex Mono', monospace; }
.mock-msg.me { align-self: flex-end; background: var(--dp-blue); border-color: var(--dp-blue); color: #fff; }
.mock-ticket { background: var(--dp-card); border: 1.5px solid var(--dp-line); border-radius: 8px; padding: 8px 10px; position: relative; }
.mock-ticket .t { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 11px; }
.mock-ticket .d { font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; color: var(--text-muted); letter-spacing: 0.08em; }
.mock-ticket.hot { border-color: var(--dp-blue); background: var(--dp-blue-soft); }
.mock-pill { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; font-weight: 600; background: var(--dp-blue); color: #fff; border-radius: 999px; padding: 3px 8px; }
.mock-att { display: flex; align-items: center; gap: 6px; font-size: 9.5px; }
.mock-att i { width: 16px; height: 16px; border-radius: 50%; background: var(--dp-blue-soft); border: 1px solid var(--dp-blue); flex-shrink: 0; }
.mock-serial-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }

/* ---------- Mobile layout for the showcase ---------- */

@media (max-width: 820px) {
  .dp-stage { flex-direction: column; justify-content: center; gap: 1.2rem; padding-top: 1rem; }
  .dp-captions { max-width: 100%; order: 2; min-height: 7.5rem; }
  .dp-caption { display: none; padding: 0.4rem 0 0.4rem 1rem; }
  .dp-caption.on { display: block; }
  .dp-phone { width: min(215px, 52vw); }
  .dp-showcase { margin-left: -1rem; margin-right: -1rem; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .dp-phone { transform: none !important; }
  .dp-track { transition: none; }
  .dp-grid .dp-ticket, .dp-grid .dp-ticket:hover { transform: none; transition: none; }
}

/* Prevent the rotated tape / full-bleed showcase causing horizontal scroll */
.markdown-preview-view, .markdown-rendered { overflow-x: clip; }

/* Obsidian Publish wraps the note in .markdown-preview-sizer with overflow-y:auto.
   That makes the sizer a scroll container, so the sticky .dp-stage pins to it
   instead of the viewport — and because the sizer never scrolls internally, the
   phone showcase just scrolls off (the page "continues past the phone").
   Neutralise it so sticky attaches to the real viewport scroller. Keep overflow-x
   as clip for the full-bleed showcase; clip is exempt from the rule that would
   otherwise force overflow-y back to auto. */
.markdown-preview-sizer { overflow-x: clip; overflow-y: visible; }

/* ---------- Logo ---------- */
.markdown-preview-view img.dp-logo, .markdown-rendered img.dp-logo {
  border: none;
  box-shadow: none;
  border-radius: 0;
  width: clamp(110px, 18vw, 160px);
  height: auto;
  margin-bottom: 0.4rem;
}

/* ---------- Flow slide (create + respond in one screen) ---------- */

.mock-flow { position: relative; padding-bottom: 108px !important; }

.mock-hand { position: absolute; left: 0; right: 0; bottom: 6px; height: 96px; }

/* Fanned response-option cards behind the active flick card (real app: the
   response hand — Yes/Busy/React/Repeat/Location). Decorative backdrop. */
.opt-card {
  position: absolute;
  bottom: 4px; left: 50%;
  width: 46px; height: 64px;
  margin-left: -23px;
  background: var(--dp-card);
  border: 1.5px solid var(--dp-line);
  border-radius: 8px;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 6px;
  font-size: 15px;
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--dp-ink) 40%, transparent);
}
.opt-card.c1 { transform: translateX(-150%) rotate(-22deg); z-index: 1; }
.opt-card.c2 { transform: translateX(-95%)  rotate(-11deg); z-index: 2; }
.opt-card.c3 { transform: translateX(0%)    rotate(11deg);  z-index: 2; }
.opt-card.c4 { transform: translateX(55%)   rotate(22deg);  z-index: 1; }

/* Legacy plain hand cards (kept for any other slide that still uses them) */
.mock-card {
  position: absolute;
  bottom: 0; left: 50%;
  width: 50px; height: 70px;
  background: var(--dp-card);
  border: 1.5px solid var(--dp-ink);
  border-radius: 7px;
}
.mock-card.l { transform: translateX(-92%) rotate(-13deg); }
.mock-card.r { transform: translateX(-8%) rotate(13deg); }

.mock-flick {
  position: absolute;
  left: 50%; bottom: 8px;
  width: 56px; height: 78px;
  margin-left: -28px;
  background: #fff;
  border: 2px solid var(--dp-ink);
  border-radius: 8px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700; font-size: 13px; color: #20242B;
  z-index: 4;
  will-change: transform, opacity;
  transition: opacity 200ms ease;
}
.mock-flick .pop { font-size: 15px; }

@keyframes dp-swipe-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .mock-swipe { animation: none; }
}

/* ==========================================================================
   BX — "Boldest"-style feature layout (Manrope type, Phlip colors)
   Big tight headlines · alternating feature rows · icon trio · stats band
   ========================================================================== */

.bx { font-family: 'Manrope', 'Instrument Sans', sans-serif; }

.bx-head {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 5.5vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--text-normal);
  margin: 0 0 0.7rem;
  max-width: 15em;
}
.bx-lead {
  font-family: 'Manrope', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 36em;
  margin: 0 0 2.5rem;
}

/* Alternating feature rows */
.bx-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin: 3.2rem 0;
}
.bx-row.flip .bx-copy { order: 2; }
.bx-copy h4, .bx-copy .bx-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.6rem;
  color: var(--text-normal);
}
.bx-copy p {
  font-family: 'Manrope', sans-serif;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 0.8rem;
}
.bx-copy a { font-weight: 700; }

/* Large rounded media block (Boldest's big rounded images) */
.bx-media {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(150deg, var(--dp-blue-soft), var(--background-secondary-alt));
  border: 1.5px solid var(--dp-line);
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bx-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  border: none !important; border-radius: 0 !important; box-shadow: none !important;
}
.bx-media .ph {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dp-blue);
  text-align: center; line-height: 2;
}

/* Icon feature trio */
.bx-icons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.6rem;
  margin: 3rem 0;
}
.bx-icon { text-align: left; }
.bx-icon .ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--dp-blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 0.8rem;
}
.theme-dark .bx-icon .ic { color: #14181D; }
.bx-icon h6, .bx-icon .bx-icon-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.3rem;
  color: var(--text-normal);
}
.bx-icon p {
  font-family: 'Manrope', sans-serif;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* Stats band */
.bx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem 1.6rem;
  margin: 3rem 0;
  padding: 2.4rem 0;
  border-top: 2px dashed var(--dp-line);
  border-bottom: 2px dashed var(--dp-line);
}
.bx-stat .n {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 2.7rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--dp-blue);
  margin-bottom: 0.5rem;
}
.bx-stat .l {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-normal);
  margin-bottom: 0.3rem;
}
.bx-stat p {
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 700px) {
  .bx-row { grid-template-columns: 1fr; }
  .bx-row.flip .bx-copy { order: 0; }
  .bx-media { aspect-ratio: 4 / 3.4; }
}

/* ---------- Drag-to-send emphasis (flick demo) ---------- */

/* Shadow grows under the card while it's "picked up" */
.mock-flick { box-shadow: 0 2px 4px color-mix(in srgb, var(--dp-ink) 20%, transparent); transition: box-shadow 150ms ease; }
.mock-flow .mock-flick { box-shadow: 0 10px 22px -6px color-mix(in srgb, var(--dp-ink) 40%, transparent); }

/* Dashed drag path from hand up to the slot, "drawn" as the card travels */
.mock-trail {
  position: absolute;
  left: 50%;
  bottom: 96px;
  width: 2px;
  height: 150px;
  margin-left: -1px;
  background: repeating-linear-gradient(to top,
    var(--dp-blue) 0 5px, transparent 5px 11px);
  opacity: 0;
  transition: opacity 200ms ease;
  clip-path: inset(calc(100% - var(--trail, 0%)) 0 0 0);
  z-index: 1;
  pointer-events: none;
}

/* "sending…" tag that rides under the card */
.mock-sending {
  position: absolute;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dp-blue);
  background: var(--dp-paper);
  padding: 1px 5px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 160ms ease;
  z-index: 6;
  pointer-events: none;
}

/* Slot "arms" (ready to receive) as the card approaches */
.mock-create.arming .mock-landing {
  border-style: solid !important;
  background: color-mix(in srgb, var(--dp-blue-soft) 80%, transparent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dp-blue) 35%, transparent);
  transform: scale(1.03);
}
.mock-landing { transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }

/* Receive flash: the slot pulses once as the card is sent into it */
@keyframes dp-receive {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dp-blue) 55%, transparent); }
  100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--dp-blue) 0%, transparent); }
}
.mock-create.landed .mock-landing {
  transform: scale(1);
  animation: dp-receive 500ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .mock-trail, .mock-sending { display: none; }
  .mock-create.landed .mock-landing { animation: none; }
}

/* ==========================================================================
   Real-UI event cards (matching the app's event row)
   ========================================================================== */

.ev-card {
  display: flex;
  align-items: stretch;
  background: var(--dp-card);
  border: 1.5px solid var(--dp-line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 9px;
  min-height: 52px;
}
.ev-card.dim { opacity: 0.55; }

/* Pink day chip on the left */
.ev-day {
  flex: 0 0 46px;
  background: color-mix(in srgb, var(--dp-red) 12%, var(--dp-card));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 0;
}
.ev-pop { font-size: 15px; line-height: 1; }
.ev-dow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--dp-red);
}
.ev-main { flex: 1; padding: 8px 11px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.ev-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700; font-size: 12px;
  color: var(--text-normal);
  display: flex; align-items: center; gap: 5px;
}
.ev-sub { font-size: 10px; color: var(--text-muted); }
.ev-sub b { color: var(--text-normal); font-weight: 600; }

/* Green check + attendee avatar appear on RSVP */
.ev-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border: 1.5px solid #2E9E5B;
  color: #2E9E5B;
  border-radius: 50%;
  font-size: 8px; font-weight: 700;
  opacity: 0; transform: scale(0.5);
  transition: opacity 220ms ease, transform 220ms ease;
}
.ev-att { margin-top: 6px; display: flex; gap: 6px; }
.att {
  position: relative;
  width: 20px; height: 20px;
  border-radius: 7px;
  background: color-mix(in srgb, #2E9E5B 22%, var(--dp-card));
  border: 1px solid color-mix(in srgb, #2E9E5B 55%, transparent);
  flex-shrink: 0;
}
/* person glyph */
.att::before {
  content: "";
  position: absolute; left: 50%; top: 52%;
  width: 7px; height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 5px 0 -1px color-mix(in srgb, #1c6b3d 90%, transparent);
  background: color-mix(in srgb, #1c6b3d 90%, transparent);
}
/* reaction badge, top-left like the app */
.att::after {
  content: attr(data-react);
  position: absolute;
  top: -7px; left: -6px;
  font-size: 9px;
  line-height: 1;
}
.att.you {
  background: color-mix(in srgb, var(--dp-blue) 20%, var(--dp-card));
  border-color: color-mix(in srgb, var(--dp-blue) 55%, transparent);
  transform: scale(0);
  transition: transform 260ms cubic-bezier(.3,1.3,.5,1);
}
.att.you::before { box-shadow: 0 5px 0 -1px var(--dp-blue); background: var(--dp-blue); }
.mock-flow.landed .att.you { transform: scale(1); }


/* Empty drop-slot wrapping the event on slide 1 */
.ev-slot.ev-landing {
  border: 1.5px dashed var(--dp-blue);
  border-radius: 12px;
  background: color-mix(in srgb, var(--dp-blue-soft) 45%, transparent);
  min-height: 52px;
  margin-bottom: 9px;
  display: flex; align-items: center; justify-content: center;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.ev-slot .slot-empty {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dp-blue);
}
.ev-slot .slot-full { display: none; width: 100%; margin: 0; border: none; }
.ev-slot .slot-full.ev-card { border: none; }

.mock-flow.arming:not(.created) .ev-landing {
  background: color-mix(in srgb, var(--dp-blue-soft) 85%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dp-blue) 35%, transparent);
  transform: scale(1.03);
}
.mock-flow.created .ev-landing {
  border: none;
  background: transparent;
  box-shadow: none;
  animation: dp-receive 500ms ease-out;
}
.mock-flow.created .ev-landing .slot-empty { display: none; }
.mock-flow.created .ev-landing .slot-full { display: flex; }

/* Slide 2 — respond: target event arms, then reveals check + avatar */
.mock-flow.landed-arming .ev-target {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dp-blue) 45%, transparent);
  transform: scale(1.02);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.mock-flow.landed .ev-target { animation: dp-receive 500ms ease-out; }
.mock-flow.landed .ev-check { opacity: 1; transform: scale(1); }

/* Card variants in-hand */
.mock-flick.day {
  gap: 3px;
}

/* Phase gating: create card + no fan during create; fan + respond card after. */
.opt-card { opacity: 0; transition: opacity 250ms ease; }
.mock-flow.created .opt-card { opacity: 1; }         /* fan appears for the respond phase */
.mock-flow.created .flick-create { display: none; }  /* date card gone once event created */
.flick-respond { opacity: 0; }                        /* hidden until respond phase drives it */

.mock-flick.day .ev-dow { font-size: 11px; color: var(--dp-red); }
.mock-flick.day .ev-pop { font-size: 20px; }
.mock-flick.going {
  background: #2E9E5B;
  border-color: #2E9E5B;
  color: #fff;
}
.mock-trail.respond { background: repeating-linear-gradient(to top, #2E9E5B 0 5px, transparent 5px 11px); }