/* =============================================================
 * Trippple — Website sections below hero
 * Editorial / fanzine — chunky borders, 900 everywhere, no gradients
 * ============================================================= */

:root {
  --ink:         #2B120A;
  --paper:       #F5F0E6;
  --eggshell:    #F0EAD6;
  --earth:       #DBC1AC;
  --earth-dark:  #C5AA92;
  --accent:      #FF5E1A;
  --marquee-bar: #2C2C2C;
  --lime:        #C8F520;

  --cat-eat:     #FF5E1A;
  --cat-coffee:  #8B6914;
  --cat-drink:   #D96C88;
  --cat-stay:    #2B120A;
  --cat-see:     #89ABB8;
  --cat-do:      #FF8C00;
  --cat-nature:  #2D8B46;
  --cat-shop:    #26A69A;

  --shadow-sm: 0 2px 8px rgba(43,18,10,.08);
  --shadow-md: 0 6px 18px rgba(43,18,10,.10);
  --shadow-lg: 0 14px 36px rgba(43,18,10,.16);
}

/* kill the default portfolio .product-section, we replace it */
.product-section { display: none !important; }

/* ---------- shared ---------- */
.tr-site {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Space Grotesk', sans-serif;
}

.tr-site * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.tr-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 96px 40px;
  position: relative;
}

.tr-section--tight { padding: 56px 40px; }

.tr-eyebrow {
  font: 900 11px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 58%, white);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.tr-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--ink);
  opacity: 0.4;
  display: inline-block;
}

.tr-display {
  font-weight: 900;
  font-size: clamp(40px, 6.2vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--ink);
}

.tr-display .tr-display__tail {
  display: inline-block;
  position: relative;
}

.tr-display .tr-underline {
  display: inline-block;
  position: relative;
  background: linear-gradient(180deg, transparent 72%, var(--accent) 72%, var(--accent) 92%, transparent 92%);
  padding: 0 .04em;
}

.tr-display .tr-italic,
.tr-step__title .tr-italic {
  font-style: italic;
  font-weight: 900;
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: -0.02em;
}

.tr-lead {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  max-width: 560px;
  color: color-mix(in srgb, var(--ink) 78%, white);
}

.tr-section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
  margin-bottom: 56px;
}

.tr-section-head__meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* ---------- base buttons (reused) ---------- */
.tr-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 14px;
  font: 900 13px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

.tr-btn svg { width: 16px; height: 16px; }

.tr-btn--primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 4px 4px 0 var(--accent);
  letter-spacing: 0.14em;
}

.tr-btn--primary:hover { transform: translateY(-2px); box-shadow: 6px 6px 0 var(--accent); }
.tr-btn--primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--accent); }

.tr-btn--secondary {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}

.tr-btn--secondary:hover { background: var(--ink); color: var(--paper); }

.tr-btn--ghost {
  background: transparent;
  color: var(--ink);
  padding: 16px 0;
}

.tr-btn--ghost:hover { opacity: 0.6; }

/* ============================================================
 * SECTION: How it works
 * ============================================================ */
.tr-how {
  border-top: 2px solid var(--ink);
}
.tr-how .tr-display .tr-italic { color: var(--accent); }
.tr-how .tr-lead { max-width: 900px; }

/* Variation toggle tabs (tweak-exposed but also visible) */
.tr-how__tabs {
  display: inline-flex;
  background: var(--eggshell);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}

.tr-how__tab {
  padding: 8px 18px;
  border-radius: 999px;
  background: transparent;
  border: none;
  cursor: pointer;
  font: 900 11px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background .15s, color .15s;
}

.tr-how__tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
}

/* Variation A: chunky editorial cards */
.tr-how__a {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ---------- Scroll-assembled place grid (Crew row 01) ---------- */
.tr-place-grid--assemble .tr-place-card {
  opacity: 0;
  transform: translate(var(--start-dx, 0px), var(--start-dy, 40px)) scale(0.35) rotate(var(--start-rot, -6deg));
  transition:
    transform 820ms cubic-bezier(0.22, 0.95, 0.32, 1.15),
    opacity 400ms ease;
  transition-delay: var(--delay, 0ms);
  will-change: transform, opacity;
}
.tr-place-grid--assemble.is-revealed .tr-place-card {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(0deg);
}
.tr-source-pill.is-launching {
  animation: tr-source-pulse 0.65s ease;
  border-color: var(--ink);
}
@keyframes tr-source-pulse {
  0%, 100% { transform: scale(1); }
  35%      { transform: scale(1.12); background: var(--accent); color: #fff; }
  60%      { transform: scale(1.05); }
}
.tr-source-pill.is-launching .tr-source-pill__icon { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .tr-place-grid--assemble .tr-place-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.tr-step {
  position: relative;
  background: var(--white, #fff);
  border: 1.5px solid rgba(43,18,10,0.15);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 8px 8px 0 var(--ink);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  flex-direction: column;
}

.tr-step:hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 var(--ink);
}

.tr-step--accent { background: var(--accent); color: var(--paper); border-color: var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.tr-step--accent:hover { box-shadow: 10px 10px 0 var(--ink); }
.tr-step--earth { background: var(--earth); }
.tr-step--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 8px 8px 0 var(--accent); }
.tr-step--ink:hover { box-shadow: 10px 10px 0 var(--accent); }

.tr-step__num {
  font: 900 96px/0.85 'Space Grotesk', sans-serif;
  letter-spacing: -0.05em;
  margin-bottom: 8px;
}

.tr-step__title {
  font: 900 30px/1 'Space Grotesk', sans-serif;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

.tr-step__desc {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  opacity: 0.85;
  margin-bottom: 24px;
  max-width: 30ch;
}

.tr-step__visual {
  margin-top: auto;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 16px;
}

/* Variation A visuals (mini in-card demos) */
.tr-visual--save {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-place-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid rgba(43,18,10,0.25);
  border-radius: 14px;
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
  transition: transform .15s, box-shadow .15s;
}

.tr-place-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(43,18,10,0.14);
}

.tr-place-row__thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  border: 1.5px solid var(--ink);
}

.tr-place-row__text {
  flex: 1;
  min-width: 0;
}

.tr-place-row__name {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tr-place-row__meta {
  font-size: 11px;
  font-weight: 700;
  color: rgba(43,18,10,0.4);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tr-place-row__meta-cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #fff;
  border: 1px solid rgba(43,18,10,0.1);
  border-radius: 999px;
  color: rgba(43,18,10,0.7);
  font-size: 10px;
  font-weight: 700;
}

.tr-place-row__meta-cat::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.tr-place-row__bookmark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent);
  color: var(--paper);
  padding: 6px 12px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  font: 900 10px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--ink);
  flex-shrink: 0;
}

.tr-visual--rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.tr-rate-card {
  width: 100%;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 18px;
  text-align: center;
  color: var(--ink);
}

.tr-rate-card__q {
  font: 900 16px/1.1 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.tr-rate-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.tr-rate-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 12px;
  min-width: 110px;
  height: 70px;
  border-radius: 22px;
  border: 1px solid rgba(43,18,10,0.10);
  background: rgba(255,255,255,0.82);
  box-shadow: 0 2px 8px rgba(43,18,10,0.08);
  cursor: pointer;
  transition: transform .2s ease, border-color .15s, background .15s, box-shadow .15s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tr-rate-btn__emoji { font-size: 30px; line-height: 1; }
.tr-rate-btn__label {
  font: 900 11px/1 'Space Grotesk', sans-serif;
  color: rgba(43,18,10,0.5);
}

.tr-rate-btn:hover {
  border-color: rgba(43,18,10,0.18);
  background: rgba(255,255,255,0.92);
}
.tr-rate-btn.is-selected {
  border: 1px solid rgba(255,94,26,0.25);
  background: rgba(255,94,26,0.09);
  box-shadow: 0 8px 18px rgba(239,68,68,0.32);
  transform: scale(1.06);
}
.tr-rate-btn.is-selected .tr-rate-btn__label { color: var(--ink); }

.tr-rate-labels { display: none; }

.tr-visual--share {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Split layout — post + mini-map side by side. The map is always visible
 * (empty until the share card is hovered); the post sits at ~58% so the
 * writing-by-word reveal has a consistent layout to settle into. */
.tr-share-split {
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
}
.tr-share-split .tr-share-post {
  flex: 1 1 auto;
  min-width: 0;
}
.tr-share-map {
  position: relative;
  flex: 0 0 42%;
  width: 42%;
  overflow: hidden;
  border-radius: 10px;
  border: 1.5px solid rgba(43, 18, 10, 0.18);
  background: #EEE4CE;
  align-self: stretch;
}
.tr-share-map__tile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  pointer-events: none;
}
.tr-share-map__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.tr-share-map__pin {
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.34, 1.5, 0.64, 1);
}
.tr-share-map__pin.is-visible {
  opacity: 1;
}
.tr-share-map__route {
  opacity: 0.9;
}
.tr-share-map__reveal {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.tr-share-map__reveal.is-drawn {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .tr-share-map__reveal { transition: none; }
}

.tr-share-post {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 14px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* Top row: avatar + byline */
.tr-share-post__header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tr-share-post__byline {
  flex: 1;
  min-width: 0;
}

.tr-share-post__avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  flex-shrink: 0;
  border: 2px solid var(--ink);
}

.tr-share-post__name {
  font: 900 13px/1.1 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
}

.tr-share-post__meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.55;
  margin-top: 2px;
}

/* Title — renders as inline-flex word pills that animate in one at a time */
.tr-share-post__title {
  font: 900 15px/1.2 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.28em;
  row-gap: 2px;
}
.tr-share-post__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.tr-share-post__word.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Post place-card grid — empty by default, populated slot-by-slot as events
 * fly in from step-02's calendar. Same 3×2 format as step-01 so the "shared
 * list" reads as the user's curated list reaching the audience unchanged. */
.tr-share-post__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
/* Empty slot: hold layout space, invisible. Once populated (is-filled), the
 * normal .tr-curate-wrangle__card styling (set elsewhere) takes over. */
.tr-share-post__card {
  aspect-ratio: 1 / 1;
  opacity: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transition: opacity 0.25s ease;
}
.tr-share-post__card.is-filled {
  opacity: 1;
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgba(43, 18, 10, 0.25);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  background-size: cover;
  background-position: center;
  color: #fff;
  isolation: isolate;
}
/* Post cards are color-only — hide the cat pill, title, author badge, and
 * bottom gradient overlay (no text means nothing to highlight). */
.tr-share-post__card.is-filled::before { display: none; }
.tr-share-post__card .tr-curate-wrangle__card-cat,
.tr-share-post__card .tr-curate-wrangle__card-foot {
  display: none;
}

/* Actions fade in at the end of the share animation */
.tr-share-post__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.tr-share-post__actions > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tr-share-post__share-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.tr-share-post.is-populated .tr-share-post__actions {
  opacity: 0.7;
}

/* Verified-style check on the share-post author (quiet microinfluencer tell) */
.tr-share-post__name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tr-share-post__check {
  width: 13px;
  height: 13px;
  color: #FF5E1A;
  flex-shrink: 0;
}
/* Make the follower-count fragment pop out of the muted meta line */
.tr-share-post__meta strong {
  font-weight: 900;
  color: var(--ink);
  opacity: 1;
}

