@import url("meridian.css");

.marker { background: var(--vellum-900); border: 1px solid var(--vellum-700); border-radius: var(--fold-lg); padding: 26px; transition: border-color var(--pace-fast) ease, transform var(--pace-fast) ease; }
.marker:hover { border-color: var(--ink-500); transform: translateY(-3px); }
.marker-ico { font-size: 26px; margin-bottom: 14px; }
.marker h3 { font-size: 17px; color: var(--paper); margin-bottom: 8px; }
.marker p { font-size: 14px; color: var(--parchment-dim); }

.route-steps { display: grid; gap: 22px; margin-top: 8px; }
.waypoint { display: flex; gap: 18px; align-items: flex-start; }
.waypoint-num { width: 34px; height: 34px; border-radius: 10px; background: var(--wash-brand); color: #12061f; font-weight: 900; font-size: 14px; display: grid; place-items: center; flex-shrink: 0; }
.waypoint h3 { font-size: 16px; color: var(--paper); margin-bottom: 4px; }
.waypoint p { font-size: 14px; color: var(--parchment-dim); }

.query-list { display: flex; flex-direction: column; gap: 10px; max-width: 780px; margin: 0 auto; }
.query-row { background: var(--vellum-900); border: 1px solid var(--vellum-700); border-radius: var(--fold-md); overflow: hidden; }
.query-q { width: 100%; text-align: left; padding: 18px 22px; font-size: 15px; font-weight: 600; color: var(--paper); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.query-plus { color: var(--ink-400); font-size: 20px; font-weight: 400; flex-shrink: 0; transition: transform var(--pace-fast) ease; }
.query-row.is-expanded .query-plus { transform: rotate(45deg); }
.query-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.query-row.is-expanded .query-a { max-height: 300px; }
.query-a p { padding: 0 22px 18px; font-size: 14px; color: var(--parchment-dim); }

.routelink { display: block; background: var(--vellum-900); border: 1px solid var(--vellum-700); border-radius: var(--fold-lg); padding: 24px; text-align: center; transition: border-color var(--pace-fast) ease, transform var(--pace-fast) ease; }
.routelink:hover { border-color: var(--ink-500); transform: translateY(-3px); }
.routelink-ico { font-size: 26px; margin-bottom: 10px; }
.routelink h3 { font-size: 15px; color: var(--paper); margin-bottom: 4px; }
.routelink p { font-size: 13px; color: var(--parchment-dim); margin-bottom: 14px; }

.call-plate { text-align: center; padding: 52px 24px; background: var(--wash-panel); border-radius: var(--fold-lg); max-width: 1120px; margin: 0 auto; border: 1px solid var(--vellum-600); }
.call-plate h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--paper); margin-bottom: 10px; }
.call-plate p { color: var(--parchment-dim); margin-bottom: 26px; }
.call-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.survey-note { background: var(--vellum-900); border: 1px solid var(--vellum-700); border-radius: var(--fold-lg); padding: 24px; }
.survey-stars { color: var(--ink-400); font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; }
.survey-note p { font-size: 14px; color: var(--parchment); margin-bottom: 16px; }
.survey-who { display: flex; align-items: center; gap: 10px; }
.survey-who-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--vellum-700); display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--ink-300); }
.survey-who-name { font-size: 13px; font-weight: 700; color: var(--paper); }
.survey-who-tag { font-size: 12px; color: var(--parchment-faint); }