/* CourierBase — friendly / warm
   Centred hero, soft blobs, bento grid, very round, yellow highlights. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --teal:#0F6E66; --teal-deep:#0A4F49; --teal-soft:#E4F4F1; --yellow:#FFCE3A; --yellow-soft:#FFF6D9;
  --ink:#0D211F; --body:#33504C; --muted:#6E8B86; --paper:#FCFEFD; --white:#fff; --cream:#FFFAF2;
  --line:#DDEDE9; --good:#0E8A5F;
  --r:26px; --r-sm:16px; --max:1160px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
body{font-family:var(--font);background:var(--paper);color:var(--body);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
h1,h2,h3,h4{color:var(--ink);font-weight:800;letter-spacing:-.03em;line-height:1.06}
h1{font-size:clamp(38px,5.6vw,64px);line-height:1.02}
h2{font-size:clamp(28px,3.4vw,42px)}
h3{font-size:20px;letter-spacing:-.02em}
p{color:var(--body)}
.eyebrow{display:inline-flex;align-items:center;gap:7px;background:var(--yellow-soft);color:#7A6200;
  font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:100px;margin-bottom:20px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 3px rgba(255,206,58,.35)}

/* nav — floating pill */
.nav{position:sticky;top:0;z-index:40;padding:14px 0;background:rgba(252,254,253,.8);backdrop-filter:blur(14px)}
.nav .wrap{display:flex;align-items:center;gap:16px;background:var(--white);border:1px solid var(--line);
  border-radius:100px;padding:9px 10px 9px 20px;box-shadow:0 4px 18px rgba(15,110,102,.06)}
.brand{font-size:19px;font-weight:800;color:var(--teal);letter-spacing:-.04em;display:flex;align-items:center;gap:9px}
.brand i{width:26px;height:26px;background:var(--teal);border-radius:9px;display:grid;place-items:center;
  color:var(--yellow);font-style:normal;font-size:11px;font-weight:900}
.navlinks{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:600;color:var(--body)}
.navlinks a:hover{color:var(--teal)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;
  border-radius:100px;padding:13px 24px;font-size:15px;border:1px solid transparent;cursor:pointer;transition:.15s}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-deep)}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-yellow:hover{filter:brightness(1.04)}
