/* ============================================================
   HostSNAP - design tokens
   ============================================================ */
:root{
  --bg:#faf5ec;
  --bg-soft:#f2ead9;
  --surface:#fffbf3;
  --ink:#2e2620;
  --ink-soft:#5c5246;
  --ink-dim:#8c8073;
  --border:#e6dbc7;

  --coral:#e8623a;
  --coral-dark:#c14e2a;
  --coral-tint:#fbe4da;

  --teal:#3f7d6c;
  --teal-dark:#2c5b4e;
  --teal-tint:#dfeae6;

  --gold:#cf9a3a;
  --gold-dark:#a97b28;
  --gold-tint:#f5e6c8;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:22px;
  --wrap:1120px;
  --mono:'Space Mono', monospace;
  --head:'Quicksand', sans-serif;
  --body:'Karla', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;}
img,svg{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px;}
section{padding:72px 0;}
h1,h2,h3,h4{font-family:var(--head); font-weight:700; line-height:1.2; margin:0; color:var(--ink);}
h2{font-size:32px;}
h3{font-size:22px;}
p{margin:0 0 14px;}
.lead{font-size:18px; color:var(--ink-soft); line-height:1.6;}
.mono{font-family:var(--mono);}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px; border-radius:999px; font-weight:700; font-size:15px; border:1.5px solid transparent; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease; font-family:var(--body); text-align:center;}
.btn:hover{transform:translateY(-1px);}
.btn-coral{background:var(--coral); color:#fff;}
.btn-coral:hover{background:var(--coral-dark);}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--border);}
.btn-outline:hover{border-color:var(--coral); color:var(--coral-dark);}
.btn-teal{background:var(--teal); color:#fff;}
.btn-teal:hover{background:var(--teal-dark);}
.btn-sm{padding:9px 18px; font-size:13.5px;}
.btn-lg{padding:16px 30px; font-size:16px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none;}

/* ---- Eyebrow / tags ---- */
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.07em; color:var(--coral-dark); font-weight:700; margin-bottom:14px;}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--coral);}
.tag{display:inline-block; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; padding:4px 10px; border-radius:999px; font-weight:700;}
.tag-teal{background:var(--teal-tint); color:var(--teal-dark);}
.tag-gold{background:var(--gold-tint); color:var(--gold-dark);}
.tag-coral{background:var(--coral-tint); color:var(--coral-dark);}