/* ===== Section 1 · Card 01 — Curate visual ===== */
.tr-visual--curate {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tr-curate-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 2px;
}
.tr-curate-head__stack {
  display: inline-flex;
}
.tr-curate-head__stack span {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  margin-left: -6px;
  border: 2px solid var(--white, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 900 10px/1 'Space Grotesk', sans-serif;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.tr-curate-head__stack span:first-child { margin-left: 0; }
.tr-curate-head__label {
  font: 800 11px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(43, 18, 10, 0.55);
}

/* ===== Curate wrangle animation =====
 * A chaos-to-order loop: 6 source chips overlay the card (obscuring the
 * title + description), then 3 "signal" chips fly down into 3 place rows
 * while the 3 "noise" chips fade out. Mirrors the `initImportDemo`
 * orchestrator in js/sections.js.
 *
 * Default state (no JS / prefers-reduced-motion) = the ordered final state:
 * chaos wrapper is hidden, rows look like normal .tr-place-row. The JS
 * flips the card into `.is-wrangling` to activate chaos.
 */
.tr-curate-wrangle {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Tighten the gap between the description and the top row of cards so the
 * final-state layout doesn't feel disconnected. Scoped to this card only. */
.tr-curate-card .tr-step__desc {
  margin-bottom: 14px;
}
.tr-curate-card .tr-step__visual {
  padding-top: 8px;
}
.tr-curate-wrangle__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.tr-curate-wrangle__caption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px 0;
  opacity: 1;
  transition: opacity 0.35s ease;
}

/* Individual place card — same visual vocabulary as the section-02 phone
 * grid and the section-03 feature-row cards: colored gradient background,
 * category pill top-left, title + meta + "from X" author badge bottom-left. */
.tr-curate-wrangle__card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid rgba(43, 18, 10, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  background-size: cover;
  background-position: center;
  color: #fff;
  display: block;
  isolation: isolate;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.tr-curate-wrangle__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.0)  0%,
    rgba(0, 0, 0, 0.0)  35%,
    rgba(0, 0, 0, 0.45) 65%,
    rgba(0, 0, 0, 0.82) 100%);
  z-index: 0;
}
.tr-curate-wrangle__card-cat {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: rgba(43, 18, 10, 0.85);
  font: 700 8px/1 'Space Grotesk', sans-serif;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.tr-curate-wrangle__card-cat i { width: 3px; height: 3px; border-radius: 999px; }
.tr-curate-wrangle__card-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 6px 6px 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tr-curate-wrangle__card-title {
  font: 900 10px/1.1 'Space Grotesk', sans-serif;
  letter-spacing: -0.015em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tr-curate-wrangle__card-author {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px 1px 1px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: 700 8px/1 'Space Grotesk', sans-serif;
  color: rgba(255, 255, 255, 0.9);
  align-self: flex-start;
}
.tr-curate-wrangle__card-avatar {
  width: 12px; height: 12px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 900 7px/1 'Space Grotesk', sans-serif;
  color: #fff;
  flex-shrink: 0;
}

/* Chaos overlay — only rendered while the animation is active.
 * Spans the entire .tr-step card (the nearest position: relative ancestor),
 * covering the title + description as well as the visual row zone.
 * The overlay itself ignores pointer events so the content below (e.g.
 * the card link targets) stays clickable, but individual chips re-enable
 * pointer events so hover triggers their flight. */
.tr-curate-wrangle__chaos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  display: none;
  overflow: hidden;
  border-radius: inherit;
}
.tr-curate-card.is-wrangling .tr-curate-wrangle__chaos {
  display: block;
}

/* While the animation is active, cards are invisible until their chip
 * lands. They appear (opacity crossfade) as the chip arrives, so the chip
 * literally "becomes" the card. Default state (no .is-wrangling) has cards
 * fully visible — that's the no-JS / reduced-motion fallback. */
.tr-curate-card.is-wrangling .tr-curate-wrangle__card {
  opacity: 0;
  /* Preserve layout so the flight can measure the card's final position */
}
.tr-curate-card.is-wrangling .tr-curate-wrangle__card.is-filled {
  opacity: 1;
}

.tr-curate-card.is-wrangling .tr-curate-wrangle__caption {
  opacity: 0;
}
.tr-curate-card.is-wrangling .tr-curate-wrangle__caption.is-visible {
  opacity: 1;
}

/* ----- Individual chips ----- */
.tr-curate-wrangle__chip {
  position: absolute;
  left: var(--x, 50%);
  top:  var(--y, 50%);
  width: 220px;
  padding: 12px 14px;
  background: #fff;
  color: var(--ink);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 12px 26px rgba(43, 18, 10, 0.24);
  font: 600 13px/1.35 'Space Grotesk', sans-serif;
  letter-spacing: -0.005em;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  transform-origin: center center;
  animation: tr-chip-jitter 3.2s ease-in-out infinite;
  will-change: transform, opacity;
  /* Re-enable pointer events so hover/tap triggers this chip's flight. */
  pointer-events: auto;
  cursor: pointer;
  transition: filter 0.18s ease;
}
.tr-curate-wrangle__chip:hover {
  /* Small visual hint that the chip is interactive — without overriding
   * the translate/rotate that the jitter keyframes control. */
  filter: brightness(1.08) drop-shadow(0 10px 20px rgba(43, 18, 10, 0.28));
}

/* Jitter slightly while in the chaos state so the pile feels alive.
 * We reconstruct the full transform in keyframes because CSS animations
 * replace `transform`, not extend it. */
@keyframes tr-chip-jitter {
  0%,   100% { transform: translate(-50%, -50%)                             rotate(var(--rot, 0deg)); }
  33%        { transform: translate(calc(-50% + 2px), calc(-50% - 1.5px))   rotate(calc(var(--rot, 0deg) + 1deg)); }
  66%        { transform: translate(calc(-50% - 1.5px), calc(-50% + 2px))   rotate(calc(var(--rot, 0deg) - 0.8deg)); }
}

.tr-curate-wrangle__chip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tr-curate-wrangle__chip-avatar {
  width: 24px; height: 24px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font: 900 11px/1 'Space Grotesk', sans-serif;
  flex-shrink: 0;
}
.tr-curate-wrangle__chip-meta {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.tr-curate-wrangle__chip-meta strong {
  font: 800 13px/1 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
}
.tr-curate-wrangle__chip-meta span {
  font: 600 11px/1 'Space Grotesk', sans-serif;
  opacity: 0.6;
}
.tr-curate-wrangle__chip-body {
  font: 600 13px/1.35 'Space Grotesk', sans-serif;
  letter-spacing: -0.005em;
}
.tr-curate-wrangle__chip-body em {
  font-style: normal;
  font-weight: 900;
  background: rgba(255, 94, 26, 0.18);
  padding: 0 3px;
  border-radius: 3px;
}
.tr-curate-wrangle__chip-bubble {
  padding: 12px 18px;
  border-radius: 20px;
  font: 700 16px/1.3 'Space Grotesk', sans-serif;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Per-source branding */
.tr-curate-wrangle__chip--tiktok {
  background: #0b0b0b;
  color: #fff;
  width: 244px;
}
.tr-curate-wrangle__chip--tiktok .tr-curate-wrangle__chip-meta span {
  color: #FF0050;
  opacity: 0.9;
}
.tr-curate-wrangle__chip--tiktok .tr-curate-wrangle__chip-body em {
  background: rgba(255, 0, 80, 0.18);
  color: #fff;
}

.tr-curate-wrangle__chip--instagram {
  width: 185px;
  padding: 0;
  overflow: hidden;
}
.tr-curate-wrangle__chip--instagram .tr-curate-wrangle__chip-thumb {
  width: 100%;
  aspect-ratio: 1;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.tr-curate-wrangle__chip--instagram .tr-curate-wrangle__chip-body {
  padding: 10px 13px;
  font-size: 13px;
}
.tr-curate-wrangle__chip--instagram em {
  background: none;
  font-style: normal;
  font-weight: 900;
  padding: 0;
}

.tr-curate-wrangle__chip--gdocs {
  width: 256px;
  padding-top: 0;
  border-top: 4px solid #1A73E8;
  padding: 14px 14px 12px;
}
.tr-curate-wrangle__chip--gdocs .tr-curate-wrangle__chip-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 8px;
}
.tr-curate-wrangle__chip--gdocs .tr-curate-wrangle__chip-head strong {
  font: 800 15px/1.1 'Space Grotesk', sans-serif;
}
.tr-curate-wrangle__chip--gdocs .tr-curate-wrangle__chip-head span {
  font: 700 10px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.55;
}

.tr-curate-wrangle__chip--imessage {
  background: transparent;
  box-shadow: none;
  padding: 0;
  width: auto;
}
.tr-curate-wrangle__chip--imessage .tr-curate-wrangle__chip-bubble {
  background: #0A84FF;
}

.tr-curate-wrangle__chip--whatsapp {
  background: transparent;
  box-shadow: none;
  padding: 0;
  width: auto;
}
.tr-curate-wrangle__chip--whatsapp .tr-curate-wrangle__chip-bubble {
  background: #25D366;
  color: #0d2e1a;
  font-weight: 700;
}

.tr-curate-wrangle__chip--notes {
  background: #FFF3A8;
  border: 1px solid rgba(43, 18, 10, 0.15);
  width: 220px;
  padding: 14px 18px 16px;
}
.tr-curate-wrangle__chip-notes-title {
  font: 900 16px/1 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.tr-curate-wrangle__chip--notes .tr-curate-wrangle__chip-body {
  font-size: 14px;
  opacity: 0.85;
}

/* A chip that's being flown to its row (or faded out as noise) opts out of
 * the jitter animation so our Web Animations API calls aren't fighting CSS. */
.tr-curate-wrangle__chip.is-flying,
.tr-curate-wrangle__chip.is-fading {
  animation: none;
}

/* Responsive — chips shrink on narrow viewports so the chaos still fits. */
@media (max-width: 640px) {
  .tr-curate-wrangle__chip { zoom: 0.85; }
}

/* Reduced motion — never render chaos, never animate. Default DOM state is
 * already the ordered/filled look. */
@media (prefers-reduced-motion: reduce) {
  .tr-curate-card.is-wrangling { /* no-op; JS also short-circuits */ }
  .tr-curate-wrangle__chip { animation: none; }
}

/* Who-added badge on each place row (replaces the ✚ bookmark) */
.tr-place-row__by {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  padding-right: 6px;
  border-radius: 999px;
  background: rgba(43, 18, 10, 0.06);
  border: 1px solid rgba(43, 18, 10, 0.1);
  flex-shrink: 0;
  color: rgba(43, 18, 10, 0.7);
}
.tr-place-row__by-avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 900 11px/1 'Space Grotesk', sans-serif;
  color: #fff;
  flex-shrink: 0;
}
.tr-place-row__by-check {
  width: 12px;
  height: 12px;
  color: #FF5E1A;
}
.tr-place-row__by--creator { padding-right: 8px; }
.tr-place-row__by--app {
  padding: 6px 9px;
  background: rgba(43, 18, 10, 0.08);
}
.tr-place-row__by--app svg {
  width: 16px;
  height: 16px;
  color: var(--ink);
}

/* ===== Section 1 · Card 02 — Plan visual (mini cal) ===== */
.tr-visual--plan {
  width: 100%;
  display: flex;
  justify-content: center;
}
.tr-mini-cal {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 10px;
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.tr-mini-cal__col {
  position: relative;
  background: #fff;
  border: 1px solid rgba(43, 18, 10, 0.15);
  border-radius: 10px;
  min-height: 260px;
  overflow: hidden;
}
.tr-mini-cal__col--today {
  border-color: var(--ink);
}
.tr-mini-cal__col-head {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(43, 18, 10, 0.1);
  background: rgba(43, 18, 10, 0.04);
}
.tr-mini-cal__dow {
  font: 900 13px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(43, 18, 10, 0.6);
}
.tr-mini-cal__dnum {
  font: 900 18px/1 'Space Grotesk', sans-serif;
  color: var(--ink);
  margin-left: auto;
}
.tr-mini-cal__col--today .tr-mini-cal__dnum { color: #FF5E1A; }
.tr-mini-cal__lanes {
  position: relative;
  height: calc(100% - 28px);
}
.tr-mini-cal__ev {
  position: absolute;
  left: 4px;
  right: 4px;
  background: color-mix(in srgb, var(--evc) 16%, #fff);
  border-left: 3px solid var(--evc);
  border-radius: 5px;
  padding: 3px 5px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tr-mini-cal__ev span {
  display: block;
  font: 900 9px/1.1 'Space Grotesk', sans-serif;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-mini-cal__ev small {
  display: block;
  font: 700 7px/1.2 'Space Grotesk', sans-serif;
  color: color-mix(in srgb, var(--ink) 45%, white);
  margin-top: 1px;
}
/* Tilted ghost card hovering mid-arc (static — not animated) */
.tr-mini-cal__ghost {
  position: absolute;
  top: 38%;
  left: 46%;
  width: 130px;
  padding: 5px 7px;
  border-radius: 10px;
  background: #fff;
  border: 1.5px solid rgba(43, 18, 10, 0.35);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  gap: 7px;
  transform: rotate(-4deg);
  z-index: 4;
  pointer-events: none;
}
.tr-mini-cal__ghost-thumb {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  flex-shrink: 0;
}
.tr-mini-cal__ghost-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tr-mini-cal__ghost-name {
  font: 900 10px/1.1 'Space Grotesk', sans-serif;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-mini-cal__ghost-cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 700 8px/1 'Space Grotesk', sans-serif;
  color: rgba(43, 18, 10, 0.6);
}
.tr-mini-cal__ghost-cat i {
  width: 5px; height: 5px; border-radius: 999px;
}

/* Variation B: horizontal stacked */
.tr-how__b {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.tr-stepline {
  display: grid;
  grid-template-columns: 80px 1fr 280px;
  align-items: center;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px;
  padding: 28px 32px;
  box-shadow: 6px 6px 0 var(--ink);
  gap: 28px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.tr-stepline:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--ink);
}

.tr-stepline.is-active { background: var(--accent); color: var(--paper); }

.tr-stepline__num {
  font: 900 80px/0.9 'Space Grotesk', sans-serif;
  letter-spacing: -0.05em;
}

.tr-stepline__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tr-stepline__title {
  font: 900 32px/1 'Space Grotesk', sans-serif;
  letter-spacing: -0.03em;
}

.tr-stepline__desc {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  max-width: 52ch;
  opacity: 0.85;
}

.tr-stepline__preview {
  display: flex;
  justify-content: flex-end;
}

.tr-stepline__preview-inner {
  width: 240px;
  padding: 14px;
  border-radius: 14px;
  background: var(--eggshell);
  border: 2px solid var(--ink);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tr-stepline.is-active .tr-stepline__preview-inner { background: var(--paper); }

/* ============================================================
 * SECTION: Crew (plan trips together — live demo)
 * ============================================================ */
.tr-crew {
  background: var(--ink);
  color: var(--paper);
  border-radius: 40px;
  margin: 0 40px;
  padding: 88px 56px;
  position: relative;
  overflow: hidden;
}

.tr-crew .tr-eyebrow { color: rgba(245, 240, 230, 0.65); }
.tr-crew .tr-eyebrow::before { background: var(--paper); opacity: 0.4; }
.tr-crew .tr-display { color: var(--paper); }
.tr-crew .tr-display .tr-italic { color: var(--accent); font-style: italic; }

.tr-crew__head-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 56px;
}

.tr-crew__lead {
  max-width: 420px;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(245, 240, 230, 0.72);
  font-weight: 500;
  margin-top: 14px;
}

/* Demo layout: left = trip card with avatars + places, right = a tally panel */
.tr-crew__demo {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: start;
}

.tr-trip-card {
  background: var(--paper);
  color: var(--ink);
  border-radius: 28px;
  padding: 28px;
  position: relative;
}

.tr-trip-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 20px;
}

.tr-trip-card__title-block h3 {
  font: 900 36px/1 'Space Grotesk', sans-serif;
  letter-spacing: -0.03em;
}

.tr-trip-card__sub {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.6;
  margin-top: 8px;
}

.tr-avatars {
  display: flex;
}

.tr-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 3px solid var(--paper);
  margin-left: -10px;
  font: 900 14px/40px 'Space Grotesk', sans-serif;
  text-align: center;
  color: var(--ink);
  letter-spacing: -0.02em;
  box-sizing: border-box;
}

.tr-avatar:first-child { margin-left: 0; }
.tr-avatar--ghost {
  background: var(--paper);
  border: 2px dashed var(--ink);
  color: var(--ink);
  line-height: 36px;
  font-size: 22px;
  font-weight: 900;
}

.tr-filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.tr-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--ink);
  font: 900 12px/1 'Space Grotesk', sans-serif;
  cursor: pointer;
  transition: background .15s;
  color: rgba(43,18,10,0.7);
  white-space: nowrap;
}

.tr-cat-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.tr-cat-chip:hover { background: color-mix(in srgb, var(--earth) 20%, #fff); }

.tr-cat-chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 20%, #fff);
  color: var(--ink);
}

.tr-places-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.tr-place {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid rgba(43,18,10,0.25);
  aspect-ratio: 4 / 3;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
  min-height: 180px;
}

.tr-place::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.7) 100%);
  z-index: 0;
}

.tr-place:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.2); }

