/* Landing page 2 styles (introduction_2).
   Follows the design language of single.css ('/' and '/profile'):
   blue gradient background, serif, #95b1df3b outset/inset borders,
   no border-radius, no box-shadow.
   CSP: style-src 'self' — keep all styles in this file, no inline styles. */

:root {
  --lp2-bg: linear-gradient(#2c72ff, #99c2bc);
  --lp2-bg-mobile: linear-gradient(#1764ff, #99c2bc);
  --lp2-accent: #093088;
  --lp2-border-color: #95b1df3b;
  --lp2-btn-bg: #22222211;
  --lp2-muted: #00000099;
  --lp2-border-thin: max(0.3vh, 2px);
  --lp2-border-thick: max(0.4vh, 3px);
}

body.lp2 {
  margin: 0;
  min-height: 100vh;
  background-image: var(--lp2-bg);
  font-family: 'serif';
  color: #000000;
  line-height: 1.6;
}

body.lp2 h1,
body.lp2 h2,
body.lp2 h3 {
  color: var(--lp2-accent);
  line-height: 1.3;
  font-weight: bold;
}
body.lp2 h1 { font-size: 2.1rem; margin: 0 0 1rem; }
body.lp2 h2 { font-size: 1.7rem; text-align: center; margin: 0 0 1rem; }
body.lp2 h3 { font-size: 1.15rem; margin: 0 0 0.5rem; }

body.lp2 a {
  color: var(--lp2-accent);
}

.lp2-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Buttons (echo .common_button / .auth_background button) ---------- */

.lp2-btn {
  display: inline-block;
  color: #000000;
  font-size: medium;
  font-family: 'serif';
  text-decoration: none;
  text-align: center;
  background-color: var(--lp2-btn-bg);
  border: var(--lp2-border-thin) outset var(--lp2-border-color);
  padding: 0.45rem 1.2rem;
}
.lp2-btn:active {
  background: #ffffff30;
}
.lp2-btn-primary {
  font-weight: bold;
  background-color: #22222222;
  border-width: var(--lp2-border-thick);
}

/* ---------- Header ---------- */

.lp2-header {
  border-bottom: var(--lp2-border-thin) outset var(--lp2-border-color);
}
.lp2-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.lp2-brand {
  font-size: 1.35rem;
  font-weight: bold;
  color: var(--lp2-accent);
  text-decoration: none;
}

/* ---------- Hero ---------- */

.lp2-hero {
  padding: 3.5rem 0 1rem;
}
.lp2-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
.lp2-hero-sub {
  font-size: 1.1rem;
  margin: 0 0 1.2rem;
}
.lp2-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.lp2-badges li {
  border: var(--lp2-border-thin) inset var(--lp2-border-color);
  padding: 0.15rem 0.8rem;
  font-size: 0.95rem;
}
.lp2-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.lp2-cta-note {
  margin: 0.8rem 0 0;
  font-size: 0.9rem;
  color: var(--lp2-muted);
}
.lp2-hero-video {
  width: 100%;
  display: block;
  border: var(--lp2-border-thick) inset var(--lp2-border-color);
  box-sizing: border-box;
}
.lp2-hero-video-caption {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--lp2-muted);
  text-align: center;
}

/* ---------- Section panels (echo .account_body: outset frame on the gradient) ---------- */

.lp2-panel {
  border: var(--lp2-border-thick) outset var(--lp2-border-color);
  padding: 2.2rem 2.5rem;
  margin: 3rem auto;
  box-sizing: border-box;
}
.lp2-section-lead {
  text-align: center;
  margin: 0 auto 1.8rem;
  max-width: 46rem;
}

/* Inner cards (echo .describe_element: inset, sunken) */
.lp2-card {
  border: var(--lp2-border-thick) inset var(--lp2-border-color);
  padding: 1rem 1.5rem;
  box-sizing: border-box;
}

/* ---------- Before / after comparison ---------- */

.lp2-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.8rem;
  align-items: start;
}
.lp2-compare figure {
  margin: 0;
}
.lp2-compare video {
  width: 100%;
  display: block;
}
.lp2-compare-label {
  display: block;
  font-weight: bold;
  color: var(--lp2-accent);
  margin-top: 0.6rem;
}
.lp2-compare-detail {
  display: block;
  font-size: 0.9rem;
  color: var(--lp2-muted);
}

/* ---------- Timing table ---------- */

