/* =========================================================================
   LISTING LAUNCHPAD / PORCHLYTE FORM TOOLS — SHARED DESIGN SYSTEM
   -------------------------------------------------------------------------
   This stylesheet is the cohesive base for every form tool in the suite.
   The shared base below is identical across the suite. Tool-specific rules
   for the Open House Marketing Kit live in the clearly marked block at the
   bottom and only build on the tokens above; they never change them.

   Palette: white + cream surfaces, dark brown type, rust as an accent only.
   Type:    Chapza (display, falls back to Playfair Display) + Inter (body/UI).
   ========================================================================= */

:root {
  /* Brand palette */
  --cream: #efeae3;      /* page + section backgrounds */
  --white: #ffffff;      /* cards, tool surfaces, form fields */
  --tan: #d7c8ba;        /* secondary panels, hover, dividers, pills */
  --brown: #2b1f1b;      /* body text + headings, dark modules */
  --rust: #80441e;       /* accent only: buttons, active state, underlines */

  --text: var(--brown);
  --text-soft: #6f6157;  /* muted brown for sub text */
  --border: #e4dacd;     /* soft warm border */
  --error: #80441e;

  --font-display: "Chapza", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(43, 31, 27, 0.04), 0 6px 20px rgba(43, 31, 27, 0.05);

  --content-width: 760px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }

/* The hidden attribute must always win, even over display rules like flex/grid. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 40px 24px 96px;
}

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

/* ===== TOOL HEADER (reusable shell — same on every form) ===== */
.tool-header {
  text-align: center;
  margin: 0 0 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.tool-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--brown);
  margin: 0 0 12px;
}
.tool-tagline {
  margin: 0 auto;
  max-width: 540px;
  color: var(--text-soft);
  font-size: 16px;
}

/* ===== BUTTONS ===== */
.btn-primary {
  background: var(--rust);
  color: #fff;
  border: 1px solid var(--rust);
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform 0.12s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: 0 2px 8px rgba(128, 68, 30, 0.18);
}
.btn-primary:hover {
  background: #6c3818;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(128, 68, 30, 0.24);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: var(--brown);
  color: #fff;
  border: 1px solid var(--brown);
  padding: 13px 26px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform 0.12s var(--ease), background 0.2s var(--ease);
}
.btn-secondary:hover { background: #1c1512; transform: translateY(-1px); }

/* Quiet Copy button — tan pill */
.btn-copy {
  background: var(--tan);
  color: var(--brown);
  border: 1px solid transparent;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.btn-copy:hover { background: #cbb9a8; }
.btn-copy.is-copied { background: var(--rust); color: #fff; }

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ===== FORM ===== */
#form, #loading, #results {
  margin: 0 auto;
}
.form-note {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--rust);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 0 0 28px;
  color: var(--text-soft);
  font-size: 14.5px;
}
.form-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.form-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
  scroll-margin-top: 96px;
}
.form-section-title {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rust);
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.field-row {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field.span-2 { grid-column: span 2; }
.field > span,
.field > legend {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-soft);
  text-align: left;
  padding-left: 2px;
}
.field > span em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--tan);
  margin-left: 6px;
}
.field input,
.field select,
.field textarea {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  font: inherit;
  color: inherit;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(128, 68, 30, 0.15);
}

.form-actions {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 4px;
}
.form-actions .microcopy { text-align: center; }
.microcopy {
  font-size: 13px;
  color: var(--text-soft);
  margin: 0;
}
.form-error {
  color: var(--error);
  font-size: 14px;
  margin: 8px 0 0;
  font-weight: 500;
  background: #fbf1ea;
  border: 1px solid #e7c9b6;
  border-left: 3px solid var(--rust);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}

/* ===== SCREEN HEADERS (used on the results screen) ===== */
.screen-header {
  text-align: left;
  margin: 8px 0 28px;
}
.screen-header.center { text-align: center; }
.screen-header h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1.05;
  color: var(--brown);
  margin: 0 0 12px;
}
.screen-header.center h2.underline { display: inline-block; }
.screen-header.center h2.underline::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: var(--rust);
  border-radius: 2px;
  margin: 14px auto 0;
}
.screen-sub {
  margin: 0;
  color: var(--text-soft);
  font-size: 16px;
}

/* ===== LOADING ===== */
.loader {
  text-align: center;
  padding: 72px 0;
}
.loader h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.5vw, 32px);
  color: var(--brown);
  margin: 0 0 8px;
}

/* ===== RESULTS ===== */
.result-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.result-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--brown);
  color: #fff;
  padding: 12px 22px;
}
.result-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--tan);
}
.result-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
}
.result-body { padding: 22px 22px 8px; }
.content-body {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--brown);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.result-card .card-actions { padding: 0 22px 20px; }

