/* Hallmark · shape: pathway · genre: modern-minimal · theme: custom · job: join · idea: "A late-night Ahmedabad food journal powered by India's open restaurant graph" · vibe: "editorial matte warm quiet human" · paper: oklch(18.2% 0.006 48) · accent: oklch(69.8% 0.198 44.5) · display: Satoshi · body: Satoshi · hero: 3D perspective mobile stage showcasing Cafe Venture Studio Navrangpura with interactive cursor tilt · nav: edge-aligned with wordmark, pilot indicator, and quiet access action · footer: pilot notice with clear anchors · imagery: authentic Ahmedabad restaurant photos from openapi graph · signature: interactive 3D perspective stage and continuous tactile pathway spine · axes: dark/grotesk-sans/warm · posture: dark/grotesk-sans/warm · contrast: pass · fold: pass · v2.0.0 */
/* critique: The dark matte surfaces elevate authentic street & cafe photography without review theatre; the pathway spine guides diners through problems and one-line solutions into early access. */
/* Hallmark · dismissed 76 · restaurant and dish data sourced directly from openapi.json open graph */
/* Hallmark · dismissed 58 · detailed marketing copy requested by user with brand and UI guidelines */
/* Hallmark · dismissed 49 · accordion disclosure buttons wrap descriptive community questions naturally */
@import url("./tokens.css");
@import url("./base.css");

/* Header & Navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid var(--color-rule-subtle);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  text-decoration: none;
}

.brand-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 900;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

.brand-dot {
  color: var(--color-accent);
}

.brand-badge {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-muted);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-2);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-out);
}

.nav-link:hover {
  color: var(--color-ink);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  border: var(--rule-hair) solid var(--color-rule);
  transition: transform var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

.nav-cta:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
}

.nav-cta:active {
  transform: translateY(1px);
}

/* Hero Section */
.hero-section {
  position: relative;
  min-height: calc(100dvh - 68px);
  display: flex;
  align-items: center;
  padding-block: var(--space-xl);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-margin-top: 68px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-xl);
  align-items: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.hero-headline {
  font-size: var(--text-display);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  overflow-wrap: break-word;
  min-width: 0;
}

.hero-lede {
  font-size: var(--text-lead);
  color: var(--color-ink-2);
  line-height: 1.45;
  max-width: 48ch;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xs);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: var(--text-md);
  font-weight: 700;
  text-decoration: none;
  border: var(--rule-hair) solid transparent;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}

.btn-primary:hover {
  background: var(--color-accent-pressed);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: 500;
  text-decoration: none;
  border: var(--rule-hair) solid var(--color-rule);
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}

.btn-secondary:hover {
  border-color: var(--color-ink-2);
  background: var(--color-paper-3);
  transform: translateY(-2px);
}

.btn-secondary:active {
  transform: translateY(1px);
}

/* 3D Showcase Stage */
.stage-3d-wrap {
  perspective: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.device-3d-stage {
  position: relative;
  width: 100%;
  max-width: 380px;
  transform-style: preserve-3d;
  transition: transform var(--dur-short) var(--ease-out);
  will-change: transform;
}

.hero-stage-card {
  position: relative;
  background: var(--color-paper-2);
  color: var(--color-ink);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transform-style: preserve-3d;
}

.device-content {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.feed-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.feed-author {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.author-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  border: var(--rule-hair) solid var(--color-rule);
}

.author-name {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-ink);
}

.post-time {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.feed-photo-box {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.feed-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.floating-diet-badge {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  background: var(--color-tag-veg-bg);
  color: var(--color-tag-veg);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-xs);
  border: var(--rule-hair) solid var(--color-tag-veg);
}

.feed-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.feed-dish-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-ink);
}

.feed-venue-loc {
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}

.feed-feedback-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3xs);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.reaction-pill-active {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  border: var(--rule-hair) solid var(--color-accent);
}

.price-indicator {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-ink-2);
}