.tr-place__cat {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.85);
  border-radius: 999px;
  padding: 4px 10px;
  font: 700 11px/1 'Space Grotesk', sans-serif;
  color: rgba(43,18,10,0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tr-place__title {
  position: relative;
  z-index: 1;
  color: #fff;
  font: 900 15px/1.15 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.tr-place__meta {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.6);
  font: 600 12px/1 'Space Grotesk', sans-serif;
  margin-top: 3px;
}

.tr-place__votes {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.tr-place.is-hidden { display: none; }

/* Tally panel */
.tr-tally {
  background: var(--paper);
  color: var(--ink);
  border-radius: 28px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 24px;
}

.tr-tally__title {
  font: 900 13px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 60%, white);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tr-tally__title-count {
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: none;
  background: var(--accent);
  color: var(--paper);
  padding: 3px 10px;
  border-radius: 999px;
}

.tr-tally__empty {
  font-size: 14px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 55%, white);
  font-weight: 500;
}

.tr-tally__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
}

.tr-tally__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--eggshell);
  border-radius: 14px;
  animation: tr-tally-in .3s ease;
}

@keyframes tr-tally-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.tr-tally__name {
  font: 900 14px/1.1 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
}

.tr-tally__cat {
  font: 700 10px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tr-tally__votes {
  display: flex;
  gap: 4px;
}

.tr-vote {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: transform .15s, background .15s;
}

.tr-vote:hover { transform: translateY(-1px); }

.tr-vote.is-on { background: var(--accent); transform: scale(1.1); }
.tr-vote.is-on.tr-vote--ok { background: var(--lime); }
.tr-vote.is-on.tr-vote--meh { background: var(--earth-dark); }

.tr-wiggle {
  animation: tr-wiggle 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tr-wiggle {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-6deg) scale(1.15); }
  50% { transform: rotate(6deg) scale(1.15); }
  75% { transform: rotate(-3deg) scale(1.1); }
  100% { transform: rotate(0deg) scale(1); }
}

.tr-tally__winner {
  background: var(--ink);
  color: var(--paper);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
}

.tr-tally__winner-label {
  font: 900 10px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
}

.tr-tally__winner-name {
  font: 900 18px/1.1 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
  margin-top: 6px;
}

.tr-tally__winner-emoji {
  font-size: 28px;
  background: var(--accent);
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
 * SECTION: Planning tools stack (List / Calendar / Map)
 * Right column of the Crew section — replaces old tally.
 * ============================================================ */
.tr-tools {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 24px;
}

.tr-tool {
  background: var(--paper);
  color: var(--ink);
  border-radius: 24px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(245,240,230,0.25);
}

.tr-tool__head { display: flex; flex-direction: column; gap: 8px; }

.tr-tool__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 900 11px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, white);
}

.tr-tool__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  letter-spacing: 0.04em;
  font-size: 10px;
}

.tr-tool__title {
  font: 900 24px/1.1 'Space Grotesk', sans-serif;
  letter-spacing: -0.025em;
  margin: 0;
}

.tr-tool__lead {
  font-size: 14px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 60%, white);
  font-weight: 500;
  margin: 0;
}

.tr-tool__canvas {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(43,18,10,0.1);
  background: #F7F7F7;
}

/* ---------- LIST preview ---------- */
.tr-tool--list .tr-tool__canvas {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tr-li-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(43,18,10,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.tr-li-row__thumb {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  border: 1.5px solid rgba(43,18,10,0.2);
  overflow: hidden;
}

.tr-li-row__pill {
  position: absolute;
  bottom: 3px;
  left: 3px;
  right: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  font: 900 8px/1 'Space Grotesk', sans-serif;
  color: var(--ink);
  letter-spacing: 0.04em;
  justify-content: center;
}
.tr-li-row__pill i {
  width: 5px; height: 5px; border-radius: 999px; display: inline-block;
}

.tr-li-row__body { min-width: 0; }
.tr-li-row__name {
  font: 900 13px/1.15 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-li-row__meta {
  font: 600 10px/1.2 'Space Grotesk', sans-serif;
  color: color-mix(in srgb, var(--ink) 45%, white);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-li-row__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
.tr-li-row__user {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 700 10px/1 'Space Grotesk', sans-serif;
  color: color-mix(in srgb, var(--ink) 60%, white);
}
.tr-li-row__avatar {
  width: 16px; height: 16px;
  border-radius: 999px;
  font: 900 9px/16px 'Space Grotesk', sans-serif;
  text-align: center;
  color: #fff;
}
.tr-li-row__sched {
  font: 700 10px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0;
  text-transform: none;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(43,18,10,0.08);
  color: color-mix(in srgb, var(--ink) 65%, white);
}
.tr-li-row__sched--unset {
  background: transparent;
  border: 1px dashed rgba(43,18,10,0.25);
  color: color-mix(in srgb, var(--ink) 40%, white);
}

.tr-li-row__votes {
  display: flex;
  gap: 2px;
  align-self: flex-start;
  padding: 4px 6px;
  background: var(--eggshell);
  border-radius: 999px;
}
.tr-li-row__votes span {
  font-size: 12px;
  line-height: 1;
}
.tr-li-row__vote-ghost {
  color: rgba(43,18,10,0.2);
  font-weight: 900;
}

/* ---------- CALENDAR preview ---------- */
.tr-tool--cal .tr-tool__canvas { padding: 0; background: #fff; }

/* Stage becomes positioning context for the drag ghost (JS translates in stage coords) */
.tr-cal { position: relative; }

.tr-cal__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(43,18,10,0.08);
}
.tr-cal__trip {
  font: 900 12px/1 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
}
.tr-cal__tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgba(43,18,10,0.06);
  border-radius: 8px;
}
.tr-cal__tabs button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 10px;
  border-radius: 6px;
  font: 900 10px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ink) 45%, white);
  cursor: pointer;
}
.tr-cal__tabs button[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}

.tr-cal__grid {
  display: grid;
  grid-template-columns: 36px repeat(3, 1fr);
  height: 260px;
}
.tr-cal__gutter {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(43,18,10,0.08);
}
/* Matches .tr-cal__col-head height so labels align with lane rows */
.tr-cal__gutter-spacer {
  height: 28px;
  flex-shrink: 0;
}
.tr-cal__gutter-labels {
  position: relative;
  flex: 1;
}
.tr-cal__gutter-labels span {
  position: absolute;
  right: 6px;
  transform: translateY(-50%);
  font: 700 9px/1 'Space Grotesk', sans-serif;
  color: rgba(43,18,10,0.45);
  letter-spacing: 0.02em;
}
.tr-cal__col {
  position: relative;
  border-right: 1px solid rgba(43,18,10,0.06);
  display: flex;
  flex-direction: column;
}
.tr-cal__col:last-child { border-right: 0; }
.tr-cal__col-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(43,18,10,0.08);
  height: 28px;
  box-sizing: border-box;
}
.tr-cal__dow {
  font: 800 9px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(43,18,10,0.5);
}
.tr-cal__dnum {
  font: 900 13px/1 'Space Grotesk', sans-serif;
  color: var(--ink);
}
.tr-cal__col--today .tr-cal__dnum { color: var(--accent); }
.tr-cal__today {
  font: 900 8px/1 'Space Grotesk', sans-serif;
  background: var(--accent);
  color: #fff;
  padding: 3px 5px;
  border-radius: 999px;
  letter-spacing: 0.08em;
}
.tr-cal__lanes {
  position: relative;
  flex: 1;
  /* Uniform hourly gridlines for a 7-hour axis (12 PM → 7 PM, 1/7 ≈ 14.286%) */
  background-image: linear-gradient(to bottom, rgba(43,18,10,0.08) 1px, transparent 1px);
  background-size: 100% 14.286%;
}
.tr-cal__ev {
  position: absolute;
  left: 4px;
  right: 4px;
  background: color-mix(in srgb, var(--evc) 16%, #fff);
  border-left: 4px solid var(--evc);
  border-radius: 8px;
  padding: 5px 8px 5px 7px;
  color: var(--ink);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.tr-cal__ev-tag {
  position: absolute;
  top: 4px;
  right: 5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font: 800 8px/1 'Space Grotesk', sans-serif;
  color: rgba(43,18,10,0.75);
  z-index: 2;
}
.tr-cal__ev-tag i {
  width: 5px; height: 5px; border-radius: 999px;
}
.tr-cal__ev-title {
  font: 900 11px/1.15 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
  padding-right: 48px; /* leave room for tag */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-cal__ev small {
  font: 700 9px/1.2 'Space Grotesk', sans-serif;
  color: color-mix(in srgb, var(--ink) 45%, white);
  display: block;
  margin-top: 2px;
}
.tr-cal__ev-avatar {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 900 9px/1 'Space Grotesk', sans-serif;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.85);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  z-index: 2;
}
/* Drop slots — hidden until the drag animation lands */
.tr-cal__ev--drop {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 280ms ease, transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.tr-cal__ev--drop.is-landed {
  opacity: 1;
  transform: scale(1);
  animation: tr-cal-drop-pulse 0.9s ease;
}
@keyframes tr-cal-drop-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--evc) 55%, transparent); }
  60%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--evc) 0%, transparent); }
  100% { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
}