.results-again {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* Loading shimmer shown in each card until its content returns */
.shimmer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 10px;
}
.shimmer span {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cream) 25%, #e7ddd0 37%, var(--cream) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
.shimmer span:nth-child(1) { width: 100%; }
.shimmer span:nth-child(2) { width: 92%; }
.shimmer span:nth-child(3) { width: 70%; }
@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shimmer span { animation: none; }
}

.card-error-msg {
  margin: 0;
  color: var(--text-soft);
  font-size: 15px;
}

.results-writing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 22px 0 0;
  color: var(--text-soft);
  font-size: 14px;
}
.writing-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rust);
  animation: writing-pulse 1s ease-in-out infinite;
}
@keyframes writing-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .writing-dot { animation: none; }
}

.result-card.just-arrived { animation: card-in 0.35s var(--ease); }
@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== FOOTER ===== */
.site-footer {
  margin-top: 56px;
  padding: 26px 0 12px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer-disclaimer {
  font-size: 12px;
  color: var(--text-soft);
  margin: 0 auto;
  max-width: 620px;
  opacity: 0.9;
  line-height: 1.55;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== RESPONSIVE (shared) ===== */
@media (max-width: 520px) {
  .app { padding: 28px 18px 80px; }
  .result-bar { padding: 11px 18px; }
  .result-body { padding: 18px 18px 6px; }
  .result-card .card-actions { padding: 0 18px 18px; }
  .field.span-2 { grid-column: auto; }
}

/* =========================================================================
   TOOL-SPECIFIC ADDITIONS (Open House Marketing Kit only)
   Builds on the shared system above and reuses its tokens. Nothing here
   changes the shared components; it only adds the pieces this tool needs.
   ========================================================================= */

/* ---- Header badges + supporting copy ---- */
.tool-badge-cat {
  display: inline-block;
  background: var(--brown);
  color: var(--tan);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}
.tool-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--rust);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(128, 68, 30, 0.22);
}
.tool-subhead {
  margin: 0 auto;
  max-width: 560px;
  color: var(--rust);
  font-size: clamp(16px, 2.4vw, 19px);
  font-weight: 600;
}
.tool-support {
  margin: 12px auto 0;
  max-width: 560px;
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.6;
}
.tool-support em { font-style: italic; }
.tool-header-cta { margin-top: 22px; }
@media (max-width: 520px) {
  .tool-badge { position: static; display: inline-block; margin: 0 8px 0 0; }
}

