:root{
  --bg:#f7f3ec;
  --surface:#f7f3ec;
  --surface-raised:#fffdf8;
  --paper:#fffdf8;
  --ink:#171717;
  --ink-soft:#5f5b55;
  --ink-faint:#918a80;
  --muted:#5f5b55;
  --line:#ded6ca;
  --border:#ded6ca;
  --border-strong:#c9bfb0;
  --deep:#1f332f;
  --brand:#8a6b3d;
  --accent:#1f332f;
  --accent-mid:#8a6b3d;
  --accent-soft:#eee3d4;
  --serif:"Instrument Serif", Georgia, serif;
  --sans:"DM Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow:0 24px 70px rgba(31,51,47,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--surface);
  color:var(--ink);
  font-weight:300;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}

/* Shared navigation */
.nav{
  min-height:76px;
  padding:0 2.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  border-bottom:.5px solid var(--border);
  background:rgba(247,243,236,.92);
  backdrop-filter:blur(18px);
  position:sticky;
  top:0;
  z-index:50;
}
.brand,
.nav-logo,
.footer-logo{
  font-family:var(--serif);
  font-size:1.35rem;
  color:var(--ink);
  letter-spacing:-.01em;
  font-weight:400;
  white-space:nowrap;
}
.brand span,
.nav-logo span,
.footer-logo span{
  color:var(--accent-mid);
  font-style:italic;
}
.nav nav{display:flex;gap:20px;color:var(--ink-soft)}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:#fff !important;
  border-radius:999px;
  padding:.82rem 1.22rem;
  font-size:.9rem;
  font-weight:500;
  border:.5px solid transparent;
  cursor:pointer;
  transition:.2s ease;
  white-space:nowrap;
  font-family:var(--sans);
}
.btn:hover{transform:translateY(-1px);background:#14231f}
.btn.secondary,
.btn-outline{
  background:transparent;
  color:var(--ink) !important;
  border-color:var(--border-strong);
}
.btn.secondary:hover,
.btn-outline:hover{
  background:var(--surface-raised);
}
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

/* General page shells */
.section{
  width:min(980px, calc(100% - 48px));
  margin:3rem auto 4rem;
  padding:2.25rem;
  background:var(--surface-raised);
  border:.5px solid var(--border);
  border-radius:22px;
  box-shadow:var(--shadow);
}
.section h1{
  font-family:var(--serif);
  font-size:clamp(2.3rem,5vw,4rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 1rem;
}
.section h2{
  font-family:var(--serif);
  font-size:clamp(1.7rem,3.5vw,2.5rem);
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.02em;
  margin:0 0 .75rem;
}
.section p,
.section li{
  color:var(--ink-soft);
  font-size:1rem;
}
.eyebrow,
.tag,
.setup-tag,
.preview-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:.5px solid var(--border);
  border-radius:999px;
  padding:.42rem .8rem;
  color:var(--accent-mid);
  background:rgba(138,107,61,.06);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:600;
}
.lead{
  font-size:1.1rem;
  line-height:1.7;
  color:var(--ink-soft);
}
.card{
  background:var(--surface-raised);
  border:.5px solid var(--border);
  border-radius:22px;
  padding:1.75rem;
  box-shadow:var(--shadow);
}
.actions{display:flex;gap:.85rem;margin-top:1.5rem;flex-wrap:wrap}

/* Forms */
label{font-weight:500;color:var(--ink)}
input,
textarea,
select{
  width:100%;
  max-width:720px;
  padding:.82rem .9rem;
  border:.5px solid var(--border-strong);
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  font-family:var(--sans);
  font-size:.95rem;
  outline:none;
}
textarea{font-family:inherit;min-height:120px}
input:focus,
textarea:focus,
select:focus{
  border-color:var(--accent-mid);
  box-shadow:0 0 0 3px rgba(138,107,61,.12);
}
pre{
  white-space:pre-wrap;
  word-break:break-word;
  background:#f7f3ec;
  border:.5px solid var(--border);
  color:var(--ink-soft);
  padding:1rem;
  border-radius:14px;
  overflow:auto;
}
code{
  background:#f7f3ec;
  border:.5px solid var(--border);
  border-radius:8px;
  padding:.08rem .3rem;
}

/* Reusable notices */
.notice-box,
.result-box{
  background:#fff;
  border:.5px solid var(--border);
  border-radius:16px;
  padding:1rem;
  color:var(--ink-soft);
}
.notice-box strong,
.result-box strong{
  display:block;
  color:var(--ink);
  margin-bottom:.35rem;
  font-weight:500;
}

/* Footer */
footer,
.site-footer{
  margin-top:48px;
  padding:2.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  color:var(--ink-faint);
  font-size:.85rem;
  border-top:.5px solid var(--border);
  background:var(--surface);
}
.site-footer a,
footer a{color:var(--ink-soft);text-decoration:none}
.site-footer a:hover,
footer a:hover{color:var(--ink)}
.page-home-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--ink-soft);
  font-size:.9rem;
  margin-bottom:1.5rem;
}
.page-home-link:hover{color:var(--ink)}

