:root{
  --brand:#6366F1;
  --brand-600:#5458e8;
  --brand-50:#eef2ff;
  --sand:#fbfbfd;
}
.bg-brand-sand{ background: var(--sand); }
.text-brand{ color: var(--brand); }
.logo-gradient{ width:32px;height:32px;border-radius:10px; overflow:hidden; display:inline-block;
  /* Use the explicit brand logo asset if present */
  background-image: url('/static/logo.svg');
  /* ensure transparent SVGs render on a white background */
  background-color: #fff;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 3px; /* small white padding so the logo sits on white */
  box-shadow: 0 4px 18px rgba(99,102,241,.18);
}
.card{ background:#fff;border:1px solid #eaeaf0;border-radius:16px;padding:18px;box-shadow:0 4px 14px rgba(15,23,42,.04);}
.card--copied{ border-color:#34d399; box-shadow:0 10px 30px rgba(52,211,153,.2); }
.post-editor{ width:100%; border:1px solid #e2e8f0; border-radius:12px; padding:12px; font-size:.95rem; line-height:1.5; font-family:inherit; background:#fff; resize:vertical; transition:border-color .2s, box-shadow .2s, background-color .2s; }
.post-editor:focus{ border-color: var(--brand); box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.post-editor--compact{ font-size:.85rem; padding:10px; }
.post-editor--copied{ background:#f0fdfa; border-color:#34d399; }
.copy-timestamp{ color:#64748b; font-size:.75rem; }
.input{ width:100%;border:1px solid #d1d5db;border-radius:10px;padding:10px 12px;outline:none;}
.input:focus{ border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.btn-primary{ background: linear-gradient(135deg, var(--brand), #3b82f6); color:#fff; border:none; padding:10px 14px; border-radius:10px; font-weight:600; box-shadow:0 8px 22px rgba(99,102,241,.25); transition: all 0.2s; cursor: pointer; position: relative; }
.btn-primary:hover{ background: linear-gradient(135deg, var(--brand-600), #2563eb); transform: translateY(-1px); box-shadow:0 12px 28px rgba(99,102,241,.3); }
.btn-primary:hover{ background:var(--brand-600); transform: translateY(-1px); box-shadow:0 12px 28px rgba(99,102,241,.3); }
.btn-secondary{ background:#f3f4f6; color:#111827; border:1px solid #e5e7eb; padding:10px 14px; border-radius:10px; transition: all 0.2s; cursor: pointer; }
.btn-secondary:hover{ background:#e5e7eb; }
.btn-ghost{ background:#fff; color:#111827; border:1px solid #e5e7eb; padding:10px 14px; border-radius:10px; transition: all 0.2s; cursor: pointer; }
.btn-ghost:hover{ background:#f9fafb; border-color: var(--brand); }
.btn-sm{ padding:6px 12px; font-size:.85rem; border-radius:8px; }
.btn-primary:disabled,.btn-secondary:disabled{ opacity:.6; cursor:not-allowed; }
.steps{ display:flex; align-items:center; gap:8px;}
.steps .step{ width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid #dbe1f0;background:#fff;font-weight:600;color:#64748b;}
.steps .step.active{ background:var(--brand); color:#fff; border-color:var(--brand);}
.steps .bar{ width:28px;height:2px;background:#e5e7eb; }
.step-panel.hidden{ display:none; }
.choice{ position:relative;border:1px solid #e5e7eb;border-radius:14px;padding:12px;background:#fff;cursor:pointer;transition:.2s all;text-align:left;}
.choice:hover{ border-color: var(--brand); box-shadow:0 4px 14px rgba(99,102,241,.12); }
.choice .emoji{ font-size:20px; }
.choice .title{ font-weight:600; }
.choice.preselected{ background: linear-gradient(135deg, var(--brand-50), #f0f9ff); border-color: var(--brand); }
.choice.preselected.selected{ background: linear-gradient(135deg, var(--brand), #3b82f6); color: white; }
.choice.selected:after{ content:"✓"; position:absolute; right:10px; top:10px; color:#fff; background:var(--brand); border-radius:999px; width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:12px; }
#suggested-keywords{ align-items:flex-start; }
#suggested-keywords .choice{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  line-height:1.3;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:break-word;
  hyphens:auto;
  text-align:left;
  padding-right:2.75rem;
  min-height:2.5rem;
  flex:1 1 220px;
  max-width:100%;
}
#suggested-keywords .choice:after{ right:12px; top:50%; transform:translateY(-50%); }
.summary{ list-style:none; padding:0; margin:0; display:grid; gap:6px;}
.summary li{ display:flex; justify-content:space-between; font-size:13px; color:#334155; }
.post{ border:1px solid #e5e7eb;border-radius:12px;padding:12px; }
.caption{ white-space:pre-wrap; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

.generated-toolbar{ display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-start; justify-content:space-between; border:1px solid #e2e8f0; border-radius:18px; padding:1rem 1.25rem; background:#f8fafc; margin-bottom:1.5rem; }
.generated-toolbar__filters{ flex:1 1 220px; }
.generated-toolbar__label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.2em; color:#94a3b8; margin-bottom:.35rem; }
.generated-toolbar__actions{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; }
.filter-chip-group{ display:flex; flex-wrap:wrap; gap:.5rem; }
.filter-chip{ border:1px solid #cbd5f5; border-radius:999px; padding:.35rem .95rem; font-size:.85rem; font-weight:600; color:#475569; background:#fff; cursor:pointer; transition:all .2s ease; }
.filter-chip--active{ background:rgba(99,102,241,.12); border-color:var(--brand); color:var(--brand); box-shadow:0 6px 16px rgba(99,102,241,.15); }
.generated-day{ border:1px solid #e2e8f0; border-radius:28px; padding:1.5rem; background:#fff; box-shadow:0 18px 50px rgba(15,23,42,.05); transition:box-shadow .2s ease; }
.generated-day__header{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.generated-day__title-wrap{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.generated-day__title{ font-size:1.1rem; font-weight:600; color:#0f172a; }
.generated-day__pillar{ font-size:.75rem; font-weight:600; color:#6d28d9; background:#f3e8ff; padding:.2rem .7rem; border-radius:999px; text-transform:capitalize; letter-spacing:.02em; }
.generated-day__header-actions{ display:flex; align-items:center; gap:.75rem; }
.generated-day__platform-count{ font-size:.72rem; text-transform:uppercase; letter-spacing:.25em; color:#94a3b8; }
.generated-day__toggle{ width:2.5rem; height:2.5rem; border-radius:999px; border:1px solid #e2e8f0; background:#fff; display:flex; align-items:center; justify-content:center; color:#0f172a; transition:transform .2s ease, border-color .2s ease, background .2s ease; }
.generated-day__toggle:hover{ border-color:var(--brand); background:rgba(99,102,241,.05); }
.generated-day__chevron{ display:inline-block; transition:transform .2s ease; font-size:1.1rem; }
.generated-day.is-collapsed .generated-day__chevron{ transform:rotate(180deg); }
.generated-day__body{ margin-top:1rem; }
.generated-post-card{ transition:opacity .2s ease, transform .2s ease; }
.generated-post-card--hidden{ display:none; }
.generated-day__empty{ margin-top:.75rem; border:1px dashed #cbd5f5; border-radius:12px; padding:.75rem 1rem; font-size:.85rem; color:#64748b; background:#f8fafc; }
.generated-day.is-filter-empty .generated-day__body{ opacity:.75; }

.activity-label{ font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:#94a3b8; margin-bottom:.35rem; font-weight:700; }
.activity-type-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.activity-chip{ border:1px solid #e2e8f0; background:#fff; border-radius:999px; padding:.45rem .85rem; font-size:.85rem; font-weight:600; color:#334155; display:inline-flex; align-items:center; gap:.4rem; transition:all .2s ease; box-shadow:0 6px 12px rgba(15,23,42,.04); }
.activity-chip__icon{ font-size:1rem; }
.activity-chip--active{ border-color:var(--brand); color:var(--brand); background:rgba(99,102,241,.08); box-shadow:0 10px 24px rgba(99,102,241,.16); }
.activity-feed{ border-top:1px solid #e2e8f0; padding-top:1rem; }
.activity-empty{ margin-top:1rem; font-size:.9rem; color:#6b7280; border:1px dashed #cbd5f5; border-radius:12px; padding:0.85rem 1rem; background:#f8fafc; }
.activity-item{ border:1px solid #e2e8f0; border-radius:16px; padding:1rem; background:linear-gradient(135deg,#fff,#f8fafc); box-shadow:0 12px 28px rgba(15,23,42,.05); }
.activity-item__header{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.75rem; }
.activity-type-badge{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:700; padding:.35rem .7rem; border-radius:999px; border:1px solid transparent; }
.activity-type-emerald{ background:#ecfdf3; color:#0f766e; border-color:#a7f3d0; }
.activity-type-blue{ background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.activity-type-purple{ background:#f3e8ff; color:#6d28d9; border-color:#e9d5ff; }
.activity-type-amber{ background:#fff7ed; color:#b45309; border-color:#fed7aa; }
.activity-type-slate{ background:#e2e8f0; color:#0f172a; border-color:#cbd5e1; }
.activity-time{ font-size:.82rem; color:#94a3b8; }
.activity-item__body{ display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:flex-start; }
.activity-avatar{ width:40px; height:40px; border-radius:999px; background:linear-gradient(135deg,#c7d2fe,#eef2ff); color:#312e81; display:flex; align-items:center; justify-content:center; font-weight:800; box-shadow:0 6px 16px rgba(99,102,241,.18); }
.activity-item__content{ display:flex; flex-direction:column; gap:.4rem; }
.activity-item__title{ font-weight:700; color:#0f172a; font-size:1rem; }
.activity-item__meta{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.activity-actor{ font-weight:700; color:#111827; }
.activity-role{ background:#eef2ff; color:#4338ca; border-radius:999px; padding:.2rem .65rem; font-size:.78rem; font-weight:700; }
.activity-pill{ background:#f1f5f9; color:#475569; border-radius:999px; padding:.25rem .7rem; font-size:.78rem; font-weight:600; }
.needs-input-pill{ background:#fef9c3; color:#854d0e; border-radius:12px; padding:.3rem .75rem; font-size:.8rem; font-weight:700; box-shadow:0 6px 18px rgba(245,158,11,.18); }
.activity-item__summary{ font-size:.9rem; color:#475569; margin:0; }
.activity-platforms{ font-size:.82rem; color:#6366f1; font-weight:700; letter-spacing:.02em; }

.planner-card{ border:1px solid #e2e8f0; border-radius:32px; padding:2rem; background:#fff; box-shadow:0 20px 60px rgba(15,23,42,.04); }
.planner-row{ display:grid; grid-template-columns: minmax(140px,220px) 1fr; gap:1.5rem; align-items:flex-start; }
.planner-label{ text-transform:uppercase; font-size:.72rem; letter-spacing:.35em; color:#94a3b8; font-weight:600; padding-top:.35rem; }
.planner-body{ width:100%; }
.planner-hint{ font-size:.78rem; color:#64748b; }
.planner-pill{ border-radius:999px; background:#eef2ff; color:#3730a3; font-weight:600; padding:0.65rem 1.35rem; box-shadow:inset 0 0 0 1px rgba(79,70,229,.15); text-align:center; }
.planner-recipes{ display:flex; flex-direction:column; gap:1rem; border:1px solid #e9d5ff; border-radius:24px; padding:1.5rem; background:linear-gradient(135deg,#faf5ff,#eef2ff); }
.planner-eyebrow{ text-transform:uppercase; letter-spacing:.35em; font-size:.7rem; color:#7c3aed; margin-bottom:.35rem; }
.chip-group{ display:flex; flex-wrap:wrap; gap:.75rem; }
.generator-platforms{ display:flex; flex-wrap:wrap; gap:.5rem; }
.generator-platforms .chip{ border-radius:1.25rem; padding:.5rem 1.1rem; }
.chip{ border:1px solid #e2e8f0; border-radius:999px; padding:.55rem 1.15rem; font-size:.85rem; font-weight:600; color:#0f172a; background:#fff; transition:all .2s ease; box-shadow:0 4px 14px rgba(15,23,42,.04); }
.chip:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.chip:hover{ border-color:var(--brand); color:var(--brand); box-shadow:0 6px 22px rgba(99,102,241,.18); }
.chip--active{ border-color:var(--brand); background:rgba(99,102,241,.1); color:var(--brand); box-shadow:0 8px 26px rgba(99,102,241,.2); }
.chip--accent{ background:linear-gradient(135deg,#8b5cf6,#6366f1); color:#fff; border-color:transparent; box-shadow:0 15px 35px rgba(99,102,241,.35); }
.chip--accent:hover{ color:#fff; box-shadow:0 20px 45px rgba(99,102,241,.45); }
.planner-select{ width:100%; border:1px solid #e2e8f0; border-radius:14px; padding:0.7rem 1rem; font-size:.95rem; background:#fff; transition:border-color .2s, box-shadow .2s; }
.planner-select:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(99,102,241,.15); outline:none; }
.voice-summary-card{ border:1px solid #e2e8f0; border-radius:28px; padding:1.75rem; background:#f8fafc; box-shadow:0 18px 50px rgba(15,23,42,.04); }
.voice-summary-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }
.voice-summary-card dt{ font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:#94a3b8; margin-bottom:.35rem; }
.voice-summary-card dd{ font-size:1rem; font-weight:600; color:#0f172a; }

@media (max-width: 900px){
  .planner-row{ grid-template-columns: 1fr; }
  .planner-label{ letter-spacing:.25em; }
}

@media (min-width: 640px){
  .planner-recipes{ flex-direction:row; align-items:center; justify-content:space-between; }
}

/* Landing Page Styles */
.hero-visual { 
  /* keep a subtle background but ensure the inner logo image sits on white */
  background: linear-gradient(135deg, var(--brand-50) 0%, #ffffff 100%);
  aspect-ratio: 16/9;
}

/* If the hero shows the logo svg directly, place it on a white card so transparent bg looks correct */
.hero-visual img {
  background: #fff;
  padding: 28px;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
}

/* Header logo styling to ensure transparent SVGs sit on a white rounded background
   and scale cleanly inside the header without appearing visually offset. */
.header-logo {
  display: inline-block;
  object-fit: contain;
}

/* Styling for the text logo in header */
.header-logo-text {
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
}

details summary {
  list-style: none;
  padding: 8px 0;
}

details summary::-webkit-details-marker {
  display: none;
}

details[open] summary::after {
  content: "−";
  float: right;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--brand);
}

details:not([open]) summary::after {
  content: "+";
  float: right;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--brand);
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Animation delays for background elements */
.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* Progress bar styling */
#progress-bar {
  transition: width 0.3s ease;
}

/* Enhanced step indicators */
.steps {
  display: flex;
  align-items: center;
  gap: 8px;
}

.step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  background: #e2e8f0;
  color: #64748b;
  border: 2px solid #e2e8f0;
}

.step.active {
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  color: white;
  border-color: #8b5cf6;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bar {
  width: 24px;
  height: 2px;
  background: #e2e8f0;
  transition: background-color 0.3s ease;
}

.step.active + .bar,
.step.active ~ .step + .bar {
  background: linear-gradient(90deg, #8b5cf6, #3b82f6);
}

/* Enhanced form styling */
.input {
  transition: all 0.2s ease;
}

.input:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}

/* Button hover effects */
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
}

.btn-ghost:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Card hover effects */
.step-panel {
  transition: all 0.3s ease;
}

.step-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.finish-status{
  display:flex;
  align-items:flex-start;
  gap:0.75rem;
  padding:1rem;
  border-radius:0.75rem;
  border:1px solid rgba(99,102,241,.25);
  background:rgba(99,102,241,.05);
  color:#1f2937;
  transition:opacity .2s ease;
}
.finish-status__icon{
  width:2.5rem;
  height:2.5rem;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.25rem;
  font-weight:600;
  background:#e0e7ff;
  color:#4338ca;
}
.finish-status__title{
  font-weight:600;
  color:#0f172a;
}
.finish-status__detail{
  color:#475569;
  margin-top:0.25rem;
}
.finish-status[data-state="info"]{
  background:#eef2ff;
  border-color:#c7d2fe;
  color:#3730a3;
}
.finish-status[data-state="info"] .finish-status__icon{
  background:#e0e7ff;
  color:#3730a3;
}
.finish-status[data-state="success"]{
  background:#ecfdf5;
  border-color:#a7f3d0;
  color:#065f46;
}
.finish-status[data-state="success"] .finish-status__icon{
  background:#d1fae5;
  color:#047857;
}
.finish-status[data-state="error"]{
  background:#fef2f2;
  border-color:#fecaca;
  color:#b91c1c;
}
.finish-status[data-state="error"] .finish-status__icon{
  background:#fee2e2;
  color:#b91c1c;
}

.hero-panel{
  transition:transform .4s ease, box-shadow .4s ease;
}
.hero-panel:hover{
  transform:translateY(-2px);
  box-shadow:0 25px 60px rgba(15,23,42,.15);
}
#inline-signup-message{
  border-radius:0.75rem;
  padding:0.75rem 1rem;
  background:rgba(99,102,241,.08);
}
#step-2-empty{
  transition:opacity .2s ease;
}

/* Responsive utilities */
@media (max-width: 768px) {
  .hero-visual {
    aspect-ratio: 4/3;
  }
}