/* ---- Sticky progress summary ---- */
.progress-rail {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(239, 234, 227, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin: 0 0 28px;
  box-shadow: 0 4px 14px rgba(43, 31, 27, 0.05);
}
.progress-track {
  height: 5px;
  background: var(--tan);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 9px;
}
.progress-fill {
  display: block;
  height: 100%;
  width: 10%;
  background: var(--rust);
  border-radius: var(--radius-pill);
  transition: width 0.35s var(--ease);
}
.progress-current {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  padding: 2px 4px;
  text-align: left;
}
.progress-step {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust);
  white-space: nowrap;
}
.progress-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--brown);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.progress-chevron { color: var(--text-soft); font-size: 12px; }
.progress-menu {
  list-style: none;
  margin: 8px 0 2px;
  padding: 6px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
.progress-menu li {
  font-size: 13px;
  color: var(--text-soft);
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: center;
}
.progress-menu li:hover { background: var(--tan); color: var(--brown); }
.progress-menu li .n {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--rust);
  min-width: 18px;
}
.progress-menu li.active { background: var(--rust); color: #fff; }
.progress-menu li.active .n { color: #fff; }
@media (max-width: 520px) {
  .progress-menu { grid-template-columns: 1fr; }
}

/* ---- Pill option groups ---- */
.pill-group {
  border: 0; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 14.5px;
  color: var(--brown);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), box-shadow 0.16s var(--ease);
  user-select: none;
}
.pill:hover { border-color: var(--tan); background: #faf7f2; }
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill:has(input:focus-visible) {
  border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(128, 68, 30, 0.15);
}
.pill:has(input:checked) {
  background: var(--rust);
  border-color: var(--rust);
  color: #fff;
  box-shadow: 0 2px 8px rgba(128, 68, 30, 0.2);
}

/* ---- Conditional reveal blocks ---- */
.conditional {
  margin-top: 4px;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--rust);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fadein 0.3s var(--ease);
}
.help-text {
  font-size: 13.5px;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.55;
}
.help-text.warn {
  border-left: 3px solid var(--tan);
  padding-left: 12px;
}

textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
textarea.tall { min-height: 150px; }

/* ---- Photo uploads ---- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.photo-tile {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
}
.photo-tile img { display: block; width: 100%; height: 100px; object-fit: cover; }
.photo-tile .photo-cat {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-soft);
  padding: 6px 8px 4px;
}
.photo-tile .photo-actions {
  display: flex; justify-content: space-between; gap: 4px;
  padding: 0 8px 8px;
}
.photo-tile button {
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 600;
  color: var(--rust); padding: 2px 4px;
}
.photo-tile button.remove { color: var(--text-soft); }
.photo-tile.is-primary { border-color: var(--rust); box-shadow: 0 0 0 2px rgba(128,68,30,0.15); }
.photo-tile .primary-flag {
  position: absolute; top: 6px; left: 6px;
  background: var(--rust); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--radius-pill);
}

/* ---- Campaign options ---- */
.options-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.btn-mini {
  background: var(--tan); color: var(--brown);
  border: 1px solid transparent; padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: 0.03em; cursor: pointer;
  transition: background 0.18s var(--ease);
}
.btn-mini:hover { background: #cbb9a8; }
.btn-mini.ghost { background: transparent; border-color: var(--border); color: var(--text-soft); }
.btn-mini.ghost:hover { background: var(--white); }
.options-count { font-size: 13px; color: var(--text-soft); margin-left: auto; }
.option-cat { margin-top: 18px; }
.option-cat-label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--text-soft); margin: 0 0 10px;
}
.option-list { display: flex; flex-wrap: wrap; gap: 8px; }
.option-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  cursor: pointer; font-size: 13.5px; color: var(--brown);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), box-shadow 0.16s var(--ease);
  user-select: none;
}
.option-chip:hover { border-color: var(--tan); background: #faf7f2; }
.option-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.option-chip:has(input:checked) {
  background: var(--rust); border-color: var(--rust); color: #fff;
  box-shadow: 0 2px 8px rgba(128, 68, 30, 0.2);
}
.option-chip .rec-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--rust);
}
.option-chip:has(input:checked) .rec-dot { background: #fff; }

/* ---- Results toolbar ---- */
.results-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 0 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--border);
}

/* ---- Overview card ---- */
.overview-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  overflow: hidden; margin-bottom: 22px;
}
.overview-top {
  background: var(--brown); color: #fff; padding: 14px 24px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
}
.overview-body { padding: 24px; }
.overview-lead { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--brown); }
.overview-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 22px;
}
.overview-stat {
  background: var(--cream); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 16px;
}
.overview-stat .label {
  display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--rust); margin-bottom: 6px;
}
.overview-stat .value { font-size: 15px; color: var(--brown); font-weight: 500; line-height: 1.4; }
.overview-strategy { border-top: 1px solid var(--border); padding-top: 18px; }
.overview-strategy + .overview-strategy { border-top: 1px solid var(--border); margin-top: 18px; }
.overview-strategy h4 {
  margin: 0 0 8px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--rust);
}
.overview-strategy p { margin: 0; color: var(--brown); line-height: 1.65; font-size: 15.5px; }

/* ---- Timeline ---- */
.section-title-row {
  display: flex; align-items: center; gap: 12px; margin: 34px 0 14px;
}
.section-title-row h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 3vw, 26px); color: var(--brown); margin: 0;
}
.section-title-row .rule { flex: 1; height: 1px; background: var(--border); }

.timeline-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  overflow: hidden; margin-bottom: 22px;
}
.timeline-top {
  background: var(--tan); color: var(--brown); padding: 14px 24px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
}
.timeline { padding: 8px 24px 20px; }
.timeline-item {
  display: grid; grid-template-columns: 120px 1fr; gap: 18px;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-phase {
  font-weight: 600; color: var(--rust); font-size: 14px; line-height: 1.35;
}
.timeline-when {
  display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600; color: var(--text-soft); margin-top: 4px;
}
.timeline-action { font-weight: 600; color: var(--brown); margin: 0 0 6px; font-size: 15px; }
.timeline-meta { margin: 0 0 4px; color: var(--text-soft); font-size: 14px; line-height: 1.5; }
.timeline-meta b { color: var(--brown); font-weight: 600; }
@media (max-width: 520px) {
  .timeline { padding: 6px 18px 16px; }
  .timeline-item { grid-template-columns: 1fr; gap: 8px; }
}

/* ---- Follow-up plan ---- */
.followup-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  overflow: hidden; margin-bottom: 22px;
}
.followup-top {
  background: var(--brown); color: #fff; padding: 14px 24px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
}
.followup-body { padding: 8px 24px 20px; }
.followup-item { padding: 16px 0; border-bottom: 1px solid var(--border); }
.followup-item:last-child { border-bottom: none; }
.followup-aud { font-weight: 600; color: var(--brown); margin: 0 0 6px; font-size: 15.5px; }
.followup-line { margin: 0 0 4px; font-size: 14px; color: var(--text-soft); line-height: 1.5; }
.followup-line b { color: var(--rust); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; margin-right: 6px; }

