/* PrimeStart v5 "Bright": the Pricing page (12 Oct 2026), ported from the lead's prototype (handover/rebuild-2026-10-12/v5/v5-pricing.css).
   Only change: every custom property is prefixed --v5- (as in v5.css), so the older sheets' --ink, --pad and --orange are never touched.
   Loaded after v5.css, on the inner v5 pages only (inc/v5.php). */

.prh{position:relative;overflow:hidden;background:
  radial-gradient(760px 380px at 12% 8%,#FFE9D6 0%,rgba(255,233,214,0) 70%),
  radial-gradient(700px 380px at 92% 30%,#E6F1FF 0%,rgba(230,241,255,0) 70%),
  linear-gradient(180deg,#fff 0%,#FFF8F1 100%);padding-bottom:78px}
.prh__in{position:relative;padding-top:46px}
.prh__head{text-align:center;position:relative;z-index:1}
.prh h1{font-size:50px;max-width:900px;margin:18px auto 0;position:relative;z-index:1}
.prh .hero__sub{max-width:520px}
.prh .pay{margin-top:24px}
.prh__d{position:absolute;border-radius:50%;z-index:0}
.prh__d--1{left:4%;top:60px;width:20px;height:20px;border:4px solid #2F6BFF}
.prh__d--2{right:6%;top:78px;width:0;height:0;border-radius:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:17px solid #FFC531}
.prh .dood--1{left:7%;top:170px;z-index:0}
.prh .pks{padding-top:40px;position:relative;z-index:1}
.prh__n{text-align:center;margin-top:26px;font-size:15px;font-weight:600;color:var(--v5-ink-2)}
.prh__n .o{color:var(--v5-orange-d);font-weight:800}

/* in every package */
.ev{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ev__t{display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:center;border-radius:var(--v5-r-lg);background:var(--v5-tc);padding:22px 20px;transition:transform .25s ease}
.ev__t:hover{transform:translateY(-3px)}
.ev__t i{grid-row:1/3;width:48px;height:48px;border-radius:14px;background:#fff;display:grid;place-items:center;color:var(--v5-ink);box-shadow:var(--v5-sh-1)}
.ev__t .ic{width:22px;height:22px}
.ev__t b{font-size:16px;color:var(--v5-ink);line-height:1.2;align-self:end}
.ev__t span{font-size:13.5px;color:var(--v5-ink-2);line-height:1.35;margin-top:2px;align-self:start}

/* compare */
.cmp--p thead th{vertical-align:bottom;position:relative;padding-top:50px}
.cmp--p .rec{position:absolute;left:20px;top:16px;font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;background:var(--v5-orange);color:var(--v5-ink);border-radius:999px;padding:4px 10px}
.cmp--p .cmp__grp th{background:var(--v5-soft)}
.cmp--p td{font-weight:700}
.cmp--p td .ic{margin-right:2px}
.cmp--p .btn--ghost.btn--sm{width:100%}

/* pay schedule */
.sch{display:grid;gap:14px}
.sch__r{display:grid;grid-template-columns:230px 1fr 110px;gap:26px;align-items:center;background:var(--v5-tc);border-radius:var(--v5-r-lg);padding:22px 28px}
.sch__w b{display:block;font-size:19px;color:var(--v5-ink);letter-spacing:-.02em}
.sch__w span{display:block;font-size:14px;line-height:1.4;color:var(--v5-ink-2);margin-top:4px}
.sch__w strong{color:var(--v5-ink);font-weight:800}
.dots{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.dt{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.dt i{font-style:normal;width:100%;max-width:50px;aspect-ratio:1;border-radius:50%;background:#fff;border:2px solid var(--v5-ink);display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--v5-ink);letter-spacing:-.02em;box-shadow:var(--v5-sh-1)}
.dt small{font-size:10.5px;font-weight:800;color:var(--v5-ink-3);white-space:nowrap}
.dt--on i{background:var(--v5-orange);border-color:var(--v5-orange);box-shadow:0 6px 14px rgba(249,115,22,.35)}
.dt--on small{color:var(--v5-orange-d)}
.dots--one{display:flex;align-items:center;gap:18px}
.dots--one .dt i{width:64px;max-width:none;font-size:14px}
.dots__e{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:var(--v5-ink);background:#fff;border-radius:999px;padding:9px 16px;box-shadow:var(--v5-sh-1)}
.dots__e .ic{width:18px;height:18px;color:var(--v5-green);stroke-width:2.6}
.sch__tot{text-align:right}
.sch__tot small{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--v5-ink-3)}
.sch__tot b{font-size:32px;letter-spacing:-.035em;color:var(--v5-ink);line-height:1.1}
.nos{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:26px}
.nos span{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px 0 10px;border-radius:999px;background:#fff;border:1px solid var(--v5-line);box-shadow:var(--v5-sh-1);font-weight:800;font-size:15px;color:var(--v5-ink)}
.nos i{width:26px;height:26px;border-radius:50%;background:var(--v5-green-50);display:grid;place-items:center;color:var(--v5-green)}
.nos .ic{width:15px;height:15px;stroke-width:3}

/* after year one */
.yr{display:grid;grid-template-columns:1.1fr .9fr;border-radius:var(--v5-r-xl);background:var(--v5-butter-50);overflow:hidden;position:relative}
.yr__l{padding:50px 52px}
.yr h2{font-size:34px;margin:12px 0 12px;max-width:470px}
.yr p{max-width:460px}
.yr__k{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 28px;max-width:500px}
.yr__k span{display:inline-flex;align-items:center;gap:7px;background:#fff;border-radius:999px;padding:8px 14px 8px 11px;font-weight:800;font-size:14px;color:var(--v5-ink);box-shadow:var(--v5-sh-1)}
.yr__k .ic{width:16px;height:16px;color:var(--v5-green);stroke-width:2.8}
.yr__r{position:relative;background:linear-gradient(160deg,#FFD35C,#FFC531);min-height:420px}
.yr__r img{position:absolute;right:18px;bottom:0;height:370px;width:auto;filter:drop-shadow(0 10px 18px rgba(11,31,51,.22))}
.yr__c{position:absolute;left:30px;top:44px;width:250px;display:grid;gap:6px;z-index:2}
.yr__b{border-radius:18px;padding:18px 20px;background:#fff;box-shadow:var(--v5-sh-2);display:flex;flex-direction:column;gap:3px}
.yr__b span{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--v5-ink-3)}
.yr__b b{font-size:24px;color:var(--v5-ink);letter-spacing:-.025em;line-height:1.15}
.yr__b b small{font-size:14px;font-weight:700;color:var(--v5-ink-2);letter-spacing:0}
.yr__b>small{font-size:13px;font-weight:600;color:var(--v5-ink-3);margin-top:2px}
.yr__b--1{border-left:6px solid var(--v5-orange)}
.yr__b--2{background:var(--v5-ink);transform:translateX(34px)}
.yr__b--2 span{color:#9FB0C4}.yr__b--2 b{color:#fff}.yr__b--2 b small{color:#C4CEDA}.yr__b--2>small{color:#9FB0C4}
.yr__a{justify-self:center;width:34px;height:34px;border-radius:50%;background:var(--v5-ink);display:grid;place-items:center;color:#fff;transform:rotate(90deg)}
.yr__a .ic{width:16px;height:16px}

/* extras */
.px{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pxc{display:flex;flex-direction:column;border-radius:var(--v5-r-lg);background:#fff;border:1px solid var(--v5-line);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.pxc:hover{transform:translateY(-4px);box-shadow:var(--v5-sh-2)}
.pxc__v{height:150px;position:relative;overflow:hidden;background:var(--v5-tc);display:flex;align-items:center;justify-content:center;gap:12px}
.pxc__v .lg,.pxc__v .bc,.pxc__v .gcard{position:relative;right:auto;top:auto}
.pxc__v .bc{transform:rotate(-5deg)}
.pxc__v .lg{width:134px;height:82px}
.pxc__v .gcard{width:190px}
.pxc__v .fly{transform:rotate(-4deg)}
.pxc__v .bars{display:flex;align-items:flex-end;gap:9px;height:86px}
.pxc__v .bars i{width:20px;border-radius:6px 6px 0 0;background:#9BD4B2}
.pxc__v .bars i:last-child{background:var(--v5-green)}
.sw{display:grid;grid-template-columns:repeat(2,26px);gap:6px}
.sw i{width:26px;height:26px;border-radius:8px;box-shadow:var(--v5-sh-1)}
.xp{display:grid;gap:6px;width:150px}
.xp span{background:#fff;border-radius:9px;padding:6px 10px;font-size:11px;font-weight:800;color:var(--v5-ink);box-shadow:var(--v5-sh-1)}
.xp .xp__n{display:flex;align-items:center;gap:5px;background:var(--v5-orange);color:var(--v5-ink);transform:translateX(10px)}
.xp .ic{width:12px;height:12px;stroke-width:3}
.pxc__b{padding:16px 20px 20px;display:flex;flex-direction:column;flex:1}
.pxc__b h3{font-size:17px;line-height:1.25;min-height:43px}
.pxc__p{margin-top:8px;display:flex;align-items:baseline;gap:6px}
.pxc__p b{font-size:32px;letter-spacing:-.035em;color:var(--v5-ink);line-height:1}
.pxc__p small{font-size:13.5px;font-weight:700;color:var(--v5-ink-3)}
.pxc__g{margin-top:12px;display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14px;color:var(--v5-ink)}
.pxc__g .ic{width:16px;height:16px;color:var(--v5-orange-d);transition:transform .2s ease}
.pxc:hover .pxc__g .ic{transform:translateX(3px)}

@media (max-width:1000px){
  .ev{grid-template-columns:repeat(2,1fr)}
  .px{grid-template-columns:repeat(2,1fr)}
  .sch__r{grid-template-columns:1fr auto;gap:16px 20px}
  .sch__r .dots{grid-column:1/-1;grid-row:2}
  .yr{grid-template-columns:minmax(0,1fr)}
  .yr__r{min-height:340px}
  .yr__l{padding:40px 36px}
}
@media (max-width:640px){
  .prh{padding-bottom:44px}
  .prh__in{padding-top:28px}
  .prh h1{font-size:32px}
  .prh__d,.prh .dood--1{display:none}
  .prh .pks{padding-top:6px}
  .prh__n{margin-top:18px;font-size:14px}
  .ev{gap:10px}
  .ev__t{grid-template-columns:1fr;row-gap:8px;padding:16px 14px}
  .ev__t i{grid-row:auto;width:40px;height:40px;border-radius:12px}
  .ev__t b{font-size:15px}
  .ev__t span{font-size:12.5px}
  .cmp--p .cmp__grp th{width:auto;position:sticky;left:0;background:var(--v5-soft);box-shadow:none;font-size:11.5px}
  .cmp--p .rec{font-size:10px;padding:3px 8px}
  .sch__r{padding:18px 16px;grid-template-columns:1fr auto}
  .sch__w b{font-size:17px}
  .sch__tot b{font-size:26px}
  .dots{grid-template-columns:repeat(6,1fr);gap:10px 4px}
  .dt i{max-width:46px;font-size:11px}
  .dots--one{flex-wrap:wrap;gap:10px}
  .dots__e{font-size:13.5px;padding:8px 12px}
  .nos span{height:42px;font-size:14px}
  .yr{border-radius:var(--v5-r-lg);grid-template-columns:minmax(0,1fr)}
  .yr__l{min-width:0}
  .yr__l{padding:30px 22px}
  .yr h2{font-size:26px}
  .yr__k span{font-size:13px;padding:7px 11px 7px 9px}
  .yr .btn{width:100%;height:auto;min-height:50px;padding:10px 18px;text-align:center;white-space:normal;justify-content:center}
  .yr__r{min-height:330px}
  .yr__c{left:16px;top:26px;width:200px}
  .yr__b{padding:13px 15px}
  .yr__b b{font-size:20px}
  .yr__b--2{transform:translateX(20px)}
  .yr__r img{height:250px;right:6px}
  .px{gap:12px}
  .pxc__v{height:104px}
  .pxc__v>*{transform:scale(.7)}
  .pxc__v .bc{transform:rotate(-5deg) scale(.7)}
  .pxc__v .fly{transform:rotate(-4deg) scale(.7)}
  .pxc__b{padding:12px 14px 16px}
  .pxc__b h3{font-size:14.5px;min-height:36px}
  .pxc__p b{font-size:26px}
  .pxc__g{font-size:13px}
}

/* =====================================================================================================
   PRICING FITS THE SCREEN (owner, 13 Oct 2026: "you should be able to see pricing cards in one screen without
   scrolling really"). On tablets in landscape and on laptops the heading, the pay switch and all three cards
   with their buttons are one screen: the heading and the switch share a row, and the picture at the top of
   each card takes the height that is left (and steps aside on the shortest screens).
   ===================================================================================================== */
@supports (zoom:1) and (height:1svh){
  @media (min-width:901px){
    .prh{padding-bottom:0}
    .prh__in{display:flex;flex-direction:column;height:calc(100svh / var(--v5-z,1) - 64px);min-height:640px;max-height:900px;padding-top:clamp(14px,2.6vh,34px);padding-bottom:clamp(14px,2.6vh,30px)}
    .prh__head{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px;align-items:end;text-align:left}
    .prh__head .pill{grid-column:1;justify-self:start;margin:0}
    .prh h1{grid-column:1;font-size:clamp(30px,min(3.1vw,5.2vh),46px);max-width:none;margin:clamp(8px,1.4vh,14px) 0 0}
    .prh .hero__sub{grid-column:1;margin:clamp(4px,1vh,10px) 0 0;max-width:none;font-size:clamp(15px,1.9vh,17.5px)}
    .prh .pay{grid-column:2;grid-row:1 / span 3;align-self:end;margin:0}
    .prh__d,.prh .dood{display:none}
    .prh .pks{flex:1 1 auto;min-height:0;padding-top:clamp(24px,3.6vh,38px)}
    .prh .pk{min-height:0}
    .prh .pk__vis{flex:1 1 0;min-height:0;height:auto;max-height:196px}
    .prh .pk__b{flex:0 0 auto}
    .prh__n{display:none}
  }
  /* the shortest laptop screens: no picture strip, tighter list, so the buttons are still on screen */
  @media (min-width:901px) and (max-height:700px){
    .prh .pk__vis{display:none}
    .prh .pk__b{padding-top:20px}
    .prh .pk ul{margin:12px 0 14px;padding-top:12px;gap:7px}
  }
  @media (min-width:901px) and (max-height:760px){
    .prh .hero__sub{display:none}
  }
}

/* =====================================================================================================
   PERFECTION PASS 13 Oct (core pages). Pricing: the heading no longer touches the screen edge on narrow phones;
   on big tall screens the card pictures are allowed their natural height instead of a thin strip.
   ===================================================================================================== */
@media (max-width:430px){.prh h1{font-size:29px}}
@supports (zoom:1) and (height:1svh){
  @media (min-width:1900px) and (min-height:1000px){
    .prh__in{max-height:1060px}
    .prh .pk__vis{max-height:340px}
  }
}

/* the Start-Up Package named as an optional bundle (13 October 2026) */
.cmp__b{margin-top:10px;font-size:16px}

/* 18 Oct 2026: the three card pictures are always the same full strip. The one-screen fit is dropped: it squashed or hid them. */
@media (min-width:641px){
  .prh__in{height:auto;min-height:0;max-height:none}
  .prh .pks{flex:none}
  .prh .pk{min-height:auto}
  .prh .pk__vis{display:block;flex:none;height:196px;min-height:196px;max-height:none}
}

/* 18 Oct 2026: at 320-380px the unbreakable underlined phrase of the heading ran to the screen edge; the size now follows the width so the 16px gutter holds. Words unchanged. */
@media (max-width:380px){.prh h1{font-size:clamp(22px,7.6vw,29px)}}

/* =====================================================================================================
   responsive A, 18 Oct 2026: the price line of an extras card wraps as a unit ("a month" stays together under the price),
   and the drawn examples shrink on the narrowest phones.
   ===================================================================================================== */
@media (max-width:640px){
  .pxc__p{flex-wrap:wrap;column-gap:6px;row-gap:2px}
  .pxc__p small{white-space:nowrap}
}
@media (max-width:380px){
  .pxc__v>*{transform:scale(.58)}
  .pxc__v .bc{transform:rotate(-5deg) scale(.58)}
  .pxc__v .fly{transform:rotate(-4deg) scale(.58)}
}

/* =====================================================================================================
   WP2, 21 Oct 2026: Pricing, phone first. One column, the recommended package first, price once, one action per card;
   then "Not sure?" (callback, quote), what managed means, the guarantee, five questions and the final band. The
   comparison, the payment schedule and the extras are desktop depth (.w2-dm in the markup).
   ===================================================================================================== */
.w2pg--pricing .prh .pks{position:relative;z-index:1}
.w2pg--pricing .prh__vat,.w2pg--pricing .vatn{text-align:center}
.w2pg--pricing .w2-gnear{padding-top:10px;padding-bottom:0}

@media (max-width:640px){
  .w2pg--pricing .prh{padding-bottom:6px}
  .w2pg--pricing .prh__in{padding-top:20px}
  .w2pg--pricing .prh__head .pill{display:none}
  .w2pg--pricing .prh h1{margin-top:0;font-size:30px}
  .w2pg--pricing .prh .hero__sub{font-size:15.5px;margin-top:10px;line-height:1.5}
  .w2pg--pricing .prh .pks{display:flex;flex-direction:column;gap:30px;padding-top:30px}
  .w2pg--pricing .prh .pk[data-k="five"]{order:-1}
  .w2pg--pricing .prh .pk[data-k="one"]{order:1}
  .w2pg--pricing .prh .pk[data-k="startup"]{order:2}
  .w2pg--pricing .prh .pk{box-shadow:var(--v5-sh-1)}
  .w2pg--pricing .prh .pk--rec{box-shadow:var(--v5-sh-2)}
  .w2pg--pricing .prh .pk__vis{display:none}
  .w2pg--pricing .prh .pk--rec .pk__vis{display:block;height:128px;border-radius:21px 21px 0 0}
  .w2pg--pricing .prh .pk--rec .pk__vis .tabs{display:none}
  .w2pg--pricing .prh .pk--rec .pk__vis .bz{transform:translateX(-50%) scale(.9);transform-origin:top center}
  .w2pg--pricing .prh .pk__b{padding:20px 18px 18px}
  .w2pg--pricing .prh .pk__n{font-size:20px}
  .w2pg--pricing .prh .pk__s{display:none}
  .w2pg--pricing .prh .pk ul{margin:14px 0 16px;padding-top:14px}
  .w2pg--pricing .prh .pk__f{gap:10px}
  .w2pg--pricing .prh .pk__f .btn{height:50px}
  .w2pg--pricing .prh .pk__more{font-size:13.5px;color:var(--v5-ink-2)}
  .w2pg--pricing .prh .pk__t{font-size:12.5px}
  .w2pg--pricing .prh__vat{margin-top:14px}
}

/* 22 Oct 2026 (owner: "make this center and look neater"): the heading and its line sit in the middle, not hard left */
@media (min-width:901px){
  .w2pg--pricing .prh__head{display:block;text-align:center}
  .w2pg--pricing .prh__head .pill{display:inline-flex}
  .w2pg--pricing .prh h1{max-width:900px;margin:14px auto 0;font-size:clamp(34px,min(3.7vw,5.6vh),50px);line-height:1.08;text-align:center}
  .w2pg--pricing .prh h1 .hl{white-space:normal}
  .w2pg--pricing .prh .hero__sub{max-width:620px;margin:12px auto 0;text-align:center;font-size:clamp(15.5px,1.15vw,18px);line-height:1.5}
  .w2pg--pricing .prh .pay{grid-column:auto;grid-row:auto;margin:16px auto 0}
}

/* =====================================================================================================
   /websites/ and /pay-monthly-websites/, redesigned 22 Oct 2026 (owner: "make the pages really good and dont get rid of
   them, just re design them to primestart standard"). template-parts/v5/selector.php and paymonthly.php.
   ===================================================================================================== */
.w2pg--seo .sxhero{position:relative;overflow:hidden;background:radial-gradient(760px 420px at 88% 30%,#FFE3CC 0%,rgba(255,227,204,0) 70%),radial-gradient(620px 360px at 8% 0%,#E6F1FF 0%,rgba(230,241,255,0) 70%),linear-gradient(180deg,#fff 0%,#FFF8F1 100%);text-align:left}
.sxhero__in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center;padding-top:30px;padding-bottom:64px}
.sxhero .crumbs{justify-content:flex-start}
.sxhero h1{font-size:clamp(34px,3.9vw,54px);line-height:1.06;margin:16px 0 0;max-width:640px}
.sxhero h1 .hl{white-space:normal;text-decoration:underline;text-decoration-color:var(--v5-orange);text-decoration-thickness:2.5px;text-underline-offset:.13em;text-decoration-skip-ink:none}
.sxhero h1 .hl svg{display:none}
.sxhero .phero__sub{margin:18px 0 0;max-width:560px;font-size:18px;line-height:1.55;text-align:left}
.sxhero__b{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.sxhero__b .btn{height:52px;padding:0 24px}
.sx-trust{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.sx-trust li{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:var(--v5-ink)}
.sx-card{position:relative;padding:24px;border-radius:28px;background:#fff;border:1px solid rgba(11,31,51,.06);box-shadow:0 30px 60px -28px rgba(11,31,51,.32),0 2px 8px rgba(11,31,51,.05)}
.sx-card__h{margin:0 0 6px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--v5-orange-d)}
.sx-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:10px;padding:14px 16px;border-radius:18px;background:var(--v5-soft);color:var(--v5-ink);text-decoration:none;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
.sx-row:hover{transform:translateX(3px);background:#fff;box-shadow:var(--v5-sh-1)}
.sx-row .w2i{width:44px;height:44px;border-radius:13px}
.sx-row .w2i .ic{width:22px;height:22px}
.sx-row__t b{display:block;font-size:16.5px;line-height:1.2}
.sx-row__t small{display:block;margin-top:2px;font-size:13.5px;font-weight:600;color:var(--v5-ink-2)}
.sx-row>.ic{width:16px;height:16px;color:var(--v5-ink-3)}
.sx-row--rec{background:var(--v5-ink);color:#fff}
.sx-row--rec:hover{background:#13304D}
.sx-row--rec .sx-row__t small{color:#C4CEDA}
.sx-row--rec em{font-style:normal;font-size:11.5px;font-weight:800;padding:5px 10px;border-radius:999px;background:var(--v5-orange);color:var(--v5-ink)}
.sx-card__help{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--v5-line);font-size:14.5px;font-weight:800;color:var(--v5-ink);text-decoration:none}
.sx-card__help .ic{width:16px;height:16px;color:var(--v5-orange-d)}
.sx-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sx-tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sx-tile{display:flex;flex-direction:column;align-items:flex-start;padding:26px 24px 24px;border-radius:24px;background:#fff;border:1px solid var(--v5-line);box-shadow:var(--v5-sh-1);transition:transform .22s ease,box-shadow .22s ease}
.sx-tile:hover{transform:translateY(-4px);box-shadow:var(--v5-sh-2)}
.sx-tile--o{background:linear-gradient(180deg,#FFF6EE 0%,#fff 70%)}
.sx-tile--b{background:linear-gradient(180deg,#F1F6FF 0%,#fff 70%)}
.sx-tile--g{background:linear-gradient(180deg,#EFFAF3 0%,#fff 70%)}
.sx-tile--y{background:linear-gradient(180deg,#FFF9E3 0%,#fff 70%)}
.sx-tile .w2i,.sx-vs__c .w2i,.sx-own__c .w2i,.sx-steps .w2i{width:48px;height:48px;border-radius:14px}
.sx-tile .w2i .ic,.sx-vs__c .w2i .ic,.sx-own__c .w2i .ic,.sx-steps .w2i .ic{width:24px;height:24px}
.sx-tile h3{margin:16px 0 0;font-size:18.5px;line-height:1.25}
.sx-tile p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--v5-ink-2)}
.sx-tile__a{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px;font-size:14.5px;font-weight:800;color:var(--v5-ink);text-decoration:none}
.sx-tile__a .ic{width:15px;height:15px;color:var(--v5-orange-d);transition:transform .18s ease}
.sx-tile__a:hover .ic{transform:translateX(3px)}
.sx-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1000px;margin:0 auto}
.sx-vs__c{display:flex;flex-direction:column;align-items:flex-start;padding:32px;border-radius:28px;border:1px solid var(--v5-line)}
.sx-vs__c--o{background:linear-gradient(160deg,#FFF3E8 0%,#fff 75%)}
.sx-vs__c--b{background:linear-gradient(160deg,#EEF4FF 0%,#fff 75%)}
.sx-vs__c h3{margin:18px 0 0;font-size:22px}
.sx-vs__c p{margin:10px 0 0;font-size:15.5px;line-height:1.6;color:var(--v5-ink-2)}
.w2pg--seo .wmg--nohead{margin-top:30px}
.w2pg--seo .wmg--nohead .wmg__chips{margin-top:0}
.sx-faqb{margin:16px 0 0}
.sx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:none}
.sx-steps li{position:relative;padding:28px 26px 26px;border-radius:24px;background:#fff;border:1px solid var(--v5-line);box-shadow:var(--v5-sh-1)}
.sx-steps__n{position:absolute;right:22px;top:20px;font-size:44px;line-height:1;font-weight:800;letter-spacing:-.04em;color:#EEF1F5}
.sx-steps h3{margin:16px 0 0;font-size:19px}
.sx-steps p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--v5-ink-2)}
.sx-mo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:960px;margin:0 auto}
.sx-mo__c{position:relative;display:flex;flex-direction:column;padding:30px;border-radius:28px;background:#fff;border:1px solid var(--v5-line);box-shadow:var(--v5-sh-1)}
.sx-mo__c--rec{border:2px solid var(--v5-ink);box-shadow:var(--v5-sh-2)}
.sx-mo__c .pk__flag{position:absolute;left:50%;top:-14px;transform:translateX(-50%)}
.sx-mo__h{display:flex;align-items:center;gap:14px}
.sx-mo__h .w2i{width:46px;height:46px;border-radius:14px}
.sx-mo__h .w2i .ic{width:23px;height:23px}
.sx-mo__h h3{margin:0;font-size:21px}
.sx-mo__p{margin:20px 0 0;font-size:15px;color:var(--v5-ink-2)}
.sx-mo__p b{display:block;font-size:30px;line-height:1.15;letter-spacing:-.03em;color:var(--v5-ink)}
.sx-mo__p span{display:block;margin-top:4px;font-weight:700}
.sx-mo__o{display:inline-flex;align-self:flex-start;margin:14px 0 0;padding:7px 13px;border-radius:999px;background:var(--v5-green-50);font-size:13.5px;font-weight:800;color:var(--v5-green)}
.sx-mo__b{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:auto;padding-top:22px}
.sx-mo__b .sx-tile__a{margin-top:0;padding-top:0}
.sx-own{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.sx-own__c{display:flex;flex-direction:column;align-items:flex-start;padding:34px;border-radius:28px;background:linear-gradient(160deg,#EEFAF2 0%,#fff 80%);border:1px solid #D4EEDF}
.sx-own__c--y{background:linear-gradient(160deg,#FFF8DD 0%,#fff 80%);border-color:#F3E3A8}
.sx-own__c .w2i{margin-top:16px}
.sx-own__c h2{margin:16px 0 0;font-size:28px}
.sx-own__c p{margin:12px 0 0;font-size:16px;line-height:1.6;color:var(--v5-ink-2)}
.sx-who{list-style:none;margin:26px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.sx-who li{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:999px;background:#fff;border:1px solid var(--v5-line);box-shadow:var(--v5-sh-1);font-weight:800;font-size:15px;color:var(--v5-ink)}
.sx-sched .sx-card__h{margin-bottom:16px}
.sx-dots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.sx-dots li{display:grid;place-items:center;aspect-ratio:1;border-radius:14px;background:var(--v5-soft);border:1px solid var(--v5-line);font-size:14px;font-weight:800;color:var(--v5-ink-3)}
.sx-dots li.is-now{background:var(--v5-orange);border-color:var(--v5-orange);color:var(--v5-ink);box-shadow:0 10px 20px -8px rgba(249,115,22,.6)}
.sx-sched__k{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-size:13.5px;font-weight:700;color:var(--v5-ink-2)}
.sx-sched__k span{display:inline-flex;align-items:center;gap:7px}
.sx-sched__k i{width:12px;height:12px;border-radius:4px;background:var(--v5-soft);border:1px solid var(--v5-line)}
.sx-sched__k i.is-now{background:var(--v5-orange);border-color:var(--v5-orange)}
.sx-sched__own{display:flex;align-items:center;gap:14px;margin-top:18px;padding:14px 16px;border-radius:18px;background:var(--v5-green-50)}
.sx-sched__own .w2i{width:42px;height:42px;border-radius:12px}
.sx-sched__own b{display:block;font-size:15.5px;color:var(--v5-ink)}
.sx-sched__own small{display:block;margin-top:2px;font-size:13px;font-weight:600;color:var(--v5-ink-2)}
@media (max-width:1000px){
  .sxhero__in{grid-template-columns:minmax(0,1fr);gap:34px;padding-bottom:48px}
  .sxhero__v{max-width:520px}
  .sx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-tiles--3,.sx-steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .sxhero__in{padding-top:18px;gap:26px}
  /* phone hero copy is centred on every page (owner, 10 Sep 2026; tests/test-mobile-hero.php) */
  .sxhero__t{text-align:center}
  .sxhero .crumbs{justify-content:center}
  .sxhero h1,.sxhero .phero__sub{margin-left:auto;margin-right:auto;text-align:center}
  .sxhero__b,.sx-trust{justify-content:center}
  .sxhero h1{font-size:31px}
  .sxhero .phero__sub{font-size:16px}
  .sxhero__b .btn{flex:1 1 100%;justify-content:center}
  .sx-trust{gap:8px 16px}
  .sx-trust li{font-size:13.5px}
  .sx-card{padding:18px;border-radius:22px}
  .sx-tiles,.sx-vs,.sx-mo,.sx-own{grid-template-columns:minmax(0,1fr);gap:14px}
  .sx-tile,.sx-vs__c,.sx-mo__c,.sx-own__c{padding:22px 20px;border-radius:22px}
  .sx-own__c h2{font-size:24px}
  .sx-mo__p b{font-size:26px}
  .sx-dots{gap:8px}
  .sx-dots li{border-radius:11px;font-size:13px}
  .sx-row--rec em{display:none}
}

/* "Looking for cheap web design without cutting corners?" boxes: a soft tint, an icon, a lift (owner, 22 Oct 2026) */
.w2pg--pricing .bsp__c--t{--v5-bsc:#EAF2FF;--v5-bsb:#D3E4FF;border:1px solid var(--v5-bsb);background:linear-gradient(180deg,var(--v5-bsc) 0%,#fff 70%);box-shadow:var(--v5-sh-1);transition:transform .22s ease,box-shadow .22s ease}
.w2pg--pricing .bsp__c--t:hover{transform:translateY(-4px);box-shadow:var(--v5-sh-2)}
.w2pg--pricing .bsp__c--g{--v5-bsc:#E8F8EF;--v5-bsb:#CBEAD9}
.w2pg--pricing .bsp__c--y{--v5-bsc:#FFF7D6;--v5-bsb:#F4E2A0}
.w2pg--pricing .bsp__c--t .w2i{width:46px;height:46px;border-radius:14px;background:#fff;box-shadow:var(--v5-sh-1);margin-bottom:14px}
.w2pg--pricing .bsp__c--t .w2i .ic{width:23px;height:23px}