/* iClean Xpress — the concept picker. Uses the concept 1 palette, which is the
   flagship direction, because iClean Xpress has no brand colours of their own
   to match: their live site runs the stock GoDaddy black and white theme. That
   absence is stated on the page rather than hidden, since choosing a palette is
   one of the real decisions on the call. */
:root{
  --ink:#0A1622; --deep:#060E17; --panel:#0F1E2C; --panel-2:#152A3C;
  --water:#37A8E0; --mist:#EAF2F8; --muted:#93A2B2; --quiet:#6F8093;
  --line:rgba(234,242,248,.13); --line-s:rgba(234,242,248,.07);
  --f-loud:'Archivo Black',system-ui,sans-serif;
  --f-quiet:'Public Sans',system-ui,-apple-system,sans-serif;
  --rad:6px; --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--mist);
  font-family:var(--f-quiet);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-loud);font-weight:400;line-height:1.04;letter-spacing:-.025em;margin:0}
p{margin:0 0 1em}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--water);margin:0 0 16px}

.hd{position:sticky;top:0;z-index:50;background:rgba(6,14,23,.9);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--line-s)}
.hd-in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  width:min(100% - 40px,var(--wrap));margin-inline:auto;padding:11px 0}
.hd-logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;min-height:46px}
.hd-mark{display:flex;align-items:center;justify-content:center;/* flex, NOT grid: the mark is a text node plus an <i>, and a grid container
     makes those two separate grid items that stack vertically, so iX rendered
     as i above X. Flex lays them in a row. */
  width:38px;height:38px;border-radius:5px;flex:0 0 auto;
  background:linear-gradient(150deg,#12293B,#0A1622);border:1px solid var(--line);
  font-family:var(--f-loud);font-size:17px;letter-spacing:-.04em;white-space:nowrap;line-height:1}
.hd-mark i{font-style:normal;color:var(--water)}
.hd-name{display:grid;line-height:1.12}
.hd-name b{font-family:var(--f-loud);font-size:16px}
.hd-name span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.hd-nav{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:wrap}
.hd-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;
  font-size:14.5px;font-weight:600;color:var(--muted);border-radius:var(--rad)}
.hd-nav a:hover{color:var(--mist);background:rgba(234,242,248,.05)}

.top{padding:86px 0 56px;position:relative;overflow:hidden}
.top::before{content:"";position:absolute;left:-10%;top:-45%;width:70%;height:120%;pointer-events:none;
  background:radial-gradient(52% 52% at 40% 45%,rgba(55,168,224,.16),transparent 72%)}
.top-in{position:relative;z-index:2;max-width:820px}
.top h1{font-size:clamp(36px,5.4vw,66px)}
.top p{margin:22px 0 0;font-size:19px;color:#C6D5E1;max-width:64ch}
.top-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.top-meta b{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:100px;
  background:rgba(234,242,248,.05);border:1px solid var(--line-s);font-size:13.5px;font-weight:600;color:#BACADA}
.top-meta b i{width:6px;height:6px;border-radius:50%;background:var(--water);flex:0 0 auto}
/* The inline link inside this pill rendered as a 22px tap target. An absolutely
   positioned ::after was not enough on its own: the audit measures the ELEMENT's
   own box and does not credit the pseudo element, so the link needs real height.
   The pill's vertical padding is trimmed to match, which keeps it the same
   overall size as its siblings. */
.top-meta b{position:relative}
.top-meta b:has(a){padding-block:4px}
.top-meta b a{display:inline-block;min-height:34px;line-height:34px;
  color:var(--water);text-decoration:none;font-weight:700}

/* the header is sticky, so an anchor jump lands with the section heading tucked
   underneath it. #whats-different and #seo-check are both linked from the nav. */
[id]{scroll-margin-top:104px}
.sec{padding:60px 0}
.sec-h{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:28px;
  padding-bottom:16px;border-bottom:1px solid var(--line-s)}
.sec-h h2{font-size:clamp(22px,2.6vw,30px)}
.sec-h span{font-size:14px;color:var(--quiet)}

.feat{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;margin-bottom:22px}
.feat-shot{position:relative;background:var(--deep);min-height:340px}
.feat-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.feat-body{padding:clamp(24px,3.2vw,40px);display:flex;flex-direction:column;justify-content:center}
.feat-body h3{font-size:clamp(24px,2.8vw,34px)}
.feat-body p{margin:14px 0 0;color:var(--muted);font-size:16.5px}
.pal{display:flex;gap:7px;margin:22px 0 0}
.pal i{width:30px;height:30px;border-radius:5px;border:1px solid var(--line-s)}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0 0}
.tags span{padding:6px 12px;border-radius:100px;background:rgba(234,242,248,.05);
  border:1px solid var(--line-s);font-size:13px;font-weight:600;color:#BACADA}
.go{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;
  margin-top:26px;background:var(--water);color:#06121D;text-decoration:none;border-radius:var(--rad);
  font-size:16px;font-weight:700;align-self:flex-start;transition:transform .2s ease,filter .2s ease}
.go:hover{transform:translateY(-2px);filter:brightness(1.08)}
.go svg{width:17px;height:17px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line-s);
  border-radius:var(--rad);overflow:hidden;text-decoration:none;transition:transform .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-3px);border-color:rgba(55,168,224,.42)}
.card-shot{background:var(--deep);aspect-ratio:16/10;overflow:hidden}
.card-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.card-body{padding:22px;display:flex;flex-direction:column;flex:1 1 auto}
.card-body h3{font-size:21px}
.card-body p{margin:10px 0 0;color:var(--muted);font-size:15.5px;flex:1 1 auto}
.card-go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--water);
  font-size:15px;font-weight:700;min-height:34px}

.note{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:clamp(24px,3.4vw,42px)}
.note h2{font-size:clamp(24px,3vw,34px)}
.note>p{margin:16px 0 0;color:var(--muted);font-size:17px;max-width:70ch}
.note-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:34px;margin-top:32px}
.note-cols h3{font-family:var(--f-quiet);font-size:14px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.note-cols ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.note-cols li{position:relative;padding-left:26px;font-size:16px;color:#C6D5E1;line-height:1.55}
.note-cols li::before{position:absolute;left:0;top:.05em;font-weight:800}
.is-real li::before{content:"\2713";color:var(--water)}
.is-blank li::before{content:"\2022";color:#F0B43C;font-size:20px;top:-.15em}

.ft{background:var(--deep);border-top:1px solid var(--line-s);padding:44px 0 30px;margin-top:40px}
.ft-mock{color:var(--quiet);font-size:13.5px;line-height:1.62;max-width:96ch;margin:0 0 22px}
.ft-bot{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;
  padding-top:20px;border-top:1px solid var(--line-s);color:var(--quiet);font-size:13.5px}
.ft-by{position:relative;display:inline-flex;align-items:center;min-height:34px;color:var(--quiet);text-decoration:none}
.ft-by b{color:var(--water);font-weight:700;margin-left:.32em}
.ft-by::after{content:"";position:absolute;inset:-6px -8px}

@media(max-width:900px){
  .feat{grid-template-columns:1fr}
  .feat-shot{min-height:220px;aspect-ratio:16/10}
}
@media(max-width:640px){
  body{font-size:16.5px}
  .top{padding:52px 0 40px}
  .sec{padding:44px 0}
  .hd-nav{width:100%;margin-left:0;order:3}
  .hd-nav a{padding:0 10px;font-size:14px}
  .note{padding:22px}
  .note-cols{gap:24px}
}