/* Annie's vs a conventional agency - page styles, .vs- prefixed */
.vs-page{color:var(--ink);font:16px/1.6 Inter,system-ui,sans-serif}
.vs-page *{box-sizing:border-box}
.vs-page h1,.vs-page h2,.vs-page h3{font-family:Montserrat,sans-serif;color:var(--navy);line-height:1.2;margin:0}
.vs-page a{color:var(--blue)}
.vs-page{
  --navy:#14263F; --blue:#1F78E8; --green:#41C94A; --green-d:#2F7D33;
  --ink:#1C2733; --muted:#5B6878; --line:#E3E8EF; --soft:#F8FAFC; --white:#fff;
  --amber:#C2410C; --amber-bg:#FFF1E7; --amber-line:#F0C9A8;
  --green-bg:#EAF7EB; --green-line:#BFE3C2;
}

.vs-wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* hero */
.vs-hero{background:var(--navy);color:#fff;padding:64px 0 56px}
.vs-eyebrow{font-family:Montserrat;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#8EC1FF;margin-bottom:14px}
.vs-page .vs-hero h1{color:#fff;font-size:clamp(28px,4.4vw,46px);max-width:860px}
.vs-hero h1 em{font-style:normal;color:var(--green)}
.vs-lede{font-size:clamp(17px,2vw,20px);color:#D5DEEA;max-width:760px;margin:18px 0 28px}
.vs-btns{display:flex;flex-wrap:wrap;gap:12px}
.vs-page a.vs-btn,.vs-page a.vs-btn:link,.vs-page a.vs-btn:visited{display:inline-block;font-family:Montserrat;font-weight:700;font-size:15px;padding:13px 22px;border-radius:10px;text-decoration:none}
.vs-page a.vs-btn.go,.vs-page a.vs-btn.go:link,.vs-page a.vs-btn.go:visited{background:var(--green);color:#fff}
.vs-page a.vs-btn.alt,.vs-page a.vs-btn.alt:link,.vs-page a.vs-btn.alt:visited{border:2px solid #fff;color:#fff}
.vs-page a.vs-btn.dark,.vs-page a.vs-btn.dark:link,.vs-page a.vs-btn.dark:visited{border:2px solid var(--navy);color:var(--navy)}

/* sections */
.vs-sec{padding:60px 0}
.vs-sec.soft{background:var(--soft)}
.vs-sec h2{font-size:clamp(24px,3vw,32px);margin-bottom:10px}
.vs-sub{color:var(--muted);max-width:760px;margin:0 0 30px}

/* price cards */
.vs-job{border:1px solid var(--line);border-radius:14px;background:#fff;padding:26px;margin-bottom:22px}
.vs-job h3{font-size:20px;margin-bottom:4px}
.vs-job .vs-what{color:var(--muted);margin:0 0 18px}
.vs-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vs-side{border-radius:12px;padding:20px}
.vs-side.them{background:var(--soft);border:1px solid var(--line)}
.vs-side.us{background:var(--green-bg);border:1px solid var(--green-line)}
.vs-label{font-family:Montserrat;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vs-side.us .vs-label{color:var(--green-d)}
.vs-price{font-family:Montserrat;font-weight:800;font-size:clamp(26px,3.4vw,34px);color:var(--navy);margin:6px 0 2px}
.vs-side.us .vs-price{color:var(--green-d)}
.vs-note{font-size:14px;color:var(--muted);margin:0}
.vs-note sup a{text-decoration:none;font-weight:600}
.vs-includes{margin:14px 0 0;padding:0;list-style:none;font-size:14.5px}
.vs-includes li{padding-left:22px;position:relative;margin:5px 0}
.vs-includes li:before{content:"";position:absolute;left:2px;top:7px;width:11px;height:6px;border-left:2.5px solid var(--green-d);border-bottom:2.5px solid var(--green-d);transform:rotate(-45deg)}
.vs-side.them .vs-includes li:before{border-color:#8A97A8}

/* how-it-works table */
.vs-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.vs-table th,.vs-table td{text-align:left;vertical-align:top;padding:16px 18px;border-bottom:1px solid var(--line)}
.vs-table tr:last-child td{border-bottom:0}
.vs-table thead th{font-family:Montserrat;font-size:13px;letter-spacing:.08em;text-transform:uppercase;background:var(--navy);color:#fff}
.vs-table thead th.us{background:var(--green-d)}
.vs-table td:first-child{font-family:Montserrat;font-weight:700;color:var(--navy);width:22%}
.vs-table td.us{background:#F6FBF6}

/* why cheaper */
.vs-why{display:grid;grid-template-columns:1fr minmax(260px,380px);gap:28px;align-items:start}
.vs-why p{margin:0 0 14px}
.vs-card{background:var(--navy);color:#fff;border-radius:14px;padding:24px}
.vs-page .vs-card h3{color:#fff;font-size:18px;margin-bottom:10px}
.vs-card p{color:#D5DEEA;font-size:15px}
.vs-page .vs-card a,.vs-page .vs-card a:visited{color:#8EC1FF;font-weight:600}

/* closing */
.vs-close{background:var(--navy);color:#fff;text-align:center;padding:60px 0}
.vs-page .vs-close h2{color:#fff;font-size:clamp(24px,3.4vw,34px)}
.vs-close p{color:#D5DEEA;max-width:700px;margin:14px auto 26px}
.vs-close .vs-btns{justify-content:center}

/* sources */
.vs-src{font-size:14px;color:var(--muted)}
.vs-src ol{padding-left:20px}
.vs-src li{margin:8px 0}
.vs-foot-line{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;margin-top:24px}

@media (max-width:820px){
  .vs-pair,.vs-why{grid-template-columns:1fr}
  .vs-card{order:-1}
  .vs-table thead{display:none}
  .vs-table,.vs-table tbody,.vs-table tr,.vs-table td{display:block;width:100%}
  .vs-table tr{border-bottom:1px solid var(--line)}
  .vs-table td{border:0;padding:8px 16px}
  .vs-table td:first-child{width:100%;padding-top:16px}
  .vs-table td[data-h]:before{content:attr(data-h);display:block;font-family:Montserrat;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
  .vs-table td.us{padding-bottom:16px}
  .vs-hero{padding:44px 0 40px}
  .vs-sec{padding:44px 0}
}