/* Color system: 5 colors total
   --green (primary), --lime (accent), --white, --slate-900 (heading), --slate-600 (body) */
:root{
  --green:#15803d;
  --green-hover:#116a32; /* derived */
  --lime:#84cc16;
  --white:#ffffff;
  --slate-900:#111827;
  --slate-600:#374151;
  --radius:8px;
  --container:72rem;
  --gap:1rem;
  --gap-lg:1.5rem;
  --gap-xl:2rem;
  --border: rgba(17,24,39,0.12); /* derived from slate-900 */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height:1.6;
  color:var(--slate-600);
  background:var(--white);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Utilities */
.container{max-width:var(--container); margin-inline:auto; padding-inline:1rem}
.section{padding-block:3rem}
.row{display:flex; gap:0.75rem; flex-wrap:wrap}
.stack{display:flex; flex-direction:column; justify-content: center; gap:0.75rem}
.grid-2{display:grid; gap:var(--gap-xl)}
.grid-3{display:grid; gap:var(--gap); grid-template-columns:1fr}
.section-bar{border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);padding: 1rem;}
.space-between{display: flex;justify-content: space-between;}
@media (min-width: 768px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 768px){
    .space-between{flex-direction: column;text-align: center;align-items: center;}
    .small-screen-hidden{display:none;}
}

/* Typography */
.h1{font-size:2rem; line-height:1.2; font-weight:600; color:var(--slate-900)}
@media (min-width:768px){ .h1{font-size:3rem} }
.h2{font-size:1.5rem; font-weight:600; color:var(--slate-900)}
@media (min-width:768px){ .h2{font-size:1.875rem} }
.h3{font-size:1rem; font-weight:600; color:var(--slate-900)}
.muted{color:var(--slate-600)}
.muted-sm{color:var(--slate-600); font-size:0.95rem}
.fine{color:var(--slate-600); font-size:0.8rem}

/* Header */
.header{background:color-mix(in oklab, var(--lime) 25%, white); border-bottom:1px solid var(--border)}
.header-row{display:flex; align-items:center; justify-content:space-between; padding-block:1rem}
.brand{display:flex; align-items:center; gap:.5rem}
.brand-mark{width:32px;height:32px;border-radius:6px;background:var(--green)}
.brand-name{font-weight:600; color:var(--slate-900);font-size: 1.3rem;}
.nav{display:none; gap:1.25rem}
.nav a{font-size:.95rem; color:var(--slate-600)}
.nav a:hover{color:var(--slate-900)}
.header-cta{display:flex; align-items:center; gap:.75rem}
.link-muted{font-size:.95rem; color:var(--slate-600)}
.link-muted:hover{color:var(--slate-900)}
@media (min-width: 768px){ .nav{display:flex} }