/* Floating 3D Depth Chips */
.chip-3d-float {
  position: absolute;
  z-index: var(--z-raised);
  background: var(--color-paper-3);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  transform: translateZ(48px);
  pointer-events: none;
}

.chip-3d-left {
  bottom: 24px;
  left: -20px;
}

.chip-3d-right {
  top: 40px;
  right: -20px;
}

.chip-label {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.chip-val {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
}

/* Section Headings */
.section-head-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}

.section-head-center {
  text-align: center;
  align-items: center;
}

.section-title {
  font-size: var(--text-section);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  overflow-wrap: break-word;
  min-width: 0;
}

.section-sub {
  font-size: var(--text-lead);
  color: var(--color-ink-2);
  max-width: 65ch;
}

/* The Core Loop Section */
.loop-section {
  min-height: calc(100dvh - 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-2xl);
  background: var(--color-paper-subtle);
  border-top: var(--rule-hair) solid var(--color-rule-subtle);
  border-bottom: var(--rule-hair) solid var(--color-rule-subtle);
  color: var(--color-ink);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-margin-top: 68px;
}

.loop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}

.loop-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  border: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink);
  transition: transform var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}

.loop-step:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
}

.loop-step-num {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
}

.loop-step-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
}

.loop-step-desc {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  line-height: 1.45;
}

/* The Pathway / Roadmap Section */
.pathway-section {
  padding-block: var(--space-2xl);
  background: var(--color-paper);
  position: relative;
  color: var(--color-ink);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-margin-top: 68px;
}

.pathway-spine-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  margin-top: var(--space-2xl);
}

.pathway-spine-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 32px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-accent), var(--color-rule-subtle));
  z-index: var(--z-base);
}

.waypoint-item {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--space-xl);
  z-index: var(--z-raised);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-margin-top: calc(68px + var(--space-md));
}

.waypoint-node {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.waypoint-marker {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  border: 2px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 900;
  color: var(--color-accent);
  box-shadow: 0 0 16px var(--color-glow);
}

.waypoint-card-3d {
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  color: var(--color-ink);
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}

.waypoint-card-3d:hover {
  border-color: var(--color-accent);
}

.waypoint-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-xl);
  align-items: center;
}

.waypoint-text-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.waypoint-phase-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
}

.waypoint-feature-name {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  overflow-wrap: break-word;
  min-width: 0;
}

.problem-solution-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-subtle);
}

.problem-row, .solution-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.ps-label-problem {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-error);
}

.ps-label-solution {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-success);
}

.ps-text {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  line-height: 1.45;
}

.waypoint-visual-pane {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-paper-3);
  border: var(--rule-hair) solid var(--color-rule);
  transform-style: preserve-3d;
  transition: transform var(--dur-short) var(--ease-out);
}

.waypoint-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.waypoint-interactive-overlay {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Interactive reaction pill row */
.reactions-interactive-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.btn-reaction-tap {
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  color: var(--color-ink-2);
  padding: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

.btn-reaction-tap:hover {
  background: var(--color-paper-3);
  color: var(--color-ink);
  transform: translateY(-1px);
}

.btn-reaction-tap.is-selected {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.worth-price-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-success);
  margin-top: var(--space-3xs);
}

/* Diet Selector Demo */
.diet-tags-demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.diet-chip {
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
  color: var(--color-ink-2);
}

.diet-chip.is-veg {
  border-color: var(--color-tag-veg);
  color: var(--color-tag-veg);
  background: var(--color-tag-veg-bg);
}

.diet-chip.is-jain {
  border-color: var(--color-tag-jain);
  color: var(--color-tag-jain);
  background: var(--color-tag-jain-bg);
}

.diet-chip.is-nonveg {
  border-color: var(--color-tag-nonveg);
  color: var(--color-tag-nonveg);
  background: var(--color-tag-nonveg-bg);
}

.diet-chip.is-egg {
  border-color: var(--color-tag-egg);
  color: var(--color-tag-egg);
  background: var(--color-tag-egg-bg);
}

/* REAL DISH POST & MOBILE APP UI PREVIEW SECTION */
.post-preview-section {
  min-height: calc(100dvh - 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-2xl);
  background: var(--color-paper-subtle);
  border-top: var(--rule-hair) solid var(--color-rule-subtle);
  border-bottom: var(--rule-hair) solid var(--color-rule-subtle);
  color: var(--color-ink);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-margin-top: 68px;
}

.dish-post-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.post-tab-btn {
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink-2);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}

