/* ============================================================
   home.css — features / marketing page (Layout B)
============================================================ */

body{ display:flex; flex-direction:column; min-height:100vh; }
main{ flex:1; }

/* ---------- Page hero ---------- */
.page-hero{ text-align:center; padding:50px 26px 34px; }
.page-hero h1{
  font-family:var(--font-display); font-weight:700;
  font-size:31px; margin:0;
}
.page-hero p{
  color:var(--text-dim); font-size:14.5px; margin:10px 0 20px;
}

/* ============================================================
   Layout B — alternating feature rows
============================================================ */
.features{ padding-bottom:20px; }

.feature-row{
  display:flex; align-items:center; gap:38px;
  padding:34px 0;
  border-bottom:1px solid var(--rail-border);
}
/* Every second row flips the media to the right */
.feature-row.reverse{ flex-direction:row-reverse; }

.feature-media{ flex:1.15; min-width:0; }
.feature-text{ flex:1; min-width:0; }

.feature-text h2{
  font-family:var(--font-display); font-weight:600;
  font-size:21px; margin:0 0 10px;
}
.feature-text p{
  color:var(--text-dim); font-size:14px;
  line-height:1.7; margin:0;
}

/* The animation container.
   Swap .media-placeholder for an <img> or <video> when your
   animations are ready — the box keeps its shape either way. */