/* ---- Result groups by category ---- */
.result-group { margin-bottom: 8px; }
#results-groups { display: block; }
.group-cards { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.group-copy-all { margin-left: auto; }

/* Piece card inner fields (shared shapes for social / email / print / list) */
.piece-timing {
  margin-left: auto; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; color: var(--tan);
}
.piece-field { padding: 16px 0; border-top: 1px solid var(--border); }
.piece-field:first-child { border-top: none; padding-top: 4px; }
.piece-field-label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--rust); margin: 0 0 8px;
}
.piece-strong { margin: 0; font-size: 16.5px; font-weight: 600; color: var(--brown); line-height: 1.4; }
.piece-italic { margin: 0; font-size: 14.5px; color: var(--text-soft); font-style: italic; }
.piece-cta {
  margin: 0; padding: 12px 16px; background: var(--cream);
  border-radius: var(--radius-md); border-left: 3px solid var(--rust);
  font-size: 15px; color: var(--brown);
}
.piece-alt { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.piece-alt li { font-size: 14.5px; color: var(--text-soft); padding-left: 16px; position: relative; }
.piece-alt li::before {
  content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--tan);
}
.piece-bullets { margin: 0; padding-left: 20px; }
.piece-bullets li { margin: 0 0 6px; font-size: 15px; color: var(--brown); line-height: 1.5; }
.hashtags { margin: 4px 0 0; font-size: 14px; color: var(--rust); word-spacing: 4px; }
.piece-meta-line { margin: 0; font-size: 13.5px; color: var(--text-soft); line-height: 1.55; }

/* slide / shot rows */
.slide-row { padding: 12px 0; border-top: 1px solid var(--border); }
.slide-row:first-child { border-top: none; padding-top: 2px; }
.slide-tag {
  display: inline-block; background: var(--tan); color: var(--brown);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--radius-pill); margin-bottom: 8px;
}
.slide-text { margin: 0 0 4px; font-size: 15.5px; color: var(--brown); line-height: 1.5; }
.slide-media { margin: 0; font-size: 13px; color: var(--text-soft); }
.slide-media b { color: var(--rust); font-weight: 600; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.06em; margin-right: 5px; }

/* list-kind blocks (hosting / plan) */
.list-block { padding: 14px 0; border-top: 1px solid var(--border); }
.list-block:first-child { border-top: none; padding-top: 2px; }
.list-block h5 {
  margin: 0 0 8px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; color: var(--rust);
}
.list-block ul { margin: 0; padding-left: 20px; }
.list-block li { margin: 0 0 6px; font-size: 15px; color: var(--brown); line-height: 1.55; }

/* ---- This form's primary generate button is black (suite variant) ---- */
#btn-generate {
  background: var(--brown); border-color: var(--brown);
  box-shadow: 0 2px 8px rgba(43, 31, 27, 0.18);
}
#btn-generate:hover { background: #1c1512; box-shadow: 0 5px 14px rgba(43, 31, 27, 0.24); }

/* =========================================================================
   OPEN HOUSE LOADER SCENE
   ========================================================================= */
.oh-loader { display: flex; justify-content: center; margin: 0 auto 32px; }
.oh-svg { width: 280px; height: auto; overflow: visible; }