.post-tab-btn:hover {
  color: var(--color-ink);
  border-color: var(--color-ink-2);
}

.post-tab-btn.is-active {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
  font-weight: 700;
}

.post-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-xl);
  align-items: center;
}

.post-info-card {
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.post-info-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.post-info-dish {
  font-size: var(--text-2xl);
  font-weight: 900;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

.post-info-venue {
  font-size: var(--text-sm);
  color: var(--color-accent);
}

.post-meta-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.post-meta-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
  border: var(--rule-hair) solid var(--color-rule-subtle);
}

.post-meta-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  min-width: 90px;
}

.post-meta-desc {
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  line-height: 1.4;
}

/* REALISTIC MOBILE PHONE FRAME & APP UI */
.mobile-stage-wrapper {
  perspective: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mobile-phone-device {
  width: 100%;
  max-width: 360px;
  background: var(--color-phone-body);
  border-radius: 40px;
  border: 10px solid var(--color-phone-border);
  box-shadow: var(--shadow-phone);
  overflow: hidden;
  color: var(--color-ink);
}

.mobile-phone-device:hover {
  transform: none;
}

.mobile-status-bar {
  height: 28px;
  background: var(--color-phone-body);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--space-md);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-ink-2);
}

.status-bar-icons {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.mobile-app-header {
  height: 48px;
  background: var(--color-paper-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.app-header-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
}

.app-header-btn {
  background: transparent;
  border: none;
  color: var(--color-ink-2);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

.mobile-post-scroll {
  max-height: 500px;
  overflow-y: auto;
  background: var(--color-paper);
}

.mobile-post-author-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
}

.mobile-author-block {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.mobile-author-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  border: var(--rule-hair) solid var(--color-rule);
}

.mobile-author-name {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-ink);
}

.mobile-author-handle {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.mobile-media-box {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.mobile-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-diet-tag {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-xs);
}

.mobile-post-details {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.mobile-dish-heading {
  font-size: var(--text-md);
  font-weight: 900;
  color: var(--color-ink);
}

.mobile-venue-link {
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}

.mobile-verdict-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-paper-2);
  border-radius: var(--radius-sm);
  margin-top: var(--space-2xs);
}

.mobile-reaction-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
}

.mobile-spend-tag {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-ink-2);
}

.mobile-caption-text {
  font-size: var(--text-xs);
  color: var(--color-ink);
  line-height: 1.45;
  margin-top: var(--space-2xs);
}

.mobile-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  margin-top: var(--space-3xs);
}

.mobile-tag-chip {
  font-size: var(--text-xs);
  color: var(--color-accent);
  background: var(--color-paper-3);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-xs);
}

/* In-App Engagement Bar */
.mobile-engagement-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs) var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule-subtle);
  border-bottom: var(--rule-hair) solid var(--color-rule-subtle);
}

.engagement-item {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}

/* In-App Comment Thread */
.mobile-comments-block {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.mobile-comment-row {
  display: flex;
  gap: var(--space-xs);
}

.comment-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.comment-content-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.comment-user-name {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-ink);
}

.comment-message-text {
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  line-height: 1.35;
}

/* In-App Persistent Bottom Nav */
.mobile-bottom-nav {
  height: 52px;
  background: var(--color-paper-3);
  border-top: var(--rule-hair) solid var(--color-rule);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-inline: var(--space-xs);
}

.nav-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xs);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-muted);
}

.nav-tab-item.is-active {
  color: var(--color-accent);
}

/* Live Ahmedabad Discovery Explorer */
.explorer-section {
  padding-block: var(--space-2xl);
  background: var(--color-paper);
  color: var(--color-ink);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-margin-top: 68px;
}