.media-box{
  background:var(--rail-bg);
  border:1px solid var(--rail-border);
  border-radius:14px;
  aspect-ratio:16/10;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:border-color .18s;
}
.media-box:hover{ border-color:var(--accent); }
.media-box img,
.media-box video{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Videos stay hidden (placeholder shows) until their file has loaded —
   so a missing anim/*.mp4 never leaves an empty black box. */
.media-box video{ display:none; }
.media-box.has-video video{ display:block; }
.media-box.has-video .media-placeholder{ display:none; }
.media-placeholder{
  color:var(--text-dim); font-size:12.5px;
  font-family:var(--font-body);
}

/* ============================================================
   Pricing
============================================================ */
.pricing{
  background:var(--rail-bg);
  border-top:1px solid var(--rail-border);
  border-bottom:1px solid var(--rail-border);
  padding:48px 0;
}
.section-title{
  font-family:var(--font-display); font-weight:600;
  font-size:24px; text-align:center; margin:0;
}
.section-sub{
  text-align:center; color:var(--text-dim);
  font-size:13.5px; margin:9px 0 28px;
}

.plans{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  max-width:680px; margin:0 auto;
}
.plan{
  background:var(--page-bg);
  border:1px solid var(--rail-border);
  border-radius:14px;
  padding:26px 24px;
  position:relative;
  display:flex; flex-direction:column;
}
.plan.featured{ border-color:var(--accent); }
.plan-badge{
  position:absolute; top:-10px; right:20px;
  background:var(--accent); color:#1a1c22;
  font-size:10px; font-weight:700; letter-spacing:0.07em;
  padding:4px 10px; border-radius:99px;
}
.plan-name{
  font-family:var(--font-display); font-weight:600; font-size:15px;
}
.plan.featured .plan-name{ color:var(--accent); }
.plan-price{
  font-size:29px; font-weight:600; margin:8px 0 18px;
}
.plan-price span{
  font-size:13px; font-weight:400; color:var(--text-dim);
}
.plan-price .plan-now{ font-size:inherit; font-weight:inherit; color:inherit; }
.plan-old{ font-size:18px; font-weight:400; color:var(--text-dim); margin-right:8px; }
.plan-extra{ font-size:12.5px; color:var(--text-dim); margin:-12px 0 18px; }
.plan-per-month{ color:var(--success); font-weight:600; }
.plan-offer-ends{ font-size:12px; color:var(--accent); margin-bottom:14px; }

.plan-list{
  list-style:none; padding:0; margin:0 0 22px;
  font-size:13.5px; line-height:2.1; flex:1;
}
.plan-list li{ position:relative; padding-left:24px; }
.plan-list li::before{
  position:absolute; left:0; font-weight:700;
}
.plan-list li.yes{ color:var(--text-bright); }
.plan-list li.yes::before{ content:'✓'; color:var(--success); }
.plan-list li.no{ color:var(--text-dim); }
.plan-list li.no::before{ content:'✕'; color:var(--text-dim); }

.plan .btn{ width:100%; }

.header-user{ font-size:13px; color:var(--text-dim); }

/* ============================================================
   Community Voices (reviews)
============================================================ */
.voices{ padding:52px 0; border-top:1px solid var(--rail-border); }
.voices-grid{
  display:grid; gap:16px; margin-top:30px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.voice-card{
  background:var(--rail-bg); border:1px solid var(--rail-border);
  border-radius:20px; padding:20px 22px;
  transition:border-color .15s, transform .15s;
}
.voice-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.voice-header{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.voice-avatar{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:var(--accent); color:#1a1c22;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  background-size:cover; background-position:center;
}
.voice-name{ font-size:14px; font-weight:600; }
.voice-stars{ color:#ffb545; font-size:13px; letter-spacing:1px; margin-top:1px; }
.voice-text{
  font-size:13.5px; color:var(--text-dim); line-height:1.7; margin:0;
}
.voices-empty{ text-align:center; color:var(--text-dim); font-size:13.5px; margin-top:30px; }
.voices-cta{ text-align:center; margin-top:30px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.voices-hint{ font-size:12px; color:var(--text-dim); }
.voices-hint a{ color:var(--accent); }

/* Write-a-review overlay */
.overlay{
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.62);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.overlay.open{ display:flex; }
.review-modal{
  background:var(--rail-bg); border:1px solid var(--rail-border); border-radius:16px;
  padding:26px 26px 22px; width:100%; max-width:380px;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
}
.review-modal h3{
  font-family:var(--font-display); font-weight:600; font-size:16px; margin:0 0 16px;
}
.star-picker{ display:flex; gap:6px; justify-content:center; margin-bottom:16px; }
.star-picker button{
  background:none; border:none; font-size:30px; line-height:1; cursor:pointer;
  color:var(--rail-border); transition:color .1s, transform .1s;
}
.star-picker button:hover{ transform:scale(1.12); }
.star-picker button.filled{ color:#ffb545; }
.review-modal textarea{
  width:100%; min-height:90px; padding:11px 13px; border-radius:10px;
  border:1px solid var(--rail-border); background:var(--page-bg); color:var(--text-bright);
  font-family:var(--font-body); font-size:13.5px; resize:vertical; outline:none;
}
.review-modal textarea:focus{ border-color:var(--accent); }
.review-modal .field-msg{ font-size:12px; margin:8px 0 0; min-height:16px; }
.review-modal .field-msg.error{ color:var(--danger); }
.review-modal .field-msg.success{ color:var(--success); }
.review-modal-actions{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.review-modal-actions .btn{ flex:1; white-space:nowrap; }

/* ============================================================
   Ask Questions (FAQ)
============================================================ */
.faq{ padding:52px 0 60px; border-top:1px solid var(--rail-border); }
.faq-list{ max-width:680px; margin:30px auto 0; display:flex; flex-direction:column; gap:8px; }
.faq-item{
  background:var(--rail-bg); border:1px solid var(--rail-border); border-radius:12px;
  overflow:hidden;
}
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:none; text-align:left; cursor:pointer;
  padding:15px 18px; font-family:var(--font-body); font-size:14px; font-weight:600;
  color:var(--text-bright);
}
.faq-caret{ width:16px; height:16px; flex-shrink:0; color:var(--text-dim); transition:transform .2s; }
.faq-item.open .faq-caret{ transform:rotate(180deg); color:var(--accent); }
.faq-answer{
  max-height:0; overflow:hidden; transition:max-height .25s ease, padding .25s ease;
  padding:0 18px;
}
.faq-item.open .faq-answer{ max-height:220px; padding:0 18px 16px; }
.faq-answer p{ margin:0; font-size:13.5px; color:var(--text-dim); line-height:1.7; }


/* ============================================================
   Mobile — rows stack, and reverse is switched off so the
   animation always sits above its text
============================================================ */
@media (max-width:760px){
  .page-hero{ padding:34px 16px 24px; }
  .page-hero h1{ font-size:25px; }

  .feature-row,
  .feature-row.reverse{
    flex-direction:column;
    gap:16px;
    padding:26px 0;
  }
  /* Stacked rows: give the animation box the full width. Without this the
     centred column shrinks it to its content — and the drawn animation
     has no natural width, so the box collapsed to a dot on phones. */
  .feature-media,
  .feature-text{ width:100%; flex:none; }
  .feature-text h2{ font-size:18px; }
  .feature-text p{ font-size:13.5px; }
}