/* ---------- MAP preview ---------- */
.tr-tool--map .tr-tool__canvas { padding: 0; }

.tr-mapcard {
  position: relative;
  height: 440px;
  overflow: hidden;
}
.tr-mapcard--live { background: #EFE7D8; }
.tr-mapcard__mapbox {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Hide all built-in Mapbox chrome (logo, attribution, nav control) — using a clean canvas */
.tr-mapcard__mapbox .mapboxgl-ctrl-bottom-left,
.tr-mapcard__mapbox .mapboxgl-ctrl-bottom-right,
.tr-mapcard__mapbox .mapboxgl-ctrl-top-left,
.tr-mapcard__mapbox .mapboxgl-ctrl-top-right {
  display: none !important;
}

/* Mapbox controls transform on the anchor via inline style — do not touch transform here */
.tr-mapbox-pin-anchor {
  cursor: pointer;
  z-index: 5; /* primary pins (and their labels) sit above rec photos (z:3) */
}
/* Inner element carries the drop animation (keeps keyframe transforms off the anchor) */
.tr-mapbox-pin {
  position: relative;
  opacity: 0;
  transform-origin: center bottom;
}
.is-revealed .tr-mapbox-pin {
  animation:
    tr-pin-drop   0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    tr-pin-float  3.2s  ease-in-out infinite;
  /* drop lands, then float takes over — staggered per pin so they're out of phase */
  animation-delay:
    calc(var(--i, 0) * 90ms),
    calc(var(--i, 0) * 230ms + 700ms);
}
@keyframes tr-pin-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.tr-mapbox-pin__dot {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 3px solid #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.28);
  transition: transform 0.15s;
}
.tr-mapbox-pin:hover .tr-mapbox-pin__dot { transform: scale(1.2); }
.tr-mapbox-pin__label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font: 900 10px/1 'Space Grotesk', sans-serif;
  background: #fff;
  color: var(--ink);
  padding: 4px 9px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(43, 18, 10, 0.08);
  white-space: nowrap;
  z-index: 6;
  /* Hidden by default — keeps the map calm. Reveal on hover + keep focus pin's always on */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.tr-mapbox-pin-anchor:hover .tr-mapbox-pin__label {
  opacity: 1;
}
/* Popups render as vertical item cards — photo on top, text below — and
   z-index wins over every marker so they can't be occluded by rec photos. */
.tr-mapcard__mapbox .tr-mapbox-popup {
  z-index: 1000 !important;
}
.tr-mapbox-popup .mapboxgl-popup-content {
  padding: 0;
  border-radius: 14px;
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-family: 'Space Grotesk', sans-serif;
  overflow: hidden;
  width: 210px;
  background: #fff;
}
.tr-mapbox-popup__photo {
  width: 100%;
  height: 110px;
  background-size: cover;
  background-position: center;
  background-color: rgba(43, 18, 10, 0.08);
  border-bottom: 1.5px solid var(--ink);
}
.tr-mapbox-popup__body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tr-mapbox-popup__cat {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  font: 900 9px/1 'Space Grotesk', sans-serif !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: rgba(43, 18, 10, 0.55) !important;
}
.tr-mapbox-popup__cat i {
  width: 6px; height: 6px; border-radius: 999px;
}
.tr-mapbox-popup .mapboxgl-popup-content strong {
  display: block;
  font: 900 15px/1.15 'Space Grotesk', sans-serif;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.tr-mapbox-popup__rec {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(43, 18, 10, 0.15);
  font: 700 11px/1.1 'Space Grotesk', sans-serif !important;
  color: rgba(43, 18, 10, 0.7) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.tr-mapbox-popup__rec-avatar {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  font: 900 9px/1 'Space Grotesk', sans-serif !important;
  color: #fff !important;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  flex-shrink: 0;
  margin: 0 !important;
  letter-spacing: 0 !important;
}
.tr-mapbox-popup .mapboxgl-popup-tip { display: none; }

/* Close (×) button — dark pill sitting on the top-right of the photo */
.tr-mapbox-popup .mapboxgl-popup-close-button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: 900 15px/1 'Space Grotesk', sans-serif;
  cursor: pointer;
  z-index: 3;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s;
}
.tr-mapbox-popup .mapboxgl-popup-close-button:hover {
  background: rgba(0, 0, 0, 0.75);
}
.tr-mapbox-popup .mapboxgl-popup-close-button:focus { outline: none; }
/* Align article popup's × with the ribbon/pill row */
.tr-mapbox-popup--article .mapboxgl-popup-close-button {
  top: 9px;
  right: 9px;
}

/* ---- "Rec" pins (discover layer) — smaller Google-POI-style teardrops ---- */
.tr-mapbox-rec-anchor {
  cursor: pointer;
  z-index: 3; /* sits below primary pin labels (z:5) */
}
.tr-mapbox-rec-pin {
  position: relative;
  width: 40px;
  height: 52px;
  opacity: 0;
  transform-origin: center bottom; /* scale/drop anchors on the pin tip */
  transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.is-revealed .tr-mapbox-rec-pin {
  /* Drop in after the primary pins finish — "your list → recs from people".
     No continuous float: reads as planted POIs, keeps the map calm. */
  animation: tr-pin-drop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc((var(--i, 0) * 110ms) + 1000ms);
}
.tr-mapbox-rec-anchor:hover .tr-mapbox-rec-pin { transform: scale(1.08); }

/* SVG shell — single teardrop path, no seam between photo frame and tail */
.tr-mapbox-rec-pin__shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.28));
  z-index: 1;
  pointer-events: none;
}
/* The pfp (recommender's avatar) IS the circle inside the teardrop —
   no separate avatar chip; the category color lives on the border/tail,
   who-rec'd-it lives on the pfp itself */
.tr-mapbox-rec-pin__pfp {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 15px/1 'Space Grotesk', sans-serif;
  color: #fff;
  z-index: 2;
  user-select: none;
  letter-spacing: -0.02em;
}

.tr-mapbox-rec-pin__label {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font: 900 10px/1 'Space Grotesk', sans-serif;
  background: #fff;
  color: var(--ink);
  padding: 3px 8px;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 4;
}
.tr-mapbox-rec-anchor:hover .tr-mapbox-rec-pin__label { opacity: 1; }

/* ---- Article tiles (editorial layer) ---- */
.tr-mapbox-article-anchor {
  position: relative;
  cursor: pointer;
  z-index: 4; /* above primary dots + rec teardrops, below popups */
  padding-bottom: 11px; /* room for the tail so it can sit at the anchor's bottom */
}
/* Outer ink triangle (the "border" of the tail) */
.tr-mapbox-article-anchor::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid var(--ink);
  z-index: 1;
  transition: transform 0.18s, opacity 620ms ease; /* matches tile fade-in */
}
/* Inner white triangle (the "fill" of the tail) */
.tr-mapbox-article-anchor::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #fff;
  z-index: 2;
  transition: transform 0.18s, opacity 620ms ease;
}
/* Match the tile's 2px hover lift so the tail travels with it */
.tr-mapbox-article-anchor:hover::before,
.tr-mapbox-article-anchor:hover::after {
  transform: translate(-50%, -2px);
}
/* Hide the tail in sync with the tile when the popup expands, and fade it back
   in over 620ms when the popup closes — matches the map's zoom-out duration. */
.tr-mapbox-article-anchor:has(.tr-mapbox-article.is-expanded)::before,
.tr-mapbox-article-anchor:has(.tr-mapbox-article.is-expanded)::after {
  opacity: 0;
  transition: opacity 200ms ease;
}
.tr-mapbox-article {
  position: relative;
  width: 196px;
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 7px 9px 7px 7px;
  display: flex;
  gap: 9px;
  align-items: center;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 420ms ease,
    transform 480ms cubic-bezier(0.34, 1.4, 0.64, 1);
  transition-delay: calc((var(--i, 0) * 140ms) + 1900ms); /* drop in after recs */
}
.is-revealed .tr-mapbox-article {
  opacity: 1;
  transform: translateY(0);
  /* Reset fade-in transition once revealed so the close-popup animation can take over */
  transition: opacity 620ms ease;
  transition-delay: 0ms;
}
.tr-mapbox-article-anchor:hover .tr-mapbox-article {
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.18s, box-shadow 0.18s;
}
/* When the article's popup is open, the tile fades out quickly (200ms) so
   the expanded card takes over. When the popup CLOSES, the tile transitions
   back via the base rule's 620ms duration — matching the map zoom-out so the
   tile fades in smoothly WHILE the map is zooming, no wiggle. */
