@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Outfit:wght@600;700;800&display=swap";

/* =========================
   Design tokens / reset
   ========================= */
:root{
  --blue-600:#2AAAE2;
  --navy:#0F2C3C;
  --green:#57a086;
  --ink:#0f172a;
  --muted:#475569;
  --bg:#fff;
  --bg-2:#F4F8FA;
  --line:#e2e8f0;
  --radius:18px;
  --shadow:0 12px 30px #0f2c3c1a;
}

*{ box-sizing:border-box }
html,body{ margin:0; overflow-x:hidden }

body{
  font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--ink);
  background:var(--bg);
}

h1,h2,h3,.hero-title,.brand-hed{
  font-family:'Outfit','DM Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

a{ color:var(--blue-600); text-decoration:none }
a:hover{ text-decoration:underline }

/* =========================
   Buttons
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:2px solid var(--navy);
  border-radius:999px;
  padding:12px 18px;
  font-weight:800;
  background:var(--navy);
  color:#fff;
  box-shadow:var(--shadow);
  cursor:pointer;
}
.btn:hover,.btn:focus-visible{
  filter:brightness(1.05);
  background:#0b2330;
  border-color:#0b2330;
  color:#fff;
  text-decoration:none;
}
.btn.outline{
  background:transparent;
  color:var(--navy);
  border-color:var(--navy);
  box-shadow:none;
}
.btn.outline:hover,.btn.outline:focus-visible{
  background:var(--navy);
  color:#fff;
}

/* navbar buttons inherit the same style */
.navbar .btn{ background:var(--navy); color:#fff; border:2px solid var(--navy) }

/* =========================
   Header
   ========================= */
header{
  position:sticky;
  top:0;
  background:#ffffffd9;
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
  z-index:10;
}
.navbar .nav-link{ color:var(--navy); font-weight:700 }
.navbar .nav-link:hover,.navbar .nav-link:focus{ color:var(--blue-600); text-decoration:none }

/* =========================
   Hero
   ========================= */
#getstart{ color:#fff }

.hero{
  padding:72px 0 32px;
  background:
    radial-gradient(1200px 400px at 60% -120px,#2aaae226,transparent),
    linear-gradient(180deg,var(--bg),var(--bg));
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:center;
}
.hero-title{
  font-weight:800;
  font-size:clamp(32px,4.5vw,56px);
  line-height:1.02;
  margin:10px 0 12px;
}
.subhead{
  font-size:clamp(16px,2.2vw,20px);
  color:var(--muted);
  margin:0 0 22px;
}
.hero-right{ display:grid; gap:14px }

.brand-bar{ display:flex; align-items:center; gap:14px }

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; font-size:12px;
  background:#2aaae21f; color:var(--navy);
}
.pill{
  font-size:12px; padding:4px 10px; border:1px solid var(--line);
  border-radius:999px; color:var(--muted);
}

/* =========================
   Generic UI
   ========================= */
.card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.section{ padding:64px 0 }
.section h2{ font-size:clamp(24px,3.2vw,36px); margin:0 0 10px }
.section p.lead{ color:var(--muted); margin:0 0 26px }

/* grid helpers */
.features{ display:grid; grid-template-columns:1fr; gap:18px }
.two-col{ display:grid; grid-template-columns:1fr; gap:24px }

/* CTA band & footer */
.cta-band{ background:var(--bg-2); border-top:1px solid var(--line); padding:40px 0 }
footer{ border-top:1px solid var(--line); padding:26px 0; color:var(--muted); font-size:14px }

/* =========================
   Forms
   ========================= */
form{ display:grid; gap:10px }
input,textarea,select{
  width:100%; padding:12px 14px;
  border:2px solid var(--navy); border-radius:12px;
  background:var(--bg-2); color:var(--ink);
}
input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px #0f2c3c1a;
}
label{ font-weight:700; font-size:14px }
.hint{ font-size:12px; color:var(--muted) }
.success,.error{ display:none; margin-top:10px; padding:10px; border-radius:10px }
.success{ background:#16a34a1a; color:#16a34a; border:1px solid #16a34a40 }
.error{ background:#ef44441a; color:#ef4444; border:1px solid #ef444440 }

/* =========================
   Why Pathbuilder cards
   ========================= */
.why-stack{ display:grid; gap:14px }
.why-card{
  background:#fff;
  border:1px solid var(--line);
  border-left:6px solid var(--blue-600);
  border-radius:14px;
  padding:16px 16px 14px;
  box-shadow:var(--shadow);
}
.why-card:nth-child(2),
#features .col:nth-child(even) .card,
#testimonials .row .col-md-4:nth-child(even) .card,
#testimonialsCarousel .carousel-item:nth-child(even) figure{
  border-left-color:var(--green);
}
.why-card h3{ margin:4px 0 8px; font-weight:800; color:var(--navy) }
.why-card p{ margin:0 0 8px }
.why-card p:last-child{ margin-bottom:0 }

/* sticky tool form (right column) */
.float-form{
  position:sticky; top:92px; align-self:start;
  max-width:520px; margin-left:auto;
}

/* =========================
   Features (match Why-card look)
   ========================= */
/* helper 16:10 aspect */
.ratio-16x10{ --bs-aspect-ratio:62.5% }

.feature-thumb{
  background:#fff;
  border:1px solid var(--line);
  border-top-left-radius:.5rem;
  border-top-right-radius:.5rem;
}

#features .col .card{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-left:6px solid var(--blue-600) !important;
  border-radius:14px !important;
  box-shadow:var(--shadow);
  background-image:none !important;
}

/* =========================
   How it works
   ========================= */
#how-it-works .list-group{
  --bs-list-group-bg:transparent;
  --bs-list-group-color:inherit;
  --bs-list-group-border-color:#0f2c3c14;
}
#how-it-works .list-group-item{
  background-color:transparent;
  border-left:0; border-right:0;
  padding-left:0; padding-right:0;
}