.explorer-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.filter-chip-btn {
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink-2);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}

.filter-chip-btn:hover {
  color: var(--color-ink);
  border-color: var(--color-ink-2);
}

.filter-chip-btn.is-active {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
  font-weight: 700;
}

.explorer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.dish-explorer-card {
  background: var(--color-paper-2);
  color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}

.dish-explorer-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
}

.dish-media-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.dish-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dish-card-diet-tag {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-xs);
}

.dish-card-diet-tag.is-veg {
  background: var(--color-tag-veg-bg);
  color: var(--color-tag-veg);
  border: var(--rule-hair) solid var(--color-tag-veg);
}

.dish-card-diet-tag.is-jain {
  background: var(--color-tag-jain-bg);
  color: var(--color-tag-jain);
  border: var(--rule-hair) solid var(--color-tag-jain);
}

.dish-card-diet-tag.is-egg {
  background: var(--color-tag-egg-bg);
  color: var(--color-tag-egg);
  border: var(--rule-hair) solid var(--color-tag-egg);
}

.dish-card-diet-tag.is-nonveg {
  background: var(--color-tag-nonveg-bg);
  color: var(--color-tag-nonveg);
  border: var(--rule-hair) solid var(--color-tag-nonveg);
}

.dish-body-wrap {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex-grow: 1;
}

.dish-header-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.dish-card-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-ink);
}

.dish-card-venue {
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}

.dish-hours-line {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.dish-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-xs);
  border-top: var(--rule-hair) solid var(--color-rule);
  margin-top: auto;
}

.dish-verdict-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
}

.dish-price-tag {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-ink-2);
}

/* About Nosh Section */
.about-section {
  padding-block: var(--space-2xl);
  background: var(--color-paper-subtle);
  border-top: var(--rule-hair) solid var(--color-rule-subtle);
  color: var(--color-ink);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-margin-top: 68px;
}

.about-pledges-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--section-gap);
}

.pledge-card {
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  box-shadow: var(--shadow-sm);
}

.pledge-num {
  font-size: var(--text-xs);
  font-weight: 900;
  color: var(--color-accent);
}

.pledge-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
}

.pledge-text {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  line-height: 1.45;
}

/* Contrast / Matrix Section */
.matrix-section {
  padding-block: var(--section-gap);
  background: var(--color-paper);
  border-top: var(--rule-hair) solid var(--color-rule-subtle);
  border-bottom: var(--rule-hair) solid var(--color-rule-subtle);
  color: var(--color-ink);
}

.matrix-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.matrix-col {
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  border: var(--rule-hair) solid var(--color-rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  color: var(--color-ink);
}

.matrix-col-old {
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.matrix-col-nosh {
  background: var(--color-paper);
  border-color: var(--color-accent);
  box-shadow: 0 12px 32px var(--color-glow);
  color: var(--color-ink);
}

.matrix-col-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-ink);
}

.matrix-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.matrix-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.matrix-item-head {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
}

.matrix-item-desc {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  line-height: 1.4;
}

/* FAQ Accordion Section */
.faq-section {
  padding-block: var(--space-2xl);
  background: var(--color-paper-subtle);
  color: var(--color-ink);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-margin-top: 68px;
}

.faq-list {
  max-width: 820px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq-item {
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur-micro) var(--ease-out);
}

.faq-item.is-open {
  border-color: var(--color-accent);
}

.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: transparent;
  border: none;
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: color var(--dur-micro) var(--ease-out);
}

.faq-trigger:hover {
  color: var(--color-accent);
}

.faq-icon-chevron {
  width: 20px;
  height: 20px;
  stroke: var(--color-ink-2);
  transition: transform var(--dur-micro) var(--ease-out), stroke var(--dur-micro) var(--ease-out);
}

.faq-item.is-open .faq-icon-chevron {
  transform: rotate(180deg);
  stroke: var(--color-accent);
}

.faq-content {
  display: none;
  padding: 0 var(--space-lg) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  line-height: 1.5;
}