.tr-mapbox-article.is-expanded {
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.tr-mapbox-article__ribbon {
  position: absolute;
  top: -14px;
  left: 10px;
  padding: 3px 8px;
  background: var(--ink);
  color: var(--paper);
  font: 900 8px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.tr-mapbox-article__thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 1px solid rgba(43, 18, 10, 0.12);
}
.tr-mapbox-article__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tr-mapbox-article__kind {
  font: 900 8px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(43, 18, 10, 0.5);
}
.tr-mapbox-article__title {
  font: 900 11px/1.2 'Space Grotesk', sans-serif;
  color: var(--ink);
  letter-spacing: -0.015em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tr-mapbox-article__author {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font: 700 9px/1 'Space Grotesk', sans-serif;
  color: rgba(43, 18, 10, 0.6);
}
.tr-mapbox-article__avatar {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 900 7px/1 'Space Grotesk', sans-serif;
  color: #fff;
  flex-shrink: 0;
}

/* ---- Article / "what's hot" popup — editorial treatment ---- */
.tr-mapbox-popup--article .mapboxgl-popup-content {
  width: 280px;
  transform-origin: 50% 100%; /* grows upward from the tile position */
  animation: tr-article-expand 340ms cubic-bezier(0.22, 1.05, 0.35, 1);
}
@keyframes tr-article-expand {
  0%   { opacity: 0; transform: scale(0.55) translateY(14px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.tr-mapbox-popup--article .tr-mapbox-popup__photo {
  position: relative;
  height: 110px;
}
/* "★ What's hot" ribbon overlay, top-left of photo */
.tr-mapbox-popup__ribbon {
  position: absolute !important;
  top: 12px;
  left: 12px;
  padding: 5px 10px !important;
  background: var(--ink);
  color: var(--paper);
  font: 900 9px/1 'Space Grotesk', sans-serif !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
/* Category kind pill, top-right of photo (frosted) */
.tr-mapbox-popup__kind-pill {
  position: absolute !important;
  top: 12px;
  right: 40px; /* leave room for the × button */
  padding: 4px 10px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: var(--ink) !important;
  font: 800 10px/1 'Space Grotesk', sans-serif !important;
  letter-spacing: 0.04em !important;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Body padding a touch larger for editorial breathing room */
.tr-mapbox-popup--article .tr-mapbox-popup__body {
  padding: 12px 14px 12px;
  gap: 8px;
}

/* Headline — Playfair italic to signal editorial content vs data panel */
.tr-mapbox-popup__editorial-title {
  font: 900 italic 19px/1.15 'Playfair Display', serif;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Excerpt copy — clamped to 2 lines to keep the popup compact */
.tr-mapbox-popup__excerpt {
  font: 500 12px/1.45 'Space Grotesk', sans-serif !important;
  color: rgba(43, 18, 10, 0.72) !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Byline — avatar + name + "Creator · 5 min read" */
.tr-mapbox-popup__byline {
  display: flex !important;
  align-items: center;
  gap: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(43, 18, 10, 0.1);
}
.tr-mapbox-popup__byline-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 900 11px/1 'Space Grotesk', sans-serif;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.tr-mapbox-popup__byline-text {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.tr-mapbox-popup__byline-text strong {
  font: 900 12px/1.1 'Space Grotesk', sans-serif !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
}
.tr-mapbox-popup__byline-text span {
  font: 700 10px/1.1 'Space Grotesk', sans-serif !important;
  color: rgba(43, 18, 10, 0.5) !important;
}

/* Read-article CTA at the bottom */
.tr-mapbox-popup__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 7px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font: 900 10px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  box-shadow: 2px 2px 0 var(--ink);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
  margin-top: 2px;
}
.tr-mapbox-popup__cta:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}
.tr-mapbox-popup__cta:focus { outline: none; }
.tr-mapbox-popup__cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.tr-mapbox-popup__cta svg {
  width: 12px;
  height: 12px;
}

/* Tease bubble — sits above the CTA, hidden by default, pops in on click */
.tr-mapbox-popup__cta-tease {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  padding: 6px 11px;
  background: var(--accent);
  color: #fff;
  font: 900 10px/1 'Space Grotesk', sans-serif !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.34, 1.5, 0.64, 1);
}
.tr-mapbox-popup__cta-tease::after {
  /* small triangle pointing down to the button */
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--accent);
}
.tr-mapbox-popup__cta.is-teased .tr-mapbox-popup__cta-tease {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Cute shake when the CTA is clicked */
.tr-mapbox-popup__cta.is-teased {
  animation: tr-cta-shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes tr-cta-shake {
  10%, 90% { transform: translate(-1px, 0) rotate(-0.5deg); }
  20%, 80% { transform: translate( 2px, 0) rotate( 0.8deg); }
  30%, 50%, 70% { transform: translate(-3px, 0) rotate(-1deg); }
  40%, 60% { transform: translate( 3px, 0) rotate( 1deg); }
  100% { transform: translate(0, 0) rotate(0); }
}
.tr-mapcard__pins {
  position: absolute;
  inset: 0;
}
.tr-pin {
  position: absolute;
  transform: translate(-50%, -50%);
}
.tr-pin__dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform 0.15s;
}
.tr-pin:hover .tr-pin__dot { transform: scale(1.25); }

.tr-pin--focus .tr-pin__dot {
  transform: scale(1.35);
  box-shadow: 0 3px 10px rgba(0,0,0,0.3), 0 0 0 6px rgba(255,94,26,0.2);
}
.tr-pin__label {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font: 900 9px/1 'Space Grotesk', sans-serif;
  background: #fff;
  color: var(--ink);
  padding: 4px 7px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  white-space: nowrap;
}

.tr-mapcard__legend {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.14);
}
.tr-mapcard__legend span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 800 12px/1 'Space Grotesk', sans-serif;
  color: var(--ink);
}
.tr-mapcard__legend i {
  width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0;
}
.tr-mapcard__legend-divider {
  height: 1px;
  width: 100%;
  background: rgba(43, 18, 10, 0.12);
  margin: 2px 0;
  padding: 0;
}
.tr-mapcard__legend-rec {
  gap: 8px !important;
}
.tr-mapcard__legend-rec-pfp {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 900 10px/1 'Space Grotesk', sans-serif;
  color: #fff;
  font-style: normal;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px rgba(43, 18, 10, 0.5), 0 1px 2px rgba(0, 0, 0, 0.22);
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.tr-mapcard__legend-article {
  gap: 9px !important;
}
.tr-mapcard__legend-article-mark {
  width: 22px;
  height: 14px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 900 9px/1 'Space Grotesk', sans-serif;
  font-style: normal;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  box-shadow: 1px 1px 0 var(--ink);
}

.tr-mapcard__zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 2px 2px 0 var(--ink);
}
.tr-mapcard__zoom button {
  appearance: none;
  border: 0;
  background: transparent;
  width: 24px; height: 24px;
  font: 900 14px/1 'Space Grotesk', sans-serif;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 2px solid var(--ink);
}
.tr-mapcard__zoom button:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  .tr-tools { position: static; }
  .tr-cal__grid { height: 220px; }
  .tr-mapcard { height: 220px; }
}

/* ============================================================
 * SECTION: Press / testimonials
 * ============================================================ */
.tr-press {
}

.tr-press__carousel {
  position: relative;
  padding-bottom: 20px;
  /* Full-bleed: break out of the 1400px .tr-section container */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  overflow: hidden;
}

.tr-press__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 8px 40px 16px;
  margin: 0;
  scrollbar-width: none;
  cursor: grab;
}

.tr-press__track::-webkit-scrollbar { display: none; }
.tr-press__track.is-grabbing { cursor: grabbing; }

.tr-quote {
  flex: 0 0 480px;
  background: #fff;
  border: 1.5px solid rgba(43,18,10,0.15);
  border-radius: 24px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-shadow: 8px 8px 0 var(--ink);
  transition: transform .2s ease, box-shadow .2s ease;
  user-select: none;
}

.tr-quote:hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 var(--ink);
}

.tr-quote--earth { background: var(--earth); border-color: rgba(43,18,10,0.2); }
.tr-quote--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.tr-quote--ink:hover { box-shadow: 10px 10px 0 var(--ink); }
.tr-quote--ink .tr-quote__mark { color: var(--accent); }
.tr-quote--ink .tr-quote__source,
.tr-quote--ink .tr-quote__author-role { color: rgba(245, 240, 230, 0.6); }

.tr-quote--accent { background: var(--accent); color: var(--paper); border-color: var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.tr-quote--accent:hover { box-shadow: 10px 10px 0 var(--ink); }
.tr-quote--accent .tr-quote__mark { color: var(--ink); }
.tr-quote--accent .tr-quote__source,
.tr-quote--accent .tr-quote__author-role { color: rgba(43, 18, 10, 0.7); }

.tr-quote__mark {
  font: 900 96px/0.6 'Playfair Display', Georgia, serif;
  font-style: italic;
  color: var(--accent);
  height: 48px;
}

.tr-quote__body {
  font: 900 22px/1.25 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
  flex: 1;
}

.tr-quote__source {
  font: 900 10px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 12px;
}

.tr-quote__author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tr-quote__author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 3px solid currentColor;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 22px/1 'Space Grotesk', sans-serif;
  color: #2B120A;
  letter-spacing: -0.02em;
}

.tr-quote__author-name {
  font: 900 20px/1.15 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
}

.tr-quote__author-role {
  font: 700 15px/1.3 'Space Grotesk', sans-serif;
  opacity: 0.6;
  margin-top: 4px;
}

.tr-press__nav {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 8px;
}

.tr-iconbtn {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--paper);
  border: 2px solid var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .1s;
}

.tr-iconbtn:hover { background: var(--ink); color: var(--paper); }
.tr-iconbtn:active { transform: scale(0.95); }
.tr-iconbtn svg { width: 20px; height: 20px; }

/* ============================================================
 * SECTION: Final CTA + marquee + footer
 * ============================================================ */
.tr-cta {
  background: var(--accent);
  color: var(--paper);
  padding: 64px 40px;
  text-align: center;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}

.tr-cta__inner {
  max-width: 960px;
  margin: 0 auto;
}

.tr-cta .tr-eyebrow { color: rgba(245, 240, 230, 0.8); }
.tr-cta .tr-eyebrow::before { background: var(--paper); opacity: 0.6; }

.tr-cta__title {
  font-weight: 900;
  font-size: clamp(44px, 7vw, 108px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin-top: 20px;
  color: var(--paper);
}

.tr-cta__title .tr-italic {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 900;
  color: var(--ink);
}

.tr-cta__rank {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.tr-cta__primary-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.tr-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  min-width: 200px;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow: 0 4px 14px rgba(43, 18, 10, 0.28);
}

.tr-store-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(43, 18, 10, 0.35);
  background: #000;
}
.tr-store-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(43, 18, 10, 0.28);
}

.tr-store-btn__mark {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tr-store-btn__mark svg { width: 22px; height: 22px; fill: currentColor; }

.tr-store-btn__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}

.tr-store-btn__pre {
  font: 700 9px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

.tr-store-btn__main {
  font: 900 17px/1 'Space Grotesk', sans-serif;
  letter-spacing: -0.015em;
}

/* Marquee strip (reprise) */
.tr-marquee {
  background: var(--marquee-bar);
  overflow: hidden;
  height: 49px;
  display: flex;
  align-items: center;
  border-top: 0;
  border-bottom: 0;
  margin-top: -5px;
  margin-bottom: -3px;
}

.tr-marquee__track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: tr-scroll 24s linear infinite;
}


.tr-marquee__track span {
  font: 900 26px/1 'Space Grotesk', sans-serif;
  color: var(--lime);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 16px;
  flex-shrink: 0;
}

.tr-marquee__track .tr-marquee__star {
  color: var(--lime);
  font-size: 24px;
  padding: 0 4px;
  flex-shrink: 0;
}

@keyframes tr-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* Footer */
.tr-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 72px 40px 40px;
}

.tr-footer__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr auto auto;
  gap: 56px;
  align-items: start;
}

.tr-footer__follow .tr-footer__col-title,
.tr-footer__legal .tr-footer__col-title {
  font-size: 14px;
  letter-spacing: 0.24em;
  margin-bottom: 24px;
}

.tr-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 360px; }

.tr-footer__wordmark {
  height: 80px;
  width: auto;
  display: block;
  align-self: flex-start;
}

.tr-footer__tag {
  font-size: 18px;
  line-height: 1.45;
  color: rgba(245, 240, 230, 0.75);
  font-weight: 500;
}

.tr-footer__col-title {
  font: 900 10px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 20px;
}

.tr-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tr-footer__links a {
  color: var(--paper);
  text-decoration: none;
  font: 700 14px/1 'Space Grotesk', sans-serif;
  opacity: 0.8;
  transition: opacity .15s;
}

.tr-footer__links a:hover { opacity: 1; color: var(--lime); }

/* Social icon variant — Follow column on every breakpoint */
.tr-footer__links--social { flex-direction: row; gap: 20px; }
.tr-footer__links--social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(245, 240, 230, 0.25);
  color: var(--paper);
  opacity: 0.9;
  transition: border-color .15s, transform .15s, color .15s, opacity .15s;
}
.tr-footer__links--social a svg { width: 32px; height: 32px; }
.tr-footer__links--social a:hover {
  border-color: var(--lime);
  color: var(--lime);
  transform: translateY(-2px);
  opacity: 1;
}

.tr-footer__bottom {
  max-width: 1400px;
  margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(245, 240, 230, 0.18);
  display: flex;
  justify-content: space-between;
  font: 700 12px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.55);
}

/* ============================================================
 * Tweaks panel
 * ============================================================ */
.tr-tweaks {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 280px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 20px;
  z-index: 9999;
  display: none;
  font-family: 'Space Grotesk', sans-serif;
}

.tr-tweaks.is-visible { display: block; }

.tr-tweaks__title {
  font: 900 13px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tr-tweaks__title-close {
  background: none;
  border: none;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  color: var(--ink);
  opacity: 0.5;
}

.tr-tweak {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.tr-tweak__label {
  font: 900 10px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
}

.tr-tweak__seg {
  display: flex;
  background: var(--eggshell);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.tr-tweak__seg button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 7px 10px;
  border-radius: 999px;
  font: 900 10px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink);
}

.tr-tweak__seg button[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
}

.tr-tweak__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--earth);
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  outline: none;
}

.tr-tweak__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--accent);
  border: 2px solid var(--ink);
  cursor: pointer;
}

.tr-tweak__slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--accent);
  border: 2px solid var(--ink);
  cursor: pointer;
}

/* ============================================================
 * Crew — feature rows (new layout replacing .tr-tools/.tr-trip-card)
 * ============================================================ */
.tr-feature-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: center;
  padding: 80px 0;
  border-top: 1px solid rgba(245, 240, 230, 0.08);
}
.tr-feature-row:first-of-type { border-top: 0; padding-top: 40px; }
.tr-feature-row:last-of-type { padding-bottom: 24px; }

.tr-feature-row--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.tr-feature-row--flip .tr-feature-row__copy { order: 2; }

.tr-feature-row__copy {
  display: flex;
  flex-direction: column;
  max-width: 440px;
}

.tr-feature-row__num {
  font: 900 clamp(120px, 18vw, 200px)/0.85 'Space Grotesk', sans-serif;
  letter-spacing: -0.06em;
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
}

.tr-feature-row__title {
  font: 900 clamp(34px, 4.5vw, 56px)/0.95 'Space Grotesk', sans-serif;
  letter-spacing: -0.03em;
  color: var(--paper);
  margin: 0;
}