/* Older hero/card pages still supported */
.hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:36px;
  padding:80px 36px;
  max-width:1180px;
  margin:auto;
}
.hero h1{
  font-family:var(--serif);
  font-size:clamp(2.8rem,6vw,4.5rem);
  line-height:1.02;
  letter-spacing:-.03em;
  font-weight:400;
  margin:18px 0;
}
.hero-highlight{
  display:inline;
  color:var(--accent);
  font-weight:700;
  background:linear-gradient(transparent 58%, rgba(197,165,114,.32) 58%);
  padding:0 2px;
}

@media(max-width:820px){
  .nav{padding:0 1.25rem}
  .section{width:calc(100% - 32px);padding:1.5rem;margin:2rem auto 3rem}
  .hero{grid-template-columns:1fr;padding:48px 20px}
  .actions{flex-direction:column;align-items:stretch}
  .btn{width:100%}
  footer,
  .site-footer{padding:2rem 1.25rem;align-items:flex-start;flex-direction:column}
}

/* Setup/payment required terms */
.terms-box {
  grid-column: 1 / -1;
  margin: 1.4rem 0 0;
  padding: 1rem;
  border: .5px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

.terms-box-title {
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: .75rem;
}

.terms-line {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  margin-bottom: .8rem;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 300;
}

.terms-line:last-child {
  margin-bottom: 0;
}

.terms-line input {
  width: auto;
  max-width: none;
  margin-top: .25rem;
  flex-shrink: 0;
}

/* Homepage package cards: Starter hosting is priced; Pro/Premium hosting is quoted */
.pricing-grid{
  margin-top:2.7rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.35rem;
  align-items:stretch;
}
.price-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  padding:1.75rem;
  box-shadow:0 18px 46px rgba(31,51,47,.055);
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.price-card.featured{
  border:2px solid var(--border-strong);
  box-shadow:0 24px 60px rgba(31,51,47,.09);
}
.price-card.featured.professional-plan{
  border-color:#0f7a4f;
  box-shadow:0 24px 60px rgba(15,122,79,.13);
}
.popular-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  gap:.35rem;
  background:#0f7a4f;
  color:#fff;
  border-radius:999px;
  padding:.38rem .65rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:.8rem;
}
.price-card .pricing-eyebrow{
  font-size:1.15rem;
  color:var(--ink);
  font-weight:700;
  margin-bottom:.15rem;
  letter-spacing:0;
  text-transform:none;
}
.price-card h3{
  font-size:.95rem;
  font-weight:500;
  color:var(--ink-soft);
  margin-bottom:.8rem;
}
.price{
  font-family:var(--sans);
  font-size:2rem;
  font-weight:700;
  line-height:1.05;
  margin-bottom:1rem;
  padding-bottom:1rem;
  border-bottom:.5px solid var(--border);
}
.price .price-unit{
  font-size:.92rem;
  font-weight:500;
  color:var(--ink-soft);
  margin-left:.25rem;
}
.starter-plan .price,.starter-plan .price-amount{color:#0b5ed7}
.professional-plan .price,.professional-plan .price-amount{color:#0f7a4f}
.premium-plan .price,.premium-plan .price-amount{color:#c66a00}
.starter-hosting,.quoted-hosting{
  margin:1.15rem 0 1.1rem;
  padding:1rem;
  border-radius:18px;
}
.starter-hosting{
  border:1px solid rgba(11,94,215,.32);
  background:linear-gradient(180deg, rgba(11,94,215,.055), rgba(11,94,215,.02));
}
.starter-hosting-title{
  color:#0b5ed7;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  margin-bottom:.8rem;
  text-align:center;
}
.hosting-row{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:.8rem;
  align-items:start;
  padding:.75rem 0;
}
.hosting-row + .hosting-row{border-top:.5px solid rgba(11,94,215,.22)}
.hosting-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(11,94,215,.12);
  color:#0b5ed7;
  font-size:1rem;
}
.hosting-row strong{
  display:block;
  color:#0b5ed7;
  font-size:1.05rem;
  line-height:1.25;
  margin-bottom:.18rem;
}
.hosting-row span{
  display:block;
  color:var(--ink-soft);
  font-size:.86rem;
  line-height:1.45;
}
.quoted-hosting{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:1rem;
  align-items:center;
  min-height:130px;
  margin-top:auto;
}
.quoted-hosting .quote-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.25rem;
}
.quoted-hosting strong{
  display:block;
  font-size:.95rem;
  color:var(--ink);
  line-height:1.45;
}
.pro-quote{border:1px solid rgba(15,122,79,.28);background:rgba(15,122,79,.055)}
.pro-quote .quote-icon{background:rgba(15,122,79,.12);color:#0f7a4f}
.premium-quote{border:1px solid rgba(198,106,0,.28);background:rgba(198,106,0,.07)}
.premium-quote .quote-icon{background:rgba(198,106,0,.13);color:#c66a00}
.price-card .btn{
  width:100%;
  margin-top:auto;
  border-radius:14px;
  padding:.9rem 1rem;
}
.btn-plan-starter{background:#0b5ed7;color:#fff !important;box-shadow:0 14px 30px rgba(11,94,215,.16)}
.btn-plan-starter:hover{background:#084fb8;transform:translateY(-1px)}
.btn-plan-pro{border:1px solid #0f7a4f;color:#0f7a4f !important;background:#fff}
.btn-plan-pro:hover{background:rgba(15,122,79,.07);transform:translateY(-1px)}
.btn-plan-premium{border:1px solid #c66a00;color:#c66a00 !important;background:#fff}
.btn-plan-premium:hover{background:rgba(198,106,0,.08);transform:translateY(-1px)}
.pricing-note{
  margin:1.6rem auto 0;
  max-width:900px;
  color:var(--ink-soft);
  font-size:.95rem;
  line-height:1.65;
  background:rgba(255,253,248,.72);
  border:.5px solid var(--border);
  border-radius:18px;
  padding:1rem 1.2rem;
  text-align:left;
}
.pricing-note strong{color:var(--ink);font-weight:600}
@media(max-width:860px){
  .pricing-grid{grid-template-columns:1fr}
  .price-card{padding:1.5rem}
}



/* Softer Trust band for homepage */
.trust-band{
  padding:4rem 2.5rem;
  background:var(--surface);
  color:var(--ink);
  border-top:.5px solid var(--border);
  border-bottom:.5px solid var(--border);
}
.trust-band-inner{
  width:min(1120px, calc(100% - 48px));
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  background:linear-gradient(135deg, rgba(255,253,248,.95), rgba(238,227,212,.55));
  border:.5px solid var(--border);
  border-radius:24px;
  padding:2.25rem;
  box-shadow:0 18px 46px rgba(31,51,47,.055);
}
.trust-band h2{
  font-family:var(--serif);
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
  font-weight:400;
  max-width:640px;
  margin-bottom:.75rem;
  color:var(--ink);
}
.trust-band p{
  max-width:700px;
  color:var(--ink-soft);
  line-height:1.75;
}
.trust-band .btn-primary{
  background:var(--accent);
  color:#fff !important;
}
.trust-band .btn-primary:hover{background:#14231f}
.trust-points{
  margin-top:1.25rem;
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}
.trust-points span{
  border:.5px solid var(--border-strong);
  background:rgba(255,253,248,.78);
  color:var(--ink-soft);
  border-radius:999px;
  padding:.58rem .85rem;
  font-size:.84rem;
}
@media(max-width:860px){
  .trust-band-inner{flex-direction:column;align-items:flex-start;padding:1.5rem}
}

/* Homepage hero review strip */
.hero-grid{
  width:min(960px, calc(100% - 48px));
  margin:0 auto;
  display:block;
}
.hero-copy{max-width:860px}
.review-strip{
  margin-top:2rem;
  background:linear-gradient(135deg, rgba(255,253,248,.96), rgba(238,227,212,.58));
  border:.5px solid var(--border);
  border-radius:22px;
  padding:1.25rem;
  box-shadow:0 18px 46px rgba(31,51,47,.055);
}
.review-strip-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}
.review-strip-top strong{
  font-size:.98rem;
  font-weight:600;
  color:var(--ink);
}
.review-badge{
  font-size:.72rem;
  color:var(--accent-mid);
  background:var(--accent-soft);
  padding:.35rem .6rem;
  border-radius:999px;
  white-space:nowrap;
}
.review-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.8rem;
}
.review-step{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  background:rgba(255,253,248,.78);
  border:.5px solid var(--border);
  border-radius:16px;
  padding:1rem;
}
.review-num{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--serif);
  font-size:1rem;
}
.review-step h3{
  font-size:.92rem;
  font-weight:600;
  margin-bottom:.12rem;
}
.review-step p{
  font-size:.8rem;
  color:var(--ink-soft);
  line-height:1.45;
}
@media(max-width:860px){
  .review-steps{grid-template-columns:1fr}
  .review-strip-top{align-items:flex-start;flex-direction:column}
  .hero-grid{width:min(100% - 40px, 960px)}
}