body.landing-page{
  --border: #d8d8d8;
  --border-strong: #cfcfcf;
}

/* Landing page only (index.php when logged out).
   All rules are scoped to body.landing-page to avoid affecting the rest of the app. */

.landing-page{ scroll-behavior: smooth; }

.landing-page .page{
  max-width: 720px;
}

/* Keep the same topbar, but make the right-side "Log in" look like a clean link */
.landing-page .landing-login-link{
  text-decoration: none;
}

/* Main layout */
.landing-page .landing-main{
  padding: 14px 0 26px;
}

/* Hero */
.landing-page .landing-hero{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 18px 18px 16px;
  margin-bottom: 14px;
}

.landing-page .landing-hero h1{
  font-size: 30px;
  line-height: 1.15;
  margin: 0 0 10px;
}

.landing-page .landing-hero p{
  margin: 0 0 10px;
  line-height: 1.55;
}

.landing-page .landing-cta{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Cards/sections */
.landing-page .landing-card{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 14px 0;
}

/* Collapsible sections (JS-controlled) */
.landing-page .js-collapsible{
  display: none;
}

.landing-page .js-collapsible.is-open{
  display: block;
}

.landing-page .landing-card h2{
  margin: 0 0 10px;
  font-size: 18px;
}

.landing-page .landing-list{
  margin: 0;
  padding-left: 18px;
}

.landing-page .landing-list li{ margin: 8px 0; }

/* Pricing (two tiers side-by-side, still within a single-column page) */
.landing-page .pricing-row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.landing-page .pricing-plan{
  flex: 1 1 260px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
}

/* Tier colors (landing page only) */
.landing-page .pricing-row .pricing-plan:first-child{
  border-color: rgba(20, 120, 60, 0.18);
  background: rgba(34, 197, 94, 0.07);
}

.landing-page .pricing-row .pricing-plan:last-child{
  border-color: rgba(30, 64, 175, 0.18);
  background: rgba(59, 130, 246, 0.07);
}

.landing-page .pricing-row .pricing-plan:first-child::before,
.landing-page .pricing-row .pricing-plan:last-child::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
}

.landing-page .pricing-row .pricing-plan:first-child::before{
  background: rgba(34, 197, 94, 0.40);
}

.landing-page .pricing-row .pricing-plan:last-child::before{
  background: rgba(59, 130, 246, 0.40);
}

.landing-page .pricing-row .pricing-plan:first-child .plan-price{
  color: rgba(20, 120, 60, 1);
}

.landing-page .pricing-row .pricing-plan:last-child .plan-price{
  color: rgba(30, 64, 175, 1);
}


.landing-page .plan-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.landing-page .plan-name{
  font-weight: 800;
}

.landing-page .plan-price{
  font-weight: 900;
  font-size: 18px;
}

.landing-page .plan-sub{
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 10px;
}

.landing-page .plan-list{
  margin: 0;
  padding-left: 18px;
}

.landing-page .plan-list li{ margin: 8px 0; }

/* Forms: inputs should be long, buttons compact */
.landing-page .auth-form{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.landing-page .auth-input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--text);
}

.landing-page .auth-button{
  width: auto;
  align-self: flex-start;
  padding: 10px 14px;
  border-radius: 12px;
}

/* Between sections text */
.landing-page .landing-between{
  margin: 10px 2px 2px;
  line-height: 1.6;
}

.landing-page .landing-between p{
  margin: 10px 0;
}

.landing-page .landing-muted{
  opacity: 0.85;
}

/* Responsive */
@media (max-width: 720px){
  .landing-page .page{ max-width: 92vw; }
  .landing-page .landing-hero h1{ font-size: 26px; }
}


/* Auth messages (landing only) */
body.landing-page .auth-error{border:1px solid #fecaca;background:#fee2e2;color:#7f1d1d;padding:10px 12px;border-radius:12px;margin:10px 0;}
body.landing-page .auth-success{border:1px solid #bbf7d0;background:#dcfce7;color:#14532d;padding:10px 12px;border-radius:12px;margin:10px 0;}


/* Landing signup checkbox */
body.landing-page .auth-check{display:flex;gap:10px;align-items:flex-start;margin:10px 0 14px 0;font-size:14px;}
body.landing-page .auth-check input{margin-top:3px;}
body.landing-page .auth-check a{text-decoration:underline;}