/* Vekkoa — quiet luxury visual language: refined, warm, uncluttered.
   Palette: deep warm ink, warm ivory, antique gold — evokes considered
   craftsmanship and stillness rather than loud opulence, deliberately
   avoiding neon/gimmicky "mystic" aesthetics out of respect for the
   traditions this app represents. Playfair Display for headings signals
   editorial/hospitality-grade quality; Work Sans keeps body text clean
   and highly legible, with full multilingual fallback preserved. */

:root {
  --cream: #f8f3ea;
  --cream-dark: #ecdfc9;
  --sage: #8fa88a;
  --sage-dark: #5c7a58;
  --gold: #b8923f;
  --gold-text: #8a6828; /* WCAG AA-compliant version of gold for actual text (4.64:1 on cream, 5.05:1 on white cards) — the base --gold fails contrast (2.6-2.9:1) and stays reserved for borders/backgrounds/decorative accents, which aren't subject to text contrast rules */
  --gold-light: #d4b876;
  --card-bg: var(--card-bg); /* the one canonical off-white card background — consolidated from 3 near-identical accidental values (var(--card-bg)/var(--card-bg)) that accumulated across features built at different times */
  --gold-highlight-bg: var(--gold-highlight-bg); /* the one canonical pale-gold premium/festival highlight — consolidated from 3 near-identical accidental values (var(--gold-highlight-bg)/var(--gold-highlight-bg)) */
  --ink: #2b271f;
  --ink-soft: #6b6558;
  --favorable: #7ea87a;
  --neutral: #cbb26a;
  --unfavorable: #c07a63;
  --radius: 22px;
  --shadow: 0 8px 32px rgba(43, 39, 31, 0.10);
  --shadow-lifted: 0 14px 40px rgba(43, 39, 31, 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 100%);
  font-family: "Work Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, "Noto Sans", "Noto Sans SC", "Noto Sans Devanagari", sans-serif;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Playfair Display", "Noto Serif SC", "Noto Serif Devanagari", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.screen { display: none; width: 100%; max-width: 440px; }
.screen.active { display: block; animation: screenIn 0.35s var(--ease); }
@keyframes screenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.card, .welcome-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 26px;
  text-align: center;
  border: 1px solid rgba(184, 146, 63, 0.10);
}

