/* ===== MAXIM88 REGISTER — Site 3 of 9 =====
   Unique: Sticky left sidebar + vertical timeline guide layout
   Accent: Teal #caa255 | Base: Forest Green #19723c + White
   Font pair: Poppins (headings) + Nunito (body)
   Max-width: 900px narrow guide style
============================================= */

/* --- Reset & Base --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --teal:#caa255;
  --teal-dark:#b08d45;
  --teal-light:#d4b06a;
  --forest:#19723c;
  --forest-dark:#156835;
  --white:#fff;
  --off-white:#F5FAFA;
  --gray-100:#f0f5f5;
  --gray-200:#e0eaea;
  --gray-600:#555;
  --gray-800:#222;
  --sidebar-w:260px;
  --header-h:56px;
}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'Nunito',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--gray-800);
  background:var(--off-white);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Poppins',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.25;
  font-weight:700;
}
a{color:var(--teal);text-decoration:none;transition:color .2s}
a:hover{color:var(--teal-dark)}
img{max-width:100%;height:auto;display:block}
ul,ol{padding-left:1.25rem}

/* --- Skip to content --- */
.skip-link{
  position:absolute;top:-100%;left:1rem;
  background:var(--teal);color:#fff;padding:.5rem 1rem;
  border-radius:0 0 6px 6px;z-index:9999;font-weight:600;
}
.skip-link:focus{top:0}

/* --- Sidebar Navigation (Desktop) --- */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;
  width:var(--sidebar-w);
  background:var(--forest-dark);
  color:#fff;
  z-index:1000;
  display:flex;flex-direction:column;
  transition:transform .3s ease;
  overflow-y:auto;
}
.sidebar__logo{
  padding:1.5rem 1.25rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.sidebar__logo a{
  font-family:'Poppins',system-ui,sans-serif;
  font-size:1.25rem;font-weight:800;color:#fff;
  display:flex;align-items:center;gap:0;
}
.sidebar__logo span{color:var(--teal-light);font-weight:600}
.sidebar__nav{flex:1;padding:1rem 0}
.sidebar__nav ul{list-style:none;padding:0}
.sidebar__nav li{}
.sidebar__nav a{
  display:flex;align-items:center;gap:.65rem;
  padding:.7rem 1.25rem;
  color:rgba(255,255,255,.8);
  font-size:.92rem;font-weight:600;
  border-left:3px solid transparent;
  transition:all .2s;
}
.sidebar__nav a:hover,
.sidebar__nav a.active{
  color:#fff;
  background:rgba(255,255,255,.07);
  border-left-color:var(--teal-light);
}
.sidebar__nav a .nav-icon{
  width:18px;text-align:center;flex-shrink:0;
  font-size:1rem;
}
.sidebar__cta{
  padding:1.25rem;
  border-top:1px solid rgba(255,255,255,.12);
}
.sidebar__cta .btn{
  width:100%;text-align:center;
  padding:.7rem 1rem;
  background:var(--teal);color:#fff;
  border-radius:8px;font-weight:700;
  font-size:.95rem;display:block;
  transition:background .2s;
}
.sidebar__cta .btn:hover{background:var(--teal-dark)}

/* Mobile hamburger */
.mobile-header{
  display:none;
  position:fixed;top:0;left:0;right:0;
  height:var(--header-h);
  background:var(--forest-dark);
  z-index:999;
  align-items:center;
  justify-content:space-between;
  padding:0 1rem;
}
.mobile-header__logo{
  font-family:'Poppins',system-ui,sans-serif;
  font-size:1.1rem;font-weight:800;color:#fff;
}
.mobile-header__logo span{color:var(--teal-light);font-weight:600}
.hamburger{
  background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;
  padding:6px;
}
.hamburger span{
  width:24px;height:2.5px;background:#fff;
  border-radius:2px;transition:all .3s;display:block;
}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.mobile-header .nav-btns{
  display:flex;gap:.4rem;padding:0;flex:1;margin-left:.75rem;
}
.mobile-header .nav-btns a{
  flex:1;text-align:center;
  padding:.4rem .5rem;
  border-radius:6px;font-weight:700;font-size:.8rem;
  text-decoration:none;transition:background .2s;
}

.sidebar-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.5);z-index:998;
}
.sidebar-overlay.active{display:block}