/* ---- Status strip ---- */
.status-strip{background:var(--ink); color:rgba(255,255,255,0.85); font-family:var(--mono); font-size:12px;}
.status-strip-inner{max-width:var(--wrap); margin:0 auto; padding:8px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.status-strip a{color:#fff; opacity:.85;}
.status-strip a:hover{opacity:1;}
.status-dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:#6fbf94; margin-right:6px; box-shadow:0 0 0 3px rgba(111,191,148,0.22);}

/* ---- Topbar ---- */
.topbar{position:sticky; top:0; z-index:50; background:rgba(250,245,236,0.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--border);}
.topbar-inner{max-width:var(--wrap); margin:0 auto; padding:14px 28px; display:flex; align-items:center; justify-content:space-between; gap:22px;}
.brand{display:flex; align-items:center; gap:9px; font-family:var(--head); font-weight:700; font-size:19px; color:var(--ink);}
.brand .snap{color:var(--coral);}
.brand-mark{width:34px; height:34px; flex-shrink:0;}
.nav-links{display:flex; align-items:center; gap:24px; font-size:14.5px; font-weight:600; color:var(--ink-soft);}
.nav-links a:hover, .nav-links a.active{color:var(--coral-dark);}
.nav-actions{display:flex; align-items:center; gap:12px;}
.menu-btn{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.menu-btn .bars{display:flex; flex-direction:column; gap:4px;}
.menu-btn .bars span{width:20px; height:2px; background:var(--ink); border-radius:2px;}

@media (max-width:860px){
  .nav-links{position:fixed; top:0; right:0; height:100vh; width:250px; background:var(--surface); flex-direction:column; align-items:flex-start; padding:90px 26px 26px; box-shadow:-8px 0 24px rgba(46,38,32,0.12); transform:translateX(100%); transition:transform .22s ease; gap:20px;}
  .nav-links.open{transform:translateX(0);}
  .menu-btn{display:block;}
  .nav-actions .btn-sm{padding:8px 14px; font-size:12.5px;}
}

/* ---- Hero ---- */
.hero{padding:64px 0 56px; border-bottom:1px solid var(--border);}
.hero-inner{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}
.hero h1{font-size:44px; margin-bottom:18px;}
.hero-actions{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap;}
.hero-note{margin-top:18px; font-size:13.5px; color:var(--ink-dim); font-family:var(--mono);}
.hero-quote{font-size:16.5px; font-style:italic; color:var(--ink); border-left:3px solid var(--coral); padding-left:16px; margin:22px 0 0; max-width:520px; line-height:1.55;}

.hero-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; box-shadow:0 18px 40px rgba(46,38,32,0.08);}
.hero-card .hc-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; padding-bottom:14px; border-bottom:1px dashed var(--border);}
.hero-card .hc-head span{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-dim);}
.hc-row{display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--border);}
.hc-row:last-child{border-bottom:none;}
.hc-row .ic{width:34px; height:34px; border-radius:9px; background:var(--coral-tint); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.hc-row .ic svg{width:17px; height:17px; color:var(--coral-dark);}
.hc-row strong{display:block; font-size:14.5px;}
.hc-row span{font-size:12.5px; color:var(--ink-dim);}

@media (max-width:900px){ .hero-inner{grid-template-columns:1fr;} .hero h1{font-size:34px;} }

/* ---- Small-shop strip ---- */
.people-strip{background:var(--teal-tint); border-bottom:1px solid var(--border);}
.people-strip .wrap{padding:22px 28px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:space-between;}
.people-strip p{margin:0; font-size:14.5px; color:var(--teal-dark); font-weight:600;}
.people-strip .avatars{display:flex; align-items:center;}
.people-strip .avatars .av{width:36px; height:36px; border-radius:50%; border:2.5px solid var(--teal-tint); margin-left:-10px; display:flex; align-items:center; justify-content:center; color:#fff;}
.people-strip .avatars .av:first-child{margin-left:0;}
.people-strip .avatars .av svg{width:16px; height:16px;}

/* ---- Section headers ---- */
.section-head{max-width:640px; margin-bottom:40px;}
.section-head.center{max-width:640px; margin-left:auto; margin-right:auto; text-align:center;}

/* ---- Grid / cards ---- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
@media (max-width:860px){ .grid-3{grid-template-columns:1fr;} .grid-2{grid-template-columns:1fr;} }

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px;}
.card h3{margin-bottom:8px;}
.card p{color:var(--ink-soft); font-size:14.5px; margin-bottom:0;}
.card .ic-badge{width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.ic-badge svg{width:21px; height:21px;}
.ic-badge.coral{background:var(--coral-tint); color:var(--coral-dark);}
.ic-badge.teal{background:var(--teal-tint); color:var(--teal-dark);}
.ic-badge.gold{background:var(--gold-tint); color:var(--gold-dark);}

/* ---- Plan cards ---- */
.plans-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:1000px){ .plans-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .plans-grid{grid-template-columns:1fr;} }
.plan-card{background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius); padding:26px; position:relative; display:flex; flex-direction:column;}
.plan-card.featured{border-color:var(--coral); box-shadow:0 16px 32px rgba(232,98,58,0.14);}
.plan-card .pop-badge{position:absolute; top:-12px; left:22px; background:var(--coral); color:#fff; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:0.05em; padding:4px 10px; border-radius:999px; font-weight:700;}
.plan-card h3{font-size:18px; margin-bottom:4px;}
.plan-card .plan-desc{font-size:13px; color:var(--ink-dim); margin-bottom:16px;}
.plan-card .price{font-family:var(--mono); font-size:32px; font-weight:700; color:var(--ink); margin:6px 0 2px;}
.plan-card .price span{font-size:13px; font-weight:400; color:var(--ink-dim);}
.plan-card ul{list-style:none; padding:0; margin:18px 0 22px; flex-grow:1;}
.plan-card li{display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); margin-bottom:10px;}
.plan-card li svg{width:15px; height:15px; color:var(--teal); flex-shrink:0; margin-top:2px;}