.tr-feature-row__lead {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(245, 240, 230, 0.72);
  font-weight: 500;
}

.tr-feature-row__visual {
  min-width: 0;                 /* allow canvas to shrink in grid */
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tr-feature-row__canvas {
  background: var(--paper);
  border: 1.5px solid rgba(43, 18, 10, 0.25);
  border-radius: 20px;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* List-row variant inside feature row */
.tr-feature-row .tr-tool__canvas.tr-feature-row__canvas {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Calendar + map need larger bounding sizes than the old sidebar */
.tr-feature-row .tr-cal.tr-feature-row__canvas { padding: 0; background: #fff; }
.tr-feature-row .tr-cal .tr-cal__grid { height: 380px; }

.tr-feature-row .tr-mapcard.tr-feature-row__canvas { padding: 0; height: 540px; }

/* =========== Row 02 — Free-text import demo =========== */
.tr-import-demo {
  position: relative; /* containing block for flying extraction ghosts */
  --phone-w: 300px;
  --phone-h: calc(var(--phone-w) * 149.6 / 71.5); /* iPhone 17 aspect from Apple specs */
  display: grid;
  grid-template-columns: minmax(240px, 320px) auto;
  gap: 28px;
  align-items: start;
  /* Outer wrapper is transparent — each sub-panel (message card, phone frame)
     carries its own chrome so the ghost cards visibly travel between two
     distinct containers when they extract. */
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

/* Left: paper card with Nina's DM + extraction status.
   Min-height matches the phone so both panels feel symmetrical. */
.tr-import-demo__msg-panel {
  background: transparent;
  border: 0;
  /* Phone frame has a 9px bezel. Inset the stack by that amount so the
     top and bottom source cards align with the beige screen edges. */
  padding: 9px 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: var(--phone-h);
}

/* Right: iOS-style phone frame with iPhone 17 proportions */
.tr-import-demo__phone {
  position: relative;
  width: var(--phone-w);
  height: var(--phone-h);
  background: var(--ink);
  border-radius: 44px;
  padding: 9px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.05),
    0 0 0 3px rgba(43, 18, 10, 0.25),
    12px 12px 0 rgba(0, 0, 0, 0.3);
}
.tr-import-demo__phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--paper);
  border-radius: 38px;
  padding: 46px 14px 26px;  /* top room for the notch, bottom room for home-indicator */
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
/* Dynamic-island-style notch sitting on the top of the screen */
.tr-import-demo__phone-screen::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 94px;
  height: 24px;
  background: var(--ink);
  border-radius: 999px;
  z-index: 3;
}
/* iOS home-indicator bar at the bottom */
.tr-import-demo__phone-screen::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 4px;
  background: rgba(43, 18, 10, 0.35);
  border-radius: 999px;
}

.tr-import-demo__msg {
  background: #fff;
  border: 1px solid rgba(43, 18, 10, 0.1);
  border-radius: 16px;
  padding: 14px;
  color: var(--ink);
  opacity: 0.55;
  transition: opacity 260ms ease, transform 260ms ease, box-shadow 260ms ease;
}
.tr-import-demo__msg.is-active {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

/* --- TikTok: near-black card, paper text, pink icon --- */
.tr-import-demo__msg--tiktok {
  background: #0b0b0b;
  border-color: #000;
  color: var(--paper);
}
.tr-import-demo__msg--tiktok .tr-import-demo__msg-meta strong { color: var(--paper); }
.tr-import-demo__msg--tiktok .tr-import-demo__msg-meta span { color: rgba(245, 240, 230, 0.55); }
.tr-import-demo__msg--tiktok .tr-import-demo__msg-source { color: #FF0050; opacity: 1; }
.tr-import-demo__msg--tiktok .tr-import-demo__msg-body { color: var(--paper); }
.tr-import-demo__msg--tiktok .tr-import-demo__msg-body mark.is-detected {
  background: rgba(255, 94, 26, 0.35);
  box-shadow: inset 0 -2px 0 rgba(255, 94, 26, 1);
  color: var(--paper);
}

/* --- iMessage: white card, blue body bubble --- */
.tr-import-demo__msg--imessage { background: #fff; }
.tr-import-demo__msg--imessage .tr-import-demo__msg-source { color: #0A84FF; }
.tr-import-demo__msg--imessage .tr-import-demo__msg-bubble {
  background: #0A84FF;
  border-radius: 18px 18px 18px 6px;
  padding: 10px 14px;
  margin-top: 4px;
}
.tr-import-demo__msg--imessage .tr-import-demo__msg-bubble .tr-import-demo__msg-body {
  color: #fff;
  font-size: 15px;
  margin: 0;
}
.tr-import-demo__msg--imessage .tr-import-demo__msg-body mark.is-detected {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.9);
  color: #fff;
}

/* --- Google Docs: white card with blue top strip --- */
.tr-import-demo__msg--gdocs {
  background: #fff;
  border-top: 4px solid #1A73E8;
  padding-top: 10px;
}
.tr-import-demo__msg--gdocs .tr-import-demo__msg-source { color: #1A73E8; }
.tr-import-demo__msg--gdocs .tr-import-demo__msg-meta strong { color: #202124; }
.tr-import-demo__msg--gdocs .tr-import-demo__msg-body {
  border-left: 3px solid #e6e6e6;
  padding-left: 12px;
  color: #202124;
}

/* Per-card status pill: hidden until card becomes active, stays after complete */
.tr-import-demo__msg-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font: 800 10px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.02em;
  align-self: flex-start;
  margin-top: 10px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.tr-import-demo__msg.is-active .tr-import-demo__msg-status,
.tr-import-demo__msg.is-complete .tr-import-demo__msg-status {
  opacity: 1;
  transform: translateY(0);
}
.tr-import-demo__msg-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  animation: tr-import-pulse 1s ease-in-out infinite;
}
.tr-import-demo__msg.is-complete .tr-import-demo__msg-status-dot {
  animation: none;
  background: #2D8B46;
}

/* TikTok pill: pink on dark */
.tr-import-demo__msg--tiktok .tr-import-demo__msg-status {
  background: rgba(255, 0, 80, 0.15);
  color: #FF0050;
}
.tr-import-demo__msg--tiktok.is-complete .tr-import-demo__msg-status {
  background: rgba(45, 139, 70, 0.18);
  color: #8EEFA4;
}

/* iMessage pill: blue on white */
.tr-import-demo__msg--imessage .tr-import-demo__msg-status {
  background: rgba(10, 132, 255, 0.12);
  color: #0A84FF;
}
.tr-import-demo__msg--imessage.is-complete .tr-import-demo__msg-status {
  background: rgba(45, 139, 70, 0.14);
  color: #2D8B46;
}

/* Docs pill: docs blue on white */
.tr-import-demo__msg--gdocs .tr-import-demo__msg-status {
  background: rgba(26, 115, 232, 0.1);
  color: #1A73E8;
}
.tr-import-demo__msg--gdocs.is-complete .tr-import-demo__msg-status {
  background: rgba(45, 139, 70, 0.12);
  color: #2D8B46;
}
.tr-import-demo__msg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tr-import-demo__msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 900 12px/1 'Space Grotesk', sans-serif;
  color: #fff;
  flex-shrink: 0;
}
.tr-import-demo__msg-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.tr-import-demo__msg-meta strong {
  font: 900 13px/1 'Space Grotesk', sans-serif;
  color: var(--ink);
}
.tr-import-demo__msg-meta span {
  font: 700 10px/1 'Space Grotesk', sans-serif;
  color: rgba(43, 18, 10, 0.5);
}
.tr-import-demo__msg-source {
  width: 18px;
  height: 18px;
  color: rgba(43, 18, 10, 0.35);
  display: inline-flex;
  flex-shrink: 0;
}
.tr-import-demo__msg-source svg { width: 100%; height: 100%; }
.tr-import-demo__msg-body {
  font: 500 16px/1.55 'Space Grotesk', sans-serif;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.tr-import-demo__msg-body mark {
  background: transparent;
  color: inherit;
  padding: 2px 4px;
  margin: 0 -4px;
  border-radius: 5px;
  transition: background .35s ease, box-shadow .35s ease;
}
.tr-import-demo__msg-body mark.is-detected {
  background: rgba(255, 94, 26, 0.15);
  box-shadow: inset 0 -2px 0 rgba(255, 94, 26, 0.85);
}

.tr-import-demo__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(43, 18, 10, 0.06);
  border: 1px solid rgba(43, 18, 10, 0.08);
  font: 800 11px/1 'Space Grotesk', sans-serif;
  color: rgba(43, 18, 10, 0.65);
  letter-spacing: 0.02em;
  align-self: flex-start;
}
.tr-import-demo__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  animation: tr-import-pulse 1s ease-in-out infinite;
}
.tr-import-demo.is-done .tr-import-demo__dot {
  animation: none;
  background: #2D8B46;
}
@keyframes tr-import-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.8; }
  50%      { transform: scale(1.4); opacity: 1;   }
}

/* Phone app UI — mimics the real Trippple list view inside the iPhone frame */

/* Top app header: back button + user avatar */
.tr-import-demo__app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tr-import-demo__back {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(43, 18, 10, 0.06);
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
}
.tr-import-demo__back svg { width: 14px; height: 14px; }
.tr-import-demo__user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 900 13px/1 'Space Grotesk', sans-serif;
  color: #fff;
  letter-spacing: -0.02em;
}

/* Trip title block */
.tr-import-demo__trip-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 2px;
}
.tr-import-demo__trip-head h4 {
  font: 900 22px/1 'Space Grotesk', sans-serif;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
}
.tr-import-demo__trip-head p {
  font: 600 11px/1.2 'Space Grotesk', sans-serif;
  color: rgba(43, 18, 10, 0.55);
  margin: 0;
}

/* Activity chip — muted "empty" state by default, lights up once a place lands */
.tr-import-demo__activity {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px 7px 7px;
  background: rgba(43, 18, 10, 0.04);
  border: 1px solid rgba(43, 18, 10, 0.08);
  border-radius: 10px;
  font: 700 11px/1.2 'Space Grotesk', sans-serif;
  color: var(--ink);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.tr-import-demo__activity.is-active {
  background: rgba(255, 94, 26, 0.1);
  border-color: rgba(255, 94, 26, 0.25);
}
.tr-import-demo__activity-pfp {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 900 10px/1 'Space Grotesk', sans-serif;
  background: rgba(43, 18, 10, 0.15);
  color: rgba(43, 18, 10, 0.4);
  flex-shrink: 0;
  letter-spacing: -0.02em;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.tr-import-demo__activity.is-active .tr-import-demo__activity-pfp {
  background: #FF5E1A;
  color: #fff;
}
.tr-import-demo__activity-text {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: rgba(43, 18, 10, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-import-demo__activity-text strong {
  color: var(--ink);
  font-weight: 900;
}
.tr-import-demo__activity-text em {
  font-style: normal;
  font-weight: 800;
  color: var(--ink);
}
.tr-import-demo__activity-empty {
  color: rgba(43, 18, 10, 0.45);
  font-weight: 600;
}
.tr-import-demo__activity-filled { display: none; }
.tr-import-demo__activity.is-active .tr-import-demo__activity-empty { display: none; }
.tr-import-demo__activity.is-active .tr-import-demo__activity-filled { display: inline; }
.tr-import-demo__activity-time {
  font: 700 10px/1 'Space Grotesk', sans-serif;
  color: rgba(43, 18, 10, 0.5);
  flex-shrink: 0;
}
.tr-import-demo__activity:not(.is-active) .tr-import-demo__activity-time {
  display: none;
}

/* Filter chip row */
.tr-import-demo__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tr-import-demo__filter {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 9px;
  background: rgba(43, 18, 10, 0.06);
  border: 1px solid rgba(43, 18, 10, 0.1);
  border-radius: 999px;
  font: 700 10px/1 'Space Grotesk', sans-serif;
  color: rgba(43, 18, 10, 0.75);
  cursor: default;
}
.tr-import-demo__filter svg {
  width: 9px;
  height: 9px;
  opacity: 0.55;
}

.tr-import-demo__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  flex: 1;
  min-height: 0;
}

/* Full gradient-photo cards — same visual vocabulary as Row 01 listPlaceGrid */
.tr-import-demo__card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid rgba(43, 18, 10, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  background-size: cover;
  background-position: center;
  color: #fff;
  display: block;
  isolation: isolate;
  /* Invisible until the ghost lands — no transform so the bounding box is
     stable for the flight target, and no transition so the real card snaps
     to visible underneath the ghost (which fades out to reveal it). This
     avoids a flash caused by mismatched card-fade-in vs ghost-fade-out timings. */
  opacity: 0;
}
.tr-import-demo__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.0)  0%,
    rgba(0, 0, 0, 0.0)  35%,
    rgba(0, 0, 0, 0.45) 65%,
    rgba(0, 0, 0, 0.82) 100%);
  z-index: 0;
}
.tr-import-demo__card.is-landed { opacity: 1; transform: none; }