.btn-line{background:#fff;border-color:var(--line);color:var(--teal)}
.btn-line:hover{border-color:var(--teal)}
.btn-lg{padding:16px 30px;font-size:16px}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-block{width:100%}

/* hero — centred, blobs */
.hero{position:relative;text-align:center;padding:clamp(40px,7vw,84px) 0 clamp(30px,5vw,54px);overflow:hidden}
.hero .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;z-index:0}
.hero .b1{width:520px;height:520px;background:#C9EFE8;top:-190px;left:-140px}
.hero .b2{width:460px;height:460px;background:#FFF0C2;top:-120px;right:-120px}
.hero .b3{width:380px;height:380px;background:#DDF2EE;bottom:-220px;left:40%}
.hero .wrap{position:relative;z-index:1}
.hero h1{max-width:880px;margin:0 auto 20px}
.hero h1 u{text-decoration:none;background:linear-gradient(180deg,transparent 60%,#FFCE3A 60%);padding:0 4px}
.hero .lede{font-size:clamp(17px,1.8vw,20px);color:var(--muted);max-width:600px;margin:0 auto 30px}
.hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.hero .proof{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;font-size:13.5px;color:var(--muted);font-weight:600}
.hero .proof span{display:flex;align-items:center;gap:7px}
.dot{width:18px;height:18px;border-radius:50%;background:var(--teal-soft);color:var(--teal);display:grid;
  place-items:center;font-size:10px;font-weight:900}

/* floating card under hero */
.floatcard{max-width:760px;margin:34px auto 0;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 24px 60px rgba(15,110,102,.10);padding:26px 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.floatcard .c{text-align:center}
.floatcard .v{font-size:30px;font-weight:800;letter-spacing:-.04em;color:var(--teal);line-height:1}
.floatcard .k{font-size:12px;color:var(--muted);margin-top:7px;font-weight:600}
.floatcard .c+.c{border-left:1px solid var(--line)}

/* section */
section{padding:clamp(46px,6.5vw,86px) 0}
.sec-head{text-align:center;max-width:660px;margin:0 auto clamp(30px,4vw,48px)}
.sec-head p{color:var(--muted);margin-top:12px}
.soft{background:var(--teal-soft)}
.cream{background:var(--cream)}

/* bento grid */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;
  display:flex;flex-direction:column;transition:.16s}
.tile:hover{box-shadow:0 16px 36px rgba(15,110,102,.10);transform:translateY(-3px)}
.tile.w2{grid-column:span 2}
.tile.w3{grid-column:span 3}
.tile.tall{grid-row:span 2}
.tile .ico{width:40px;height:40px;border-radius:13px;background:var(--teal-soft);color:var(--teal);
  display:grid;place-items:center;font-size:17px;margin-bottom:14px}
.tile h3{margin-bottom:7px}
.tile p{font-size:14px;color:var(--muted);line-height:1.5}
.tile .tag{margin-top:auto;padding-top:14px;font-size:12.5px;font-weight:800;color:var(--teal)}
.tile.hi{background:var(--teal);color:#fff;border-color:var(--teal)}
.tile.hi h3{color:#fff}
.tile.hi p{color:rgba(255,255,255,.72)}
.tile.hi .ico{background:rgba(255,255,255,.14);color:var(--yellow)}
.tile.hi .tag{color:var(--yellow)}
.tile.sun{background:var(--yellow);border-color:var(--yellow)}
.tile.sun h3{color:var(--ink)}
.tile.sun p{color:#5A4A10}
.tile.sun .ico{background:rgba(0,0,0,.08);color:var(--ink)}
.tile.sun .tag{color:#5A4A10}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;text-align:center}
.step .n{width:46px;height:46px;border-radius:50%;background:var(--yellow);color:var(--ink);
  display:grid;place-items:center;font-weight:800;font-size:17px;margin:0 auto 14px}
.step h3{margin-bottom:6px}
.step p{font-size:14px;color:var(--muted)}

/* quote band */
.qband{background:var(--teal);border-radius:var(--r);padding:clamp(30px,4vw,52px);color:#fff;
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.qband q{font-size:clamp(20px,2.6vw,30px);font-weight:700;letter-spacing:-.025em;line-height:1.25;color:#fff;display:block}
.qband .who{margin-top:16px;font-size:14px;color:rgba(255,255,255,.72);display:flex;align-items:center;gap:11px}
.qband .who i{width:38px;height:38px;border-radius:50%;background:var(--yellow);color:var(--ink);
  display:grid;place-items:center;font-style:normal;font-weight:800;font-size:12px}
.qband .score{font-size:44px;font-weight:800;letter-spacing:-.04em;color:var(--yellow);line-height:1;text-align:center}
.qband .score span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:8px;font-weight:700}

/* reviews */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.rev .s{color:var(--yellow);font-size:14px;letter-spacing:2px;margin-bottom:10px;-webkit-text-stroke:.5px #E0A800}
.rev p{font-size:14.5px;color:var(--body);margin-bottom:14px}
.rev .who{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.rev .who i{width:34px;height:34px;border-radius:50%;background:var(--teal-soft);color:var(--teal);
  display:grid;place-items:center;font-style:normal;font-weight:800;font-size:12px}
.rev .who b{display:block;color:var(--ink);font-size:13px}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;display:flex;flex-direction:column}
.plan.feat{border:2px solid var(--teal);box-shadow:0 20px 48px rgba(15,110,102,.14);position:relative}
.plan .flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--yellow);color:var(--ink);
  font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:6px 14px;border-radius:100px}
.plan h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-weight:800}
.plan .amt{font-size:44px;font-weight:800;letter-spacing:-.05em;color:var(--teal);line-height:1}
.plan .amt small{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
.plan .per{font-size:13px;color:var(--muted);margin:8px 0 20px;min-height:36px}
.plan ul{list-style:none;display:grid;gap:9px;font-size:14px;margin-bottom:24px}
.plan li{display:flex;gap:9px;color:var(--body)}
.plan li::before{content:"✓";color:var(--good);font-weight:900;flex-shrink:0}
.plan li.off{color:#A8BFBA}
.plan li.off::before{content:"–";color:#A8BFBA}
.plan .btn{margin-top:auto}

/* faq */
.faq{display:grid;gap:10px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:18px 22px}
.faq summary{list-style:none;cursor:pointer;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;
  gap:18px;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--teal);font-weight:800;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{font-size:14.5px;color:var(--muted);margin-top:12px}

/* cta */
.cend{text-align:center;background:var(--cream);border-radius:var(--r);padding:clamp(34px,5vw,60px);margin:0 auto}
.cend h2{margin-bottom:10px}
.cend p{color:var(--muted);max-width:480px;margin:0 auto 26px}
.cend .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* footer */
footer{padding:46px 0 30px;font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);margin-top:40px}
.fgrid{display:grid;grid-template-columns:1.8fr repeat(3,1fr);gap:30px;margin-bottom:30px}
.fgrid h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-weight:800}
.fgrid a{display:block;padding:4px 0;color:var(--body)}
.fgrid a:hover{color:var(--teal)}
.fbot{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:18px;
  flex-wrap:wrap;font-size:11.5px}

/* page head */
.phead{text-align:center;padding:clamp(36px,5vw,64px) 0 clamp(24px,3vw,36px)}
.phead h1{max-width:820px;margin:0 auto 16px}
.phead p{color:var(--muted);max-width:580px;margin:0 auto;font-size:17px}

/* service tiles detail */
.slist{display:grid;gap:14px}
.srow{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;
  display:grid;grid-template-columns:1fr 1.3fr 180px;gap:26px;align-items:start}
.srow .k{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:7px}
.srow h3{font-size:19px}
.srow p{font-size:14px;color:var(--muted);line-height:1.55}
.srow .chk{display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;margin-top:10px;font-size:12.5px}
.srow .chk span{display:flex;gap:6px;color:var(--body)}
.srow .chk span::before{content:"✓";color:var(--good);font-weight:900}
.srow .pc{text-align:right}
.srow .pc .p{font-size:15px;font-weight:800;color:var(--teal);display:block;margin-bottom:9px}
@media(max-width:960px){
  .bento{grid-template-columns:1fr 1fr}
  .tile.w3{grid-column:span 2}
  .steps,.plans,.revs{grid-template-columns:1fr}
  .navlinks{display:none}
  .qband{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .srow{grid-template-columns:1fr}
  .srow .pc{text-align:left}
}
@media(max-width:620px){
  .bento,.fgrid,.floatcard{grid-template-columns:1fr}
  .floatcard .c+.c{border-left:0;border-top:1px solid var(--line);padding-top:18px}
}