/* --- Main content area --- */
.main-content{
  margin-left:var(--sidebar-w);
  min-height:100vh;
  display:flex;flex-direction:column;
}

/* --- Progress indicator --- */
.progress-bar{
  position:sticky;top:0;z-index:100;
  background:var(--gray-200);
  height:4px;
}
.progress-bar__fill{
  height:100%;
  background:linear-gradient(90deg,var(--teal),var(--teal-light));
  width:0;
  transition:width .3s;
}

/* --- Hero section --- */
.hero{
  background:linear-gradient(135deg,var(--forest) 0%,var(--forest-dark) 100%);
  color:#fff;
  padding:3.5rem 2rem 3rem;
  text-align:center;
}
.hero__container{max-width:900px;margin:0 auto}
.hero h1{font-size:2.2rem;margin-bottom:.75rem}
.hero h1 .accent{color:var(--teal-light)}
.hero__subtitle{font-size:1.1rem;opacity:.9;margin-bottom:2.5rem;max-width:600px;margin-left:auto;margin-right:auto}

/* 3-step hero summary */
.hero-steps{
  display:flex;gap:2rem;justify-content:center;
  flex-wrap:wrap;margin-bottom:2rem;
}
.hero-step{
  display:flex;flex-direction:column;align-items:center;
  gap:.5rem;flex:0 0 auto;
}
.hero-step__number{
  width:64px;height:64px;
  border-radius:50%;
  background:var(--teal);
  display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',system-ui,sans-serif;
  font-size:1.6rem;font-weight:800;
  border:3px solid rgba(255,255,255,.3);
}
.hero-step__label{font-weight:700;font-size:1rem}
.hero-step__desc{font-size:.85rem;opacity:.8;max-width:140px}

/* Step connectors in hero */
.hero-steps .step-arrow{
  display:flex;align-items:center;
  font-size:1.5rem;opacity:.5;
  padding-top:.5rem;
}

.hero .btn-cta{
  display:inline-block;
  background:var(--teal);color:#fff;
  padding:.85rem 2.2rem;
  border-radius:8px;
  font-weight:700;font-size:1.05rem;
  transition:all .2s;
  margin-top:.5rem;
}
.hero .btn-cta:hover{background:var(--teal-dark);transform:translateY(-1px)}

/* --- Breadcrumbs --- */
.breadcrumbs{
  padding:.75rem 2rem;
  background:var(--white);
  border-bottom:1px solid var(--gray-200);
  font-size:.85rem;color:var(--gray-600);
}
.breadcrumbs__container{max-width:900px;margin:0 auto}
.breadcrumbs a{color:var(--teal)}
.breadcrumbs span{margin:0 .35rem;opacity:.5}

/* --- Content container --- */
.content{
  max-width:900px;
  margin:0 auto;
  padding:2.5rem 2rem 3rem;
  flex:1;
}

/* --- Section headings --- */
.section-title{
  font-size:1.6rem;
  color:var(--forest);
  margin-bottom:1.5rem;
  padding-bottom:.75rem;
  border-bottom:3px solid var(--teal);
  display:inline-block;
}