.fade-in { animation: fadeIn 1.1s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.welcome-icon { width: 88px; height: 88px; margin-bottom: 8px; }
.app-title { font-family: "Cinzel", "Playfair Display", serif; font-size: 27px; font-weight: 600; margin: 0 0 6px; color: var(--gold-text); letter-spacing: 1.5px; }
.tagline-display { font-size: 14px; color: var(--gold-text); opacity: 0.85; margin: 0 0 20px; font-style: italic; }
.greeting { font-size: 22px; font-weight: 600; margin: 0 0 8px; color: var(--ink); }
.quote { font-size: 15px; color: var(--ink-soft); font-style: italic; margin: 0 0 28px; line-height: 1.5; }

h2 { font-size: 20px; margin: 0 0 6px; color: var(--ink); }
.muted { color: var(--ink-soft); font-size: 14px; margin: 0 0 20px; }
.disclaimer { color: var(--ink-soft); font-size: 12px; margin-top: 18px; line-height: 1.5; }
.legal-links { font-size: 12px; color: var(--ink-soft); margin-top: 14px; }
.legal-links a { color: var(--sage-dark); text-decoration: none; }
.text-link-btn {
  display: block; width: 100%; background: none; border: none; cursor: pointer;
  color: var(--gold-text); font-size: 13px; font-style: italic; margin: 4px 0 14px; padding: 4px;
  transition: color 0.25s var(--ease);
}
.text-link-btn:hover { color: var(--sage-dark); }

.help-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 16px; }
.help-tab {
  background: var(--cream); border: 1.5px solid var(--cream-dark); border-radius: 10px;
  padding: 9px 4px; font-size: 12px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
  text-align: center; transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.help-tab.active { background: var(--sage-dark); color: #fff; border-color: var(--sage-dark); }
.tradition-history { text-align: left; margin-bottom: 20px; }
.tradition-history h4 { font-size: 15px; color: var(--sage-dark); margin: 0 0 6px; }
.tradition-history p { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 8px; }
.copyright-notice { font-size: 10px; color: var(--ink-soft); margin-top: 16px; }
.plant-item { text-align: left; margin-bottom: 10px; }
.plant-item .plant-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.plant-item .plant-note { font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.reference-note { font-size: 11px; color: var(--ink-soft); font-style: italic; background: var(--cream); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; text-align: left; }
.element-item { text-align: left; margin-bottom: 10px; }
.element-item .element-title { font-size: 13px; font-weight: 700; color: var(--sage-dark); }
.property-health-section {
  margin-top: 22px; padding-top: 16px; border-top: 2px solid #e0a458;
}
.property-health-heading { font-size: 15px; color: #95591a; margin: 0 0 8px; text-align: left; }
.property-health-disclaimer {
  font-size: 12px; color: #8a5a2a; background: #fdf2e0; border: 1px solid #e0a458;
  border-radius: 8px; padding: 10px 12px; margin-top: 12px; text-align: left; font-weight: 600;
}
.element-item .element-body { font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.help-step { text-align: left; display: flex; gap: 12px; margin-bottom: 16px; }
.help-step-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--gold);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.help-step-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.help-step-body { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.faq-item { text-align: left; margin-bottom: 6px; border-bottom: 1px solid var(--cream-dark); }
.faq-category-header {
  font-family: "Playfair Display", "Noto Serif SC", "Noto Serif Devanagari", Georgia, serif;
  font-size: 13px; font-weight: 600; color: var(--gold-text); text-transform: uppercase; letter-spacing: 1px;
  margin: 20px 0 6px; text-align: left;
}
.faq-category-header:first-child { margin-top: 4px; }
.birthday-optin { margin: 20px 0; text-align: left; }
.birthday-inputs { display: flex; gap: 8px; margin-bottom: 8px; }
.birthday-inputs select { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--cream-dark); background: var(--card-bg); font-size: 13px; }
.birthday-inputs button { flex-shrink: 0; margin: 0; }
.faq-question {
  padding: 12px 4px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-answer { font-size: 13px; color: var(--ink-soft); line-height: 1.6; padding: 0 4px 12px; display: none; }
.faq-item.open .faq-answer { display: block; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-arrow { transition: transform 0.2s ease; color: var(--sage-dark); }

.lang-picker { margin-bottom: 24px; text-align: left; }
.lang-picker label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
select, .text-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--cream-dark);
  background: var(--cream);
  color: var(--ink);
  font-size: 15px;
  margin-bottom: 14px;
}

.btn-primary {
  width: 100%;
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 15px 18px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  margin-top: 8px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.btn-primary:hover { background: var(--sage-dark); box-shadow: var(--shadow-lifted); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-primary:disabled { opacity: 0.65; cursor: default; transform: none; box-shadow: none; }

.btn-secondary {
  width: 100%;
  background: transparent;
  color: var(--sage-dark);
  border: 1.5px solid var(--gold-light);
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  margin-top: 10px;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), background 0.25s var(--ease);
}
.btn-secondary:hover { border-color: var(--gold); background: rgba(184, 146, 63, 0.06); transform: translateY(-1px); }
.btn-secondary:active { transform: translateY(0) scale(0.98); }

.tradition-options { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; }
.tradition-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--card-bg);
  border: 1px solid rgba(184, 146, 63, 0.18);
  border-radius: 16px;
  padding: 22px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(43, 39, 31, 0.05);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tradition-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-lifted); }
.tradition-emoji { font-size: 30px; }
.tradition-icon { display: block; transition: transform 0.3s var(--ease); }
.tradition-card:hover .tradition-icon { transform: scale(1.08); }
.tradition-name { font-family: "Playfair Display", "Noto Serif SC", "Noto Serif Devanagari", Georgia, serif; font-size: 18px; font-weight: 600; color: var(--ink); }
.tradition-desc { font-size: 13px; color: var(--ink-soft); }
.intent-options { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
.intent-card {
  display: flex; align-items: center; gap: 16px; text-align: left;
  background: var(--card-bg); border: 1px solid rgba(184, 146, 63, 0.18); border-radius: 18px;
  padding: 20px 18px; cursor: pointer; box-shadow: 0 2px 12px rgba(43, 39, 31, 0.06);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  position: relative;
}
.intent-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-lifted); }
.intent-emoji {
  font-size: 24px; flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: linear-gradient(135deg, rgba(201,162,75,0.12), rgba(138,106,47,0.06));
  border: 1px solid rgba(184, 146, 63, 0.25);
}
.intent-text { display: flex; flex-direction: column; flex: 1; padding-right: 20px; }
.intent-name {
  font-family: "Cinzel", "Playfair Display", "Noto Serif SC", "Noto Serif Devanagari", Georgia, serif;
  font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: 0.3px;
}
.intent-desc { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.4; }
.intent-card::after {
  content: "›"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 22px; color: var(--gold); opacity: 0.5; font-weight: 300;
}

.harmony-overview { margin: 4px 0 20px; padding: 14px 16px; background: var(--card-bg); border: 1px solid rgba(184, 146, 63, 0.18); border-radius: 14px; }
.harmony-dots { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.harmony-dot { width: 9px; height: 9px; border-radius: 50%; }
.harmony-summary-text { font-size: 13px; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.room-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.room-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--cream); border-radius: 12px; padding: 12px 16px; font-size: 14px;
}
.room-status { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 20px; color: #fff; }
.tradition-tag {
  font-size: 10px; background: var(--cream-dark); color: var(--ink-soft); padding: 2px 7px;
  border-radius: 8px; margin-left: 4px; font-weight: 600;
}
.status-favorable { background: var(--favorable); }
.status-neutral { background: var(--neutral); }
.status-unfavorable { background: var(--unfavorable); }

.room-type-grid { display: flex; flex-direction: column; margin-top: 4px; }
.room-category-heading {
  font-family: "Playfair Display", "Noto Serif SC", "Noto Serif Devanagari", Georgia, serif;
  font-size: 15px; font-weight: 600; color: var(--gold-text);
  margin: 20px 0 10px; text-align: left;
  padding-bottom: 6px; border-bottom: 1px solid rgba(184, 146, 63, 0.25);
}
.room-category-heading:first-child { margin-top: 4px; }
.room-category-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.room-type-btn {
  background: var(--cream); border: 1.5px solid var(--cream-dark); border-radius: 14px;
  padding: 16px 8px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.room-type-btn:hover { border-color: var(--sage); }
.premium-room-btn { border-color: var(--gold); background: var(--gold-highlight-bg); }
.already-done { border-color: var(--sage); color: var(--sage-dark); }
.checklist-room-block { text-align: left; margin-bottom: 18px; }
.checklist-room-heading { font-family: "Playfair Display", "Noto Serif SC", "Noto Serif Devanagari", Georgia, serif; font-size: 16px; font-weight: 600; color: var(--sage-dark); margin-bottom: 6px; }
.checklist-room-block ul { margin: 0; padding-left: 20px; font-size: 13px; color: var(--ink); line-height: 1.8; }
.room-timeline { text-align: left; margin-bottom: 12px; position: relative; padding-left: 4px; }
.timeline-entry { display: flex; align-items: flex-start; gap: 12px; position: relative; padding-bottom: 18px; }
.timeline-entry:not(:last-child)::before {
  content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; background: var(--cream-dark);
}
.timeline-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; z-index: 1; background: var(--neutral); }
.timeline-dot.status-favorable { background: var(--favorable); }
.timeline-dot.status-unfavorable { background: var(--unfavorable); }
.timeline-content { display: flex; flex-direction: column; }
.timeline-date { font-size: 11px; font-weight: 600; color: var(--sage-dark); }
.timeline-detail { font-size: 13px; color: var(--ink); }
.timeline-current .timeline-dot { box-shadow: 0 0 0 3px var(--cream); outline: 2px solid var(--gold); }
.timeline-current .timeline-date { color: var(--gold-text); }
.room-personality {
  display: inline-block; font-family: "Playfair Display", "Noto Serif SC", "Noto Serif Devanagari", Georgia, serif;
  font-style: italic; font-size: 15px; color: var(--gold-text); margin: -8px 0 12px; text-align: center; width: 100%;
}
.remedy-meta-badges { display: flex; gap: 6px; margin: 4px 0; flex-wrap: wrap; }
.flex-badge, .priority-badge {
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.3px;
}
.flex-decorative { background: #e8f0e6; color: var(--sage-dark); }
.flex-layout { background: #fdf2e0; color: var(--gold-text); }
.flex-behavioral { background: #eee9f5; color: #6b5a8a; }
.priority-core { background: #fbe8e3; color: var(--unfavorable); }
.priority-supportive { background: #f5f0e0; color: var(--gold-text); }
.priority-optional { background: #eeeeee; color: var(--ink-soft); }
.designer-note {
  font-size: 11px; color: var(--ink-soft); font-style: italic; margin-top: 4px; padding: 6px 10px;
  background: #f8f3ea; border-radius: 6px; border-left: 3px solid var(--sage);
}
.toggle-pref-row {
  display: flex; align-items: center; gap: 12px; margin: 10px 0; text-align: left;
  cursor: pointer; padding: 12px 6px; border-radius: 10px; min-height: 44px; box-sizing: border-box;
  transition: background 0.2s var(--ease);
}
.toggle-pref-row:hover { background: rgba(184, 146, 63, 0.06); }
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0; background: var(--cream-dark);
  border-radius: 24px; transition: background 0.25s var(--ease);
}
.toggle-slider::before {
  content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: transform 0.25s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider { background: var(--gold); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
.toggle-pref-text { font-size: 13px; color: var(--ink-soft); }

.scan-card { padding-bottom: 28px; }
.compass-wrap { display: flex; flex-direction: column; align-items: center; margin: 20px 0; }
.compass-face {
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, #fffdf8 55%, var(--cream) 100%);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(138,106,47,0.12), inset 0 0 24px rgba(0,0,0,0.035);
}
.compass-dial-svg { position: absolute; top: 0; left: 0; pointer-events: none; }
.compass-needle {
  position: absolute; z-index: 2;
  width: 3px; height: 62px;
  background: linear-gradient(to top, #8a6a2f, #e8c86a);
  top: 26px; left: 50%; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg);
  border-radius: 4px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.compass-pivot {
  position: absolute; z-index: 3; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle, #e8c86a, #8a6a2f);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.compass-degree { position: absolute; z-index: 2; top: 110px; left: 50%; transform: translateX(-50%); font-size: 20px; font-weight: 700; color: var(--ink); }
.compass-direction {
  margin-top: 12px; font-family: "Cinzel", "Playfair Display", serif;
  font-size: 22px; font-weight: 600; color: var(--gold-text); letter-spacing: 3px;
}

.warning {
  background: #fbeee7; color: #a15a3f; border-radius: 10px; padding: 10px 14px;
  font-size: 13px; margin: 10px 0;
}
.accuracy-note { font-size: 11px; color: var(--ink-soft); text-align: center; margin: 8px 0; }
.manual-fallback { margin: 14px 0; }
.manual-fallback input { width: 100%; }

.result-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 22px; border-radius: 24px; color: #fff;
  font-weight: 700; font-size: 13.5px; letter-spacing: 0.4px; margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.result-direction {
  font-family: "Cinzel", "Playfair Display", "Noto Serif SC", "Noto Serif Devanagari", Georgia, serif;
  font-size: 21px; font-weight: 600; color: var(--gold-text); margin: 6px 0; letter-spacing: 0.3px;
}
.room-description { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 10px; font-style: italic; }
.result-verdict { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 18px; }
.remedies {
  text-align: left; background: var(--cream); border-radius: 14px; padding: 16px 18px 16px 20px;
  margin-bottom: 18px; border-left: 3px solid var(--gold);
}
.remedies h4 { margin: 0 0 8px; font-size: 13px; color: var(--ink); }
.remedies ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
.remedy-why {
  margin-top: 4px; margin-bottom: 6px; font-size: 12px; color: var(--ink);
  background: var(--card-bg); border-left: 3px solid var(--gold); padding: 8px 10px; border-radius: 6px;
}
.remedy-preview {
  margin-top: 4px; margin-bottom: 2px; font-size: 12px; color: var(--ink-soft); font-style: italic;
  background: var(--card-bg); border-left: 3px solid var(--cream-dark); padding: 8px 10px; border-radius: 6px;
  position: relative; overflow: hidden;
}
.remedy-preview .fade-tail { color: var(--gold-text); font-style: normal; font-weight: 700; }
.unlock-why-btn {
  display: block; margin: 4px 0 8px; background: none; border: 1px dashed var(--gold);
  color: var(--gold-text); font-size: 11px; padding: 12px 14px; border-radius: 8px; cursor: pointer;
  min-height: 44px; box-sizing: border-box;
}

.extra-guidance { margin-bottom: 18px; }
.guidance-note {
  font-size: 11px; color: var(--ink-soft); font-style: italic; text-align: left;
  background: var(--cream); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px;
}
.guidance-block { text-align: left; margin-bottom: 14px; }
.guidance-block h4 { font-size: 13px; color: var(--sage-dark); margin: 0 0 6px; }
.guidance-block ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-soft); line-height: 1.7; }

.zen-principle { font-size: 14px; color: var(--ink); line-height: 1.6; margin-bottom: 20px; font-style: italic; }
.sun-info { font-size: 12px; color: var(--gold-text); margin: -12px 0 20px; }
.zen-prompts { list-style: none; padding-left: 0; }
.zen-prompts li {
  padding: 8px 0 8px 26px; position: relative; cursor: pointer;
}
.zen-prompts li::before {
  content: "○"; position: absolute; left: 0; color: var(--sage); font-size: 15px;
}
.zen-prompts li.checked::before { content: "●"; color: var(--gold-text); }
.zen-prompts li.checked { color: var(--ink); }

.breathing-session-card { padding-bottom: 30px; }
.breathing-circle-wrap {
  position: relative; width: 220px; height: 220px; margin: 30px auto;
  display: flex; align-items: center; justify-content: center;
}
.breathing-circle {
  width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle, var(--sage) 0%, var(--sage-dark) 100%);
  opacity: 0.85; transition: transform 4s ease-in-out;
}
.breathing-phase-label {
  position: absolute; font-size: 18px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.breathing-countdown {
  position: absolute; bottom: 10px; font-size: 13px; color: var(--ink-soft);
}
.exercise-row {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--cream); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
  cursor: pointer; text-align: left; border: 1.5px solid transparent;
}
.exercise-row:hover { border-color: var(--sage); }
.exercise-row.premium-locked { border-color: var(--gold); background: var(--gold-highlight-bg); }
.exercise-row .ex-name { font-weight: 700; font-size: 14px; }
.exercise-row .ex-desc { font-size: 12px; color: var(--ink-soft); }

.design-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  max-width: 320px; margin: 16px auto;
}
.design-cell {
  aspect-ratio: 1; background: var(--cream); border: 1.5px solid var(--cream-dark); border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; padding: 4px; text-align: center;
}
.design-cell.selected { border-color: var(--gold); border-width: 2px; }
.design-cell .cell-zone-label { font-size: 9px; color: var(--ink-soft); line-height: 1.2; }
.design-cell .cell-item { font-size: 26px; }
.design-zone-info {
  font-size: 12px; color: var(--ink); background: var(--cream); border-radius: 10px;
  padding: 10px 14px; text-align: left; min-height: 20px; margin-bottom: 12px;
}
.design-palette { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; }
.palette-item {
  width: 46px; height: 46px; border-radius: 10px; background: var(--cream);
  border: 1.5px solid var(--cream-dark); display: flex; align-items: center; justify-content: center;
  font-size: 22px; cursor: pointer;
}
.palette-item.selected { border-color: var(--gold); border-width: 2px; background: var(--gold-highlight-bg); }
.design-photo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.design-photo-preview { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; border: 1.5px solid var(--cream-dark); }
.festival-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--gold-highlight-bg); border: 1px solid var(--gold); border-radius: 12px;
  padding: 10px 14px; font-size: 12px; color: var(--ink); margin-bottom: 16px; text-align: left;
}
.festival-banner button {
  background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 14px; flex-shrink: 0;
  min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.push-optin-btn { color: var(--gold-text) !important; font-weight: 600; font-size: 11px !important; text-decoration: underline; min-width: auto !important; padding: 10px 8px; }
.mini-tour-overlay {
  position: fixed; inset: 0; background: rgba(43, 39, 31, 0.55); z-index: 999;
  display: flex; align-items: flex-end; justify-content: center; padding: 20px;
}
.mini-tour-box {
  background: var(--card-bg); border-radius: 18px; padding: 22px; max-width: 400px; width: 100%;
  box-shadow: var(--shadow-lifted); animation: screenIn 0.3s var(--ease);
}
.mini-tour-box p { font-size: 14px; color: var(--ink); line-height: 1.6; margin: 0 0 14px; }
.mini-tour-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mini-tour-controls .btn-primary { width: auto; margin: 0; padding: 10px 22px; }
#miniTourProgress { font-size: 12px; color: var(--ink-soft); }
#miniTourSkipBtn { margin-top: 10px; font-size: 12px; }
.breathing-affirmation {
  font-size: 13px; color: var(--sage-dark); font-style: italic; text-align: center;
  margin: 4px 0 18px; line-height: 1.5;
}
.celebration-box { text-align: center; border: 1px solid rgba(184, 146, 63, 0.3); }
.celebration-mark { display: block; margin: 4px auto 14px; }
.celebration-title {
  font-family: "Cinzel", "Playfair Display", serif; font-size: 19px; font-weight: 600;
  color: var(--gold-text); margin: 0 0 10px; letter-spacing: 0.5px;
}
.celebration-box .mini-tour-controls { justify-content: center; }

.summary-grid { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.summary-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--cream); border-radius: 12px; padding: 12px 16px;
}
.summary-room { font-size: 14px; font-weight: 600; }
.summary-dir { font-size: 13px; color: var(--ink-soft); }
.closing-note { font-size: 13px; color: var(--sage-dark); font-style: italic; text-align: center; margin: 16px 0; line-height: 1.5; }

.saved-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.saved-row {
  background: var(--cream); border-radius: 12px; padding: 14px 16px; text-align: left; cursor: pointer;
  border: 1.5px solid transparent;
}
.saved-row:hover { border-color: var(--sage); }
.saved-row .name { font-weight: 700; font-size: 15px; }
.saved-row .meta { font-size: 12px; color: var(--ink-soft); }

.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--card-bg); border-top: 1px solid var(--cream-dark);
  display: flex; justify-content: space-around; align-items: center;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
}
.nav-btn { background: none; border: none; cursor: pointer; flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 6px 0; transition: transform 0.2s var(--ease); }
.nav-btn:active { transform: scale(0.9); }
.nav-btn svg { max-width: 100%; height: auto; flex-shrink: 1; }
@media (max-width: 360px) {
  .bottom-nav { padding-left: 2px; padding-right: 2px; }
  .nav-btn svg { width: 19px; height: 19px; }
}

.filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; text-align: left; }
.filters select { margin-bottom: 0; }

.practitioner-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.real-people-badge {
  font-size: 12px; color: var(--sage-dark); background: #e8f0e6; border-radius: 10px;
  padding: 8px 12px; margin-bottom: 14px; text-align: center; font-weight: 600;
}
.comparison-block { text-align: left; border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.comparison-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 8px; }
.comparison-ai { background: #f2f2f2; border: 1px dashed #b0b0b0; }
.comparison-ai .comparison-label { color: #666666; }
.comparison-ai p:not(.comparison-label) { color: #6b6b6b; font-style: italic; }
.comparison-vekkoa { background: var(--gold-highlight-bg); border: 1px solid var(--gold); }
.comparison-vekkoa .comparison-label { color: var(--gold-text); }
.comparison-vekkoa p:not(.comparison-label) { color: var(--ink); }
.comparison-footnote { font-size: 12px; color: var(--ink-soft); text-align: center; margin: 4px 0 16px; }
.practitioner-card {
  background: var(--cream); border-radius: 14px; padding: 14px 16px; text-align: left;
  border: 1.5px solid transparent; cursor: pointer;
}
.practitioner-card:hover { border-color: var(--sage); }
.practitioner-card .p-name { font-weight: 700; font-size: 15px; }
.practitioner-card .p-meta { font-size: 12px; color: var(--ink-soft); margin: 2px 0 8px; }
.practitioner-card .p-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-size: 11px; background: var(--sage-dark); color: #fff; padding: 3px 9px; border-radius: 10px;
}
.verified-tag { background: #4a8f5c; }
.new-member-tag { background: var(--gold); color: var(--ink); }
.design-friendly-tag { background: #e8f0e6; color: var(--sage-dark); border: 1px solid var(--sage); }
.verified-note { font-size: 12px; color: #4a8f5c; margin: 4px 0 12px; font-weight: 600; }
.new-member-note { font-size: 12px; color: var(--ink-soft); margin: 4px 0 12px; font-style: italic; }

#profContactButtons { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
#profContactButtons a { text-decoration: none; }

.checkbox-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; text-align: left; }
.checkbox-row label {
  display: flex; align-items: center; gap: 6px; font-size: 13px;
  background: var(--cream); padding: 8px 12px; border-radius: 10px; cursor: pointer;
}

.success-msg { color: var(--sage-dark); font-size: 13px; font-weight: 600; margin: 10px 0; }
.error-msg { color: #c07a63; font-size: 13px; font-weight: 600; margin: 10px 0; }
.code-input { font-size: 28px; letter-spacing: 10px; text-align: center; font-weight: 700; }

.founder-badge {
  display: inline-block; font-family: "Cinzel", "Playfair Display", serif;
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: #fff; background: linear-gradient(120deg, #b8923f, #e8c86a, #8a6a2f);
  padding: 5px 14px; border-radius: 20px; margin-bottom: 10px;
}
.profile-detail-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--cream-dark);
}
.profile-detail-row:last-of-type { border-bottom: none; }
.profile-detail-label { font-size: 13px; color: var(--ink-soft); }
.profile-detail-value { font-size: 14px; font-weight: 600; color: var(--ink); text-align: right; }

.p-rating { font-size: 12px; color: var(--gold-text); margin: 2px 0 6px; font-weight: 600; }
.rating-summary { font-size: 14px; color: var(--gold-text); font-weight: 700; margin: 4px 0 12px; }

.reviews-section { text-align: left; margin-top: 20px; border-top: 1px solid var(--cream-dark); padding-top: 16px; }
.reviews-section h4 { font-size: 14px; color: var(--ink); margin: 0 0 10px; }
.reviews-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.review-item { background: var(--cream); border-radius: 10px; padding: 10px 14px; }
.review-item .review-stars { color: var(--gold-text); font-size: 13px; }
.review-item .review-comment { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.no-reviews { font-size: 13px; color: var(--ink-soft); font-style: italic; }

.star-picker { font-size: 30px; color: var(--cream-dark); margin: 10px 0; cursor: pointer; }
.star-picker span { margin-right: 4px; transition: color 0.15s ease; }
.star-picker span.selected { color: var(--gold-text); }
.checkin-stars { font-size: 32px; color: var(--cream-dark); margin: 12px 0; cursor: pointer; text-align: center; }
.checkin-stars span { margin: 0 3px; transition: color 0.15s ease; }
.checkin-stars span.selected { color: var(--gold-text); }
.checkin-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 12px; }
.checkin-tag {
  font-size: 12px; padding: 6px 12px; border-radius: 16px; border: 1.5px solid var(--cream-dark);
  background: var(--card-bg); color: var(--ink-soft); cursor: pointer; transition: all 0.2s var(--ease);
}
.checkin-tag.selected { border-color: var(--gold); background: var(--gold-highlight-bg); color: var(--ink); font-weight: 600; }

.premium-list { text-align: left; margin: 16px 0; }
.plan-card {
  background: var(--card-bg); border: 1px solid rgba(184, 146, 63, 0.16); border-radius: 16px;
  padding: 20px 18px; margin-bottom: 14px; text-align: left;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  box-shadow: 0 2px 10px rgba(43, 39, 31, 0.04);
}
.plan-card-highlighted {
  border-color: var(--gold); border-width: 1.5px;
  background: linear-gradient(160deg, var(--card-bg) 0%, #fbf2de 100%);
  box-shadow: var(--shadow-lifted); transform: translateY(-2px);
}
.plan-card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.plan-card-name { font-family: "Playfair Display", "Noto Serif SC", "Noto Serif Devanagari", Georgia, serif; font-size: 16px; font-weight: 600; color: var(--ink); }
.plan-card-price { font-size: 15px; font-weight: 700; color: var(--gold-text); letter-spacing: 0.2px; }
.plan-card ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; }
.plan-card-owned { border-color: var(--favorable); background: rgba(126, 168, 122, 0.06); }
.plan-owned-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 13px; font-weight: 600; color: var(--favorable);
}
.premium-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold-text); text-align: center; margin: 0 0 8px;
}
.upgrade-hook {
  font-family: "Playfair Display", "Noto Serif SC", "Noto Serif Devanagari", Georgia, serif;
  font-size: 17px; font-weight: 600; letter-spacing: 0.3px; color: var(--ink); text-align: center;
  line-height: 1.65; margin: 14px 0 22px; padding: 16px 16px 20px;
  border-bottom: none;
  background-image: linear-gradient(90deg, transparent, var(--gold-text) 50%, transparent);
  background-position: bottom; background-repeat: no-repeat; background-size: 100% 1px;
}
.upgrade-hook::before {
  content: "N · E · S · W";
  display: block; font-family: -apple-system, sans-serif; font-weight: 600;
  font-size: 9px; letter-spacing: 4px; color: var(--gold-text); opacity: 0.75; margin-bottom: 14px;
}
.exclusivity-note {
  font-size: 13px; color: var(--ink-soft); font-style: italic; text-align: center;
  margin: 16px 0; line-height: 1.6;
}
.field-label { font-size: 12px; color: var(--ink-soft); text-align: left; margin: 12px 0 4px; font-weight: 600; }

.session-code {
  font-size: 40px; font-weight: 800; letter-spacing: 10px; color: var(--sage-dark);
  background: var(--cream); border-radius: 16px; padding: 20px; margin: 20px 0;
}

.chatroom-card { display: flex; flex-direction: column; height: 70vh; padding: 18px; }
.chatroom-header {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--cream-dark); margin-bottom: 12px;
}
.call-btn { background: var(--sage-dark); border: none; color: #fff; font-size: 18px; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; }
.call-btn.active { background: var(--unfavorable); }

.chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px; }
.msg-bubble { max-width: 75%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.4; }
.msg-mine { align-self: flex-end; background: var(--sage-dark); color: #fff; border-bottom-right-radius: 4px; }
.msg-theirs { align-self: flex-start; background: var(--cream); color: var(--ink); border-bottom-left-radius: 4px; }

.chat-input-row { display: flex; gap: 8px; margin-top: 12px; }
.chat-input-row input { margin-bottom: 0; flex: 1; }
.chat-input-row button {
  background: var(--sage-dark); color: #fff; border: none; border-radius: 12px; width: 44px; font-size: 16px; cursor: pointer;
}
.encrypted-note { font-size: 11px; color: var(--ink-soft); text-align: center; margin: 8px 0 0; }

.music-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--cream); border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; cursor: pointer;
}
.music-row.active { border: 1.5px solid var(--sage-dark); }
.music-row .m-name { font-size: 14px; font-weight: 600; }
.music-toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }

.qr-wrap { display: flex; justify-content: center; margin: 20px 0; }
.qr-wrap img { width: 200px; height: 200px; border-radius: 14px; background: #fff; padding: 10px; box-shadow: var(--shadow); }
.qr-placeholder {
  width: 200px; padding: 30px 16px; background: var(--cream); border-radius: 14px;
  color: var(--ink-soft); font-size: 13px; text-align: center; line-height: 1.5;
}
.share-link-row { display: flex; gap: 8px; margin-bottom: 14px; }
.share-link-row input { margin-bottom: 0; flex: 1; font-size: 12px; }
.share-link-row button {
  background: var(--sage-dark); color: #fff; border: none; border-radius: 10px; width: 44px; cursor: pointer; font-size: 15px;
}

/* Tree of Life watermark — Mindful Space screens only. A quiet, faint
   complement to the spiral logo (which stays the primary mark), not a
   second competing symbol — deliberately low-opacity, behind content,
   present but easy to overlook unless you're looking for it. */
#screen-zenreflection, #screen-breathing { position: relative; overflow: hidden; }
#screen-zenreflection::before, #screen-breathing::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 300px; height: 400px;
  transform: translateX(-50%);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%238a6828' stroke-width='1.2' fill='none' stroke-linecap='round'%3E%3Cline x1='150' y1='380' x2='150' y2='260'/%3E%3Cline x1='150' y1='260' x2='110' y2='200'/%3E%3Cline x1='150' y1='260' x2='190' y2='200'/%3E%3Cline x1='150' y1='260' x2='150' y2='180'/%3E%3Cline x1='110' y1='200' x2='80' y2='150'/%3E%3Cline x1='110' y1='200' x2='120' y2='140'/%3E%3Cline x1='190' y1='200' x2='220' y2='150'/%3E%3Cline x1='190' y1='200' x2='180' y2='140'/%3E%3Cline x1='150' y1='180' x2='150' y2='110'/%3E%3Cline x1='150' y1='180' x2='125' y2='130'/%3E%3Cline x1='150' y1='180' x2='175' y2='130'/%3E%3Cline x1='80' y1='150' x2='60' y2='110'/%3E%3Cline x1='80' y1='150' x2='85' y2='105'/%3E%3Cline x1='220' y1='150' x2='240' y2='110'/%3E%3Cline x1='220' y1='150' x2='215' y2='105'/%3E%3Cline x1='150' y1='110' x2='150' y2='60'/%3E%3Cline x1='150' y1='110' x2='130' y2='75'/%3E%3Cline x1='150' y1='110' x2='170' y2='75'/%3E%3C/g%3E%3Cg fill='%238a6828'%3E%3Ccircle cx='60' cy='110' r='3.5'/%3E%3Ccircle cx='85' cy='105' r='3.5'/%3E%3Ccircle cx='120' cy='140' r='3'/%3E%3Ccircle cx='125' cy='130' r='3'/%3E%3Ccircle cx='150' cy='60' r='4'/%3E%3Ccircle cx='130' cy='75' r='3'/%3E%3Ccircle cx='170' cy='75' r='3'/%3E%3Ccircle cx='175' cy='130' r='3'/%3E%3Ccircle cx='180' cy='140' r='3'/%3E%3Ccircle cx='215' cy='105' r='3.5'/%3E%3Ccircle cx='240' cy='110' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top center;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
#screen-zenreflection .card, #screen-breathing .card { position: relative; z-index: 1; }

/* Plot & new-construction assessment — a distinct visual treatment from
   room assessment, since this is fundamentally about geometry (shape)
   and orientation (slope, road) rather than a single facing direction. */

.plot-shape-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.plot-shape-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--card-bg); border: 1px solid rgba(184, 146, 63, 0.18); border-radius: 16px;
  padding: 16px 10px; cursor: pointer;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.plot-shape-btn:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-lifted); }
