/* Compact checkout with neutral charcoal surfaces and a soft white glow. */
body.sn-suite[data-product=catalogue]{--ink:#f4f4f6;--heading:#f4f4f6;--text:#fff;--text-dim:#fff;--body:#fff;--muted:#fff;--text-mute:#fff;--line:#ffffff26;--surface:#171719;--surface-2:#202023;--accent:#f4f4f6;--soft:#f4f4f6;--brand:#c6ff3d;--ok:#c6ff3d;--accent-wash:#ffffff0c;--bg:#050506;background:var(--bg);color:var(--text);color-scheme:dark}
.sn-suite[data-product=catalogue]::before,.sn-suite[data-product=catalogue]::after{display:none}
.sn-suite[data-product=catalogue] #sn-header .announcement-bar{background:#020203!important}
.sn-suite[data-product=catalogue] .sn-content :is(h1,h2,h3){color:var(--ink)}
.sn-suite[data-product=catalogue] .sn-content h1{font-size:clamp(28px,3vw,40px)!important;margin-bottom:10px!important}
.sn-suite[data-product=catalogue] .sn-workspace{padding-top:24px;gap:28px}
.sn-suite[data-product=catalogue] .sn-customer-rail{border-color:var(--line);box-shadow:none}
.sn-suite[data-product=catalogue] .sn-customer-rail :is(summary,a,p){color:var(--muted)}
.sn-suite[data-product=catalogue] .sn-workspace-brand{color:var(--ink)!important;border-color:var(--line)!important}
.sn-suite[data-product=catalogue] .sn-workspace-brand small{color:var(--muted)}
.sn-suite[data-product=catalogue] .sn-customer-rail a.active{color:var(--accent);background:var(--accent-wash);box-shadow:inset 2px 0 var(--accent)}
.sn-suite[data-product=catalogue] .sn-rail-help{border-color:var(--line)}
.sn-suite[data-product=catalogue] .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0 32px;margin:24px auto 0}
.sn-suite[data-product=catalogue] .step{height:44px;min-width:0;margin:0;padding:8px 12px;justify-content:center;gap:7px;border-radius:10px;background:#171719;border-color:var(--line);font-size:13px;line-height:1.2;white-space:nowrap}
.sn-suite[data-product=catalogue] .step b{flex:none;background:#2b2b30;color:var(--muted)}
.sn-suite[data-product=catalogue] .step.on{border-color:var(--accent);background:var(--accent-wash);color:var(--ink)}
.sn-suite[data-product=catalogue] .step.done{color:var(--ok);border-color:#ffffff40}
.sn-suite[data-product=catalogue] .step:is(.on,.done) b{background:var(--accent);color:#10130b}
.sn-suite[data-product=catalogue] :is(.card,.mbox,#main){padding:24px;border:1px solid var(--line);border-radius:18px;background:#171719;box-shadow:0 4px 18px #00000020}
.sn-suite[data-product=catalogue] .side .card{background:#171719;border-color:var(--line)}
.sn-suite[data-product=catalogue] .side h2{font-size:20px!important;margin-bottom:12px}
.sn-suite[data-product=catalogue] .items{align-items:start}
.sn-suite[data-product=catalogue] .item{display:block;min-height:0;height:auto;padding:16px;border-radius:12px;background:#252528;border-color:var(--line);color:var(--ink);box-shadow:none;line-height:1.5;text-decoration:none}
.sn-suite[data-product=catalogue] .item:has(.item-select){padding:0}
.sn-suite[data-product=catalogue] .item .item-select{display:block;position:relative;width:100%;height:auto;min-height:0;padding:16px;text-align:left;border:0;border-radius:12px;background:transparent;color:var(--ink);white-space:normal;line-height:1.5}
.sn-suite[data-product=catalogue] .item b{font-size:16px;margin:0 0 4px;padding-right:28px}
.sn-suite[data-product=catalogue] .item .blurb{color:var(--muted);font-size:13px;line-height:1.55}
.sn-suite[data-product=catalogue] .item .price{font-weight:500;line-height:1.7}
.sn-suite[data-product=catalogue] .item .tick{top:16px;right:16px;border-color:#777780}
.sn-suite[data-product=catalogue] .item:hover{border-color:#ffffff70;transform:none}
.sn-suite[data-product=catalogue] .item.on{background:#22251b;border-color:#c6ff3d;box-shadow:0 0 0 1px #c6ff3d}
.sn-suite[data-product=catalogue] .item.on .tick{background:var(--accent);border-color:var(--accent);color:#10130b}
.sn-suite[data-product=catalogue] .item .qty{margin:0;padding:0 16px 16px}
.sn-suite[data-product=catalogue] .qty button{width:44px;height:44px;padding:0;color:var(--ink);background:#171719;border-color:var(--line);border-radius:8px}
.sn-suite[data-product=catalogue] :is(.btn,.payopt button,.hostOpt,.tabs button){color:var(--ink);border-radius:10px}
.sn-suite[data-product=catalogue] .btn{min-height:46px;padding:11px 18px;font-size:14px;line-height:1.5}
.sn-suite[data-product=catalogue] .btn.btn-p{background:#c6ff3d;border:1px solid #c6ff3d}
.sn-suite[data-product=catalogue] .btn.btn-p,
.sn-suite[data-product=catalogue] .btn.btn-p:is(:hover,:focus-visible,:active,:disabled),
.sn-suite[data-product=catalogue] .btn.btn-p *{color:#000!important;-webkit-text-fill-color:#000}
.sn-suite[data-product=catalogue] .btn-g{background:#171719;border:1px solid #ffffff40;color:var(--ink)}
.sn-suite[data-product=catalogue] .btn:not(:disabled):is(:hover,:focus-visible),.sn-suite[data-product=catalogue] .qty button:not(:disabled):is(:hover,:focus-visible){background:#dcff8a!important;color:#10130b!important;border-color:#c6ff3d!important;transform:none}
.sn-suite[data-product=catalogue] :is(.payopt button,.hostOpt){padding:16px;background:#171719;border:1px solid var(--line);white-space:normal}
.sn-suite[data-product=catalogue] :is(.payopt button.on,.hostOpt:hover){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--accent-wash)}
.sn-suite[data-product=catalogue] .tabs button{padding:10px;min-height:44px;color:var(--muted)}
.sn-suite[data-product=catalogue] .tabs button.on{background:#171719;color:var(--ink)}
.sn-suite[data-product=catalogue] :is(.f input,.f select,.voucher input,.otpInput){background:#171719;color:var(--ink);border:1px solid #55555e;border-radius:9px;font-size:16px;min-height:46px}
.sn-suite[data-product=catalogue] .pwwrap input{padding-right:68px}
.sn-suite[data-product=catalogue] .pwwrap button{border:0;background:transparent;color:var(--accent)}
.sn-suite[data-product=catalogue] .linky{color:var(--accent);border:0;padding:4px;background:transparent;white-space:normal}
.sn-suite[data-product=catalogue] :is(button,a,summary,input,select):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sn-suite[data-product=catalogue] .err{color:#ffaaaa;background:#391f22}
.sn-suite[data-product=catalogue] #groups{margin-top:18px;gap:10px}
.sn-suite[data-product=catalogue] .service-category{background:#171719;border:1px solid var(--line);border-radius:12px}
.sn-suite[data-product=catalogue] .service-category[open]{border-color:#ffffff50}
.sn-suite[data-product=catalogue] .service-category summary{padding:16px;min-height:0;gap:12px}
.sn-suite[data-product=catalogue] .service-category summary:hover{background:#ffffff08}
.sn-suite[data-product=catalogue] .category-icon{width:40px;height:40px;border-radius:10px;background:var(--accent-wash);color:var(--accent);border-color:#ffffff26}
.sn-suite[data-product=catalogue] .category-copy strong{color:var(--ink);font-size:16px}
.sn-suite[data-product=catalogue] .category-copy>span{color:var(--muted);margin-top:3px}
.sn-suite[data-product=catalogue] .category-chevron{color:var(--accent)}
.sn-suite[data-product=catalogue] .service-category>.items{padding:0 16px 16px}
/* Service list: each group carries the colour it has on the home page (--g, set per row). */
.sn-suite[data-product=catalogue] #groups{display:block;margin-top:18px}
.sn-suite[data-product=catalogue] .group-section+.group-section{margin-top:22px}
.sn-suite[data-product=catalogue] .group-heading{display:flex!important;align-items:center;gap:14px;margin:0 0 10px!important;font-size:12px!important;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)!important}
.sn-suite[data-product=catalogue] .group-heading .heading-line{flex:1;height:1px;background:linear-gradient(90deg,#ffffff2e,transparent)}
.sn-suite[data-product=catalogue] .group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sn-suite[data-product=catalogue] .service-category{--g:190 194 206;background:radial-gradient(ellipse at 100% 0%,rgb(var(--g)/.13),transparent 62%),#171719;box-shadow:inset 2px 0 rgb(var(--g)/.85);transition:border-color .2s,background .2s}
.sn-suite[data-product=catalogue] .service-category[open]{border-color:rgb(var(--g)/.55);
  background:radial-gradient(ellipse at 100% 0%,rgb(var(--g)/.32),transparent 65%),#171719}
.sn-suite[data-product=catalogue] .service-category.has-selected{border-color:rgb(var(--g)/.9);
  background:radial-gradient(ellipse at 100% 0%,rgb(var(--g)/.32),transparent 65%),#171719}
.sn-suite[data-product=catalogue] .service-category:hover{border-color:rgb(var(--g)/.9);
  background:radial-gradient(ellipse at 100% 0%,rgb(var(--g)/.32),transparent 65%),#171719}
.sn-suite[data-product=catalogue] .category-icon{background:rgb(var(--g)/.15);color:rgb(var(--g));border-color:rgb(var(--g)/.32)}
.sn-suite[data-product=catalogue] .category-chevron{color:#fff}
.sn-suite[data-product=catalogue] .category-copy>span{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.sn-suite[data-product=catalogue] .cat-pill{font-style:normal;font-size:11px;font-weight:650;line-height:1;padding:4px 8px;border-radius:99px;background:rgb(var(--g)/.2);color:rgb(var(--g));border:1px solid rgb(var(--g)/.4)}
.sn-suite[data-product=catalogue] .cat-price{display:flex;flex-direction:column;align-items:flex-end;flex:none;line-height:1.25;color:var(--muted);font-size:11.5px;text-align:right}
.sn-suite[data-product=catalogue] .cat-price b{color:var(--ink);font-size:15px;font-weight:650}
.sn-suite[data-product=catalogue] .group-section.featured .service-category{grid-column:1/-1;border-color:rgb(var(--g)/.45);background:radial-gradient(ellipse at 100% 0%,rgb(var(--g)/.24),transparent 65%),#171719}
.sn-suite[data-product=catalogue] .group-section.featured .service-category[open],
.sn-suite[data-product=catalogue] .group-section.featured .service-category.has-selected,
.sn-suite[data-product=catalogue] .group-section.featured .service-category:hover{border-color:rgb(var(--g)/.9);
  background:radial-gradient(ellipse at 100% 0%,rgb(var(--g)/.38),transparent 65%),#171719}
.sn-suite[data-product=catalogue] .group-section.featured .service-category summary{padding-block:26px}
.sn-suite[data-product=catalogue] .group-section.featured .category-icon{width:48px;height:48px}
.sn-suite[data-product=catalogue] .group-section.featured .category-copy strong{font-size:18px}
/* Chosen items pick up their group's colour too. */
.sn-suite[data-product=catalogue] :is(.service-category,.service-tile-wrap,.extras-group) .item.on{background:rgb(var(--g)/.1);border-color:rgb(var(--g));box-shadow:0 0 0 1px rgb(var(--g))}
/* An option that isn't picked yet recedes — 30% more transparent than the selected one */
.sn-suite[data-product=catalogue] :is(.service-category,.service-tile-wrap) .item:not(.on){opacity:.7}
.sn-suite[data-product=catalogue] :is(.service-category,.service-tile-wrap,.extras-group) .item.on .tick{background:rgb(var(--g));border-color:rgb(var(--g));color:#10130b}
.sn-suite[data-product=catalogue] .extras-group>h3{display:flex;align-items:center;gap:8px}
.sn-suite[data-product=catalogue] .extras-group>h3::before{content:'';width:8px;height:8px;border-radius:50%;background:rgb(var(--g))}
/* One tag style everywhere: a quiet tinted pill in the row's colour, never a solid block. */
.sn-suite[data-product=catalogue] :is(.cat-tag,.rec-tag,.free){display:inline-block;font-style:normal;font-size:11px;font-weight:650;letter-spacing:.02em;line-height:1;padding:4px 8px;margin-left:6px;border-radius:99px;background:rgb(var(--g,190 194 206)/.16);color:rgb(var(--g,190 194 206));border:1px solid rgb(var(--g,190 194 206)/.36);vertical-align:middle;white-space:nowrap}
.sn-suite[data-product=catalogue] .item .price .free{margin-left:8px}
.sn-suite[data-product=catalogue] .extras-group{margin-top:18px}
.sn-suite[data-product=catalogue] .extras-group>h3{margin:0 0 8px}
.sn-suite[data-product=catalogue] .extras-group .item .item-select{padding:12px 14px}
.sn-suite[data-product=catalogue] .extras-group .item .blurb{margin-bottom:4px;font-size:12.5px}
.sn-suite[data-product=catalogue] .extras-group .item b{font-size:15px}
.sn-suite[data-product=catalogue] .extras-more{margin-top:8px}
.sn-suite[data-product=catalogue] .extras-more>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--muted);padding:6px 2px}
.sn-suite[data-product=catalogue] .extras-more>summary::-webkit-details-marker{display:none}
.sn-suite[data-product=catalogue] .extras-more>summary::after{content:'+';color:#fff;font-size:16px;line-height:1}
.sn-suite[data-product=catalogue] .extras-more[open]>summary::after{content:'−'}
.sn-suite[data-product=catalogue] .extras-more>summary:hover{color:var(--ink)}
.sn-suite[data-product=catalogue] .extras-more>.items{margin-top:8px}
.sn-suite[data-product=catalogue] .items.two-col{display:flex;align-items:start;gap:10px}
.sn-suite[data-product=catalogue] .items.two-col>.col{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
@media(max-width:540px){.sn-suite[data-product=catalogue] .items.two-col{flex-direction:column}}
@media(max-width:650px){.sn-suite[data-product=catalogue] .group-grid{grid-template-columns:1fr}}
/* ---- Service list layout: open plan cards (Hosting/Website/All-in-one) + a tile grid that
   expands into the option list (Phone & calls, and anything the catalogue adds later). ---- */
.sn-suite[data-product=catalogue] .plan-stack{display:flex;flex-direction:column;gap:14px}
.sn-suite[data-product=catalogue] .plan-card{position:relative;padding:18px 20px;border:1px solid rgb(var(--g)/.4);border-radius:10px;background:radial-gradient(ellipse at 100% 0%,rgb(var(--g)/.16),transparent 65%),#10162b;box-shadow:inset 2px 0 rgb(var(--g)/.85)}
.sn-suite[data-product=catalogue] .plan-card.featured{border-color:rgb(var(--g)/.55);background:radial-gradient(ellipse at 100% 0%,rgb(var(--g)/.24),transparent 65%),#10162b}
.sn-suite[data-product=catalogue] .service-header{display:flex;align-items:center;gap:14px}
/* The separator under the header only makes sense once there's something below it to separate
   from — permanently-open cards always show it; collapsible ones only once expanded. */
.sn-suite[data-product=catalogue] .plan-card:not(.collapsible)>.service-header,
.sn-suite[data-product=catalogue] .plan-card.collapsible[open]>.service-header{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #ffffff1c}
.sn-suite[data-product=catalogue] .service-header .service-icon{width:44px;height:44px;flex:0 0 44px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgb(var(--g)/.15);color:rgb(var(--g));border:1px solid rgb(var(--g)/.32)}
.sn-suite[data-product=catalogue] .plan-card.featured .service-icon{width:50px;height:50px;flex-basis:50px}
.sn-suite[data-product=catalogue] .service-icon svg{width:20px;height:20px}
.sn-suite[data-product=catalogue] .service-main{flex:1;min-width:0}
.sn-suite[data-product=catalogue] .service-main h3{margin:0;font-size:17px;font-weight:650;color:var(--ink);text-transform:none}
.sn-suite[data-product=catalogue] .plan-card.featured .service-main h3{font-size:19px}
.sn-suite[data-product=catalogue] .service-main>span{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px;font-size:12.5px;color:var(--muted)}
.sn-suite[data-product=catalogue] .service-header .cat-price{flex:none}
.sn-suite[data-product=catalogue] .hosting-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.sn-suite[data-product=catalogue] .hosting-option{position:relative;padding:16px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#1b2340,#121830);color:var(--ink);transition:border-color .18s ease,background .18s ease,transform .18s ease,opacity .18s ease}
.sn-suite[data-product=catalogue] .hosting-option:hover{transform:translateY(-1px);border-color:rgb(var(--g)/.6)}
.sn-suite[data-product=catalogue] .hosting-option.on{border-color:rgb(var(--g)/.9);background:rgb(var(--g)/.1);box-shadow:0 0 0 1px rgb(var(--g))}
.sn-suite[data-product=catalogue] .hosting-option:not(.on){opacity:.75}
.sn-suite[data-product=catalogue] .hosting-option.off{opacity:.45}
.sn-suite[data-product=catalogue] .hosting-option-select{display:block;width:100%;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.sn-suite[data-product=catalogue] .hosting-option-select:disabled{cursor:not-allowed}
.sn-suite[data-product=catalogue] .hosting-option .radio{position:absolute;top:16px;right:16px;width:18px;height:18px;border-radius:50%;border:1.5px solid #ffffff45;background:#0d1424}
.sn-suite[data-product=catalogue] .hosting-option.on .radio{border-color:rgb(var(--g));box-shadow:inset 0 0 0 3px #0d1424,inset 0 0 0 9px rgb(var(--g))}
.sn-suite[data-product=catalogue] .hosting-option strong{display:block;padding-right:24px;margin-bottom:8px;font-size:14.5px;font-weight:650;color:var(--ink)}
.sn-suite[data-product=catalogue] .hosting-option p{margin:0 0 12px;min-height:54px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.sn-suite[data-product=catalogue] .hosting-option b{display:block;font-size:15px;font-weight:650;color:#fff}
.sn-suite[data-product=catalogue] .hosting-option small{display:block;margin-top:3px;font-size:11.5px;color:#ffffffa6}
.sn-suite[data-product=catalogue] .hosting-option small.free{display:block;width:100%;box-sizing:border-box;margin:12px 0 0;padding:7px 10px;text-align:center;font-size:12px;color:rgb(var(--g))}
.sn-suite[data-product=catalogue] .hosting-option .qty{margin-top:10px}
.sn-suite[data-product=catalogue] .hosting-option.custom{display:flex;flex-direction:column;justify-content:center;text-decoration:none}
.sn-suite[data-product=catalogue] .hosting-option.custom b{color:rgb(var(--g))}
/* Collapsible plan cards (Hosting and every phone group): a plain +/x, no circle behind it. */
.sn-suite[data-product=catalogue] .service-header .plus{flex:none;color:var(--muted);font-size:22px;font-weight:300;line-height:1;transition:transform .18s ease,color .18s ease}
.sn-suite[data-product=catalogue] .plan-card.collapsible:hover>.service-header .plus{color:#fff}
.sn-suite[data-product=catalogue] .plan-card.collapsible[open]>.service-header .plus{transform:rotate(45deg)}
.sn-suite[data-product=catalogue] .plan-card.collapsible>.service-header{list-style:none;cursor:pointer}
.sn-suite[data-product=catalogue] .plan-card.collapsible>.service-header::-webkit-details-marker{display:none}
@media(max-width:650px){
  .sn-suite[data-product=catalogue] .service-header{flex-wrap:wrap;row-gap:10px}
  .sn-suite[data-product=catalogue] .service-header .cat-price{margin-left:58px}
}
.sn-suite[data-product=catalogue] .modal{z-index:200;background:#00000099;backdrop-filter:blur(5px);padding:16px}
.sn-suite[data-product=catalogue] .mbox{max-height:calc(100dvh - 32px);overscroll-behavior:contain;color:var(--ink)}
.sn-suite[data-product=catalogue] .mbtns{position:sticky;bottom:-24px;background:#171719;padding:16px 0 8px;margin-top:12px;border-top:1px solid var(--line)}
.sn-suite[data-product=catalogue] .hostOpt i{position:static;display:inline-block;margin-top:8px}
.sn-suite[data-product=catalogue] .tot .row{align-items:center}
.sn-suite[data-product=catalogue] #basket [data-rm]{min-width:32px;min-height:32px;padding:0;border:0;border-radius:6px;background:transparent;font-size:13px;color:var(--muted)}
.sn-suite[data-product=catalogue] #basket [data-rm]:hover{color:var(--ink);background:#ffffff14}
.sn-suite[data-product=catalogue] .domCard{background:#171719;border:1px solid var(--line)}
.sn-suite[data-product=catalogue] .domCard::before{display:none}
.sn-suite[data-product=catalogue] .domCard :is(.domName,.domLinePrice,.domTotalRow b,.domFeat b){color:var(--ink)}
.sn-suite[data-product=catalogue] .domCard select{background:#171719;color:var(--ink);border-color:var(--line)}
.sn-suite[data-product=catalogue] :is(.domLine,.domFeat){border-color:var(--line)}
@media(max-width:1100px){.sn-suite[data-product=catalogue] .sn-content>main{grid-row:2}.sn-suite[data-product=catalogue] .side{grid-row:3}}
@media(max-width:850px){.sn-suite[data-product=catalogue] .steps{margin:20px 0 0;padding:0 20px}.sn-suite[data-product=catalogue] .sn-customer-rail{background:#fff}.sn-suite[data-product=catalogue] .sn-workspace{gap:20px}}
@media(max-width:540px){.sn-suite[data-product=catalogue] .steps{gap:5px;padding:0 16px}.sn-suite[data-product=catalogue] .step{padding:8px 4px;gap:4px;font-size:10.5px}.sn-suite[data-product=catalogue] .step b{width:18px;height:18px;font-size:10px}.sn-suite[data-product=catalogue] .sn-workspace{padding:20px 16px 40px}.sn-suite[data-product=catalogue] :is(.card,.mbox,#main){padding:18px;border-radius:14px}.sn-suite[data-product=catalogue] .sn-content h1{font-size:28px!important}.sn-suite[data-product=catalogue] .mbtns{bottom:-18px;display:grid;grid-template-columns:1fr}.sn-suite[data-product=catalogue] .mbtns .btn{width:100%;white-space:normal}.sn-suite[data-product=catalogue] .secure{align-items:flex-start}.sn-suite[data-product=catalogue] .secure svg{flex:none;margin-top:3px}}
/* Checkout has no workspace navigation. Keep all four steps balanced on phones. */
body.sn-suite[data-product=catalogue]{background:radial-gradient(ellipse 75% 480px at 50% 90px,#ffffff14,transparent 78%),#050506}
.sn-suite[data-product=catalogue] .sn-workspace{grid-template-columns:minmax(0,1fr);max-width:1180px}
.sn-suite[data-product=catalogue] .steps{max-width:1180px}
.sn-suite[data-product=catalogue] #sn-header .top-bar{background:#08080be8!important}
.sn-suite[data-product=catalogue] .mbtns{background:#171719}
.sn-suite[data-product=catalogue] .qty button{background:#171719;color:var(--ink)}
.sn-suite[data-product=catalogue] .btn-g{background:#171719;color:var(--ink)}
.sn-suite[data-product=catalogue] .tabs button.on{background:#303034;color:var(--ink)}
@media(max-width:540px){
  .sn-suite[data-product=catalogue] .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 16px}
  .sn-suite[data-product=catalogue] .step{height:44px;padding:8px 12px;font-size:13px;gap:8px;justify-content:flex-start;white-space:normal}
  .sn-suite[data-product=catalogue] .step b{width:20px;height:20px;flex:0 0 20px;font-size:11px}
}
/* Account-menu basket review retains the current checkout step. */
.sn-suite[data-product=catalogue].basket-open{overflow:hidden}
.sn-suite[data-product=catalogue] .basket-dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(460px,100%);max-width:100%;height:100dvh;max-height:100dvh;padding:20px;border:0;border-left:1px solid var(--line);background:#111113;color:var(--ink);overflow:auto;overscroll-behavior:contain}
.sn-suite[data-product=catalogue] .basket-dialog::backdrop{background:#0009;backdrop-filter:blur(4px)}
.sn-suite[data-product=catalogue] .basket-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.sn-suite[data-product=catalogue] .basket-dialog-top .btn{min-width:44px;padding:8px}
.sn-suite[data-product=catalogue] .basket-dialog .side{position:static;top:auto;outline:none}
.sn-suite[data-product=catalogue] .basket-dialog .card{padding:18px}
.sn-suite[data-product=catalogue] .basket-dialog .note{font-size:12px}
.sn-suite[data-product=catalogue] .basket-dialog .row>span:first-child{min-width:0;overflow-wrap:anywhere}
.sn-suite[data-product=catalogue] .signup-optional{border-top:1px solid var(--line);margin:8px 0 14px;padding-top:4px}
.sn-suite[data-product=catalogue] .signup-optional summary{min-height:44px;padding:12px 0;color:var(--ink);cursor:pointer;font-size:14px;line-height:1.5}
.sn-suite[data-product=catalogue] .signup-optional summary span{color:var(--muted);font-size:12px;margin-left:6px}
.sn-suite[data-product=catalogue] .signup-optional>p{margin:0 0 12px}

/* ---- Free-trial / info card: icon + divider + copy -----------------------------
   A light-blue glow card (the same blue already used for tags and yearly savings),
   so lime stays reserved for the primary action. Used for the basket's free-trial
   note and the order-review "after today" note. */
.sn-suite[data-product=catalogue] .trial-card{border-color:rgb(133 196 255/.4);
  background:linear-gradient(135deg,#152a48f2,#091629f2);
  box-shadow:0 10px 26px #00000030,inset 0 1px 0 #ffffff08}
.sn-suite[data-product=catalogue] .trial-card::before{content:'';position:absolute;width:130px;height:130px;
  left:-40px;top:-55px;background:rgb(133 196 255/.16);filter:blur(45px);pointer-events:none}
.sn-suite[data-product=catalogue] .trial-icon{background:rgb(133 196 255/.12);border-color:rgb(133 196 255/.32)}
.sn-suite[data-product=catalogue] .trial-icon svg{stroke:rgb(133 196 255)}
.sn-suite[data-product=catalogue] .trial-divider{background:rgb(133 196 255/.25)}
.sn-suite[data-product=catalogue] .trial-title{color:#fff}
.sn-suite[data-product=catalogue] .trial-text{color:#c3cee2}
.sn-suite[data-product=catalogue] .basket-dialog .trial-card{padding:16px}

/* Reserve room on the right of CTA buttons for the chevron icon (checkout.css's
   own .btn padding is more specific than the base rule, so it must win here too). */
.sn-suite[data-product=catalogue] .btn-cta{padding-right:44px}
@media(max-width:540px){
  .sn-suite[data-product=catalogue] .trial-card{padding:16px;border-radius:12px}
  .sn-suite[data-product=catalogue] .trial-icon{width:40px;height:40px;flex:0 0 40px}
  .sn-suite[data-product=catalogue] .trial-icon svg{width:19px;height:19px}
  .sn-suite[data-product=catalogue] .trial-divider{margin:0 12px}
}

/* Checkout footer: brand, support and legal only — none of the marketing links. */
#sn-footer .checkout-footer{background:#000;border-top:1px solid #ffffff1f;margin-top:32px;padding:48px max(24px,calc((100vw - 1180px)/2)) 24px;font:400 14px/1.6 'Plus Jakarta Sans',sans-serif;color:#9a9ca8}
#sn-footer .checkout-footer p{margin:0}
#sn-footer .checkout-footer-main{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(150px,1fr));gap:40px 56px;align-items:start}
#sn-footer .checkout-footer-wordmark{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:17px;text-decoration:none;margin-bottom:14px}
#sn-footer .checkout-footer-brand p{max-width:46ch;margin-bottom:10px}
#sn-footer .checkout-footer-secure{font-size:13px;color:#8a8c98}
#sn-footer .checkout-footer-col{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
#sn-footer .checkout-footer-col h2{margin:0 0 6px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#fff}
#sn-footer .checkout-footer-col a{color:#c9cad2;text-decoration:none}
#sn-footer .checkout-footer-col a:hover,#sn-footer .checkout-footer-col a:focus-visible,#sn-footer .checkout-footer-wordmark:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
#sn-footer .checkout-footer-bottom{margin-top:36px;padding-top:20px;border-top:1px solid #ffffff1f;font-size:13px;color:#8a8c98}
@media(max-width:760px){
  #sn-footer .checkout-footer{padding:36px 20px 96px}
  #sn-footer .checkout-footer-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  #sn-footer .checkout-footer-brand{grid-column:1/-1}
}

/* ---- Restrained accent -------------------------------------------------------
   Lime is kept for the main action (Continue / Pay) and for success. Everything
   else is white or grey, or takes the colour of the service it belongs to. */
.sn-suite[data-product=catalogue] .step.on{border-color:#fff;box-shadow:0 0 0 1px #fff}
.sn-suite[data-product=catalogue] .step.done{color:var(--muted);border-color:var(--line)}
.sn-suite[data-product=catalogue] .step.done b{background:#4a5478;color:#dcdde4;font-size:0}
/* Ticks are drawn as a shape rather than typed as ✓, so they sit dead centre in the circle */
.sn-suite[data-product=catalogue] .step.done b::before,
.sn-suite[data-product=catalogue] .item.on .tick::after{content:'';display:block;margin-top:4px;width:10px;height:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.2l3.2 3.2L13 4.6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.2l3.2 3.2L13 4.6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.sn-suite[data-product=catalogue] .item .tick{font-size:0}
/* Selected-card tick only: nudge it up or down here (the step tick keeps the margin above) */
.sn-suite[data-product=catalogue] .item.on .tick::after{margin-top:1px}
/* Quantity stepper (Extra mailbox etc.): a compact joined control, "− 3 +".
   Wide card: it sits beside the text, left of the tick. Narrow card: it drops below the text. */
.sn-suite[data-product=catalogue] .item:has(.qty){container-type:inline-size}
.sn-suite[data-product=catalogue] .item .qty{align-items:center;gap:0;margin-top:0}
.sn-suite[data-product=catalogue] .item .qty button{width:28px;height:28px;min-height:28px;padding:0;font-size:15px;line-height:1;background:#ffffff0d;border:1px solid #ffffff33;color:#fff}
.sn-suite[data-product=catalogue] .item .qty button:first-child{border-radius:6px 0 0 6px!important}
.sn-suite[data-product=catalogue] .item .qty button:nth-child(3){border-radius:0 6px 6px 0!important}
.sn-suite[data-product=catalogue] .item .qty span:nth-child(2){display:grid;place-items:center;min-width:32px;height:28px;font-size:13px;font-weight:600;border:solid #ffffff33;border-width:1px 0;background:#ffffff05}
/* The word "users" is dropped: the price already says "per user" (delete this line to bring it back) */
.sn-suite[data-product=catalogue] .item .qty span:nth-child(4){display:none}
/* 300px = the card width at which there is room beside the text; change it to switch sooner or later */
@container (min-width:300px){
  .sn-suite[data-product=catalogue] .item:has(.qty) .item-select{padding-right:148px}
  .sn-suite[data-product=catalogue] .item .qty{position:absolute;top:50%;right:52px;transform:translateY(-50%);margin:0;padding:0}
}
/* A chosen plan: white outline and a slightly lighter fill; the tick is the signal */
.sn-suite[data-product=catalogue] .item.on,
.sn-suite[data-product=catalogue] :is(.service-category,.extras-group) .item.on{background:#ffffff10;border-color:#fff;box-shadow:0 0 0 1px #fff}
.sn-suite[data-product=catalogue] .item.on .tick,
.sn-suite[data-product=catalogue] :is(.service-category,.extras-group) .item.on .tick{background:#4a5478;border-color:#4a5478;color:#dcdde4}
/* Only the main action goes lime on hover; everything else lifts to a soft white */
.sn-suite[data-product=catalogue] .btn:not(.btn-p):not(:disabled):is(:hover,:focus-visible),
.sn-suite[data-product=catalogue] .qty button:not(:disabled):is(:hover,:focus-visible){background:#ffffff1f!important;color:#fff!important;border-color:#ffffffa6!important}
.sn-suite[data-product=catalogue] .side:focus{outline-color:#fff}
.sn-suite[data-product=catalogue] .basket-bar{border-color:#4285ff;border-radius:6px}
.sn-suite[data-product=catalogue] .basket-bar:focus-visible{outline-color:#4285ff}
/* Links and small controls are white, underlined where they are links */
.sn-suite[data-product=catalogue] :is(.linky,.hostAskLead b){text-decoration:underline;text-underline-offset:3px}
/* Tags share one light blue, whichever row they sit in */
.sn-suite[data-product=catalogue] :is(.cat-tag,.rec-tag){background:rgb(133 196 255/.16);color:rgb(133 196 255);border-color:rgb(133 196 255/.36)}

/* ---- Headings: white with a black outline and a little letter spacing ---------
   "Find your next service." is the page h1. "What would you like?" (the card h2)
   used to repeat it right underneath, so on step 1 it's kept for a11y only —
   the page h1 now carries the heading on its own, flush above the billing row.
   paint-order puts the outline behind the letters so it doesn't thin them out. */
.sn-suite[data-product=catalogue] #s2 .card>h2,
.sn-suite[data-product=catalogue] #s2b .card>h2,
/* Order complete: one calm card. A solid lime tick, a plain heading, what was paid, what happens next. */
.sn-suite[data-product=catalogue] #s5 .checkout-complete{text-align:left;padding:32px 28px}
.sn-suite[data-product=catalogue] #s5 .done-tick{width:56px;height:56px;border-radius:50%;background:#c6ff3d;display:grid;place-items:center;margin:14px 0 24px 8px;box-shadow:0 0 0 8px #c6ff3d1f}
.sn-suite[data-product=catalogue] #s5 .done-tick svg{width:28px;height:28px;fill:none;stroke:#0a0a0d;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sn-suite[data-product=catalogue] #s5 .card>h2{color:#fff;font-size:26px;font-weight:650;letter-spacing:-.02em!important;line-height:1.2;margin:0 0 8px;-webkit-text-stroke:0}
.sn-suite[data-product=catalogue] #s5 .done-lead{margin:0 0 22px;max-width:none;color:#c6ff3d;font-size:17px;font-weight:600;line-height:1.5}
.sn-suite[data-product=catalogue] #s5 .done-list{list-style:none;margin:0 0 26px;padding:18px 0 0;border-top:1px solid #ffffff1f;display:grid;gap:14px}
.sn-suite[data-product=catalogue] #s5 .done-list li{display:flex;gap:12px;align-items:flex-start;color:#d4d6dd;font-size:15px;line-height:1.6}
.sn-suite[data-product=catalogue] #s5 .done-list li[hidden]{display:none}
.sn-suite[data-product=catalogue] #s5 .done-list b{color:#fff;font-weight:600}
.sn-suite[data-product=catalogue] #s5 .done-dot{flex:0 0 auto;width:8px;height:8px;margin-top:9px;border-radius:50%;background:#c6ff3d}
.sn-suite[data-product=catalogue] #s5 .done-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 22px}
.sn-suite[data-product=catalogue] #s5 .done-actions .btn{flex:1 1 200px;justify-content:center;text-align:center;min-height:48px}
.sn-suite[data-product=catalogue] #s5 .done-terms{margin:0;max-width:none;color:#8d8f9a;font-size:12.5px;line-height:1.6}
.sn-suite[data-product=catalogue] #s5 .done-terms a{color:#aeb4be}
.sn-suite[data-product=catalogue] :is(#s1,#s3) .card>h2{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Line spacing for the page h1 only (the h2 keeps its own) */
.sn-suite[data-product=catalogue] .sn-content h1{line-height:.95;letter-spacing:.01em!important;color:#fff;}
/* ---- Step content sits inside one card with the progress bar and page heading, matching
   the basket's card alongside it — #main is the card now, so each step's own .card (and the
   billing row inside step 1) goes flush; only the billing row and each service card below
   keep their own box. */
.sn-suite[data-product=catalogue] #main>section>.card{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
/* The progress bar (moved inside #main, see buy.html) now just sits flush at the card's top,
   full width of its padding box — #main's own ID beats .steps's usual full-bleed centring. */
.sn-suite[data-product=catalogue] #main>.steps{max-width:none;margin:0 0 22px;padding:0}
.sn-suite[data-product=catalogue] .sn-page-heading{margin-top:0;position:relative;background:radial-gradient(560px 190px at 8% 25%,rgb(66 133 255/.16),transparent 72%);background-repeat:no-repeat}
/* Small label between the progress bar and the heading, so the jump from "Step 1 of 4" to the
   title reads as a deliberate beat rather than two headings stacked on top of each other. */
.sn-suite[data-product=catalogue] .page-eyebrow{margin:0;font-size:11px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:rgb(133 196 255/.75)}
.sn-suite[data-product=catalogue] .page-eyebrow:empty{display:none}

/* ---- Footer text: white too ------------------------------------------------- */
#sn-footer .checkout-footer,#sn-footer .checkout-footer-secure,#sn-footer .checkout-footer-bottom,#sn-footer .checkout-footer-col a{color:#fff}

/* ---- Deep navy background + lifted cards ------------------------------------------
   Page: navy with a blue glow behind the heading and a fainter one in the bottom-right corner.
   Cards: a light-to-dark gradient, a thin bright top edge and a soft shadow, so they sit above the page.
   Selected cards (.item.on) and their group colours are set elsewhere and still win over these. */
body.sn-suite[data-product=catalogue]{background:radial-gradient(ellipse 75% 480px at 50% 90px,rgba(48,107,195,.16),transparent 78%),radial-gradient(circle 460px at 0% 50%,rgba(48,107,195,.14),transparent 70%),radial-gradient(circle 460px at 100% 50%,rgba(48,107,195,.14),transparent 70%),radial-gradient(ellipse 55% 55% at 100% 100%,#3a5fd91f,transparent 70%) fixed,#050506}
.sn-suite[data-product=catalogue] #sn-header .top-bar{background:#08080be8!important}
.sn-suite[data-product=catalogue] :is(.card,.mbox,.side .card,#main){background:linear-gradient(180deg,rgb(10 14 31/.5),rgb(16 24 48/.5));border-color:#ffffff2e;box-shadow:inset 0 1px 0 #ffffff1a,0 8px 24px #00000059}
/* Step card: the same blue-glow treatment as the original service-panel mockup, instead of the flat navy every other card uses. */
.sn-suite[data-product=catalogue] #main{background:
    radial-gradient(700px 420px at 15% 0%,rgba(48,107,195,.13),transparent 68%),
    radial-gradient(600px 350px at 95% 60%,rgba(40,89,175,.08),transparent 72%),
    linear-gradient(145deg,#0c1423 0%,#090f1c 55%,#070b13 100%)}
.sn-suite[data-product=catalogue] .item{background:linear-gradient(180deg,#1b2340,#121830);border-color:#ffffff2e;box-shadow:inset 0 1px 0 #ffffff14}
.sn-suite[data-product=catalogue] .service-category,
.sn-suite[data-product=catalogue] .group-section.featured .service-category{background-color:#10162b;border-color:#ffffff2e;box-shadow:inset 2px 0 rgb(var(--g)/.85),inset 0 1px 0 #ffffff14,0 6px 18px #00000040,0 0 26px rgb(66 133 255/.16)}
.sn-suite[data-product=catalogue] .step{background:#111730}
.sn-suite[data-product=catalogue] :is(.domCard,.hostOpt){background:linear-gradient(180deg,#1b2340,#121830);border-color:#ffffff2e}
/* Black fields, no grey outline (the border stays, but transparent, so errors can still turn it red) */
.sn-suite[data-product=catalogue] :is(.f input,.f select,.voucher input,.otpInput,.domCard select){background:#0a0f1e;border-color:transparent}
/* premium.css colours every input with a very specific selector, so this one has to match it to win */
.sn-suite[data-product=catalogue] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
.sn-suite[data-product=catalogue] textarea,
.sn-suite[data-product=catalogue] select{background:#0a0f1e;border-color:transparent}
/* Payment method chooser (Card / Account balance): black, no outline until selected */
.sn-suite[data-product=catalogue] .payopt button{background:#0a0f1e;border-color:transparent}
.sn-suite[data-product=catalogue] .mbtns{background:#0e1322}
.sn-suite[data-product=catalogue] .basket-dialog,
.sn-suite[data-product=catalogue] .basket-bar{background:#0b0b0d}
/* Leftover neutral greys, tinted to sit with the navy */
.sn-suite[data-product=catalogue] .step b{background:#262e4d}
.sn-suite[data-product=catalogue] .step.on b{background:#f4f4f6}
.sn-suite[data-product=catalogue] .item .tick{border-color:#7a86ad}
.sn-suite[data-product=catalogue] .btn-g{background:#000;border:1px solid #fff;color:#fff}
.sn-suite[data-product=catalogue] .btn-g:hover,.sn-suite[data-product=catalogue] .btn-g:focus-visible{background:#fff;color:#000;border-color:#fff}
.sn-suite[data-product=catalogue] .tabs button.on{background:#2a3354}

/* ---- Progress: "STEP 2 OF 4" over a slim four-segment bar (replaces the four pills) ----
   The four .step elements stay in the page (the script sets on / done on them, and screen
   readers still read their names); here they are drawn as bar segments with the text hidden.
   Segment colours: .step (not reached) / .step.done (finished) / .step.on (current). */
.sn-suite[data-product=catalogue] .steps{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:10px;column-gap:6px;margin-top:20px;align-items:center}
.sn-suite[data-product=catalogue] .steps-label{grid-column:1/-1;margin:0;font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:rgb(255 255 255/.55)}
.sn-suite[data-product=catalogue] .steps-label .step-num{color:#c6ff3d;font-weight:700}
.sn-suite[data-product=catalogue] .step,
.sn-suite[data-product=catalogue] .step.on,
.sn-suite[data-product=catalogue] .step.done{height:4px;min-height:0;padding:0;margin:0;border:0;border-radius:99px;background:#ffffff26;box-shadow:none;font-size:0;line-height:0;color:transparent;transition:background .25s}
.sn-suite[data-product=catalogue] .step.done{background:#c6ff3d}
.sn-suite[data-product=catalogue] .step.on{background:#c6ff3d}
.sn-suite[data-product=catalogue] .step b{display:none}


/* ---- Squarer cards ---------------------------------------------------------- */
.sn-suite[data-product=catalogue] :is(.card,.mbox,#main){border-radius:8px}
.sn-suite[data-product=catalogue] :is(.service-category,.item,.item .item-select,.step,.domCard,.payopt button,.hostOpt){border-radius:6px}
.sn-suite[data-product=catalogue] .category-icon{border-radius:6px}

/* ---- Billing period: Monthly | Yearly ---------------------------------------------
   One control on the service list, the extras and the review (buy.html fills the
   [data-billing] slots). A dark track with a small blue accent stripe and icon, the
   chosen side lifted to a blue-grey gradient, and the saving as a light-blue pill. */
.sn-suite[data-product=catalogue] .billing{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;min-height:68px;margin:0 0 16px;padding:10px 14px 10px 18px;border:1px solid rgb(133 196 255/.4);border-radius:9px;background:linear-gradient(90deg,#ffffff06,#ffffff03);box-shadow:inset 0 1px 0 #ffffff10;overflow:hidden}
.sn-suite[data-product=catalogue] .billing[hidden]{display:none}
.sn-suite[data-product=catalogue] .billing::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:#4285ff;border-radius:0 3px 3px 0;opacity:.8}
.sn-suite[data-product=catalogue] .billing-info{position:relative;display:flex;align-items:center;gap:12px;flex:1 1 240px;min-width:0}
.sn-suite[data-product=catalogue] .billing-icon{width:34px;height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:center;background:rgb(133 196 255/.1);border:1px solid rgb(133 196 255/.22);border-radius:8px}
.sn-suite[data-product=catalogue] .billing-icon svg{width:17px;height:17px;fill:none;stroke:rgb(133 196 255);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sn-suite[data-product=catalogue] .billing-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.sn-suite[data-product=catalogue] .billing-copy b{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;color:var(--ink)}
.sn-suite[data-product=catalogue] .billing-copy span{font-size:12px;line-height:1.4;color:#929bad}
.sn-suite[data-product=catalogue] .bill-toggle{display:inline-flex;flex:none;gap:3px;padding:3px;border:1px solid #30394d;border-radius:9px;background:#080d1b;box-shadow:inset 0 1px 2px #00000050}
.sn-suite[data-product=catalogue] .bill-toggle button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:37px;min-height:37px;padding:0 14px;border:1px solid transparent;border-radius:7px;background:transparent;color:#969eae;font:650 12px/1 'Plus Jakarta Sans',sans-serif;white-space:nowrap;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease}
.sn-suite[data-product=catalogue] .bill-toggle button:hover{color:#e9ecf2;background:#ffffff06}
.sn-suite[data-product=catalogue] .bill-toggle button[aria-pressed=true]{background:linear-gradient(180deg,#2d3d63,#263554);border-color:#526487;color:#fff;box-shadow:inset 0 1px 0 #ffffff12,0 2px 7px #00000033}
.sn-suite[data-product=catalogue] .bill-toggle .save{font-style:normal;font-size:10px;font-weight:700;line-height:1;padding:3px 7px;border-radius:99px;background:rgb(133 196 255/.16);color:rgb(133 196 255);border:1px solid rgb(133 196 255/.35)}
/* On a card: the yearly price is the headline, the monthly equivalent sits quietly beneath it */
.sn-suite[data-product=catalogue] .item .price .eq{display:block;font-size:12px;font-weight:400;line-height:1.4;color:#ffffffa6}
/* In the basket */
.sn-suite[data-product=catalogue] .tot .row.save{color:rgb(133 196 255)}
.sn-suite[data-product=catalogue] .bill-hint{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:#ffffffb8}
.sn-suite[data-product=catalogue] .bill-hint:empty{display:none}
@media(max-width:700px){
  .sn-suite[data-product=catalogue] .billing{flex-direction:column;align-items:stretch;padding:14px}
  /* flex-basis:240px (set for the row layout's width) would otherwise apply to
     height once the axis flips to column, stretching this block with blank space. */
  .sn-suite[data-product=catalogue] .billing-info{flex:none}
  .sn-suite[data-product=catalogue] .bill-toggle{width:100%}
  .sn-suite[data-product=catalogue] .bill-toggle button{flex:1}
}

/* ---- Smaller page body -------------------------------------------------------------
   Everything between the header and the footer (progress bar, heading, cards, basket) is
   drawn at 88%. Change the two 0.88s together to resize it; max-width is divided by the
   same number so the content still lines up with the header and footer. Phones are left
   at full size: text there is already small, and inputs must stay 16px or iOS zooms in. */
@media(min-width:601px){
  .sn-suite[data-product=catalogue] :is(#steps,.wrap){zoom:.88;max-width:calc((1180px + 50px) / .88)}
}
/* Side margin: 25px more each side than the theme's own (32px, 20px on tablets). The zoom
   scales padding too, so the extra is divided by .88 to come out at 25px on screen; max-width
   above grows by the same 50px, so on wide screens the content still lines up with the header. */
@media(min-width:851px){
  .sn-suite[data-product=catalogue] :is(#steps,.wrap){padding-inline:calc(32px + 25px / .88)}
}
@media(min-width:601px) and (max-width:850px){
  .sn-suite[data-product=catalogue] :is(#steps,.wrap){padding-inline:calc(20px + 25px / .88)}
}

/* ---- Basket on the right for every desktop width --------------------------------------
   suite.css / premium.css drop the basket below the content at 1100px. Keep the two columns
   down to 901px instead (buy.html stacks everything from 900px and under, where the basket
   is reached from the "View basket" bar). */
@media(min-width:901px) and (max-width:1100px){
  .sn-suite[data-product=catalogue] .sn-content{grid-template-columns:minmax(0,1fr) 280px}
  .sn-suite[data-product=catalogue] .sn-content>main,
  .sn-suite[data-product=catalogue] .sn-page-heading{grid-row:auto}
  .sn-suite[data-product=catalogue] .side{grid-row:auto;position:sticky}
}

/* Header-to-card spacing, reduced by 10 physical pixels at each viewport size. */
.sn-suite[data-product=catalogue] .wrap{padding-top:24px}
@media(min-width:601px){
  .sn-suite[data-product=catalogue] .wrap{padding-top:24px}
}

/* ---- Header and footer share the page's edges -------------------------------------------
   The page body is a 1230px column with 53px of side padding (20px * .88 + 25px on tablets).
   The header nav and the footer used their own widths, so the logo, nav links, page content and
   footer text each started somewhere different. Same column and padding here, so all four line up. */
@media(min-width:601px){
  .sn-suite[data-product=catalogue] #sn-footer .checkout-footer{padding-inline:max(53px,calc((100% - 1230px) / 2 + 53px))}
}
@media(min-width:601px) and (max-width:850px){
  .sn-suite[data-product=catalogue] #sn-footer .checkout-footer{padding-inline:max(42.6px,calc((100% - 1230px) / 2 + 42.6px))}
}
/* The header's logo, links and icons need about 866px with this padding, so below 880px it keeps its own. */
@media(min-width:880px){
  html body.sn-suite[data-product=catalogue] #sn-header #main-nav{max-width:1230px;padding-inline:53px!important}
}

/* ---- Header links sit on the same centre line as the logo and icons ------------------------
   marketing-chrome.css gives every header link 6px of bottom padding, room for the underline on
   the active page. Checkout has no active link, so the padding only pushed the text 3px high. */
html body.sn-suite[data-product=catalogue] #sn-header .nav-links a{padding-bottom:0}

/* ---- Basket card: deep-blue glow, restyled order lines and totals ------------------------
   Only the "Your basket" card (sidebar + its mobile dialog) — not the free-trial card or the
   "Continue to checkout" button, which keep the styling set earlier. */
.sn-suite[data-product=catalogue] :is(#main,.side .card){position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(circle at 90% 92%,rgb(29 99 220/.18) 0%,rgb(17 61 140/.09) 23%,transparent 48%),
    linear-gradient(145deg,#0c1426 0%,#091120 48%,#0a162a 100%);
  border:1px solid rgb(72 126 210/.58);
  box-shadow:0 18px 50px rgb(0 0 0/.28),inset 0 1px 0 rgb(255 255 255/.025)}
.sn-suite[data-product=catalogue] :is(#main,.side .card)::before{content:'';position:absolute;z-index:0;
  width:430px;height:430px;right:-230px;bottom:-230px;border-radius:50%;
  background:rgb(39 112 255/.35);filter:blur(75px);pointer-events:none}
.sn-suite[data-product=catalogue] :is(#main,.side .card)>*{position:relative;z-index:1}
/* Order lines */
.sn-suite[data-product=catalogue] .oline{padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid #ffffff24}
.sn-suite[data-product=catalogue] .oname b{font-size:15px;font-weight:700;color:#f7f8fc}
.sn-suite[data-product=catalogue] .oqty{color:#b1bacb}
.sn-suite[data-product=catalogue] .oname small{margin-top:6px;color:#b3bdce;line-height:1.45}
.sn-suite[data-product=catalogue] .oprice{font-size:15px;font-weight:700;color:#fff}
.sn-suite[data-product=catalogue] .oprice small{margin-top:2px;color:#aab4c6}
.sn-suite[data-product=catalogue] .orm{font-size:23px;color:#aeb7c7;transition:color .15s ease,transform .15s ease}
.sn-suite[data-product=catalogue] .orm:hover{color:#fff;transform:scale(1.08)}
/* Price breakdown + total */
.sn-suite[data-product=catalogue] .tot .row{min-height:42px;border-bottom:1px solid #ffffff21;color:#e6eaf1}
.sn-suite[data-product=catalogue] .tot .row.big{border-bottom:1px solid #ffffff24;padding:17px 0;margin-bottom:0}
.sn-suite[data-product=catalogue] .tot .row.big span:last-child{color:#fff;font-size:21px;font-weight:700;letter-spacing:-.3px}
.sn-suite[data-product=catalogue] .tot .row.sm{margin-top:16px;color:#d2d8e3}
.sn-suite[data-product=catalogue] .bill-hint{padding:16px 0 0;color:#9da8ba}
.sn-suite[data-product=catalogue] .bill-hint .linky{margin-left:4px;color:#dbeaff;font-weight:650;text-decoration:underline;text-underline-offset:2px}
.sn-suite[data-product=catalogue] .bill-hint .linky:hover{color:#fff}
@media(max-width:600px){
  .sn-suite[data-product=catalogue] .side .card{padding:16px;border-radius:13px}
}

/* Give the payment notice and total room to breathe. */
.sn-suite[data-product=catalogue] #pay_err.on{margin-bottom:24px}
.sn-suite[data-product=catalogue] .payDue{gap:10px;line-height:1.5}
.sn-suite[data-product=catalogue] .payDue .feesNote{margin-top:6px}

/* Domain settings sit directly on the card surface, including in the basket. */
html body.sn-suite[data-product=catalogue] .wrap .domDet{padding:0;margin-top:4px;background:none;border:0;border-radius:0!important;gap:0;font-size:13px}
.sn-suite[data-product=catalogue] .domDetails summary{min-height:44px;font-size:13px;font-weight:600;gap:8px}
.sn-suite[data-product=catalogue] .domDetRow{min-width:0;min-height:48px;padding:10px 0;border-top:1px solid #ffffff12;flex-wrap:wrap;gap:8px 16px}
.sn-suite[data-product=catalogue] .domDetRow>span:first-child{color:#aeb4be}
.sn-suite[data-product=catalogue] .domDetRow> :last-child{margin-left:auto;max-width:100%;overflow-wrap:anywhere}
.sn-suite[data-product=catalogue] .domDet .domDetRow select{flex:0 1 auto;width:auto;max-width:100%;min-height:44px;padding:8px 30px 8px 12px;font-size:16px;border:1px solid #ffffff26;box-shadow:none}
.sn-suite[data-product=catalogue] .domDetNote{margin:0;padding:0 0 14px;color:#aeb4be;font-size:12px;line-height:1.6}
.sn-suite[data-product=catalogue] .domSwitch{gap:8px;min-height:28px;white-space:nowrap}
.sn-suite[data-product=catalogue] .domSwitch input{width:18px;height:18px;margin:0;accent-color:#c6ff3d}
.sn-suite[data-product=catalogue] .domDetOwner .domOwner,.sn-suite[data-product=catalogue] .domDetOwner .domOwnerNeeded{font-size:13px;line-height:1.6}
.sn-suite[data-product=catalogue] .domDet .domRemove{justify-self:start;min-height:44px;margin-top:4px;padding:8px 0;background:none;border:0;box-shadow:none;color:#aeb4be;font-size:12px;font-weight:500;text-decoration:underline;text-underline-offset:4px}
.sn-suite[data-product=catalogue] .domDet .domRemove:hover{color:#ff9696}

/* ---- Group headers: a chevron for open/closed, so the only ✕ is the one that removes ---- */
.sn-suite[data-product=catalogue] .service-header .chev{flex:none;width:20px;height:20px;margin-left:6px;color:var(--muted);transition:transform .18s ease,color .18s ease}
.sn-suite[data-product=catalogue] .plan-card.collapsible:hover>.service-header .chev{color:#fff}
.sn-suite[data-product=catalogue] .plan-card.collapsible[open]>.service-header .chev{transform:rotate(180deg)}
/* Phones: the name and option count keep a full line; the price, ✕ and chevron drop beneath them */
@media(max-width:650px){
  .sn-suite[data-product=catalogue] .service-header{flex-wrap:wrap;row-gap:8px}
  .sn-suite[data-product=catalogue] .service-header .service-main{flex:1 1 calc(100% - 64px)}
  .sn-suite[data-product=catalogue] .service-header .cat-price{margin-left:58px;margin-right:auto;flex-direction:row;align-items:baseline;gap:4px}
  .sn-suite[data-product=catalogue] .plan-card.featured .service-header .cat-price{margin-left:64px}
}

/* ---- What each plan includes, from the catalogue's feature list ---- */
.sn-suite[data-product=catalogue] .hosting-option ul.feat{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:5px;font-size:12.5px;line-height:1.45;color:#d7dceb}
.sn-suite[data-product=catalogue] .hosting-option ul.feat li{position:relative;padding-left:18px}
.sn-suite[data-product=catalogue] .hosting-option ul.feat li::before{content:'';position:absolute;left:0;top:5px;width:10px;height:10px;background:rgb(var(--g));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.2l3.2 3.2L13 4.6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.2l3.2 3.2L13 4.6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.sn-suite[data-product=catalogue] .hosting-option-select{display:flex;flex-direction:column;height:100%}
.sn-suite[data-product=catalogue] .hosting-option ul.feat{flex:1;align-content:start}

/* ---- Custom website: a full-width strip under the tiers, not a lone half-empty tile ---- */
.sn-suite[data-product=catalogue] .hosting-option.custom{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.sn-suite[data-product=catalogue] .hosting-option.custom p{min-height:0;margin:0}
.sn-suite[data-product=catalogue] .hosting-option.custom strong{margin-bottom:4px}
.sn-suite[data-product=catalogue] .hosting-option.custom b{white-space:nowrap}

/* ---- Pay step: the no-minimum-term note and its links ---- */
.sn-suite[data-product=catalogue] .secure{line-height:1.55}
.sn-suite[data-product=catalogue] .secure a{color:#dbeaff;text-decoration:underline;text-underline-offset:2px}
.sn-suite[data-product=catalogue] #domRegWrap{margin-top:4px}
.sn-suite[data-product=catalogue] #refNote{margin:0 0 16px}

/* Reserve the white outline for the two outer cards and the basket control. */
.sn-suite[data-product=catalogue] :is(#main,.side>.card,.basket-bar){border-color:#fff}
.sn-suite[data-product=catalogue] .item.on,
.sn-suite[data-product=catalogue] :is(.service-category,.service-tile-wrap,.extras-group) .item.on{border-color:rgb(var(--g,133 196 255)/.75);box-shadow:none}
.sn-suite[data-product=catalogue] :is(.side,.basket-dialog):focus{outline:none}
.sn-suite[data-product=catalogue] .basket-bar:focus:not(:focus-visible){outline:none}

/* One step title; subsection headings such as Payment remain visible. */
.sn-suite[data-product=catalogue] #main>section>.card:first-of-type>h2:first-child{display:none}
.sn-suite[data-product=catalogue] .sn-page-heading{background:none}
.sn-suite[data-product=catalogue] summary{list-style:none}
.sn-suite[data-product=catalogue] summary::-webkit-details-marker{display:none}
.sn-suite[data-product=catalogue] summary::marker{content:''}
.sn-suite[data-product=catalogue] .signup-optional>summary{display:flex;align-items:center;gap:10px}
.sn-suite[data-product=catalogue] .signup-optional>summary::before{content:'';width:7px;height:7px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin-right:3px}
.sn-suite[data-product=catalogue] .signup-optional[open]>summary::before{transform:rotate(45deg)}

/* Homepage artwork treatment. Presentation only: the existing checkout steps,
   shared header/footer, prices and payment controls retain their behaviour. */
body.sn-suite[data-product=catalogue]{background:#050506}
.sn-suite[data-product=catalogue] :is(#main,.side .card){background:linear-gradient(145deg,#17191c,#101114);border-color:#ffffff40;border-radius:24px;box-shadow:0 18px 50px #00000030,inset 0 1px #ffffff08}
.sn-suite[data-product=catalogue] :is(#main,.side .card)::before{display:none}
.sn-suite[data-product=catalogue] .sn-content h1{font-size:clamp(30px,3.6vw,48px)!important;letter-spacing:-.045em!important;-webkit-text-stroke:0;line-height:1.15}
.sn-suite[data-product=catalogue] :is(.plan-card,.plan-card.featured,.service-category){background:linear-gradient(135deg,#202226,#151619);border-color:#ffffff26;border-radius:16px;box-shadow:none}
.sn-suite[data-product=catalogue] :is(.hosting-option,.item){background:#ffffff04;border-radius:12px}
.sn-suite[data-product=catalogue] :is(.hosting-option.on,.item.on){background:#ffffff0d}
.sn-suite[data-product=catalogue] .hosting-option:not(.on):not(.off){opacity:1}
.sn-suite[data-product=catalogue] :is(.service-category,.service-tile-wrap) .item:not(.on){opacity:1}
.sn-suite[data-product=catalogue] .hosting-option ul.feat{color:#d7d8dd}
.sn-suite[data-product=catalogue] .side>.card>h2{display:flex;align-items:center;min-height:132px;margin:-24px -24px 24px!important;padding:24px 46% 24px 24px;background:url('checkout-basket-transparent.webp') right center/auto 100% no-repeat,radial-gradient(ellipse 95px 75px at calc(100% - 85px) 55%,#248fff30,transparent 100%),radial-gradient(ellipse 80px 80px at calc(100% - 30px) 55%,#ffc15a26,transparent 100%);border-bottom:1px solid #ffffff26;font-size:24px!important;line-height:1.2;letter-spacing:-.035em}
.sn-suite[data-product=catalogue] #s2 .addrTitle,
.sn-suite[data-product=catalogue] #s4>.card:nth-child(2)>h2{display:flex;align-items:center;min-height:138px;padding:24px 46% 24px 24px;margin:24px 0;background:url('checkout-billing-transparent.webp') right center/auto 100% no-repeat,radial-gradient(ellipse 95px 75px at calc(100% - 85px) 55%,#248fff30,transparent 100%),radial-gradient(ellipse 80px 80px at calc(100% - 30px) 55%,#ffc15a26,transparent 100%);border:1px solid #ffffff26;border-radius:16px;font-size:24px;line-height:1.2;letter-spacing:-.035em;-webkit-text-stroke:0}
.sn-suite[data-product=catalogue] .billing{border-color:#ffffff30;background:#ffffff04;border-radius:12px}
.sn-suite[data-product=catalogue] .billing::before{background:#c6ff3d}
.sn-suite[data-product=catalogue] .bill-toggle{background:#0c0d0f;border-color:#ffffff26}
.sn-suite[data-product=catalogue] .bill-toggle button[aria-pressed=true]{background:#303338;border-color:#666b73}
.sn-suite[data-product=catalogue] #main :is(.f input,.f select,.voucher input,.otpInput){background:#101114;border:1px solid #62656b;border-radius:10px}
.sn-suite[data-product=catalogue] :is(#main,.side) .btn{border-radius:999px}
.sn-suite[data-product=catalogue] :is(#main,.side,.basket-dialog) :is(button,a,summary,input,select):focus-visible{outline:2px solid #c6ff3d;outline-offset:3px}
@media(max-width:600px){
 .sn-suite[data-product=catalogue] :is(#main,.side .card){border-radius:18px}
 .sn-suite[data-product=catalogue] .side>.card>h2{min-height:120px;margin:-16px -16px 20px!important;padding:20px 46% 20px 16px;font-size:22px!important}
 .sn-suite[data-product=catalogue] .basket-dialog .side>.card>h2{margin:-18px -18px 20px!important;padding-left:18px}
 .sn-suite[data-product=catalogue] #s2 .addrTitle,.sn-suite[data-product=catalogue] #s4>.card:nth-child(2)>h2{min-height:120px;padding-left:16px;font-size:22px}
}