/* =========================
   Testimonials
   ========================= */
#testimonialsCarousel .carousel-inner{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:0 3.5rem;
  --bs-carousel-control-width:3rem;
}
#testimonialsCarousel blockquote{ font-size:18px; line-height:1.6 }
#testimonialsCarousel .blockquote-footer{ color:var(--navy); font-weight:700 }

/* Quote icon (desktop grid + mobile carousel) */
#testimonials .row .col-md-4 .card,
#testimonialsCarousel .carousel-item figure{
  position:relative; overflow:hidden;
}
#testimonials .row .col-md-4 .card::after,
#testimonialsCarousel .carousel-item figure::after{
  content:"“";
  position:absolute; right:12px; bottom:-6px;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700; font-size:56px; line-height:1;
  color:var(--blue-600); opacity:.14; pointer-events:none;
}
/* even items use green to match accent (handled above via nth-child) */

/* =========================
   Pricing (modern)
   ========================= */
.pricing.modern{
  display:grid; grid-template-columns:1fr; gap:24px;
}
.plan{
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px 22px;
  text-align:left;
  background:#fff;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
}
.plan h3{ font-size:1.5rem; margin-bottom:4px; color:var(--navy) }
.plan .tagline{ color:var(--muted); font-size:.95rem; margin-bottom:18px }
.plan .price-row{ display:flex; align-items:baseline; gap:6px; margin-bottom:4px }
.plan .price{ font-size:2.5rem; font-weight:800; color:var(--navy) }
.plan .unit{ color:var(--muted); font-size:.9rem }
.plan .as-low{ font-size:.85rem; color:var(--green); margin-bottom:16px; font-weight:600 }
.plan .btn{ width:100%; justify-content:center; margin-bottom:20px }
.plan h4{ font-size:1rem; font-weight:700; margin:10px 0; color:var(--navy) }
.plan ul.features{ list-style:none; padding:0; margin:0 }
.plan ul.features li{
  margin:8px 0; padding-left:24px; position:relative; font-size:.95rem;
}
.plan ul.features li::before{
  content:"✓"; color:var(--blue-600); font-weight:700; position:absolute; left:0;
}
.plan.highlight{
  border:2px solid var(--navy);
  background:#f9fbfd;
  transform:scale(1.03);
  z-index:2;
}
.plan.highlight .btn.primary{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}

/* =========================
   Hero (product) carousel
   ========================= */
#heroCarousel{ --bs-carousel-control-width:3rem }

/* =========================
   Responsive
   ========================= */
@media (min-width:820px){
  .hero-grid{ grid-template-columns:1.05fr .95fr }
  .features{ grid-template-columns:repeat(3,1fr) }
  .two-col{ grid-template-columns:1.1fr .9fr }
}

@media (min-width:820px){
  .pricing.modern{ grid-template-columns:repeat(3,1fr) }
}

@media (max-width:767.98px){
  .plan.highlight{ transform:none }
}

/* brand image sizing (safe default if inline styles are removed) */
.navbar-brand img{ height:auto; max-height:44px; max-width:65vw }
/* ============= FIXES (append to end) ============= */