.tr-import-demo__card-cat {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: rgba(43, 18, 10, 0.85);
  font: 700 9px/1 'Space Grotesk', sans-serif;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.tr-import-demo__card-cat i { width: 4px; height: 4px; border-radius: 999px; }

.tr-import-demo__card-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 9px 9px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tr-import-demo__card-title {
  font: 900 12px/1.15 'Space Grotesk', sans-serif;
  letter-spacing: -0.015em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tr-import-demo__card-meta {
  font: 600 10px/1.2 'Space Grotesk', sans-serif;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-import-demo__card-author {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 7px 2px 2px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: 700 9px/1 'Space Grotesk', sans-serif;
  color: rgba(255, 255, 255, 0.9);
  align-self: flex-start;
}
.tr-import-demo__card-avatar {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 900 8px/1 'Space Grotesk', sans-serif;
  color: #fff;
  flex-shrink: 0;
}

/* Flying ghost — spawned from a highlighted mark, arcs into the list slot */
.tr-import-demo__fly {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
  margin: 0;
  opacity: 1;       /* fly always has opacity set by the is-landed clone */
  transform: none; /* layout overridden at runtime by JS animation */
  will-change: transform, opacity;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

@media (max-width: 760px) {
  .tr-import-demo { grid-template-columns: 1fr; }
  .tr-import-demo__phone { justify-self: center; }
  .tr-import-demo__cards { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile: carousel the 3 source cards — active one centered, completed slides left,
   pending queue off to the right. */
@media (max-width: 640px) {
  .tr-import-demo__msg-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    min-height: auto;
    overflow: hidden;
    position: relative;
  }
  .tr-import-demo__msg {
    grid-column: 1;
    grid-row: 1;
    transform: translateX(100%);
    opacity: 0;
    min-width: 0;
    /* No transition on the default state — reset() snaps cards instantly
       back off-right instead of animating across the viewport. */
  }
  .tr-import-demo__msg.is-active {
    transform: translateX(0);
    opacity: 1;
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 300ms ease;
  }
  .tr-import-demo__msg.is-complete {
    transform: translateX(-110%);
    opacity: 0;
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 300ms ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tr-import-demo__card { opacity: 1; transform: none; transition: none; }
  .tr-import-demo__dot  { animation: none; }
  .tr-import-demo__msg-body mark.is-detected { transition: none; }
  .tr-import-demo__msg { opacity: 1; transform: none; transition: none; }
}

/* =========== Import-from source strip (Row 01) =========== */
.tr-source-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 4px 2px;
}

.tr-source-strip__label {
  font: 900 11px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.55);
  margin-right: 6px;
}

.tr-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(43, 18, 10, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  font: 700 13px/1 'Space Grotesk', sans-serif;
  color: var(--ink);
}

.tr-source-pill__icon {
  width: 16px;
  height: 16px;
  color: var(--ink);
  flex-shrink: 0;
}

.tr-source-pill--more {
  background: transparent;
  border: 1px dashed rgba(245, 240, 230, 0.35);
  color: rgba(245, 240, 230, 0.72);
  box-shadow: none;
  font-style: italic;
}

/* =========== Row 01 — photo-hero ListItemCard port =========== */
/* Contributor lanes band — sits above the place grid and drives the
   "friends / creators / locals" cycle animation. */
.tr-places-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.tr-places-source {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(245, 240, 230, 0.15);
  background: rgba(43, 18, 10, 0.55);
  backdrop-filter: blur(8px);
  color: var(--paper);
  font: 800 12px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.01em;
  cursor: default;
  pointer-events: none;
  transition: background 260ms ease, border-color 260ms ease,
              transform 260ms ease, box-shadow 260ms ease, opacity 260ms ease;
  opacity: 0.55;
}
.tr-places-source:hover { opacity: 0.55; }
.tr-places-source.is-active {
  opacity: 1;
  background: rgba(43, 18, 10, 0.88);
  transform: translateY(-2px);
}
.tr-places-source[data-source-type="friend"].is-active {
  border-color: #FF5E1A;
  box-shadow: 0 0 0 2px rgba(255, 94, 26, 0.35);
}
.tr-places-source[data-source-type="creator"].is-active {
  border-color: #D96C88;
  box-shadow: 0 0 0 2px rgba(217, 108, 136, 0.35);
}
.tr-places-source[data-source-type="local"].is-active {
  border-color: #2D8B46;
  box-shadow: 0 0 0 2px rgba(45, 139, 70, 0.35);
}
.tr-places-source__avatars {
  display: inline-flex;
  align-items: center;
}
.tr-places-source__avatars span {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(43, 18, 10, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 900 10px/1 'Space Grotesk', sans-serif;
  color: #fff;
  margin-left: -6px;
}
.tr-places-source__avatars span:first-child { margin-left: 0; }
.tr-places-source__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(245, 240, 230, 0.15);
  font: 900 10px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.02em;
}

/* Per-card source accent (ring + ribbon).
   Ring color is set via --source-ring. Applied when card has .is-highlighted. */
.tr-place-card[data-source-type="friend"]  { --source-ring: #FF5E1A; }
.tr-place-card[data-source-type="creator"] { --source-ring: #D96C88; }
.tr-place-card[data-source-type="local"]   { --source-ring: #2D8B46; }

.tr-place-card {
  transition: opacity 320ms ease, transform 320ms ease,
              box-shadow 320ms ease, filter 320ms ease;
}
/* Currently-focused pair — scale up, thick ring, outer glow */
.tr-place-card.is-highlighted {
  transform: scale(1.035);
  z-index: 2;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.35),
    0 0 0 4px var(--source-ring, #FF5E1A),
    0 0 32px color-mix(in srgb, var(--source-ring) 55%, transparent);
}
/* Non-matching cards during an active phase — fade back */
/* Dimmed state — darken everything with a scrim overlay instead of using
 * parent-opacity, so the hearts badge can opt out and stay full-bright. */
.tr-place-card.is-dimmed {
  transform: scale(0.97);
  transition: transform 0.3s ease;
}
.tr-place-card.is-dimmed::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(43, 18, 10, 0.72);
  backdrop-filter: saturate(0.5);
  -webkit-backdrop-filter: saturate(0.5);
  pointer-events: none;
  border-radius: inherit;
}
/* Voters/heart badge sits above the dim overlay — stays vivid regardless of
 * whether the card's highlighted by the current contributor-lane phase. */
.tr-place-card__voters {
  z-index: 4;
}
/* Resting state — all cards visible again with a subtle source ring */
.tr-place-card.is-highlighted.is-resting {
  transform: none;
  z-index: auto;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 0 0 2px color-mix(in srgb, var(--source-ring) 55%, transparent);
}

.tr-place-card__ribbon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--source-ring, #FF5E1A);
  color: #fff;
  font: 900 14px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events: none;
}
.tr-place-card.is-highlighted .tr-place-card__ribbon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 760px) {
  .tr-places-sources { flex-direction: column; align-items: stretch; }
  .tr-places-source { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-places-source, .tr-place-card, .tr-place-card__ribbon,
  .tr-place-card.is-highlighted .tr-place-card__voters { transition: none; }
}

.tr-place-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.tr-place-card {
  position: relative;
  aspect-ratio: 5 / 6;
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid rgba(43, 18, 10, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background-size: cover;
  background-position: center;
  color: #fff;
  display: block;
  isolation: isolate;       /* contain blend modes / overflow */
}

.tr-place-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.15) 40%,
    rgba(0, 0, 0, 0.72) 100%);
  z-index: 0;
}

.tr-place-card__cat {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: rgba(43, 18, 10, 0.85);
  font: 700 10px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0;
  text-transform: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tr-place-card__cat i {
  width: 5px; height: 5px;
  border-radius: 999px;
}

/* Crew voter stack — replaces old schedule chip. Emphasizes collaboration. */
.tr-place-card__voters {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: 800 10px/1 'Space Grotesk', sans-serif;
  color: #fff;
}
.tr-place-card__voters-stack {
  display: inline-flex;
}
.tr-place-card__voters-stack span {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  margin-left: -5px;
  border: 1.5px solid rgba(0, 0, 0, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 900 9px/1 'Space Grotesk', sans-serif;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.tr-place-card__voters-stack span:first-child { margin-left: 0; }
.tr-place-card__voters-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  letter-spacing: 0.02em;
}
.tr-place-card__voters-count::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF5E1A'><path d='M12 21s-7-4.5-9.3-8.5C.8 9 3.2 5 7 5c2 0 3.5 1 5 3 1.5-2 3-3 5-3 3.8 0 6.2 4 4.3 7.5C19 16.5 12 21 12 21z'/></svg>") center/contain no-repeat;
}

.tr-place-card__foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 12px 12px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tr-place-card__title {
  font: 900 14px/1.15 'Space Grotesk', sans-serif;
  letter-spacing: -0.015em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tr-place-card__meta {
  font: 600 11px/1.2 'Space Grotesk', sans-serif;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 6px;
}

.tr-place-card__foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  position: relative;
}

.tr-place-card__author {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: 700 10px/1 'Space Grotesk', sans-serif;
  color: rgba(255, 255, 255, 0.9);
  min-width: 0;
}
.tr-place-card__avatar {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 900 9px/1 'Space Grotesk', sans-serif;
  color: #fff;
  flex-shrink: 0;
}

.tr-place-card__reacts {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.tr-place-card__react {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font: 700 10px/1 'Space Grotesk', sans-serif;
}
.tr-place-card__react svg {
  width: 11px;
  height: 11px;
  color: #fff;
}
.tr-place-card__react:first-child svg {
  color: #FF5E1A;
}

/* Vote-pop emoji — hidden by default, animates on .is-popping */
.tr-place-card__pop {
  position: absolute;
  right: 10px;
  bottom: 100%;
  margin-bottom: 6px;
  font-size: 22px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.4);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.tr-place-card.is-popping .tr-place-card__pop {
  animation: tr-place-pop 1.15s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.tr-place-card.is-popping .tr-place-card__voters {
  animation: tr-place-react-bump 0.6s ease 0.45s both;
}

@keyframes tr-place-pop {
  0%   { opacity: 0; transform: translateY(8px) scale(0.4); }
  15%  { opacity: 1; }
  55%  { opacity: 1; transform: translateY(-22px) scale(1.18); }
  100% { opacity: 0; transform: translateY(-32px) scale(1); }
}
@keyframes tr-place-react-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tr-place-card.is-popping .tr-place-card__pop,
  .tr-place-card.is-popping .tr-place-card__react:first-child {
    animation: none;
  }
}

/* =========== Row 02 — calendar drag-into-slot animation =========== */
.tr-cal__ghost {
  position: absolute;
  z-index: 4;
  /* Anchor at (0,0) so JS translate() positions the ghost directly in stage coords */
  top: 0;
  left: 0;
  width: 160px;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid rgba(43, 18, 10, 0.25);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transform: rotate(-3deg) scale(0.96);
  transform-origin: 50% 50%; /* default center — keeps landing math stable under scale */
  transition: none;
  will-change: transform, opacity;
}
/* Per-user cursor that rides along with the ghost */
.tr-cal__cursor {
  position: absolute;
  top: -10px;
  left: -8px;
  z-index: 2;
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  pointer-events: none;
}
.tr-cal__cursor-arrow {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
  flex-shrink: 0;
}
.tr-cal__cursor-tag {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(43, 18, 10, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  font: 900 10px/1 'Space Grotesk', sans-serif;
  color: var(--ink);
  white-space: nowrap;
}
.tr-cal__cursor-avatar {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 900 9px/1 'Space Grotesk', sans-serif;
  color: #fff;
  flex-shrink: 0;
  border: 1px solid rgba(43, 18, 10, 0.15);
}
.tr-cal__ghost-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}
.tr-cal__ghost-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.tr-cal__ghost-name {
  font: 900 11px/1.1 'Space Grotesk', sans-serif;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-cal__ghost-cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 700 9px/1 'Space Grotesk', sans-serif;
  color: rgba(43, 18, 10, 0.6);
}
.tr-cal__ghost-cat i {
  width: 5px; height: 5px;
  border-radius: 999px;
}

/* Ghost animation states (driven by JS class toggles) */
.tr-cal__ghost.is-showing { opacity: 1; }
.tr-cal__ghost.is-dragging {
  transition: transform 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 200ms ease;
}
.tr-cal__ghost.is-settling {
  transition: transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1),
              opacity 220ms ease;
}
.tr-cal__ghost.is-fading {
  transition: opacity 260ms ease;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .tr-cal__ghost { display: none; }
  .tr-cal__ev--drop { opacity: 1; transform: none; }
}

/* =========== Row 03 — map pin-drop + route-draw reveal =========== */
.tr-mapcard .tr-pin {
  /* Hidden default state; CSS animation shows on .is-revealed */
  opacity: 0;
  transform: translateY(-32px) scale(0.55);
}
.tr-mapcard.is-revealed .tr-pin {
  animation: tr-pin-drop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}

@keyframes tr-pin-drop {
  0%   { opacity: 0; transform: translateY(-32px) scale(0.55); }
  70%  { opacity: 1; transform: translateY(3px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Route path — stroke-dashoffset is set inline by JS, class triggers draw */
.tr-mapcard__route {
  transition: none;
}
.tr-mapcard.is-revealed .tr-mapcard__route {
  animation: tr-route-draw 1.6s linear forwards;
  animation-delay: calc(8 * 110ms + 200ms);  /* after last pin lands */
}

@keyframes tr-route-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tr-mapcard .tr-pin { opacity: 1; transform: none; }
  .tr-mapcard__route { stroke-dashoffset: 0 !important; }
}

/* =========== Swipe-rate demo (Row 04) =========== */
.tr-swipe-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.tr-swipe-target {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--paper);
  font: 700 12px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
  white-space: nowrap;
  z-index: 2;
}
.tr-swipe-target span:first-child { font-size: 20px; line-height: 1; }
.tr-swipe-target.is-active {
  background: rgba(255, 94, 26, 0.35);
  border-color: var(--accent);
  transform: scale(1.08);
}

.tr-swipe-target--up    { top: 12px;    left: 50%; transform: translateX(-50%); }
.tr-swipe-target--right { right: 12px;  top: 50%;  transform: translateY(-50%); }
.tr-swipe-target--left  { left: 12px;   top: 50%;  transform: translateY(-50%); }
.tr-swipe-target--down  { bottom: 12px; left: 50%; transform: translateX(-50%); }

.tr-swipe-target--up.is-active    { transform: translateX(-50%) scale(1.08); }
.tr-swipe-target--right.is-active { transform: translateY(-50%) scale(1.08); }
.tr-swipe-target--left.is-active  { transform: translateY(-50%) scale(1.08); }
.tr-swipe-target--down.is-active  { transform: translateX(-50%) scale(1.08); }

.tr-swipe-deck {
  position: relative;
  width: 66%;
  max-width: 280px;
  aspect-ratio: 3 / 4;
}

.tr-swipe-card {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1.5px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2);
  color: #fff;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  will-change: transform, opacity;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .22s cubic-bezier(.18,.72,.34,1.1),
              opacity   .22s ease,
              box-shadow .2s ease;
}
.tr-swipe-card:active { cursor: grabbing; }
.tr-swipe-card.is-dragging { transition: none; }

.tr-swipe-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0.72) 100%);
}

.tr-swipe-card__cat {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  font: 700 11px/1 'Space Grotesk', sans-serif;
  color: rgba(43, 18, 10, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tr-swipe-card__cat span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
}

.tr-swipe-card__title {
  position: relative;
  font: 900 22px/1.1 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.tr-swipe-card__meta {
  position: relative;
  margin-top: 4px;
  font: 600 13px/1.2 'Space Grotesk', sans-serif;
  color: rgba(255, 255, 255, 0.75);
}

/* Stack depth: top card, then peek */
.tr-swipe-card[data-depth="0"] { z-index: 3; }
.tr-swipe-card[data-depth="1"] { z-index: 2; transform: translateY(12px) scale(0.96); opacity: 1; }
.tr-swipe-card[data-depth="2"] { z-index: 1; transform: translateY(24px) scale(0.92); opacity: 0.55; }
.tr-swipe-card[data-depth="3"] { z-index: 0; transform: translateY(36px) scale(0.88); opacity: 0; pointer-events: none; }

/* Reduced motion — no auto-demo, card sits still */
@media (prefers-reduced-motion: reduce) {
  .tr-swipe-card { transition: none; }
}

/* ============================================================
 * Responsive
 * ============================================================ */
@media (max-width: 1024px) {
  .tr-section { padding: 64px 28px; }
  .tr-how__a { grid-template-columns: 1fr; }
  .tr-stepline { grid-template-columns: 60px 1fr; }
  .tr-stepline__preview { display: none; }
  .tr-crew { padding: 56px 28px; margin: 0 20px; border-radius: 28px; }
  .tr-crew__demo { grid-template-columns: 1fr; }
  .tr-crew__head-row { grid-template-columns: 1fr; }
  .tr-feature-row,
  .tr-feature-row--flip { grid-template-columns: 1fr; gap: 32px; padding: 56px 0; }
  .tr-feature-row--flip .tr-feature-row__copy { order: 0; }
  .tr-feature-row__copy { max-width: none; }
  .tr-feature-row .tr-cal .tr-cal__grid { height: 300px; }
  .tr-feature-row .tr-mapcard.tr-feature-row__canvas { height: 420px; }
  .tr-swipe-stage { max-width: 380px; aspect-ratio: 1 / 1.05; }
  .tr-place-grid { grid-template-columns: 1fr; }
  .tr-section-head { grid-template-columns: 1fr; }
  .tr-section-head__meta { align-items: flex-start; text-align: left; }
  .tr-footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .tr-footer__brand { grid-column: span 2; }
  .tr-quote { flex-basis: 340px; }
}

@media (max-width: 640px) {
  .tr-section { padding: 48px 20px; }
  .tr-step { min-height: auto; padding: 24px; }
  .tr-places-grid { grid-template-columns: 1fr; }
  .tr-place-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tr-places-sources { display: none; }
  .tr-place-card__voters { display: none; }
  .tr-place-card__ribbon {
    top: 32%;
    padding: 5px 10px;
    font-size: 9.5px;
    letter-spacing: 0.12em;
  }
  .tr-crew .tr-display { font-size: 64px; }
  .tr-how .tr-section-head { margin-bottom: 33px; }
  .tr-cal__ev-tag { display: none; }
  .tr-cal__ev-title { padding-right: 4px; }
  /* Feature 04 map: hide legend, no room on mobile */
  .tr-mapcard__legend { display: none; }
  /* Feature 05 swipe: narrower deck, smaller targets, push left/right to edges */
  .tr-swipe-deck { width: 42%; max-width: 160px; }
  .tr-swipe-target {
    padding: 6px 10px;
    font-size: 10px;
    gap: 4px;
  }
  .tr-swipe-target span:first-child { font-size: 15px; }
  .tr-swipe-target--left { left: 0; }
  .tr-swipe-target--right { right: 0; }
  .tr-swipe-card__title { font: 900 16px/1.1 'Space Grotesk', sans-serif; }
  .tr-swipe-card__meta { font-size: 11px; }
  .tr-swipe-card__cat { font-size: 9px; padding: 4px 8px; top: 10px; left: 10px; }
  /* Tighter stack peek so the top card sits visually centered between Love and Bad */
  .tr-swipe-card[data-depth="1"] { transform: translateY(6px) scale(0.97); }
  .tr-swipe-card[data-depth="2"] { transform: translateY(12px) scale(0.94); }
  .tr-swipe-card[data-depth="3"] { transform: translateY(18px) scale(0.9); }
  /* Nudge the deck up a bit so it sits closer to the Love button */
  .tr-swipe-deck { transform: translateY(-5px); }
  /* Feature 04 map: shrink the editorial tile so it doesn't cover nearby pins */
  .tr-mapbox-article {
    width: 118px;
    padding: 4px 5px;
    gap: 6px;
  }
  .tr-mapbox-article__thumb { width: 28px; height: 28px; }
  .tr-mapbox-article__title { font: 900 9.5px/1.15 'Space Grotesk', sans-serif; }
  .tr-mapbox-article__kind { font-size: 6.5px; }
  .tr-mapbox-article__author { display: none; }
  .tr-mapbox-article__ribbon {
    font-size: 7px;
    padding: 2px 5px;
    top: -11px;
  }
  /* Bring editorial tiles to the front of the map, and stop all map markers
     from being interactive on mobile — popups aren't useful at this size */
  .tr-mapbox-article-anchor { z-index: 10; pointer-events: none; }
  .tr-mapbox-pin-anchor,
  .tr-mapbox-rec-anchor { pointer-events: none; }
  /* Kill pointer events on the Mapbox marker wrapper too — anchor-level
     pointer-events: none wasn't enough because the parent .mapboxgl-marker
     still carried click handlers */
  .tr-mapcard__mapbox .mapboxgl-marker { pointer-events: none; }
  /* Nudge Jay's rec pin 15px left so it isn't overlapping its neighbor */
  .tr-mapbox-rec-pin[style*="--i: 2"] { margin-left: -30px; }
  /* Offset the second article ("Seven hills") down-right so it sits in the
     bottom-left area of the map at default zoom. Transform on the outer anchor
     conflicts with Mapbox's positioning, so translate the inner card + tail. */
  .is-revealed .tr-mapbox-article[style*="--i: 1"] {
    transform: translate(55px, 80px) !important;
  }
  .tr-mapbox-article-anchor:has(.tr-mapbox-article[style*="--i: 1"])::before,
  .tr-mapbox-article-anchor:has(.tr-mapbox-article[style*="--i: 1"])::after {
    transform: translate(calc(-50% + 55px), 80px);
  }
  /* Alfama article — shift up-left to clear the right edge of the map */
  .is-revealed .tr-mapbox-article[style*="--i: 0"] {
    transform: translate(-50px, -40px) !important;
  }
  .tr-mapbox-article-anchor:has(.tr-mapbox-article[style*="--i: 0"])::before,
  .tr-mapbox-article-anchor:has(.tr-mapbox-article[style*="--i: 0"])::after {
    transform: translate(calc(-50% - 50px), -40px);
  }
  /* Shorter map on mobile (~25% less tall) */
  .tr-feature-row .tr-mapcard.tr-feature-row__canvas { height: 315px; }
  /* Testimonials: tighten interior spacing on mobile */
  .tr-quote { padding: 20px; gap: 16px; }
  .tr-quote__mark { font-size: 64px; height: 28px; }
  /* Final CTA: keep App Store + Google Play side by side, no awkward text wraps */
  .tr-store-btn { min-width: 0; flex: 1 1 0; padding: 9px 10px; gap: 8px; }
  .tr-cta__primary-row { flex-wrap: nowrap; gap: 10px; }
  .tr-store-btn__mark svg { width: 20px; height: 20px; }
  .tr-store-btn__pre { font-size: 8px; white-space: nowrap; }
  .tr-store-btn__main { font-size: 15px; white-space: nowrap; }
  .tr-trip-card__head { flex-direction: column; align-items: flex-start; }
  /* Footer: brand centered on top, Product + Company + Follow as 3 columns below */
  .tr-footer__inner { grid-template-columns: 1fr 1fr 1fr; gap: 36px 16px; }
  .tr-footer__brand {
    grid-column: span 3;
    align-items: center;
    text-align: center;
    max-width: none;
  }
  .tr-footer__brand .tr-footer__wordmark { align-self: center; }
  /* Center each column's content so Product / Company / Follow are evenly spaced visually */
  .tr-footer__inner > div:nth-child(n+2) { justify-self: center; text-align: center; }
  /* Follow column: stack icons vertically, centered */
  .tr-footer__links--social { flex-direction: column; gap: 12px; align-items: center; }
  .tr-footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
  .tr-cta__secondary-row { flex-direction: column; align-items: center; }
  .tr-quote { flex-basis: 280px; }
  .tr-quote__body { font-size: 18px; }
  .tr-marquee__track span { font-size: 20px; }
}