/* styles.css - modern, minimal, responsive */
:root{
  --bg:#f7fbfc;
  --card:#ffffff;
  --accent1:#29b5ad;
  --accent2:#2e7bb4;
  --muted:#6b7280;
  --text:#0f172a;
  --radius:12px;
  --maxwidth:980px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Adjust this to the height of your header/nav */
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.container{max-width:var(--maxwidth);margin:32px auto;padding:24px}
.header{display:flex;align-items:center;gap:20px;margin-bottom: 32px;}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none}
.logo img{
  height:68px;
  width:auto;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(20,30,60,0.08);
  border:1px solid #e6eef2;
}
.nav{margin-left:auto;display:flex;gap:14px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:600}
.nav a:hover{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white}

.hero{background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.8)); padding:28px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(20,30,60,0.06);margin-top:18px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.hero-text{flex:1;min-width:260px}
.tag{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(41,181,173,0.12);color:var(--accent1);font-weight:700;margin-bottom:8px}
.h1{font-size:28px;margin:8px 0 6px}
.lead{color:var(--muted);margin:0 0 12px}

.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:18px}
.card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 16px rgba(20,30,60,0.04);display:flex;flex-direction:column;gap:12px}
.card h3{margin:0;font-size:18px}
.price{font-weight:800;color:var(--accent2)}
.features{color:var(--muted);font-size:14px;margin:6px 0 0}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white;text-decoration:none;font-weight:700;border:none;cursor:pointer}
.small{font-size:15px;color:var(--muted)}

.hr{height:1px;background:#e6eef2;margin:22px 0;border-radius:4px}

.footer{
  margin-top:24px;
  padding:18px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,0.6),transparent);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  box-shadow:0 2px 5px rgba(20,30,60,0.08);
  border:1px solid #e6eef2;
}
.footer .links{display:flex;gap:12px;align-items:center}
.footer a{color:var(--muted);text-decoration:none}

.contact-card{background:linear-gradient(180deg,white,transparent);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(20,30,60,0.03)}
.form-row{display:flex;gap:10px;flex-wrap:wrap}
.input,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #e6eef2;font-size:14px}
textarea{min-height:50px;resize:vertical}
@media (max-width:640px){
  .header{flex-direction:column;align-items:flex-start}
  .nav{margin-left:0}
  .hero{padding:18px}
  .footer {
    padding: 12px 12px; /* smaller top/bottom padding */
  }
 
}


 /* --- Footer & Layout Specific Styles --- */
    .footer {
      background-color: #f9f9f9;
      padding: 16px;
      box-sizing: border-box;
    }

     .footer .links {
      flex-direction: column; /* stack links */
      align-items: center;    /* center links horizontally */
      gap: 8px;               /* smaller vertical gap */
    }

    .footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto;
    }

    .footer-brand {
      flex: 1 1 250px;
    }

    .footer-nav {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-bottom: 2px;
    }

    .footer-nav a {
      text-decoration: none;
      color: var(--muted);
      font-size: 0.9rem;
    }

    @media (max-width: 600px) {
      .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .footer-nav {
        justify-content: center;
      }

          /* Footer copyright note */
    .footer-copy {
  color: var(--muted);
  font-size: 0.95em;
  margin: 0;
  text-align: center;
    }
    }


    .checkout-grid {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 768px) {
  .checkout-grid { grid-template-columns: 1fr; }
}

.step-number {
  background: var(--accent1);
  color: white;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: bold;
  margin-right: 12px;
}

.plan-details-box {
  background: #f8fafc; /* Very light grey */
  padding: 20px;
  border-radius: 8px;
  margin: 15px 0;
  border-left: 4px solid var(--accent1);
}

.stripe-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  font-size: 1.1rem;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.summary-line.total {
  font-weight: bold;
  border-top: 1px solid #eee;
  margin-top: 8px;
  font-size: 1.2rem;
}




/* Layout Strategy */
.contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr; /* Form is wider than sidebar */
  gap: 40px;
  margin-top: 32px;
}

@media (max-width: 850px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* Form Styling */
.input-wrapper {
  margin-bottom: 20px;
}

.input-wrapper label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: var(--text-dark);
}

.form-group-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 500px) {
  .form-group-row { grid-template-columns: 1fr; }
}

