/*
Theme Name: Dealvps
Theme URI: https://dealvps.com/
Author: insha
Description: A clean WordPress hosting comparison theme inspired by the supplied reference page, with domain search and editable pricing comparison.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: dealvps
*/

:root{
  --green:#2f8f5b;
  --green-dark:#17613c;
  --mint:#e9f7ef;
  --ink:#17251d;
  --muted:#68756e;
  --line:#dfe8e2;
  --paper:#fff;
  --soft:#f6faf7;
  --radius:18px;
  --shadow:0 18px 55px rgba(23,37,29,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--soft);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}
a{color:inherit}
.container{width:min(1160px,calc(100% - 40px));margin:auto}
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-weight:900;font-size:1.25rem;text-decoration:none;letter-spacing:-.03em;display:flex;align-items:center;gap:9px}
.brand-mark{width:34px;height:34px;border-radius:11px;background:var(--green);display:grid;place-items:center;color:#fff}
.main-nav{display:flex;align-items:center;gap:22px;font-size:.94rem}
.main-nav a{text-decoration:none;color:#46534c}
.main-nav a:hover{color:var(--green)}
.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;padding:12px 18px;font-weight:800;text-decoration:none;cursor:pointer}
.button-primary{background:var(--green);color:#fff}
.button-primary:hover{background:var(--green-dark);color:#fff}
.hero{padding:84px 0 55px;background:linear-gradient(180deg,#fff 0%,#f4fbf6 100%)}
.eyebrow{display:inline-flex;gap:8px;align-items:center;background:var(--mint);color:var(--green-dark);padding:7px 11px;border-radius:999px;font-size:.84rem;font-weight:800}
.hero h1{font-size:clamp(2.5rem,6vw,4.8rem);line-height:1.02;letter-spacing:-.06em;max-width:850px;margin:18px 0}
.hero p{max-width:720px;color:var(--muted);font-size:1.1rem;margin:0}
.domain-card{margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.domain-form{display:flex;gap:10px}
.domain-form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;padding:15px 16px;font-size:1rem;outline:none}
.domain-form input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(47,143,91,.1)}
.domain-note{margin:9px 0 0;color:var(--muted);font-size:.86rem}
.section{padding:72px 0}
.section-head{margin-bottom:26px}
.section-head h2{font-size:clamp(1.8rem,4vw,2.7rem);letter-spacing:-.04em;margin:0 0 8px}
.section-head p{color:var(--muted);margin:0}
.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.compare{width:100%;min-width:760px;border-collapse:collapse}
.compare th,.compare td{padding:17px 18px;border-bottom:1px solid var(--line);text-align:left}
.compare thead th{background:#f2f8f4;font-size:.95rem}
.compare tbody th{font-weight:700;color:#435049}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.plan-name{font-weight:900}
.price{font-size:1.45rem;font-weight:900}
.check{color:var(--green-dark);font-weight:900}
.cross{color:#9aa59f;font-weight:800}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:25px;box-shadow:0 10px 35px rgba(23,37,29,.05)}
.card h3{margin:0 0 6px;font-size:1.25rem}
.card p{color:var(--muted);margin:0 0 20px}
.card .price{margin:8px 0 18px}
.card ul{padding:0;margin:0 0 20px;list-style:none}
.card li{padding:8px 0;border-bottom:1px solid #edf2ee}
.card li:last-child{border-bottom:0}
.site-footer{background:#15231b;color:#dfe9e2;padding:50px 0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.site-footer h3{color:#fff;margin-top:0}
.site-footer a{color:#dfe9e2;text-decoration:none}
.site-footer a:hover{color:#fff}
.footer-copy{color:#9eb0a4;font-size:.9rem;margin-top:30px}
.notice{padding:13px 15px;border-radius:12px;background:var(--mint);color:var(--green-dark);margin-top:12px}
@media(max-width:800px){
  .main-nav{display:none}
  .hero{padding-top:55px}
  .cards,.footer-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .container{width:min(100% - 24px,1160px)}
  .domain-form{flex-direction:column}
  .button{width:100%}
}