/* --- Vertical timeline --- */
.timeline{position:relative;padding-left:3rem;margin:2rem 0}
.timeline::before{
  content:'';
  position:absolute;left:14px;top:0;bottom:0;
  width:3px;
  background:linear-gradient(180deg,var(--teal),var(--teal-light));
  border-radius:2px;
}
.timeline-step{
  position:relative;
  margin-bottom:2rem;
  background:var(--white);
  border-left:4px solid var(--teal);
  border-radius:0 10px 10px 0;
  padding:1.5rem 1.75rem;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:box-shadow .2s;
}
.timeline-step:hover{box-shadow:0 4px 16px rgba(0,0,0,.1)}
.timeline-step::before{
  content:attr(data-step);
  position:absolute;
  left:-3rem;top:1.2rem;
  width:30px;height:30px;
  background:var(--teal);
  color:#fff;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',system-ui,sans-serif;
  font-size:.85rem;font-weight:700;
  border:3px solid var(--off-white);
  z-index:1;
  /* flex centering hack for pseudo-elements */
  line-height:24px;text-align:center;
}
.timeline-step h3{
  color:var(--forest);
  font-size:1.15rem;
  margin-bottom:.5rem;
}
.timeline-step p{color:var(--gray-600);font-size:.95rem}

/* --- Info callout boxes --- */
.info-box{
  background:var(--white);
  border:2px solid var(--teal);
  border-radius:10px;
  padding:1.25rem 1.5rem;
  margin:1.5rem 0;
  display:flex;gap:1rem;
  align-items:flex-start;
}
.info-box__icon{
  flex-shrink:0;
  width:36px;height:36px;
  background:var(--teal);
  color:#fff;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:800;
  font-family:'Poppins',system-ui,sans-serif;
}
.info-box__text{font-size:.93rem;color:var(--gray-600)}
.info-box__text strong{color:var(--gray-800)}

/* --- Cards (timeline style) --- */
.card{
  background:var(--white);
  border-left:4px solid var(--teal);
  border-radius:0 10px 10px 0;
  padding:1.5rem 1.75rem;
  margin-bottom:1.25rem;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:all .2s;
}
.card:hover{box-shadow:0 4px 16px rgba(0,0,0,.1);transform:translateX(2px)}
.card h3{color:var(--forest);margin-bottom:.5rem;font-size:1.1rem}
.card p{color:var(--gray-600);font-size:.93rem;margin-bottom:.75rem}
.card .tag{
  display:inline-block;
  background:rgba(0,128,128,.1);
  color:var(--teal);
  padding:.2rem .6rem;
  border-radius:20px;
  font-size:.78rem;font-weight:600;
  margin-right:.35rem;
  margin-bottom:.35rem;
}