.plot-shape-btn.plot-shape-selected { border-color: var(--gold); background: rgba(201, 162, 75, 0.08); }
.plot-shape-btn svg { display: block; }
.plot-shape-label { font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.3; }

/* A radial, compass-rose-style layout for choosing a direction — evokes
   the live compass screen's spirit without pretending to be a live
   sensor reading, since slope and road-facing are things you already
   know, not things you scan for. */
.plot-direction-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 8px; max-width: 280px; margin: 20px auto; aspect-ratio: 1;
}
.plot-direction-btn {
  display: flex; align-items: center; justify-content: center;
  background: var(--card-bg); border: 1px solid rgba(184, 146, 63, 0.18); border-radius: 50%;
  font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; aspect-ratio: 1;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.2s var(--ease);
}
.plot-direction-btn:hover { border-color: var(--gold); transform: scale(1.06); }
.plot-direction-btn.plot-direction-selected { border-color: var(--gold); background: var(--gold); color: #fff; }
.plot-direction-center {
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); opacity: 0.4; font-size: 20px;
}
.dir-nw { grid-column: 1; grid-row: 1; } .dir-n { grid-column: 2; grid-row: 1; } .dir-ne { grid-column: 3; grid-row: 1; }
.dir-w  { grid-column: 1; grid-row: 2; } .dir-center { grid-column: 2; grid-row: 2; } .dir-e { grid-column: 3; grid-row: 2; }
.dir-sw { grid-column: 1; grid-row: 3; } .dir-s { grid-column: 2; grid-row: 3; } .dir-se { grid-column: 3; grid-row: 3; }