.oh-ground { stroke: var(--tan); stroke-width: 2; stroke-linecap: round; }
.oh-roof, .oh-body, .oh-chimney {
  fill: var(--white); stroke: var(--brown); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
}
.oh-window { fill: var(--tan); stroke: var(--brown); stroke-width: 1.8; }
.oh-window-v, .oh-window-h { stroke: var(--brown); stroke-width: 1.5; }
.oh-window-glow { fill: #f4c96b; opacity: 0; }
.oh-door-frame { fill: var(--tan); stroke: var(--brown); stroke-width: 2; stroke-linejoin: round; }
.oh-door rect { fill: var(--white); stroke: var(--brown); stroke-width: 2; stroke-linejoin: round; }
.oh-knob { fill: var(--rust); }

.oh-stake, .oh-crossbar { stroke: var(--brown); stroke-width: 3; stroke-linecap: round; }
.oh-connector { stroke: var(--brown); stroke-width: 1.5; stroke-linecap: round; }
.oh-board rect { fill: var(--rust); stroke: var(--brown); stroke-width: 2; }
.oh-board-text { fill: #fff; font-family: var(--font-body); font-weight: 700; font-size: 9px; letter-spacing: 0.02em; }
.oh-welcome rect { fill: var(--white); stroke: var(--brown); stroke-width: 2; }
.oh-welcome-text { fill: var(--brown); font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; }
.oh-string { fill: none; stroke: var(--brown); stroke-width: 1; stroke-linecap: round; opacity: 0.7; }
.oh-balloon ellipse { stroke: var(--brown); stroke-width: 1.6; }
.oh-balloon .oh-knot { stroke: var(--brown); stroke-width: 1; stroke-linejoin: round; }
.oh-balloon-1 ellipse, .oh-balloon-1 .oh-knot { fill: var(--rust); }
.oh-balloon-2 ellipse, .oh-balloon-2 .oh-knot { fill: var(--tan); }
.oh-balloon-3 ellipse, .oh-balloon-3 .oh-knot { fill: var(--white); }

/* --- Animated sequence (loops gently) --- */
.oh-house { transform-box: fill-box; transform-origin: 78px 188px; animation: oh-pop 6s ease-in-out infinite; }
@keyframes oh-pop {
  0%   { opacity: 0; transform: translateY(10px) scale(0.96); }
  10%  { opacity: 1; transform: translateY(0) scale(1); }
  92%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(10px) scale(0.96); }
}
.oh-sign { transform-box: fill-box; transform-origin: 212px 188px; animation: oh-sign-in 6s ease-in-out infinite; }
@keyframes oh-sign-in {
  0%, 12% { opacity: 0; transform: translateY(14px); }
  22%     { opacity: 1; transform: translateY(0); }
  92%     { opacity: 1; transform: translateY(0); }
  100%    { opacity: 0; transform: translateY(14px); }
}
/* The WELCOME panel hangs from the sign board and swings gently back and forth,
   pivoting from where it attaches at the top. Visibility comes from the parent
   sign group, so this only handles the swing. */
.oh-welcome { transform-box: fill-box; transform-origin: top center; animation: oh-welcome-sway 3.2s ease-in-out infinite; }
@keyframes oh-welcome-sway {
  0%   { transform: rotate(-7deg); }
  50%  { transform: rotate(7deg); }
  100% { transform: rotate(-7deg); }
}
/* Balloons are attached to the sign (nested in the sign group, so they fade and
   travel with it). They pivot from where they're tied at the board top, swaying
   continuously like they're catching a breeze. */
.oh-balloons { transform-box: fill-box; transform-origin: bottom center; animation: oh-balloon-sway 2.8s ease-in-out infinite; }
@keyframes oh-balloon-sway {
  0%   { transform: rotate(-8deg); }
  50%  { transform: rotate(8deg); }
  100% { transform: rotate(-8deg); }
}
/* Door swings open on its left hinge (scaleX toward the left edge), revealing the
   dark doorway behind it. Held open for most of the cycle so it reads clearly. */
.oh-door { transform-box: fill-box; transform-origin: left center; animation: oh-door-open 6s ease-in-out infinite; }
@keyframes oh-door-open {
  0%, 26% { transform: scaleX(1); }
  44%     { transform: scaleX(0.09); }
  90%     { transform: scaleX(0.09); }
  100%    { transform: scaleX(1); }
}
.oh-window-glow { animation: oh-light-on 6s ease-in-out infinite; }
@keyframes oh-light-on {
  0%, 48% { opacity: 0; }
  60%, 92% { opacity: 0.85; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .oh-house, .oh-sign, .oh-welcome, .oh-balloons, .oh-door, .oh-window-glow {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .oh-window-glow { opacity: 0.85 !important; }
  .oh-door { transform: scaleX(0.12) !important; }
}

/* =========================================================================
   PRINT / SAVE AS PDF
   ========================================================================= */
@media print {
  .tool-header-cta, .progress-rail, .results-toolbar, .results-again,
  .results-writing, #form, #loading, .card-actions, .group-copy-all,
  .site-footer .footer-disclaimer { display: none !important; }
  body { background: #fff; }
  .app { padding: 0; max-width: 100%; }
  .result-card, .overview-card, .timeline-card, .followup-card {
    box-shadow: none; break-inside: avoid; page-break-inside: avoid;
  }
  .result-bar, .overview-top, .followup-top { background: #2b1f1b !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .screen { display: block !important; }
  #form, #loading { display: none !important; }
}