/* The Select Input - Much better for sorting inquiries */
.select-input {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* Subtle Trust Elements */
.privacy-note {
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.contact-link {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.contact-link strong { display: block; font-size: 0.85rem; }
.contact-link p { font-size: 0.9rem; margin: 0; color: var(--accent1); }




/* 1. Make the card act as the anchor */
.pinned-note {
  position: relative;
  background-color: #fef3c7; /* Optional: slight yellow 'sticky note' tint */
  transform: rotate(-1deg);   /* Optional: slight tilt for realism */
  box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
  padding: 20px;
}

/* 2. Position the pin in the top-center or top-right */
.push-pin-index {
  position: absolute;
  top: -22px;        /* Adjusted to pop a bit higher */
  left: 50%;         /* Move starting point to middle of card */
  transform: translateX(-50%); /* Pull back by exactly half its own width */
  z-index: 10;
  width: 40px;       /* Match your image width */
  height: auto;
  line-height: 0;    /* Removes extra spacing below image */
}

.sticky-yellow {
  background-color: #fef3c7; /* Soft yellow base */
  border-left: 1px solid #fde68a; /* Subtle depth on the side */
  background-image: linear-gradient(135deg, #fef3c7 80%, #fde68a 100%); /* Adds a very slight paper texture effect */
  color: #92400e; /* Dark amber text for better readability than pure black */
}

/* Mobile fix: remove tilt on small screens if it looks messy */
@media (max-width: 768px) {
  .pinned-note {
    transform: none;
    margin-top: 20px;
  }
}

/* Container for the text and the floating note */
  .text-wrap-container {
    overflow: hidden; /* Clears floats */
    padding: 40px 0;
  }

  /* The Sticky Note - Now Floating */
  .sticky-note {
    float: right;
    width: 300px;
    margin: 0 0 30px 40px; /* Space around the note: 40px left for text clearance */
    background-color: #fef3c7;
    padding: 30px;
    border-radius: 2px;
    box-shadow: 8px 8px 0px rgba(0,0,0,0.05);
    position: relative;
    transform: rotate(1.5deg);
    border-left: 5px solid #fde68a;
  }

  .sticky-note strong {
    display: block;
    color: #92400e;
    margin-bottom: 12px;
    font-size: 1.1rem;
    text-transform: uppercase;
  }

  .sticky-note p {
    color: #92400e;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
    font-style: italic;
  }

  .push-pin {
    position: absolute;
    top: -20px;
    left: 20px;
    width: 35px;
    z-index: 2;
  }

  .emphasized-text {
    color: var(--accent1);
    font-weight: 600;
  }

  .cta-banner {
    background: linear-gradient(135deg, #006064 0%, #00838f 100%);
    color: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    margin: 40px 0;
    clear: both; /* Ensures it starts below any floats */
  }

  /* Mobile: Stack them again so text isn't too squished */
  @media (max-width: 600px) {
    .sticky-note {
      float: none;
      width: 100%;
      margin: 20px 0;
      transform: none;
    }
  }


  .disclaimer {
  font-size: 0.75rem; /* Small but readable */
  color: #6b7280;    /* Muted gray so it doesn't pop */
  text-align: center;
  margin-top: 24px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}

  .success-card {
    background-color: #fef3c7;
    border-left: 5px solid #fde68a;
    padding: 30px;
    text-align: center;
    border-radius: 4px;
    box-shadow: 8px 8px 0px rgba(0,0,0,0.05);
    margin: 20px 0;
    position: relative;
    animation: slideIn 0.4s ease-out;
}

.success-card h2 {
    color: #92400e;
    margin-bottom: 10px;
}

.success-card p {
    color: #92400e;
    margin-bottom: 0;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.checkout-list {
  padding-left: 1.2rem;
  margin: 15px 0;
  list-style-type: disc;
  color: #555;
  line-height: 1.6;
}

.checkout-list li {
  margin-bottom: 8px;
  font-size: 14px;
}

.price-tag {
  font-size: 24px;
  color: #2c3e50;
  margin-top: 10px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b; /* Subtle slate gray */
  text-decoration: none; /* Removes the underline */
  font-size: 14px;
  margin-top: 4px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.back-link:hover {
  color: #3b82f6; /* Changes to a nice "action" blue on hover */
  transform: translateX(-2px); /* Slight nudge to the left to emphasize "back" */
}

.back-link span {
  font-size: 16px;
  line-height: 1;
}