.faq-item.is-open .faq-content {
  display: block;
}

/* Early Signup / Be the Customer Section */
.signup-section {
  min-height: calc(100dvh - 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-2xl);
  position: relative;
  background: var(--color-paper);
  border-top: var(--rule-hair) solid var(--color-rule-subtle);
  color: var(--color-ink);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-margin-top: 68px;
}

.signup-box {
  background: var(--color-paper-2);
  border-radius: var(--radius-xl);
  padding: var(--space-3xl);
  max-width: 760px;
  margin-inline: auto;
  box-shadow: var(--shadow-box);
}

.signup-head-block {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}

.signup-title {
  font-size: var(--text-display-s);
  font-weight: 900;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  overflow-wrap: break-word;
  min-width: 0;
}

.signup-desc {
  font-size: var(--text-lead);
  color: var(--color-ink-2);
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  background: var(--color-paper-3);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  color: var(--color-ink);
  font-size: var(--text-md);
  transition: border-color var(--dur-micro) var(--ease-out);
}

.form-input:focus-visible, .form-select:focus-visible, .form-textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  border-color: var(--color-accent);
}

.form-textarea {
  min-height: 90px;
  resize: vertical;
}

.char-counter {
  align-self: flex-end;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.form-help {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.diet-pref-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.diet-pref-pill {
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-3);
  color: var(--color-ink-2);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}

.diet-pref-pill:hover {
  border-color: var(--color-ink-2);
  color: var(--color-ink);
}

.diet-pref-pill.is-active {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.signup-feedback {
  display: none;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-paper-3);
  border: var(--rule-hair) solid var(--color-success);
  color: var(--color-ink);
  margin-top: var(--space-md);
  text-align: center;
}

.signup-feedback.is-visible {
  display: block;
}

.feedback-success-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-success);
  margin-bottom: var(--space-3xs);
}

.feedback-success-desc {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

/* Footer */
.site-footer {
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-2xl);
  background: var(--color-paper);
  color: var(--color-ink);
  scroll-snap-align: end;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.footer-pilot-note {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-link {
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  text-decoration: none;
}

.footer-link:hover {
  color: var(--color-ink);
}

/* Media Queries & Responsive */
@media (max-width: 60rem) {
  /* Static mode on mobile screens: disable 3D hovering and tilt effects */
  .device-3d-stage,
  .hero-stage-card,
  .chip-3d-float,
  .waypoint-card-3d,
  .card-tilt,
  .mobile-phone-device,
  .mobile-stage-wrapper {
    transform: none !important;
    perspective: none !important;
    transition: none !important;
  }

  .loop-step:hover,
  .waypoint-card-3d:hover,
  .dish-explorer-card:hover,
  .mobile-phone-device:hover {
    transform: none !important;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }
  .stage-3d-wrap {
    order: -1;
    margin-bottom: var(--space-md);
  }
  .device-3d-stage {
    max-width: 320px;
  }
  .loop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .loop-section,
  .post-preview-section,
  .signup-section,
  .explorer-section,
  .faq-section {
    min-height: auto;
  }
  .dish-explorer-card {
    scroll-snap-align: start;
    scroll-margin-top: calc(68px + var(--space-sm));
  }
  .about-pledges-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .explorer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .post-preview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .mobile-stage-wrapper {
    order: -1;
  }
  .waypoint-content-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .matrix-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pathway-spine-line {
    left: 20px;
  }
  .waypoint-item {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--space-md);
  }
  .waypoint-marker {
    width: 36px;
    height: 36px;
    font-size: var(--text-xs);
  }
}

@media (max-width: 40rem) {
  .nav-links {
    display: none;
  }
  .loop-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .signup-box {
    padding: var(--space-lg);
  }
  .chip-3d-float {
    display: none;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .device-3d-stage, .waypoint-card-3d, .waypoint-visual-pane, .dish-explorer-card, .pledge-card, .mobile-phone-device {
    transform: none !important;
    transition: none !important;
  }
}