/* 1) Alternate the left accent stripe (Features) */
#features .row > .col .card{
  border-left: 6px solid var(--blue-600) !important;
}
#features .row > .col:nth-child(even) .card{
  border-left-color: var(--green) !important;
}

/* 1b) Ensure Why Pathbuilder alternates cleanly */
#whypb .why-card{
  border-left: 6px solid var(--blue-600) !important;
}
#whypb .why-card:nth-child(even){
  border-left-color: var(--green) !important;
}

/* 2) Pricing lists should be stacked, not grid */
.pricing.modern .plan ul.features{
  display: block !important;   /* override any generic .features grid */
  list-style: none;
  padding: 0;
  margin: 0;
}
.pricing.modern .plan ul.features li{
  margin: 8px 0;
  padding-left: 24px;
  position: relative;
}
.pricing.modern .plan ul.features li::before{
  content: "✓";
  color: var(--blue-600);
  font-weight: 700;
  position: absolute;
  left: 0;
}
/* === Testimonials: restore/alternate left accent stripes === */

/* Desktop/tablet grid: force a left stripe and re-enable the border even if .border-0 is present */
#testimonials .row > [class*="col-"] > .card,
#testimonials .row > [class*="col-"] > figure.card{
  background:#fff !important;
  border:1px solid var(--line) !important;       /* override .border-0 */
  border-left:6px solid var(--blue-600) !important;
  border-radius:14px !important;
  box-shadow:var(--shadow);
}

/* Alternate every second testimonial to green */
#testimonials .row > [class*="col-"]:nth-child(even) > .card,
#testimonials .row > [class*="col-"]:nth-child(even) > figure.card{
  border-left-color:var(--green) !important;
}

/* Mobile carousel: figures don’t have .card, so target the element directly */
#testimonialsCarousel .carousel-item figure{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-left:6px solid var(--blue-600) !important;
  border-radius:14px !important;
  box-shadow:var(--shadow);
}
#testimonialsCarousel .carousel-item:nth-child(even) figure{
  border-left-color:var(--green) !important;
}
/* === Section alternation backgrounds === */
.section.alt {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* === Fixed header/navbar === */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030; /* above content and Bootstrap carousels */
}

/* Add body padding so content doesn't hide under the fixed header */
body {
  padding-top: 72px; /* adjust to your header height */
}
.navbar .btn-login {
  background: transparent;
  border: 2px solid var(--navy);
  color: var(--navy);
  font-weight: 700;
}
.navbar .btn-login:hover {
  background: var(--navy);
  color: #fff;
}

.em-blue  { color: var(--blue-600); }
.em-green { color: var(--green);    }

/* Text-only hero slide */
.hero-text-slide {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: clamp(14px, 2.2vw, 24px);
  background:
    radial-gradient(600px 260px at 80% -80px, rgba(42,170,226,.12), transparent 70%),
    linear-gradient(180deg, #fff, #fff);
}

.hero-text-title {
  margin: 4px 0 10px;
  font-weight: 800;
  color: var(--navy);
}


/* Make the bullets larger on the text-only hero slide */
.hero-text-bullets {
  font-size: clamp(16px, 1.6vw, 20px);  /* scales smoothly */
  line-height: 1.5;
  margin: 0 0 12px 0;
  padding-left: 20px;                   /* keeps bullets aligned */
}
.hero-text-bullets li { margin: 6px 0; }

/* Optional: enlarge the bullet marker too */
.hero-text-bullets li::marker { font-size: 1.15em; }

/* (Optional) give desktop a tad more size */
@media (min-width: 992px) {
  .hero-text-bullets { font-size: 1.25rem; }
}

/* Fill the ratio box and center content */
.hero-text-slide {
  height: 100%;
  display: grid;
  place-items: center;         /* centers the scaled inner block */
  padding: clamp(10px, 2vw, 20px);
  overflow: hidden;            /* hide any rounding artifacts */
  background:
    radial-gradient(600px 260px at 80% -80px, rgba(42,170,226,.12), transparent 70%),
    linear-gradient(180deg, #fff, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero-text-inner {
  transform-origin: top center; /* scale from the top, keep centered */
  will-change: transform;
  max-width: 100%;
}

.hero-text-slide.scaled .hero-text-title { margin-bottom: 6px; }
.hero-text-slide.scaled .hero-text-bullets { margin-bottom: 8px; }

.modal-content { background: #fff; }
#overview .card { overflow: hidden; }

.icon-play {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}