.plot-result-factor {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--cream-dark);
}
.plot-result-factor:last-of-type { border-bottom: none; }
.plot-result-factor-label { font-size: 13.5px; color: var(--ink-soft); }
.plot-result-factor-value { font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 20px; }
.plot-result-factor-value.status-favorable { background: rgba(126,168,122,0.15); color: var(--favorable); }
.plot-result-factor-value.status-neutral { background: rgba(203,178,106,0.15); color: var(--neutral); }
.plot-result-factor-value.status-unfavorable { background: rgba(192,122,99,0.15); color: var(--unfavorable); }

.plot-room-placement {
  text-align: left; background: var(--card-bg); border: 1px solid rgba(184, 146, 63, 0.2);
  border-radius: 14px; padding: 16px 18px; margin: 4px 0 18px;
}
.plot-room-placement h4 {
  font-family: "Cinzel", "Playfair Display", serif; font-size: 14px; font-weight: 600;
  color: var(--gold-text); margin: 0 0 4px;
}
.plot-room-placement p.plot-placement-intro { font-size: 12px; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.5; }
.plot-placement-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--cream-dark); font-size: 13px;
}
.plot-placement-row:last-child { border-bottom: none; }
.plot-placement-room { color: var(--ink); font-weight: 600; }
.plot-placement-directions { color: var(--sage-dark); font-weight: 600; }