.lp2-timing-wrapper {
  border: var(--lp2-border-thick) inset var(--lp2-border-color);
  width: fit-content;
  margin: 0 auto;
  padding: 0.8rem 1.5rem;
}
.lp2-timing {
  border-collapse: collapse;
}
.lp2-timing caption {
  font-weight: bold;
  color: var(--lp2-accent);
  padding-bottom: 0.5rem;
}
.lp2-timing td {
  padding: 0.3rem 1.2rem 0.3rem 0;
  border-bottom: 1px solid var(--lp2-border-color);
}
.lp2-timing td:last-child {
  text-align: right;
  padding-right: 0;
  white-space: nowrap;
}
.lp2-timing tfoot td {
  font-weight: bold;
  border-bottom: none;
}
.lp2-fineprint {
  margin: 1.2rem 0 0;
  font-size: 0.9rem;
  color: var(--lp2-muted);
  text-align: center;
}

/* ---------- Steps ---------- */

.lp2-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: lp2-step;
}
.lp2-steps li {
  counter-increment: lp2-step;
  border: var(--lp2-border-thick) inset var(--lp2-border-color);
  padding: 1rem 1.5rem;
}
.lp2-steps h3::before {
  content: counter(lp2-step) ". ";
}
.lp2-steps p {
  margin: 0;
}

/* ---------- Why cards ---------- */

.lp2-why {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
}
.lp2-why-card p {
  margin: 0;
}

/* ---------- Pricing ---------- */

.lp2-free-card {
  border: var(--lp2-border-thick) inset var(--lp2-border-color);
  text-align: center;
  padding: 1.2rem 1.5rem;
  margin-bottom: 1.8rem;
}
.lp2-free-card p {
  margin: 0.3rem 0 1rem;
}
.lp2-plans {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
.lp2-plan {
  border: var(--lp2-border-thick) inset var(--lp2-border-color);
  padding: 1.2rem 1.5rem;
  box-sizing: border-box;
}
/* Featured plan pops out (outset) while the others sit inset */
.lp2-plan-featured {
  border-style: outset;
}
.lp2-plan-tag {
  display: block;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--lp2-accent);
  margin-bottom: 0.4rem;
}
.lp2-plan-spec {
  font-size: 0.9rem;
  color: var(--lp2-muted);
  margin: 0 0 0.8rem;
}
.lp2-plan-price {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--lp2-accent);
  margin: 0;
}
.lp2-plan-price span {
  font-size: 0.9rem;
  font-weight: normal;
  color: var(--lp2-muted);
}
.lp2-plan-after {
  font-size: 0.9rem;
  color: var(--lp2-muted);
  margin: 0.2rem 0 0.8rem;
}
.lp2-plan ul {
  margin: 0;
  padding-left: 1.2rem;
}
.lp2-plan li {
  margin: 0.3rem 0;
}
.lp2-pricing-notes {
  margin: 1.8rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.95rem;
}
.lp2-pricing-notes li {
  margin: 0.3rem 0;
}
.lp2-pricing-cta {
  text-align: center;
  margin-top: 1.8rem;
}

/* ---------- FAQ ---------- */

.lp2-faq details {
  border: var(--lp2-border-thick) inset var(--lp2-border-color);
  margin-bottom: 1rem;
  padding: 0.7rem 1.2rem;
}
.lp2-faq summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--lp2-accent);
}
.lp2-faq p {
  margin: 0.7rem 0 0.2rem;
}

/* ---------- Final CTA ---------- */

.lp2-final {
  text-align: center;
  padding: 1rem 0 3rem;
}
.lp2-final p {
  max-width: 40rem;
  margin: 0 auto 1.5rem;
}
.lp2-final .lp2-cta-row {
  justify-content: center;
}

/* ---------- Footer ---------- */

.lp2-footer {
  border-top: var(--lp2-border-thin) outset var(--lp2-border-color);
}
.lp2-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  font-size: 0.9rem;
}
.lp2-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.lp2-footer a {
  color: var(--lp2-accent);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .lp2-hero-grid,
  .lp2-compare,
  .lp2-steps,
  .lp2-why,
  .lp2-plans {
    grid-template-columns: 1fr;
  }
  .lp2-hero {
    padding-top: 2.5rem;
  }
  .lp2-panel {
    padding: 1.5rem 1.2rem;
  }
}

@media (max-width: 600px) {
  body.lp2 {
    background-image: var(--lp2-bg-mobile);
  }
  body.lp2 h1 { font-size: 1.6rem; }
  body.lp2 h2 { font-size: 1.4rem; }
  .lp2-header-inner {
    flex-direction: column;
    gap: 0.6rem;
  }
  .lp2-container {
    padding: 0 1rem;
  }
  .lp2-timing-wrapper {
    width: auto;
  }
}