:root{--night:#040918;--navy:#071233;--ink:#0A1530;--muted:#5A6680;--line:#E5E9F2;--blue:#1A66FF;--blue-600:#0F55E6;--blue-700:#0D47C2;--blue-50:#EEF3FF;--blue-100:#DCE6FF;--sky:#8FB8FF;--lime:#C6F04A;--lime-50:#F1FBD9;--green:#83AA2D;--soft:#F4F6FB}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.hk a{color:inherit;text-decoration:none}
.hk img{max-width:100%}
.hk svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-weight:500}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:12px;font:600 16px/1 'DM Sans',sans-serif;border:1.5px solid transparent;cursor:pointer;transition:transform .15s,background .15s,border-color .15s;white-space:nowrap}
.btn-lg{min-height:58px;padding:0 32px;font-size:17px}
.btn:hover{transform:translateY(-1px)}
.btn-white{background:#fff;color:var(--night)!important}
.btn-glass{background:rgba(255,255,255,.08);color:#fff!important;border-color:rgba(255,255,255,.25)}
.btn-blue{background:var(--blue);color:#fff!important}
.btn-blue:hover{background:var(--blue-600)}
.btn-outline{background:#fff;color:var(--ink)!important;border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff!important}
.btn-dark{background:var(--ink);color:#fff!important}

/* promo */
.promo{background:var(--blue);color:#fff;font-size:13px;font-weight:600;overflow:hidden}
.promo-track{display:flex;justify-content:center;align-items:center;gap:18px;padding:9px 16px;white-space:nowrap}
.promo i{display:inline-flex;color:var(--lime)}
.promo i svg{width:12px;height:12px;fill:currentColor;stroke:none}

/* nav */
.top{background:var(--night);color:#fff;position:relative;z-index:3}
.nav{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:28px;padding:16px 24px}
.nav-logo{flex:none}.nav-logo img{height:30px;width:auto;display:block}
.nav-links{display:flex;gap:4px;flex:1}
.nav-links a{display:inline-flex;align-items:center;gap:4px;padding:9px 12px;border-radius:8px;font-size:15px;color:rgba(255,255,255,.88)}
.nav-links a:hover{background:rgba(255,255,255,.08)}
.nav-links svg{width:14px;height:14px;opacity:.7}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-right a{display:inline-flex;align-items:center;gap:7px;font-size:15px;white-space:nowrap}
.nav-right svg{width:19px;height:19px}
.nav-pill{padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22)}
.nav-pill .dot{width:8px;height:8px;border-radius:50%;background:#3BD16F;box-shadow:0 0 0 4px rgba(59,209,111,.2)}
.nav-cur{padding:9px 10px;color:rgba(255,255,255,.85)}
.nav-icon{width:40px;height:40px;justify-content:center;border-radius:50%}
.nav-icon:hover{background:rgba(255,255,255,.08)}
.nav-menu{display:none;width:44px;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;align-items:center;justify-content:center}
.nav-menu svg{width:22px;height:22px}
.dbar{max-width:1240px;margin:0 auto;padding:0 24px 16px;display:flex;align-items:center;gap:20px}
.dsearch{flex:1;display:flex;align-items:center;gap:10px;height:52px;padding:0 6px 0 18px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.dsearch>svg{width:19px;height:19px;color:rgba(255,255,255,.7);flex:none}
.dsearch input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font:400 16px 'DM Sans',sans-serif}
.dsearch input::placeholder{color:rgba(255,255,255,.55)}
.dsearch button{height:40px;padding:0 24px;border:0;border-radius:999px;background:#fff;color:var(--night);font:600 15px 'DM Sans',sans-serif;cursor:pointer}
.dbar-note{margin:0;font-size:13px;line-height:1.35;color:rgba(255,255,255,.7)}
.dbar-note b{color:#fff;font-weight:600}

/* hero */
.hero{position:relative;overflow:hidden;color:#fff;padding:84px 24px 0;background:linear-gradient(180deg,var(--night) 0,var(--night) calc(100% - 230px),#fff calc(100% - 230px))}
.hero-glow{position:absolute;left:50%;bottom:120px;width:1500px;height:900px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(26,102,255,.75),rgba(64,72,255,.35) 45%,transparent 75%);filter:blur(30px);pointer-events:none}
.hero:before{content:"";position:absolute;inset:0 0 230px;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.2px);background-size:28px 28px;mask-image:radial-gradient(ellipse 60% 55% at 50% 35%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 35%,#000,transparent 75%);pointer-events:none}
.hero-inner{position:relative;max-width:980px;margin:0 auto;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:14px;color:rgba(255,255,255,.85)}
.eyebrow b{color:#fff}
.stars{display:inline-flex;gap:2px;color:#00B67A;vertical-align:-2px}
.stars svg{width:15px;height:15px;fill:currentColor;stroke:none}
.hero h1{margin:28px 0 0;font-size:clamp(44px,6.6vw,92px);line-height:1;letter-spacing:-.04em;font-weight:500}
.grad{background:linear-gradient(90deg,#9CC2FF 0%,#C6F04A 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{margin:28px auto 0;max-width:640px;font-size:20px;line-height:1.55;color:rgba(255,255,255,.78)}
.lede b{color:#fff;font-weight:600}
.hero-ctas{margin-top:36px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.guarantee{margin:20px 0 0;display:flex;justify-content:center;align-items:center;gap:8px;font-size:15px;color:rgba(255,255,255,.75)}
.guarantee svg{width:18px;height:18px}

/* hero cards */
.hero-cards{position:relative;max-width:1240px;margin:72px auto 0;display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:20px;text-align:left}
.hcard{position:relative;height:470px;border-radius:28px;overflow:hidden;padding:30px 30px 0;display:block;transition:transform .25s}
.hcard:hover{transform:translateY(-6px)}
.hcard-top p{margin:0;font-size:14px;font-weight:600;letter-spacing:.01em;opacity:.8}
.hcard h3{margin:8px 0 0;font-size:28px;line-height:1.1;letter-spacing:-.03em;max-width:300px}
.hcard-price{display:inline-block;margin-top:14px;font-size:15px;opacity:.85}
.hcard-price b{font-size:20px;font-weight:600}
.hk .hcard-host{background:radial-gradient(500px 400px at 85% 100%,#4C8DFF,transparent 70%),linear-gradient(160deg,#2C74FF 0%,#1146D6 100%);color:#fff;box-shadow:0 40px 80px -40px rgba(26,102,255,.8)}
.hcard-host .cut{position:absolute;right:-6px;bottom:0;height:330px;width:auto}
.hk .hcard-build{background:linear-gradient(170deg,#F4F7FF 0%,#DFE8FF 100%);color:var(--ink);box-shadow:0 30px 60px -40px rgba(10,21,48,.4)}
.hk .hcard-care{background:linear-gradient(170deg,#F5FCE3 0%,#DDF3A6 100%);color:var(--ink);box-shadow:0 30px 60px -40px rgba(10,21,48,.4)}
.hcard-care .cut{position:absolute;right:10px;bottom:0;height:300px;width:auto}
.float{position:absolute;display:flex;gap:10px;align-items:center;padding:10px 14px 10px 10px;border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 18px 40px -16px rgba(4,9,24,.45);white-space:nowrap}
.float b{display:block;font-size:13.5px;font-weight:600}
.float small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.fic{width:32px;height:32px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center}
.fic svg{width:16px;height:16px}
.fic.ok{background:#DDF6E7;color:#14833F}
.fic.lime{background:var(--lime);color:var(--night)}
.fic.blue{background:var(--blue-50);color:var(--blue)}
.f-live{left:28px;bottom:118px}
.f-speed{left:48px;bottom:44px}
.f-change{left:24px;bottom:56px}
.mini-browser{position:absolute;left:30px;right:-40px;bottom:-20px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -20px rgba(10,21,48,.45)}
.mini-browser .bar{display:flex;gap:6px;padding:10px 12px;background:#F1F4FA;border-bottom:1px solid var(--line)}
.mini-browser .bar i{width:9px;height:9px;border-radius:50%;background:#D3DAE6}
.mini-browser img{display:block;width:100%;height:auto}
.prompt{position:absolute;left:30px;right:30px;top:178px;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:999px;background:#fff;font-size:14px;color:var(--ink);box-shadow:0 16px 40px -16px rgba(10,21,48,.5);z-index:2}
.prompt span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prompt-go{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.prompt-go svg{width:16px;height:16px}
.hcard-build .mini-browser{top:244px;bottom:auto}
.cursor{position:absolute;right:56px;top:212px;width:30px;height:30px;z-index:3;fill:var(--night)!important;stroke:#fff!important;stroke-width:1.6!important;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}

/* stats */
.stats{padding:72px 0 64px}
.stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.stats-row div{display:flex;flex-direction:column;gap:6px;padding-left:24px;border-left:1px solid var(--line)}
.stats-row b{font-size:52px;font-weight:500;letter-spacing:-.045em;line-height:1}
.stats-row b small{font-size:22px;color:var(--muted);letter-spacing:0}
.stats-row span{font-size:15px;color:var(--muted)}

/* sections */
.sec{position:relative;padding:112px 0}
.sec-soft{background:var(--soft)}
.sec-tight{padding:24px 0 112px}
.sec-head{max-width:820px;margin:0 auto 56px;text-align:center}
.sec h2{margin:0;font-size:clamp(36px,4.6vw,60px);line-height:1.04;letter-spacing:-.045em}
.sec-head p{margin:18px 0 0;font-size:19px;line-height:1.55;color:var(--muted)}
.assure{margin-top:22px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;font-size:15px;color:var(--muted)}
.assure span{display:inline-flex;align-items:center;gap:8px}
.assure svg{width:18px;height:18px;color:var(--ink)}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1120px;margin:0 auto;align-items:start}
.plan{position:relative;display:flex;flex-direction:column;padding:34px 30px;border-radius:24px;background:#fff;border:1px solid var(--line)}
.off{position:absolute;top:30px;right:28px;padding:6px 12px;border-radius:999px;background:var(--lime);color:var(--night);font-size:13px;font-weight:700}
.plan h3{margin:0;font-size:26px;letter-spacing:-.03em}
.plan-for{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--muted);min-height:44px}
.was{margin:22px 0 0;font-size:16px;color:var(--muted)}
.plan-price{margin:2px 0 24px;font-size:58px;font-weight:500;letter-spacing:-.05em;line-height:1}
.plan-price small{font-size:20px;font-weight:500;letter-spacing:0;color:var(--muted)}
.plan .btn{width:100%}
.plan-note{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.plan ul{list-style:none;margin:24px 0 0;padding:24px 0 0;border-top:1px solid var(--line);display:grid;gap:13px}
.plan li{position:relative;padding-left:30px;font-size:15px;line-height:1.4}
.plan li:before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A66FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") no-repeat center/12px}
.plan-star{border:2px solid var(--blue);padding-top:62px;box-shadow:0 40px 80px -40px rgba(26,102,255,.55);margin-top:-28px}
.plan-flag{position:absolute;left:0;right:0;top:0;padding:10px;background:var(--blue);color:#fff;text-align:center;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:21px 21px 0 0}
.plan-star .off{top:58px}
.care-strip{max-width:1120px;margin:28px auto 0;display:flex;align-items:center;gap:24px;padding:0 28px 0 20px;min-height:120px;border-radius:24px;background:linear-gradient(100deg,#F5FCE3,#E6F7BF);overflow:hidden}
.care-strip img{height:120px;width:auto;align-self:flex-end;margin-bottom:0}
.care-strip div{flex:1;display:flex;flex-direction:column;gap:4px}
.care-strip div b{font-size:20px;font-weight:600;letter-spacing:-.02em}
.care-strip div span{font-size:15px;color:#4A5568}
.care-price{font-size:30px;font-weight:500;letter-spacing:-.04em}
.care-price small{font-size:15px;color:var(--muted);letter-spacing:0}

/* bento */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:430px;gap:20px}
.tile{position:relative;border-radius:28px;overflow:hidden;padding:36px;display:flex;flex-direction:column;transition:transform .25s}
.tile:hover{transform:translateY(-4px)}
.tile h3{margin:0;font-size:30px;line-height:1.08;letter-spacing:-.035em;max-width:360px}
.tile p{margin:12px 0 0;font-size:16px;line-height:1.55;max-width:380px}
.t-link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px}
.t-link svg{width:18px;height:18px;transition:transform .2s}
.tile:hover .t-link svg{transform:translateX(4px)}
.hk .t-build{grid-column:span 2;flex-direction:row;gap:24px;background:radial-gradient(600px 400px at 100% 100%,#4C8DFF,transparent 70%),linear-gradient(150deg,#2C74FF,#1040C8);color:#fff}
.t-build .t-text{flex:0 0 340px;display:flex;flex-direction:column}
.t-build p{color:rgba(255,255,255,.8)}
.t-art{position:relative;flex:1}
.mini-browser.tilt{left:10px;right:-80px;top:40px;bottom:auto;transform:rotate(-3deg);box-shadow:0 40px 80px -20px rgba(4,9,24,.6)}
.tags{position:absolute;left:-10px;bottom:-6px;display:flex;flex-wrap:wrap;gap:8px;z-index:2}
.tags span{padding:9px 14px;border-radius:999px;background:#fff;color:var(--ink);font-size:13px;font-weight:600;box-shadow:0 10px 24px -10px rgba(4,9,24,.5)}
.tags span.on{background:var(--lime)}
.hk .t-move{background:linear-gradient(170deg,#EEF3FF,#D7E3FF);color:var(--ink)}
.t-move p{color:#4A5876;max-width:300px}
.t-move .cut{position:absolute;right:-30px;bottom:0;height:230px;width:auto}
.f-move{left:28px;bottom:32px}
.hk .t-domain{background:radial-gradient(400px 300px at 100% 0%,rgba(26,102,255,.55),transparent 70%),var(--navy);color:#fff}
.t-domain p{color:rgba(255,255,255,.72)}
.hk .t-domain .t-link{color:var(--lime)}
.pills{position:relative;flex:1;margin:10px -10px 0}
.pills span{position:absolute;padding:12px 20px;border-radius:999px;font-size:18px;font-weight:600;white-space:nowrap}
.p1{left:4%;top:18%;background:var(--lime);color:var(--night);transform:rotate(-8deg)}
.p2{left:38%;top:8%;background:#fff;color:var(--ink);transform:rotate(6deg)}
.p3{left:70%;top:30%;background:var(--blue);color:#fff;transform:rotate(-4deg)}
.p4{left:12%;top:56%;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);transform:rotate(4deg)}
.p5{left:46%;top:52%;background:#fff;color:var(--ink);transform:rotate(-6deg)}
.p6{left:62%;top:78%;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);transform:rotate(3deg)}
.hk .t-mail{background:var(--soft);color:var(--ink);border:1px solid var(--line)}
.t-mail p{color:var(--muted)}
.inbox{margin-top:auto;display:grid;gap:8px}
.mail{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px -18px rgba(10,21,48,.4)}
.mail>span:nth-child(2){flex:1;min-width:0}
.mail b{display:block;font-size:14px;font-weight:600}
.mail small{display:block;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail time{font-size:12px;color:var(--muted)}
.mail.dim{opacity:.55}
.av{width:34px;height:34px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;background:var(--blue-100);color:var(--blue-700)}
.av.g{background:#DDF6E7;color:#14733A}
.av.o{background:#FDEBD8;color:#9A4A0B}
.hk .t-help{background:linear-gradient(170deg,#F5FCE3,#DDF3A6);color:var(--ink)}
.t-help p{color:#4A5568;max-width:260px}
.t-help .t-text{display:flex;flex-direction:column;height:100%;position:relative;z-index:2}
.t-help .cut{position:absolute;right:-20px;bottom:0;height:270px;width:auto}
.bubble{position:absolute;z-index:3;max-width:210px;padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.4;box-shadow:0 14px 30px -14px rgba(10,21,48,.5)}
.b1{left:24px;bottom:120px;background:#fff;border-bottom-left-radius:4px}
.b2{left:56px;bottom:62px;background:var(--blue);color:#fff;border-bottom-left-radius:4px}

/* dark why */
.sec-dark{background:var(--night);color:#fff;overflow:hidden}
.dark-glow{position:absolute;left:50%;top:-300px;width:1200px;height:700px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(26,102,255,.55),rgba(64,72,255,.2) 50%,transparent 75%);filter:blur(20px)}
.sec-dark .wrap{position:relative}
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.feat{padding:34px 32px;border-radius:24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
.feat-ic{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#2C74FF,#1146D6);color:#fff;box-shadow:0 12px 30px -12px rgba(26,102,255,.9)}
.feat-ic svg{width:24px;height:24px}
.feat h3{margin:22px 0 0;font-size:21px;letter-spacing:-.02em}
.feat p{margin:8px 0 0;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.68)}

/* reviews */
.tp{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px}
.tp .stars svg{width:20px;height:20px}
.tp b{color:var(--ink)}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.quotes figure{margin:0;padding:34px;border-radius:24px;background:var(--soft);display:flex;flex-direction:column;gap:20px}
.quotes .stars svg{width:20px;height:20px}
.quotes blockquote{margin:0;font-size:20px;line-height:1.5;letter-spacing:-.01em}
.quotes figcaption{margin-top:auto;display:flex;align-items:center;gap:12px}
.quotes figcaption b{display:block;font-size:15px;font-weight:600}
.quotes figcaption small{display:block;font-size:13px;color:var(--muted)}

/* faq */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.faq-head p{margin:16px 0 28px;font-size:18px;color:var(--muted)}
.faq details{border-bottom:1px solid #D9DEEA;padding:6px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:19px;font-weight:500;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";width:32px;height:32px;flex:none;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1530' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") no-repeat center/16px;border:1px solid var(--line);transition:transform .2s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;font-size:16px;line-height:1.65;color:var(--muted);max-width:640px}

/* cta */
.hk .cta{position:relative;display:flex;align-items:center;min-height:400px;border-radius:32px;overflow:hidden;background:radial-gradient(700px 500px at 90% 100%,#4C8DFF,transparent 70%),linear-gradient(150deg,#2C74FF,#0D3BB8);color:#fff}
.cta-text{position:relative;z-index:2;padding:64px;max-width:700px}
.cta h2{color:#fff}
.cta p{margin:16px 0 0;font-size:19px;color:rgba(255,255,255,.82)}
.cta .hero-ctas{justify-content:flex-start}
.cta .cut{position:absolute;right:40px;bottom:0;height:380px;width:auto}

/* footer */
.foot{background:var(--night);color:#fff;padding:72px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
.foot-brand img{height:30px;width:auto;align-self:flex-start}
.foot-brand p{margin:16px 0 0;max-width:290px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.65)}
.foot-tp{display:flex;align-items:center;gap:8px}
.foot-grid div{display:flex;flex-direction:column;gap:11px;font-size:14px}
.foot-grid b{font-size:14px;font-weight:600;margin-bottom:4px}
.foot-grid a{color:rgba(255,255,255,.65)}
.foot-grid a:hover{color:#fff}
.foot-base{margin-top:56px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:rgba(255,255,255,.55)}
.foot-legal{display:flex;gap:22px}

/* responsive */
@media (max-width:1120px){
 .nav-links,.nav-right .nav-pill{display:none}.nav-menu{display:inline-flex}.nav{justify-content:space-between}
 .hero-cards{grid-template-columns:1fr 1fr}.hk .hcard-host{grid-column:span 2}
 .bento{grid-template-columns:1fr 1fr}.hk .t-build{grid-column:span 2}
}
@media (max-width:900px){
 .dbar-note{display:none}
 .plans{grid-template-columns:1fr;max-width:520px}.plan-star{margin-top:0}
 .stats-row{grid-template-columns:1fr 1fr;row-gap:36px}
 .feats,.quotes{grid-template-columns:1fr 1fr}
 .faq-wrap{grid-template-columns:1fr;gap:24px}
 .care-strip{flex-wrap:wrap;padding:24px}.care-strip img{display:none}
 .foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:span 2}
}
@media (max-width:640px){
 .promo-track{justify-content:flex-start;animation:none}.promo-track span:nth-of-type(n+2),.promo-track i{display:none}
 .wrap,.nav,.dbar{padding-left:16px;padding-right:16px}
 .nav-right .nav-cur{display:none}
 .hero{padding:56px 16px 0}
 .hero h1{font-size:44px}
 .lede{font-size:18px}
 .hero-ctas .btn{flex:1 1 100%}
 .hero-cards{grid-template-columns:1fr}.hk .hcard-host{grid-column:auto}.hk .hcard{height:430px}
 .sec{padding:80px 0}
 .bento{grid-template-columns:1fr;grid-auto-rows:auto}.hk .t-build{grid-column:auto;flex-direction:column}.hk .t-build .t-text{flex:none}.hk .t-art{height:300px}
 .hk .tile{min-height:400px}
 .stats-row b{font-size:40px}
 .feats,.quotes{grid-template-columns:1fr}
 .hk .cta{flex-direction:column;align-items:flex-start}.hk .cta-text{padding:40px 28px 0}.hk .cta .cut{position:relative;right:auto;height:280px;align-self:flex-end;margin-right:12px}
}

/* ===== v2 site layer ===== */
@font-face{font-family:'DM Sans';src:url(../fonts/DMSans-Variable.woff2) format('woff2');font-weight:100 900;font-display:swap}
a{color:inherit;text-decoration:none}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
img{max-width:100%}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:#fff;color:var(--night);font-weight:600}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.kicker{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.kicker.light{color:var(--lime)}

/* nav dropdowns */
.nav-links{list-style:none;margin:0;padding:0}
.nav-links>li{position:relative}
.nav-links a[aria-current]{background:rgba(255,255,255,.08)}
.dd{position:absolute;left:-12px;top:calc(100% + 10px);width:360px;padding:10px;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 30px 70px -20px rgba(4,9,24,.55),0 0 0 1px rgba(10,21,48,.06);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility .15s;z-index:20}
.dd:before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.has-dd:hover .dd,.has-dd.open .dd{opacity:1;visibility:visible;transform:none}
.dd a{display:flex!important;gap:14px;align-items:flex-start;padding:12px!important;border-radius:12px!important;color:var(--ink)!important}
.dd a:hover{background:var(--soft)!important}
.dd b{display:block;font-size:15px;font-weight:600}
.dd small{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--muted)}
.dd-ic{width:38px;height:38px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--blue-50);color:var(--blue)}
.dd-ic svg{width:19px!important;height:19px!important;opacity:1!important}
.dd-ic.lime{background:var(--lime);color:var(--night)}
.mnav{padding:8px 16px 20px;display:grid;gap:2px;border-top:1px solid rgba(255,255,255,.1)}
.mnav[hidden]{display:none}
.mnav a{padding:12px 4px;font-size:17px;border-bottom:1px solid rgba(255,255,255,.08)}
.mnav .btn{margin-top:12px;border:0}

/* shared hero bits */
.ticks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px}
.ticks li{position:relative;padding-left:30px;font-size:16px;color:rgba(255,255,255,.9)}
.ticks li:before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:rgba(198,240,74,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C6F04A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") no-repeat center/13px}
.hero-price{margin:30px 0 0;display:flex;align-items:center;gap:14px}
.hero-price p{margin:0;display:flex;align-items:baseline;gap:6px}
.hero-price .from{font-size:16px;color:rgba(255,255,255,.7)}
.hero-price b{font-size:56px;font-weight:500;letter-spacing:-.045em;line-height:1}
.hero-price .per{font-size:18px;color:rgba(255,255,255,.7)}
.save{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:var(--lime);color:var(--night);font-size:13px;font-weight:700}
.price-note{margin:10px 0 0;font-size:14px;color:rgba(255,255,255,.65)}
.hero-ctas.left{justify-content:flex-start}
.guarantee.left{justify-content:flex-start}
.crumb{margin:0 0 22px;display:flex;align-items:center;gap:6px;font-size:14px;color:rgba(255,255,255,.6)}
.crumb a{color:rgba(255,255,255,.85)}
.crumb a:hover{color:#fff}
.crumb svg{width:14px;height:14px}

/* product page hero */
.phero{position:relative;overflow:hidden;color:#fff;padding:64px 24px 96px;background:var(--night)}
.phero .hero-glow{bottom:auto;top:-200px;left:75%;width:1100px;height:800px}
.phero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.2px);background-size:28px 28px;mask-image:radial-gradient(ellipse 50% 60% at 75% 40%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 50% 60% at 75% 40%,#000,transparent 75%);pointer-events:none}
.phero-grid{position:relative;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.phero h1{margin:0;font-size:clamp(40px,5vw,68px);line-height:1.02;letter-spacing:-.045em;font-weight:500}
.phero .lede{margin:24px 0 0;max-width:560px;font-size:19px}
.phero-art{position:relative;height:540px}
.phero-cut{position:absolute;left:-40px;bottom:-96px;height:430px;width:auto;z-index:1;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.f-ph1{right:20px;bottom:30px;z-index:4}

/* hosting panel mock */
.panel{position:absolute;right:0;top:20px;z-index:3;width:min(420px,80%);padding:22px;border-radius:24px;background:#fff;color:var(--ink);box-shadow:0 50px 100px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line)}
.panel-site{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px}
.live-dot{width:9px;height:9px;border-radius:50%;background:#2DBE63;box-shadow:0 0 0 4px rgba(45,190,99,.18);flex:none}
.panel-tag{padding:5px 11px;border-radius:999px;background:#DDF6E7;color:#14733A;font-size:12.5px;font-weight:700}
.usage{display:grid;gap:16px;padding:20px 0}
.u-row{display:grid;grid-template-columns:1fr auto;row-gap:8px;font-size:14px}
.u-row span{color:var(--muted)}
.u-row b{font-weight:600}
.u-row b small{color:var(--muted);font-weight:400}
.u-row i{grid-column:1/-1;height:8px;border-radius:99px;background:var(--soft);position:relative;overflow:hidden}
.u-row i:after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:99px;background:linear-gradient(90deg,#2C74FF,#5C9BFF)}
.u-row i.u-free:after{background:linear-gradient(90deg,#C6F04A,#9BD32B)}
.panel-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:16px;border-top:1px solid var(--line)}
.panel-chips span{display:flex;align-items:center;gap:8px;padding:10px;border-radius:12px;background:var(--soft);font-size:13px;font-weight:600}
.panel-chips em,.health em,.stack-layer em,.cp-grid em{width:28px;height:28px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center}
.panel-chips svg,.health svg{width:15px;height:15px}
.c-ok{background:#DDF6E7;color:#14833F}
.c-blue{background:var(--blue-50);color:var(--blue)}
.c-lime{background:var(--lime);color:var(--night)}
.health{list-style:none;margin:0;padding:16px 0 0;display:grid;gap:10px}
.health li{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--soft)}
.health em{width:34px;height:34px;border-radius:10px}
.health b{display:block;font-size:15px;font-weight:600}
.health small{display:block;font-size:13px;color:var(--muted)}
.wp-panel{top:40px}

/* stats */
.stats-tight{padding:56px 0}

/* plans extras */
.plans-sub{margin-top:14px!important}
.compare{max-width:1120px;margin:28px auto 0}
.compare summary{list-style:none;cursor:pointer;margin:0 auto;width:max-content;display:flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;border:1.5px solid var(--ink);font-weight:600;font-size:15px;background:#fff}
.compare summary::-webkit-details-marker{display:none}
.compare summary svg{width:18px;height:18px;transition:transform .2s}
.compare[open] summary svg{transform:rotate(180deg)}
.table-wrap{margin-top:24px;overflow-x:auto;border-radius:20px;background:#fff;border:1px solid var(--line)}
.compare table{width:100%;min-width:620px;border-collapse:collapse;font-size:15px}
.compare th,.compare td{padding:14px 20px;text-align:center;border-bottom:1px solid var(--line)}
.compare th[scope=row]{text-align:left;font-weight:500}
.compare thead th{font-size:18px;font-weight:600;padding:22px 20px}
.compare thead th small{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-top:2px}
.compare tr.grp th{text-align:left;background:var(--soft);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:10px 20px}
.compare tbody tr:last-child td,.compare tbody tr:last-child th{border-bottom:0}
.yes,.no{display:inline-flex;width:26px;height:26px;border-radius:50%;align-items:center;justify-content:center}
.yes{background:var(--blue-50);color:var(--blue)}
.no{background:var(--soft);color:#A3ADBF}
.yes svg,.no svg{width:15px;height:15px}

/* two paths */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.path{position:relative;overflow:hidden;min-height:560px;border-radius:28px;padding:40px;display:flex;flex-direction:column;align-items:flex-start;scroll-margin-top:24px}
.path h3{margin:14px 0 0;font-size:32px;line-height:1.1;letter-spacing:-.035em;max-width:420px}
.path p{margin:14px 0 0;font-size:16px;line-height:1.6;max-width:430px}
.path .btn{margin-top:auto;position:relative;z-index:3}
.path-tag{padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700}
.hk .path-new{background:radial-gradient(500px 400px at 100% 100%,#4C8DFF,transparent 70%),linear-gradient(150deg,#2C74FF,#1040C8);color:#fff}
.path-new p{color:rgba(255,255,255,.82)}
.path-new .path-tag{background:rgba(255,255,255,.14)}
.mini-browser.in-path{position:relative;left:auto;right:auto;bottom:auto;margin:28px -80px 28px 0;width:calc(100% + 80px);transform:rotate(-2deg);box-shadow:0 40px 60px -20px rgba(4,9,24,.55)}
.mini-browser.in-path img{height:210px;object-fit:cover;object-position:top}
.hk .path-move{background:linear-gradient(170deg,#F5FCE3,#DDF3A6);color:var(--ink)}
.path-move p{color:#45513A}
.path-move .path-tag{background:#fff}
.move-steps{list-style:none;margin:26px 0 28px;padding:0;display:grid;gap:12px;position:relative;z-index:2;max-width:330px}
.move-steps li,.bb-steps li{display:flex;gap:14px;align-items:flex-start}
.move-steps li>span,.bb-steps li>span{width:30px;height:30px;flex:none;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.move-steps b,.bb-steps b{display:block;font-size:16px;font-weight:600}
.move-steps small,.bb-steps small{display:block;font-size:14px;color:#55613F;margin-top:2px}
.path-cut{position:absolute;right:-40px;bottom:0;height:300px;width:auto;z-index:1}

/* split sections */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.split h2{margin:0}
.split-copy>p:not(.kicker){margin:18px 0 0;font-size:18px;line-height:1.6;color:var(--muted);max-width:520px}
.sec-dark .split-copy>p:not(.kicker){color:rgba(255,255,255,.7)}
.sec-dark .kicker{color:var(--lime)}
.feature-list{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:18px}
.feature-list li{position:relative;padding-left:40px}
.feature-list li:before{content:"";position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") no-repeat center/14px}
.feature-list b{display:block;font-size:17px;font-weight:600}
.feature-list span{display:block;margin-top:4px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.feature-list.dark span{color:rgba(255,255,255,.66)}
.feature-list.dark li:before{background-color:var(--lime);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23040918' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E")}
.split.rev .split-art{order:-1}

/* speed stack */
.stack{position:relative;padding:28px;border-radius:28px;background:radial-gradient(500px 300px at 100% 0%,rgba(26,102,255,.5),transparent 70%),var(--navy);display:grid;gap:12px;box-shadow:0 40px 80px -40px rgba(10,21,48,.6)}
.stack-req{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.08);border:1px dashed rgba(255,255,255,.25);color:#fff;font-size:14px}
.stack-layer{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;background:#fff;color:var(--ink)}
.stack-layer em{width:42px;height:42px;border-radius:12px;background:var(--blue-50);color:var(--blue)}
.stack-layer.l1 em{background:var(--lime);color:var(--night)}
.stack-layer svg{width:20px;height:20px}
.stack-layer div{flex:1}
.stack-layer b{display:block;font-size:16px;font-weight:600}
.stack-layer small{display:block;font-size:13.5px;color:var(--muted)}
.stack-layer.l2{margin-left:24px}.stack-layer.l3{margin-left:48px}
.pill-ok{padding:6px 12px;border-radius:999px;background:#DDF6E7;color:#14733A;font-size:12.5px;font-weight:700;white-space:nowrap}

/* security grid */
.sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.sgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.scard{padding:32px 28px;border-radius:24px;background:var(--soft);border:1px solid var(--line)}
.scard h3{margin:22px 0 0;font-size:20px;letter-spacing:-.02em}
.scard p{margin:8px 0 0;font-size:15.5px;line-height:1.6;color:var(--muted)}

/* control panel mock */
.cp{border-radius:24px;padding:22px;background:#fff;color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.cp-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:16px;border-bottom:1px solid var(--line)}
.cp-head span{font-weight:600;font-size:17px}
.cp-head small{color:var(--muted);font-size:13px}
.cp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding-top:18px}
.cp-grid span{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 8px;border-radius:16px;background:var(--soft);font-size:13px;font-weight:600;text-align:center}
.cp-grid em{width:44px;height:44px;border-radius:13px;background:linear-gradient(150deg,#2C74FF,#1146D6);color:#fff}
.cp-grid svg{width:21px;height:21px}

/* support band */
.sec-tight-top{padding-top:24px}
.support{position:relative;overflow:hidden;min-height:400px;border-radius:32px;padding:64px;background:linear-gradient(110deg,#F5FCE3 0%,#DDF3A6 100%)}
.support-copy{position:relative;z-index:2;max-width:520px}
.support-copy p{margin:16px 0 28px;font-size:18px;line-height:1.6;color:#45513A}
.support .cut{position:absolute;right:40px;bottom:0;height:390px;width:auto}
.bubble.s1{left:auto;right:330px;bottom:200px;background:#fff;border-bottom-right-radius:4px}
.bubble.s2{left:auto;right:300px;bottom:130px;background:var(--blue);color:#fff;border-bottom-left-radius:4px}

/* builder band (wordpress) */
.builder-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding:64px;border-radius:32px;overflow:hidden;background:radial-gradient(700px 500px at 100% 100%,#4C8DFF,transparent 70%),linear-gradient(150deg,#2C74FF,#0D3BB8);color:#fff}
.builder-band h2{margin:0;color:#fff;font-size:clamp(32px,3.6vw,48px)}
.bb-steps{list-style:none;margin:30px 0 32px;padding:0;display:grid;gap:16px}
.bb-steps li>span{background:#fff;color:var(--night)}
.bb-steps small{color:rgba(255,255,255,.75)}
.bb-note{margin:12px 0 0;font-size:14px;color:rgba(255,255,255,.75)}
.bb-art{position:relative;height:420px}
.prompt.in-band{position:relative;left:auto;right:auto;top:auto;margin:0 0 16px}
.mini-browser.in-band{position:relative;left:auto;right:auto;bottom:auto;transform:rotate(-2deg);margin-right:-120px}
.tags.in-band{position:absolute;left:-12px;bottom:10px}

/* backups mock */
.backups{border-radius:24px;padding:22px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -40px rgba(10,21,48,.45)}
.bk-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--line)}
.bk-head b{font-size:17px;font-weight:600}
.bk-head small{color:var(--muted)}
.bk-row{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line)}
.bk-row div{flex:1}
.bk-row b{display:block;font-size:15px;font-weight:600}
.bk-row small{display:block;font-size:13px;color:var(--muted)}
.bk-dot{width:12px;height:12px;border-radius:50%;border:3px solid #CAD3E3}
.bk-row.on .bk-dot{border-color:#2DBE63;background:#2DBE63}
.bk-btn{padding:8px 14px;border-radius:10px;border:1.5px solid var(--line);font-size:13px;font-weight:600}
.bk-row.on .bk-btn{background:var(--ink);border-color:var(--ink);color:#fff}
.bk-foot{display:flex;align-items:center;gap:8px;padding-top:14px;font-size:13px;color:var(--muted)}
.bk-foot svg{width:16px;height:16px;color:#14833F}

/* migrate band */
.migrate{position:relative;display:flex;align-items:center;gap:32px;min-height:220px;padding:40px 48px 40px 260px;border-radius:28px;background:linear-gradient(170deg,#EEF3FF,#D7E3FF);overflow:hidden}
.migrate .cut{position:absolute;left:10px;bottom:0;height:230px;width:auto}
.mg-copy{flex:1}
.migrate h2{font-size:clamp(28px,3vw,38px)!important}
.mg-copy p{margin:10px 0 0;font-size:17px;line-height:1.55;color:#4A5876;max-width:560px}

/* reviews */
.more-reviews{margin:28px 0 0;text-align:center}
.more-reviews a{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--blue-700)}
.more-reviews svg{width:18px;height:18px}

/* footer extras */
.foot-tp{margin-top:16px;display:inline-flex!important;align-items:center;gap:8px;flex-direction:row!important}
.foot-regions{margin-top:44px;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:rgba(255,255,255,.5)}
.foot-regions a{color:rgba(255,255,255,.75)}
.foot-legal button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.foot-legal a:hover,.foot-legal button:hover,.foot-regions a:hover{color:#fff}

/* responsive (v2 layer) */
@media (max-width:1120px){
 .phero-grid{grid-template-columns:1fr}.phero-art{height:520px;max-width:620px}
 .sgrid{grid-template-columns:1fr 1fr}
 .split{gap:48px}
 .support .bubble{display:none}
}
@media (max-width:900px){
 .paths,.split,.builder-band{grid-template-columns:1fr}
 .split.rev .split-art{order:0}
 .sgrid.three{grid-template-columns:1fr}
 .builder-band{padding:44px 32px}.bb-art{height:340px}
 .migrate{flex-wrap:wrap;padding:36px}.migrate .cut{display:none}
 .support{padding:44px 32px;min-height:0}.support .cut{position:relative;right:auto;display:block;margin:20px -32px -44px auto;height:300px}
}
@media (max-width:640px){
 .phero{padding:40px 16px 72px}
 .phero h1{font-size:40px}
 .hero-price b{font-size:46px}
 .panel{width:100%;position:relative;top:0;padding:18px}
 .phero-cut{display:none}
 .phero-art{height:auto}
 .f-ph1{display:none}
 .panel-chips{grid-template-columns:1fr}
 .sgrid{grid-template-columns:1fr}
 .path{padding:28px;min-height:0}.path h3{font-size:26px}.path-cut{display:none}
 .mini-browser.in-path{margin-right:-60px}
 .stack{padding:18px}.stack-layer.l2,.stack-layer.l3{margin-left:0}
 .cp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .builder-band{padding:36px 22px}.mini-browser.in-band{margin-right:-60px}
 .dd{display:none}
}

/* ===== studio photo set (grey-backdrop cut-outs) ===== */
.person-art{height:560px}
.art-disc{position:absolute;right:2%;bottom:-96px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4C8DFF 0%,#1A66FF 45%,#0B3FB8 100%);box-shadow:0 0 0 18px rgba(26,102,255,.12),0 0 0 40px rgba(26,102,255,.06)}
.hero-person{position:absolute;right:-10px;bottom:-96px;height:600px;width:auto;z-index:2;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.wp-person{right:40px;height:640px}
.person-art .float{z-index:3}
.fa{left:0;top:90px}.fb{left:30px;top:250px}.fc{right:0;bottom:30px}
.person-art .wp-panel{position:absolute;left:0;right:auto;top:30px;width:330px;z-index:3;padding:18px}
.person-art .wp-panel .health li{padding:10px}
/* index cards */
.hk .hcard-host .cut{right:-34px;height:300px}
.hk .hcard-care .cut{right:-10px;height:320px}
.hk .t-move .cut{right:-20px;height:250px}
.hk .t-help .cut{right:-40px;height:290px}
.care-strip img{height:112px}
.hk .cta .cut{height:380px;right:30px}
.support .cut{height:400px;right:20px}
.bubble.s1{right:380px;bottom:210px}.bubble.s2{right:350px;bottom:140px}
.path-cut{height:310px;right:-30px}
.migrate .cut{height:240px;left:20px}
@media (max-width:1120px){.art-disc{width:440px;height:440px}.hero-person{height:520px}.person-art{height:500px}}
@media (max-width:640px){
 .person-art{height:430px}
 .art-disc{width:330px;height:330px;right:50%;transform:translateX(50%);bottom:-72px}
 .hero-person{height:400px;right:50%;transform:translateX(50%);bottom:-72px}
 .wp-person{height:420px}
 .fa{left:0;top:10px}.fb{display:none}.fc{right:0;bottom:20px}
 .person-art .wp-panel{display:none}
}

.hk .hcard-host .f-live{left:auto;right:22px;top:24px;bottom:auto}
.hk .hcard-host .cut{right:-40px;height:320px}
.person-art .wp-panel{top:0;width:310px}
.wp-person{right:-10px}
.migrate .cut{transform:scaleX(-1)}
@media (max-width:640px){
 .wp-person{right:50%;transform:translateX(50%)}
 .hk .hcard-host .f-live{display:none}
}

/* ===== refinement pass: calmer type, one colour family ===== */
:root{--tint:#EEF3FF;--tint-2:#DCE6FF}
.hero h1{letter-spacing:-.035em;line-height:1.04}
.phero h1{letter-spacing:-.03em;line-height:1.06}
.sec h2{letter-spacing:-.03em;line-height:1.08}
.hcard h3,.tile h3,.path h3{letter-spacing:-.02em}
.plan-price,.stats-row b,.hero-price b{letter-spacing:-.03em}
.grad{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#9CC2FF}
/* lime only for small accents: pastel-lime surfaces become blue tints */
.hk .hcard-care,.hk .t-help,.hk .path-move,.support,.care-strip{background:linear-gradient(170deg,#F3F7FF 0%,#DCE6FF 100%)}
.path-move p,.support-copy p,.care-strip div span,.t-help p{color:#4A5876}
.move-steps small{color:#5A6680}
.path-move .path-tag{background:#fff}
/* product shot heroes */
.shot-art{height:auto;padding:20px 0 0}
.browser{position:relative;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 50px 100px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.12)}
.browser .bar{display:flex;align-items:center;gap:7px;padding:12px 14px;background:#EEF2F8;border-bottom:1px solid var(--line)}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#D3DAE6}
.browser .bar span{margin-left:10px;flex:1;display:flex;align-items:center;gap:6px;max-width:320px;padding:6px 12px;border-radius:8px;background:#fff;font-size:12.5px;color:var(--muted)}
.browser .bar span svg{width:12px;height:12px;color:#14833F}
.browser img{display:block;width:100%;height:auto}
.browser.big{width:calc(100% + 120px);transform:none}
.shot-art .fa{left:-28px;top:auto;bottom:-24px}
.shot-art .fc{right:-40px;top:-6px;bottom:auto;left:auto}
.shot-art .wp-panel{position:absolute;left:-36px;right:auto;top:auto;bottom:-40px;width:300px;padding:16px;z-index:3}
.shot-art .wp-panel .panel-head{padding-bottom:12px}
.shot-art .wp-panel .health{padding-top:12px;gap:8px}
.shot-art .wp-panel .health li{padding:9px}
.shot-art .wp-panel .health li:nth-child(n+3){display:none}
.phero{padding-bottom:110px}
.hero-person{filter:none}
@media (max-width:1120px){.browser.big{width:100%}.shot-art .fc{right:-8px}}
@media (max-width:640px){.shot-art .fa{left:-6px;bottom:-18px}.shot-art .fc{display:none}.shot-art .wp-panel{display:none}.phero{padding-bottom:80px}}

.phero h1{font-size:clamp(40px,4.6vw,62px)}
.hk .hcard-care .cut{right:-30px;height:330px}

/* ===== v3: measured against Hostinger (Oct 2026) =====
   regular-weight headings with near-normal tracking, neutral ink, flat cards (no shadows),
   16px card corners / 24px plan corners, 48px buttons, 104px section spacing */
:root{
 --ink:#18181A;--ink-2:#36373C;--muted:#6B6E7B;--line:#E6E6EA;--soft:#F5F5F6;
 --night:#060B1F;--navy:#0B1433;--dark-card:#121A3A;
 --blue:#1A66FF;--blue-600:#0F55E6;--blue-700:#0B44C4;--blue-50:#EDF3FF;--blue-100:#D6E4FF;--sky:#9DBEFF;
 --lime:#D4F64A;
}
body{color:var(--ink);font-size:16px;line-height:1.5}

/* type scale */
h1,h2,h3{font-weight:400}
.hero h1{font-size:clamp(42px,5vw,72px);line-height:1.08;letter-spacing:-.01em;font-weight:400}
.phero h1{font-size:clamp(38px,4vw,56px);line-height:1.12;letter-spacing:-.01em;font-weight:400}
.sec h2,.domain h2{font-size:clamp(32px,3.4vw,48px);line-height:1.17;letter-spacing:-.005em;font-weight:400}
.split h2{font-size:clamp(30px,3vw,44px)}
.sec-head p,.split-copy>p:not(.kicker){font-size:18px;line-height:1.55;color:var(--muted)}
.hcard h3,.tile h3,.path h3{font-size:28px;line-height:1.2;letter-spacing:-.005em;font-weight:400}
.plan h3{font-size:24px;letter-spacing:-.005em;font-weight:500}
.scard h3,.feat h3{font-size:20px;line-height:1.4;letter-spacing:-.005em;font-weight:500}
.plan-price{font-weight:500;letter-spacing:-.02em}
.stats-row b,.hero-price b{font-weight:400;letter-spacing:-.02em}
.quotes blockquote{font-size:18px;line-height:1.45}
.faq summary{font-size:18px;font-weight:400}
.kicker{font-size:13px;letter-spacing:.08em}
.lede{font-size:18px;line-height:1.55}
.grad{color:var(--sky)}

/* buttons: 48px, 12px corners */
.btn{min-height:48px;padding:0 32px;border-radius:12px;font-size:16px;font-weight:600;border-width:1px}
.btn-lg{min-height:52px;padding:0 40px;font-size:16px}
.btn:hover{transform:none}
.btn-outline{border-color:var(--ink)}
.btn-glass{background:transparent;border-color:rgba(255,255,255,.5)}
.btn-glass:hover{background:rgba(255,255,255,.08)}

/* sections */
.sec{padding:104px 0}
.sec-tight{padding:24px 0 104px}
.sec-tight-top{padding-top:24px}
.sec-soft{background:var(--soft)}
.sec-head{margin-bottom:48px}

/* flat surfaces: no drop shadows, smaller corners */
.hcard,.tile,.path,.scard,.quotes figure,.support,.migrate,.builder-band,.care-strip,.feat,.backups,.cp,.stack,.cta{box-shadow:none!important}
.hcard,.tile,.path,.scard,.quotes figure,.feat,.backups,.cp,.stack,.mail,.health li,.panel-chips span{border-radius:16px}
.support,.migrate,.builder-band,.cta,.care-strip{border-radius:24px}
.plan{border-radius:24px;box-shadow:none}
.plan-star{box-shadow:none;margin-top:-28px;padding-top:62px}
.plan-flag{border-radius:22px 22px 0 0}
.scard{background:var(--soft);border:0}
.quotes figure{background:var(--soft)}
.tile:hover,.hcard:hover{transform:none}
.mini-browser,.browser{box-shadow:0 24px 48px -24px rgba(6,11,31,.35)}
.float{box-shadow:0 8px 24px -8px rgba(6,11,31,.25);border-radius:14px}
.plan,.t-mail{border-color:var(--line)}

/* dark surfaces: solid, quieter glow, no dot grid */
.hero:before,.phero:before{display:none}
.hero{background:linear-gradient(180deg,var(--night) 0,var(--night) calc(100% - 230px),#fff calc(100% - 230px))}
.hero-glow{background:radial-gradient(closest-side,rgba(26,102,255,.55),rgba(26,102,255,.18) 50%,transparent 75%);filter:blur(40px)}
.phero{background:var(--night)}
.sec-dark{background:var(--night)}
.dark-glow{opacity:.6}
.top{background:var(--night)}
.feat{background:var(--dark-card);border:0}
.feat-ic{box-shadow:none;border-radius:12px}

/* home product cards: flat colours */
.hk .hcard-host{background:var(--blue)}
.hk .hcard-build{background:var(--soft)}
.hk .hcard-care{background:var(--blue-100)}
.hk .t-build{background:var(--blue)}
.hk .t-move,.hk .t-help,.hk .path-move,.support,.care-strip,.migrate{background:var(--blue-50)}
.hk .t-mail{background:var(--soft);border:0}
.hk .t-domain{background:var(--dark-card)}
.hk .path-new,.builder-band,.cta{background:var(--blue)}

/* plan cards */
.off{background:var(--lime);font-weight:600}
.plan li:before{background-color:transparent}

/* misc */
.stats-row div{border-left-color:var(--line)}
.compare summary{border-width:1px}
.dsearch{background:rgba(255,255,255,.08)}

/* ===== object illustrations (Hostinger-style product objects) ===== */
.obj{position:relative;height:150px;margin:-4px 0 22px;border-radius:12px;background:#fff;overflow:hidden}
.obj .o-bar{position:absolute;left:18px;right:18px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--soft);font-size:14px;color:var(--ink-2)}
.obj .o-bar svg{width:16px;height:16px;flex:none}
.o-lock{color:#15803D}
.o-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap}
.o-ok{background:#DDF6E7;color:#14733A}
.o-blue{background:var(--blue);color:#fff}
.o-lime{background:var(--lime);color:var(--ink)}
.o-stack{position:absolute;left:24px;right:24px;top:22px;display:grid;gap:8px}
.o-stack div{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--soft);font-size:13px}
.o-stack div:nth-child(2){margin-left:14px;opacity:.85}
.o-stack div:nth-child(3){margin-left:28px;opacity:.6}
.o-stack i{width:9px;height:9px;border-radius:50%;background:#2DBE63;flex:none}
.o-tools{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:8px;padding:8px;border-radius:14px;background:var(--soft)}
.o-tools span{width:46px;height:46px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.o-tools span.on{background:var(--lime)}
.o-tools svg{width:20px;height:20px}
.o-cursor{position:absolute;width:30px;height:30px;fill:var(--night)!important;stroke:#fff!important;stroke-width:1.6!important;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.o-scan{position:absolute;left:24px;right:24px;top:28px}
.o-scan .o-track{height:10px;border-radius:99px;background:var(--soft);overflow:hidden}
.o-scan .o-track i{display:block;width:100%;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue),#5C9BFF)}
.o-scan p{margin:14px 0 0;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--ink-2)}

/* home hero cards: people placed like Hostinger, cropped at the waist with a UI chip */
.hk .hcard{height:480px}
.hk .hcard-host .cut{right:-30px;height:320px}
.hk .hcard-care .cut{right:-20px;height:330px}

/* responsive */
@media (max-width:640px){
 .sec{padding:72px 0}
 .hero h1{font-size:42px}
 .phero h1{font-size:38px}
 .sec h2{font-size:32px}
 .btn-lg{padding:0 28px}
}
.obj .o-cursor{left:calc(50% + 34px);top:calc(50% + 6px)}

.o-stack{top:16px;gap:6px}.o-stack div{padding:8px 12px}
.o-tools{gap:6px;padding:6px}.o-tools span{width:38px;height:38px}.o-tools svg{width:18px;height:18px}
.obj .o-cursor{left:calc(50% + 22px);top:calc(50% + 2px)}
.o-scan p span:first-child{white-space:nowrap}
@media (max-width:640px){.stats-row b{font-size:32px}.stats-row b small{font-size:16px}}

/* object scenes: dark variant (Why Hostking), checks, uptime */
.obj.dark{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.obj.dark .o-bar,.obj.dark .o-tools{background:rgba(255,255,255,.08);color:rgba(255,255,255,.88)}
.obj.dark .o-tools span{background:rgba(255,255,255,.1);color:#fff}
.obj.dark .o-tools span.on{background:var(--lime);color:var(--ink)}
.obj.dark .o-lock{color:#6EE7A0}
.obj.dark .o-scan p{color:rgba(255,255,255,.85)}
.obj.dark .o-scan b{color:#fff;font-weight:600}
.obj.dark .o-track{background:rgba(255,255,255,.1)}
.obj.dark .o-cursor{fill:#fff!important;stroke:var(--night)!important}
.o-scan p span:last-child{white-space:nowrap}
.o-checks div{background:var(--soft)}
.o-checks em{width:20px;height:20px;border-radius:50%;background:#2DBE63;color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.o-checks em svg{width:12px;height:12px;stroke-width:3}
.o-checks div:nth-child(2),.o-checks div:nth-child(3){margin-left:0;opacity:1}
.o-up{position:absolute;left:24px;right:24px;top:30px}
.o-up p{margin:0 0 14px;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:rgba(255,255,255,.85)}
.o-up p span:first-child{display:flex;align-items:center;gap:8px}
.o-bars{display:flex;gap:4px;height:40px;align-items:flex-end}
.o-bars i{flex:1;height:100%;border-radius:4px;background:#2DBE63;opacity:.9}
.feat .obj{margin:0 0 22px}
.feat .feat-ic{display:none}

/* ===== v4: section patterns copied from Hostinger's layout ===== */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:90px}
.sec-top0{padding-top:0}
.sec-head h2{max-width:760px;margin-left:auto;margin-right:auto}

/* sticky in-page nav pill */
.subnav{position:sticky;top:14px;z-index:30;width:max-content;max-width:calc(100% - 32px);margin:-26px auto 0;display:flex;gap:4px;padding:5px;border-radius:999px;background:#18181A;box-shadow:0 10px 30px -12px rgba(0,0,0,.5);overflow-x:auto}
.subnav a{padding:9px 16px;border-radius:999px;color:rgba(255,255,255,.85);font-size:14px;font-weight:600;white-space:nowrap}
.subnav a:hover{background:rgba(255,255,255,.1);color:#fff}

/* tabs: grey card, text left, colour panel right */
.tabs>input{position:absolute;opacity:0;pointer-events:none}
.tab-labels{display:flex;width:max-content;margin:0 auto 28px;padding:4px;border-radius:999px;background:var(--soft)}
.tab-labels label{padding:10px 22px;border-radius:999px;font-size:15px;font-weight:600;color:var(--muted);cursor:pointer}
#bt1:checked~.tab-labels label[for=bt1],#bt2:checked~.tab-labels label[for=bt2]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
#bt1:focus-visible~.tab-labels label[for=bt1],#bt2:focus-visible~.tab-labels label[for=bt2]{outline:3px solid var(--blue)}
.tab-panel{display:none;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);border-radius:24px;background:var(--soft);overflow:hidden;min-height:440px}
#bt1:checked~.tp1,#bt2:checked~.tp2{display:grid}
.tp-copy{padding:56px 48px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.tp-copy h3{margin:0;font-size:32px;line-height:1.25;font-weight:400}
.tp-copy p{margin:14px 0 28px;font-size:17px;line-height:1.6;color:var(--muted);max-width:440px}
.tp-art{position:relative;background:linear-gradient(135deg,#3B7BFF 0%,#1A66FF 45%,#0B44C4 100%);overflow:hidden}
.tp-art:before{content:"";position:absolute;right:-120px;top:-140px;width:420px;height:420px;background:rgba(255,255,255,.08);transform:rotate(25deg);border-radius:40px}
.art-sites img{position:absolute;width:74%;border-radius:10px;box-shadow:0 30px 60px -20px rgba(4,9,24,.55)}
.art-sites .s3{left:22%;top:10%;opacity:.95}
.art-sites .s2{left:17%;top:19%}
.art-sites .s1{left:12%;top:29%}
.art-move{display:flex;align-items:center;justify-content:center;padding:40px}
.mv-card{position:relative;width:min(380px,100%);padding:22px;border-radius:18px;background:#fff}
.mv-head{margin:0 0 14px;display:flex;justify-content:space-between;align-items:center}
.mv-head b{font-size:17px;font-weight:600}
.mv-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:1px solid var(--line);font-size:15px}
.mv-row span{flex:1}.mv-row small{color:var(--muted);font-size:13px}
.mv-row em{width:24px;height:24px;border-radius:50%;flex:none;border:2px solid #CFD6E4;display:flex;align-items:center;justify-content:center}
.mv-row.done em{background:#2DBE63;border-color:#2DBE63;color:#fff}
.mv-row.done em svg{width:13px;height:13px;stroke-width:3}
.mv-row.now em{border-color:var(--blue);border-top-color:transparent;animation:spin 1s linear infinite}
.mv-row:not(.done):not(.now){color:var(--muted)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.mv-row.now em{animation:none}}

/* two-card feature row: tinted top with widgets, grey bottom with checks */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.duo-card{border-radius:24px;background:var(--soft);overflow:hidden}
.duo-art{position:relative;height:230px;display:flex;align-items:center;justify-content:center;gap:14px;padding:0 28px;background:linear-gradient(135deg,#C9DAFF 0%,#94B6FF 100%)}
.duo-body{padding:28px 32px 32px}
.duo-body h3{margin:0;font-size:24px;font-weight:400}
.checks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.checks li{position:relative;padding-left:30px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.checks li:before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314833F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center/18px}
.checks.light li{color:rgba(255,255,255,.85)}
.checks.light li:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4F64A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.w{background:#fff;border-radius:14px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 10px 30px -14px rgba(11,40,120,.45)}
.w small{font-size:12px;color:var(--muted);align-self:flex-start}
.w b{font-size:20px;font-weight:600;line-height:1}
.w span{font-size:11px;color:var(--muted)}
.w-gauge,.w-donut{width:130px;height:150px;position:relative}
.w-gauge svg,.w-donut svg{width:76px;height:76px;transform:rotate(-90deg);margin-top:2px}
.w-gauge b,.w-donut b{position:absolute;top:66px}
.w-gauge span,.w-donut span{position:absolute;top:90px}
.g-bg,.d-bg{fill:none;stroke:#E8EEF9;stroke-width:8}
.g-fg{fill:none;stroke:#2DBE63;stroke-width:8;stroke-linecap:round}
.d-fg{fill:none;stroke:var(--blue);stroke-width:10}
.w-chart{width:170px;height:150px;align-items:flex-start}
.w-chart b em{font-style:normal;font-size:12px;color:#14833F;font-weight:600}
.w-chart svg{width:100%;height:70px;margin-top:auto}
.c-line{fill:none;stroke:var(--blue);stroke-width:2}
.c-fill{fill:rgba(26,102,255,.15)}
.w-status{width:min(400px,80%);align-items:stretch;padding:18px}
.ws-top{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600}
.ws-top .o-pill{gap:6px}
.ws-bars{display:flex;gap:3px;height:56px;margin:14px 0 8px}
.ws-bars i{flex:1;border-radius:3px;background:linear-gradient(180deg,#5EE08B,#2DBE63)}
.w-badge{position:absolute;right:56px;bottom:30px;width:64px;height:64px;border-radius:18px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -10px rgba(11,40,120,.6)}
.w-badge svg{width:30px;height:30px}

/* compact icon cards */
.icards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.icard{padding:24px;border-radius:16px;background:var(--soft)}
.i-ic{width:40px;height:40px;border-radius:10px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center}
.i-ic svg{width:20px;height:20px}
.icard h3{margin:18px 0 0;font-size:18px;font-weight:500;line-height:1.35}
.icard p{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}

/* dark band with person + chat card */
.band-dark{background:var(--navy);color:#fff;padding:104px 0;overflow:hidden}
.band-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.band-art{position:relative;height:440px}
.band-shape{position:absolute;left:8%;right:4%;top:6%;bottom:0;border-radius:20px;background:linear-gradient(160deg,#C9DAFF,#7FA6FF);clip-path:polygon(0 12%,62% 0,100% 18%,100% 100%,0 100%)}
.band-person{position:absolute;right:6%;bottom:0;height:430px;width:auto}
.chat-card{position:absolute;left:0;top:60px;width:270px;padding:16px;border-radius:16px;background:#fff;color:var(--ink);box-shadow:0 20px 40px -16px rgba(0,0,0,.5)}
.cc-head{margin:0 0 12px;display:flex;align-items:center;gap:8px;font-size:14px}
.cc-head b{flex:1;font-weight:600}
.cc-av{width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.cc-msg{padding:10px 12px;border-radius:12px;font-size:13.5px;line-height:1.4;margin-top:8px;max-width:88%}
.cc-msg.me{background:var(--soft);margin-left:auto;border-bottom-right-radius:4px}
.cc-msg.them{background:var(--blue);color:#fff;border-bottom-left-radius:4px}
.band-copy h2{margin:0;font-size:clamp(32px,3.4vw,48px);line-height:1.17;font-weight:400}
.band-copy .checks{margin:24px 0 32px}

/* reviews on dark band */
.band-reviews{background:var(--night);color:#fff;padding:104px 0}
.sec-head.light{text-align:center;margin:0 auto 48px}
.sec-head.light h2{margin:0;font-size:clamp(32px,3.4vw,48px);line-height:1.17;font-weight:400}
.sec-head.light .tp{margin-top:16px;color:rgba(255,255,255,.75)}
.sec-head.light .tp b{color:#fff}
.band-reviews .quotes figure{background:#fff;color:var(--ink)}
.band-reviews .more-reviews a{color:var(--sky)}

/* FAQ: centred single column like Hostinger */
.faq-wrap{display:block;max-width:820px}
.faq-head{text-align:center;margin-bottom:32px}
.faq-head h2{margin:0}
.faq-head p{margin:12px 0 0}
.faq-head .btn{display:none}
.faq summary:after{background-color:transparent;border:0}

/* full-width closing band */
.band-cta{position:relative;overflow:hidden;background:var(--blue);color:#fff;padding:96px 0}
.cta-inner{position:relative;z-index:2}
.band-cta h2{margin:0;max-width:640px;font-size:clamp(44px,5.6vw,80px);line-height:1.08;font-weight:400;letter-spacing:-.01em}
.band-cta p{margin:20px 0 32px;max-width:460px;font-size:18px;line-height:1.55;color:rgba(255,255,255,.85)}
.cta-shapes{position:absolute;right:0;top:0;bottom:0;width:46%}
.cta-shapes i{position:absolute;background:#0B44C4}
.cta-shapes i:nth-child(1){right:0;top:0;width:70%;height:100%;clip-path:polygon(30% 0,100% 0,100% 100%,0 100%)}
.cta-shapes i:nth-child(2){right:12%;top:18%;width:44%;height:64%;background:#3B7BFF;clip-path:polygon(0 50%,50% 0,100% 50%,50% 100%)}
.cta-shapes i:nth-child(3){right:4%;bottom:-10%;width:30%;height:44%;background:var(--lime);clip-path:polygon(50% 0,100% 100%,0 100%)}

/* responsive */
@media (max-width:1120px){.icards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
 .tab-panel{grid-template-columns:1fr}.tp-art{min-height:320px}.tp-copy{padding:36px 28px}
 .duo,.band-grid{grid-template-columns:1fr}
 .band-grid{gap:40px}.band-art{height:400px}
 .cta-shapes{opacity:.35;width:70%}
}
@media (max-width:640px){
 .subnav{margin-top:-22px}
 .tab-labels label{padding:9px 14px;font-size:14px}
 .duo-art{gap:8px;padding:0 12px}.w-chart{display:none}
 .icards{grid-template-columns:1fr}
 .band-dark,.band-reviews{padding:72px 0}.band-cta{padding:72px 0}
 .band-person{height:360px;right:0}.chat-card{width:230px;top:20px}
}
.w-list{width:min(380px,86%);align-items:stretch;padding:18px;gap:0}
.wl-head{margin:0 0 8px;display:flex;justify-content:space-between;align-items:center;font-size:14px}
.wl-head b{font-size:15px}
.wl-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.wl-row small{margin-left:auto;font-size:12.5px;color:var(--muted)}
.wl-row em{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.wl-row em svg{width:14px;height:14px}
.wl-btn{padding:5px 10px;border-radius:8px;border:1px solid var(--line);font-weight:600;color:var(--ink)!important}
.w-gauge b{top:58px}.w-gauge span{top:96px}.w-donut span{top:92px}
.band-dark{background:var(--night)}
.band-dark+.band-reviews{padding-top:0}
.art-sites .s3{left:28%;top:6%}.art-sites .s2{left:20%;top:17%}.art-sites .s1{left:12%;top:30%}
.w-gauge span{display:none}
@media (max-width:640px){.icards{grid-template-columns:1fr 1fr;gap:10px}.icard{padding:16px}.icard h3{font-size:16px;margin-top:12px}.icard p{font-size:13.5px}.art-sites img{width:88%}}

/* ===== v5: heroes rebuilt on Hostinger's measured hero ===== */
/* product hero: black, two columns (500px copy / 685x448 visual), 36px top, 96px bottom */
.xhero{background:#05070F;color:#fff;padding:36px 0 0;overflow:hidden}
.xhero-grid{max-width:1440px;margin:0 auto;padding:0 80px 72px;display:grid;grid-template-columns:500px minmax(0,1fr);gap:80px;align-items:center;min-height:448px}
.xh-accent{margin:0;font-size:48px;line-height:56px;font-weight:400;letter-spacing:-.005em;color:#8FB4FF}
.xhero h1{margin:0;font-size:48px;line-height:56px;font-weight:400;letter-spacing:-.005em;color:#fff}
.xh-ticks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:8px}
.xh-ticks li{position:relative;padding-left:26px;font-size:14px;line-height:20px;color:rgba(255,255,255,.88)}
.xh-ticks li:before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center/16px}
.xh-price{margin:28px 0 0;display:flex;align-items:center;gap:8px;font-size:16px;color:#fff}
.xh-price s{color:rgba(255,255,255,.6)}
.xh-tag{position:relative;margin-left:6px;padding:4px 10px 4px 12px;border-radius:0 6px 6px 0;background:var(--lime);color:#05070F;font-weight:700}
.xh-tag:before{content:"";position:absolute;left:-10px;top:0;bottom:0;width:11px;background:var(--lime);clip-path:polygon(100% 0,100% 100%,0 50%)}
.xh-btn{margin-top:28px;min-height:48px;padding:0 40px}
.xh-guar{margin:16px 0 0;display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.85)}
.xh-guar svg{width:16px;height:16px}
.xhero-art{position:relative;height:448px;display:flex;align-items:center;justify-content:center}
.burst{position:absolute;width:420px;height:420px;background:linear-gradient(150deg,#2C6BFF 0%,#1A4FD6 55%,#0E2E8C 100%);clip-path:polygon(59.9% 1.0%,70.1% 20.1%,91.7% 22.4%,85.3% 43.1%,99.0% 59.9%,79.9% 70.1%,77.6% 91.7%,56.9% 85.3%,40.1% 99.0%,29.9% 79.9%,8.3% 77.6%,14.7% 56.9%,1.0% 40.1%,20.1% 29.9%,22.4% 8.3%,43.1% 14.7%)}
.sel{position:relative;width:min(470px,90%);outline:2px solid #4F8BFF;outline-offset:14px}
.sel-shot{width:100%}
.sel .h{position:absolute;width:14px;height:14px;background:#fff;border:2px solid #4F8BFF;border-radius:2px}
.sel .tl{left:-22px;top:-22px}.sel .tr{right:-22px;top:-22px}.sel .bl{left:-22px;bottom:-22px}.sel .br{right:-22px;bottom:-22px}
.sel-tag{position:absolute;right:-34px;bottom:-34px;display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;background:var(--lime);color:#05070F;font-size:16px;font-weight:700;transform:rotate(-8deg);box-shadow:0 12px 30px -10px rgba(0,0,0,.6);white-space:nowrap}
.sel-tag svg{width:18px;height:18px}
.xh-proof{max-width:1440px;margin:0 auto;padding:22px 80px;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;color:rgba(255,255,255,.85)}
.xh-proof b{color:#fff;font-weight:600}
.xh-line{display:none}
.xh-stars{display:inline-flex;gap:2px}
.xh-stars svg{width:18px;height:18px;padding:2px;background:#00B67A;fill:#fff!important;stroke:none!important}

/* homepage hero: black, centred, glow rising from the bottom, floating tiles */
.hero{background:#05070F;padding-top:72px}
.hero:before{display:none}
.hero-glow{left:50%;bottom:-420px;top:auto;width:1700px;height:900px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(52,110,255,.95),rgba(26,80,230,.55) 40%,rgba(10,30,120,.15) 70%,transparent 80%);filter:blur(10px)}
.hero h1{font-size:clamp(44px,6vw,80px);line-height:1.05;font-weight:500;letter-spacing:-.02em}
.hero .grad{color:#9DBEFF}
.hero .lede{max-width:600px;font-size:18px;color:rgba(255,255,255,.8)}
.hero .eyebrow{background:transparent;border:0;padding:0;gap:10px}
.hero .eyebrow .stars svg{width:18px;height:18px;padding:2px;background:#00B67A;fill:#fff;stroke:none}
.hero .hero-ctas .btn-glass{display:none}
.hero .hero-ctas .btn{min-height:48px;padding:0 40px}
.hero-alt-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:15px;color:#9DBEFF!important;font-weight:600}
.hero-alt-link svg{width:16px;height:16px}
.tile3d{position:absolute;z-index:1;width:var(--s,96px);height:var(--s,96px);border-radius:26%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -6px 14px rgba(0,0,0,.25),0 24px 40px -14px rgba(0,0,0,.7);transform:rotate(var(--r,0deg))}
.tile3d svg{width:44%;height:44%;stroke-width:2.2}
.t-a{left:9%;top:110px;--s:104px;--r:-12deg;background:linear-gradient(150deg,#3B7BFF,#1446C9);color:#fff}
.t-b{right:10%;top:90px;--s:88px;--r:10deg;background:linear-gradient(150deg,#E4F98A,#B9E12C);color:#05070F}
.t-c{left:15%;top:330px;--s:72px;--r:8deg;background:linear-gradient(150deg,#FFFFFF,#D9E3F5);color:#1A66FF}
.t-d{right:14%;top:300px;--s:78px;--r:-9deg;background:linear-gradient(150deg,#1D2A55,#0B1433);color:#9DBEFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 24px 40px -14px rgba(0,0,0,.7)}
.hero-inner{position:relative;z-index:2}

@media (max-width:1180px){.xhero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0 40px 64px;gap:40px}.burst{width:360px;height:360px}.sel-tag{right:-10px}}
@media (max-width:900px){
 .xhero-grid{grid-template-columns:1fr;padding:0 24px 56px}
 .xhero-art{height:380px}
 .xh-proof{padding:18px 24px;flex-wrap:wrap;text-align:center}
 .tile3d{display:none}
}
@media (max-width:640px){
 .xhero{padding-top:24px}
 .xh-accent,.xhero h1{font-size:36px;line-height:44px}
 .xhero-grid{padding:0 16px 48px}
 .xhero-art{height:300px}.burst{width:280px;height:280px}
 .sel{outline-offset:10px}.sel .h{width:10px;height:10px}.sel .tl,.sel .bl{left:-16px}.sel .tr,.sel .br{right:-16px}.sel .tl,.sel .tr{top:-16px}.sel .bl,.sel .br{bottom:-16px}
 .sel-tag{font-size:13px;padding:9px 14px;right:-6px;bottom:-28px}
 .hero{padding-top:48px}
}
.top{background:#05070F}
.burst{width:470px;height:470px}
.sel{width:min(380px,80%)}
.xhero-grid{padding-bottom:88px}
.xhero-art{height:470px}
@media (max-width:640px){.burst{width:300px;height:300px}.sel{width:78%}}
@media (max-width:640px){.xhero-grid{gap:20px;padding-bottom:40px}.xhero-art{height:320px}.sel{width:70%}.burst{width:320px;height:320px}}
.subnav{margin:-23px auto 0}
.subnav+#plans,.subnav+section{margin-top:0}
/* QA fixes */
.top:has(.mnav:not([hidden])) .dbar{display:none}
@media (max-width:640px){
 .hk .t-help .cut{height:200px;right:-30px;opacity:1}
 .hk .t-help p{max-width:100%}
 .hk .t-help{min-height:430px}
 .t-help .bubble{display:none}
 .chat-card{top:auto;bottom:-10px;left:0;width:240px}
 .band-art{height:420px;margin-bottom:20px}
 .band-shape{left:12%;right:0}
 .band-person{right:-4%}
 .subnav{gap:0;padding:4px}
 .subnav a{padding:8px 10px;font-size:13px}
}

/* ===== v6: fixes from the in-browser check ===== */
/* headings never leave one word alone on a line */
h1,h2,h3{text-wrap:balance}
.sec-head h2,.sec-head.light h2{margin-left:auto;margin-right:auto}

/* product hero: line up with the header, close the gap, bigger visual */
.xhero-grid{max-width:1240px;padding:0 24px 88px;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:56px;min-height:0}
.xh-proof{max-width:1240px;padding:22px 24px}
.xhero-art{height:480px}
.hpanel{position:absolute;inset:0;border-radius:28px;background:
  radial-gradient(520px 360px at 85% 0%,rgba(255,255,255,.22),transparent 70%),
  linear-gradient(150deg,#2C6BFF 0%,#1A4FD6 55%,#0E2E8C 100%);overflow:hidden}
.hpanel:after{content:"";position:absolute;inset:0;border-radius:inherit;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000,transparent);mask-image:radial-gradient(closest-side at 50% 50%,#000,transparent)}
.xhero-art .sel{width:76%;outline-color:rgba(255,255,255,.85)}
.xhero-art .sel .h{border-color:#fff;background:#1A4FD6}
.xhero-art .sel-tag{right:-18px;bottom:-30px}
.burst{display:none}

/* homepage hero: same split layout as the product pages */
.xhero-home{padding-top:48px}
.xhero-home .xhero-grid{padding-bottom:96px;grid-template-columns:minmax(0,520px) minmax(0,1fr)}
.xh-rating{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.85)}
.xh-rating b{color:#fff;font-weight:600}
.xh-rating .xh-stars{margin-right:4px}
.xhero-home h1{margin:20px 0 0;font-size:56px;line-height:64px;letter-spacing:-.015em}
.xh-blue{color:#8FB4FF}
.xh-lede{margin:20px 0 0;font-size:18px;line-height:28px;color:rgba(255,255,255,.8)}
.xh-lede b{color:#fff;font-weight:600}
.xhero-home .xh-ticks{margin-top:22px}
.xh-actions{margin-top:30px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.xh-actions .xh-btn{margin-top:0}
.xh-link{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:600;color:#8FB4FF!important}
.xh-link svg{width:16px;height:16px}
.home-art{height:520px}
.home-shot{position:absolute;left:9%;right:9%;top:13%;border-radius:14px}
.home-shot img{display:block;width:100%;height:auto}
.hf{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 18px 40px -14px rgba(4,9,24,.55);font-size:14px;line-height:1.3}
.hf b{display:block;font-weight:600}
.hf small{display:block;color:var(--muted);font-size:12.5px}
.hf-live{left:-22px;top:46%}
.hf-mail{right:-18px;top:6%}
.hf-chat{right:4%;bottom:5%;max-width:300px;align-items:flex-start;white-space:normal}
.hf-chat .cc-av{flex:none;width:32px;height:32px}

/* product cards: own white section, three equal columns */
.hcards-sec{padding:64px 0 0;background:#fff}
.hcards-sec .hero-cards{margin:0 auto;grid-template-columns:repeat(3,minmax(0,1fr));padding:0 24px}

/* calmer bento: one blue tile, the rest light */
.hk .t-domain,.t-domain{background:var(--soft);color:var(--ink)}
.t-domain p{color:var(--muted)}
.hk .t-domain .t-link{color:var(--blue)}
.p4,.p6{background:#fff;color:var(--ink);border:1px solid var(--line)}
.p2,.p5{box-shadow:0 6px 16px -8px rgba(6,11,31,.25)}

/* closing: light panel instead of a blue band with shapes */
.cta-sec{padding:0 0 104px}
.cta-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:end;gap:24px;min-height:360px;padding:0 0 0 64px;border-radius:28px;background:var(--blue-50);overflow:hidden}
.cta-copy{align-self:center;padding:56px 0}
.cta-copy h2{margin:0;font-size:48px;line-height:56px;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.cta-copy p{margin:16px 0 0;font-size:18px;line-height:28px;color:var(--muted)}
.cta-btns{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.cta-person{display:block;width:100%;height:340px;object-fit:contain;object-position:bottom right}

/* gentle reveal on scroll (only when JS runs, never for reduced motion) */
.rv-on .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.rv-on .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv-on .rv{opacity:1;transform:none;transition:none}}

@media (max-width:1100px){
 .xhero-grid,.xhero-home .xhero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
 .xhero-home h1{font-size:46px;line-height:54px}
 .hf-live{left:-10px}.hf-mail{right:-8px}
}
@media (max-width:900px){
 .xhero-grid,.xhero-home .xhero-grid{grid-template-columns:1fr;padding:0 24px 56px}
 .xhero-art{height:400px}.home-art{height:420px}
 .hcards-sec .hero-cards{grid-template-columns:1fr 1fr}
 .cta-panel{grid-template-columns:1fr;padding:0 32px}
 .cta-person{display:none}
}
@media (max-width:640px){
 .xhero-home{padding-top:28px}
 .xhero-home h1{font-size:38px;line-height:46px}
 .xh-lede{font-size:17px}
 .xhero-grid,.xhero-home .xhero-grid{padding:0 16px 48px;gap:28px}
 .xhero-art{height:300px}.home-art{height:310px}
 .hpanel{border-radius:20px}
 .xhero-art .sel{width:74%}
 .home-shot{left:6%;right:6%;top:10%}
 .hf{font-size:12.5px;padding:8px 12px 8px 8px}.hf small{font-size:11.5px}
 .hf-live{left:4px;top:auto;bottom:16%}
 .hf-mail{right:4px;top:3%}
 .hf-chat{display:none}
 .hcards-sec{padding-top:40px}
 .hcards-sec .hero-cards{grid-template-columns:1fr;padding:0 16px}
 .cta-sec{padding-bottom:72px}
 .cta-panel{padding:0 24px;border-radius:20px}
 .cta-copy{padding:40px 0}
 .cta-copy h2{font-size:34px;line-height:42px}
}

/* ===== real photos instead of cut-outs ===== */
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:28% center;border-radius:28px}
.home-art .hf-live{left:-28px;top:auto;bottom:30%}
.home-art .hf-mail{right:-20px;top:9%}
.home-art .hf-chat{right:-20px;bottom:6%}

.hc-dash{position:absolute;left:28px;right:-70px;bottom:-24px;border-radius:12px}
.hc-dash .bar span{max-width:200px}
.hc-photo{position:absolute;left:0;right:0;bottom:0;width:100%;height:58%;object-fit:cover;object-position:62% 35%}
.hk .hcard-care .f-change{left:20px;bottom:20px}

.tile-photo{position:absolute;left:0;right:0;bottom:0;width:100%;height:50%;object-fit:cover;object-position:center 35%}
.t-move .f-move{left:20px;bottom:20px;z-index:2}
.t-help .t-text{height:auto}
.t-help .t-link{margin-top:14px}
.t-help .tile-photo{height:46%;object-position:center 25%}
.t-help .bubble{display:none}

.band-art{height:auto!important}
.band-photo{display:block;width:100%;height:460px;object-fit:cover;object-position:center 30%;border-radius:24px}
.band-art .chat-card{left:-28px;top:auto;bottom:32px}

.care-strip img{width:72px;height:72px;border-radius:50%;object-fit:cover;align-self:center}

.cta-panel{grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:stretch;padding:0 0 0 64px}
.cta-person{height:100%;min-height:360px;object-fit:cover;object-position:center 55%}

@media (max-width:900px){.home-art .hf-live{left:-8px}.home-art .hf-mail,.home-art .hf-chat{right:-8px}.band-art .chat-card{left:12px}}
@media (max-width:640px){
 .home-art .hf-live{left:8px;bottom:8%}
 .home-art .hf-mail{right:8px;top:6%}
 .hero-photo{border-radius:20px}
 .band-photo{height:340px}
 .band-art .chat-card{left:12px;bottom:16px;width:230px}
 .hc-dash{right:-110px}
}

/* "Starting fresh" panel: one complete website, not a cropped stack */
.art-one{display:flex;align-items:center;justify-content:center;padding:48px 40px 72px}
.art-one:before{display:none}
.one-shot{position:relative;width:100%;max-width:520px;border-radius:12px}
.one-shot img{display:block;width:100%;height:auto}
.one-prompt{left:auto;right:auto;top:auto;bottom:28px;width:min(360px,80%);left:50%;transform:translateX(-50%)}
.one-tag{right:24px;top:28px}
@media (max-width:640px){.art-one{padding:32px 16px 64px}.one-tag{display:none}.one-prompt{bottom:16px}}

/* ===== inspection fixes ===== */
/* readable text on blue cards */
.hk .hcard-host .hcard-top p,.hk .hcard-host .hcard-price,.hk .hcard-host .hcard-price b,.t-build p,.t-build .t-text p{color:#fff;opacity:1}
.ws-top .o-pill.o-ok,.wl-head .o-pill.o-ok,.mv-head .o-pill.o-ok{color:#14733A}
/* keyboard focus: blue on light backgrounds, lime on dark ones */
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.top :focus-visible,.xhero :focus-visible,.band-dark :focus-visible,.band-reviews :focus-visible,.foot :focus-visible,.hcard-host:focus-visible,.t-build:focus-visible{outline-color:var(--lime)}
/* bigger tap areas */
.xh-link,.more-reviews a{padding:10px 0}
/* product cards between tablet and laptop: three across, dashboard never covers the text */
.hk .hcard-host{grid-column:auto}
.hc-dash{left:auto;right:-48px;width:min(420px,92%)}
@media (max-width:1100px){.stats-row b{font-size:40px}.hk .hcard{height:440px}}
@media (max-width:900px) and (min-width:641px){.hcards-sec .hero-cards{grid-template-columns:1fr 1fr}.hk .hcard-host{grid-column:span 2}.hc-dash{width:min(440px,60%);right:-30px;bottom:-30px}}
/* plans on one column: most popular first */
@media (max-width:900px){.plans .plan-star{order:-1}.plans .plan-star{margin-top:28px}}
@media (max-width:640px){
 /* product cards swipe sideways instead of three tall cards */
 .hcards-sec .hero-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:0 16px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .hcards-sec .hero-cards::-webkit-scrollbar{display:none}
 .hk .hcard{flex:0 0 84%;scroll-snap-align:center;height:420px}
 .hc-dash{width:110%;right:-60px}
 /* builder tile: show the website, drop the floating page tags */
 .hk .t-build .t-art{height:200px;margin:8px -28px -28px 0;position:relative}
 .t-build .mini-browser.tilt{left:0;right:-40px;top:16px}
 .t-build .tags{display:none}
 .foot-grid a,.foot-regions a,.foot-legal a,.foot-tp{display:inline-flex;align-items:center;min-height:40px}
}
.hk .t-domain .t-link{color:var(--blue-700)}
.mail.dim{opacity:1}.mail.dim b{color:var(--ink-2)}.mail.dim small,.mail.dim time{color:var(--muted)}
.xh-rating{padding:10px 0}
@media (max-width:640px){.stats-row b{font-size:30px}}

/* ===== design review pass ===== */
/* florist hero: keep cards off her hands and the flowers */
.home-art .hf-mail{right:-20px;top:8%}
.home-art .hf-live{left:auto;right:-24px;top:44%;bottom:auto}
.home-art .hf-chat{left:-28px;right:auto;bottom:7%}

/* product heroes: no design-tool handles, a larger dashboard that runs off the panel edge */
.xhero-art{overflow:hidden;border-radius:28px}
.xhero-art .sel{position:absolute;left:12%;top:14%;width:110%;outline:0}
.xhero-art .sel .h{display:none}
.xhero-art .sel-shot{border-radius:14px 0 0 14px}
.xhero-art .sel-tag{right:auto;left:-6%;bottom:auto;top:calc(100% - 6px);transform:rotate(-4deg)}
.xhero-art .sel{top:12%}
@media (max-width:640px){.xhero-art .sel{left:8%;top:12%;width:120%}.xhero-art .sel-tag{left:-4%;font-size:13px}}

/* support tile: a chat thread instead of a second headset photo */
.t-chat{position:absolute;left:28px;right:28px;bottom:24px;display:flex;flex-direction:column;gap:8px}
.tc-msg{max-width:88%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.35;background:#fff;color:var(--ink);box-shadow:0 8px 20px -12px rgba(6,11,31,.3)}
.tc-msg.me{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.tc-msg.them{display:flex;gap:10px;align-items:flex-start;border-bottom-left-radius:4px}
.tc-msg.them .cc-av{flex:none;width:26px;height:26px;font-size:12px}
.tc-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--lime);color:var(--ink);font-size:12.5px;font-weight:600}
.hk .t-help{min-height:330px}
.t-help .t-text{padding-bottom:150px}

/* Website Care strip: an icon, not a tiny face */
.cs-ic{flex:none;width:56px;height:56px;border-radius:16px;background:var(--lime);color:var(--ink);display:flex;align-items:center;justify-content:center}
.cs-ic svg{width:24px;height:24px}
.care-strip{padding-left:24px}

/* support photo in the help band */
.band-photo{object-position:center 20%}

/* phones: show a strip of the hero photo right under the headline */
@media (max-width:640px){
 .xhero-home .xhero-grid{display:flex;flex-direction:column;gap:0}
 .xhero-home .xhero-copy{display:contents}
 .xhero-home .xh-rating{order:1}
 .xhero-home h1{order:2}
 .xhero-home .home-art{order:3;height:230px;margin:20px 0 4px}
 .xhero-home .xh-lede{order:4}
 .xhero-home .xh-ticks{order:5}
 .xhero-home .xh-actions{order:6}
 .xhero-home .xh-guar{order:7}
 .xhero-home .hero-photo{object-position:30% 30%}
 .xhero-home .hf-mail,.xhero-home .hf-chat{display:none}
 .xhero-home .hf-live{right:10px;left:auto;top:auto;bottom:12px}
}
.xhero-art.home-art{overflow:visible;border-radius:0}
.xhero-art .sel-tag{top:58%;left:-7%;bottom:auto;right:auto}
@media (max-width:640px){.xhero-art .sel-tag{top:56%;left:-3%}}
@media (max-width:640px){.xhero-home .xhero-grid{align-items:stretch}.xhero-home .home-art{width:100%}.xhero-home .xh-rating{align-self:flex-start}}
.nav-logo img{height:32px}.nav-logo{display:flex;align-items:center;padding:4px 0}

/* ===== round 3: full-page review ===== */
/* closing panel: two columns only on wide screens */
@media (max-width:900px){.cta-panel{grid-template-columns:1fr;padding:0 32px}.cta-person{display:none}}
@media (max-width:640px){.cta-panel{padding:0 24px}}
/* soft placeholder while pictures load */
.browser img,.mini-browser img,.hero-photo,.band-photo,.cta-person,.tile-photo,.hc-photo,.one-shot img{background:#E9EEF7}
/* plan cards: same rows on every card, greyed when not included */
.plan li.no{color:#9A9CA6}
.plan li.no:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5B7C0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")!important}
.plan .off{display:none}
/* homepage bento without the second support tile */
.hk .t-mail{grid-column:span 2}
.t-mail .inbox{max-width:520px}
.tile h3{max-width:22ch}
/* reviews: star row on each card */
.q-stars{display:inline-flex;gap:2px;margin-bottom:12px}
.q-stars svg{width:16px;height:16px;padding:2px;background:#00B67A;fill:#fff!important;stroke:none!important}
/* hero floating cards stay inside the page width */
.home-art .hf-mail{right:12px}
.home-art .hf-live{right:12px}
@media (max-width:900px){.hk .t-mail{grid-column:auto}}
@media (max-width:640px){
 /* hero: buttons first, then the photo */
 .xhero-home .xh-lede{order:3}
 .xhero-home .xh-actions{order:4}
 .xhero-home .xh-guar{order:5}
 .xhero-home .home-art{order:6;height:200px;margin:24px 0 0}
 .xhero-home .xh-ticks{order:7;margin-top:22px}
 .xh-actions{flex-direction:column;align-items:stretch;gap:6px}
 .xh-actions .xh-btn{justify-content:center}
 .xh-link{justify-content:center}
 /* care strip stacks */
 .care-strip{display:grid;grid-template-columns:56px 1fr;gap:12px 16px;padding:20px}
 .care-strip div{grid-column:2}
 .care-strip .care-price{grid-column:1 / -1}
 .care-strip .btn{grid-column:1 / -1;width:100%;justify-content:center}
 /* feature cards: one column, icon beside the text */
 .icards{grid-template-columns:1fr!important;gap:10px}
 .icard{display:grid;grid-template-columns:40px 1fr;gap:4px 14px;padding:16px}
 .icard .i-ic{grid-row:span 2}
 .icard h3{margin:0!important;font-size:16px}
 .icard p{margin:0;font-size:14px}
 /* stats: two neat columns */
 .stats-row{grid-template-columns:1fr 1fr!important;gap:20px 16px}
 .stats-row span{font-size:13px}
 /* footer regions as a two-column list */
 .foot-regions{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
 .foot-regions>span{grid-column:1 / -1;margin-bottom:4px}
 /* help band: no empty space above the chat card */
 .band-art{margin-bottom:8px}
}
/* trust row under the plans */
.trust-row{max-width:1120px;margin:28px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font-size:14px;color:var(--ink-2)}
.trust-row span{display:inline-flex;align-items:center;gap:8px}
.trust-row svg{width:18px;height:18px;color:var(--blue)}
.plan li.nf{color:#6B6E7B}
.plan li.nf:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5B7C0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")!important}
/* wide email tile: text left, inbox right */
@media (min-width:901px){.hk .t-mail{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto 1fr;column-gap:32px;align-items:start}.t-mail h3{grid-column:1}.t-mail p{grid-column:1}.t-mail .inbox{grid-column:2;grid-row:1 / span 2;align-self:center;max-width:none;margin:0}}
@media (max-width:640px){.trust-row{justify-content:flex-start;flex-direction:column;align-items:flex-start;padding:0 8px}.band-art .chat-card{bottom:-36px}.band-art{margin-bottom:44px}.band-photo{object-position:center 8%}}
@media (max-width:640px){.band-art .chat-card{bottom:-64px;width:220px}.band-art{margin-bottom:72px}}
/* trust strip under heroes */
.xh-proof{flex-wrap:wrap;gap:10px 28px;font-size:14px}
.xh-proof .xp{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.82)}
.xh-proof .xp>svg{width:18px;height:18px;color:var(--lime)}
.xh-proof .xp b{color:#fff;font-weight:600}
.xhero-home .xh-proof{margin-top:-24px}
@media (max-width:640px){.xh-proof{justify-content:flex-start;gap:10px 18px;font-size:13px}.xhero-home .xh-proof{margin-top:0}}

/* ===== round 5: vs current site ===== */
/* region suggestion: slim bar, never a pop-up */
.region-bar{background:#EDF3FF;color:var(--ink);font-size:14px;border-bottom:1px solid #D6E4FF}
.region-bar .wrap{display:flex;align-items:center;gap:16px;min-height:48px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.region-bar span{flex:1;min-width:220px}
.rb-go{font-weight:600;color:#fff!important;background:var(--blue);padding:8px 14px;border-radius:10px}
.rb-x{background:none;border:0;font:inherit;color:var(--muted);cursor:pointer;padding:8px 4px}
/* product heroes: the offer is a small label, the product is the headline */
.xh-accent{display:inline-block;font-size:14px!important;line-height:20px!important;font-weight:600;letter-spacing:.01em;color:var(--lime)!important;background:rgba(212,246,74,.12);padding:6px 12px;border-radius:999px;margin-bottom:18px!important}
.xhero:not(.xhero-home) h1{font-size:56px;line-height:64px;letter-spacing:-.015em}
@media (max-width:640px){.xhero:not(.xhero-home) h1{font-size:40px;line-height:48px}}
/* Website Care section */
.care-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:start}
.care-steps{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.care-steps li{display:grid;grid-template-columns:44px 1fr;gap:16px}
.care-steps li>span{width:44px;height:44px;border-radius:12px;background:var(--blue-50);color:var(--blue);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:18px}
.care-steps h3{margin:2px 0 6px;font-size:20px;font-weight:500}
.care-steps p{margin:0;color:var(--muted);line-height:1.55}
.care-steps .care-steps-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-left:60px}
.care-steps-cta small{color:var(--muted);font-size:14px}
.care-plans{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cplan{border:1px solid var(--line);border-radius:20px;padding:24px;background:#fff;display:flex;flex-direction:column}
.cplan-star{border:2px solid var(--blue)}
.cp-name{margin:0;font-weight:600;font-size:18px}
.cp-price{margin:10px 0 0;font-size:40px;line-height:1;letter-spacing:-.02em}
.cp-price small{font-size:16px;color:var(--muted);letter-spacing:0}
.cp-note{margin:8px 0 0;font-size:13px;color:var(--muted)}
.cplan .checks{margin:18px 0 22px;flex:1}
.cplan .checks li{font-size:15px}
.cplan .btn{width:100%;justify-content:center}
.cp-once{grid-column:1 / -1;margin:4px 0 0;font-size:15px;color:var(--ink-2);text-align:center}
.cp-once a{color:var(--blue-700);font-weight:600}
@media (max-width:900px){.care-grid{grid-template-columns:1fr;gap:36px}}
@media (max-width:640px){.care-plans{grid-template-columns:1fr}.care-steps .care-steps-cta{padding-left:0}.care-steps-cta .btn{width:100%;justify-content:center}}
/* live recent designs: match the site's card style */
#recent .hks-grid{gap:20px}
#recent .hks-card{border:0;border-radius:16px;background:#fff;box-shadow:0 1px 0 var(--line)}
#recent .hks-card:hover{box-shadow:0 18px 40px -20px rgba(6,11,31,.35)}
#recent .hks-shot{height:240px;border-bottom:1px solid var(--line)}
#recent .hks-meta{padding:16px 18px}
#recent .hks-meta b{font-weight:600;color:var(--ink)}
#recent .hks-more a{display:inline-flex;align-items:center;min-height:48px;padding:0 28px;border-radius:12px;border:1px solid var(--ink);color:var(--ink);font-weight:600}
[data-hk-showcase-wrap]:not(:has(.hks-grid)){display:none}


/* ===== v7: templates for the full sites ===== */
.sec-top-sm{padding-top:48px}
/* four-plan grids (reseller) */
.plans.plans-4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1240px;gap:16px}
.plans-4 .plan{padding:24px}
.plans-4 .plan-price{font-size:40px}
.plans-4 .plan-star{margin-top:0}
.plan .was{min-height:20px}
@media (max-width:1100px){.plans.plans-4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.plans.plans-4{grid-template-columns:1fr}}

/* Website Care plans: three across */
.care-plans-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.care-grid .care-plans-3{grid-template-columns:1fr 1fr}
.care-grid .care-plans-3 .cplan:nth-child(3){grid-column:1 / -1}
.care-plans-wide{max-width:1120px;margin:0 auto}
.cp-for{margin:6px 0 0;font-size:14px;color:var(--muted);line-height:1.45}
.care-grid-1{grid-template-columns:1fr;max-width:720px;margin:0 auto}
@media (max-width:900px){.care-plans-3,.care-grid .care-plans-3{grid-template-columns:1fr}.care-grid .care-plans-3 .cplan:nth-child(3){grid-column:auto}}

/* article pages: guides, legal, about */
.art-hero{background:#05070F;color:#fff;padding:56px 0 64px}
.art-hero h1{margin:10px 0 0;font-size:48px;line-height:56px;font-weight:400;letter-spacing:-.015em;max-width:880px}
.art-lede{margin:16px 0 0;font-size:18px;line-height:28px;color:rgba(255,255,255,.78);max-width:760px}
.art-hero-center{text-align:center}
.art-hero-center h1,.art-hero-center .art-lede{margin-left:auto;margin-right:auto}
.art-hero-center .dhero-btns{justify-content:center}
.art-crumb{display:flex;align-items:center;gap:6px;margin:0;font-size:14px;color:rgba(255,255,255,.6)}
.art-crumb a{color:rgba(255,255,255,.85)}
.art-crumb svg{width:14px;height:14px}
.art-sec{padding:56px 0 88px}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:start}
.art-grid.no-aside{grid-template-columns:minmax(0,760px);justify-content:center}
.art-aside{position:sticky;top:24px}
.aside-card{border:1px solid var(--line);border-radius:20px;padding:24px;background:#fff;display:flex;flex-direction:column;gap:10px}
.aside-card .btn{width:100%;justify-content:center}
.ac-k{margin:0;font-size:14px;color:var(--muted)}
.ac-p{margin:0;font-size:40px;line-height:1;letter-spacing:-.02em}
.ac-p small{font-size:16px;color:var(--muted)}
.ac-n{margin:0 0 6px;font-size:13px;color:var(--muted)}
.aside-card .checks{margin:8px 0 0}
.aside-card .checks li{font-size:14px}
.toc{border-left:2px solid var(--line);padding-left:18px}
.toc p{margin:0 0 10px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.toc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;max-height:70vh;overflow:auto}
.toc a{color:var(--ink-2)}
.toc a:hover{color:var(--blue-700)}
.prose{font-size:17px;line-height:1.7;color:var(--ink-2);max-width:760px}
.prose>*:first-child{margin-top:0}
.prose h2{margin:44px 0 12px;font-size:30px;line-height:1.25;font-weight:400;letter-spacing:-.01em;color:var(--ink);scroll-margin-top:24px}
.prose h3{margin:30px 0 8px;font-size:21px;line-height:1.3;font-weight:500;color:var(--ink)}
.prose h4{margin:24px 0 6px;font-size:18px;font-weight:600;color:var(--ink)}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:6px 0}
.prose ul li::marker{color:var(--blue)}
.prose a{color:var(--blue-700);text-decoration:underline;text-underline-offset:2px}
.prose strong,.prose b{color:var(--ink);font-weight:600}
.prose blockquote{margin:20px 0;padding:16px 20px;border-left:3px solid var(--blue);background:var(--blue-50);border-radius:0 12px 12px 0}
.prose table{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:15px;display:block;overflow-x:auto}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--soft);color:var(--ink);font-weight:600}
.prose hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.legal-prose{font-size:16px}
.legal-prose h2{font-size:24px;margin-top:40px}
.legal-prose h3{font-size:18px}
@media (max-width:1000px){.art-grid{grid-template-columns:1fr;gap:32px}.art-aside{position:static}}
@media (max-width:640px){.art-hero{padding:36px 0 44px}.art-hero h1{font-size:34px;line-height:42px}.art-lede{font-size:16px;line-height:26px}.prose{font-size:16px}.prose h2{font-size:24px}.art-sec{padding:36px 0 56px}}

/* guide cards */
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gcard{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:20px;background:var(--soft);color:var(--ink);transition:background .2s}
.gcard:hover{background:var(--blue-50)}
.gcard h3{margin:6px 0 0;font-size:20px;font-weight:500;line-height:1.3}
.gcard p{margin:0;flex:1;font-size:15px;line-height:1.55;color:var(--muted)}
.gcard .t-link{color:var(--blue-700);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.gcard .t-link svg{width:16px;height:16px}
@media (max-width:900px){.guide-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.guide-grid{grid-template-columns:1fr}}

/* domain pages */
.dhero{background:radial-gradient(900px 420px at 50% 120%,rgba(26,102,255,.45),transparent 70%),#05070F;color:#fff;padding:64px 0 72px;text-align:center}
.dhero h1{margin:0;font-size:56px;line-height:64px;font-weight:400;letter-spacing:-.015em}
.dhero .art-lede{margin-left:auto;margin-right:auto}
.dsearch-big{max-width:760px;margin:32px auto 0;height:64px;padding-left:22px;background:#fff;border-color:#fff}
.dsearch-big>svg{color:var(--muted)}
.dsearch-big input{color:var(--ink);font-size:18px}
.dsearch-big input::placeholder{color:#8A8D99}
.dsearch-big button{height:52px;padding:0 32px;background:var(--blue);color:#fff;font-size:16px}
.dhero-note{margin:16px 0 0;font-size:14px;color:rgba(255,255,255,.75)}
.dhero-btns{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.tld-feat{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 32px;margin:0 0 20px;border-radius:20px;background:#05070F;color:#fff}
.tf-tld{margin:0;font-size:40px;line-height:1;font-weight:500;color:var(--lime)}
.tld-feat p{margin:8px 0 0;max-width:560px;color:rgba(255,255,255,.8)}
.tf-buy{display:flex;align-items:center;gap:20px;flex:none}
.tf-price{margin:0!important;font-size:36px;color:#fff!important}
.tf-price small{font-size:16px;color:rgba(255,255,255,.7)}
.tld-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tld{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:16px;background:#fff;color:var(--ink);border:1px solid var(--line);transition:border-color .2s,transform .2s}
.tld:hover{border-color:var(--blue)}
.tld b{font-size:26px;font-weight:600;letter-spacing:-.01em}
.tld-p{font-size:16px;font-weight:600;color:var(--blue-700)}
.tld small{font-size:13px;line-height:1.45;color:var(--muted)}
.band-light{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:36px 40px;border-radius:24px;background:var(--blue-50)}
.band-light h2{margin:0;font-size:32px;font-weight:400}
.band-light p{margin:8px 0 0;color:var(--muted)}
.steps4{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.steps4 li{padding:24px;border-radius:20px;background:var(--soft)}
.steps4 li>span{display:flex;width:40px;height:40px;border-radius:12px;align-items:center;justify-content:center;background:var(--blue);color:#fff;font-weight:700}
.steps4 h3{margin:16px 0 6px;font-size:19px;font-weight:500}
.steps4 p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.steps-cta{text-align:center;margin:36px 0 0}
@media (max-width:1000px){.tld-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.steps4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.dhero{padding:40px 0 48px}.dhero h1{font-size:38px;line-height:46px}.dsearch-big{height:56px}.dsearch-big button{height:44px;padding:0 18px}.tld-grid{grid-template-columns:1fr 1fr}.tld-feat{flex-direction:column;align-items:flex-start;padding:24px}.tf-buy{flex-wrap:wrap}.band-light{flex-direction:column;align-items:flex-start;padding:28px}.steps4{grid-template-columns:1fr}}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:start}
.chat-box{padding:36px;border-radius:24px;background:#05070F;color:#fff}
.chat-box h2{margin:16px 0 6px;font-size:36px;font-weight:400}
.chat-box>p{color:rgba(255,255,255,.8)}
.chat-box .ci{color:rgba(255,255,255,.85)}
.chat-box .ci svg{color:var(--lime)}
.ci-note{font-size:14px;line-height:1.55;color:rgba(255,255,255,.65)!important;margin:0 0 24px}
.live-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(212,246,74,.12);color:var(--lime);font-size:13px;font-weight:600}
.ci{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;font-size:15px;line-height:1.5}
.ci svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--blue)}
.ci a{color:var(--blue-700);text-decoration:underline}
.ccards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ccard{padding:20px;border-radius:16px;background:var(--soft)}
.ccard h3{margin:12px 0 4px;font-size:18px;font-weight:500}
.ccard p{margin:0 0 8px;font-size:14px;line-height:1.5;color:var(--muted)}
.ccard a{font-weight:600;color:var(--blue-700);word-break:break-all}
.cinfo{margin-top:20px;padding:20px;border-radius:16px;border:1px solid var(--line)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:640px){.ccards{grid-template-columns:1fr}.chat-box{padding:28px}}

/* pricing extras */
.more-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.more-card{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:16px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.more-card b{margin-top:10px;font-size:18px;font-weight:500}
.more-card span:last-child{color:var(--muted);font-size:14px}
@media (max-width:900px){.more-grid{grid-template-columns:1fr 1fr}}

/* 404 */
.nf-hero{padding:96px 0}
.nf-code{margin:0;font-size:96px;line-height:1;font-weight:500;color:var(--lime);letter-spacing:-.03em}
.nf-links{margin:28px 0 0;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.nf-links a{color:rgba(255,255,255,.85);text-decoration:underline}

/* hero tag for product pages without a strike price */
.xh-price .xh-tag{margin-left:14px}

/* cookie banner (consent.js) */
.hk-consent{position:fixed;left:16px;bottom:16px;z-index:2147483600;max-width:400px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px -24px rgba(6,11,31,.45);padding:18px 20px;font:15px/1.5 'DM Sans',sans-serif}
.hk-consent[hidden]{display:none}
.hk-consent p{margin:0 0 14px}
.hk-consent a{color:var(--blue-700);text-decoration:underline}
.hk-consent-btns{display:flex;gap:10px}
.hk-consent-btn{flex:1;min-height:44px;border-radius:12px;border:1px solid var(--ink);background:#fff;color:var(--ink);font:600 15px 'DM Sans',sans-serif;cursor:pointer}
.hk-consent-btn[data-consent="granted"]{background:var(--blue);border-color:var(--blue);color:#fff}
@media (max-width:600px){.hk-consent{left:12px;right:12px;bottom:12px;max-width:none;padding:16px}}
.foot .hk-cookie-link{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.plans-4 .plan-star{padding-top:56px}

/* ===== phone fixes ===== */
.dsearch{min-width:0}
@media (max-width:640px){
 .dbar{gap:0}.dbar-note{display:none}
 .dsearch{padding-left:14px}.dsearch button{padding:0 16px;flex:none}
 .dsearch input{font-size:16px}
 .ccard a{display:inline-flex;align-items:center;min-height:44px}
 .nf-links{gap:4px 18px}.nf-links a{display:inline-flex;align-items:center;min-height:44px}
 .ci a{display:inline-block;padding:6px 0}
 .art-crumb a{display:inline-flex;align-items:center;min-height:40px}
 .toc a{display:inline-block;padding:6px 0}
}
@media (max-width:380px){.xhero-home h1,.art-hero h1{font-size:32px;line-height:40px}.dhero h1{font-size:34px;line-height:42px}.plan-price{font-size:44px}}
.prose-cols{max-width:1040px;margin:0 auto;columns:2;column-gap:56px;font-size:16px}
.prose-cols h3{break-after:avoid;margin-top:0}
.prose-cols>*{break-inside:avoid-column}
.prose-cols ul{break-inside:avoid}
@media (max-width:900px){.prose-cols{columns:1}}
/* about page */
.about-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:48px;align-items:center}
.about-team{width:100%;height:auto;border-radius:20px;display:block}
.about-stats{padding:56px 0}
.about-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px;align-items:start}
.about-story .prose h2{margin-top:0}
.about-gallery{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.about-gallery img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;display:block}
.about-gallery img:first-child{grid-column:1 / -1;aspect-ratio:2/1}
.timeline{list-style:none;margin:0 auto;padding:0;max-width:820px;position:relative}
.timeline:before{content:"";position:absolute;left:52px;top:8px;bottom:8px;width:2px;background:var(--line)}
.timeline li{display:grid;grid-template-columns:104px 1fr;gap:20px;padding:0 0 28px;position:relative}
.tl-y{justify-self:start;padding:6px 12px;border-radius:999px;background:var(--blue);color:#fff;font-weight:600;font-size:15px;position:relative;z-index:1}
.timeline h3{margin:2px 0 6px;font-size:20px;font-weight:500}
.timeline p{margin:0;color:var(--muted);line-height:1.6}
@media (max-width:900px){.about-hero,.about-story{grid-template-columns:1fr}.about-hero{gap:28px}}
@media (max-width:640px){.timeline:before{left:30px}.timeline li{grid-template-columns:64px 1fr;gap:14px}.tl-y{font-size:13px;padding:5px 9px}}
/* 4-plan rows: lift the "Most popular" card by its flag height so names, prices and buttons line up */
.plans-4 .plan-star{margin-top:-32px}
@media (max-width:640px){.plans.plans-4 .plan-star{margin-top:0}}
/* compare table: scroll inside its box on phones instead of widening the page */
.compare{width:100%;min-width:0}
.compare .table-wrap{width:100%;max-width:calc(100vw - 32px);overflow-x:auto;position:relative}
.yes,.no{position:relative}
/* 'More about' accordion under the FAQ */
.sec-more{padding-top:0}
.sec-more .more-a{padding:0 0 18px;color:var(--muted);font-size:15.5px;line-height:1.65}
.sec-more .more-a p{margin:0 0 10px}.sec-more .more-a ul{margin:0 0 10px;padding-left:20px}
/* comparison pulled out of the page text (e.g. agency vs do it yourself vs Website Care) */
.compare-ways{max-width:1040px}
.compare-ways .table-wrap{margin-top:0}
.compare-ways th,.compare-ways td{text-align:left;vertical-align:top;padding:16px 20px;line-height:1.5}
.compare-ways thead th{font-size:16px;background:#fff}
.compare-ways tbody th,.compare-ways tbody td:first-child{font-weight:600;color:var(--ink)}
.compare-ways th:last-child,.compare-ways td:last-child{background:var(--blue-50);color:var(--ink);font-weight:600}
.cw-cta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:28px 0 0;color:var(--muted);font-size:15px}
@media (max-width:640px){
 .compare-ways .table-wrap{overflow:visible;background:none;border:0}
 .compare-ways table{min-width:0}
 .compare-ways thead{display:none}
 .compare-ways tbody tr{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;margin:0 0 12px;overflow:hidden}
 .compare-ways tbody th,.compare-ways tbody td{display:block;border:0;padding:6px 16px}
 .compare-ways tbody td:first-child{padding-top:14px;font-size:16px}
 .compare-ways tbody td[data-label]::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
 .compare-ways tbody td:last-child{padding-bottom:14px;padding-top:10px}
}
/* every card in a plan row ends on the same line */
.plans{align-items:stretch}
/* ---- 27 Oct design review ---- */
/* no lone words: headings balance their lines, paragraphs avoid a single last word */
h1,h2,h3,h4,summary,.plan-for,.cs-copy b,.care-strip b{text-wrap:balance}
p,li,dd,.art-lede{text-wrap:pretty}
/* short labels stay on one line */
.btn,.plan-flag,.xp,.assure span,.trust-row span,.tld-p,.plan-price,.cp-price,.care-price,.was,.tab-labels label,.pill,.badge{white-space:nowrap}
/* sections after the plans keep their top space now the long text moved to the bottom */
.sec-soft+.sec-top0{padding-top:104px}
.sec-soft+.sec-soft{padding-top:0}
.sec:not(.sec-soft):not(.cta-sec)+.sec#faq{padding-top:24px}
.art-sec+.sec#faq{padding-top:0}
@media (max-width:640px){.sec-soft+.sec-top0{padding-top:64px}}
/* plan cards: the description takes the same room in every card, so prices and buttons line up */
.plans .plan-for{min-height:3.3em}
.plans-4 .plan-for{min-height:0}
/* extension cards: a short last row sits in the middle */
.tld-grid{display:flex!important;flex-wrap:wrap;justify-content:center}
.tld-grid>*{flex:0 1 calc(25% - 18px)}
@media (max-width:900px){.tld-grid>*{flex-basis:calc(50% - 10px)}}
@media (max-width:640px){
 /* stacked buttons are the same width */
 .cta-btns,.dhero-btns,.xh-btns,.hero-btns{flex-direction:column;align-items:stretch}
 .cta-btns .btn,.dhero-btns .btn,.xh-btns .btn,.hero-btns .btn,.xhero .btn-lg{width:100%;justify-content:center}
 /* hero trust items in a tidy two-column grid */
 .xh-proof{display:grid!important;grid-template-columns:1fr 1fr;gap:12px 16px!important;justify-items:start;text-align:left}
 .xh-proof .xp{white-space:normal;align-items:flex-start;font-size:13px}
 .btn{white-space:normal}
}
@media (max-width:640px){
 .xhero .xh-btn{width:100%;justify-content:center;text-align:center}
 .foot-regions{column-gap:32px!important}
 .foot-regions>span{grid-column:1/-1}
}
/* homepage Website Care: cards get the room so their lines don't break; steps sit in the middle */
@media (min-width:1025px){.care-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:40px;align-items:center}}
.cplan .checks li{text-wrap:pretty}
/* card and band headings that should read on one line */
.band-copy h2{max-width:none}
@media (min-width:1025px){.band-copy h2{font-size:clamp(30px,2.9vw,44px)}}
footer a,.foot a{white-space:nowrap}
.v1-wrap .hkb-opts label{white-space:nowrap}
@media (max-width:640px){.xh-proof{grid-template-columns:1fr!important}.xh-proof .xp{white-space:nowrap}}
/* menu dropdowns: each description on one line */
@media (min-width:1025px){.dd{width:auto;min-width:360px}.dd small{white-space:nowrap}}
/* pricing page */
.price-hero{padding-bottom:40px}
.price-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:28px auto 0;max-width:900px}
.price-nav a{padding:10px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:#fff;font-size:15px;font-weight:500;white-space:nowrap;text-decoration:none}
.price-nav a:hover{background:rgba(255,255,255,.1)}
.sec-white{background:#fff}
.price-block{scroll-margin-top:24px}
.sec-soft.price-block+.sec-white.price-block,.sec-white.price-block+.sec-soft.price-block{padding-top:96px}
.dom-prices{list-style:none;margin:0 auto;padding:0;max-width:1040px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dom-prices li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:#fff}
.dom-prices b{font-size:20px;font-weight:500}
.dom-prices span{color:var(--blue);font-weight:600;white-space:nowrap}
.dom-more{text-align:center;margin:28px 0 0}
#prose .prose-cols{columns:1;max-width:760px}
@media (max-width:900px){.dom-prices{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.price-nav{gap:6px}.price-nav a{padding:8px 14px;font-size:14px}.price-block{scroll-margin-top:12px}}
.sec-white.price-block+#prose{padding-top:0}
#prose+#faq{padding-top:0}
/* about: tidy timeline markers and a centred offers grid */
.timeline li{align-items:start}
.tl-y{align-self:start;justify-self:center;width:64px;text-align:center;padding:5px 0!important;font-size:14px!important;line-height:20px}
.timeline:before{left:52px}
@media (max-width:640px){.timeline li{grid-template-columns:64px 1fr}.timeline:before{left:31px}}
.about-offers .icards{display:flex;flex-wrap:wrap;justify-content:center}
.about-offers .icard{flex:0 1 calc(33.333% - 14px)}
@media (max-width:900px){.about-offers .icard{flex-basis:calc(50% - 10px)}}
@media (max-width:640px){.about-offers .icard{flex-basis:100%}}
/* Website Care cards: "Most popular" flag like the hosting plans */
.cplan{position:relative}
.cplan-star{padding-top:56px}
.cplan-star .plan-flag{border-radius:18px 18px 0 0}
.care-plans{padding-top:32px;align-items:stretch}
.care-plans .cplan-star{margin-top:-32px}
@media (max-width:900px){.care-plans .cplan-star{margin-top:0}.care-plans{padding-top:0}}
.art-btns{margin:20px 0 8px}
/* contact: both columns the same height; email links sit at the bottom of their cards */
.contact-grid{align-items:stretch}
.contact-grid>*{height:100%}
.ccard{display:flex;flex-direction:column}.chat-box{height:100%;box-sizing:border-box}
.ccard>a:last-child{margin-top:auto}
/* country / currency picker in the header */
.cur-pick{position:relative}
.cur-pick>summary{list-style:none;cursor:pointer}
.cur-pick>summary::-webkit-details-marker{display:none}
.cur-dd{position:absolute;right:0;top:calc(100% + 12px);width:250px;padding:8px;border-radius:16px;background:#fff;color:var(--ink);box-shadow:0 30px 70px -20px rgba(4,9,24,.55),0 0 0 1px rgba(10,21,48,.06);z-index:30}
.cur-dd p{margin:6px 10px 6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cur-dd a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;color:var(--ink)!important;font-size:15px;text-decoration:none;white-space:nowrap}
.cur-dd a:hover{background:var(--soft)}
.cur-dd a small{color:var(--muted);font-size:13px}
.cur-dd a[aria-current]{background:var(--blue-50);font-weight:600}
.cur-dd a[aria-current] small{color:var(--blue)}
.cur-pick>summary{display:inline-flex;align-items:center;gap:8px}
/* affiliate earnings tables: full width, money lined up on the right */
.pg-affiliates .prose table{display:table;width:100%}
.pg-affiliates .prose th:not(:first-child),.pg-affiliates .prose td:not(:first-child){text-align:right}
.pg-affiliates .prose th,.pg-affiliates .prose td{padding:10px 14px;border-bottom:1px solid var(--line)}
/* contents list and price card beside articles stay in view while reading */
@media (min-width:1025px){.art-aside{align-self:start;position:sticky;top:24px}}
/* How it works (Website Care): three step cards in a row, button centred below */
.care-grid.care-grid-1{grid-template-columns:1fr;max-width:1120px}
.care-grid-1 .care-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.care-grid-1 .care-steps li:not(.care-steps-cta){grid-template-columns:1fr;gap:16px;padding:28px;border:1px solid var(--line);border-radius:20px;background:#fff}
.care-grid-1 .care-steps .care-steps-cta{grid-column:1 / -1;flex-direction:column;justify-content:center;gap:10px;padding-left:0;margin-top:8px}
@media (max-width:900px){.care-grid-1 .care-steps{grid-template-columns:1fr}}
/* "Looking for cPanel hosting?" strip on web hosting */
.cp-strip{background:#fff;border:1px solid var(--line)}
.cp-strip .cs-ic{background:var(--blue-50);color:var(--blue)}
.cp-strip + .care-strip{margin-top:16px}
.care-price em{font-style:normal;font-size:15px;color:var(--muted);letter-spacing:0;margin-right:6px}
/* ISPA page */
.ispa-logo{margin:28px 0}
.ispa-logo img{width:100%;max-width:360px;height:auto;display:block}
.ispa-contact{list-style:none;padding:20px 24px;margin:20px 0 0;border:1px solid var(--line);border-radius:16px;background:#fff}
.legal-prose .ispa-contact li{padding:3px 0;margin:0}
/* Compare all features on phones: feature name on its own line, every plan's value side by side below it, no sideways scroll */
@media (max-width:640px){
 .compare .table-wrap{overflow:visible;max-width:none}
 .compare table{min-width:0;display:block;font-size:14px}
 .compare thead,.compare tbody{display:block}
 .compare tr{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
 .compare thead tr{position:sticky;top:0;z-index:2;background:#fff;border-bottom:1px solid var(--line)}
 .compare thead th{padding:14px 4px;font-size:15px;border:0}
 .compare thead th:first-child{display:none}
 .compare thead th small{font-size:12px}
 .compare tr.grp th{grid-column:1 / -1;padding:10px 16px}
 .compare tbody th[scope=row]{grid-column:1 / -1;padding:12px 16px 2px;border-bottom:0;font-size:14px;color:var(--muted)}
 .compare tbody td{padding:4px 4px 12px;font-size:15px;font-weight:500;color:var(--ink)}
}
/* Product hero: show the whole dashboard window inside the box, so no label is cut at the edge */
.xhero-art:not(.home-art) .sel{left:6%;width:88%;top:12%}
.xhero-art:not(.home-art) .sel-shot{border-radius:14px}
@media (max-width:640px){.xhero-art:not(.home-art) .sel{left:5%;width:90%;top:14%}}
/* Homepage photo: keep the floating cards inside the photo on tablets and phones */
@media (max-width:900px){.home-art .hf{max-width:calc(100% - 24px)}.home-art .hf-live,.home-art .hf-mail{right:12px;left:auto}.home-art .hf-chat{left:12px;right:auto}}
@media (max-width:640px){.home-art .hf-live{top:auto;bottom:12px}}
/* Homepage email tile: points and link fill the left column, like the domains tile */
.t-mail .mail-checks{margin:20px 0 24px}
.t-mail .t-link{margin-top:auto}
@media (min-width:901px){.hk .t-mail{grid-template-rows:auto auto 1fr auto}.t-mail .mail-checks{grid-column:1;align-self:start}.t-mail .t-link{grid-column:1;grid-row:4}.t-mail .inbox{grid-row:1 / span 4}}
@media (max-width:900px){.t-mail .inbox{margin:0 0 24px}.t-mail .t-link{order:9}}
/* Builder: keep the left column in view beside the long form */
@media (min-width:992px){#hkb-step-form>.col-lg-4{position:sticky;top:32px;align-self:flex-start}}
.hk .t-mail .t-link{color:#1550D6}
/* Pricing page domain cards on phones: price under the extension so two columns fit */
@media (max-width:640px){.dom-prices{gap:10px}.dom-prices li{flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px;min-width:0}.dom-prices b{font-size:18px}}
/* Narrow phones (320px): let the footer legal links wrap, and plan cards shrink */
.foot-legal{flex-wrap:wrap;row-gap:8px}
.plans>.plan{min-width:0}
@media (max-width:340px){.plan-price{font-size:40px}}
@media (max-width:360px){.tab-labels label{white-space:normal;text-align:center;padding-left:12px;padding-right:12px;font-size:14px}}
@media (max-width:360px){.hk .tab-labels{min-width:0;max-width:100%}.hk .tab-labels label{white-space:normal;min-width:0;flex:1 1 0;text-align:center;padding-left:10px;padding-right:10px;font-size:14px;line-height:1.25}}
/* builder pages: Bootstrap's wide gutter pushes the form past the screen edge on small phones */
@media (max-width:575px){.row.g-5{--bs-gutter-x:1.5rem}}
@media (max-width:360px){.xh-proof .xp,.v1-hero .xp{white-space:normal}}
/* Phones: plans stay in price order (Launch, Starter, Premium), matching the "from" price in the hero */
@media (max-width:900px){.plans .plan-star{order:0}}
/* domain renewal prices */
.tld .tld-r{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.dom-prices span small{display:block;font-size:12px;font-weight:500;color:var(--muted);text-align:right}
/* Care cards: features a plan doesn't include get a grey dash, not a tick */
.cplan li.nf{color:#6B6E7B}
.cplan li.nf:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5B7C0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")!important;background-color:transparent!important}
/* "More about" as one closed block (audit 28 Oct 2026) */
.more-all{max-width:1040px;margin:0 auto;border:1px solid var(--line);border-radius:20px;background:#fff}
.more-all>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 28px}
.more-all>summary::-webkit-details-marker{display:none}
.more-all>summary h2{margin:0;font-size:22px;line-height:1.3;font-weight:500;letter-spacing:-.01em}
.more-all>summary .ma-hint{flex:none;font-size:14px;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.more-all>summary .ma-hint:after{content:"+";font-size:22px;line-height:1;color:var(--ink)}
.more-all[open]>summary .ma-hint:after{content:"–"}
.ma-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 40px;padding:4px 28px 26px;border-top:1px solid var(--line)}
.ma-item h3{margin:20px 0 6px;font-size:17px;font-weight:600}
.ma-item p,.ma-item li{color:var(--muted);font-size:15.5px;line-height:1.65}
.ma-item p{margin:0 0 10px}.ma-item ul{margin:0 0 10px;padding-left:20px}
@media (max-width:760px){.ma-grid{grid-template-columns:1fr;padding:0 20px 20px}.more-all>summary{padding:18px 20px;flex-wrap:wrap}.more-all>summary h2{font-size:19px}.more-all>summary .ma-hint{font-size:13px}}
/* legal pages: contents list (audit 28 Oct 2026) */
@media (min-width:1025px){.art-aside .toc ul{max-height:calc(100vh - 110px)}}
@media (max-width:1024px){
 .art-grid>.art-aside:has(.toc){order:-1;margin:0 0 28px}
 .art-aside .toc{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fff}
 .art-aside .toc ul{max-height:220px;overflow:auto;gap:2px}
}
.tf-price .tf-renew{display:block;font-size:13px;font-weight:400;letter-spacing:0;color:rgba(255,255,255,.65);margin-top:4px}