/* Buttons */
.btn{cursor: pointer;display:inline-flex; align-items:center; justify-content:center; border-radius:8px; padding:.55rem .9rem; font-weight:600; font-size:.95rem; transition:background-color .15s, border-color .15s, color .15s}
.btn-primary{background:var(--green); color:#fff}
.btn-primary:hover{background:var(--green-hover)}
.btn-disabled{background: #aaa;cursor: not-allowed;}
.btn-outline{border:1px solid color-mix(in oklab, var(--green) 20%, white); color:var(--green); background:var(--white)}
.btn-outline:hover{background:color-mix(in oklab, var(--green) 8%, white)}
.full{width:100%}

/* Forms */
.label{font-size:.9rem; font-weight:600; color:var(--slate-900); display:block; margin-bottom:.25rem}
.input{flex:1 1 auto; min-width:0; padding:.6rem .7rem; border:1px solid var(--border); border-radius:8px; font-size:1rem}
.input:focus{outline:2px solid color-mix(in oklab, var(--lime) 50%, white); outline-offset:2px}
.error{color:#dc2626; font-size:.85rem; margin-top:.25rem}

/* Components */
.badge{display:inline-flex; width: fit-content; padding:.25rem .6rem; border-radius:999px; background:color-mix(in oklab, var(--lime) 25%, white); color:var(--green); font-size:.75rem; font-weight:600}
.card{border:1px solid var(--border); border-radius:var(--radius); padding:1rem}
.card.plan:hover{background:color-mix(in oklab, var(--lime) 25%, white);cursor: pointer;}
.img-card{padding:.5rem}
.img{border-radius:6px; width:100%; height:auto}
.intro{max-width:40rem}
.list{list-style:none; padding:0; margin:.75rem 0 0 0; display:flex; flex-direction:column; gap:.5rem; color:var(--slate-600); font-size:.95rem}
.list-plain{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; color:var(--slate-600); font-size:.95rem}
.dot{display:inline-block; width:6px; height:6px; border-radius:999px; background:var(--green); margin-right:.5rem; transform:translateY(-1px)}
.steps .step-head{display:flex; align-items:center; gap:.5rem}
.step-num{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; background:var(--green); color:#fff; font-weight:600; font-size:.9rem}

/* Pricing */
.plan{display:flex; flex-direction:column; justify-content: space-between; gap:.5rem}
.plan-top{display:flex; align-items:center; justify-content:space-between}
.plan-price{margin-top:.25rem}
.price{font-size:1.75rem; font-weight:700; color:var(--slate-900)}
.per{color:var(--slate-600); font-size:.95rem}
.plan-highlight{border-color: color-mix(in oklab, var(--green) 40%, white); box-shadow: 0 1px 0 rgba(17,24,39,0.02), 0 1px 8px rgba(17,24,39,0.05)}

/* Footer */
.footer{border-top:1px solid var(--border); background:color-mix(in oklab, var(--lime) 25%, white)}
.footer-row{display:flex; flex-direction:column; gap:.75rem;}
@media (min-width:640px){ .footer-row{flex-direction:row; align-items:center; justify-content:space-between} }

/* Accessibility helpers */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:#fff; color:var(--slate-900); border-radius:6px; border:1px solid var(--border)}

/* Modal background */
.modal-overlay {display: none;position: fixed;top: 0; left: 0;width: 100%; height: 100%;background: rgba(0, 0, 0, 0.6);justify-content: center;align-items: center;z-index: 1000;}

/* Modal box */
.modal {background: #fff;padding:1rem;padding-bottom:1.5rem; max-width: 400px;width: 100%;text-align: center;position: relative;border-radius:0.5rem;}
.modal h2 {margin-top: 0;}
.modal input[type="text"] {width: 90%;padding: 10px;margin: 10px 0;border: 1px solid #ccc;border-radius: 8px; font-size: 1rem;}
.close-btn {position: absolute;top: 8px;right: 12px;cursor: pointer;font-size: 20px;}

#recaptcha-container {display: flex;justify-content: center;margin-bottom: 0.5rem;}

.autocomplete-items {position: absolute;border: 1px solid #ccc;border-top: none;z-index: 99;background-color: white;max-height: 200px;overflow-y: auto;width: 80px;font-weight: bold;margin-left: 1.5rem;margin-top:-0.65rem;}
.autocomplete-item {padding: 8px;cursor: pointer;}
.autocomplete-item:hover {background-color: color-mix(in oklab, var(--lime) 25%, white);}
.invalid {border: 1px solid rgb(244, 181, 181)!important;}
.invalid:focus {outline: none;box-shadow: 0 0 5px 2px rgb(244, 181, 181);}

.loader {margin: 15px auto;width: 40px;height: 40px;border: 5px solid #ccc;border-top: 5px solid var(--green);border-radius: 50%;animation: spin 1s linear infinite;}
@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}

.large-card {background: #fff;border: 2px dashed #9ca3af;border-radius: 12px;padding: 2rem;color: #374151;}
.large-card h2 {margin-bottom: 1rem;color: #065f46;text-align: center;}
.large-card:hover {background: color-mix(in oklab, var(--lime) 25%, white);cursor: pointer;}