/* ---- Compare table ---- */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);}
table.compare{width:100%; border-collapse:collapse; font-size:14px; min-width:640px;}
table.compare th, table.compare td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--border);}
table.compare th{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-dim); background:var(--bg-soft); font-weight:700;}
table.compare td:first-child{color:var(--ink-soft); font-weight:600;}
table.compare tr:last-child td{border-bottom:none;}

/* ---- Testimonials ---- */
.testi-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px;}
.testi-card p{font-style:italic; color:var(--ink); font-size:15px; margin-bottom:16px;}
.testi-who{display:flex; align-items:center; gap:10px;}
.testi-who .av{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--head); font-weight:700; font-size:12.5px; color:#fff; flex-shrink:0;}
.testi-who strong{display:block; font-size:13.5px;}
.testi-who span{font-size:12px; color:var(--ink-dim);}

/* ---- Team / about ---- */
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:860px){ .team-grid{grid-template-columns:1fr;} }
.team-card{text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px 22px;}
.team-card .av-lg{width:76px; height:76px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; color:#fff;}
.team-card .av-lg svg{width:32px; height:32px;}
.team-card h3{font-size:17px; margin-bottom:2px;}
.team-card .role{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--coral-dark); margin-bottom:12px;}
.team-card h3.role-title{font-family:var(--mono); font-size:15px; text-transform:uppercase; letter-spacing:0.05em; color:var(--coral-dark); margin-bottom:14px;}
.team-card p{font-size:13.5px; color:var(--ink-soft); margin-bottom:0;}

.story-panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; margin-top:36px;}
.story-panel h3{margin-bottom:14px;}
.story-panel p{color:var(--ink-soft); font-size:15px;}

/* ---- Steps ---- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:860px){ .steps{grid-template-columns:1fr;} }
.step{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; position:relative;}
.step .step-num{font-family:var(--head); font-weight:700; font-size:26px; color:var(--coral); margin-bottom:10px;}

/* ---- Domain search mock ---- */
.domain-box{background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:30px; text-align:center;}
.domain-search{display:flex; gap:10px; max-width:520px; margin:20px auto 0; flex-wrap:wrap; justify-content:center;}
.domain-search input{flex-grow:1; min-width:220px; padding:14px 18px; border:1.5px solid var(--border); border-radius:999px; font-family:var(--body); font-size:15px; background:var(--bg);}
.domain-tld-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:28px;}
@media (max-width:640px){ .domain-tld-grid{grid-template-columns:repeat(2,1fr);} }
.domain-tld{background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px; text-align:center;}
.domain-tld .tld{font-family:var(--mono); font-weight:700; font-size:15px; color:var(--ink);}
.domain-tld .price{font-size:12.5px; color:var(--ink-dim); margin-top:3px;}
.partner-note{display:flex; gap:12px; align-items:flex-start; background:var(--gold-tint); border:1px solid #ecd6a2; border-radius:var(--radius); padding:16px 18px; margin-top:26px; text-align:left;}
.partner-note svg{width:20px; height:20px; color:var(--gold-dark); flex-shrink:0; margin-top:2px;}
.partner-note p{font-size:13.5px; color:#6b5323; margin:0;}

/* ---- Forms ---- */
.ofield label, .cfield label{display:block; font-size:12.5px; font-weight:700; margin-bottom:6px; color:var(--ink); font-family:var(--mono); text-transform:uppercase; letter-spacing:0.03em;}
.ofield input, .ofield textarea, .ofield select, .cfield input, .cfield textarea, .cfield select{width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-family:var(--body); font-size:14.5px; background:var(--bg);}
.ofield, .cfield{margin-bottom:16px;}
.form-row-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:640px){ .form-row-2{grid-template-columns:1fr;} }

.order-layout{display:grid; grid-template-columns:1.3fr 0.9fr; gap:32px; align-items:flex-start;}
@media (max-width:900px){ .order-layout{grid-template-columns:1fr;} }
.order-summary{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; position:sticky; top:96px;}
.sum-row{display:flex; justify-content:space-between; font-size:14px; padding:9px 0; border-bottom:1px solid var(--border); color:var(--ink-soft);}
.sum-row.total{border-bottom:none; font-weight:700; color:var(--ink); font-size:16px; padding-top:14px;}
.plan-option{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; border:1.5px solid var(--border); border-radius:var(--radius-sm); margin-bottom:10px; cursor:pointer; transition:border-color .12s ease, background .12s ease;}
.plan-option:hover{border-color:var(--coral);}
.plan-option.selected{border-color:var(--coral); background:var(--coral-tint);}
.plan-option input{margin-right:12px;}
.plan-option .po-name{font-weight:700; font-size:14.5px;}
.plan-option .po-spec{font-size:12px; color:var(--ink-dim); font-family:var(--mono);}
.plan-option .po-price{font-family:var(--mono); font-weight:700; color:var(--ink); font-size:14.5px;}

.pay-picker{display:flex; flex-direction:column; gap:10px; margin-bottom:14px;}
.pay-option{display:flex; align-items:center; gap:12px; padding:14px 16px; border:1.5px solid var(--border); border-radius:var(--radius-sm); cursor:pointer;}
.pay-option.selected{border-color:var(--coral); background:var(--coral-tint);}
.pay-option .po-icon{width:32px; height:32px; border-radius:8px; flex-shrink:0;}
.pay-option .po-left{flex-grow:1;}
.pay-option .po-name{font-weight:700; font-size:14px;}
.pay-option .po-spec{font-size:12px; color:var(--ink-dim);}
.pay-details{display:none; background:var(--bg); border:1px dashed var(--border); border-radius:var(--radius-sm); padding:16px 18px; margin-top:4px; margin-bottom:14px;}
.pay-details.open{display:block;}
.pay-detail-row{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--border); font-size:13.5px;}
.pay-detail-row:last-child{border-bottom:none;}
.pay-detail-row .lbl{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-dim);}
.pay-detail-row .val{font-family:var(--mono); font-size:13px; color:var(--ink); font-weight:700;}
.pay-ref{color:var(--coral-dark) !important;}