/* --- Grid layouts --- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin:1.5rem 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin:1.5rem 0}

/* --- Tables --- */
.table-wrap{overflow-x:auto;margin:1.5rem 0}
table{
  width:100%;border-collapse:collapse;
  background:var(--white);
  border-radius:10px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
thead{background:var(--forest)}
th{
  color:#fff;padding:.85rem 1rem;
  text-align:left;font-weight:600;font-size:.9rem;
  font-family:'Poppins',system-ui,sans-serif;
}
td{
  padding:.75rem 1rem;
  border-bottom:1px solid var(--gray-200);
  font-size:.9rem;
}
tbody tr:hover{background:var(--gray-100)}

/* --- Pros / Cons --- */
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:1.5rem 0}
.pros,.cons{
  background:var(--white);
  border-radius:10px;
  padding:1.25rem 1.5rem;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.pros{border-top:4px solid var(--teal)}
.cons{border-top:4px solid #cc4444}
.pros h3{color:var(--teal);margin-bottom:.75rem}
.cons h3{color:#cc4444;margin-bottom:.75rem}
.pros li,.cons li{font-size:.93rem;margin-bottom:.4rem;color:var(--gray-600)}

/* --- FAQ Accordion --- */
.faq-list{margin:1.5rem 0}
.faq-item{
  background:var(--white);
  border-left:4px solid var(--teal);
  border-radius:0 10px 10px 0;
  margin-bottom:.75rem;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  overflow:hidden;
}
.faq-question{
  padding:1rem 1.5rem;
  cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Poppins',system-ui,sans-serif;
  font-weight:600;font-size:1rem;
  color:var(--gray-800);
  background:none;border:none;width:100%;text-align:left;
  transition:background .2s;
}
.faq-question:hover{background:var(--gray-100)}
.faq-question::after{
  content:'+';
  font-size:1.3rem;font-weight:700;
  color:var(--teal);
  transition:transform .3s;
  flex-shrink:0;margin-left:1rem;
}
.faq-item.open .faq-question::after{content:'\2212'}
.faq-answer{
  max-height:0;overflow:hidden;
  transition:max-height .35s ease, padding .35s ease;
  padding:0 1.5rem;
  font-size:.93rem;color:var(--gray-600);
}
.faq-item.open .faq-answer{
  max-height:600px;
  padding:.5rem 1.5rem 1.25rem;
}

/* --- Buttons --- */
.btn{
  display:inline-block;
  padding:.7rem 1.6rem;
  border-radius:8px;
  font-weight:700;font-size:.95rem;
  transition:all .2s;cursor:pointer;
  border:none;text-align:center;
}
.btn--teal{background:var(--teal);color:#fff}
.btn--teal:hover{background:var(--teal-dark);color:#fff;transform:translateY(-1px)}
.btn--outline{
  background:transparent;
  border:2px solid var(--teal);
  color:var(--teal);
}
.btn--outline:hover{background:var(--teal);color:#fff}

/* --- Star rating --- */
.stars{color:#f4b400;font-size:1.1rem;letter-spacing:2px}

/* --- Footer --- */
.footer{
  background:var(--forest-dark);
  color:rgba(255,255,255,.8);
  padding:3rem 2rem 1.5rem;
  margin-top:auto;
}
.footer__container{
  max-width:900px;margin:0 auto;
}
.footer__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  margin-bottom:2rem;
}
.footer h4{
  color:var(--teal-light);
  font-size:1rem;
  margin-bottom:.75rem;
}
.footer ul{list-style:none;padding:0}
.footer li{margin-bottom:.4rem}
.footer a{color:rgba(255,255,255,.7);font-size:.88rem}
.footer a:hover{color:#fff}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:1.25rem;
  text-align:center;
  font-size:.82rem;
  color:rgba(255,255,255,.5);
}
.footer__bottom p{margin-bottom:.35rem}

/* --- Responsive --- */
@media(max-width:1024px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .mobile-header{display:flex}
  .main-content{margin-left:0;padding-top:var(--header-h)}
  .hero{padding:2.5rem 1.5rem 2rem}
  .hero h1{font-size:1.7rem}
}
@media(max-width:768px){
  .hero{padding:1.5rem 1rem 1.25rem}
  .hero h1{font-size:1.5rem;margin-bottom:.4rem}
  .hero__subtitle{font-size:.9rem;margin-bottom:1rem}
  .hero-steps{flex-direction:row;align-items:flex-start;gap:.5rem;margin-bottom:1rem}
  .hero-step{gap:.2rem}
  .hero-step__number{width:40px;height:40px;font-size:1rem;border-width:2px}
  .hero-step__label{font-size:.8rem}
  .hero-step__desc{font-size:.7rem;max-width:90px}
  .hero-steps .step-arrow{font-size:1rem;padding-top:.5rem}
  .hero .btn-cta{padding:.6rem 1.5rem;font-size:.9rem}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .pros-cons{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:1.5rem}
  .content{padding:1.5rem 1rem 2rem}
  .timeline{padding-left:2.5rem}
  .timeline-step::before{left:-2.5rem}
}
@media(max-width:480px){
  .hero h1{font-size:1.25rem}
  .hero-step__number{width:36px;height:36px;font-size:.9rem}
  .hero-step__desc{display:none}
  .section-title{font-size:1.3rem}
}

/* --- Utility --- */
.text-center{text-align:center}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}