.note-box{background:var(--teal-tint); border:1px solid #cfe3dc; border-radius:var(--radius-sm); padding:14px 16px; display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--teal-dark); margin-top:16px;}
.note-box svg{width:18px; height:18px; flex-shrink:0; margin-top:1px;}

/* ---- Legal ---- */
.legal-content h2{font-size:19px; margin:30px 0 10px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{color:var(--ink-soft); font-size:14.5px;}
.breadcrumb{font-family:var(--mono); font-size:12px; color:var(--ink-dim); margin-bottom:16px;}
.page-banner{padding:44px 0 40px; border-bottom:1px solid var(--border); background:var(--bg-soft);}
.page-banner h1{font-size:34px; margin:6px 0 10px;}

/* ---- Footer ---- */
footer{padding:56px 0 24px; border-top:1px solid var(--border); margin-top:40px;}
.foot-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px;}
@media (max-width:860px){ .foot-top{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .foot-top{grid-template-columns:1fr;} }
.foot-brand p{font-size:13.5px; color:var(--ink-soft); margin:14px 0 16px; max-width:260px;}
.foot-status{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-dim); font-family:var(--mono);}
.foot-contact{margin:16px 0;}
.foot-contact a{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:5px;}
.foot-col h5{font-size:12.5px; margin-bottom:14px; color:var(--ink); font-weight:700; font-family:var(--mono); text-transform:uppercase; letter-spacing:0.03em;}
.foot-col ul{list-style:none; padding:0; margin:0;}
.foot-col li{margin-bottom:10px;}
.foot-col a{font-size:13.5px; color:var(--ink-soft);}
.foot-col a:hover{color:var(--coral-dark);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:20px; border-top:1px solid var(--border); font-size:12.5px; color:var(--ink-dim); flex-wrap:wrap; gap:10px;}
.foot-bottom a{margin-left:16px; color:var(--ink-dim);}
.foot-bottom a:hover{color:var(--coral-dark);}

/* ---- Misc ---- */
.divider-note{text-align:center; font-size:13px; color:var(--ink-dim); font-family:var(--mono); margin-top:18px;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;}
@media (max-width:860px){ .two-col{grid-template-columns:1fr;} }
.check-list{list-style:none; padding:0; margin:18px 0;}
.check-list li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink-soft); margin-bottom:10px;}
.check-list li svg{width:16px; height:16px; color:var(--teal); flex-shrink:0; margin-top:3px;}
.bg-soft{background:var(--bg-soft);}